diff --git a/config/guide-release-values.json b/config/guide-release-values.json index 2b123abd6..2c5a63538 100644 --- a/config/guide-release-values.json +++ b/config/guide-release-values.json @@ -2,14 +2,14 @@ "schema": "ui-doc.guide-release-values.v1", "why": "The release values the guide's pages name in its examples and tables, as last written. scripts/sync-framework-documentation-versions.php replaces each with the pinned value from scripts/materialize-framework-runtime.php and records the new set here; --check fails while a page still names an old one. `keep` lists the exact spans that name a past release on purpose; the sync leaves them as written.", "values": { - "ui_runtime": "2bd5a3ab478a46fcee24d2460e7792135b0bb864", - "ui_record": "c4d7d46f481d15af1601ba1c937863d933ebde83", - "source": "d25a01f9989df2ec920364a23ed76d494d91844c", + "ui_runtime": "7fb26d395af28dfcaac2a5df9de254b3067dc4ae", + "ui_record": "4c012852f8d85530442ec813e4319905c3af1afe", + "source": "8c13bf45aecaae2c31188b729ef4765fc91bffae", "builder": "16e9a81c1f2838f7cfeebbbd19654016743c9672", - "pro": "dc13c0f724009847add06c25bf98a6c033c037db", + "pro": "db490626ba74caeed832352c7bc005410ca825e2", "pro_builder": "16e9a81c1f2838f7cfeebbbd19654016743c9672", - "release": "ui-2bd5a3ab478a", - "npm_version": "5.20261110.1541" + "release": "ui-7fb26d395af2", + "npm_version": "5.20261112.1807" }, "keep": [ { diff --git a/config/guide-structure.json b/config/guide-structure.json index 808d2f951..3e67d3ce7 100644 --- a/config/guide-structure.json +++ b/config/guide-structure.json @@ -365,6 +365,11 @@ "slug": "vertical-sizing", "title": "Значения вертикальных размеров", "order": 25 + }, + { + "slug": "horizontal-spacing", + "title": "Горизонтальные отступы", + "order": 47 } ] }, diff --git a/config/js-api-index.json b/config/js-api-index.json index c45c74cf5..641c042a3 100644 --- a/config/js-api-index.json +++ b/config/js-api-index.json @@ -52,6 +52,11 @@ "page": "/ru/guide/functions/actions/copy-text/", "label": "Копирование текста" }, + "SF.copyFeedback": { + "text": "Отклик копирования для своей кнопки: галочка, «Скопировано» для диктора, подсказка при отказе.", + "page": "/ru/guide/functions/actions/copy-text/", + "label": "Копирование текста" + }, "SF.codeCopy": { "text": "Код в тексте копируется по нажатию.", "page": "/ru/guide/functions/actions/code-copy/", diff --git a/config/public-variables.ru.json b/config/public-variables.ru.json index 4b8761869..e4785077b 100644 --- a/config/public-variables.ru.json +++ b/config/public-variables.ru.json @@ -307,6 +307,20 @@ "A cap's letters (in a button or a field): the ink it sits in, whole -- at least 4.5:1 against the cap's fill on every look of sf-button.": "Буквы клавиши в кнопке или поле: цвет текста места целиком — не меньше 4.5:1 к заливке клавиши на любом виде `sf-button`.", "Space above and below the content (decision C35: the first line stands in a low control's box inside it).": "Отступ над и под содержимым: первая строка стоит в рамке низкого элемента управления.", "Space between the icon, the text and the buttons (decision C35: the toast's icon gap).": "Промежуток между иконкой, текстом и кнопками.", - "The fixed width of a drilling panel (submenu=\"drill\"), the settings panel's own: it grows neither with a level's longest word nor with a value. By default --sf-popup-menu-max-width, the menu's ceiling of the popup widths, which follows density (C32).": "Постоянная ширина панели с переходами (`submenu=\"drill\"`), собственная ширина панели настроек: она не растёт ни от самого длинного слова уровня, ни от значения. По умолчанию — `--sf-popup-menu-max-width`, наибольшая ширина меню, которая следует плотности." + "The fixed width of a drilling panel (submenu=\"drill\"), the settings panel's own: it grows neither with a level's longest word nor with a value. By default --sf-popup-menu-max-width, the menu's ceiling of the popup widths, which follows density (C32).": "Постоянная ширина панели с переходами (`submenu=\"drill\"`), собственная ширина панели настроек: она не растёт ни от самого длинного слова уровня, ни от значения. По умолчанию — `--sf-popup-menu-max-width`, наибольшая ширина меню, которая следует плотности.", + "The card's fill at rest; hover, press and disabled keep their own. The former name --sf-download-file-background-color is still read, under this one, until 2027-01-01 (change journal token-file-download-variable-names).": "Заливка карточки в покое; у наведения, нажатия и недоступного состояния своя.", + "The card's border at rest; hover and disabled keep their own. The former name --sf-download-file-border-color is still read, under this one, until 2027-01-01 (change journal token-file-download-variable-names).": "Рамка карточки в покое; у наведения и недоступного состояния своя.", + "The card's corner radius. The former name --sf-download-file-radius is still read, under this one, until 2027-01-01 (change journal token-file-download-variable-names).": "Скругление углов карточки.", + "Space around the card's content, inside its border: the size's block step and the button's side padding, less the border, so the card stands as tall as a button of its size. The former name --sf-download-file-padding is still read, under this one, until 2027-01-01 (change journal token-file-download-variable-names).": "Отступ содержимого от рамки карточки: шаг размера по высоте и боковое поле кнопки за вычетом рамки, поэтому карточка той же высоты, что кнопка её размера.", + "Space between the icon and the file's name, and between the name and its size: the button's label inset of the size. The former name --sf-download-file-gap is still read, under this one, until 2027-01-01 (change journal token-file-download-variable-names).": "Промежуток между значком и именем файла и между именем и размером: отступ подписи кнопки того же размера.", + "The download icon's size: the button's icon of the size (its text height). The former name --sf-download-file-icon-size is still read, under this one, until 2027-01-01 (change journal token-file-download-variable-names).": "Размер значка скачивания: значок кнопки того же размера (высота её текста).", + "The download icon's colour; disabled keeps its own. The former name --sf-download-file-icon-color is still read, under this one, until 2027-01-01 (change journal token-file-download-variable-names).": "Цвет значка скачивания; у недоступного состояния свой.", + "The colour under the offline dot: the place the avatar stands on, laid over the nearest opaque place (--sf-surface-place-ground), so neither the photo nor the initials show through the dot (C43), on a soft coloured place too.": "Цвет под точкой «не в сети»: место, на котором стоит аватар, поверх ближайшего непрозрачного места (--sf-surface-place-ground), чтобы сквозь точку не просвечивали ни фото, ни инициалы (C43), и на мягком цветном месте тоже.", + "The ring under the arc, colour and alpha together: the ring has no opacity of its own.": "Кольцо под дугой — цвет и прозрачность вместе: своей прозрачности у кольца нет.", + "The words under the drawing: the ink of the place, the on-colour of the fill under the spinner.": "Подпись под рисунком: цвет текста места, цвет текста на заливке под спиннером.", + "The outline of the current step; none by default, the current step is a primary-container plate (C16, component.step 1.2.0).": "Обводка текущего шага; по умолчанию её нет, текущий шаг — плашка primary-container (C16, component.step 1.2.0).", + "The colour of the offline dot: the place's dim ink (since 2026-11-11; it was the place colour under the disabled ink, under 3:1), laid over the nearest opaque place (--sf-surface-place-ground), so neither the photo nor the initials show through the dot, on a soft coloured place too.": "Цвет точки «не в сети»: приглушённый цвет текста места (с 2026-11-11; раньше это был цвет места под цветом недоступного текста, контраст ниже 3:1) поверх ближайшего непрозрачного места (--sf-surface-place-ground), поэтому сквозь точку не видны ни фото, ни инициалы — и на мягком цветном месте тоже.", + "A layer over that colour, none by default (it was the disabled ink until 2026-11-11). A page may lay an image or a gradient over the dot here.": "Слой поверх этого цвета, по умолчанию его нет (до 2026-11-11 здесь был цвет недоступного текста). Страница может положить сюда картинку или градиент поверх точки.", + "Space between the steppers and the number.": "Расстояние между кнопками «−»/«+» и числом." } } diff --git a/config/smart-reference.json b/config/smart-reference.json index 277e9f54a..43cdc65ec 100644 --- a/config/smart-reference.json +++ b/config/smart-reference.json @@ -37,7 +37,9 @@ }, "skip": { "wizard": "New in ui-b58b5dec35e4 (sf-wizard); the site has no page for it yet. The page is a separate docs task; remove this entry when it lands.", - "wizard-step": "New in ui-b58b5dec35e4 (sf-wizard-step); the site has no page for it yet. The page is a separate docs task; remove this entry when it lands." + "wizard-step": "New in ui-b58b5dec35e4 (sf-wizard-step); the site has no page for it yet. The page is a separate docs task; remove this entry when it lands.", + "time": "New in ui-7f1d29b02919 (sf-time, C40); the site has no page for it yet. The page is a separate docs task; remove this entry when it lands.", + "change": "New in ui-7f1d29b02919 (sf-change, C40); the site has no page for it yet. The page is a separate docs task; remove this entry when it lands." }, "suppress": { "popover": { @@ -131,7 +133,8 @@ }, "slots": { "confirm": { - "description": "Пояснение под вопросом, когда одного вопроса мало: что останется, что пропадёт" + "description": "Пояснение под вопросом, когда одного вопроса мало: что останется, что пропадёт", + "options": "Вид окна: выбор, который страница делает вместе с ответом (флажок «Удалить сразу, без корзины»), на `--sf-space-2` ниже последствий" } }, "css_variables": { @@ -143,13 +146,13 @@ "--sf-confirm-border-color": "Цвет края карточки" }, "file-download": { - "--sf-download-file-background-color": "Заливка в покое; у наведения, нажатия и недоступного состояния свои", - "--sf-download-file-border-color": "Цвет рамки в покое", - "--sf-download-file-radius": "Скругление", - "--sf-download-file-padding": "Внутренний отступ", - "--sf-download-file-gap": "Промежуток между иконкой, именем и размером", - "--sf-download-file-icon-size": "Размер иконки", - "--sf-download-file-icon-color": "Цвет иконки" + "--sf-file-download-background-color": "Заливка в покое; у наведения, нажатия и недоступного состояния свои", + "--sf-file-download-border-color": "Цвет рамки в покое", + "--sf-file-download-radius": "Скругление", + "--sf-file-download-padding": "Внутренний отступ", + "--sf-file-download-gap": "Промежуток между иконкой, именем и размером", + "--sf-file-download-icon-size": "Размер иконки", + "--sf-file-download-icon-color": "Цвет иконки" }, "button-copy": { "--sf-copy-button-display": "Как кнопка стоит в строке: значение `display`", diff --git a/config/smart-reference.ru.json b/config/smart-reference.ru.json index 8ea8f0037..6d357ed97 100644 --- a/config/smart-reference.ru.json +++ b/config/smart-reference.ru.json @@ -2849,6 +2849,81 @@ "layout grid: at most this many columns (as many as fit at 11rem each)": "При `layout=\"grid\"` — наибольшее число колонок (столько, сколько помещается по 11rem).", "open: the answers are offered. pending: an answer is on its way (set by a press). accepted, declined, expired: only the outcome is shown. Declined by the person here, the surface folds away (hidden) and the focus goes back, with its ring, to the control that put the question, else the nearest focusable place around it or the next control of the page (DEV D2 on C35); a declined state the host sets without that answer stays shown.": "`open` — ответы предложены. `pending` — ответ в пути (ставится нажатием). `accepted`, `declined`, `expired` — показывается только итог. Если человек отказался здесь, поверхность сворачивается (`hidden`), а фокус с кольцом возвращается к элементу, который задал вопрос, иначе — к ближайшему доступному для фокуса месту рядом или к следующему элементу страницы; состояние `declined`, заданное приложением без такого ответа, остаётся видимым.", "row: a press anywhere in a row but its controls opens the record, through record.open as the title link does (sf-view-table row-open, C31).": "`row`: нажатие в любом месте строки, кроме её элементов управления, открывает запись через `record.open`, как ссылка заголовка (`row-open` у `sf-view-table`).", - "severity is the full checks page: a disclosure group per severity («Ошибки», «Предупреждения», «Рекомендации») open, «Пройдено» (passed) closed, an aligned column of affected counts; the time of the checks in the head": "`severity` — полная страница проверок: раскрывающаяся группа на каждую степень важности («Ошибки», «Предупреждения», «Рекомендации») открыта, «Пройдено» закрыта, выровненная колонка с числом затронутых объектов; время проверок в шапке." + "severity is the full checks page: a disclosure group per severity («Ошибки», «Предупреждения», «Рекомендации») open, «Пройдено» (passed) closed, an aligned column of affected counts; the time of the checks in the head": "`severity` — полная страница проверок: раскрывающаяся группа на каждую степень важности («Ошибки», «Предупреждения», «Рекомендации») открыта, «Пройдено» закрыта, выровненная колонка с числом затронутых объектов; время проверок в шапке.", + "A person pressed «Ещё N»: the folded events are shown in place and the focus moves to the first of them. {run: the id of the first folded event, ids: the revealed ids, count}. Nothing to answer: a host that loads a run's events lazily may use it": "Человек нажал «Ещё N»: свёрнутые события раскрываются на месте, фокус переходит на первое из них. В `detail`: `run` — id первого свёрнутого события, `ids` — раскрытые id, `count`. Отвечать не нужно; хост, который подгружает события серии позже, может взять его как сигнал.", + "A regular expression the whole value must match, as the native pattern; a value that does not match is invalid (pattern mismatch).": "Регулярное выражение, которому должно соответствовать всё значение, как у `pattern` браузера; несовпадающее значение неверно.", + "A short text drawn at the end of the field, after the value: a unit or a currency (kg, ₽, %). Empty: no text.": "Короткий текст в конце поля после значения: единица или валюта (кг, ₽, %). Пусто — текста нет.", + "A shorter track, one and a half times its height instead of two, for a tight row. The class sf-switch--short of the class markup, as a setting.": "Короткая дорожка — в полторы высоты вместо двух — для плотной строки. То же, что класс `sf-switch--short` в разметке на классах.", + "Accessible name for a field drawn without a visible label; it names the editing surface. A visible label wins.": "Доступное имя поля без видимой подписи; оно называет область ввода. Видимая подпись важнее.", + "Consecutive events of one actor and one kind within a day: a run longer than this keeps its first this-many events and folds the rest into one «Ещё N» row (a rest of one event is drawn), revealed in place on a press; events without an actor and steps make no run (the focus goes to the first revealed event, expand is said). 0 folds nothing": "Подряд идущие события одного автора и одного вида за день: если их больше этого числа, первые остаются, а остальные сворачиваются в одну строку «Ещё N» (одно оставшееся событие рисуется как есть) и раскрываются на месте по нажатию; события без автора и шаги в серию не входят. Фокус переходит на первое раскрытое событие, диктор сообщает о раскрытии. 0 — ничего не сворачивать.", + "Deprecated until 2027-01-01 (change journal attribute-input-country-presence-booleans): on by default, so it was switched off by the string \"false\", which is not an HTML boolean. Write eager-flags instead; lazy-flags=\"false\" keeps working until the date.": "Устаревший атрибут, работает до 2027-01-01: был включён по умолчанию и выключался строкой \"false\", что не булев атрибут HTML. Пишите `eager-flags`.", + "Deprecated until 2027-01-01 (change journal attribute-input-country-presence-booleans): on by default, so it was switched off by the string \"false\", which is not an HTML boolean. Write fixed-country instead; multi-country=\"false\" keeps working until the date.": "Устаревший атрибут, работает до 2027-01-01: был включён по умолчанию и выключался строкой \"false\", что не булев атрибут HTML. Пишите `fixed-country`.", + "Deprecated until 2027-01-01 (change journal attribute-input-country-presence-booleans): on by default, so it was switched off by the string \"false\", which is not an HTML boolean. Write fixed-mask instead; use-country-masks=\"false\" keeps working until the date.": "Устаревший атрибут, работает до 2027-01-01: был включён по умолчанию и выключался строкой \"false\", что не булев атрибут HTML. Пишите `fixed-mask`.", + "Deprecated until 2027-01-01 (change journal attribute-input-country-presence-booleans): on by default, so it was switched off by the string \"false\", which is not an HTML boolean. Write hide-code instead; show-code=\"false\" keeps working until the date.": "Устаревший атрибут, работает до 2027-01-01: был включён по умолчанию и выключался строкой \"false\", что не булев атрибут HTML. Пишите `hide-code`.", + "Every flag of the list is fetched when the list is built, not as its row comes into view. The presence form of lazy-flags=\"false\".": "Все флаги списка загружаются сразу, когда список строится, а не по мере появления строк на экране.", + "Example text shown in the empty field in the quiet ink; it disappears with the first character and is not a label.": "Пример текста в пустом поле тихим цветом; исчезает с первым символом и подписью не служит.", + "How many lines of text the field shows; longer text scrolls inside. Ignored with auto-grow.": "Сколько строк текста видно в поле; более длинный текст прокручивается внутри. С `auto-grow` не действует.", + "How the text is sent: soft sends it as typed; hard also sends the line breaks the field draws at its width, as the native wrap.": "Как отправляется текст: `soft` — как набран; `hard` — ещё и с переносами строк, которые поле рисует по своей ширине, как `wrap` браузера.", + "Marks the value as wrong: the error border, aria-invalid on the native control and error-message under the field.": "Отмечает значение как неверное: рамка ошибки, `aria-invalid` у поля и `error-message` под ним.", + "Milliseconds the field waits after the last key before it asks the provider.": "Сколько миллисекунд поле ждёт после последнего нажатия клавиши, прежде чем спросить поставщика.", + "Multiple only: the most items that may be chosen. A choice past it is refused with a visible line; 0 is no cap.": "Только при `multiple`: сколько вариантов можно выбрать самое большее. Лишний выбор отклоняется с видимой строкой; 0 — без ограничения.", + "Only the country iso2 or dial-code names: the flag and the code are a picture, not a list. The presence form of multi-country=\"false\".": "Только страна из `iso2` или `dial-code`: флаг и код — картинка, а не список.", + "Tab reaches each title link, each sf-time with its tooltip, each «Ещё N» row and the «Показать ещё» button in order; Enter follows a link, Enter or Space presses a button; Escape hides a time's tooltip": "`Tab` проходит по ссылкам заголовков, по каждому `sf-time` с его подсказкой, по строкам «Ещё N» и кнопке «Показать ещё» по порядку; `Enter` открывает ссылку, `Enter` или `Пробел` нажимают кнопку; `Escape` прячет подсказку времени.", + "Tab reaches the action link, acknowledge, each item's time (its tooltip), the paging arrows, «All N» and close in order": "`Tab` проходит по ссылке действия, «Принять к сведению», времени каждого пункта (с подсказкой), стрелкам листания, «Все N» и закрытию по порядку.", + "The autofill hint the browser reads, as the native autocomplete (email, tel, current-password, off). Empty: not written.": "Подсказка автозаполнения для браузера, как `autocomplete` (email, tel, current-password, off). Пусто — не пишется.", + "The control height (owner decision C27), as on sf-button: size sets the text, the icons and the inner scale, height picks the height from the size's tightness steps -- low, default, high, highest. The track stands as tall as an sf-button of the same size and height, and the buttons look draws sf-button with that height. A value outside the list reads as default, with one console warning.": "Высота контрола, как у `sf-button`: `size` задаёт текст, значки и внутренний масштаб, `height` выбирает высоту из ступеней размера — `low`, `default`, `high`, `highest`. Дорожка той же высоты, что `sf-button` того же размера и высоты, а вид «кнопки» рисует `sf-button` с этой высотой. Значение не из списка читается как `default`, с одним предупреждением в консоли.", + "The current text. Written by the page, it controls the field; the value property reads what is typed.": "Текущий текст. Если его пишет страница, она управляет полем; свойство `value` читает набранное.", + "The current value. Written by the page, it controls the field; the value property reads what is typed.": "Текущее значение. Если его пишет страница, она управляет полем; свойство `value` читает набранное.", + "The day headings stay in sight while the list scrolls (block list's sticky heading, C40), the place's solid surface behind them": "Заголовки дней остаются на виду при прокрутке списка, под ними сплошной фон места.", + "The dial code is not written before the number. The presence form of show-code=\"false\".": "Код страны не пишется перед номером.", + "The events in the order to show them (newest first, as a history reads, or oldest first, as a log does), each {id, title, time?, text?, actor?, status?, icon?, href?, kind?, state?, change?, changes?}. time is an ISO 8601 date-time (with its offset) or milliseconds, drawn by sf-time. actor is a name or {name, avatar?, hue?, system?}: sf-avatar line and the name in bold at the start of the sentence (a system actor: the name only). status (success, warning, error, info; neutral by default) tones the marker: error, warning and success colour it, info is said in words. icon is the glyph on the marker (.sf-featured-icon), else the kind's (comment chat_bubble, sms phone_iphone), else a dot. kind comment puts text in an outline under the meta line. state (done, current, upcoming) draws the events as steps, current is aria-current=step. change {label, before, after} (or changes, a list) is drawn by sf-change. href makes the title a link. A property, or the JSON island a server prints; the host appends the next page to it. An item without an id or a title, or with an id seen before, is left out": "События в порядке показа (сначала новые, как в истории, или сначала старые, как в журнале), каждое `{id, title, time?, text?, actor?, status?, icon?, href?, kind?, state?, change?, changes?}`. `time` — дата и время ISO 8601 (со смещением) или миллисекунды, рисует `sf-time`. `actor` — имя или `{name, avatar?, hue?, system?}`: аватар и имя полужирным в начале фразы (у системного автора — только имя). `status` (`success`, `warning`, `error`, `info`; по умолчанию нейтральный) задаёт тон отметки: `error`, `warning` и `success` её красят, `info` говорится словами. `icon` — значок на отметке (`.sf-featured-icon`), иначе значок вида (`comment` — `chat_bubble`, `sms` — `phone_iphone`), иначе точка. `kind: comment` ставит текст в обводку под строкой сведений. `state` (`done`, `current`, `upcoming`) рисует события шагами, у текущего `aria-current=step`. `change` `{label, before, after}` (или список `changes`) рисует `sf-change`. `href` делает заголовок ссылкой. Свойство или JSON-блок от сервера; следующую страницу хост дописывает в него. Событие без `id` или `title` или с уже встреченным `id` пропускается.", + "The fewest characters the text may have, as the native minlength; a shorter text is invalid (too short). Unset: no limit.": "Наименьшее число символов текста, как `minlength` браузера; более короткий текст неверен. Не задано — без ограничения.", + "The fewest characters the value may have, as the native minlength; a shorter value is invalid (too short). Empty: no limit.": "Наименьшее число символов значения, как `minlength` браузера; более короткое значение неверно. Пусто — без ограничения.", + "The field must hold a value: the label gets the required mark and the native control the required constraint.": "Поле должно быть заполнено: у подписи отметка обязательности, у поля — ограничение `required`.", + "The field takes no input, no focus and is not sent with the form; it draws the disabled look.": "Поле не принимает ввод и фокус и не уходит с формой; выглядит недоступным.", + "The field's accessible name when it has no visible label; it names the search box and the list.": "Доступное имя поля без видимой подписи; оно называет поле поиска и список.", + "The field's label, drawn above the row as sf-input's label and naming the colour input (1.6.0). For a name without a visible label, write aria-label.": "Подпись поля над строкой, как у `sf-input`; она же имя поля выбора цвета. Для имени без видимой подписи пишите `aria-label`.", + "The full mask configuration as JSON, for what mask-pattern cannot say; it wins over mask-pattern. Invalid JSON is ignored.": "Полная настройка маски в JSON — для того, что не выразить `mask-pattern`; важнее `mask-pattern`. Неверный JSON не учитывается.", + "The group headings stay in sight while the list scrolls (block list's sticky heading, C40), the place's solid surface behind them": "Заголовки групп остаются на виду при прокрутке списка, под ними сплошной фон места.", + "The help line under the field; on an error the error message takes its place.": "Строка подсказки под полем; при ошибке на её месте сообщение об ошибке.", + "The hue of the static palette the initials are drawn in (owner decision C17): the plate is the hue's container, the ink its on-container. Empty: the neutral look. auto: one of eight hues (pink, amber, lime, green, teal, sky, indigo, purple) picked from the name (heading, else aria-label, else text) by a fixed hash, the same in every browser and on a server; no name, the neutral look. Only initials take a hue: an image and the placeholder stay as they are. --sf-avatar-background-color and --sf-avatar-color still win.": "Оттенок статической палитры для инициалов: плашка — контейнер оттенка, буквы — его цвет текста. Пусто — нейтральный вид. `auto` — один из восьми оттенков (pink, amber, lime, green, teal, sky, indigo, purple), выбранный по имени (заголовок, иначе `aria-label`, иначе текст) постоянной хеш-функцией, одинаково в любом браузере и на сервере; без имени — нейтральный вид. Оттенок берут только инициалы: картинка и заглушка не меняются. `--sf-avatar-background-color` и `--sf-avatar-color` важнее.", + "The kind of text the field takes, the native input type: text, email, password (with a reveal button), search, tel, url or number (with min, max and step).": "Вид вводимого текста, как `type` браузера: `text`, `email`, `password` (с кнопкой показа), `search`, `tel`, `url` или `number` (с `min`, `max` и `step`).", + "The ladder rung: the sentence is the rung's line and type, the meta line and the comment label the rung below's, the marker (.sf-featured-icon) and the avatar line the rung below's. 1/2 for a side panel": "Ступень линейки: фраза — строка и шрифт ступени, строка сведений и подпись комментария — ступени ниже, отметка (`.sf-featured-icon`) и аватар — ступени ниже. `1/2` — для боковой панели.", + "The mask with mask on: 0 a digit, a a letter, * any character, {...} a fixed part kept in the value, [ ] an optional tail, \\ escapes the next character; any other character is shown only. Example: +{7} (000) 000-00-00.": "Маска при включённом `mask`: `0` — цифра, `a` — буква, `*` — любой символ, `{...}` — постоянная часть, которая остаётся в значении, `[ ]` — необязательный хвост, `\\` экранирует следующий символ; остальные символы только показываются. Пример: `+{7} (000) 000-00-00`.", + "The moment relative times and the day headings count from, ISO 8601, passed to every sf-time; empty: the reader's clock (sf-time redraws itself while relative, the list its day headings at midnight)": "Момент, от которого считаются относительное время и заголовки дней, ISO 8601; передаётся каждому `sf-time`. Пусто — часы читателя: `sf-time` перерисовывается, пока время относительное, а список — заголовки дней в полночь.", + "The most characters the search box takes; 0 is no limit.": "Сколько символов самое большее принимает поле поиска; 0 — без ограничения.", + "The most characters the text may have, as the native maxlength: the field takes no more. Unset: no limit.": "Наибольшее число символов текста, как `maxlength` браузера: больше поле не примет. Не задано — без ограничения.", + "The most characters the value may have, as the native maxlength: the field takes no more. Empty: no limit.": "Наибольшее число символов значения, как `maxlength` браузера: больше поле не примет. Пусто — без ограничения.", + "The name of an icon drawn at the end of the field as a hint (info, help). Empty: no icon.": "Значок-подсказка в конце поля (info, help). Пусто — значка нет.", + "The name of an icon drawn at the start of the field, before the value (a search glass, an envelope). Empty: no icon.": "Значок в начале поля перед значением (лупа, конверт). Пусто — значка нет.", + "The name the value is sent under in a form, as the native name.": "Имя, под которым значение уходит с формой, как `name` браузера.", + "The name the value is submitted under in a form: the handle's value, or both values joined by a comma (\"20,80\") with two handles.": "Имя, под которым значение уходит с формой: значение ручки или оба значения через запятую (\"20,80\") при двух ручках.", + "The plate under the selected option on the track. raised, the default: a neutral raised surface with its shadow (white in the light theme; in the dark the fill's pressed step, lighter than the track on any place, C42). scheme: the scheme's fill, an accent for the one switch on a screen that needs it.": "Плашка под выбранным вариантом на дорожке. `raised` (по умолчанию) — нейтральная поднятая поверхность с тенью: в светлой теме белая, в тёмной — ступень нажатия заливки, светлее дорожки на любом месте. `scheme` — заливка цвета схемы: акцент для единственного такого переключателя на экране.", + "The step of the control ladder the field stands on: the text size, the side padding and the height of one row are those of sf-input of the same size.": "Ступень линейки, на которой стоит поле: размер текста, боковое поле и высота строки — как у `sf-input` того же размера.", + "The text shown under the field while it is invalid, in the error colour, in place of the hint; it is the control's error message for assistive technology.": "Текст под полем, пока значение неверно, цветом ошибки, вместо подсказки; для вспомогательных технологий — сообщение об ошибке поля.", + "The value can be read, selected and copied but not changed; it is sent with the form. The field draws the region line instead of the control border.": "Значение можно прочитать, выделить и скопировать, но не изменить; оно уходит с формой. Вместо рамки поля — линия области.", + "The value the field starts with and returns to on a form reset, without controlling it afterwards. Empty: value is used.": "Значение, с которым поле начинает и к которому возвращается при сбросе формы, не управляя им потом. Пусто — берётся `value`.", + "The visible label above the field; it names the native control. Without it, give aria-label.": "Видимая подпись над полем; она же имя поля. Без неё задайте `aria-label`.", + "The window's kind of size (decision C39). auto: as wide as its content or width says. question: a question window -- --sf-popup-question-width (28rem, compact 26rem), the frame --sf-space-3, the title at text step 2 in bold, the title, the content and the footer on one start line, the × on the padding's corner, the footer's answers at the start and --sf-space-3 after the content; on a phone (below sm, 32rem) a window left at the centre opens as a bottom sheet. width, when given, still wins.": "Вид размера окна. `auto` — по ширине содержимого или `width`. `question` — окно вопроса: ширина `--sf-popup-question-width` (28rem, в компактной плотности 26rem), поле `--sf-space-3`, заголовок ступени текста 2 полужирный; заголовок, содержимое и ответы на одной линии начала, × в углу поля, ответы в начале строки и через `--sf-space-3` после содержимого; на телефоне (уже sm, 32rem) окно по центру открывается шторкой снизу. Заданный `width` важнее.", + "Turns on the input mask: typing is held to mask-pattern (or mask-options) and the fixed characters are drawn by the mask.": "Включает маску ввода: набор держится `mask-pattern` (или `mask-options`), постоянные символы рисует маска.", + "Where the focus goes when the window opens (decisions C25, C39): auto -- the page's [autofocus], else in a question window (one holding a dangerous answer or an sf-confirm) its safe answer «Отмена», else the panel; safe -- the safe answer whenever there is one; first -- the first control of its content (the header's × excluded); panel -- the panel.": "Куда ставится фокус при открытии окна: `auto` — на элемент страницы с `[autofocus]`, иначе в окне вопроса (с опасным ответом или `sf-confirm`) на безопасный ответ «Отмена», иначе на панель; `safe` — на безопасный ответ, если он есть; `first` — на первый элемент содержимого (кроме × в шапке); `panel` — на панель.", + "Whether the browser checks spelling in the text, as the native spellcheck. On by default; turn it off for codes and identifiers.": "Проверяет ли браузер орфографию, как `spellcheck`. По умолчанию да; для кодов и идентификаторов выключайте.", + "Which on-screen keyboard a phone opens, as the native inputmode (numeric, decimal, tel, email, url, search). Empty: the keyboard of the type.": "Какую клавиатуру откроет телефон, как `inputmode` браузера (numeric, decimal, tel, email, url, search). Пусто — клавиатура по типу поля.", + "Window form: the name the person types before the acceptance works (R069) -- «Чтобы подтвердить, введите » with the name as code (C10, taken whole by one press; paste allowed) and a field. The accepting answer stays filled and pressable: pressed early, or Enter in the field, it puts the focus in the field and says under it what to type (R064).": "Вид окна: имя, которое человек вводит, прежде чем ответ сработает, — «Чтобы подтвердить, введите <имя>», имя как код (копируется целиком одним нажатием, вставка разрешена) и поле. Подтверждающий ответ остаётся залитым и нажимаемым: если нажать его раньше или нажать `Enter` в поле, фокус встанет в поле, а под ним появится, что ввести.", + "Window form: the sentence that decides («Вернуть сайт будет нельзя.», «30 дней меню лежит в корзине.»), on its own line in medium weight at the end of the consequences' plate. Danger is told by this sentence and the filled answer; the plate keeps its colour.": "Вид окна: решающая фраза («Вернуть сайт будет нельзя.», «30 дней меню лежит в корзине.») отдельной строкой средним начертанием в конце плашки последствий. Об опасности говорят эта фраза и залитый ответ; цвет плашки не меняется.", + "With mask and mask-lazy false: the character that stands for a position still to be typed. Empty: the mask's own, _.": "При маске и `mask-lazy` false: символ на месте ещё не набранной позиции. Пусто — символ маски, `_`.", + "With mask: true (or empty) shows the fixed characters only as they are reached, false shows the whole mask with placeholder characters from the start.": "При маске: `true` (или пусто) показывает постоянные символы только по мере набора, `false` — всю маску с символами-заполнителями сразу.", + "With use-mask, one mask for every country -- mask-pattern -- instead of each country's own. The presence form of use-country-masks=\"false\".": "При `use-mask` одна маска для всех стран — `mask-pattern` — вместо своей у каждой страны.", + "auto (1.1): sf-time auto -- under a day heading always the clock time («14:32»), the first hour too, since the heading names the day; ungrouped, auto in full («5 минут назад» within its threshold, «вчера, 19:40», «5 ноября»). relative: always relative. exact: the time under a day heading, the date and time ungrouped. sf-time shows the full moment in a tooltip on hover and focus, and its datetime is the ISO moment": "`auto` — как у `sf-time`: под заголовком дня всегда время («14:32»), и в первый час тоже, потому что день назван заголовком; без групп — полностью («5 минут назад» в пределах порога, «вчера, 19:40», «5 ноября»). `relative` — всегда относительное. `exact` — время под заголовком дня, дата и время без групп. Полный момент `sf-time` показывает в подсказке при наведении и фокусе, его `datetime` — момент ISO.", + "inline: the question and its answers in the flow of a row, no frame of their own. card: in a framed card with its own inset. window: the content of a question window (sf-modal size=\"question\", decision C39) -- the window's title is the question, so it only names the group here; the consequences on a quiet plate, the decisive sentence (consequence) on its own line, the page's options, the name to type (require), then the answers at the start, the filled danger answer first.": "`inline` — вопрос и ответы в строке, без своей рамки. `card` — в карточке с рамкой и своим отступом. `window` — содержимое окна вопроса (`sf-modal size=\"question\"`): заголовок окна и есть вопрос, поэтому здесь он только называет группу; последствия на спокойной плашке, решающая фраза (`consequence`) отдельной строкой, выбор страницы, имя для ввода (`require`), затем ответы в начале строки, залитый опасный ответ первым.", + "What the control is. field: the swatch, the hex and the presets, a colour that is a value of something. theme: one icon-only primary button (icon palette) that opens the platform picker and rebuilds the page theme from the colour while it moves (SF.ThemePalette on ), committing it on the picker's change.": "Что это за контрол. `field` — образец, код и цвета продукта: цвет как значение чего-то. `theme` — одна основная кнопка со значком палитры: открывает палитру браузера, пересобирает тему страницы из цвета, пока его ведут (`SF.ThemePalette` на ``), и закрепляет его, когда палитра закрыта.", + "type=\"icon\" marks a placeholder that stands in for an icon; it combines with any kind. Not a legacy name for kind (see contracts/public-api-axes.json), so it has no removal date.": "`type=\"icon\"` отмечает заглушку на месте значка; сочетается с любым `kind`. Это не прежнее имя `kind`, поэтому срока удаления у него нет.", + "A unit written after the number, inside the box, in the quiet ink («кг», «%», «₽»); the spinbutton says it with the value («2,5 кг»).": "Единица после числа внутри поля, приглушённым цветом («кг», «%», «₽»); счётчик (spinbutton) произносит её вместе со значением («2,5 кг»).", + "How many characters the number place holds. Empty: the longest of min, max, the value and the inherited value at the field's decimals, at least 2, and 6 with no max. A column of fields gives each the same number so the column is straight.": "Сколько знаков вмещает место для числа. Если пусто — самое длинное из min, max, значения и наследуемого значения с десятичными знаками поля, не меньше 2, а без max — 6. Полям в одной колонке задайте одно число, чтобы колонка была ровной.", + "Marks the choice as wrong: the error border (filled: the error fill), aria-invalid on the trigger and error-message under the field. No error icon is drawn.": "Отмечает выбор как ошибочный: рамка цвета ошибки (у заполненного вида — заливка ошибки), aria-invalid на кнопке-триггере и error-message под полем. Значок ошибки не рисуется.", + "Show an error message and the invalid state, or clear both with an empty message. Writes error-message and invalid and sets the custom error the form will not submit over. Returns the element.": "Показывает сообщение об ошибке и состояние ошибки или снимает оба пустым сообщением. Записывает error-message и invalid и ставит собственную ошибку, с которой форма не отправится. Возвращает элемент.", + "The explanation behind a «?» button (sf-help-mark) after the label text; a press on the button opens it and never changes the control. The help slot takes an sf-help-mark of the page's own.": "Пояснение за кнопкой «?» (sf-help-mark) после текста подписи; нажатие на кнопку открывает его и никогда не меняет сам элемент. В слот help можно поставить свой sf-help-mark страницы.", + "The look (owner decision C53): `sides` puts «−» and «+» on both sides of the number, for a quantity changed by a few steps (a cart line, guests, records per page); `none` is a plain number field for an exact value (a year, a weight, a price) -- the arrow keys, PageUp/PageDown and Home/End still step.": "Вид (решение владельца C53): `sides` ставит «−» и «+» по обе стороны числа — для количества, которое меняют на несколько шагов (строка корзины, гости, записей на странице); `none` — простое числовое поле для точного значения (год, вес, цена), стрелки, PageUp/PageDown и Home/End по-прежнему меняют его на шаг.", + "The text shown under the field while it is invalid, in the error colour, in the field-message style; it is the trigger's error message for assistive technology (aria-describedby, aria-errormessage).": "Текст под полем, пока оно в состоянии ошибки, цветом ошибки, в стиле сообщения поля; для вспомогательных технологий это сообщение об ошибке кнопки-триггера (aria-describedby, aria-errormessage)." } } diff --git a/content/en/fundamentals/typography/shadows.md b/content/en/fundamentals/typography/shadows.md index dd40d5477..56302d9a4 100644 --- a/content/en/fundamentals/typography/shadows.md +++ b/content/en/fundamentals/typography/shadows.md @@ -104,7 +104,7 @@ For drop shadows (no spread), disable box-shadow and use `drop-shadow`: ### Shadow usage -* **shadow-1** — base elevation (cards). +* **shadow-raised** (former `shadow-1`) — a raised element, a card under the pointer. * **shadow-2** — hover state for shadow-1 or bordered elements. * **shadow-3** — FAB. * **shadow-4** — FAB hover. diff --git a/content/en/index.md b/content/en/index.md index 777b1e7a2..158783eb8 100644 --- a/content/en/index.md +++ b/content/en/index.md @@ -33,9 +33,9 @@ Framework is open under Apache-2.0. 3. Open the page — the loader fetches what the page uses. ```html - - - + + + ``` @@ -80,7 +80,7 @@ Russian). --- -**SIMAI Framework** · release `ui-2bd5a3ab478a` · +**SIMAI Framework** · release `ui-7fb26d395af2` · [GitHub](https://github.com/simai/ui-source) · [Report a problem](https://github.com/simai/ui-source/issues) · [Versions](/ru/guide/connection/versions/) · diff --git a/content/en/utilities/shadows/drop-shadow-color.md b/content/en/utilities/shadows/drop-shadow-color.md index f7683772a..bac1896ad 100644 --- a/content/en/utilities/shadows/drop-shadow-color.md +++ b/content/en/utilities/shadows/drop-shadow-color.md @@ -1,50 +1,22 @@ --- -title: "Цвет падающей тени (drop-shadow-color)" -description: "Цвет падающей тени (drop-shadow-color)" +title: "Drop shadow colour" +description: "Coloured drop shadows leave SIMAI Framework after 2027-01-01: a shadow carries no colour." --- -# Цвет падающей тени (drop-shadow-color) +# Drop shadow colour - -Данные модификаторы позволяют задать цвет падающей тени элемента, используя роли (переменные), без адаптивности. Можно -также изменять цвет при наведении с помощью `hover:drop-shadow-{color}`. - -## Классы - -| Класс | Значение | -|:------------------------|:---------------------------------------------| -| .drop-shadow-primary | `--sf-shadow--color`: var(`--sf-primary`) | -| .drop-shadow-secondary | `--sf-shadow--color`: var(`--sf-secondary`) | -| .drop-shadow-tertiary | `--sf-shadow--color`: var(`--sf-tertiary`) | -| .drop-shadow-error | `--sf-shadow--color`: var(`--sf-error`) | -| .drop-shadow-warning | `--sf-shadow--color`: var(`--sf-warning`) | -| .drop-shadow-success | `--sf-shadow--color`: var(`--sf-success`) | -| .drop-shadow-on-surface | `--sf-shadow--color`: var(`--sf-on-surface`) | - -## Описание - -Модификаторы `drop-shadow-{color}` задают цвет падающей тени. При необходимости можно использовать -`hover:drop-shadow-{color}` для изменения цвета тени при наведении курсора. - -- Используйте `drop-shadow-primary` или `drop-shadow-secondary` и т.д. для установки цвета падающей тени. -- Комбинируйте с классами уровня тени, например `drop-shadow-2`, для достижения нужного эффекта. -- Применяйте `hover:drop-shadow-error` для изменения цвета тени при наведении. - -## Синтаксис - -- `drop-shadow-{color}` — задать цвет падающей тени. -- `hover:drop-shadow-{color}` — задать цвет падающей тени при наведении. - -## Пример использования +The `drop-shadow-{colour}` classes, with `hover:`, leave SIMAI Framework after +**2027-01-01** with no successor: in the shadow system a shadow carries no colour. +Until that date the class still colours the shadow the +[drop shadow](/en/utilities/shadows/drop-shadow/) classes draw. Do not add new uses: +an icon or a logo needs only the place shadow, without colour — `drop-shadow-raised` +or `drop-shadow-overlay` — and carries its colour itself. ```html - -
- Падающая тень с цветом primary -
- - - + +
…
+ +
…
``` + +Journal record: `utility-c20-coloured-shadows`. diff --git a/content/en/utilities/shadows/element-color.md b/content/en/utilities/shadows/element-color.md index 72b874d24..3cfa7e9ac 100644 --- a/content/en/utilities/shadows/element-color.md +++ b/content/en/utilities/shadows/element-color.md @@ -1,48 +1,32 @@ --- -title: "Цвет тени" -description: "Цвет тени" +title: "Shadow colour" +description: "Coloured shadows leave SIMAI Framework after 2027-01-01: a shadow carries no colour. What to use instead." --- -# Цвет тени +# Shadow colour +The `shadow-{colour}` classes (`shadow-primary`, `-secondary`, `-tertiary`, `-error`, +`-warning`, `-success`, `-on-surface`, with `hover:` and `active:`) leave SIMAI Framework +after **2027-01-01** with no successor: in the shadow system a shadow carries no colour. +A coloured glow reads as focus or as a status, so focus is shown by the +[ring](/ru/utilities/outline/ring/) and a status by the element's own colour. Until that +date the class still colours both shadows of its own element, the ones the +[element shadow](/en/utilities/shadows/element-shadow/) classes draw. Do not add new uses. -Данные модификаторы устанавливают цвет тени элемента через специальную переменную `--sf-shadow--color`. Это позволяет -гибко настраивать визуальное восприятие тени. Используя состояние `hover`, можно изменять цвет тени при наведении -курсора, подчеркивая интерактивность элемента. +## Instead of a coloured shadow -## Классы - -| Класс | Значение | -|:-------------------|:---------------------------------------------| -| .shadow-primary | `--sf-shadow--color`: var(`--sf-primary`) | -| .shadow-secondary | `--sf-shadow--color`: var(`--sf-secondary`) | -| .shadow-tertiary | `--sf-shadow--color`: var(`--sf-tertiary`) | -| .shadow-error | `--sf-shadow--color`: var(`--sf-error`) | -| .shadow-warning | `--sf-shadow--color`: var(`--sf-warning`) | -| .shadow-success | `--sf-shadow--color`: var(`--sf-success`) | -| .shadow-on-surface | `--sf-shadow--color`: var(`--sf-on-surface`) | - -## Описание - -Данные модификаторы (`shadow-{color}`) устанавливают цвет тени через переменную `--sf-shadow--color`. Это позволяет -гибко управлять визуальным видом тени элемента. При использовании состояния `hover` можно менять цвет тени при наведении -на элемент, что подчеркивает его интерактивность. - -## Синтаксис - -- `shadow-{color}` — задать цвет тени. -- `hover:shadow-{color}` — задать цвет тени при наведении. - -## Пример использования тени +| You needed | Use | +| :--- | :--- | +| mark a selected card | the `primary-container` fill or a border in the role's colour | +| show focus | the [ring](/ru/utilities/outline/ring/) | +| show a status (error, success) | the element's own colour: fill, border, icon | +| lift an accent button | the place shadow `shadow-raised`, no colour | ```html - -
- Элемент с основной тенью -
- - - + +
…
+ +
…
``` + +Journal record: `utility-c20-coloured-shadows`. diff --git a/content/ru/components/actions/button-group.md b/content/ru/components/actions/button-group.md index 9b84ab823..5adcfd12b 100644 --- a/content/ru/components/actions/button-group.md +++ b/content/ru/components/actions/button-group.md @@ -6,7 +6,7 @@ profile: reference # Группа кнопок -:badge[sf-button-group]{variant=tonal scheme=primary size=1/2} :badge[1.2.0]{variant=outline scheme=on-surface size=1/2} +:badge[sf-button-group]{variant=tonal scheme=primary size=1/2} :badge[1.3.0]{variant=outline scheme=on-surface size=1/2} Группа объединяет несколько связанных кнопок в один компактный элемент: соседние границы сливаются, внешние углы сохраняют радиус кнопок. Берите её для близких @@ -117,8 +117,8 @@ whenLoader(() => SF.Loader.ready('ButtonGroup', () => { | Что | Классы | |:---|:---| | Блок | `sf-button-group` | -| Части | `sf-button-group-count`, `sf-button-group-icon-only`, `sf-button-group-label--hidden`, `sf-button-group-plate`, `sf-button-group-segment` | -| Модификаторы | `sf-button-group--backdrop-color`, `sf-button-group--backdrop-media`, `sf-button-group--full-width`, `sf-button-group--on-surface`, `sf-button-group--plate-raised`, `sf-button-group--primary`, `sf-button-group--radius-default`, `sf-button-group--radius-rounded`, `sf-button-group--radius-square`, `sf-button-group--secondary`, `sf-button-group--segmented` | +| Части | `sf-button-group-count`, `sf-button-group-icon-only`, `sf-button-group-label--hidden`, `sf-button-group-narrow`, `sf-button-group-plate`, `sf-button-group-segment` | +| Модификаторы | `sf-button-group--backdrop-color`, `sf-button-group--backdrop-media`, `sf-button-group--folded`, `sf-button-group--full-width`, `sf-button-group--on-surface`, `sf-button-group--plate-raised`, `sf-button-group--primary`, `sf-button-group--radius-default`, `sf-button-group--radius-rounded`, `sf-button-group--radius-square`, `sf-button-group--secondary`, `sf-button-group--segmented` | | Размеры | `sf-button-group--size-1/2`, `sf-button-group--size-1/3`, `sf-button-group--size-2`, `sf-button-group--size-3` | Классы и переменные собраны из CSS выпуска и обновляются вместе с ним. @@ -134,7 +134,7 @@ whenLoader(() => SF.Loader.ready('ButtonGroup', () => { | `--sf-button-group-background-color` | Заливка дорожки сегментированного вида в спокойном состоянии. | `var(--sf-surface-container)`; зависит от вида | | `--sf-button-group-padding` | Внутренний отступ дорожки сегментированного вида со всех сторон, он же промежуток между сегментами; скругление плашки остаётся концентричным. | `var(--sf-a4)`; зависит от вида, размера | | `--sf-button-group-radius` | Скругление сегмента и плашки под выбранным — элемента размером с кнопку; дорожка получает его плюс отступ, поэтому углы остаются концентричными. Атрибут `radius`, если задан, важнее. | `var(--sf-button-radius, var(--sf-radius--ui))`; зависит от вида, размера | -| `--sf-button-group-color` | Цвет подписи и иконки невыбранного сегмента в спокойном состоянии; наведение, нажатие и недоступность сохраняют свои цвета. | `var(--sf-on-surface-container--variant)`; зависит от вида | +| `--sf-button-group-color` | Цвет подписи и иконки невыбранного сегмента в спокойном состоянии; наведение, нажатие и недоступность сохраняют свои цвета. | `var(--sf-on-surface-container-variant)`; зависит от вида | | `--sf-button-group-plate-background-color` | Заливка плашки под выбранным сегментом; недоступность сохраняет свою. | `var(--sf-primary)`; зависит от вида, схемы | | `--sf-button-group-plate-color` | Цвет подписи, иконки и числа на плашке выбранного сегмента. | `var(--sf-on-primary)`; зависит от вида, схемы | | `--sf-button-group-count-color` | Цвет числа в невыбранном сегменте; выбранный берёт цвет содержимого плашки. | `currentColor`; зависит от вида | diff --git a/content/ru/components/actions/buttons.md b/content/ru/components/actions/buttons.md index ef4658efa..7c90339bb 100644 --- a/content/ru/components/actions/buttons.md +++ b/content/ru/components/actions/buttons.md @@ -6,7 +6,7 @@ profile: reference # Кнопки -:badge[sf-button]{variant=tonal scheme=primary size=1/2} :badge[1.9.1]{variant=outline scheme=on-surface size=1/2} +:badge[sf-button]{variant=tonal scheme=primary size=1/2} :badge[1.10.1]{variant=outline scheme=on-surface size=1/2} Кнопка запускает действие на текущей странице: сохраняет изменения, отправляет форму или подтверждает выбор. Для перехода на другую страницу берите ссылку, для @@ -292,9 +292,9 @@ whenLoader(() => SF.Loader.ready('Buttons', (Buttons) => { |:---|:---| | Блок | `sf-button` | | Части | `sf-button-shortcut`, `sf-button-spinner`, `sf-button-spinner--overlay`, `sf-button-state-loading`, `sf-button-text-container` | -| Модификаторы | `sf-button--danger`, `sf-button--default`, `sf-button--full-width`, `sf-button--height-high`, `sf-button--height-highest`, `sf-button--height-low`, `sf-button--link`, `sf-button--loading`, `sf-button--on-surface`, `sf-button--on-surface-variant`, `sf-button--outline`, `sf-button--pressed`, `sf-button--primary`, `sf-button--secondary`, `sf-button--surface`, `sf-button--tonal` | +| Модификаторы | `sf-button--danger`, `sf-button--default`, `sf-button--full-width`, `sf-button--height-high`, `sf-button--height-highest`, `sf-button--height-low`, `sf-button--loading`, `sf-button--on-surface`, `sf-button--on-surface-variant`, `sf-button--outline`, `sf-button--pressed`, `sf-button--primary`, `sf-button--secondary`, `sf-button--surface`, `sf-button--tonal` | | Размеры | `sf-button--size-1`, `sf-button--size-1/2`, `sf-button--size-1/3`, `sf-button--size-2`, `sf-button--size-3` | -| Устаревшие | `sf-button--error` → `sf-button--danger`, `sf-button--ghost` → `sf-button--link` | +| Устаревшие | `sf-button--error` → `sf-button--danger`, `sf-button--ghost` → `sf-button--link`, `sf-button--link` → `sf-button--ghost` | Классы и переменные собраны из CSS выпуска и обновляются вместе с ним. diff --git a/content/ru/components/actions/clipboard.md b/content/ru/components/actions/clipboard.md index a1dae21f4..6fab4261a 100644 --- a/content/ru/components/actions/clipboard.md +++ b/content/ru/components/actions/clipboard.md @@ -6,7 +6,7 @@ profile: reference # Копирование -:badge[sf-clipboard]{variant=tonal scheme=primary size=1/2} :badge[1.0.1]{variant=outline scheme=on-surface size=1/2} +:badge[sf-clipboard]{variant=tonal scheme=primary size=1/2} :badge[1.1.1]{variant=outline scheme=on-surface size=1/2} Кнопка копирования кладёт в буфер обмена готовое значение или текст другого элемента: команду, ключ, код заказа. Ставьте её рядом с текстом, который @@ -154,11 +154,21 @@ whenLoader(() => SF.Loader.ready('Copy', (Copy) => { | Что | Классы | |:---|:---| | Блок | `sf-clipboard` | -| Части | `sf-clipboard-1`, `sf-clipboard-2`, `sf-clipboard-3`, `sf-clipboard-fallback`, `sf-clipboard-status`, `sf-clipboard-surface` | +| Части | `sf-clipboard-1`, `sf-clipboard-2`, `sf-clipboard-3`, `sf-clipboard-fallback`, `sf-clipboard-holder`, `sf-clipboard-name`, `sf-clipboard-result`, `sf-clipboard-status`, `sf-clipboard-surface` | | Модификаторы | `sf-clipboard--inline`, `sf-clipboard--overlay` | +| Размеры | `sf-clipboard--size-1`, `sf-clipboard--size-1/3`, `sf-clipboard--size-2` | Классы и переменные собраны из CSS выпуска и обновляются вместе с ним. +## Переменные + +Компонент читает свои переменные, а модификаторы задают им значения; таблица показывает, из чего складывается вид. Переменные компонента — его внутренняя проводка, а не поверхность настройки: их имена и устройство могут меняться. Вид проекта меняют общие токены, а глубокий вид смарт-компонента — его шаблон (см. [Переменные компонента](/ru/guide/components/what-is/#переменные-компонента)). Значение по умолчанию — из базового правила блока (`.sf-clipboard`); переменную без него задают только модификаторы. + +| Переменная | По умолчанию | Задаёт | +|:---|:---|:---| +| `--sf-clipboard--box` | не задана; задают модификаторы, например `.sf-clipboard--size-1/3:not(.sf-button):not(.sf-icon-button)`: `var(--sf-ui-1/3--control-height)` | `height`, `block-size`, `min-height`, `min-block-size`, `min-width`, `min-inline-size` | +| `--sf-clipboard--icon` | не задана; задают модификаторы, например `.sf-clipboard--size-1/3:not(.sf-button):not(.sf-icon-button)`: `var(--sf-text-height-1/3)` | `--sf-icon--font-size`, `--sf-icon--height`, `--sf-icon--width` | + ## См. также - [Кнопка копирования](/ru/smart/actions/copy-button/) — смарт-компонент: копирует содержимое другого элемента и сообщает о результате diff --git a/content/ru/components/actions/close.md b/content/ru/components/actions/close.md index e30ebaf4c..7e6157336 100644 --- a/content/ru/components/actions/close.md +++ b/content/ru/components/actions/close.md @@ -6,7 +6,7 @@ profile: reference # Кнопка закрытия -:badge[sf-close]{variant=tonal scheme=primary size=1/2} :badge[1.1.0]{variant=outline scheme=on-surface size=1/2} +:badge[sf-close]{variant=tonal scheme=primary size=1/2} :badge[1.2.0]{variant=outline scheme=on-surface size=1/2} Кнопка закрытия закрывает окно, панель, уведомление или убирает тег. Она рисует крестик без иконочного шрифта, а действие выполняет нативная кнопка diff --git a/content/ru/components/actions/download-file.md b/content/ru/components/actions/download-file.md index f1f949d2e..187c4afdc 100644 --- a/content/ru/components/actions/download-file.md +++ b/content/ru/components/actions/download-file.md @@ -6,7 +6,7 @@ profile: reference # Скачивание файла -:badge[sf-download-file]{variant=tonal scheme=primary size=1/2} :badge[1.2.0]{variant=outline scheme=on-surface size=1/2} +:badge[sf-download-file]{variant=tonal scheme=primary size=1/2} :badge[1.3.0]{variant=outline scheme=on-surface size=1/2} Компонент оформляет ссылку на файл как отдельное действие: иконка скачивания, название и размер в одной строке. Берите его для вложений, @@ -138,7 +138,8 @@ whenLoader(() => SF.Loader.ready('DownloadFile', (DownloadFile) => { | Что | Классы | |:---|:---| | Блок | `sf-download-file` | -| Части | `sf-download-file-container`, `sf-download-file-file-name`, `sf-download-file-file-size`, `sf-download-file-wrap`, `sf-download-file__body`, `sf-download-file__icon`, `sf-download-file__main`, `sf-download-file__meta`, `sf-download-file__name`, `sf-download-file__size`, `sf-download-file__spinner`, `sf-download-file__tab`, `sf-download-file__tab-words`, `sf-download-file__type` | +| Части | `sf-download-file-container`, `sf-download-file-file-name`, `sf-download-file-file-size`, `sf-download-file-wrap`, `sf-download-file__body`, `sf-download-file__icon`, `sf-download-file__main`, `sf-download-file__meta`, `sf-download-file__name`, `sf-download-file__size`, `sf-download-file__spinner`, `sf-download-file__stack`, `sf-download-file__tab`, `sf-download-file__tab-words`, `sf-download-file__type` | +| Модификаторы | `sf-download-file--preparing` | | Размеры | `sf-download-file--size-1/2`, `sf-download-file--size-1/3`, `sf-download-file--size-2`, `sf-download-file--size-3` | Классы и переменные собраны из CSS выпуска и обновляются вместе с ним. @@ -151,17 +152,17 @@ whenLoader(() => SF.Loader.ready('DownloadFile', (DownloadFile) => { | Переменная | Что задаёт | По умолчанию | |:---|:---|:---| -| `--sf-download-file-background-color` | Заливка карточки в покое; у наведения, нажатия и выключенного состояния свои. | `transparent` | -| `--sf-download-file-border-color` | Рамка карточки в покое; у наведения и выключенного состояния свои. | `var(--sf-outline-variant)` | -| `--sf-download-file-radius` | Скругление углов карточки. | `var(--sf-radius--ui)` | -| `--sf-download-file-padding` | Отступ вокруг содержимого карточки внутри рамки: шаг размера сверху и снизу и боковой отступ кнопки, без толщины рамки, поэтому карточка одной высоты с кнопкой того же размера. | `calc(var(--sf-ui-1--space-y-tightness-default) - var(--sf-px)) calc(var(--sf-ui-1--space-x) - var(--sf-px))`; зависит от размера | -| `--sf-download-file-gap` | Промежуток между иконкой и именем файла и между именем и размером: отступ подписи кнопки того же размера. | `var(--sf-ui-1--text-space-x)`; зависит от размера | -| `--sf-download-file-icon-size` | Размер иконки скачивания: иконка кнопки того же размера (высота её текста). | `var(--sf-text-height-1)`; зависит от размера | -| `--sf-download-file-icon-color` | Цвет значка скачивания; у выключенного состояния свой. | `var(--sf-primary)` | +| `--sf-file-download-background-color` | Заливка карточки в покое; у наведения, нажатия и недоступного состояния своя. | `transparent` | +| `--sf-file-download-border-color` | Рамка карточки в покое; у наведения и недоступного состояния своя. | `var(--sf-outline-variant)` | +| `--sf-file-download-radius` | Скругление углов карточки. | `var(--sf-radius--ui)` | +| `--sf-file-download-padding` | Отступ содержимого от рамки карточки: шаг размера по высоте и боковое поле кнопки за вычетом рамки, поэтому карточка той же высоты, что кнопка её размера. | `calc(var(--sf-ui-1--space-y-tightness-default) - var(--sf-px)) calc(var(--sf-ui-1--space-x) - var(--sf-px))`; зависит от размера | +| `--sf-file-download-gap` | Промежуток между значком и именем файла и между именем и размером: отступ подписи кнопки того же размера. | `var(--sf-ui-1--text-space-x)`; зависит от размера | +| `--sf-file-download-icon-size` | Размер значка скачивания: значок кнопки того же размера (высота её текста). | `var(--sf-text-height-1)`; зависит от размера | +| `--sf-file-download-icon-color` | Цвет значка скачивания; у недоступного состояния свой. | `var(--sf-primary)` | ```css .sf-download-file { - --sf-download-file-radius: 0; + --sf-file-download-radius: 0; } ``` @@ -171,8 +172,8 @@ whenLoader(() => SF.Loader.ready('DownloadFile', (DownloadFile) => { | Переменная | По умолчанию | Задаёт | |:---|:---|:---| -| `--sf-download-file--background-color` | `var(--sf-download-file-background-color, transparent)` | `background-color` | -| `--sf-download-file--border-color` | `var(--sf-download-file-border-color, var(--sf-outline-variant))` | `border` | +| `--sf-download-file--background-color` | `var(--sf-file-download-background-color, var(--sf-download-file-background-color, transparent))` | `background-color` | +| `--sf-download-file--border-color` | `var(--sf-file-download-border-color, var(--sf-download-file-border-color, var(--sf-outline-variant)))` | `border` | | `--sf-download-file--border-width` | `var(--sf-px)` | `padding` | | `--sf-download-file--gap` | `var(--sf-ui-1--text-space-x)` | `gap` | | `--sf-download-file--icon-size` | `var(--sf-text-height-1)` | `--sf-loader-svg-width`, `--sf-loader-svg-height`, `width`, `inline-size`, `height`, `block-size`, `font-size`, `--sf-icon--font-size`, `--sf-icon--height`, `--sf-icon--width` | diff --git a/content/ru/components/actions/fab.md b/content/ru/components/actions/fab.md index 346a4805a..a3dca490f 100644 --- a/content/ru/components/actions/fab.md +++ b/content/ru/components/actions/fab.md @@ -6,7 +6,7 @@ profile: reference # Плавающая кнопка -:badge[sf-fab]{variant=tonal scheme=primary size=1/2} :badge[1.0.1]{variant=outline scheme=on-surface size=1/2} +:badge[sf-fab]{variant=tonal scheme=primary size=1/2} :badge[1.1.0]{variant=outline scheme=on-surface size=1/2} Плавающая кнопка (FAB) — круглая кнопка с иконкой для одного главного и частого действия экрана: создать запись, написать сообщение. Для обычного @@ -119,8 +119,9 @@ whenLoader(() => SF.Loader.ready('Fab', (Fab) => { | Что | Классы | |:---|:---| | Блок | `sf-fab` | -| Модификаторы | `sf-fab--default`, `sf-fab--on-surface`, `sf-fab--primary`, `sf-fab--secondary`, `sf-fab--tonal` | +| Модификаторы | `sf-fab--default`, `sf-fab--on-surface`, `sf-fab--primary`, `sf-fab--tonal` | | Размеры | `sf-fab--size-1`, `sf-fab--size-2`, `sf-fab--size-3` | +| Устаревшие | `sf-fab--secondary` → `sf-fab--primary` | Классы и переменные собраны из CSS выпуска и обновляются вместе с ним. diff --git a/content/ru/components/actions/icon-buttons.md b/content/ru/components/actions/icon-buttons.md index c00304dd8..11b3ff0d7 100644 --- a/content/ru/components/actions/icon-buttons.md +++ b/content/ru/components/actions/icon-buttons.md @@ -6,7 +6,7 @@ profile: reference # Кнопки с иконкой -:badge[sf-icon-button]{variant=tonal scheme=primary size=1/2} :badge[1.5.1]{variant=outline scheme=on-surface size=1/2} +:badge[sf-icon-button]{variant=tonal scheme=primary size=1/2} :badge[1.6.0]{variant=outline scheme=on-surface size=1/2} Кнопка с иконкой запускает действие без видимой подписи: редактировать, удалить, открыть настройки. Берите её, когда иконка общепринята и места мало; @@ -226,9 +226,9 @@ whenLoader(() => SF.Loader.ready('IconButtons', (IconButtons) => { |:---|:---| | Блок | `sf-icon-button` | | Части | `sf-icon-button-spinner`, `sf-icon-button-state-loading` | -| Модификаторы | `sf-icon-button--close`, `sf-icon-button--danger`, `sf-icon-button--default`, `sf-icon-button--ghost`, `sf-icon-button--height-high`, `sf-icon-button--height-highest`, `sf-icon-button--height-low`, `sf-icon-button--icon`, `sf-icon-button--link`, `sf-icon-button--on-surface`, `sf-icon-button--on-surface-variant`, `sf-icon-button--outline`, `sf-icon-button--pressed`, `sf-icon-button--primary`, `sf-icon-button--secondary`, `sf-icon-button--surface`, `sf-icon-button--tonal` | +| Модификаторы | `sf-icon-button--close`, `sf-icon-button--danger`, `sf-icon-button--default`, `sf-icon-button--ghost`, `sf-icon-button--height-high`, `sf-icon-button--height-highest`, `sf-icon-button--height-low`, `sf-icon-button--icon`, `sf-icon-button--link`, `sf-icon-button--on-surface`, `sf-icon-button--on-surface-variant`, `sf-icon-button--outline`, `sf-icon-button--pressed`, `sf-icon-button--primary`, `sf-icon-button--tonal` | | Размеры | `sf-icon-button--size-1`, `sf-icon-button--size-1/2`, `sf-icon-button--size-1/3`, `sf-icon-button--size-2`, `sf-icon-button--size-3` | -| Устаревшие | `sf-icon-button--error` → `sf-icon-button--danger` | +| Устаревшие | `sf-icon-button--error` → `sf-icon-button--danger`, `sf-icon-button--secondary` → `sf-icon-button--on-surface sf-icon-button--on-surface-variant`, `sf-icon-button--surface` → `sf-icon-button--tonal` | Классы и переменные собраны из CSS выпуска и обновляются вместе с ним. @@ -267,7 +267,7 @@ whenLoader(() => SF.Loader.ready('IconButtons', (IconButtons) => { | `--sf-icon-button--border-bottom-left-radius` | не задана; задают модификаторы, например `.sf-icon-button.segment-middle`: `var(--sf-radius-square)` | `border-end-start-radius` | | `--sf-icon-button--border-bottom-right-radius` | не задана; задают модификаторы, например `.sf-icon-button.segment-start`: `var(--sf-radius-square)` | `border-end-end-radius` | | `--sf-icon-button--border-bottom-width` | `var(--sf-icon-button-border-width, 0)` | `padding-bottom`, `border-bottom-width` | -| `--sf-icon-button--border-color` | не задана; задают модификаторы, например `.sf-icon-button.sf-icon-button--outline.sf-icon-button--primary.sf-icon-button--icon`: `var(--sf-icon-button-border-color, var(--sf-outline))` | `border-color` | +| `--sf-icon-button--border-color` | не задана; задают модификаторы, например `.sf-icon-button.sf-icon-button--outline.sf-icon-button--on-surface.sf-icon-button--icon`: `var(--sf-icon-button-border-color, var(--sf-outline))` | `border-color` | | `--sf-icon-button--border-inline-end-width` | `var(--sf-icon-button-border-width, 0)` | `padding-inline-end`, `border-inline-end-width` | | `--sf-icon-button--border-inline-start-width` | `var(--sf-icon-button-border-width, 0)` | `padding-inline-start`, `border-inline-start-width` | | `--sf-icon-button--border-style` | не задана; задают модификаторы, например `.sf-icon-button--outline`: `solid` | `border-style` | diff --git a/content/ru/components/content/accordion.md b/content/ru/components/content/accordion.md index 5879cbc36..c334a7e15 100644 --- a/content/ru/components/content/accordion.md +++ b/content/ru/components/content/accordion.md @@ -6,7 +6,7 @@ profile: reference # Аккордеон -:badge[sf-accordion]{variant=tonal scheme=primary size=1/2} :badge[1.0.1]{variant=outline scheme=on-surface size=1/2} +:badge[sf-accordion]{variant=tonal scheme=primary size=1/2} :badge[1.0.2]{variant=outline scheme=on-surface size=1/2} Аккордеон раскрывает и скрывает разделы содержимого под их заголовками. Берите его, чтобы сократить длинную страницу с независимыми разделами — diff --git a/content/ru/components/content/avatars.md b/content/ru/components/content/avatars.md index 93d05eb82..95daee68e 100644 --- a/content/ru/components/content/avatars.md +++ b/content/ru/components/content/avatars.md @@ -6,7 +6,7 @@ profile: reference # Аватары -:badge[sf-avatar]{variant=tonal scheme=primary size=1/2} :badge[1.3.6]{variant=outline scheme=on-surface size=1/2} +:badge[sf-avatar]{variant=tonal scheme=primary size=1/2} :badge[1.3.8]{variant=outline scheme=on-surface size=1/2} Аватар помогает быстро узнать человека, организацию или системный объект по фотографии, инициалам или значку. Он представляет идентичность, а не @@ -260,8 +260,8 @@ unread" и "new". В имени всегда точное число: при `99 | `--sf-avatar-border-color` | Цвет рамки в покое; у наведения — свой. | `transparent` | | `--sf-avatar-border-width` | Ширина рамки со всех сторон. | `var(--sf-px)` | | `--sf-avatar-radius` | Скругление углов — одинаково для круглой и квадратной формы. | `var(--sf-radius-circle)`; зависит от вида | -| `--sf-avatar-offline-background-color` | Цвет под точкой «не в сети»: фон места, где стоит аватар, чтобы сквозь точку не просвечивали ни фото, ни инициалы. | `var(--sf-surface-place)` | -| `--sf-avatar-offline-overlay` | Слой поверх этого цвета: цвет отключённого. Задайте `none`, чтобы точка «не в сети» была ровно цвета `--sf-avatar-offline-background-color`. | `linear-gradient(var(--sf-on-surface-disabled) 0 0)` | +| `--sf-avatar-offline-background-color` | Цвет точки «не в сети»: приглушённый цвет текста места (с 2026-11-11; раньше это был цвет места под цветом недоступного текста, контраст ниже 3:1) поверх ближайшего непрозрачного места (--sf-surface-place-ground), поэтому сквозь точку не видны ни фото, ни инициалы — и на мягком цветном месте тоже. | `var(--sf-on-surface-variant)` | +| `--sf-avatar-offline-overlay` | Слой поверх этого цвета, по умолчанию его нет (до 2026-11-11 здесь был цвет недоступного текста). Страница может положить сюда картинку или градиент поверх точки. | `none` | ```css .sf-avatar { @@ -306,8 +306,9 @@ unread" и "new". В имени всегда точное число: при `99 | `--sf-avatar-label-group-text--line-height` | не задана; задают модификаторы, например `.sf-avatar-label-group.sf-avatar-label-group--size-2.sf-avatar-label-group--status-icon-company .sf-avatar-label-group-text`: `var(--sf-text-height-1)` | `line-height` | | `--sf-avatar-label-group-title--font-size` | не задана; задают модификаторы, например `.sf-avatar-label-group--size-1 .sf-avatar-label-group-title`: `var(--sf-text-size-1)` | `font-size` | | `--sf-avatar-label-group-title--line-height` | не задана; задают модификаторы, например `.sf-avatar-label-group--size-1 .sf-avatar-label-group-title`: `var(--sf-text-height-1)` | `line-height` | -| `--sf-online-indicator--background-color` | не задана; задают модификаторы, например `.sf-online-indicator--offline`: `var(--sf-avatar-offline-background-color, var(--sf-surface-place))` | `background-color` | +| `--sf-online-indicator--background-color` | не задана; задают модификаторы, например `.sf-online-indicator--offline`: `var(--sf-avatar-offline-background-color, var(--sf-on-surface-variant))` | `background-image` | | `--sf-online-indicator--height` | `var(--sf-b6)` | `height` | +| `--sf-online-indicator--ring-fill` | `color-mix(in srgb, var(--sf-surface-place-fill) 100%, var(--sf-surface-underlay) 0%)` | `outline` | | `--sf-online-indicator--width` | `var(--sf-b6)` | `width` | ## См. также diff --git a/content/ru/components/content/card.md b/content/ru/components/content/card.md index ad8064461..7e9113fb4 100644 --- a/content/ru/components/content/card.md +++ b/content/ru/components/content/card.md @@ -6,7 +6,7 @@ profile: reference # Карточка -:badge[sf-card]{variant=tonal scheme=primary size=1/2} :badge[1.4.1]{variant=outline scheme=on-surface size=1/2} +:badge[sf-card]{variant=tonal scheme=primary size=1/2} :badge[1.5.1]{variant=outline scheme=on-surface size=1/2} Карточка собирает несколько блоков содержимого — заголовок, абзац, список, действие — в одну отдельную область с тонкой границей и скруглёнными углами. @@ -74,7 +74,7 @@ profile: reference | `--sf-card-padding-block` | Отступ над содержимым и под ним. | `var(--sf-space-2)` | | `--sf-card-padding-inline` | Отступ слева и справа от содержимого. | `min(var(--sf-space-2), 8%)` | | `--sf-card-gap` | Промежуток между блоками карточки. | `var(--sf-content--space-text)` | -| `--sf-card-title-size` | Размер заголовка внутри карточки — её названия. | `var(--sf-b6)` | +| `--sf-card-title-size` | Размер заголовка внутри карточки — её названия. | `var(--sf-heading-6--size)` | | `--sf-card-title-weight` | Насыщенность заголовка внутри карточки — её названия. | `var(--sf-text--font-weight-6)` | ```css diff --git a/content/ru/components/content/content-divider.md b/content/ru/components/content/content-divider.md index 24e4f228d..0f6cc707b 100644 --- a/content/ru/components/content/content-divider.md +++ b/content/ru/components/content/content-divider.md @@ -6,7 +6,7 @@ profile: reference # Разделитель -:badge[sf-divider]{variant=tonal scheme=primary size=1/2} :badge[1.0.0]{variant=outline scheme=on-surface size=1/2} +:badge[sf-divider]{variant=tonal scheme=primary size=1/2} :badge[1.0.1]{variant=outline scheme=on-surface size=1/2} Разделитель отделяет соседние части содержимого или действий линией. Для простой границы между разделами достаточно `
`; компонент нужен, когда diff --git a/content/ru/components/content/doc.md b/content/ru/components/content/doc.md index b2aa4c2d5..aacb15dcd 100644 --- a/content/ru/components/content/doc.md +++ b/content/ru/components/content/doc.md @@ -6,7 +6,7 @@ profile: reference # Документ -:badge[sf-doc]{variant=tonal scheme=primary size=1/2} :badge[1.0.0]{variant=outline scheme=on-surface size=1/2} +:badge[sf-doc]{variant=tonal scheme=primary size=1/2} :badge[1.0.2]{variant=outline scheme=on-surface size=1/2} Компонент оформляет служебные поверхности технической документации: область примера, исходный код под ней, вводный абзац и фоны для показа @@ -94,7 +94,7 @@ profile: reference | Переменная | По умолчанию | Задаёт | |:---|:---|:---| -| `--sf-doc-pattern-color` | не задана; задают модификаторы, например `.sf-doc-stripes`: `var(--sf-surface-1)` | `background-image` | +| `--sf-doc-pattern-color` | не задана; задают модификаторы, например `.sf-doc-stripes`: `var(--sf-surface-area)` | `background-image` | ## См. также diff --git a/content/ru/components/content/featured-icon.md b/content/ru/components/content/featured-icon.md index 1fb3a131e..c01c9f349 100644 --- a/content/ru/components/content/featured-icon.md +++ b/content/ru/components/content/featured-icon.md @@ -6,7 +6,7 @@ profile: reference # Акцентная иконка -:badge[sf-featured-icon]{variant=tonal scheme=primary size=1/2} :badge[1.1.1]{variant=outline scheme=on-surface size=1/2} +:badge[sf-featured-icon]{variant=tonal scheme=primary size=1/2} :badge[1.1.2]{variant=outline scheme=on-surface size=1/2} Акцентная иконка ставит [иконку](/ru/components/content/icons/) на цветную подложку и выделяет тему карточки, раздела, статуса или пустого состояния. diff --git a/content/ru/components/content/figure.md b/content/ru/components/content/figure.md index 97f6e6601..54fcd1b9e 100644 --- a/content/ru/components/content/figure.md +++ b/content/ru/components/content/figure.md @@ -6,7 +6,7 @@ profile: reference # Рисунок -:badge[sf-figure]{variant=tonal scheme=primary size=1/2} :badge[1.1.0]{variant=outline scheme=on-surface size=1/2} +:badge[sf-figure]{variant=tonal scheme=primary size=1/2} :badge[1.1.1]{variant=outline scheme=on-surface size=1/2} Рисунок показывает картинку, видео или иллюстрацию в заданной пропорции и подпись под ней. Берите его, когда изображению нужна подпись или ровная рамка diff --git a/content/ru/components/content/file-preview.md b/content/ru/components/content/file-preview.md index 77da86fc8..213a090f3 100644 --- a/content/ru/components/content/file-preview.md +++ b/content/ru/components/content/file-preview.md @@ -6,7 +6,7 @@ profile: reference # Предпросмотр файла -:badge[sf-file-preview]{variant=tonal scheme=primary size=1/2} :badge[1.0.1]{variant=outline scheme=on-surface size=1/2} +:badge[sf-file-preview]{variant=tonal scheme=primary size=1/2} :badge[1.0.2]{variant=outline scheme=on-surface size=1/2} Предпросмотр показывает выбранный или прикреплённый файл одной строкой: иконку типа или миниатюру, имя, размер и действия с файлом. Берите его для diff --git a/content/ru/components/content/highlight.md b/content/ru/components/content/highlight.md index afc0c2d05..0b58a3081 100644 --- a/content/ru/components/content/highlight.md +++ b/content/ru/components/content/highlight.md @@ -6,7 +6,7 @@ profile: reference # Подсветка кода -:badge[sf-highlight]{variant=tonal scheme=primary size=1/2} :badge[1.2.0]{variant=outline scheme=on-surface size=1/2} +:badge[sf-highlight]{variant=tonal scheme=primary size=1/2} :badge[1.2.2]{variant=outline scheme=on-surface size=1/2} Подсветка кода раскрашивает синтаксис в блоках `pre code` и оформляет их поверхностью с панелью: название языка и кнопка копирования. Берите её для diff --git a/content/ru/components/content/kbd.md b/content/ru/components/content/kbd.md index c9ac92d3a..f2e75494d 100644 --- a/content/ru/components/content/kbd.md +++ b/content/ru/components/content/kbd.md @@ -6,7 +6,7 @@ profile: reference # Клавиши -:badge[sf-kbd]{variant=tonal scheme=primary size=1/2} :badge[1.3.1]{variant=outline scheme=on-surface size=1/2} +:badge[sf-kbd]{variant=tonal scheme=primary size=1/2} :badge[1.3.2]{variant=outline scheme=on-surface size=1/2} Компонент оформляет клавишу или сочетание клавиш как надпись на клавише: «нажмите `Ctrl` + `S`». Берите его в инструкциях, подсказках и справке по diff --git a/content/ru/components/content/procedure.md b/content/ru/components/content/procedure.md index 6f17285cc..fd3d5ed61 100644 --- a/content/ru/components/content/procedure.md +++ b/content/ru/components/content/procedure.md @@ -6,7 +6,7 @@ profile: reference # Шаги инструкции -:badge[sf-procedure]{variant=tonal scheme=primary size=1/2} :badge[1.1.0]{variant=outline scheme=on-surface size=1/2} +:badge[sf-procedure]{variant=tonal scheme=primary size=1/2} :badge[1.1.1]{variant=outline scheme=on-surface size=1/2} Шаги инструкции показывают нумерованную последовательность действий, которую читают сверху вниз: установку, настройку, перенос. В каждом шаге может быть diff --git a/content/ru/components/content/reference-link.md b/content/ru/components/content/reference-link.md index 036006beb..bf93bbc5b 100644 --- a/content/ru/components/content/reference-link.md +++ b/content/ru/components/content/reference-link.md @@ -6,7 +6,7 @@ profile: reference # Справочная ссылка -:badge[sf-reference-link]{variant=tonal scheme=primary size=1/2} :badge[1.0.0]{variant=outline scheme=on-surface size=1/2} +:badge[sf-reference-link]{variant=tonal scheme=primary size=1/2} :badge[1.0.1]{variant=outline scheme=on-surface size=1/2} Справочная ссылка показывает переход вместе с коротким пояснением: путём, источником, идентификатором записи. Вся карточка — область нажатия. Для diff --git a/content/ru/components/content/tags.md b/content/ru/components/content/tags.md index 6d8f7fdd9..1e70b3555 100644 --- a/content/ru/components/content/tags.md +++ b/content/ru/components/content/tags.md @@ -6,7 +6,7 @@ profile: reference # Теги -:badge[sf-tag]{variant=tonal scheme=primary size=1/2} :badge[1.2.1]{variant=outline scheme=on-surface size=1/2} +:badge[sf-tag]{variant=tonal scheme=primary size=1/2} :badge[1.2.3]{variant=outline scheme=on-surface size=1/2} Тег компактно показывает категорию, выбранное значение, фильтр или статус. Сам по себе тег — надпись, а не действие: кнопкой становится только тег, который @@ -216,7 +216,7 @@ profile: reference |:---|:---|:---| | `--sf-tag--background-color` | не задана; задают модификаторы, например `.sf-tag.sf-tag--size-1.sf-tag--color`: `var(--sf-tag-background-color, var(--sf-surface-container))` | `background-color` | | `--sf-tag--block` | не задана; задают модификаторы, например `.sf-tag.sf-tag--size-1/3`: `var(--sf-tag-padding-block, var(--sf-ui-1/3--space-y-tightness-default))` | `padding-top`, `padding-bottom` | -| `--sf-tag--box-shadow` | не задана; задают модификаторы, например `.sf-tag.sf-tag--appearance-surface.sf-tag--color`: `inset 0 0 0 var(--sf-px) var(--sf-alpha-8)` | `box-shadow` | +| `--sf-tag--box-shadow` | не задана; задают модификаторы, например `.sf-tag.sf-tag--appearance-surface.sf-tag--color`: `inset 0 0 0 var(--sf-px) var(--sf-surface-state-select)` | `box-shadow` | | `--sf-tag--close-size` | не задана; задают модификаторы, например `.sf-tag.sf-tag--size-1/3`: `var(--sf-text-size-1/4)` | `--sf-close-icon--height`, `--sf-close-icon--width` | | `--sf-tag--font-size` | не задана; задают модификаторы, например `.sf-tag.sf-tag--size-1/3`: `var(--sf-text-size-1/3)` | `font-size` | | `--sf-tag--gap` | не задана; задают модификаторы, например `.sf-tag.sf-tag--size-1/3`: `var(--sf-tag-gap, 0)` | `gap` | @@ -225,8 +225,8 @@ profile: reference | `--sf-tag--inline-start` | не задана; задают модификаторы, например `.sf-tag.sf-tag--size-1/3`: `var(--sf-tag-padding-inline, var(--sf-ui-1/3--space-x))` | `padding-inline-start` | | `--sf-tag--label-end` | не задана; задают модификаторы, например `.sf-tag.sf-tag--inline.sf-tag--inline`: `0` | `padding-inline-end` | | `--sf-tag--label-start` | не задана; задают модификаторы, например `.sf-tag.sf-tag--inline.sf-tag--inline`: `0` | `padding-inline-start` | -| `--sf-tag--line` | не задана; задают модификаторы, например `.sf-tag.sf-tag--line-1/2`: `var(--sf-text-height-1/2)` | `line-height`, `--sf-tag--inline-line`, `min-height`, `min-block-size`, `height`, `block-size`, `width`, `inline-size` | -| `--sf-tag--line-height` | не задана; задают модификаторы, например `.sf-tag.sf-tag--size-1/3`: `var(--sf-text-height-1/3)` | `line-height`, `min-height`, `min-block-size`, `height`, `block-size`, `width`, `inline-size` | +| `--sf-tag--line` | не задана; задают модификаторы, например `.sf-tag.sf-tag--line-1/2`: `var(--sf-text-height-1/2)` | `height`, `block-size`, `width`, `inline-size`, `line-height`, `--sf-tag--inline-line`, `min-height`, `min-block-size`, `--sf-avatar--height`, `--sf-avatar--width`, `--sf-avatar--font-size`, `--sf-avatar--line-height` | +| `--sf-tag--line-height` | не задана; задают модификаторы, например `.sf-tag.sf-tag--size-1/3`: `var(--sf-text-height-1/3)` | `height`, `block-size`, `width`, `inline-size`, `line-height`, `min-height`, `min-block-size`, `--sf-avatar--height`, `--sf-avatar--width`, `--sf-avatar--font-size`, `--sf-avatar--line-height` | | `--sf-tag--padding-bottom` | не задана; задают модификаторы, например `.sf-tag.sf-tag--size-1.sf-tag--color`: `var(--sf-ui-1--space-y-tightness-default)` | `padding-bottom` | | `--sf-tag--padding-inline-end` | не задана; задают модификаторы, например `.sf-tag--size-1`: `var(--sf-ui-1--space-x)` | `padding-inline-end` | | `--sf-tag--padding-inline-start` | не задана; задают модификаторы, например `.sf-tag--size-1`: `var(--sf-ui-1--space-x)` | `padding-inline-start`, `--sf-tag-container--padding-inline-start` | diff --git a/content/ru/components/feedback/alerts.md b/content/ru/components/feedback/alerts.md index 597649ff1..93d5fd813 100644 --- a/content/ru/components/feedback/alerts.md +++ b/content/ru/components/feedback/alerts.md @@ -6,7 +6,7 @@ profile: reference # Уведомления -:badge[sf-alert]{variant=tonal scheme=primary size=1/2} :badge[1.1.2]{variant=outline scheme=on-surface size=1/2} +:badge[sf-alert]{variant=tonal scheme=primary size=1/2} :badge[1.1.3]{variant=outline scheme=on-surface size=1/2} Уведомление выделяет важную информацию в потоке страницы: подсказку, предупреждение, ошибку или подтверждение результата. Для краткого сообщения diff --git a/content/ru/components/feedback/badges.md b/content/ru/components/feedback/badges.md index db05da848..fa702b3b0 100644 --- a/content/ru/components/feedback/badges.md +++ b/content/ru/components/feedback/badges.md @@ -6,7 +6,7 @@ profile: reference # Бейджи -:badge[sf-badge]{variant=tonal scheme=primary size=1/2} :badge[1.5.0]{variant=outline scheme=on-surface size=1/2} +:badge[sf-badge]{variant=tonal scheme=primary size=1/2} :badge[1.5.1]{variant=outline scheme=on-surface size=1/2} Бейдж показывает короткий статус, категорию или счётчик рядом с объектом. Он дополняет основное содержимое и не заменяет кнопку, фильтр или @@ -262,6 +262,7 @@ profile: reference | `--sf-badge--padding-inline-end` | `var(--sf-badge-padding-inline, var(--sf-badge--side-room))` | `padding-inline-end` | | `--sf-badge--padding-inline-start` | `var(--sf-badge-padding-inline, var(--sf-badge--side-room))` | `padding-inline-start` | | `--sf-badge--ring` | не задана; задают модификаторы, например `.sf-badge.sf-badge--anchored`: `var(--sf-badge-ring-color, var(--sf-badge--surface, var(--sf-surface-place)))` | `box-shadow`, `outline` | +| `--sf-badge--ring-fill` | не задана; задают модификаторы, например `.sf-badge.sf-badge--anchored`: `color-mix(in srgb, var(--sf-surface-place-fill) 100%, var(--sf-surface-underlay) 0%)` | `box-shadow` | | `--sf-badge--ring-width` | не задана; задают модификаторы, например `.sf-badge.sf-badge--anchored`: `var(--sf-a2)` | `box-shadow`, `outline` | | `--sf-badge--side-room` | `var(--sf-space-1/2)` | `--sf-badge--padding-inline-end`, `--sf-badge--padding-inline-start` | | `--sf-badge--side-tight` | `var(--sf-ui-1/3--text-space-x)` | `--sf-badge--side-room` | diff --git a/content/ru/components/feedback/placeholder.md b/content/ru/components/feedback/placeholder.md index 30c6d33a5..9b08d1903 100644 --- a/content/ru/components/feedback/placeholder.md +++ b/content/ru/components/feedback/placeholder.md @@ -6,7 +6,7 @@ profile: reference # Заполнитель -:badge[sf-placeholder]{variant=tonal scheme=primary size=1/2} :badge[1.0.0]{variant=outline scheme=on-surface size=1/2} +:badge[sf-placeholder]{variant=tonal scheme=primary size=1/2} :badge[1.0.1]{variant=outline scheme=on-surface size=1/2} Заполнитель объясняет пустое состояние: данных нет, поиск ничего не нашёл или раздел не заполнен. Для ожидания данных берите diff --git a/content/ru/components/feedback/spinner.md b/content/ru/components/feedback/spinner.md index ebd2184ca..fe43f2fcc 100644 --- a/content/ru/components/feedback/spinner.md +++ b/content/ru/components/feedback/spinner.md @@ -6,7 +6,7 @@ profile: reference # Спиннер -:badge[sf-loader]{variant=tonal scheme=primary size=1/2} :badge[1.1.0]{variant=outline scheme=on-surface size=1/2} +:badge[sf-loader]{variant=tonal scheme=primary size=1/2} :badge[1.2.0]{variant=outline scheme=on-surface size=1/2} Спиннер показывает, что операция выполняется, когда процент завершения неизвестен. Если процент известен, берите @@ -196,11 +196,11 @@ whenLoader(() => SF.Loader.ready('Spinner', (Spinner) => { | Переменная | Что задаёт | По умолчанию | |:---|:---|:---| | `--sf-spinner-color` | Дуга, точки или комета: текущий цвет текста, если не задано. | `currentColor` | -| `--sf-spinner-track-color` | Кольцо под дугой. | `var(--sf-surface-container)` | +| `--sf-spinner-track-color` | Кольцо под дугой — цвет и прозрачность вместе: своей прозрачности у кольца нет. | `color-mix(in srgb, currentColor 16%, transparent)` | | `--sf-spinner-size` | Рамка рисунка; по умолчанию — значок кнопки того же размера. | `var(--sf-text-height-1)`; зависит от размера | | `--sf-spinner-stroke-width` | Толщина кольца в единицах сетки значка из 24 единиц. | `2` | | `--sf-spinner-gap` | Расстояние между рисунком и его словами. | `var(--sf-space-1/2)`; зависит от размера | -| `--sf-spinner-text-color` | Слова под рисунком. | `var(--sf-on-surface)` | +| `--sf-spinner-text-color` | Подпись под рисунком: цвет текста места, цвет текста на заливке под спиннером. | `currentColor` | ```css .sf-loader-container { @@ -235,7 +235,7 @@ whenLoader(() => SF.Loader.ready('Spinner', (Spinner) => { | `--sf-loader-svg-width` | не задана; задают модификаторы, например `.sf-loader-container`: `var(--sf-spinner-size, var(--sf-text-height-1))` | `width` | | `--sf-loader-text-gap` | не задана; задают модификаторы, например `.sf-loader-container`: `var(--sf-spinner-gap, var(--sf-space-1/2))` | `gap` | | `--sf-loader-text-size` | не задана; задают модификаторы, например `.sf-loader-container`: `var(--sf-text-size-1)` | `font-size` | -| `--sf-loader-track-color` | не задана; задают модификаторы, например `.sf-loader-container`: `var(--sf-spinner-track-color, var(--sf-surface-container))` | `stroke` | +| `--sf-loader-track-color` | не задана; задают модификаторы, например `.sf-loader-container`: `var(--sf-spinner-track-color, color-mix(in srgb, currentColor 16%, transparent))` | `stroke` | ## См. также diff --git a/content/ru/components/feedback/toast.md b/content/ru/components/feedback/toast.md index d7b0e0b47..41cc7a0e7 100644 --- a/content/ru/components/feedback/toast.md +++ b/content/ru/components/feedback/toast.md @@ -6,7 +6,7 @@ profile: reference # Всплывающие сообщения -:badge[sf-toast]{variant=tonal scheme=primary size=1/2} :badge[1.2.3]{variant=outline scheme=on-surface size=1/2} +:badge[sf-toast]{variant=tonal scheme=primary size=1/2} :badge[1.2.4]{variant=outline scheme=on-surface size=1/2} Всплывающее сообщение коротко сообщает результат действия поверх интерфейса и не блокирует дальнейшую работу. Для постоянного текста внутри страницы diff --git a/content/ru/components/forms/checkbox.md b/content/ru/components/forms/checkbox.md index 15d5a22a2..c17bff999 100644 --- a/content/ru/components/forms/checkbox.md +++ b/content/ru/components/forms/checkbox.md @@ -6,7 +6,7 @@ profile: reference # Флажок -:badge[sf-checkbox]{variant=tonal scheme=primary size=1/2} :badge[1.1.0]{variant=outline scheme=on-surface size=1/2} +:badge[sf-checkbox]{variant=tonal scheme=primary size=1/2} :badge[1.1.2]{variant=outline scheme=on-surface size=1/2} Флажок включает независимый параметр или выбирает несколько значений из списка. Для одного выбора из взаимоисключающих вариантов берите diff --git a/content/ru/components/forms/country-code.md b/content/ru/components/forms/country-code.md index 49cfcdbce..722dba696 100644 --- a/content/ru/components/forms/country-code.md +++ b/content/ru/components/forms/country-code.md @@ -6,7 +6,7 @@ profile: reference # Код страны -:badge[sf-country-code]{variant=tonal scheme=primary size=1/2} :badge[1.3.2]{variant=outline scheme=on-surface size=1/2} +:badge[sf-country-code]{variant=tonal scheme=primary size=1/2} :badge[1.3.3]{variant=outline scheme=on-surface size=1/2} Поле кода страны принимает номер телефона вместе с международным кодом: флаг показывает страну, список позволяет её сменить, маска форматирует номер по @@ -272,6 +272,7 @@ whenLoader(() => SF.Loader.ready('CountryCode', (CountryCode) => { | `--sf-country-code-required--font-size` | не задана; задают модификаторы, например `.sf-country-code.sf-country-code--size-1 .sf-country-code-required`: `var(--sf-text-size-1/2)` | `font-size` | | `--sf-country-code-required--font-weight` | не задана; задают модификаторы, например `.sf-country-code .sf-country-code-required`: `var(--sf-font-weight-regular)` | `font-weight` | | `--sf-country-code-required--line-height` | не задана; задают модификаторы, например `.sf-country-code.sf-country-code--size-1 .sf-country-code-required`: `var(--sf-text-height-1/2)` | `line-height` | +| `--sf-country-code-row--block-size` | не задана; задают модификаторы, например `.sf-country-code.sf-country-code--size-1/2`: `var(--sf-ui-1/2--control-height)` | `max-height`, `max-block-size` | | `--sf-country-code-text--color` | не задана; задают модификаторы, например `.sf-country-code .sf-country-code-text`: `var(--sf-on-surface-variant)` | `color` | | `--sf-country-code-text--font-family` | не задана; задают модификаторы, например `.sf-country-code .sf-country-code-text`: `var(--sf-text--family)` | `font-family` | | `--sf-country-code-text--font-size` | не задана; задают модификаторы, например `.sf-country-code.sf-country-code--size-1 .sf-country-code-text`: `var(--sf-text-size-1/2)` | `font-size` | diff --git a/content/ru/components/forms/datepicker.md b/content/ru/components/forms/datepicker.md index d6149abf6..90bd889e6 100644 --- a/content/ru/components/forms/datepicker.md +++ b/content/ru/components/forms/datepicker.md @@ -6,7 +6,7 @@ profile: reference # Календарь -:badge[sf-datepicker]{variant=tonal scheme=primary size=1/2} :badge[1.3.2]{variant=outline scheme=on-surface size=1/2} +:badge[sf-datepicker]{variant=tonal scheme=primary size=1/2} :badge[1.4.0]{variant=outline scheme=on-surface size=1/2} Календарь показывает дни месяца, выбранную дату или период. Поведения у классов нет: перелистывание, выбор даты и @@ -120,8 +120,8 @@ profile: reference | Что | Классы | |:---|:---| | Блок | `sf-datepicker` | -| Части | `sf-datepicker-another-month`, `sf-datepicker-container`, `sf-datepicker-context`, `sf-datepicker-day`, `sf-datepicker-day-date`, `sf-datepicker-day-end`, `sf-datepicker-day-info`, `sf-datepicker-day-off`, `sf-datepicker-day-selected`, `sf-datepicker-day-start`, `sf-datepicker-main`, `sf-datepicker-period`, `sf-datepicker-preset`, `sf-datepicker-presets`, `sf-datepicker-row`, `sf-datepicker-text`, `sf-datepicker-text-end`, `sf-datepicker-text-selected`, `sf-datepicker-text-start`, `sf-datepicker-time`, `sf-datepicker-time-separator`, `sf-datepicker-time-value`, `sf-datepicker-top`, `sf-datepicker-weekday` | -| Модификаторы | `sf-datepicker--presets`, `sf-datepicker--time` | +| Части | `sf-datepicker-another-month`, `sf-datepicker-container`, `sf-datepicker-context`, `sf-datepicker-day`, `sf-datepicker-day-date`, `sf-datepicker-day-end`, `sf-datepicker-day-info`, `sf-datepicker-day-off`, `sf-datepicker-day-selected`, `sf-datepicker-day-start`, `sf-datepicker-main`, `sf-datepicker-period`, `sf-datepicker-preset`, `sf-datepicker-presets`, `sf-datepicker-row`, `sf-datepicker-text`, `sf-datepicker-text-end`, `sf-datepicker-text-selected`, `sf-datepicker-text-start`, `sf-datepicker-time`, `sf-datepicker-time-separator`, `sf-datepicker-time-value`, `sf-datepicker-top`, `sf-datepicker-week`, `sf-datepicker-weekday`, `sf-datepicker-wrap` | +| Модификаторы | `sf-datepicker--inline`, `sf-datepicker--presets`, `sf-datepicker--time` | Классы и переменные собраны из CSS выпуска и обновляются вместе с ним. @@ -152,6 +152,7 @@ profile: reference | Переменная | По умолчанию | Задаёт | |:---|:---|:---| +| `--sf-datepicker--day-off-color` | `var(--sf-error)` | `--sf-datepicker-day-date--color`, `--sf-datepicker-day-info--color` | | `--sf-datepicker--inline-size` | `calc(var(--sf-ui-1--control-height) * 7 + var(--sf-space-1))` | `width`, `inline-size` | | `--sf-datepicker-another-month--opacity` | не задана; задают модификаторы, например `.sf-datepicker-day.sf-datepicker-another-month:not(:disabled):not(.active):not(.disabled):not(.sf-datepicker-day-selected)`: `1` | `opacity` | | `--sf-datepicker-context--background-color` | не задана; задают модификаторы, например `.sf-datepicker .sf-datepicker-context`: `var(--sf-datepicker--background-color, var(--sf-datepicker-background-color, var(--sf-surface-popup)))` | `background` | @@ -180,10 +181,10 @@ profile: reference | `--sf-datepicker-text--border-start-start-radius` | не задана; задают модификаторы, например `.sf-datepicker-text.sf-datepicker-text-end`: `var(--sf-radius-square)` | `border-start-start-radius` | | `--sf-datepicker-text--color` | не задана; задают модификаторы, например `.sf-datepicker-text`: `var(--sf-on-surface)` | `color` | | `--sf-datepicker-top--background-color` | не задана; задают модификаторы, например `.sf-datepicker .sf-datepicker-top`: `var(--sf-surface-popup)` | `background-color` | -| `--sf-datepicker-top--padding-bottom` | не задана; задают модификаторы, например `.sf-datepicker .sf-datepicker-top`: `var(--sf-space-1)` | `padding-bottom` | +| `--sf-datepicker-top--padding-bottom` | не задана; задают модификаторы, например `.sf-datepicker .sf-datepicker-top`: `var(--sf-space-1/4)` | `padding-bottom` | | `--sf-datepicker-top--padding-inline-end` | не задана; задают модификаторы, например `.sf-datepicker .sf-datepicker-top`: `var(--sf-space-1/3)` | `padding-inline-end` | | `--sf-datepicker-top--padding-inline-start` | не задана; задают модификаторы, например `.sf-datepicker .sf-datepicker-top`: `var(--sf-space-1/3)` | `padding-inline-start` | -| `--sf-datepicker-top--padding-top` | не задана; задают модификаторы, например `.sf-datepicker .sf-datepicker-top`: `var(--sf-space-1)` | `padding-top` | +| `--sf-datepicker-top--padding-top` | не задана; задают модификаторы, например `.sf-datepicker .sf-datepicker-top`: `var(--sf-space-1/4)` | `padding-top` | ## См. также diff --git a/content/ru/components/forms/file-upload.md b/content/ru/components/forms/file-upload.md index 9a320e411..4ebbdde76 100644 --- a/content/ru/components/forms/file-upload.md +++ b/content/ru/components/forms/file-upload.md @@ -6,7 +6,7 @@ profile: reference # Загрузка файлов -:badge[sf-file-upload]{variant=tonal scheme=primary size=1/2} :badge[1.1.1]{variant=outline scheme=on-surface size=1/2} +:badge[sf-file-upload]{variant=tonal scheme=primary size=1/2} :badge[1.1.2]{variant=outline scheme=on-surface size=1/2} Загрузка файлов принимает один или несколько файлов через системное окно или перетаскиванием и показывает список выбранных файлов с ходом передачи. Сами @@ -232,8 +232,8 @@ upload.addEventListener('sf-file-upload:select', async (event) => { | `--sf-file-upload-radius` | Скругление углов области; хуки отдельных углов по-прежнему важнее. | `var(--sf-radius--surface)` | | `--sf-file-upload-link-color` | Цвет слов, которые открывают диалог выбора файла. | `var(--sf-primary)` | | `--sf-file-upload-text-color` | Цвет слов после ссылки. | `var(--sf-on-surface-variant)` | -| `--sf-file-upload-dragged-over-background-color` | Заливка области, пока над ней держат файлы. | `var(--sf-primary-transparent-select)` | -| `--sf-file-upload-dragged-over-border-color` | Граница области, пока над ней держат файлы. | `var(--sf-outline-primary)` | +| `--sf-file-upload-dragged-over-background-color` | Заливка области, пока над ней держат файлы. | `var(--sf-primary-state-select)` | +| `--sf-file-upload-dragged-over-border-color` | Граница области, пока над ней держат файлы. | `var(--sf-primary-outline)` | ```css .sf-file-upload { diff --git a/content/ru/components/forms/inputs.md b/content/ru/components/forms/inputs.md index a0d39669f..4371e714f 100644 --- a/content/ru/components/forms/inputs.md +++ b/content/ru/components/forms/inputs.md @@ -6,7 +6,7 @@ profile: reference # Текстовые поля -:badge[sf-input]{variant=tonal scheme=primary size=1/2} :badge[1.3.0]{variant=outline scheme=on-surface size=1/2} +:badge[sf-input]{variant=tonal scheme=primary size=1/2} :badge[1.4.1]{variant=outline scheme=on-surface size=1/2} Текстовое поле принимает короткое значение в одну строку: имя, адрес почты, пароль или поисковый запрос. Для текста с переносами строк берите @@ -287,15 +287,17 @@ whenLoader(() => SF.Loader.ready('Inputs', (Inputs) => { | Переменная | По умолчанию | Задаёт | |:---|:---|:---| +| `--sf-input--place-variant` | не задана; задают модификаторы, например `.sf-input.sf-input--filled`: `var(--sf-place--fill-placeholder, var(--sf-on-surface-variant))` | `--sf-input-placeholder--color` | | `--sf-input--radius` | `var(--sf-input-radius, var(--sf-radius--ui))` | `--sf-input-field--border-end-end-radius`, `--sf-input-field--border-end-start-radius`, `--sf-input-field--border-start-end-radius`, `--sf-input-field--border-start-start-radius` | | `--sf-input-field--background-color` | не задана; задают модификаторы, например `.sf-input.error.sf-input--bordered .sf-input-field`: `var(--sf-transparent-for-focus)` | `background-color` | -| `--sf-input-field--border` | не задана; задают модификаторы, например `.sf-input .sf-input-field`: `var(--sf-px) solid` | `border`, `border-color`, `border-end-end-radius`, `border-end-start-radius`, `border-start-end-radius`, `border-start-start-radius` | -| `--sf-input-field--border-color` | не задана; задают модификаторы, например `.sf-input.error.sf-input--bordered .sf-input-field`: `var(--sf-input-invalid-border-color, var(--sf-error))` | `border-color` | +| `--sf-input-field--border` | не задана; задают модификаторы, например `.sf-input .sf-input-field`: `var(--sf-px) solid` | `border`, `border-color`, `border-bottom-color`, `border-block-end-color`, `border-end-end-radius`, `border-end-start-radius`, `border-start-end-radius`, `border-start-start-radius`, `--sf-input-field--line-color` | +| `--sf-input-field--border-color` | не задана; задают модификаторы, например `.sf-input.error.sf-input--bordered .sf-input-field`: `var(--sf-input-invalid-border-color, var(--sf-error))` | `border-color`, `border-bottom-color`, `border-block-end-color`, `--sf-input-field--line-color` | | `--sf-input-field--border-end-end-radius` | не задана; задают модификаторы, например `.sf-input .sf-input-field`: `var(--sf-input--radius)` | `border-end-end-radius` | | `--sf-input-field--border-end-start-radius` | не задана; задают модификаторы, например `.sf-input .sf-input-field`: `var(--sf-input--radius)` | `border-end-start-radius` | | `--sf-input-field--border-start-end-radius` | не задана; задают модификаторы, например `.sf-input .sf-input-field`: `var(--sf-input--radius)` | `border-start-end-radius` | | `--sf-input-field--border-start-start-radius` | не задана; задают модификаторы, например `.sf-input .sf-input-field`: `var(--sf-input--radius)` | `border-start-start-radius` | | `--sf-input-field--box-shadow` | не задана; задают модификаторы, например `.sf-input:not(.sf-input--pointer-focus):has(input:not(:disabled):not(.disabled).focus-visible) .sf-input-field`: `none` | `box-shadow` | +| `--sf-input-field--line-color` | не задана; задают модификаторы, например `.sf-input:not(.error).sf-input--filled:not(:has(input:disabled)) .sf-input-field`: `var(--sf-input-border-color, var(--sf-outline))` | `border-bottom-color`, `border-block-end-color` | | `--sf-input-field--padding-bottom` | не задана; задают модификаторы, например `.sf-input.sf-input--size-1/3 .sf-input-field`: `var(--sf-input-padding-block, calc(var(--sf-ui-1/3--space-y-tightness-default) - var(--sf-px)))` | `padding-bottom` | | `--sf-input-field--padding-inline-end` | не задана; задают модификаторы, например `.sf-input.sf-input--size-1/3 .sf-input-field`: `var(--sf-input-padding-inline, var(--sf-ui-1/3--space-x))` | `padding-inline-end` | | `--sf-input-field--padding-inline-start` | не задана; задают модификаторы, например `.sf-input.sf-input--size-1/3 .sf-input-field`: `var(--sf-input-padding-inline, var(--sf-ui-1/3--space-x))` | `padding-inline-start` | @@ -315,7 +317,8 @@ whenLoader(() => SF.Loader.ready('Inputs', (Inputs) => { | `--sf-input-input--padding-inline-end` | не задана; задают модификаторы, например `.sf-input.sf-input--size-1/3 .sf-input-field input`: `var(--sf-ui-1/3--text-space-x)` | `padding-inline-end` | | `--sf-input-input--padding-inline-start` | не задана; задают модификаторы, например `.sf-input.sf-input--size-1/3 .sf-input-field input`: `var(--sf-ui-1/3--text-space-x)` | `padding-inline-start` | | `--sf-input-label--background-color` | не задана; задают модификаторы, например `.sf-input .sf-input-label`: `transparent` | `background-color` | -| `--sf-input-label--gap` | не задана; задают модификаторы, например `.sf-input .sf-input-label`: `var(--sf-space-1/4)` | `gap` | +| `--sf-input-label--gap` | не задана; задают модификаторы, например `.sf-input .sf-input-label`: `var(--sf-space-1/4)` | `margin-inline-start`, `gap` | +| `--sf-input-label--line` | не задана; задают модификаторы, например `.sf-input.sf-input--size-1/3 .sf-input-label`: `var(--sf-text-height-1/4)` | `height`, `block-size` | | `--sf-input-left--background-color` | не задана; задают модификаторы, например `.sf-input .sf-input-left`: `transparent` | `background-color` | | `--sf-input-placeholder--color` | не задана; задают модификаторы, например `.sf-input .sf-input-field input::-webkit-input-placeholder`: `var(--sf-on-surface-variant)` | `color` | | `--sf-input-placeholder--font-family` | не задана; задают модификаторы, например `.sf-input .sf-input-field input::-webkit-input-placeholder`: `var(--sf-text--family)` | `font-family` | diff --git a/content/ru/components/forms/quantity.md b/content/ru/components/forms/quantity.md index 10b7f43f3..30fa0415b 100644 --- a/content/ru/components/forms/quantity.md +++ b/content/ru/components/forms/quantity.md @@ -6,7 +6,7 @@ profile: reference # Количество -:badge[sf-quantity]{variant=tonal scheme=primary size=1/2} :badge[1.1.1]{variant=outline scheme=on-surface size=1/2} +:badge[sf-quantity]{variant=tonal scheme=primary size=1/2} :badge[1.2.0]{variant=outline scheme=on-surface size=1/2} Поле количества принимает число с клавиатуры или меняет его кнопками «минус» и «плюс» на заданный шаг. Подходит для количества товаров, мест, участников и @@ -190,8 +190,8 @@ whenLoader(() => SF.Loader.ready('Quantity', (Quantity) => { | Что | Классы | |:---|:---| | Блок | `sf-quantity` | -| Части | `sf-quantity-count`, `sf-quantity-hint-text-wrap`, `sf-quantity-label`, `sf-quantity-required`, `sf-quantity-text`, `sf-quantity-wrap` | -| Модификаторы | `sf-quantity--pointer-focus` | +| Части | `sf-quantity-count`, `sf-quantity-hint-text-wrap`, `sf-quantity-inherited`, `sf-quantity-label`, `sf-quantity-required`, `sf-quantity-row`, `sf-quantity-text`, `sf-quantity-unit`, `sf-quantity-wrap` | +| Модификаторы | `sf-quantity--pointer-focus`, `sf-quantity--steppers-none` | | Размеры | `sf-quantity--size-1`, `sf-quantity--size-1/2`, `sf-quantity--size-2` | Классы и переменные собраны из CSS выпуска и обновляются вместе с ним. @@ -211,7 +211,7 @@ whenLoader(() => SF.Loader.ready('Quantity', (Quantity) => { | `--sf-quantity-color` | Цвет числа в поле; у недоступного поля свой. | `var(--sf-on-surface)` | | `--sf-quantity-padding-inline` | Отступ внутри поля перед «−» и после «+»: по умолчанию равен зазору кнопок сверху и снизу, поэтому они стоят на одном расстоянии от всех краёв. | `calc((var(--sf-ui-1--control-height) - var(--sf-ui-1\/2--control-height)) / 2 - var(--sf-px))`; зависит от размера | | `--sf-quantity-padding-block` | Внутренний отступ поля над и под содержимым. | `calc(var(--sf-ui-1--space-y-tightness-default) - var(--sf-px))`; зависит от размера | -| `--sf-quantity-gap` | Расстояние между кнопками «−», «+» и полем числа. | `var(--sf-space-2)` | +| `--sf-quantity-gap` | Расстояние между кнопками «−»/«+» и числом. | `calc(var(--sf-px) * 0)` | | `--sf-quantity-stepper-radius` | Скругление углов кнопок «−» и «+». | `var(--sf-radius-1\/2)` | | `--sf-quantity-invalid-border-color` | Рамка поля при ошибке. | `var(--sf-error)` | @@ -227,17 +227,18 @@ whenLoader(() => SF.Loader.ready('Quantity', (Quantity) => { | Переменная | По умолчанию | Задаёт | |:---|:---|:---| +| `--sf-quantity--number-height` | не задана; задают модификаторы, например `.sf-quantity.sf-quantity--size-1`: `var(--sf-ui-1/2--control-height)` | `height`, `block-size` | | `--sf-quantity-hint-text-wrap--color` | не задана; задают модификаторы, например `.sf-quantity .sf-quantity-hint-text-wrap`: `var(--sf-on-surface-variant)` | `color` | | `--sf-quantity-hint-text-wrap--font-size` | не задана; задают модификаторы, например `.sf-quantity.sf-quantity--size-1 .sf-quantity-hint-text-wrap`: `var(--sf-text-size-1/2)` | `font-size` | | `--sf-quantity-hint-text-wrap--line-height` | не задана; задают модификаторы, например `.sf-quantity.sf-quantity--size-1 .sf-quantity-hint-text-wrap`: `var(--sf-text-height-1/2)` | `line-height` | | `--sf-quantity-input--background-color` | не задана; задают модификаторы, например `.sf-quantity .sf-quantity-wrap input`: `transparent` | `background-color` | | `--sf-quantity-input--color` | не задана; задают модификаторы, например `.sf-quantity input`: `var(--sf-quantity-color, var(--sf-on-surface))` | `color` | -| `--sf-quantity-input--font-family` | не задана; задают модификаторы, например `.sf-quantity.sf-quantity--size-1 input`: `var(--sf-text--family)` | `font-family` | -| `--sf-quantity-input--font-size` | не задана; задают модификаторы, например `.sf-quantity.sf-quantity--size-1 input`: `var(--sf-text-size-1)` | `font-size` | -| `--sf-quantity-input--font-weight` | не задана; задают модификаторы, например `.sf-quantity.sf-quantity--size-1 input`: `var(--sf-font-weight-regular)` | `font-weight` | -| `--sf-quantity-input--line-height` | не задана; задают модификаторы, например `.sf-quantity.sf-quantity--size-1 input`: `var(--sf-text-height-1)` | `line-height` | -| `--sf-quantity-input--padding-inline-end` | не задана; задают модификаторы, например `.sf-quantity.sf-quantity--size-1 input`: `var(--sf-ui-1--text-space-x)` | `padding-inline-end` | -| `--sf-quantity-input--padding-inline-start` | не задана; задают модификаторы, например `.sf-quantity.sf-quantity--size-1 input`: `var(--sf-ui-1--text-space-x)` | `padding-inline-start` | +| `--sf-quantity-input--font-family` | не задана; задают модификаторы, например `.sf-quantity.sf-quantity--size-1 .sf-quantity-wrap`: `var(--sf-text--family)` | `font-family` | +| `--sf-quantity-input--font-size` | не задана; задают модификаторы, например `.sf-quantity.sf-quantity--size-1 .sf-quantity-wrap`: `var(--sf-text-size-1)` | `font-size` | +| `--sf-quantity-input--font-weight` | не задана; задают модификаторы, например `.sf-quantity.sf-quantity--size-1 .sf-quantity-wrap`: `var(--sf-font-weight-regular)` | `font-weight` | +| `--sf-quantity-input--line-height` | не задана; задают модификаторы, например `.sf-quantity.sf-quantity--size-1 .sf-quantity-wrap`: `var(--sf-text-height-1)` | `line-height` | +| `--sf-quantity-input--padding-inline-end` | не задана; задают модификаторы, например `.sf-quantity.sf-quantity--size-1 input`: `var(--sf-space-1/4)` | `padding-inline-end` | +| `--sf-quantity-input--padding-inline-start` | не задана; задают модификаторы, например `.sf-quantity.sf-quantity--size-1 input`: `var(--sf-space-1/4)` | `padding-inline-start` | | `--sf-quantity-label--background-color` | не задана; задают модификаторы, например `.sf-quantity .sf-quantity-label`: `transparent` | `background-color` | | `--sf-quantity-label--gap` | не задана; задают модификаторы, например `.sf-quantity .sf-quantity-label`: `var(--sf-space-1/4)` | `gap` | | `--sf-quantity-placeholder--color` | не задана; задают модификаторы, например `.sf-quantity .sf-quantity-wrap input::-webkit-input-placeholder`: `var(--sf-on-surface-variant)` | `color` | @@ -263,10 +264,10 @@ whenLoader(() => SF.Loader.ready('Quantity', (Quantity) => { | `--sf-quantity-wrap--border-start-end-radius` | не задана; задают модификаторы, например `.sf-quantity .sf-quantity-wrap`: `var(--sf-quantity-radius, var(--sf-radius--ui))` | `border-start-end-radius` | | `--sf-quantity-wrap--border-start-start-radius` | не задана; задают модификаторы, например `.sf-quantity .sf-quantity-wrap`: `var(--sf-quantity-radius, var(--sf-radius--ui))` | `border-start-start-radius` | | `--sf-quantity-wrap--box-shadow` | не задана; задают модификаторы, например `.sf-quantity.sf-quantity--pointer-focus .sf-quantity-wrap`: `none` | `box-shadow` | -| `--sf-quantity-wrap--gap` | не задана; задают модификаторы, например `.sf-quantity .sf-quantity-wrap`: `var(--sf-quantity-gap, var(--sf-space-2))` | `gap` | +| `--sf-quantity-wrap--gap` | не задана; задают модификаторы, например `.sf-quantity .sf-quantity-wrap`: `var(--sf-quantity-gap, calc(var(--sf-px) * 0))` | `gap` | | `--sf-quantity-wrap--padding-bottom` | не задана; задают модификаторы, например `.sf-quantity.sf-quantity--size-1 .sf-quantity-wrap`: `var(--sf-quantity-padding-block, calc(var(--sf-ui-1--space-y-tightness-default) - var(--sf-px)))` | `padding-bottom` | -| `--sf-quantity-wrap--padding-inline-end` | не задана; задают модификаторы, например `.sf-quantity.sf-quantity--size-1 .sf-quantity-wrap`: `var(--sf-quantity-padding-inline, calc((var(--sf-ui-1--control-height) - var(--sf-ui-1/2--control-height)) / 2 - var(--sf-px)))` | `padding-inline-end` | -| `--sf-quantity-wrap--padding-inline-start` | не задана; задают модификаторы, например `.sf-quantity.sf-quantity--size-1 .sf-quantity-wrap`: `var(--sf-quantity-padding-inline, calc((var(--sf-ui-1--control-height) - var(--sf-ui-1/2--control-height)) / 2 - var(--sf-px)))` | `padding-inline-start` | +| `--sf-quantity-wrap--padding-inline-end` | не задана; задают модификаторы, например `.sf-quantity.sf-quantity--size-1 .sf-quantity-wrap`: `var(--sf-quantity-padding-inline, calc((var(--sf-ui-1--control-height) - var(--sf-ui-1/2--control-height)) / 2 - var(--sf-px)))` | `padding-inline-end`, `inset-inline-end` | +| `--sf-quantity-wrap--padding-inline-start` | не задана; задают модификаторы, например `.sf-quantity.sf-quantity--size-1 .sf-quantity-wrap`: `var(--sf-quantity-padding-inline, calc((var(--sf-ui-1--control-height) - var(--sf-ui-1/2--control-height)) / 2 - var(--sf-px)))` | `padding-inline-start`, `top`, `bottom`, `inset-block`, `inset-inline-start` | | `--sf-quantity-wrap--padding-top` | не задана; задают модификаторы, например `.sf-quantity.sf-quantity--size-1 .sf-quantity-wrap`: `var(--sf-quantity-padding-block, calc(var(--sf-ui-1--space-y-tightness-default) - var(--sf-px)))` | `padding-top` | ## См. также diff --git a/content/ru/components/forms/radio.md b/content/ru/components/forms/radio.md index cfeda8081..d32370744 100644 --- a/content/ru/components/forms/radio.md +++ b/content/ru/components/forms/radio.md @@ -6,7 +6,7 @@ profile: reference # Радиокнопки -:badge[sf-radio-button]{variant=tonal scheme=primary size=1/2} :badge[1.1.0]{variant=outline scheme=on-surface size=1/2} +:badge[sf-radio-button]{variant=tonal scheme=primary size=1/2} :badge[1.2.1]{variant=outline scheme=on-surface size=1/2} Радиокнопки выбирают ровно один вариант из группы, когда все варианты нужно показать сразу. Для независимых параметров берите diff --git a/content/ru/components/forms/range-slider.md b/content/ru/components/forms/range-slider.md index 17fe1b763..dad5d55ee 100644 --- a/content/ru/components/forms/range-slider.md +++ b/content/ru/components/forms/range-slider.md @@ -6,7 +6,7 @@ profile: reference # Слайдер диапазона -:badge[sf-range-slider]{variant=tonal scheme=primary size=1/2} :badge[1.3.1]{variant=outline scheme=on-surface size=1/2} +:badge[sf-range-slider]{variant=tonal scheme=primary size=1/2} :badge[1.3.2]{variant=outline scheme=on-surface size=1/2} Слайдер диапазона выбирает одно значение или две границы перетаскиванием ручки по шкале. Подходит для приблизительной настройки цены, громкости или diff --git a/content/ru/components/forms/switch.md b/content/ru/components/forms/switch.md index 1f29cba9b..df59751b0 100644 --- a/content/ru/components/forms/switch.md +++ b/content/ru/components/forms/switch.md @@ -6,7 +6,7 @@ profile: reference # Переключатель -:badge[sf-switch]{variant=tonal scheme=primary size=1/2} :badge[1.2.0]{variant=outline scheme=on-surface size=1/2} +:badge[sf-switch]{variant=tonal scheme=primary size=1/2} :badge[1.2.2]{variant=outline scheme=on-surface size=1/2} Переключатель включает или выключает настройку сразу после нажатия. Если значение уходит вместе с формой после подтверждения, берите diff --git a/content/ru/components/forms/textarea.md b/content/ru/components/forms/textarea.md index 0bb243277..e893e4789 100644 --- a/content/ru/components/forms/textarea.md +++ b/content/ru/components/forms/textarea.md @@ -6,7 +6,7 @@ profile: reference # Многострочное поле -:badge[sf-textarea]{variant=tonal scheme=primary size=1/2} :badge[1.1.0]{variant=outline scheme=on-surface size=1/2} +:badge[sf-textarea]{variant=tonal scheme=primary size=1/2} :badge[1.2.1]{variant=outline scheme=on-surface size=1/2} Многострочное поле принимает комментарий, описание или другой свободный текст с переносами строк. Для короткого значения в одну строку берите @@ -272,6 +272,7 @@ whenLoader(() => SF.Loader.ready('Textarea', (Textarea) => { | Переменная | По умолчанию | Задаёт | |:---|:---|:---| +| `--sf-textarea--place-variant` | не задана; задают модификаторы, например `.sf-textarea.sf-textarea--filled`: `var(--sf-place--fill-placeholder, var(--sf-on-surface-variant))` | `--sf-textarea-placeholder--color` | | `--sf-textarea--radius` | `var(--sf-textarea-radius, var(--sf-radius--ui))` | `--sf-textarea-textarea--border-end-end-radius`, `--sf-textarea-textarea--border-end-start-radius`, `--sf-textarea-textarea--border-start-end-radius`, `--sf-textarea-textarea--border-start-start-radius` | | `--sf-textarea--row-frame` | не задана; задают модификаторы, например `.sf-textarea.sf-textarea--auto-grow textarea[rows]`: `calc(var(--sf-textarea-textarea--padding-top) + var(--sf-textarea-textarea--padding-bottom) + 2 * var(--sf-px))` | `min-height`, `min-block-size`, `max-height`, `max-block-size` | | `--sf-textarea-hint-text-wrap--background-color` | не задана; задают модификаторы, например `.sf-textarea .sf-textarea-hint-text-wrap`: `transparent` | `background-color` | @@ -297,8 +298,8 @@ whenLoader(() => SF.Loader.ready('Textarea', (Textarea) => { | `--sf-textarea-text--font-weight` | не задана; задают модификаторы, например `.sf-textarea .sf-textarea-text`: `var(--sf-font-weight-regular)` | `font-weight` | | `--sf-textarea-text--line-height` | не задана; задают модификаторы, например `.sf-textarea.sf-textarea--size-1 .sf-textarea-text`: `var(--sf-text-height-1/2)` | `line-height` | | `--sf-textarea-textarea--background-color` | не задана; задают модификаторы, например `.sf-textarea.sf-textarea--bordered textarea`: `var(--sf-textarea-background-color, var(--sf-transparent))` | `background-color` | -| `--sf-textarea-textarea--border` | не задана; задают модификаторы, например `.sf-textarea textarea`: `var(--sf-px) solid` | `border`, `border-color`, `border-end-end-radius`, `border-end-start-radius`, `border-start-end-radius`, `border-start-start-radius` | -| `--sf-textarea-textarea--border-color` | не задана; задают модификаторы, например `.sf-textarea.sf-textarea--bordered textarea`: `var(--sf-textarea-border-color, var(--sf-outline))` | `border-color` | +| `--sf-textarea-textarea--border` | не задана; задают модификаторы, например `.sf-textarea textarea`: `var(--sf-px) solid` | `border`, `border-color`, `border-bottom-color`, `border-block-end-color`, `border-end-end-radius`, `border-end-start-radius`, `border-start-end-radius`, `border-start-start-radius`, `--sf-textarea-textarea--line-color` | +| `--sf-textarea-textarea--border-color` | не задана; задают модификаторы, например `.sf-textarea.sf-textarea--bordered textarea`: `var(--sf-textarea-border-color, var(--sf-outline))` | `border-color`, `border-bottom-color`, `border-block-end-color`, `--sf-textarea-textarea--line-color` | | `--sf-textarea-textarea--border-end-end-radius` | не задана; задают модификаторы, например `.sf-textarea textarea`: `var(--sf-textarea--radius)` | `border-end-end-radius` | | `--sf-textarea-textarea--border-end-start-radius` | не задана; задают модификаторы, например `.sf-textarea textarea`: `var(--sf-textarea--radius)` | `border-end-start-radius` | | `--sf-textarea-textarea--border-start-end-radius` | не задана; задают модификаторы, например `.sf-textarea textarea`: `var(--sf-textarea--radius)` | `border-start-end-radius` | @@ -308,6 +309,7 @@ whenLoader(() => SF.Loader.ready('Textarea', (Textarea) => { | `--sf-textarea-textarea--font-family` | не задана; задают модификаторы, например `.sf-textarea.sf-textarea--size-1.sf-textarea--bordered textarea`: `var(--sf-text--family)` | `font-family` | | `--sf-textarea-textarea--font-size` | не задана; задают модификаторы, например `.sf-textarea.sf-textarea--size-1.sf-textarea--bordered textarea`: `var(--sf-text-size-1)` | `font-size` | | `--sf-textarea-textarea--font-weight` | не задана; задают модификаторы, например `.sf-textarea.sf-textarea--size-1.sf-textarea--bordered textarea`: `var(--sf-font-weight-regular)` | `font-weight` | +| `--sf-textarea-textarea--line-color` | не задана; задают модификаторы, например `.sf-textarea:not(.error).sf-textarea--filled:not(:has(textarea:disabled)) textarea`: `var(--sf-textarea-border-color, var(--sf-outline))` | `border-bottom-color`, `border-block-end-color` | | `--sf-textarea-textarea--line-height` | не задана; задают модификаторы, например `.sf-textarea.sf-textarea--size-1.sf-textarea--bordered textarea`: `var(--sf-text-height-1)` | `line-height`, `min-height`, `min-block-size`, `max-height`, `max-block-size` | | `--sf-textarea-textarea--padding-bottom` | не задана; задают модификаторы, например `.sf-textarea.sf-textarea--size-1 textarea`: `var(--sf-textarea-padding-block, calc(var(--sf-ui-1--space-y-tightness-default) - var(--sf-px)))` | `padding-bottom`, `--sf-textarea--row-frame` | | `--sf-textarea-textarea--padding-inline-end` | не задана; задают модификаторы, например `.sf-textarea.sf-textarea--size-1 textarea`: `var(--sf-textarea-padding-inline, calc(var(--sf-ui-1--space-x) + var(--sf-ui-1--text-space-x)))` | `padding-inline-end` | diff --git a/content/ru/components/forms/verification.md b/content/ru/components/forms/verification.md index ee8fd63f1..b368436a0 100644 --- a/content/ru/components/forms/verification.md +++ b/content/ru/components/forms/verification.md @@ -6,7 +6,7 @@ profile: reference # Код подтверждения -:badge[sf-verification]{variant=tonal scheme=primary size=1/2} :badge[1.1.0]{variant=outline scheme=on-surface size=1/2} +:badge[sf-verification]{variant=tonal scheme=primary size=1/2} :badge[1.2.1]{variant=outline scheme=on-surface size=1/2} Код подтверждения принимает одноразовый код из сообщения или приложения и показывает его по отдельным ячейкам. Под ячейками лежит одно нативное поле, @@ -170,7 +170,7 @@ document.addEventListener('verification:complete', (event) => { | `--sf-verification-border-width` | Толщина рамки ячейки. | `var(--sf-px)` | | `--sf-verification-radius` | Скругление углов ячейки и кольца фокуса вокруг ячеек. | `var(--sf-radius--ui)` | | `--sf-verification-color` | Цвет символов в ячейках; у ошибки и недоступного поля свой. | `var(--sf-on-surface)` | -| `--sf-verification-cell-size` | Ширина и высота ячейки; если задана — одинаковая на всех размерах. | `var(--sf-title-height-6)`; зависит от размера | +| `--sf-verification-cell-size` | Ширина и высота ячейки; если задана — одинаковая на всех размерах. | `var(--sf-ui-1--control-height)`; зависит от размера | | `--sf-verification-gap` | Расстояние между ячейками. | `var(--sf-space-1/3)` | | `--sf-verification-invalid-border-color` | Рамка ячейки при ошибке в коде. | `var(--sf-error)` | @@ -187,7 +187,7 @@ document.addEventListener('verification:complete', (event) => { | Переменная | По умолчанию | Задаёт | |:---|:---|:---| | `--sf-verification--border-width` | `var(--sf-verification-border-width, var(--sf-px))` | `border` | -| `--sf-verification--cell-size` | `var(--sf-verification-cell-size, var(--sf-title-height-6))` | `width`, `inline-size`, `height`, `block-size` | +| `--sf-verification--cell-size` | `var(--sf-verification-cell-size, var(--sf-ui-1--control-height))` | `width`, `inline-size`, `height`, `block-size` | | `--sf-verification--font-size` | не задана; задают модификаторы, например `.sf-verification--size-1/2`: `var(--sf-text-size-1/2)` | `font-size` | | `--sf-verification--gap` | `var(--sf-verification-gap, var(--sf-space-1/3))` | `gap` | | `--sf-verification--line-height` | не задана; задают модификаторы, например `.sf-verification--size-1/2`: `var(--sf-text-height-1/2)` | `line-height` | diff --git a/content/ru/components/internal/admin-menu.md b/content/ru/components/internal/admin-menu.md index fab01c753..36a63f7bd 100644 --- a/content/ru/components/internal/admin-menu.md +++ b/content/ru/components/internal/admin-menu.md @@ -6,7 +6,7 @@ profile: reference # Основа Admin Menu -:badge[sf-admin-menu]{variant=tonal scheme=primary size=1/2} :badge[1.1.1]{variant=outline scheme=on-surface size=1/2} +:badge[sf-admin-menu]{variant=tonal scheme=primary size=1/2} :badge[1.1.2]{variant=outline scheme=on-surface size=1/2} `sf-admin-menu` — оформление и поведение боковой навигации административного приложения: шапка, поиск, пункты с иконками, вложенные панели, компактный @@ -138,7 +138,7 @@ whenLoader(() => SF.Loader.ready('AdminMenu', () => { | Переменная | По умолчанию | Задаёт | |:---|:---|:---| -| `--sf-admin-menu-item--background-color` | не задана; задают модификаторы, например `.sf-admin-menu-item:not(:disabled):not(.disabled):hover`: `var(--sf-secondary-container-hover)` | `background-color` | +| `--sf-admin-menu-item--background-color` | не задана; задают модификаторы, например `.sf-admin-menu-item:not(:disabled):not(.disabled):hover`: `var(--sf-secondary-container-hover)` | `background-color`, `--sf-surface-place-fill` | | `--sf-admin-menu-item--border-color` | не задана; задают модификаторы, например `.sf-admin-menu-item-segment:not(.disabled):hover .sf-admin-menu-item`: `var(--sf-transparent)` | `border-color` | | `--sf-admin-menu-item--border-end-end-radius` | не задана; задают модификаторы, например `.sf-admin-menu-item.segment-start`: `0` | `border-end-end-radius` | | `--sf-admin-menu-item--border-end-start-radius` | не задана; задают модификаторы, например `.sf-admin-menu-item.segment-middle`: `0` | `border-end-start-radius` | @@ -148,7 +148,7 @@ whenLoader(() => SF.Loader.ready('AdminMenu', () => { | `--sf-admin-menu-item-container--color` | не задана; задают модификаторы, например `.sf-admin-menu-item:not(:disabled):not(.disabled):hover .sf-admin-menu-item-container`: `var(--sf-on-secondary-container)` | `color` | | `--sf-admin-menu-item-segment--background-color` | не задана; задают модификаторы, например `.sf-admin-menu-item-segment:not(.disabled):hover`: `var( --sf-secondary-container-hover - )` | `background-color` | + )` | `background-color`, `--sf-surface-place-fill` | | `--sf-admin-menu-main--padding-inline-end` | не задана; задают модификаторы, например `.sf-admin-menu-main.open`: `0` | `margin-inline-end`, `padding-inline-end` | ## См. также diff --git a/content/ru/components/navigation/context-menu.md b/content/ru/components/navigation/context-menu.md index 675fcac81..4cef41fcf 100644 --- a/content/ru/components/navigation/context-menu.md +++ b/content/ru/components/navigation/context-menu.md @@ -6,7 +6,7 @@ profile: reference # Контекстное меню -:badge[sf-context-menu]{variant=tonal scheme=primary size=1/2} :badge[1.8.0]{variant=outline scheme=on-surface size=1/2} +:badge[sf-context-menu]{variant=tonal scheme=primary size=1/2} :badge[1.8.1]{variant=outline scheme=on-surface size=1/2} Контекстное меню — приподнятая панель с коротким списком действий над выбранным объектом: строкой таблицы, файлом, карточкой. Ширина панели @@ -155,17 +155,18 @@ profile: reference | `--sf-context-menu--item-inset-start-2` | не задана; задают модификаторы, например `.sf-context-menu .sf-context-menu-content`: `var(--sf-context-menu--row-padding)` | `--sf-button--padding-inline-start` | | `--sf-context-menu--label-inset-1` | не задана; задают модификаторы, например `.sf-context-menu .sf-context-menu-content`: `calc(var(--sf-context-menu--item-inset-start-1) + var(--sf-ui-1--text-space-x))` | — | | `--sf-context-menu--label-inset-2` | не задана; задают модификаторы, например `.sf-context-menu .sf-context-menu-content`: `calc(var(--sf-context-menu--item-inset-start-2) + var(--sf-ui-2--text-space-x))` | — | -| `--sf-context-menu--line` | не задана; задают модификаторы, например `.sf-context-menu .sf-context-menu-content`: `var(--sf-text-height-1/2)` | `line-height`, `--sf-icon--font-size`, `--sf-icon--width`, `--sf-icon--height`, `width`, `inline-size`, `height`, `block-size`, `margin-inline-start`, `--sf-context-menu-switch--track`, `min-width`, `min-inline-size` | -| `--sf-context-menu--row-height` | не задана; задают модификаторы, например `.sf-context-menu .sf-context-menu-content`: `var(--sf-ui-1/2--control-height)` | `min-height`, `min-block-size`, `--sf-context-menu-choice--option-height` | +| `--sf-context-menu--line` | не задана; задают модификаторы, например `.sf-context-menu .sf-context-menu-content`: `var(--sf-text-height-1/2)` | `line-height`, `--sf-icon--font-size`, `--sf-icon--width`, `--sf-icon--height`, `padding-top`, `padding-bottom`, `padding-block`, `width`, `inline-size`, `height`, `block-size`, `margin-inline-start`, `--sf-context-menu-switch--track`, `min-width`, `min-inline-size` | +| `--sf-context-menu--row-height` | не задана; задают модификаторы, например `.sf-context-menu .sf-context-menu-content`: `var(--sf-ui-1/2--control-height)` | `min-height`, `min-block-size`, `padding-top`, `padding-bottom`, `padding-block`, `--sf-context-menu-choice--option-height`, `--sf-context-menu--row-step` | | `--sf-context-menu--row-padding` | не задана; задают модификаторы, например `.sf-context-menu .sf-context-menu-content`: `var(--sf-space-1/2)` | `--sf-context-menu--inset-start`, `--sf-context-menu--inset-end`, `padding-left`, `padding-right`, `padding-inline` | | `--sf-context-menu--row-radius` | не задана; задают модификаторы, например `.sf-context-menu .sf-context-menu-content`: `var(--sf-context-menu-row-radius, var(--sf-radius--ui))` | `border-radius` | +| `--sf-context-menu--row-step` | не задана; задают модификаторы, например `.sf-context-menu .sf-context-menu-content`: `max(var(--sf-context-menu--row-height), var(--sf-d1))` | `padding-top`, `padding-bottom`, `padding-block` | | `--sf-context-menu--screen-inline-size` | не задана; задают модификаторы, например `.sf-context-menu .sf-context-menu-content[data-sf-width=list]`: `var(--sf-context-menu-available-inline-size, calc(100vi - var(--sf-space-1)))` | `min-width`, `min-inline-size`, `max-width`, `max-inline-size` | | `--sf-context-menu--space-y` | не задана; задают модификаторы, например `.sf-context-menu .sf-context-menu-content`: `var(--sf-ui-1/2--space-y)` | `padding`, `min-width`, `min-inline-size` | | `--sf-context-menu--text-size` | не задана; задают модификаторы, например `.sf-context-menu .sf-context-menu-content`: `var(--sf-text-size-1/2)` | `font-size` | | `--sf-context-menu--thumb` | не задана; задают модификаторы, например `.sf-context-menu .sf-context-menu-content`: `var(--sf-space-1/4)` | `--sf-context-menu--track` | | `--sf-context-menu--track` | не задана; задают модификаторы, например `.sf-context-menu:not(.sf-context-menu--panel) .sf-context-menu-content`: `calc(2 * var(--sf-context-menu-content--padding-inline-end) + var(--sf-context-menu--thumb))` | `width`, `height`, `border-radius` | | `--sf-context-menu-choice--option-height` | не задана; задают модификаторы, например `.sf-context-menu-choice-option.sf-context-menu-item`: `min(var(--sf-context-menu--inner-height), calc(var(--sf-context-menu--row-height) - 2 * var(--sf-a2)))` | `min-height`, `min-block-size`, `width`, `inline-size` | -| `--sf-context-menu-content--background-color` | не задана; задают модификаторы, например `.sf-context-menu .sf-context-menu-content`: `var(--sf-context-menu-background-color, var(--sf-surface-popup))` | `--sf-surface-place`, `--sf-surface-place-solid`, `background-color` | +| `--sf-context-menu-content--background-color` | не задана; задают модификаторы, например `.sf-context-menu .sf-context-menu-content`: `var(--sf-context-menu-background-color, var(--sf-surface-popup))` | `--sf-surface-place`, `--sf-surface-place-solid`, `--sf-surface-place-ground`, `background-color` | | `--sf-context-menu-content--border-radius` | не задана; задают модификаторы, например `.sf-context-menu .sf-context-menu-content`: `var(--sf-context-menu-radius, var(--sf-radius--surface))` | `border-radius` | | `--sf-context-menu-content--padding-bottom` | не задана; задают модификаторы, например `.sf-context-menu .sf-context-menu-content`: `var(--sf-context-menu-padding-block, var(--sf-space-1/4))` | `padding-bottom`, `min-height`, `min-block-size`, `padding-block`, `bottom`, `inset-block-end`, `margin-bottom`, `margin-block-end`, `padding-block-end` | | `--sf-context-menu-content--padding-inline-end` | не задана; задают модификаторы, например `.sf-context-menu .sf-context-menu-content`: `var(--sf-context-menu-padding-inline, var(--sf-space-1/4))` | `padding-inline-end`, `padding-inline`, `margin-inline`, `--sf-context-menu--track`, `border` | diff --git a/content/ru/components/navigation/dropdown.md b/content/ru/components/navigation/dropdown.md index 65092ad85..d1e212f8e 100644 --- a/content/ru/components/navigation/dropdown.md +++ b/content/ru/components/navigation/dropdown.md @@ -6,7 +6,7 @@ profile: reference # Выпадающий список -:badge[sf-dropdown]{variant=tonal scheme=primary size=1/2} :badge[1.5.2]{variant=outline scheme=on-surface size=1/2} +:badge[sf-dropdown]{variant=tonal scheme=primary size=1/2} :badge[1.6.1]{variant=outline scheme=on-surface size=1/2} Выпадающий список экономит место и даёт выбрать одно или несколько значений из набора вариантов; видимая подпись пункта отделена от его машинного @@ -214,7 +214,7 @@ document.querySelector('.sf-dropdown').addEventListener('change', (event) => { | Что | Классы | |:---|:---| | Блок | `sf-dropdown` | -| Части | `sf-dropdown-field`, `sf-dropdown-field-visual`, `sf-dropdown-label`, `sf-dropdown-placeholder`, `sf-dropdown-required`, `sf-dropdown-tag-container`, `sf-dropdown-text`, `sf-dropdown-trigger`, `sf-dropdown-value` | +| Части | `sf-dropdown-field`, `sf-dropdown-field-visual`, `sf-dropdown-label`, `sf-dropdown-message`, `sf-dropdown-placeholder`, `sf-dropdown-required`, `sf-dropdown-tag-container`, `sf-dropdown-text`, `sf-dropdown-trigger`, `sf-dropdown-value` | | Модификаторы | `sf-dropdown--filled`, `sf-dropdown--outlined`, `sf-dropdown--tag`, `sf-dropdown--text` | | Размеры | `sf-dropdown--size-1`, `sf-dropdown--size-1/2`, `sf-dropdown--size-2` | @@ -227,9 +227,10 @@ document.querySelector('.sf-dropdown').addEventListener('change', (event) => { | Переменная | По умолчанию | Задаёт | |:---|:---|:---| | `--sf-dropdown-field--background-color` | не задана; задают модификаторы, например `.sf-dropdown.sf-dropdown--outlined.sf-dropdown--text:not(:has(> .sf-dropdown-field > :disabled)) .sf-dropdown-field`: `var(--sf-dropdown-background-color, var(--sf-transparent))` | `background-color` | -| `--sf-dropdown-field--border` | не задана; задают модификаторы, например `.sf-dropdown .sf-dropdown-field`: `var(--sf-px) solid` | `border`, `border-color`, `border-end-end-radius`, `border-end-start-radius`, `border-start-end-radius`, `border-start-start-radius` | -| `--sf-dropdown-field--border-color` | не задана; задают модификаторы, например `.sf-dropdown.sf-dropdown--outlined.sf-dropdown--text:not(:has(> .sf-dropdown-field > :disabled)) .sf-dropdown-field`: `var(--sf-dropdown-border-color, var(--sf-outline))` | `border-color` | +| `--sf-dropdown-field--border` | не задана; задают модификаторы, например `.sf-dropdown .sf-dropdown-field`: `var(--sf-px) solid` | `border`, `border-color`, `border-bottom-color`, `border-block-end-color`, `border-end-end-radius`, `border-end-start-radius`, `border-start-end-radius`, `border-start-start-radius` | +| `--sf-dropdown-field--border-color` | не задана; задают модификаторы, например `.sf-dropdown.sf-dropdown--outlined.sf-dropdown--text:not(:has(> .sf-dropdown-field > :disabled)) .sf-dropdown-field`: `var(--sf-dropdown-border-color, var(--sf-outline))` | `border-color`, `border-bottom-color`, `border-block-end-color` | | `--sf-dropdown-field--gap` | не задана; задают модификаторы, например `.sf-dropdown.sf-dropdown--size-1/2 .sf-dropdown-field`: `var(--sf-space-1/4)` | `gap` | +| `--sf-dropdown-field--line-color` | не задана; задают модификаторы, например `.sf-dropdown.sf-dropdown--filled.sf-dropdown--text:not(:has(> .sf-dropdown-field > :disabled)) .sf-dropdown-field`: `var(--sf-dropdown-border-color, var(--sf-outline))` | `border-bottom-color`, `border-block-end-color` | | `--sf-dropdown-field--padding-bottom` | не задана; задают модификаторы, например `.sf-dropdown.sf-dropdown--size-1/2 .sf-dropdown-field`: `calc(var(--sf-ui-1/2--space-y-tightness-default) - var(--sf-px))` | `padding-bottom` | | `--sf-dropdown-field--padding-inline-end` | не задана; задают модификаторы, например `.sf-dropdown.sf-dropdown--size-1/2 .sf-dropdown-field`: `var(--sf-ui-1/2--space-x)` | `padding-inline-end`, `inset-inline-end` | | `--sf-dropdown-field--padding-inline-start` | не задана; задают модификаторы, например `.sf-dropdown.sf-dropdown--size-1/2 .sf-dropdown-field`: `var(--sf-ui-1/2--space-x)` | `padding-inline-start` | @@ -243,6 +244,9 @@ document.querySelector('.sf-dropdown').addEventListener('change', (event) => { | `--sf-dropdown-input--padding-inline-start` | не задана; задают модификаторы, например `.sf-dropdown.sf-dropdown--size-1.sf-dropdown--outlined.sf-dropdown--text .sf-dropdown-field input`: `var(--sf-ui-1--text-space-x)` | `padding-inline-start` | | `--sf-dropdown-label--background-color` | не задана; задают модификаторы, например `.sf-dropdown .sf-dropdown-label`: `transparent` | `background-color` | | `--sf-dropdown-label--gap` | не задана; задают модификаторы, например `.sf-dropdown .sf-dropdown-label`: `var(--sf-space-1/4)` | `gap` | +| `--sf-dropdown-message--color` | не задана; задают модификаторы, например `.sf-dropdown.error .sf-dropdown-message`: `var(--sf-error)` | `color` | +| `--sf-dropdown-message--font-size` | не задана; задают модификаторы, например `.sf-dropdown.sf-dropdown--size-1/2 .sf-dropdown-message`: `var(--sf-text-size-1/3)` | `font-size` | +| `--sf-dropdown-message--line-height` | не задана; задают модификаторы, например `.sf-dropdown.sf-dropdown--size-1/2 .sf-dropdown-message`: `var(--sf-text-height-1/3)` | `line-height` | | `--sf-dropdown-placeholder--color` | не задана; задают модификаторы, например `.sf-dropdown.sf-dropdown--outlined.sf-dropdown--text .sf-dropdown-field input::-webkit-input-placeholder`: `var(--sf-on-surface-variant)` | `color` | | `--sf-dropdown-placeholder--font-family` | не задана; задают модификаторы, например `.sf-dropdown.sf-dropdown--text .sf-dropdown-field input::-webkit-input-placeholder`: `var(--sf-text--family)` | `font-family` | | `--sf-dropdown-placeholder--font-size` | не задана; задают модификаторы, например `.sf-dropdown.sf-dropdown--size-1.sf-dropdown--outlined.sf-dropdown--text .sf-dropdown-field input::-webkit-input-placeholder`: `var(--sf-text-size-1)` | `font-size` | diff --git a/content/ru/components/navigation/link.md b/content/ru/components/navigation/link.md index 6dc371d4e..5c5abf680 100644 --- a/content/ru/components/navigation/link.md +++ b/content/ru/components/navigation/link.md @@ -6,7 +6,7 @@ profile: reference # Ссылка -:badge[sf-link]{variant=tonal scheme=primary size=1/2} :badge[1.0.0]{variant=outline scheme=on-surface size=1/2} +:badge[sf-link]{variant=tonal scheme=primary size=1/2} :badge[1.0.1]{variant=outline scheme=on-surface size=1/2} Ссылка ведёт на другую страницу, раздел страницы или файл. Для действия на текущей странице — сохранить, отправить, открыть окно — берите diff --git a/content/ru/components/navigation/menu.md b/content/ru/components/navigation/menu.md index 61b30ec40..3cc05ba45 100644 --- a/content/ru/components/navigation/menu.md +++ b/content/ru/components/navigation/menu.md @@ -6,7 +6,7 @@ profile: reference # Меню -:badge[sf-menu]{variant=tonal scheme=primary size=1/2} :badge[1.6.1]{variant=outline scheme=on-surface size=1/2} +:badge[sf-menu]{variant=tonal scheme=primary size=1/2} :badge[1.6.2]{variant=outline scheme=on-surface size=1/2} Меню ведёт по разделам сайта, раздела или личного кабинета и раскрывает группы вложенных разделов. Один компонент показывается вертикально в боковой @@ -274,7 +274,7 @@ profile: reference | `--sf-menu--line-border` | не задана; задают модификаторы, например `.sf-menu.sf-menu--navigation.sf-menu--bordered:not(.sf-menu--horizontal):not(.sf-menu-item > .sf-menu)`: `var(--sf-menu--border-width, var(--sf-px))` | `inset-inline-start` | | `--sf-menu--radius` | не задана; задают модификаторы, например `.sf-menu.sf-menu--horizontal > .sf-menu-item > .sf-menu`: `var(--sf-menu-horizontal-submenu--radius, var(--sf-menu-submenu-radius, var(--sf-radius--ui)))` | `border-radius`, `--sf-menu-path--block-start`, `--sf-menu-path--block-end` | | `--sf-menu--row-padding` | не задана; задают модификаторы, например `.sf-menu.sf-menu--navigation:not(.sf-menu--horizontal)`: `var(--sf-space-1/2)` | `--sf-menu-element--padding-inline-start`, `--sf-menu-element--padding-inline-end`, `padding-inline` | -| `--sf-menu-element--background-color` | не задана; задают модификаторы, например `.sf-menu-element`: `var(--sf-menu-item-background-color, var(--sf-transparent))` | `background-color` | +| `--sf-menu-element--background-color` | не задана; задают модификаторы, например `.sf-menu-element`: `var(--sf-menu-item-background-color, var(--sf-transparent))` | `background-color`, `--sf-surface-place-fill` | | `--sf-menu-element--border-color` | не задана; задают модификаторы, например `.sf-menu-element`: `var(--sf-menu-item-border-color, var(--sf-surface-container))` | `border-color` | | `--sf-menu-element--border-width` | не задана; задают модификаторы, например `.sf-menu-element`: `var(--sf-px)` | `padding-top`, `padding-block-start`, `padding-bottom`, `padding-block-end`, `border-top-width`, `border-block-start-width`, `border-bottom-width`, `border-block-end-width`, `border-inline-start-width`, `border-inline-end-width`, `margin-top`, `margin-block-start`, `margin-bottom`, `margin-block-end` | | `--sf-menu-element--color` | не задана; задают модификаторы, например `.sf-menu-element`: `var(--sf-menu-item-color, var(--sf-on-surface))` | `color` | diff --git a/content/ru/components/navigation/pagination.md b/content/ru/components/navigation/pagination.md index ee71a2658..dfcad1407 100644 --- a/content/ru/components/navigation/pagination.md +++ b/content/ru/components/navigation/pagination.md @@ -6,7 +6,7 @@ profile: reference # Пагинация -:badge[sf-pagination]{variant=tonal scheme=primary size=1/2} :badge[1.3.1]{variant=outline scheme=on-surface size=1/2} +:badge[sf-pagination]{variant=tonal scheme=primary size=1/2} :badge[1.3.2]{variant=outline scheme=on-surface size=1/2} Пагинация делит длинный список результатов на страницы, показывает текущую и даёт перейти к соседней или конкретной странице. Ставьте её сразу после @@ -204,7 +204,7 @@ profile: reference | `--sf-pagination-total--font-size` | не задана; задают модификаторы, например `.sf-pagination.sf-pagination--size-1/2`: `var(--sf-text-size-1/2)` | `font-size` | | `--sf-pagination-total--gap` | не задана; задают модификаторы, например `.sf-pagination .sf-pagination-total`: `var(--sf-space-1/3)` | `gap` | | `--sf-pagination-total--line-height` | не задана; задают модификаторы, например `.sf-pagination.sf-pagination--size-1/2`: `var(--sf-text-height-1/2)` | `line-height` | -| `--sf-page-number--background-color` | `var(--sf-pagination-page-background-color, var(--sf-surface-0))` | `background-color` | +| `--sf-page-number--background-color` | `var(--sf-pagination-page-background-color, var(--sf-surface-page))` | `background-color` | | `--sf-page-number--border-bottom-width` | `var(--sf-px)` | `border-bottom-width`, `border-block-end-width` | | `--sf-page-number--border-color` | не задана; задают модификаторы, например `.sf-page-number:not(:disabled):not(.disabled):active`: `var(--sf-primary-active)` | `border-color` | | `--sf-page-number--border-end-end-radius` | не задана; задают модификаторы, например `.sf-page-number--square`: `var(--sf-pagination-page-radius, var(--sf-radius--ui))` | `border-end-end-radius` | diff --git a/content/ru/components/navigation/step.md b/content/ru/components/navigation/step.md index cec406426..7e139b5b2 100644 --- a/content/ru/components/navigation/step.md +++ b/content/ru/components/navigation/step.md @@ -6,7 +6,7 @@ profile: reference # Шаги -:badge[sf-steps]{variant=tonal scheme=primary size=1/2} :badge[1.1.0]{variant=outline scheme=on-surface size=1/2} +:badge[sf-steps]{variant=tonal scheme=primary size=1/2} :badge[1.2.0]{variant=outline scheme=on-surface size=1/2} Шаги показывают этапы линейного процесса — оформления заказа, публикации, настройки — и отмечают завершённые, текущий и будущие. Берите их для трёх и @@ -137,7 +137,7 @@ profile: reference | `--sf-steps-step-color` | Подпись и номер шага в покое. | `var(--sf-on-surface-variant)` | | `--sf-steps-step-border-color` | Обводка шага в покое. | `var(--sf-outline-variant)` | | `--sf-steps-step-radius` | Скругление углов шага. | `var(--sf-radius-circle)` | -| `--sf-steps-current-border-color` | Обводка текущего шага. | `var(--sf-outline-primary)` | +| `--sf-steps-current-border-color` | Обводка текущего шага; по умолчанию её нет, текущий шаг — плашка primary-container (C16, component.step 1.2.0). | `var(--sf-transparent)` | | `--sf-steps-completed-icon-color` | Значок-галочка пройденного шага. | `var(--sf-success)` | ```css @@ -155,13 +155,16 @@ profile: reference | `--sf-steps-container--background-color` | не задана; задают модификаторы, например `.sf-steps .sf-steps-container`: `transparent` | `background-color` | | `--sf-steps-container--gap` | не задана; задают модификаторы, например `.sf-steps.sf-steps--size-1 .sf-steps-container`: `var(--sf-space-1/4)` | `gap` | | `--sf-step--background-color` | `transparent` | `background-color` | +| `--sf-step--block-size` | не задана; задают модификаторы, например `.sf-step--size-1`: `var(--sf-ui-1--control-height)` | `min-height`, `min-block-size` | | `--sf-step--border-color` | `var(--sf-steps-step-border-color, var(--sf-outline-variant))` | `border-color` | | `--sf-step--box-shadow` | не задана; задают модификаторы, например `.sf-step:not(:disabled):not(.disabled):not([aria-disabled=true]).focus-visible`: `none` | `box-shadow` | | `--sf-step--color` | `var(--sf-on-surface-variant)` | `color` | | `--sf-step--font-size` | не задана; задают модификаторы, например `.sf-step--size-1`: `var(--sf-text-size-1)` | `font-size` | +| `--sf-step--icon-size` | не задана; задают модификаторы, например `.sf-step.sf-step--size-1/2 .sf-icon`: `var(--sf-text-height-1/2)` | `font-size`, `height`, `width` | | `--sf-step--line-height` | не задана; задают модификаторы, например `.sf-step--size-1`: `var(--sf-text-height-1)` | `line-height` | -| `--sf-step--padding-bottom` | не задана; задают модификаторы, например `.sf-step--size-1`: `var(--sf-space-1/4)` | `padding-bottom` | -| `--sf-step--padding-top` | не задана; задают модификаторы, например `.sf-step--size-1`: `var(--sf-space-1/4)` | `padding-top` | +| `--sf-step--padding-bottom` | не задана; задают модификаторы, например `.sf-step--size-1`: `0` | `padding-bottom` | +| `--sf-step--padding-inline` | не задана; задают модификаторы, например `.sf-step--size-1`: `var(--sf-ui-1--text-space-x)` | `padding-inline-end`, `padding-inline-start` | +| `--sf-step--padding-top` | не задана; задают модификаторы, например `.sf-step--size-1`: `0` | `padding-top` | | `--sf-step-container--background-color` | не задана; задают модификаторы, например `.sf-step .sf-step-container`: `transparent` | `background-color` | | `--sf-step-container--color` | не задана; задают модификаторы, например `.sf-step.sf-step--stage-default .sf-step-container`: `var(--sf-steps-step-color, var(--sf-on-surface-variant))` | `color` | | `--sf-step-container--font-size` | не задана; задают модификаторы, например `.sf-step.sf-step--size-1 .sf-step-container`: `var(--sf-text-size-1)` | `font-size` | diff --git a/content/ru/components/navigation/tabs.md b/content/ru/components/navigation/tabs.md index 24a11ab60..571fbe2dc 100644 --- a/content/ru/components/navigation/tabs.md +++ b/content/ru/components/navigation/tabs.md @@ -6,7 +6,7 @@ profile: reference # Вкладки -:badge[sf-tabs]{variant=tonal scheme=primary size=1/2} :badge[1.1.0]{variant=outline scheme=on-surface size=1/2} +:badge[sf-tabs]{variant=tonal scheme=primary size=1/2} :badge[1.1.1]{variant=outline scheme=on-surface size=1/2} Вкладки показывают один из нескольких связанных разделов на месте, без перехода на другую страницу. Пункты короткие и относятся к одному объекту; diff --git a/content/ru/components/navigation/tree.md b/content/ru/components/navigation/tree.md index 2cc0ee939..44ac37d90 100644 --- a/content/ru/components/navigation/tree.md +++ b/content/ru/components/navigation/tree.md @@ -6,7 +6,7 @@ profile: reference # Дерево -:badge[sf-tree]{variant=tonal scheme=primary size=1/2} :badge[1.1.2]{variant=outline scheme=on-surface size=1/2} +:badge[sf-tree]{variant=tonal scheme=primary size=1/2} :badge[1.2.0]{variant=outline scheme=on-surface size=1/2} Дерево показывает вложенную иерархию — папки, разделы, категории — и даёт раскрывать и сворачивать ветви. Для навигации по страницам сайта с diff --git a/content/ru/components/overlays-media/carousel.md b/content/ru/components/overlays-media/carousel.md index 1d92f5aa7..a1d401fc5 100644 --- a/content/ru/components/overlays-media/carousel.md +++ b/content/ru/components/overlays-media/carousel.md @@ -6,7 +6,7 @@ profile: reference # Карусель -:badge[sf-carousel]{variant=tonal scheme=primary size=1/2} :badge[1.1.0]{variant=outline scheme=on-surface size=1/2} +:badge[sf-carousel]{variant=tonal scheme=primary size=1/2} :badge[1.2.0]{variant=outline scheme=on-surface size=1/2} Карусель показывает материалы по одному в области постоянной высоты: баннеры, новости, изображения. Она добавляет к движку @@ -127,7 +127,7 @@ document.addEventListener('sf:carousel-change', (event) => { | Что | Классы | |:---|:---| | Блок | `sf-carousel` | -| Части | `sf-carousel-pagination`, `sf-carousel-pagination--big`, `sf-carousel-pagination--no-background`, `sf-carousel-pagination--primary-container`, `sf-carousel-pagination--surface-2`, `sf-carousel-pagination--surface-inverse`, `sf-carousel-pagination-item`, `sf-carousel-pagination-item--active`, `sf-carousel-rotation`, `sf-carousel-slide`, `sf-carousel-slider`, `sf-carousel-switch`, `sf-carousel-switch--big`, `sf-carousel-switch--left`, `sf-carousel-switch--media`, `sf-carousel-switch--next`, `sf-carousel-switch--prev`, `sf-carousel-switch--right`, `sf-carousel-switch--secondary-container`, `sf-carousel-switch--surface-inverse`, `sf-carousel-switch--surface-zero` | +| Части | `sf-carousel-pagination`, `sf-carousel-pagination--big`, `sf-carousel-pagination--no-background`, `sf-carousel-pagination--primary`, `sf-carousel-pagination--primary-container`, `sf-carousel-pagination--surface-2`, `sf-carousel-pagination--surface-area`, `sf-carousel-pagination--surface-inverse`, `sf-carousel-pagination-item`, `sf-carousel-pagination-item--active`, `sf-carousel-rotation`, `sf-carousel-slide`, `sf-carousel-slider`, `sf-carousel-switch`, `sf-carousel-switch--big`, `sf-carousel-switch--left`, `sf-carousel-switch--media`, `sf-carousel-switch--next`, `sf-carousel-switch--prev`, `sf-carousel-switch--primary`, `sf-carousel-switch--right`, `sf-carousel-switch--secondary-container`, `sf-carousel-switch--surface-inverse`, `sf-carousel-switch--surface-page`, `sf-carousel-switch--surface-zero` | Классы и переменные собраны из CSS выпуска и обновляются вместе с ним. @@ -138,10 +138,14 @@ document.addEventListener('sf:carousel-change', (event) => { | Переменная | По умолчанию | Задаёт | |:---|:---|:---| | `--sf-carousel--block-size` | `var(--sf-g3)` | `height`, `block-size` | -| `--sf-carousel-control--background-color` | `var(--sf-primary)` | `background-color` | -| `--sf-carousel-control--color` | `var(--sf-on-primary)` | `color` | -| `--sf-carousel-pagination--background-color` | `var(--sf-primary)` | `background-color` | -| `--sf-carousel-pagination-item--color` | `var(--sf-on-primary)` | `color` | +| `--sf-carousel-control--backdrop` | `blur(var(--sf-blur-large))` | `backdrop-filter` | +| `--sf-carousel-control--background-color` | `var(--sf-surface-media)` | `background-color` | +| `--sf-carousel-control--color` | `var(--sf-on-surface-media)` | `color` | +| `--sf-carousel-control--radius` | `var(--sf-radius-rounded)` | `border-radius` | +| `--sf-carousel-pagination--backdrop` | не задана; задают модификаторы, например `.sf-carousel-pagination--primary`: `none` | `backdrop-filter` | +| `--sf-carousel-pagination--background-color` | `var(--sf-surface-media)` | `background-color` | +| `--sf-carousel-pagination--radius` | `var(--sf-radius-rounded)` | `border-radius` | +| `--sf-carousel-pagination-item--color` | `var(--sf-on-surface-media)` | `color` | ## См. также diff --git a/content/ru/components/overlays-media/modal.md b/content/ru/components/overlays-media/modal.md index 2de9d0647..6865a7f0d 100644 --- a/content/ru/components/overlays-media/modal.md +++ b/content/ru/components/overlays-media/modal.md @@ -6,7 +6,7 @@ profile: reference # Модальное окно -:badge[sf-modal]{variant=tonal scheme=primary size=1/2} :badge[1.1.4]{variant=outline scheme=on-surface size=1/2} +:badge[sf-modal]{variant=tonal scheme=primary size=1/2} :badge[1.3.0]{variant=outline scheme=on-surface size=1/2} Модальное окно переводит пользователя к одной важной задаче поверх страницы: подтвердить действие, заполнить короткую форму. Страница за окном недоступна, @@ -171,7 +171,8 @@ document.addEventListener('modal:before-close', (event) => { | Что | Классы | |:---|:---| | Блок | `sf-modal` | -| Части | `sf-modal-close-button`, `sf-modal-close-button--inline-end`, `sf-modal-focus-guard`, `sf-modal-footer`, `sf-modal-header`, `sf-modal-header-action`, `sf-modal-header-content`, `sf-modal-hide-button`, `sf-modal-hide-button--inline-end`, `sf-modal-hide-icon`, `sf-modal-loading`, `sf-modal-spinner`, `sf-modal-surface`, `sf-modal-surface--elevated` | +| Части | `sf-modal-close-button`, `sf-modal-close-button--inline-end`, `sf-modal-focus-guard`, `sf-modal-footer`, `sf-modal-header`, `sf-modal-header-action`, `sf-modal-header-content`, `sf-modal-hide-button`, `sf-modal-hide-button--inline-end`, `sf-modal-hide-icon`, `sf-modal-loading`, `sf-modal-spinner`, `sf-modal-surface`, `sf-modal-surface--elevated`, `sf-modal-title` | +| Размеры | `sf-modal--size-question` | | Устаревшие | `sf-modal--positon-bottom` → `sf-modal--position-bottom`, `sf-modal--positon-center` → `sf-modal--position-center`, `sf-modal--positon-inline-end` → `sf-modal--position-inline-end`, `sf-modal--positon-inline-start` → `sf-modal--position-inline-start`, `sf-modal--positon-left` → `sf-modal--position-left`, `sf-modal--positon-right` → `sf-modal--position-right`, `sf-modal--positon-top` → `sf-modal--position-top` | Классы и переменные собраны из CSS выпуска и обновляются вместе с ним. @@ -188,8 +189,8 @@ document.addEventListener('modal:before-close', (event) => { | `--sf-modal-border-color` | Цвет рамки панели. | `var(--sf-outline-variant, transparent)` | | `--sf-modal-border-width` | Толщина рамки панели со всех сторон. | `var(--sf-border-width, var(--sf-px))` | | `--sf-modal-radius` | Скругление углов панели; панель во весь экран остаётся прямоугольной. | `var(--sf-radius--surface)` | -| `--sf-modal-padding-inline` | Отступ внутри панели до и после содержимого; атрибут `surface-padding` окна важнее. | `var(--sf-space-2)` | -| `--sf-modal-padding-block` | Отступ внутри панели сверху и снизу от содержимого; атрибут `surface-padding` окна важнее. | `var(--sf-space-2)` | +| `--sf-modal-padding-inline` | Отступ внутри панели до и после содержимого; атрибут `surface-padding` окна важнее. | `var(--sf-space-3)` | +| `--sf-modal-padding-block` | Отступ внутри панели сверху и снизу от содержимого; атрибут `surface-padding` окна важнее. | `var(--sf-space-3)` | | `--sf-modal-gap` | Промежуток между шапкой, телом и подвалом. | `var(--sf-space-1)` | | `--sf-modal-footer-gap` | Расстояние между действиями подвала, которые стоят в конце. | `var(--sf-space-1/2)` | @@ -205,6 +206,10 @@ document.addEventListener('modal:before-close', (event) => { | Переменная | По умолчанию | Задаёт | |:---|:---|:---| +| `--sf-modal--body-outset` | не задана; задают модификаторы, например `[data-sf-modal-surface]`: `0` | `margin-left`, `margin-right`, `margin-inline` | +| `--sf-modal--padding-end` | не задана; задают модификаторы, например `.sf-modal--size-question [data-sf-modal-surface]`: `calc(var(--sf-modal--question-block) - var(--sf-space-1/4))` | `padding-bottom`, `padding-block-end`, `--sf-modal-surface-padding` | +| `--sf-modal--question-block` | не задана; задают модификаторы, например `.sf-modal--size-question`: `var(--sf-modal-padding-block, var(--sf-space-3))` | `--sf-modal--padding-end`, `--sf-modal-surface-padding` | +| `--sf-modal--question-inline` | не задана; задают модификаторы, например `.sf-modal--size-question`: `var(--sf-modal-padding-inline, var(--sf-space-3))` | `--sf-modal-surface-padding` | | `--sf-modal-close-right` | не задана; задают модификаторы, например `.sf-modal-close-button`: `var(--sf-space-1/3)` | `inset-inline-end` | | `--sf-modal-close-top` | не задана; задают модификаторы, например `.sf-modal-close-button`: `var(--sf-space-1/3)` | `top` | | `--sf-modal-header-gap` | не задана; задают модификаторы, например `.sf-modal-header`: `var(--sf-space-1)` | `gap` | @@ -213,12 +218,12 @@ document.addEventListener('modal:before-close', (event) => { | `--sf-modal-iframe-min-height` | `var(--sf-g2)` | — | | `--sf-modal-overlay-background` | `var(--sf-scrim-color)` | `background-color` | | `--sf-modal-overlay-opacity` | `var(--sf-scrim-opacity, 1)` | `opacity` | -| `--sf-modal-surface-bg` | не задана; задают модификаторы, например `.sf-modal-surface`: `var(--sf-modal-background-color, var(--sf-surface-area))` | `background-color`, `--sf-surface-place`, `--sf-surface-place-solid` | +| `--sf-modal-surface-bg` | не задана; задают модификаторы, например `.sf-modal-surface`: `var(--sf-modal-background-color, var(--sf-surface-area))` | `background-color`, `--sf-surface-place`, `--sf-surface-place-solid`, `--sf-surface-place-ground` | | `--sf-modal-surface-border-color` | не задана; задают модификаторы, например `.sf-modal-surface`: `var(--sf-modal-border-color, var(--sf-outline-variant, transparent))` | `border` | | `--sf-modal-surface-border-style` | не задана; задают модификаторы, например `.sf-modal-surface`: `solid` | `border` | | `--sf-modal-surface-border-width` | не задана; задают модификаторы, например `.sf-modal-surface`: `var(--sf-modal-border-width, var(--sf-border-width, var(--sf-px)))` | `border` | | `--sf-modal-surface-gap` | не задана; задают модификаторы, например `.sf-modal-surface`: `var(--sf-modal-gap, var(--sf-space-1))` | `gap` | -| `--sf-modal-surface-padding` | не задана; задают модификаторы, например `.sf-modal-surface`: `var(--sf-modal-padding-block, var(--sf-space-2)) var(--sf-modal-padding-inline, var(--sf-space-2))` | `padding` | +| `--sf-modal-surface-padding` | не задана; задают модификаторы, например `.sf-modal-surface`: `var(--sf-modal-padding-block, var(--sf-space-3)) var(--sf-modal-padding-inline, var(--sf-space-3))` | `padding` | | `--sf-modal-surface-radius` | не задана; задают модификаторы, например `.sf-modal-surface`: `var(--sf-modal-radius, var(--sf-radius--surface))` | `border-radius` | | `--sf-modal-surface-shadow` | не задана; задают модификаторы, например `.sf-modal-surface`: `var(--sf-shadow-flat)` | `box-shadow` | diff --git a/content/ru/components/overlays-media/slider.md b/content/ru/components/overlays-media/slider.md index e30c84751..6306610b2 100644 --- a/content/ru/components/overlays-media/slider.md +++ b/content/ru/components/overlays-media/slider.md @@ -6,7 +6,7 @@ profile: reference # Слайдер контента -:badge[sf-slider]{variant=tonal scheme=primary size=1/2} :badge[1.1.0]{variant=outline scheme=on-surface size=1/2} +:badge[sf-slider]{variant=tonal scheme=primary size=1/2} :badge[1.1.2]{variant=outline scheme=on-surface size=1/2} Слайдер контента показывает изображения, карточки или другие равноправные слайды по одному и листает их стрелками и точками. diff --git a/content/ru/components/overlays-media/tooltip.md b/content/ru/components/overlays-media/tooltip.md index a7feb38c7..9daa6f663 100644 --- a/content/ru/components/overlays-media/tooltip.md +++ b/content/ru/components/overlays-media/tooltip.md @@ -6,7 +6,7 @@ profile: reference # Подсказка -:badge[sf-tooltip]{variant=tonal scheme=primary size=1/2} :badge[1.2.3]{variant=outline scheme=on-surface size=1/2} +:badge[sf-tooltip]{variant=tonal scheme=primary size=1/2} :badge[1.2.4]{variant=outline scheme=on-surface size=1/2} Подсказка показывает короткое пояснение к элементу при наведении указателя или фокусе с клавиатуры. Не переносите в неё сведения, без которых нельзя diff --git a/content/ru/components/tools/outline.md b/content/ru/components/tools/outline.md index ae9887de5..1a7285380 100644 --- a/content/ru/components/tools/outline.md +++ b/content/ru/components/tools/outline.md @@ -6,7 +6,7 @@ profile: reference # Оглавление -:badge[sf-outline]{variant=tonal scheme=primary size=1/2} :badge[1.0.0]{variant=outline scheme=on-surface size=1/2} +:badge[sf-outline]{variant=tonal scheme=primary size=1/2} :badge[1.1.0]{variant=outline scheme=on-surface size=1/2} Оглавление показывает разделы длинной страницы списком якорных ссылок и отмечает текущий раздел. Для навигации между страницами берите меню или @@ -78,9 +78,9 @@ profile: reference | Переменная | По умолчанию | Задаёт | |:---|:---|:---| | `--sf-outline--color` | `var(--sf-on-surface-variant)` | `color` | -| `--sf-outline--current-background` | `var(--sf-surface-container-active)` | `background-color` | -| `--sf-outline--current-color` | `var(--sf-on-surface)` | `color` | -| `--sf-outline--current-indicator` | `var(--sf-primary)` | `border-inline-start-color` | +| `--sf-outline--current-background` | `var(--sf-primary-container-active)` | `background-color` | +| `--sf-outline--current-color` | `var(--sf-on-primary-container)` | `color` | +| `--sf-outline--current-indicator` | `var(--sf-transparent)` | `border-inline-start-color` | | `--sf-outline--gap` | `var(--sf-space-1/3)` | `gap` | | `--sf-outline--hover-background` | `var(--sf-surface-container-hover)` | `background-color` | | `--sf-outline--hover-color` | `var(--sf-on-surface)` | `color` | diff --git a/content/ru/components/tools/scrollbar.md b/content/ru/components/tools/scrollbar.md index d31e3575b..e2ea0ae62 100644 --- a/content/ru/components/tools/scrollbar.md +++ b/content/ru/components/tools/scrollbar.md @@ -6,7 +6,7 @@ profile: reference # Полоса прокрутки -:badge[sf-scrollbar]{variant=tonal scheme=primary size=1/2} :badge[1.1.0]{variant=outline scheme=on-surface size=1/2} +:badge[sf-scrollbar]{variant=tonal scheme=primary size=1/2} :badge[1.1.1]{variant=outline scheme=on-surface size=1/2} Компонент оформляет прокрутку области ограниченной высоты или ширины: прячет системную полосу и рисует поверх содержимого тонкую полосу, которую можно diff --git a/content/ru/guide/colour/all-tokens.md b/content/ru/guide/colour/all-tokens.md index 133e51a8e..6f991325d 100644 --- a/content/ru/guide/colour/all-tokens.md +++ b/content/ru/guide/colour/all-tokens.md @@ -64,12 +64,12 @@ description: "Полный список переменных, которые о | `--sf-on-success-container` | `light-dark(var(--sf-success-10), var(--sf-success-90))` | | `--sf-on-success-container-graphic` | `light-dark(var(--sf-success-50), var(--sf-success-60))` | | `--sf-on-surface` | `light-dark(var(--sf-neutral-10), var(--sf-neutral-90))` · `var(--sf-on-surface-media)` | -| `--sf-on-surface-active` | `light-dark(var(--sf-neutral-20), var(--sf-neutral-80))` | +| `--sf-on-surface-active` | `light-dark(var(--sf-neutral-20), var(--sf-neutral-80))` · `var(--sf-on-surface-media)` | | `--sf-on-surface-card-variant` | `light-dark(var(--sf-neutral-40), var(--sf-neutral-70))` | | `--sf-on-surface-container-variant` | `light-dark(var(--sf-neutral-35), var(--sf-neutral-85))` · `var(--sf-white--alfa-80)` | | `--sf-on-surface-disabled` | `light-dark(var(--sf-neutral-50--alfa-80), var(--sf-neutral-90--alfa-48))` · `var(--sf-white--alfa-64)` | | `--sf-on-surface-fixed` | `var(--sf-neutral-10)` | -| `--sf-on-surface-hover` | `light-dark(var(--sf-neutral-15), var(--sf-neutral-85))` | +| `--sf-on-surface-hover` | `light-dark(var(--sf-neutral-15), var(--sf-neutral-85))` · `var(--sf-on-surface-media)` | | `--sf-on-surface-inverse` | `light-dark(var(--sf-neutral-90), var(--sf-neutral-10))` | | `--sf-on-surface-inverse-fixed` | `var(--sf-neutral-90)` | | `--sf-on-surface-media` | `var(--sf-white)` | @@ -87,10 +87,10 @@ description: "Полный список переменных, которые о | `--sf-surface-5` | `light-dark(var(--sf-neutral-80), var(--sf-neutral-30))` | | `--sf-surface-area` | `light-dark(var(--sf-neutral-98), var(--sf-neutral-10))` | | `--sf-surface-card` | `light-dark(var(--sf-surface-page), var(--sf-surface-2))` | -| `--sf-surface-container` | `light-dark(var(--sf-neutral-50--alfa-16), var(--sf-neutral-90--alfa-16))` · `var(--sf-white--alfa-16)` | -| `--sf-surface-container-active` | `light-dark(var(--sf-neutral-50--alfa-24), var(--sf-neutral-90--alfa-24))` · `var(--sf-white--alfa-24)` | -| `--sf-surface-container-hover` | `light-dark(var(--sf-neutral-50--alfa-20), var(--sf-neutral-90--alfa-20))` · `var(--sf-white--alfa-20)` | -| `--sf-surface-container-strong` | `light-dark(var(--sf-neutral-50--alfa-32), var(--sf-neutral-90--alfa-32))` | +| `--sf-surface-container` | `light-dark(var(--sf-neutral-50--alfa-8), var(--sf-neutral-90--alfa-8))` · `var(--sf-white--alfa-8)` | +| `--sf-surface-container-active` | `light-dark(var(--sf-neutral-50--alfa-16), var(--sf-neutral-90--alfa-16))` · `var(--sf-white--alfa-16)` | +| `--sf-surface-container-hover` | `light-dark(var(--sf-neutral-50--alfa-12), var(--sf-neutral-90--alfa-12))` · `var(--sf-white--alfa-12)` | +| `--sf-surface-container-strong` | `light-dark(var(--sf-neutral-50--alfa-24), var(--sf-neutral-90--alfa-24))` | | `--sf-surface-disabled` | `light-dark(var(--sf-neutral-50--alfa-12), var(--sf-neutral-90--alfa-12))` · `var(--sf-white--alfa-12)` | | `--sf-surface-inverse` | `light-dark(var(--sf-neutral-20), var(--sf-neutral-90))` | | `--sf-surface-inverse-fixed` | `var(--sf-neutral-20)` | @@ -101,6 +101,8 @@ description: "Полный список переменных, которые о | `--sf-surface-overlay--blur` | `var(--sf-d6)` | | `--sf-surface-page` | `light-dark(var(--sf-white), var(--sf-neutral-5))` | | `--sf-surface-place` | `var(--sf-surface-page)` · `var(--sf-surface-media)` | +| `--sf-surface-place-fill` | `initial` | +| `--sf-surface-place-ground` | `var(--sf-surface-page)` · `var(--sf-black)` | | `--sf-surface-place-solid` | `var(--sf-surface-page)` · `initial` | | `--sf-surface-popup` | `light-dark(var(--sf-surface-page), var(--sf-surface-4))` | | `--sf-surface-popup-nested` | `light-dark(var(--sf-surface-page), var(--sf-surface-5))` | @@ -116,7 +118,7 @@ description: "Полный список переменных, которые о | Переменная | Значение по умолчанию | | :--- | :--- | -| `--sf-code` | `light-dark(var(--sf-tertiary-50--alfa-24), var(--sf-tertiary-90--alfa-24))` | +| `--sf-code` | `var(--sf-surface-container)` | | `--sf-code--background` | `var(--sf-surface-container)` | | `--sf-code--color` | `var(--sf-on-surface)` | | `--sf-code--font-family` | `var(--sf-mono)` | @@ -331,17 +333,17 @@ description: "Полный список переменных, которые о | `--sf-heading--space-top` | `var(--sf-content--space-section)` | | `--sf-heading--weight` | `var(--sf-weight--bold)` · `700` | | `--sf-heading-1--height` | `var(--sf-title--height-6)` | -| `--sf-heading-1--size` | `var(--sf-text--size-6)` | +| `--sf-heading-1--size` | `var(--sf-text--size-6)` · `var(--sf-c8)` | | `--sf-heading-2--height` | `var(--sf-title--height-5)` | -| `--sf-heading-2--size` | `var(--sf-text--size-5)` | +| `--sf-heading-2--size` | `var(--sf-text--size-5)` · `var(--sf-c6)` | | `--sf-heading-3--height` | `var(--sf-title--height-3)` | -| `--sf-heading-3--size` | `var(--sf-text--size-3)` | +| `--sf-heading-3--size` | `var(--sf-text--size-3)` · `var(--sf-c2)` | | `--sf-heading-4--height` | `var(--sf-title--height-2)` | -| `--sf-heading-4--size` | `var(--sf-text--size-2)` | +| `--sf-heading-4--size` | `var(--sf-text--size-2)` · `var(--sf-c0)` | | `--sf-heading-5--height` | `var(--sf-title--height-1)` | -| `--sf-heading-5--size` | `var(--sf-text--size-1)` | +| `--sf-heading-5--size` | `var(--sf-text--size-1)` · `var(--sf-b6)` | | `--sf-heading-6--height` | `var(--sf-title--height-1)` | -| `--sf-heading-6--size` | `var(--sf-text--size-1)` | +| `--sf-heading-6--size` | `var(--sf-text--size-1)` · `var(--sf-b6)` | | `--sf-label-large--height` | `var(--sf-c0)` | | `--sf-label-large--size` | `var(--sf-b4)` | | `--sf-label-medium--height` | `var(--sf-text--height-1\/3)` | @@ -708,16 +710,12 @@ description: "Полный список переменных, которые о | Переменная | Значение по умолчанию | | :--- | :--- | | `--sf-0` | `0` | -| `--sf-button--background-color` | `var(--sf-button-background-color, var(--sf-on-primary))` · `var(--sf-primary-container)` | -| `--sf-button--border-color` | `var(--sf-button-border-color, var(--sf-on-primary))` | -| `--sf-button-text-container--color` | `var(--sf-button-color, var(--sf-primary))` · `var(--sf-button-color, var(--sf-on-primary))` | | `--sf-color--alfa` | `1` | | `--sf-current` | `currentColor` | | `--sf-decoration--alfa` | `1` | | `--sf-drop-shadow--alfa` | `1` | | `--sf-empty` | `` | | `--sf-gradient--angle` | `90deg` | -| `--sf-icon--color` | `var(--sf-primary)` · `var(--sf-on-primary)` | | `--sf-inherit` | `inherit` | | `--sf-language--box` | `var(--sf-ui-1--control-height)` · `var(--sf-ui-1\/3--control-height)` · `var(--sf-ui-1\/2--control-height)` · `var(--sf-ui-2--control-height)` · `var(--sf-ui-3--control-height)` | | `--sf-layout-floating-panel-height` | `calc(var(--sf-h0) + var(--sf-d0))` | @@ -729,12 +727,14 @@ description: "Полный список переменных, которые о | `--sf-paper-outline` | `var(--sf-neutral-50)` | | `--sf-paper-primary` | `var(--sf-primary-40)` | | `--sf-paper-select` | `var(--sf-primary-50--alfa-8)` | +| `--sf-place--container-outline` | `var(--sf-outline)` | | `--sf-popup-form-wide-width` | `var(--sf-g2)` · `var(--sf-g1)` | | `--sf-popup-form-width` | `var(--sf-g0)` · `var(--sf-f8)` | | `--sf-popup-list-max-width` | `var(--sf-g0)` · `var(--sf-f8)` | | `--sf-popup-menu-max-width` | `var(--sf-f8)` · `var(--sf-f6)` | | `--sf-popup-menu-min-width` | `var(--sf-f0)` · `var(--sf-e8)` | | `--sf-popup-panel-width` | `var(--sf-g0)` · `var(--sf-f8)` | +| `--sf-popup-question-width` | `var(--sf-g4)` · `var(--sf-g3)` | | `--sf-px` | `1px` | | `--sf-sans` | `ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"` | | `--sf-serif` | `ui-serif, Georgia, Cambria, "Times New Roman", Times, serif` | diff --git a/content/ru/guide/colour/colour-roles.md b/content/ru/guide/colour/colour-roles.md index a93c3b53f..270888029 100644 --- a/content/ru/guide/colour/colour-roles.md +++ b/content/ru/guide/colour/colour-roles.md @@ -264,8 +264,8 @@ on-primary: которые кладут плашку под содержимое (тег, аватар с инициалами, уведомление, аккордеон, поле ввода, клавиша, тост и другие), подставляют её сами: внутри них `var(--sf-on-surface-variant)` уже даёт нужное значение. Утилита -`bg-surface-container` подставляет роль так же, как класс высоты -`elevation-N`: вспомогательный текст внутри элемента с этим классом берёт её +`bg-surface-container` подставляет роль так же, как класс места +`bg-surface-card` / `bg-surface-popup`: вспомогательный текст внутри элемента с этим классом берёт её сам. В своём CSS с плашкой переопределите роль так же, как для поднятой поверхности: diff --git a/content/ru/guide/colour/contrast.md b/content/ru/guide/colour/contrast.md index b356e0a0a..24d07de0c 100644 --- a/content/ru/guide/colour/contrast.md +++ b/content/ru/guide/colour/contrast.md @@ -42,7 +42,7 @@ Framework подбирается не на глаз, а по измеряемы перестаёт проходить 4,5 : 1. Поэтому у каждого места выше страницы есть своя роль: `--sf-on-surface-card-variant`, `--sf-on-surface-raised-variant`, `--sf-on-surface-popup-variant`, `--sf-on-surface-popup-nested-variant`, — и -класс высоты подставляет её сам ([Высота: поверхность и тень](/ru/guide/colour/elevation/)). +класс фона места (`bg-surface-popup` и другие) подставляет её сам ([Высота: поверхность и тень](/ru/guide/colour/elevation/)). **Приглушённый текст на плашке тоже берёт свою роль.** Плашка `--sf-surface-container` полупрозрачна: в светлой теме она темнее фона, в diff --git a/content/ru/guide/colour/elevation.md b/content/ru/guide/colour/elevation.md index 88eac8a27..905181d52 100644 --- a/content/ru/guide/colour/elevation.md +++ b/content/ru/guide/colour/elevation.md @@ -74,8 +74,10 @@ Framework таких мест четыре, и у каждого — своя т Утилиты ставят тень места одним классом: [`shadow-flat`, `shadow-raised`, `shadow-overlay`, `shadow-modal`](/ru/utilities/shadows/element-shadow/) и те же имена у [падающей тени](/ru/utilities/shadows/drop-shadow/). -[`elevation-N`](/ru/utilities/shadows/elevation/) ставит тень вместе с -поверхностью и приглушённым текстом на ней. +Фон места ставит класс [`bg-surface-card`, `bg-surface-popup`, `bg-surface-popup-nested`](/ru/utilities/background/background-color/) +— вместе с приглушённым текстом на нём; пишите его рядом с тенью: +`bg-surface-popup shadow-overlay`. Прежние классы +[`elevation-N`](/ru/utilities/shadows/elevation/) работают до 2027-01-01. В своих стилях берите тень и поверхность одного места вместе: @@ -133,5 +135,5 @@ Framework таких мест четыре, и у каждого — своя т - [Поверхности и содержимое на них](/ru/guide/colour/colour-roles/#поверхности-и-содержимое-на-них) — роли поверхности; - [Контраст нейтральных ролей](/ru/guide/colour/contrast/#контраст-нейтральных-ролей) — контраст приглушённого текста на поднятых поверхностях; - [Высота над страницей](/ru/guide/size-and-type/borders-and-radii/#высота-над-страницей) — какая ступень для какого элемента; -- [Тень элемента](/ru/utilities/shadows/element-shadow/) и [Высота](/ru/utilities/shadows/elevation/) — утилиты в каталоге; +- [Тень элемента](/ru/utilities/shadows/element-shadow/) и [Цвет фона](/ru/utilities/background/background-color/) — утилиты в каталоге; прежние классы — [Высота](/ru/utilities/shadows/elevation/); - [Своя тема проекта](/ru/guide/colour/themes/#своя-тема-проекта) — перенастройка теней в теме проекта. diff --git a/content/ru/guide/colour/palettes.md b/content/ru/guide/colour/palettes.md index e1738c20f..fabadd67e 100644 --- a/content/ru/guide/colour/palettes.md +++ b/content/ru/guide/colour/palettes.md @@ -198,7 +198,7 @@ Framework не использует, не проходит контракт `alp Успех info - blue
sky — в следующем выпуске
+ blue Информация ``` @@ -244,7 +244,7 @@ Framework не использует, не проходит контракт `alp Первый образец в строке — сама роль, второй и третий — тона 40 и 80 оттенка: в светлой теме роль совпадает со вторым, в тёмной — с третьим. Информация -сейчас берёт `blue`; в следующем выпуске Framework она переходит на `sky`. +берёт `blue`. Примитивы в стилях интерфейса не пишут. Компоненту, которому нужен свой цвет, дают имя оттенка: класс `sf-hue-{имя}` (любой статический оттенок, а также diff --git a/content/ru/guide/colour/surfaces.md b/content/ru/guide/colour/surfaces.md index f0d67130e..d1977afc9 100644 --- a/content/ru/guide/colour/surfaces.md +++ b/content/ru/guide/colour/surfaces.md @@ -259,7 +259,9 @@ description: "Какой фон брать для страницы, област Прежние имена — номера ступеней и уровней (`surface-0`, классы высоты), окончания `-transparent-*`, `outline-{роль}`, `disable` — работают как -синонимы новых до выпуска, который их удалит. Полная таблица соответствия +синонимы новых до 2027-01-01; `elevation-N` заменяется парой классов места, +см. [Как обновить проект](/ru/guide/connection/updating/#новые-имена-теней). +Полная таблица соответствия собрана из журнала изменений: [Прежние имена переменных](/ru/guide/connection/updating/#прежние-имена-переменных). ## Смотрите также diff --git a/content/ru/guide/connection/delivery.md b/content/ru/guide/connection/delivery.md index a138907af..abb4e0513 100644 --- a/content/ru/guide/connection/delivery.md +++ b/content/ru/guide/connection/delivery.md @@ -41,18 +41,18 @@ Loader загружает по умолчанию, и читаемая для о Выпуск — один коммит сборки в `ui`. Его идентификатор составлен из первых 12 знаков этого коммита: -| Что | Значение для выпуска `ui-2bd5a3ab478a` | +| Что | Значение для выпуска `ui-7fb26d395af2` | |:---|:---| -| Идентификатор выпуска | `ui-2bd5a3ab478a` | -| Полный коммит `ui` (своя копия поставки, закрепление проекта) | `2bd5a3ab478a46fcee24d2460e7792135b0bb864` | -| Версия пакета npm `@simai-studio/ui` (адрес CDN) | `5.20261110.1541` | -| Коммит исходников `ui-source` (`framework.lock.json` пакета) | `d25a01f9989df2ec920364a23ed76d494d91844c` | +| Идентификатор выпуска | `ui-7fb26d395af2` | +| Полный коммит `ui` (своя копия поставки, закрепление проекта) | `7fb26d395af28dfcaac2a5df9de254b3067dc4ae` | +| Версия пакета npm `@simai-studio/ui` (адрес CDN) | `5.20261112.1807` | +| Коммит исходников `ui-source` (`framework.lock.json` пакета) | `8c13bf45aecaae2c31188b729ef4765fc91bffae` | | Коммит сборщика `ui-builder` | `16e9a81c1f2838f7cfeebbbd19654016743c9672` | -| Запись о выпуске | `contracts/releases/ui-2bd5a3ab478a.lock.json` в репозитории `ui`, добавлена коммитом `c4d7d46f481d15af1601ba1c937863d933ebde83` | -| Пакет продукта `pro`, собранный для этого выпуска | Исходник — `simai/ui-pro`, коммит `dc13c0f724009847add06c25bf98a6c033c037db` (см. [Пакеты компонентов продуктов](/ru/guide/introduction/structure/#пакеты-компонентов-продуктов)) | +| Запись о выпуске | `contracts/releases/ui-7fb26d395af2.lock.json` в репозитории `ui`, добавлена коммитом `4c012852f8d85530442ec813e4319905c3af1afe` | +| Пакет продукта `pro`, собранный для этого выпуска | Исходник — `simai/ui-pro`, коммит `db490626ba74caeed832352c7bc005410ca825e2` (см. [Пакеты компонентов продуктов](/ru/guide/introduction/structure/#пакеты-компонентов-продуктов)) | **Идентификатор выпуска — не тег git.** Тегов у выпусков нет (в записи о -выпуске поле `tag` равно `null`), поэтому адрес вида `simai/ui@ui-2bd5a3ab478a` +выпуске поле `tag` равно `null`), поэтому адрес вида `simai/ui@ui-7fb26d395af2` не существует. Своя копия поставки берётся по полному коммиту, адрес CDN — по версии пакета npm этого выпуска (см. [Пакет npm](#пакет-npm)). @@ -95,9 +95,9 @@ git log --diff-filter=A --format='%cs %s' -- 'contracts/releases/ui-*.lock.json' `simai/ui` по полному коммиту выпуска и сверяют с записью о выпуске: ```bash -git archive --format=tar 2bd5a3ab478a46fcee24d2460e7792135b0bb864 distr | shasum -a 256 +git archive --format=tar 7fb26d395af28dfcaac2a5df9de254b3067dc4ae distr | shasum -a 256 # равно runtime_sources.core.archive_sha256 -git rev-parse 2bd5a3ab478a46fcee24d2460e7792135b0bb864:distr +git rev-parse 7fb26d395af28dfcaac2a5df9de254b3067dc4ae:distr # равно runtime_sources.core.runtime_tree ``` @@ -117,10 +117,10 @@ git rev-parse 2bd5a3ab478a46fcee24d2460e7792135b0bb864:distr Framework подключают из этого пакета: jsDelivr и unpkg отдают любой файл пакета по адресу с его версией. -| CDN | Адрес папки `distr/` выпуска `ui-2bd5a3ab478a` | +| CDN | Адрес папки `distr/` выпуска `ui-7fb26d395af2` | |:---|:---| -| jsDelivr | `https://cdn.jsdelivr.net/npm/@simai-studio/ui@5.20261110.1541/distr/` | -| unpkg | `https://unpkg.com/@simai-studio/ui@5.20261110.1541/distr/` | +| jsDelivr | `https://cdn.jsdelivr.net/npm/@simai-studio/ui@5.20261112.1807/distr/` | +| unpkg | `https://unpkg.com/@simai-studio/ui@5.20261112.1807/distr/` | Адрес папки становится значением `window.sfPath`, а стиль и скрипт ядра лежат внутри неё: `core/css/core.css` и `core/js/core.js` (см. [Порядок подключения](/ru/guide/connection/project-setup/#порядок-подключения)). @@ -133,8 +133,8 @@ Framework подключают из этого пакета: jsDelivr и unpkg файла `package.json` пакета: ```bash -npm view @simai-studio/ui@5.20261110.1541 simai -# { release: 'ui-2bd5a3ab478a', commit: '2bd5a3ab478a46fcee24d2460e7792135b0bb864' } +npm view @simai-studio/ui@5.20261112.1807 simai +# { release: 'ui-7fb26d395af2', commit: '7fb26d395af28dfcaac2a5df9de254b3067dc4ae' } ``` **Что в пакете.** Каталог `distr/` выпуска с двумя отличиями от репозитория diff --git a/content/ru/guide/connection/js-api.md b/content/ru/guide/connection/js-api.md index d42008573..b75ae057f 100644 --- a/content/ru/guide/connection/js-api.md +++ b/content/ru/guide/connection/js-api.md @@ -26,7 +26,7 @@ API компонента (`SF.Input`, `SF.Tabs` и другие) описан н ## Имена по уровням -Раздел собран из контракта выпуска `ui-2bd5a3ab478a` (`core/contracts/public-js-api.json`) и обновляется вместе с выпуском. +Раздел собран из контракта выпуска `ui-7fb26d395af2` (`core/contracts/public-js-api.json`) и обновляется вместе с выпуском. ### Ядро @@ -39,6 +39,7 @@ API компонента (`SF.Input`, `SF.Tabs` и другие) описан н | `SF.breakpoints` | Контрольные точки ширины для скрипта. | [Контрольные точки](/ru/guide/functions/screen/breakpoints/) | | `SF.codeCopy` | Код в тексте копируется по нажатию. | [Копирование кода в тексте](/ru/guide/functions/actions/code-copy/) | | `SF.Composition` | Помощники композиции и редактора блоков. | [API композиции](/ru/guide/layouts/reference/api/) | +| `SF.copyFeedback` | Отклик копирования для своей кнопки: галочка, «Скопировано» для диктора, подсказка при отказе. | [Копирование текста](/ru/guide/functions/actions/copy-text/) | | `SF.copyText` | Кладёт текст в буфер обмена. | [Копирование текста](/ru/guide/functions/actions/copy-text/) | | `SF.deprecations` | Прежние имена, которые ещё принимаются, и чем их заменить. | [Жизненный цикл изменений](/ru/guide/connection/change-lifecycle/) | | `SF.EarlyPort` | Порты, объявленные в разметке: первый запрос до кода компонента. | [Данные с сервера](/ru/guide/smart-components/data/) | diff --git a/content/ru/guide/connection/loader.md b/content/ru/guide/connection/loader.md index 67e5216d9..eb9037daa 100644 --- a/content/ru/guide/connection/loader.md +++ b/content/ru/guide/connection/loader.md @@ -197,7 +197,7 @@ relation: [ **Какое значение дать меткам.** Метка — любая непустая строка; Loader сравнивает её с сохранённой как есть. Для своей копии поставки обе метки -задают равными идентификатору выпуска, например `ui-2bd5a3ab478a`: метка +задают равными идентификатору выпуска, например `ui-7fb26d395af2`: метка меняется ровно тогда, когда меняется выпуск (см. [Глобальные настройки](/ru/guide/connection/project-setup/#глобальные-настройки)). **Список отсутствующих файлов.** Если JavaScript модуля не нашёлся, Loader diff --git a/content/ru/guide/connection/project-setup.md b/content/ru/guide/connection/project-setup.md index f85f48668..1a1018205 100644 --- a/content/ru/guide/connection/project-setup.md +++ b/content/ru/guide/connection/project-setup.md @@ -101,7 +101,7 @@ Loader. `pluginListVersion` — любые непустые строки: Loader сравнивает их с сохранёнными в `localStorage` как есть (см. [Кеш и версии адресов](/ru/guide/connection/loader/#кеш-и-версии-адресов)). Для своей копии поставки обеим меткам дают идентификатор выпуска, например -`ui-2bd5a3ab478a`. При переходе на другой выпуск метки меняются вместе с ним: +`ui-7fb26d395af2`. При переходе на другой выпуск метки меняются вместе с ним: Loader очищает сохранённые списки модулей, а адреса модулей получают новый параметр `sf_v`. @@ -109,8 +109,8 @@ Loader очищает сохранённые списки модулей, а а ``` @@ -163,11 +163,11 @@ npm с версией выпуска (см. [CDN или своя копия](#cd ```bash git clone https://github.com/simai/ui.git simai-ui -git -C simai-ui archive --format=tar 2bd5a3ab478a46fcee24d2460e7792135b0bb864 distr | shasum -a 256 -# равно runtime_sources.core.archive_sha256 в записи simai-ui/contracts/releases/ui-2bd5a3ab478a.lock.json +git -C simai-ui archive --format=tar 7fb26d395af28dfcaac2a5df9de254b3067dc4ae distr | shasum -a 256 +# равно runtime_sources.core.archive_sha256 в записи simai-ui/contracts/releases/ui-7fb26d395af2.lock.json # и полю runtime.ui.sha256 в /ai/framework-lock.json этого сайта mkdir -p public/assets/simai-framework/ui -git -C simai-ui archive --format=tar 2bd5a3ab478a46fcee24d2460e7792135b0bb864 distr | tar -x -C public/assets/simai-framework/ui +git -C simai-ui archive --format=tar 7fb26d395af28dfcaac2a5df9de254b3067dc4ae distr | tar -x -C public/assets/simai-framework/ui ``` Каталог появляется как `public/assets/simai-framework/ui/distr/`. @@ -176,16 +176,16 @@ git -C simai-ui archive --format=tar 2bd5a3ab478a46fcee24d2460e7792135b0bb864 di и версия пакета стоит во всех трёх адресах сразу: ```html - - - + + + ``` -`5.20261110.1541` — версия пакета для выпуска `ui-2bd5a3ab478a`. Версию другого +`5.20261112.1807` — версия пакета для выпуска `ui-7fb26d395af2`. Версию другого выпуска и правило, по которому она получается из коммита выпуска, — см. [Пакет npm](/ru/guide/connection/delivery/#пакет-npm). Тот же пакет отдаёт unpkg: адреса вида -`https://unpkg.com/@simai-studio/ui@5.20261110.1541/distr/` работают так же. Готовая +`https://unpkg.com/@simai-studio/ui@5.20261112.1807/distr/` работают так же. Готовая страница — в быстром старте (см. [Страница на Core](/ru/guide/introduction/quick-start/#страница-на-core)). В пакете npm у модулей утилит, компонентов и смарт-компонентов есть только diff --git a/content/ru/guide/connection/updating.md b/content/ru/guide/connection/updating.md index e229da7bd..61263202d 100644 --- a/content/ru/guide/connection/updating.md +++ b/content/ru/guide/connection/updating.md @@ -70,8 +70,8 @@ JavaScript и TypeScript, CSS и SCSS, Markdown, JSON. Инструмент и на который проект переходит: `git checkout `. Более новый журнал может назвать каноническое имя, которого в целевом выпуске ещё нет, и `--apply` записал бы в проект имя, которое этот выпуск не знает. Для -выпуска `ui-2bd5a3ab478a` это ревизия -`d25a01f9989df2ec920364a23ed76d494d91844c`. +выпуска `ui-7fb26d395af2` это ревизия +`8c13bf45aecaae2c31188b729ef4765fc91bffae`. Инструменту нужен только Node.js: зависимостей у него нет, устанавливать ничего не нужно. @@ -169,7 +169,7 @@ node scripts/sf-upgrade.mjs ../my-product --journal ./journal.json # друг `sf-property-view` и `sf-admin-menu`; запись журнала — `component-larena-package-move`. В поставке `ui` их нет; на странице они работают, только если она объявила пакет `pro`, например - `SF_BOOT_CONFIG.packages.pro = {base: '/assets/pro/dc13c0f724009847add06c25bf98a6c033c037db/smart'}` + `SF_BOOT_CONFIG.packages.pro = {base: '/assets/pro/db490626ba74caeed832352c7bc005410ca825e2/smart'}` (путь — по правилу из [Пакеты компонентов](/ru/guide/connection/loader/#пакеты-компонентов)), и подключила его сборку, квитанция которой называет выпуск Framework на странице. Проект без Larena берёт сборку из выпуска `simai/ui-pro` (см. [Готовая сборка пакета `pro`](/ru/guide/introduction/structure/#готовая-сборка-пакета-pro)). @@ -281,7 +281,7 @@ node scripts/sf-upgrade.mjs ../my-product --journal ./journal.json # друг ## Новые имена тегов -С выпуска `ui-2bd5a3ab478a` (`@simai-studio/ui` 5.20261110.1541) часть +С выпуска `ui-7fb26d395af2` (`@simai-studio/ui` 5.20261112.1807) часть смарт-компонентов называется по-новому: сначала семейство, затем уточнение (`sf-input-date`, а не `sf-datepicker`). Прежний тег работает до 2027-01-01: Loader определяет его как псевдоним нового, поэтому страницы на прежних @@ -333,9 +333,10 @@ Framework (см. [Подтверждение изменения](/ru/pro/admin/c Прежнее имя работает до 2027-01-01 и показывает тень своего места, поэтому страницы на прежних именах не ломаются; там, где тень места отличается от прежнего уровня, она выглядит по-новому. Записи журнала — -`token-c20-shadow-places`, `utility-c20-shadow-places` и -`utility-c20-coloured-shadows`. Переименования — механическая замена, -`sf-upgrade` переписывает их сам; цветные тени — ручная работа (см. ниже). +`token-c20-shadow-places`, `utility-c20-shadow-places`, +`utility-c20-elevation-former` и `utility-c20-coloured-shadows`. +Переименования — механическая замена, `sf-upgrade` переписывает их сам; классы +высоты и цветные тени — ручная работа (см. ниже). Классы: @@ -351,9 +352,16 @@ Framework (см. [Подтверждение изменения](/ru/pro/admin/c | `drop-shadow-4`, `drop-shadow-5` | `drop-shadow-modal` | С префиксом `hover:` — так же (`hover:shadow-1` → `hover:shadow-raised`). -Классы `elevation-0` … `elevation-5` остаются: каждый берёт поверхность своей -ступени и тень своего места (1 — приподнятое, 2 и 3 — всплывающее, 4 и 5 — -окно). +Классы `elevation-0` … `elevation-5` тоже прежние имена (до 2027-01-01): каждый +становится парой — фоном своего места и его тенью. `sf-upgrade` их находит, но +не переписывает: вместо одного класса — два. + +| Прежний класс | Что писать | +|:---|:---| +| `elevation-0` | `bg-surface-page shadow-flat` | +| `elevation-1` | `bg-surface-card shadow-raised` | +| `elevation-2`, `elevation-3` | `bg-surface-popup shadow-overlay` | +| `elevation-4`, `elevation-5` | `bg-surface-popup-nested shadow-modal` | Переменные: @@ -579,6 +587,14 @@ Framework (см. [Подтверждение изменения](/ru/pro/admin/c | `--sf-tone-violet-container` | `--sf-hue-container` | 2027-01-01 | `token-c17-tone-roles-to-hue-roles` | | `--sf-on-tone-violet-container` | `--sf-on-hue-container` | 2027-01-01 | `token-c17-tone-roles-to-hue-roles` | | `--sf-on-surface-muted` | `--sf-on-surface-disabled` | 2027-01-01 | `token-c43-muted-is-disabled` | +| `--sf-download-file-background-color` | `--sf-file-download-background-color` | 2027-01-01 | `token-file-download-variable-names` | +| `--sf-download-file-border-color` | `--sf-file-download-border-color` | 2027-01-01 | `token-file-download-variable-names` | +| `--sf-download-file-radius` | `--sf-file-download-radius` | 2027-01-01 | `token-file-download-variable-names` | +| `--sf-download-file-padding` | `--sf-file-download-padding` | 2027-01-01 | `token-file-download-variable-names` | +| `--sf-download-file-gap` | `--sf-file-download-gap` | 2027-01-01 | `token-file-download-variable-names` | +| `--sf-download-file-icon-size` | `--sf-file-download-icon-size` | 2027-01-01 | `token-file-download-variable-names` | +| `--sf-download-file-icon-color` | `--sf-file-download-icon-color` | 2027-01-01 | `token-file-download-variable-names` | +| `--sf-spinner-track-color` | `--sf-spinner-track-color` | 2027-01-01 | `token-spinner-track-carries-alpha` | ## Связь с другими частями diff --git a/content/ru/guide/connection/versions.md b/content/ru/guide/connection/versions.md index 5283ca161..2ede4dcfa 100644 --- a/content/ru/guide/connection/versions.md +++ b/content/ru/guide/connection/versions.md @@ -15,23 +15,23 @@ Framework, а для каждого подключённого пакета пр выпуск и коммит, см. [Пакет npm](/ru/guide/connection/delivery/#пакет-npm)) или по полному коммиту, из которого взята своя копия, — и сразу записывают его в файл блокировки; номер из `VERSION` выпуск не определяет. Пример показывает -минимальное содержание для выпуска `ui-2bd5a3ab478a` с пакетом продукта +минимальное содержание для выпуска `ui-7fb26d395af2` с пакетом продукта `pro`, собранным для этого выпуска: ```json { "framework": { - "release": "ui-2bd5a3ab478a", - "commit": "2bd5a3ab478a46fcee24d2460e7792135b0bb864", - "npm": "@simai-studio/ui@5.20261110.1541", + "release": "ui-7fb26d395af2", + "commit": "7fb26d395af28dfcaac2a5df9de254b3067dc4ae", + "npm": "@simai-studio/ui@5.20261112.1807", "distr_archive_sha256": "", "distr_tree": "" }, "packages": { "pro": { "receipt": "<путь к квитанции пакета>", - "source_revision": "dc13c0f724009847add06c25bf98a6c033c037db", - "framework": "ui-2bd5a3ab478a", + "source_revision": "db490626ba74caeed832352c7bc005410ca825e2", + "framework": "ui-7fb26d395af2", "manifest_sha256": "" } } diff --git a/content/ru/guide/functions/actions/copy-text.md b/content/ru/guide/functions/actions/copy-text.md index 6c1b9b786..9fd654b5b 100644 --- a/content/ru/guide/functions/actions/copy-text.md +++ b/content/ru/guide/functions/actions/copy-text.md @@ -54,6 +54,36 @@ try { - `SF.Clipboard` с заглавной буквы — скрипт компонента на классах, а не эта функция. +## Отклик для своей кнопки + +`SF.copyFeedback` — тот же отклик, что у кнопки копирования, для своего +элемента управления: он копирует, ведёт состояние и возвращает слова, а +рисует их ваш элемент. Обычной кнопке он не нужен — достаточно атрибута +`data-sf-copy` или `data-sf-copy-target` (см. [Кнопка +копирования](/ru/smart/actions/copy-button/#любая-кнопка-с-атрибутом)). + +```js +const feedback = SF.copyFeedback.create({ + onPhase: (phase, message) => { + // pending, success, error, затем снова idle через две секунды + button.dataset.phase = phase; + status.textContent = message; + }, +}); +button.addEventListener('click', async () => { + const result = await feedback.run({ + read: () => SF.copyFeedback.readText(document.querySelector('#key')), + element: () => document.querySelector('#key'), + node: button, + }); + // {outcome: 'applied', text, method} или {outcome: 'refused', reason} +}); +``` + +`run()` при отказе браузера сам выделяет источник, а слова «Выделено — +нажмите Ctrl+C» (⌘C на Mac) приходят в `onPhase`. Пока идёт копирование, +повторный `run()` отвечает `{outcome: 'refused', reason: 'busy'}`. + ## См. также - [Кнопка копирования](/ru/smart/actions/copy-button/) — готовая кнопка с отметкой «Скопировано». diff --git a/content/ru/guide/introduction/quick-start.md b/content/ru/guide/introduction/quick-start.md index cd84ad10f..d5773c6ff 100644 --- a/content/ru/guide/introduction/quick-start.md +++ b/content/ru/guide/introduction/quick-start.md @@ -15,7 +15,7 @@ description: "Первая страница не требует установк Создайте пустую папку и сохраните в ней `index.html`. Framework подключается с CDN из пакета npm `@simai-studio/ui`. Пример закреплён на выпуске -`ui-2bd5a3ab478a`: во всех трёх адресах стоит версия пакета `5.20261110.1541`, +`ui-7fb26d395af2`: во всех трёх адресах стоит версия пакета `5.20261112.1807`, которая соответствует этому выпуску. Чтобы взять другой выпуск, замените версию во всех трёх адресах (см. [Версии: как закрепить выпуск](/ru/guide/connection/versions/)): @@ -27,7 +27,7 @@ description: "Первая страница не требует установк Первая страница на SIMAI Framework - +
@@ -43,8 +43,8 @@ description: "Первая страница не требует установк
- - + + ``` diff --git a/content/ru/guide/introduction/structure.md b/content/ru/guide/introduction/structure.md index d02a01092..8eb59f3e0 100644 --- a/content/ru/guide/introduction/structure.md +++ b/content/ru/guide/introduction/structure.md @@ -62,7 +62,7 @@ git: в адресах и закреплении проекта использу `sf-thread-list`, `sf-message-log`, `sf-chat-message`, `sf-chat-composer`, `sf-chat-interlocutor`, части редактора писем `sf-mail-*` и `sf-content-editor` (описаны в справочнике -смарт-компонентов). `sf-change-confirm` с выпуска `ui-2bd5a3ab478a` входит в +смарт-компонентов). `sf-change-confirm` с выпуска `ui-7fb26d395af2` входит в сам Framework под именем `sf-confirm-change`. Его исходник — папка `components` открытого репозитория `simai/ui-pro`. Лицензия пакета — PolyForm Small Business 1.0.0 или PolyForm Noncommercial 1.0.0 на выбор, по @@ -141,7 +141,7 @@ PolyForm Small Business 1.0.0 или PolyForm Noncommercial 1.0.0 на выбо "package": "shop", "source": { "repository": "simai/ui-source", - "revision": "d25a01f9989df2ec920364a23ed76d494d91844c" + "revision": "8c13bf45aecaae2c31188b729ef4765fc91bffae" } } ``` @@ -149,7 +149,7 @@ PolyForm Small Business 1.0.0 или PolyForm Noncommercial 1.0.0 на выбо `schema` — точно эта строка; `source.repository` — всегда `simai/ui-source`; `source.revision` — полный коммит исходников, из которых собран выбранный выпуск Framework (поле `build_inputs.source.commit` записи о - выпуске, см. [Выпуск и запись о выпуске](/ru/guide/connection/delivery/#выпуск-и-запись-о-выпуске); в примере — ревизия выпуска `ui-2bd5a3ab478a`). `package` необязателен; если он есть, он совпадает с + выпуске, см. [Выпуск и запись о выпуске](/ru/guide/connection/delivery/#выпуск-и-запись-о-выпуске); в примере — ревизия выпуска `ui-7fb26d395af2`). `package` необязателен; если он есть, он совпадает с именем пакета в сборке. Других полей сборка не читает. - **Правило компонента.** Файл `src/smart/<папка>/rule.js` записывает ровно одно правило `cl-<папка>` простыми данными, без регулярных выражений, @@ -545,7 +545,7 @@ node /bin/sf-build.js package --kind theme \ пакет оттуда: ```bash -commit=dc13c0f724009847add06c25bf98a6c033c037db +commit=db490626ba74caeed832352c7bc005410ca825e2 tag="pro-${commit:0:12}" gh release download "$tag" --repo simai/ui-pro \ --pattern 'package-pro.tar*' --pattern package-receipt.json @@ -566,9 +566,9 @@ tar -xf package-pro.tar -C "public/assets/pro/$commit" ревизиях: `simai/ui-builder` (сборщик; установка зависимостей и команда — в его [README](https://github.com/simai/ui-builder#using-sf-build-in-a-product)), `simai/ui-source` (исходники Framework на ревизии, которую закрепляет `components/framework.lock.json` -пакета, для этого выпуска — `d25a01f9989df2ec920364a23ed76d494d91844c`) и `simai/ui-pro` +пакета, для этого выпуска — `8c13bf45aecaae2c31188b729ef4765fc91bffae`) и `simai/ui-pro` (исходник пакета). -Пример воспроизведения — для выпуска `ui-2bd5a3ab478a`; ``, `` и `` — +Пример воспроизведения — для выпуска `ui-7fb26d395af2`; ``, `` и `` — пути к рабочим копиям, `` стоит на текущей ветке `main`. 1. **Сборка.** Папка пакета — `components` репозитория `simai/ui-pro`, @@ -581,26 +581,26 @@ Framework на ревизии, которую закрепляет `components/f ```bash git clone https://github.com/simai/ui-pro.git - git -C ui-pro checkout dc13c0f724009847add06c25bf98a6c033c037db + git -C ui-pro checkout db490626ba74caeed832352c7bc005410ca825e2 node /bin/sf-build.js package --name pro \ --package-root ui-pro/components \ - --package-revision dc13c0f724009847add06c25bf98a6c033c037db \ + --package-revision db490626ba74caeed832352c7bc005410ca825e2 \ --package-repository simai/ui-pro \ --ui-source --ui --out build/pro --json ``` 2. **Проверка квитанции.** Команда завершается с кодом `0` и `status: "PASS"`. В `build/pro/package-receipt.json` поле `framework.release` равно - `ui-2bd5a3ab478a`, `package_source.revision` — коммиту из шага 1, а + `ui-7fb26d395af2`, `package_source.revision` — коммиту из шага 1, а `package_reference.status` — `agrees`. 3. **Подключение.** Каталог `build/pro/smart` кладут в публичную папку проекта под путём с коммитом пакета, например - `public/assets/pro/dc13c0f724009847add06c25bf98a6c033c037db/smart/`, и объявляют + `public/assets/pro/db490626ba74caeed832352c7bc005410ca825e2/smart/`, и объявляют до `core.js`: ```js window.SF_BOOT_CONFIG = { - packages: {pro: {base: '/assets/pro/dc13c0f724009847add06c25bf98a6c033c037db/smart'}}, + packages: {pro: {base: '/assets/pro/db490626ba74caeed832352c7bc005410ca825e2/smart'}}, }; ``` diff --git a/content/ru/guide/layouts/content-and-data/structured-text.md b/content/ru/guide/layouts/content-and-data/structured-text.md index 8fef7cfc2..cc422bea6 100644 --- a/content/ru/guide/layouts/content-and-data/structured-text.md +++ b/content/ru/guide/layouts/content-and-data/structured-text.md @@ -8,9 +8,11 @@ description: "Текст заголовков и абзацев хранится Текст заголовков и абзацев хранится не строкой HTML, а маленьким деревом: - отрезок текста `{"type": "text", "value": "…"}` с необязательными - отметками `marks`: `strong`, `em`, `code`; + отметками `marks`: `strong`, `em`, `code`, `strike`; +- перенос строки внутри абзаца `{"type": "break"}` — с теми же + необязательными `marks`; - ссылка `{"type": "link", "href": "…", "children": [...]}`, внутри которой — - только отрезки текста; + только отрезки текста и переносы строки; - встроенный компонент `{"type": "component", "name": "…", "props": {…}}` — см. ниже. @@ -30,7 +32,8 @@ description: "Текст заголовков и абзацев хранится

Откройте каталог

``` -- Отметки становятся тегами ``, `` и ``. Несколько отметок +- Отметки становятся тегами ``, ``, `` и ``, перенос + строки — тегом `
`. Несколько отметок вкладываются в порядке списка: первая — внутренняя, поэтому `"marks": ["strong", "code"]` даёт `…`. - Ссылка выводится как `` без классов и других атрибутов. diff --git a/content/ru/guide/sets/connect.md b/content/ru/guide/sets/connect.md index 1aa31ddc6..5cd8d6f7d 100644 --- a/content/ru/guide/sets/connect.md +++ b/content/ru/guide/sets/connect.md @@ -15,17 +15,17 @@ Loader сам найдёт подходящий выпуск набора и з ## Одна строка -Пример подключает набор эффектов к выпуску SIMAI Framework `5.20261110.1541` +Пример подключает набор эффектов к выпуску SIMAI Framework `5.20261112.1807` и ставит на страницу один эффект: ```html - - + + ``` -В своём проекте на месте `5.20261110.1541` стоит версия пакета +В своём проекте на месте `5.20261112.1807` стоит версия пакета `@simai-studio/ui`, которую закрепил проект (см. [Версии](/ru/guide/connection/versions/)): `5.20261103.2154` или новее. Набор берётся из общего каталога выпусков: Loader выбирает самый новый diff --git a/content/ru/guide/size-and-type/borders-and-radii.md b/content/ru/guide/size-and-type/borders-and-radii.md index 58f9d1066..1ee13c062 100644 --- a/content/ru/guide/size-and-type/borders-and-radii.md +++ b/content/ru/guide/size-and-type/borders-and-radii.md @@ -219,10 +219,10 @@ description: "Граница показывает, где находится э - Не поднимать элемент одной тенью и не писать тень руками: в тёмной теме такого подъёма не видно, а своя тень ничего не знает о теме. Берите одну из четырёх теней места вместе с его поверхностью. -- Не задавать приглушённый текст на поднятой панели вручную: класс высоты уже +- Не задавать приглушённый текст на поднятой панели вручную: класс фона места уже поставил значение под её поверхность. ### Смотрите также -- [Поверхность и тень](/ru/guide/colour/elevation/) — четыре места, их тени и поверхности, утилиты `shadow-*` и `elevation-N`. +- [Поверхность и тень](/ru/guide/colour/elevation/) — четыре места, их тени и поверхности, утилиты `shadow-*` и фоны мест `bg-surface-*`. - [Две работы границы](#две-работы-границы) — край области. diff --git a/content/ru/guide/size-and-type/horizontal-spacing.md b/content/ru/guide/size-and-type/horizontal-spacing.md new file mode 100644 index 000000000..33ff8aaee --- /dev/null +++ b/content/ru/guide/size-and-type/horizontal-spacing.md @@ -0,0 +1,195 @@ +--- +title: "Горизонтальные отступы" +description: "Шесть ролей горизонтального отступа: внутри элемента управления, в строке, в тексте, от края поля, между соседями и между группами. Каждая роль стоит на токене шкалы." +--- + +# Горизонтальные отступы + +Горизонтальный отступ отвечает на три вопроса: как далеко значок от своего +текста, как далеко содержимое от края контейнера и как далеко друг от друга +соседние элементы. На каждый вопрос есть одно правило. Значение каждой роли — +существующий токен: плотность и ширина телефона меняют число сами, правило +остаётся тем же. + +Вертикальные величины описаны в +[«Значениях вертикальных размеров»](/ru/guide/size-and-type/vertical-sizing/), +шкала `--sf-space-*` — в [«Пространстве»](/ru/guide/size-and-type/spacing/). + +## Шесть ролей + +Числа — в пикселях: обычная плотность на широком экране, плотность `compact`, +телефон. Примеры ниже показаны в обычной плотности; откройте пример в ширине +телефона, чтобы увидеть телефонные значения. + +| Роль | Где | Токен | Обычно | Плотно | Телефон | +|:---|:---|:---|---:|---:|---:| +| **H1** значок → подпись в элементе управления | кнопка, тег, вкладка, сегмент, кнопка-ссылка | `--sf-ui-S--text-space-x` | 7 · 8 · 10 | 6 · 7 · 8 | 6 · 6 · 8 | +| **H2** значок → текст в строке | список, меню-столбец, пункты выбора, поле со значком, уведомление, ячейка таблицы, дерево | `--sf-space-1/2` | 12 | 8 | 8 | +| **H3** значок → текст внутри текста | хлебные крошки, ссылка со значком, метка помощи | `--sf-space-1/4` | 4 | 4 | 4 | +| **H4** край → содержимое поля значения | поле, выпадающий список и его пункты, список, меню, оглавление | по размеру, см. [H4](#h4-от-края-поля-списка-и-меню) | 12 · 16 · 20 | 12 · 12 · 16 | 12 · 12 · 16 | +| **H5** между соседями | кнопки одной группы · теги и плашки · вкладки | `--sf-space-1/3` · `--sf-space-1/4` · 0 | 8 · 4 · 0 | 4 · 4 · 0 | 8 · 4 · 0 | +| **H6** между группами и поле поверхности | группы, поле ↔ кнопка, уведомление, ячейка · карточка, окно | `--sf-space-1` · `--sf-space-2` | 16 · 20 | 12 · 16 | 12 · 16 | + +Три числа через точку в H1 и H4 — размеры `1/2`, `1` и `2`; в H5 и H6 — значения для частей, перечисленных через точку. Сначала +определите, что перед вами: **элемент управления** (один компактный объект, +который нажимают целиком) или **строка** (полоса содержимого в контейнере). +Элемент управления плотнее строки: значок кнопки стоит к подписи ближе, чем +значок пункта списка к его тексту. + +Компонент не собирает свою геометрию из утилит раскладки (`gap-2`, `p-2`): +он читает токен роли через свою переменную. Утилиты — для страницы, которая +расставляет компоненты. + +## H1. Внутри элемента управления + +Значок и подпись кнопки разделяет поле подписи `--sf-ui-S--text-space-x` той +же ступени, что и кнопка. Так же устроены тег, вкладка, сегмент и +кнопка-ссылка. Элемент управления со значком начинается с +`--sf-ui-S--space-x`, без значка — с `--sf-ui-S--space-x` плюс поле подписи: +текст стоит там же, где стоял бы после значка. + +:::example {id="guide/horizontal-spacing/controls" label="Кнопка и тег трёх размеров"} +::: + +## H2 и H3. Значок и текст в строке и в тексте + +В строке значок отделён от текста `--sf-space-1/2`: 12 обычно, 8 в плотной +области и на телефоне. Это одно значение для списка, меню, пунктов выбора, +поля со значком, уведомления, ячейки таблицы и строки дерева. Когда строку +собирает страница, тот же промежуток даёт утилита `gap-1/2`. + +Внутри бегущего текста значок стоит вплотную к слову: `--sf-space-1/4` (4). +Так устроены хлебные крошки, ссылка со значком и метка помощи. + +:::example {id="guide/horizontal-spacing/rows" label="Строки, уведомление и крошки"} +::: + +Правила выравнивания строк: + +- **Поле и его список — на одной оси.** Значок пункта стоит под значком поля, + текст пункта — под значением поля. +- **Место значка держится.** Если хоть у одной строки списка есть значок, + строки без значка оставляют его место пустым, и весь текст стоит на одной + вертикали. +- **Заголовок группы — над значками строк**, а в списке без значков — над + текстом. + +:::example {id="guide/horizontal-spacing/row-gap" label="Как делать: промежутки"} +::: + +## H4. От края поля, списка и меню + +Отступ от края до первого значка или до текста зависит от размера и не +зависит от того, есть ли значок. Рамка входит в отступ. + +| Размер | Токен | Обычно | Плотно | Телефон | +|:---|:---|---:|---:|---:| +| `1/2` | `--sf-space-1/2`, в плотной области и на телефоне `--sf-space-1` | 12 | 12 | 12 | +| `1` | `--sf-space-1` | 16 | 12 | 12 | +| `2` | `--sf-space-2` | 20 | 16 | 16 | + +- **Скругление.** Скруглённому полю добавляется половина того, на сколько + угол больше 4: `отступ = правило + (угол − 4) / 2`. Угол не больше половины + высоты однострочного поля; многострочное поле берёт угол однострочного, + угол тега в поле на 4 меньше угла поля. Значки стоят на отступе правила. +- **Панель.** В выпадающей панели, контекстном меню и меню-столбце строка + лежит на плашке: плашка отстоит от края панели на `--sf-space-1/4` (4), а + содержимое строки — на остаток, так что от края панели получается тот же + отступ правила. +- **Вложенный список.** Список, меню и оглавление внутри рамки ведут себя как + панель: подложка 4 и строка по правилу. + +Готовые поля и списки Framework пока не держат это правило (см. +[Где Framework ещё не следует стандарту](#где-framework-ещё-не-следует-стандарту)), +поэтому живого примера здесь нет. + +## H5 и H6. Соседи и группы + +- Кнопки одной группы — `--sf-space-1/3`: 8, в плотной области 4. В разметке — + `gap-1/3`. +- Теги и плашки рядом — `--sf-space-1/4` (4), `gap-1/4`. +- Группа рядом с группой и поле рядом с кнопкой — `--sf-space-1`: 16, в + плотной области и на телефоне 12. В разметке — `gap-1`. +- Поле поверхности: уведомление и ячейка таблицы — `--sf-space-1`, карточка и + окно — `--sf-space-2` (20, в плотной области и на телефоне 16). + +:::example {id="guide/horizontal-spacing/neighbours" label="Группы кнопок и теги"} +::: + +**Вкладки** стоят встык, без промежутка: нажатие попадает во вкладку по всей +строке. Поле вкладки по бокам равно полю кнопки того же размера (14 · 16 · 20, +на телефоне 12 · 14 · 18), у подписи своего поля нет. Линия выбранной вкладки +толщиной 2 лежит ровно под буквами. У первой вкладки нет поля в начале, у +последней — в конце: первые буквы стоят на краю текста, как заголовок над +ними. В плотной области поля на ступень меньше, как у кнопок. + +## Одна строка — одна ступень + +Подпись, значение и кнопка рядом с ними (копирование, значок-действие, +ссылка-значок) в одной строке стоят на **одной ступени** лестницы размеров: + +- текст `1/2` — кнопка `size="1/2"` (высота 32, значок 20); +- текст `1` — кнопка `size="1"` (высота 40, значок 24). + +Подпись в такой строке не делают мельче значения: более мелкая подпись +бывает только над значением, как подпись поля. Кнопка в ряду кнопок или в +поле берёт размер ряда или поля. Плотность сдвигает всю строку вместе: в +области `compact` и текст, и кнопка опускаются на ступень. + +:::example {id="guide/horizontal-spacing/one-row" label="Как делать: одна строка"} +::: + +## Область прокрутки в панели + +У области прокрутки внутри панели один отступ `I = --sf-space-1/4` (4) со +всех сторон плашек строк. Полоса прокрутки, которая занимает место, состоит +из отступа, бегунка и отступа: `I + --sf-scroll-thumb-width + I` (14, это +`--sf-scroll-bg-width`). Когда прокручивать нечего, справа остаётся тот же +`I`, пустой полосы нет. + +```text +без полосы: край | 4 | плашка строки | 4 | край +с полосой: край | 4 | плашка строки | 4 | бегунок 6 | 4 | край +``` + +Отступ до полосы прокрутки равен отступу от левого края. + +## Вложенные уровни + +Вложенный уровень сдвигается на одну колонку строки: первая колонка ребёнка +(стрелка, флажок или значок) стоит под второй колонкой родителя. Шаг не +выбирают отдельно, он складывается из ширины колонки и промежутка строки H2. +Листья держат место стрелки. Список из одного текста сдвигается на свой +отступ H4: меню — 16 · 12 · 12, оглавление — 12. На телефоне правило то же; +глубже четырёх уровней на телефоне лучше открывать панель. Компоненты: +[Дерево](/ru/smart/navigation/tree/), [Меню](/ru/smart/navigation/menu/), +[Оглавление](/ru/smart/navigation/contents/). + +## Где Framework ещё не следует стандарту + +Правило принято раньше, чем исправлены компоненты. Пока в таблице есть +строка, не берите этот компонент образцом отступа. + +| Компонент | Сейчас | По стандарту | +|:---|:---|:---| +| [Список](/ru/smart/content/list/) `sf-list` | значок → текст 28 (обычно), 23 (плотно), 22 (телефон), не зависит от размера; в рамке значок в 25 от края; заголовок группы ни над значками, ни над текстом | H2: 12 · 8 · 8; H4 с подложкой 4; заголовок над значками | +| [Меню](/ru/smart/navigation/menu/) `sf-menu`, столбец | значок → текст 8, в плотной области 4 | H2: 12 · 8 · 8 | +| [Выпадающий список](/ru/smart/navigation/dropdown/) `sf-dropdown` | значение в поле в 25 от края, пункты в 16 — не на одной оси; пункты 16 на всех размерах | H4: 12 · 16 · 20 и для поля, и для пунктов | +| [Поля ввода](/ru/smart/forms/inputs/) `sf-input` | значение в 22 · 25 · 31 от края, рамка вне отступа; значок → значение 8 | H4: 12 · 16 · 20; H2: 12 | +| [Вкладки](/ru/smart/navigation/tabs/) `sf-tabs`, линия | между вкладками 20 · 24 · 32, поле вкладки 0, подпись со своим полем | встык, поле как у кнопки, линия под буквами | +| [Сегментный переключатель](/ru/smart/actions/segmented/), дорожка | сегмент высотой 32 с полем ступени 1: буквы в 28 от края дорожки | сегмент в дорожке — на ступень плотнее | +| [Оглавление](/ru/smart/navigation/contents/) `sf-contents`, размер `1/2` | текст в 8 от края на телефоне; шаг вложенности 8 на телефоне и в плотной области | H4: 12 везде | +| [Дерево](/ru/smart/navigation/tree/) `sf-tree` | шаг уровня `--sf-space-3`, не из колонки строки; на телефоне стрелка ребёнка наезжает на стрелку родителя; нет размеров `1/2` и `2` | шаг = колонка + H2; размеры по лестнице | +| Меню с уровнями | правило «текст под текстом» действует только для второго уровня | на всех уровнях | +| Контекстное меню и выпадающая панель, прокрутка | бегунок 4, полоса 12 | бегунок `--sf-scroll-thumb-width` (6), полоса 14 | + +Примеры документации тоже переводятся на эти роли: в части примеров кнопки и +теги ещё стоят через `gap-2` (20). + +## Смотрите также + +- [Пространство](/ru/guide/size-and-type/spacing/) — шкала `--sf-space-*` и интервалы между блоками. +- [Значения интервалов](/ru/guide/size-and-type/spacing-scale/) — все ступени на узком и широком экране. +- [Одна лестница размеров](/ru/guide/size-and-type/size-ladder/) — `--sf-ui-S--space-x` и `--sf-ui-S--text-space-x` каждой ступени. +- [Плотность](/ru/guide/size-and-type/density/) — как область `compact` опускает компоненты на ступень. +- [Геометрия: стандарт и проверка](/ru/guide/size-and-type/geometry/) — как отступы проверяют замером. diff --git a/content/ru/guide/size-and-type/horizontal-spacing.page.json b/content/ru/guide/size-and-type/horizontal-spacing.page.json new file mode 100644 index 000000000..99ecd78df --- /dev/null +++ b/content/ru/guide/size-and-type/horizontal-spacing.page.json @@ -0,0 +1,6 @@ +{ + "schema": "docara.page.v1", + "navigation": { + "order": 47 + } +} diff --git a/content/ru/guide/size-and-type/index.md b/content/ru/guide/size-and-type/index.md index 16caae059..e3cad7737 100644 --- a/content/ru/guide/size-and-type/index.md +++ b/content/ru/guide/size-and-type/index.md @@ -27,6 +27,8 @@ description: "Эта часть описывает все величины SIMAI - [Плотность](/ru/guide/size-and-type/density/) — компактные области - [Пространство](/ru/guide/size-and-type/spacing/) и справочник [«Значения интервалов»](/ru/guide/size-and-type/spacing-scale/) +- [Горизонтальные отступы](/ru/guide/size-and-type/horizontal-spacing/) — значок и + текст, край поля, соседи и группы - [Типографика](/ru/guide/size-and-type/typography/) и [Текст по умолчанию](/ru/guide/size-and-type/default-text/) - [Границы, скругления и высота](/ru/guide/size-and-type/borders-and-radii/) diff --git a/content/ru/guide/smart-components/first-paint.md b/content/ru/guide/smart-components/first-paint.md index ce5be0e5f..4fcda1222 100644 --- a/content/ru/guide/smart-components/first-paint.md +++ b/content/ru/guide/smart-components/first-paint.md @@ -209,7 +209,7 @@ node scripts/snapshot-first-paint.mjs <папка сборки> --check ### Формы компонентов -Раздел собран из манифестов выпуска `ui-2bd5a3ab478a` и пакетов и обновляется вместе с ними. Форму объявляет `presentation.skeleton.shape`, свой скелетон при загрузке данных — `while_loading: template`. +Раздел собран из манифестов выпуска `ui-7fb26d395af2` и пакетов и обновляется вместе с ними. Форму объявляет `presentation.skeleton.shape`, свой скелетон при загрузке данных — `while_loading: template`. | Форма | Компоненты | |:---|:---| @@ -218,7 +218,7 @@ node scripts/snapshot-first-paint.mjs <папка сборки> --check | `menu` | ``, `` | | `block` | ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, `` (свой скелетон), ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, `` (свой скелетон), ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, `` | | `line` | ``, ``, `` | -| `none` | ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, `` | +| `none` | ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, `` | Формы не объявляют: ``, ``, ``, ``, ``, ``, ``, ``, ``, ``, ``. diff --git a/content/ru/guide/smart-components/names.md b/content/ru/guide/smart-components/names.md index fcf7a36bc..0d14fd0fd 100644 --- a/content/ru/guide/smart-components/names.md +++ b/content/ru/guide/smart-components/names.md @@ -295,7 +295,7 @@ id?}` значит «перестать ждать», а `wait` принимае ### Прежние имена по компонентам -Раздел собран из манифестов выпуска `ui-2bd5a3ab478a` и пакетов и обновляется вместе с ними. Старое имя работает до даты в последнем столбце и отмечается в `SF.deprecations`; в новой разметке пишите имя из первого столбца. +Раздел собран из манифестов выпуска `ui-7fb26d395af2` и пакетов и обновляется вместе с ними. Старое имя работает до даты в последнем столбце и отмечается в `SF.deprecations`; в новой разметке пишите имя из первого столбца. #### `` @@ -340,6 +340,8 @@ id?}` значит «перестать ждать», а `wait` принимае | `tone="pink"` | `tone="rose"` | работает, отмечается в `SF.deprecations` | 2027-01-01 | | `hue="pink"` | `hue="rose"` | работает, отмечается в `SF.deprecations` | 2027-01-01 | | `tone="purple"` | `tone="violet"` | работает, отмечается в `SF.deprecations` | 2027-01-01 | +| `--sf-avatar-offline-background-color="var(--sf-on-surface-variant)"` | `--sf-avatar-offline-background-color="var(--sf-surface-place)"` | работает, отмечается в `SF.deprecations` | 2027-01-01 | +| `--sf-avatar-offline-overlay="none"` | `--sf-avatar-offline-overlay="linear-gradient(var(--sf-on-surface-disabled) 0 0)"` | работает, отмечается в `SF.deprecations` | 2027-01-01 | | `heading` | `title` | работает как псевдоним | 2026-12-01 | #### `` @@ -665,9 +667,17 @@ id?}` значит «перестать ждать», а `wait` принимае | Имя | Прежнее имя | Состояние | Убирается после | |:---|:---|:---|:---| -| `appearance` | `variant` | принимается для совместимости | — | | событие `sf-field-reset` | `sf-field:reset` | работает, отмечается в `SF.deprecations` | 2026-12-01 | +#### `` + +| Имя | Прежнее имя | Состояние | Убирается после | +|:---|:---|:---|:---| +| `fixed-country` | `multi-country="false"` | работает, отмечается в `SF.deprecations` | 2027-01-01 | +| `fixed-mask` | `use-country-masks="false"` | работает, отмечается в `SF.deprecations` | 2027-01-01 | +| `hide-code` | `show-code="false"` | работает, отмечается в `SF.deprecations` | 2027-01-01 | +| `eager-flags` | `lazy-flags="false"` | работает, отмечается в `SF.deprecations` | 2027-01-01 | + #### `` | Имя | Прежнее имя | Состояние | Убирается после | @@ -703,6 +713,12 @@ id?}` значит «перестать ждать», а `wait` принимае | `spell-check` | `spellcheck` | работает как псевдоним | 2026-12-01 | | `invalid` | `error` | работает как псевдоним | 2026-12-01 | +#### `` + +| Имя | Прежнее имя | Состояние | Убирается после | +|:---|:---|:---|:---| +| `groups="layout"` | `groups="structure"` | работает, отмечается в `SF.deprecations` | 2027-01-01 | + #### `` | Имя | Прежнее имя | Состояние | Убирается после | @@ -716,6 +732,18 @@ id?}` значит «перестать ждать», а `wait` принимае | `kind` | `type` | работает, отмечается в `SF.deprecations` | 2026-12-01 | | событие `sf-list-item-open` | `sf-list-item-activate` | работает, отмечается в `SF.deprecations` | 2026-12-01 | +#### `` + +| Имя | Прежнее имя | Состояние | Убирается после | +|:---|:---|:---|:---| +| `data-sf-density` | `density` | работает, отмечается в `SF.deprecations` | 2027-01-01 | + +#### `` + +| Имя | Прежнее имя | Состояние | Убирается после | +|:---|:---|:---|:---| +| `groups="layout"` | `groups="structure"` | работает, отмечается в `SF.deprecations` | 2027-01-01 | + #### `` | Имя | Прежнее имя | Состояние | Убирается после | @@ -830,6 +858,7 @@ id?}` значит «перестать ждать», а `wait` принимае |:---|:---|:---|:---| | `appearance="track"` | `appearance="segmented"` | работает, отмечается в `SF.deprecations` | 2027-01-01 | | `appearance="buttons"` | `appearance="default"` | работает, отмечается в `SF.deprecations` | 2027-01-01 | +| `height` | `spacing` | работает, отмечается в `SF.deprecations` | 2027-01-01 | | событие `change` | `sf-button-group-change` | работает, отмечается в `SF.deprecations` | 2026-12-01 | | `spacing` | `tightness` | работает как псевдоним | — | @@ -838,7 +867,6 @@ id?}` значит «перестать ждать», а `wait` принимае | Имя | Прежнее имя | Состояние | Убирается после | |:---|:---|:---|:---| | `kind` | `variant` | работает, отмечается в `SF.deprecations` | 2026-12-01 | -| `kind` | `type` | принимается для совместимости | — | #### `` @@ -963,7 +991,7 @@ id?}` значит «перестать ждать», а `wait` принимае | событие `sf-view-state` | `sf-data-view-state` | работает как псевдоним | — | | событие `sf-view-tree` | `sf-data-view-tree` | работает как псевдоним | — | | событие `sf-view-files-drop` | `sf-data-view-files-drop` | работает как псевдоним | — | -| событие `sf-view-saved-view-intent` | `sf-data-view-saved-view-intent` | работает как псевдоним | — | +| событие `sf-view-saved-view-intent` | `sf-data-view-saved-view-intent` | работает, отмечается в `SF.deprecations` | 2027-01-01 | | событие `sf-view-list-open` | `sf-data-view-list-open` | работает как псевдоним | — | #### `` diff --git a/content/ru/guide/smart-components/view-preferences.md b/content/ru/guide/smart-components/view-preferences.md index 945617279..fa4c5185e 100644 --- a/content/ru/guide/smart-components/view-preferences.md +++ b/content/ru/guide/smart-components/view-preferences.md @@ -39,7 +39,7 @@ description: "Как компоненты запоминают то, что че ## Поля значения -Раздел собран из манифестов выпуска `ui-2bd5a3ab478a` и пакетов и обновляется вместе с ними. Поля объявляет `persistence.view_preference`. +Раздел собран из манифестов выпуска `ui-7fb26d395af2` и пакетов и обновляется вместе с ними. Поля объявляет `persistence.view_preference`. ### `` diff --git a/content/ru/guide/standards/ai.md b/content/ru/guide/standards/ai.md index f18c5992e..1a71f3103 100644 --- a/content/ru/guide/standards/ai.md +++ b/content/ru/guide/standards/ai.md @@ -24,7 +24,7 @@ Framework применяется без чтения исходного кода | Выпуск документации | `/ai/framework-lock.json` | Выпуск, который описывает сам сайт документации: идентификатор выпуска в поле `runtime.pair_id`, ревизии и хеши поставок. Это lock-файл сайта, а не проекта. Пути в `runtime.boot` (`core.css`, `core.js`, `smart-base.js`) называют читаемые файлы; рядом в поставке лежат сжатые `.min`, которые подключает рабочая страница (см. [Сжатые файлы](/ru/guide/connection/loader/#сжатые-файлы)). `package_projections.<имя>.receipt` в нём — сокращённая проекция квитанции пакета (поля `schema`, `framework_source`), а не формат квитанции `package-receipt.json` (см. [Пакеты компонентов продуктов](/ru/guide/introduction/structure/#пакеты-компонентов-продуктов)) | | Стандарты | `/ai/standards//<версия>/` | Конверты стандартов, схема Standard Contract, схема манифеста, схема порта, схема описания фрагмента, схема манифеста эффекта, комплект Composition Recipe. Каждый файл лежит под изданной редакцией, например `/ai/standards/simai.interface-fragment/1.0.2/standard.json`, `/ai/standards/simai.effect/1.4.0/standard.json`, `/ai/standards/interface-fragment-schema/1.2.0/descriptor.schema.json`, `/ai/standards/effect-schema/1.3.0/effect.schema.json` | | Порты | `distr/core/contracts/ports/<порт>/<версия>/` в `ui`; на сайте документации — `/ai/ports/<порт>/<версия>/` | Объявление порта и его набор проверок; полный набор изданных версий — в поставке | -| Манифесты компонентов | `smart.manifest.json` в папке компонента: `distr/smart/<папка>/` в `ui`, `src/smart/<папка>/` в исходнике пакета продукта. Сайт документации манифесты компонентов не публикует; адрес на выпуск — `https://cdn.jsdelivr.net/npm/@simai-studio/ui@5.20261110.1541/distr/smart/<папка>/smart.manifest.json`, для пакета `pro` — `components/src/smart/<папка>/smart.manifest.json` в `simai/ui-pro` на коммите пакета из квитанции | Контракт компонента и раздел `ai_guidance` | +| Манифесты компонентов | `smart.manifest.json` в папке компонента: `distr/smart/<папка>/` в `ui`, `src/smart/<папка>/` в исходнике пакета продукта. Сайт документации манифесты компонентов не публикует; адрес на выпуск — `https://cdn.jsdelivr.net/npm/@simai-studio/ui@5.20261112.1807/distr/smart/<папка>/smart.manifest.json`, для пакета `pro` — `components/src/smart/<папка>/smart.manifest.json` в `simai/ui-pro` на коммите пакета из квитанции | Контракт компонента и раздел `ai_guidance` | | Справка о пакете | `distr/core/contracts/packages/<имя>.package.json` в `ui` | Какие элементы даёт пакет и что каждому нужно от Framework | | Журнал изменений | `contracts/changes/journal.json` в открытом репозитории `simai/ui-source` (см. [Журнал изменений](/ru/guide/connection/change-lifecycle/#журнал-изменений)) | Что переименовано, на что, когда удаляется, как заменить | | Правила загрузки | `distr/core/js/core-rules.js` и `distr/rule/` в `ui` | Какой тег в какой папке: правило `cl-<папка>` перечисляет теги в поле `tags`, например `cl-buttons` → `sf-button`, папка `distr/smart/buttons/` | @@ -33,7 +33,7 @@ Framework применяется без чтения исходного кода `/ai/framework-lock.json` и файл блокировки проекта (см. [Версии: как закрепить выпуск](/ru/guide/connection/versions/)) — разные файлы. Выпуск проекта берётся из файла блокировки проекта. ИИ сверяет его с полем `runtime.pair_id` файла `/ai/framework-lock.json` (например, -`ui-2bd5a3ab478a`): если выпуски разные, документация сайта описывает +`ui-7fb26d395af2`): если выпуски разные, документация сайта описывает другой выпуск, и ИИ сообщает об этом, а не применяет её молча. Раздел `ai_guidance` манифеста содержит: diff --git a/content/ru/index.md b/content/ru/index.md index 6de226c19..8ac59c73c 100644 --- a/content/ru/index.md +++ b/content/ru/index.md @@ -28,9 +28,9 @@ SIMAI Framework открыт под Apache-2.0. 3. Откройте страницу — загрузчик сам подгрузит то, что на ней есть. ```html - - - + + + ``` @@ -74,7 +74,7 @@ SIMAI Framework открыт под Apache-2.0. --- -**SIMAI Framework** · выпуск `ui-2bd5a3ab478a` · +**SIMAI Framework** · выпуск `ui-7fb26d395af2` · [GitHub](https://github.com/simai/ui-source) · [Сообщить о проблеме](https://github.com/simai/ui-source/issues) · [Версии](/ru/guide/connection/versions/) · diff --git a/content/ru/pro/admin/admin-menu.md b/content/ru/pro/admin/admin-menu.md index 18d87fcff..421b0ee1f 100644 --- a/content/ru/pro/admin/admin-menu.md +++ b/content/ru/pro/admin/admin-menu.md @@ -5,7 +5,7 @@ description: "Даёт административному приложению # Меню администратора -:badge[sf-admin-menu]{variant=tonal scheme=primary size=1/2} :badge[1.9.0]{variant=outline scheme=on-surface size=1/2} +:badge[sf-admin-menu]{variant=tonal scheme=primary size=1/2} :badge[1.9.1]{variant=outline scheme=on-surface size=1/2} `` — боковая навигация административного приложения: вложенные разделы, поиск, компактный режим и настройка порядка и видимости пунктов. @@ -264,7 +264,7 @@ document.addEventListener('sf-admin-menu-navigate', (event) => { ## Справочник API -Раздел собран из манифеста компонента выпуска `ui-2bd5a3ab478a` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. +Раздел собран из манифеста компонента выпуска `ui-7fb26d395af2` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: `search-placeholder` — `searchPlaceholder`. Свойство атрибута `template` называется `templateName`. @@ -272,7 +272,7 @@ document.addEventListener('sf-admin-menu-navigate', (event) => { |:---|:---| | Тег | `` | | Назначение | Вложенная навигация администратора с поиском, компактным режимом и редактируемыми личными или системными настройками. | -| Контракт | `smart.admin-menu`, версия `1.9.0` | +| Контракт | `smart.admin-menu`, версия `1.9.1` | | Поставка | пакет `pro` (`SF_BOOT_CONFIG.packages.pro`) | | [Жизненный цикл](/ru/guide/smart-components/quality/#готовность-компонента-к-использованию) | экспериментальный: API может меняться между выпусками | | [Готовность](/ru/guide/smart-components/quality/#готовность-компонента-к-использованию) | `host-required` | @@ -373,8 +373,8 @@ document.addEventListener('sf-admin-menu-navigate', (event) => { ### Источник -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/admin-menu` -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/admin-menu/rule.js#name=cl-admin-menu` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/admin-menu` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/admin-menu/rule.js#name=cl-admin-menu` ## См. также diff --git a/content/ru/pro/admin/change-confirm.md b/content/ru/pro/admin/change-confirm.md index 3f8c5b1ab..15cd38a92 100644 --- a/content/ru/pro/admin/change-confirm.md +++ b/content/ru/pro/admin/change-confirm.md @@ -5,7 +5,7 @@ description: "Подготовленное изменение ждёт отве # Подтверждение изменения -:badge[sf-confirm-change]{variant=tonal scheme=primary size=1/2} :badge[1.6.0]{variant=outline scheme=on-surface size=1/2} +:badge[sf-confirm-change]{variant=tonal scheme=primary size=1/2} :badge[1.7.1]{variant=outline scheme=on-surface size=1/2} `` — карточка подготовленного изменения, которое ждёт «да» или «нет» человека: каждое значение как было и как станет, два @@ -107,7 +107,7 @@ card.addEventListener('sf-confirm-change-answer', async (event) => { ## Справочник API -Раздел собран из манифеста компонента выпуска `ui-2bd5a3ab478a` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. +Раздел собран из манифеста компонента выпуска `ui-7fb26d395af2` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: `search-placeholder` — `searchPlaceholder`. Свойство атрибута `template` называется `templateName`. @@ -115,8 +115,8 @@ card.addEventListener('sf-confirm-change-answer', async (event) => { |:---|:---| | Тег | `` | | Назначение | Подготовленное изменение, предложенное человеку: каждое значение как было и как станет, два равноценных ответа, срок ответа, а затем только итог. Ничего не применяет; нажатие — это событие. | -| Контракт | `smart.confirm-change`, версия `1.6.0` | -| Поставка | выпуск Framework `ui-2bd5a3ab478a` | +| Контракт | `smart.confirm-change`, версия `1.7.1` | +| Поставка | выпуск Framework `ui-7fb26d395af2` | | [Жизненный цикл](/ru/guide/smart-components/quality/#готовность-компонента-к-использованию) | экспериментальный: API может меняться между выпусками | | [Готовность](/ru/guide/smart-components/quality/#готовность-компонента-к-использованию) | `host-required` | | Заготовка до прихода кода | нет: атрибут `data-sf-skeleton` не пишется; своего скелетона при загрузке данных нет ([Коробка до кода](/ru/guide/smart-components/first-paint/#коробка-до-кода)) | @@ -165,5 +165,5 @@ card.addEventListener('sf-confirm-change-answer', async (event) => { ### Источник -- `simai/ui@2bd5a3ab478a46fcee24d2460e7792135b0bb864:distr/smart/confirm-change` -- `simai/ui@2bd5a3ab478a46fcee24d2460e7792135b0bb864:distr/rule/rule.json#name=cl-confirm-change` +- `simai/ui@7fb26d395af28dfcaac2a5df9de254b3067dc4ae:distr/smart/confirm-change` +- `simai/ui@7fb26d395af28dfcaac2a5df9de254b3067dc4ae:distr/rule/rule.json#name=cl-confirm-change` diff --git a/content/ru/pro/admin/property-view.md b/content/ru/pro/admin/property-view.md index 27edc0365..328d85587 100644 --- a/content/ru/pro/admin/property-view.md +++ b/content/ru/pro/admin/property-view.md @@ -394,7 +394,7 @@ view: { ## Справочник API -Раздел собран из манифеста компонента выпуска `ui-2bd5a3ab478a` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. +Раздел собран из манифеста компонента выпуска `ui-7fb26d395af2` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: `search-placeholder` — `searchPlaceholder`. Свойство атрибута `template` называется `templateName`. @@ -557,8 +557,8 @@ view: { ### Источник -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/view-properties` -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/view-properties/rule.js#name=cl-view-properties` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/view-properties` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/view-properties/rule.js#name=cl-view-properties` ## См. также diff --git a/content/ru/pro/admin/table.md b/content/ru/pro/admin/table.md index 9016023b1..498215ddd 100644 --- a/content/ru/pro/admin/table.md +++ b/content/ru/pro/admin/table.md @@ -5,7 +5,7 @@ description: "Показывает серверную коллекцию таб # Представление данных -:badge[sf-view]{variant=tonal scheme=primary size=1/2} :badge[1.11.0]{variant=outline scheme=on-surface size=1/2} :badge[sf-view-table]{variant=tonal scheme=primary size=1/2} :badge[1.17.0]{variant=outline scheme=on-surface size=1/2} +:badge[sf-view]{variant=tonal scheme=primary size=1/2} :badge[1.11.0]{variant=outline scheme=on-surface size=1/2} :badge[sf-view-table]{variant=tonal scheme=primary size=1/2} :badge[1.17.1]{variant=outline scheme=on-surface size=1/2} `` показывает серверную коллекцию записей: поиск, фильтры, таблицу, выбор строк, действия, настройки колонок и пагинацию. Данные, права и @@ -791,7 +791,7 @@ table.addEventListener('sf-table-apply', async (event) => { ## Справочник API -Раздел собран из манифеста компонентов выпуска `ui-2bd5a3ab478a` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. +Раздел собран из манифеста компонентов выпуска `ui-7fb26d395af2` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: `search-placeholder` — `searchPlaceholder`. Свойство атрибута `template` называется `templateName`. @@ -920,8 +920,8 @@ table.addEventListener('sf-table-apply', async (event) => { #### Источник -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/view` -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/view/rule.js#name=cl-view` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/view` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/view/rule.js#name=cl-view` ### `` @@ -929,7 +929,7 @@ table.addEventListener('sf-table-apply', async (event) => { |:---|:---| | Тег | `` | | Назначение | Полное представление коллекции с серверными данными: поиск, фильтры, настройки таблицы, действия над строками и массовые действия, пагинация. | -| Контракт | `smart.view-table`, версия `1.17.0` | +| Контракт | `smart.view-table`, версия `1.17.1` | | Поставка | пакет `pro` (`SF_BOOT_CONFIG.packages.pro`) | | [Жизненный цикл](/ru/guide/smart-components/quality/#готовность-компонента-к-использованию) | экспериментальный: API может меняться между выпусками | | [Готовность](/ru/guide/smart-components/quality/#готовность-компонента-к-использованию) | `host-required` | @@ -1100,5 +1100,5 @@ table.addEventListener('sf-table-apply', async (event) => { #### Источник -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/view-table` -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/view-table/rule.js#name=cl-view-table` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/view-table` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/view-table/rule.js#name=cl-view-table` diff --git a/content/ru/pro/chat/chat-composer.md b/content/ru/pro/chat/chat-composer.md index 562807dbd..0b933a48d 100644 --- a/content/ru/pro/chat/chat-composer.md +++ b/content/ru/pro/chat/chat-composer.md @@ -116,7 +116,7 @@ composer.files = [{id: 'att_1', name: 'Договор.pdf', bytes: 48213}]; ## Справочник API -Раздел собран из манифеста компонента выпуска `ui-2bd5a3ab478a` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. +Раздел собран из манифеста компонента выпуска `ui-7fb26d395af2` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: `search-placeholder` — `searchPlaceholder`. Свойство атрибута `template` называется `templateName`. @@ -177,8 +177,8 @@ composer.files = [{id: 'att_1', name: 'Договор.pdf', bytes: 48213}]; ### Источник -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/chat-composer` -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/chat-composer/rule.js#name=cl-chat-composer` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/chat-composer` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/chat-composer/rule.js#name=cl-chat-composer` ## См. также diff --git a/content/ru/pro/chat/chat-interlocutor.md b/content/ru/pro/chat/chat-interlocutor.md index 53180151d..7ea5fbcdc 100644 --- a/content/ru/pro/chat/chat-interlocutor.md +++ b/content/ru/pro/chat/chat-interlocutor.md @@ -100,7 +100,7 @@ picker.addEventListener('sf-chat-interlocutor-select', async (event) => { ## Справочник API -Раздел собран из манифеста компонента выпуска `ui-2bd5a3ab478a` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. +Раздел собран из манифеста компонента выпуска `ui-7fb26d395af2` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: `search-placeholder` — `searchPlaceholder`. Свойство атрибута `template` называется `templateName`. @@ -147,8 +147,8 @@ picker.addEventListener('sf-chat-interlocutor-select', async (event) => { ### Источник -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/chat-interlocutor` -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/chat-interlocutor/rule.js#name=cl-chat-interlocutor` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/chat-interlocutor` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/chat-interlocutor/rule.js#name=cl-chat-interlocutor` ## См. также diff --git a/content/ru/pro/chat/chat-message.md b/content/ru/pro/chat/chat-message.md index c512689a2..303597176 100644 --- a/content/ru/pro/chat/chat-message.md +++ b/content/ru/pro/chat/chat-message.md @@ -151,7 +151,7 @@ log.renderMessage = (message, {view}) => { ## Справочник API -Раздел собран из манифеста компонента выпуска `ui-2bd5a3ab478a` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. +Раздел собран из манифеста компонента выпуска `ui-7fb26d395af2` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: `search-placeholder` — `searchPlaceholder`. Свойство атрибута `template` называется `templateName`. @@ -213,8 +213,8 @@ log.renderMessage = (message, {view}) => { ### Источник -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/chat-message` -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/chat-message/rule.js#name=cl-chat-message` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/chat-message` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/chat-message/rule.js#name=cl-chat-message` ## См. также diff --git a/content/ru/pro/chat/chat-window.md b/content/ru/pro/chat/chat-window.md index 9c960c799..d170616f9 100644 --- a/content/ru/pro/chat/chat-window.md +++ b/content/ru/pro/chat/chat-window.md @@ -241,7 +241,7 @@ Escape закрывает его и возвращает фокус на ком ## Справочник API -Раздел собран из манифеста компонента выпуска `ui-2bd5a3ab478a` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. +Раздел собран из манифеста компонента выпуска `ui-7fb26d395af2` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: `search-placeholder` — `searchPlaceholder`. Свойство атрибута `template` называется `templateName`. @@ -353,8 +353,8 @@ Escape закрывает его и возвращает фокус на ком ### Источник -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/chat-window` -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/chat-window/rule.js#name=cl-chat-window` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/chat-window` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/chat-window/rule.js#name=cl-chat-window` ## См. также diff --git a/content/ru/pro/chat/message-log.md b/content/ru/pro/chat/message-log.md index 0584a339c..b7d4f9710 100644 --- a/content/ru/pro/chat/message-log.md +++ b/content/ru/pro/chat/message-log.md @@ -131,7 +131,7 @@ log.addEventListener('sf-message-log-load-more', async (event) => { ## Справочник API -Раздел собран из манифеста компонента выпуска `ui-2bd5a3ab478a` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. +Раздел собран из манифеста компонента выпуска `ui-7fb26d395af2` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: `search-placeholder` — `searchPlaceholder`. Свойство атрибута `template` называется `templateName`. @@ -199,5 +199,5 @@ log.addEventListener('sf-message-log-load-more', async (event) => { ### Источник -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/message-log` -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/message-log/rule.js#name=cl-message-log` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/message-log` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/message-log/rule.js#name=cl-message-log` diff --git a/content/ru/pro/chat/thread-list.md b/content/ru/pro/chat/thread-list.md index 9306428f6..5582e93ec 100644 --- a/content/ru/pro/chat/thread-list.md +++ b/content/ru/pro/chat/thread-list.md @@ -129,7 +129,7 @@ noted in `SF.deprecations`. ## Справочник API -Раздел собран из манифеста компонента выпуска `ui-2bd5a3ab478a` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. +Раздел собран из манифеста компонента выпуска `ui-7fb26d395af2` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: `search-placeholder` — `searchPlaceholder`. Свойство атрибута `template` называется `templateName`. @@ -202,5 +202,5 @@ noted in `SF.deprecations`. ### Источник -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/chat-threads` -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/chat-threads/rule.js#name=cl-chat-threads` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/chat-threads` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/chat-threads/rule.js#name=cl-chat-threads` diff --git a/content/ru/pro/editor/blocks.md b/content/ru/pro/editor/blocks.md index 6447ad5f2..c8d716f04 100644 --- a/content/ru/pro/editor/blocks.md +++ b/content/ru/pro/editor/blocks.md @@ -43,7 +43,7 @@ description: "Набор автора блока: шаблон, генерато поставку целиком: `distr/core/kits/block/sample-quote/` и `distr/core/kits/block/sample-cards/` в пакете `@simai-studio/ui`. Хост может загрузить их с CDN, например -`https://cdn.jsdelivr.net/npm/@simai-studio/ui@5.20261110.1541/distr/core/kits/block/sample-quote/type.json`. +`https://cdn.jsdelivr.net/npm/@simai-studio/ui@5.20261112.1807/distr/core/kits/block/sample-quote/type.json`. ## Быстрый старт diff --git a/content/ru/pro/editor/content-editor.md b/content/ru/pro/editor/content-editor.md index 25a6d8f93..a3d3f74fc 100644 --- a/content/ru/pro/editor/content-editor.md +++ b/content/ru/pro/editor/content-editor.md @@ -202,7 +202,7 @@ Esc в поле выбирает его блок. Стрелки выбираю ## Справочник API -Раздел собран из манифеста компонента выпуска `ui-2bd5a3ab478a` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. +Раздел собран из манифеста компонента выпуска `ui-7fb26d395af2` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: `search-placeholder` — `searchPlaceholder`. Свойство атрибута `template` называется `templateName`. @@ -264,5 +264,5 @@ Esc в поле выбирает его блок. Стрелки выбираю ### Источник -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/editor-content` -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/editor-content/rule.js#name=cl-editor-content` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/editor-content` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/editor-content/rule.js#name=cl-editor-content` diff --git a/content/ru/pro/editor/editor.md b/content/ru/pro/editor/editor.md index 9db13eb7a..a109b5cc7 100644 --- a/content/ru/pro/editor/editor.md +++ b/content/ru/pro/editor/editor.md @@ -181,7 +181,7 @@ Markdown текстовых областей; то же даёт действи ## Справочник API -Раздел собран из манифеста компонента выпуска `ui-2bd5a3ab478a` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. +Раздел собран из манифеста компонента выпуска `ui-7fb26d395af2` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: `search-placeholder` — `searchPlaceholder`. Свойство атрибута `template` называется `templateName`. @@ -251,8 +251,8 @@ Markdown текстовых областей; то же даёт действи ### Источник -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/editor` -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/editor/rule.js#name=cl-editor` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/editor` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/editor/rule.js#name=cl-editor` ## См. также diff --git a/content/ru/pro/mail/mail-canvas.md b/content/ru/pro/mail/mail-canvas.md index a82abd6be..76003549d 100644 --- a/content/ru/pro/mail/mail-canvas.md +++ b/content/ru/pro/mail/mail-canvas.md @@ -177,7 +177,7 @@ Tab не входят. Клавиши дерева и панели — у `sf-ed ## Справочник API -Раздел собран из манифеста компонента выпуска `ui-2bd5a3ab478a` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. +Раздел собран из манифеста компонента выпуска `ui-7fb26d395af2` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: `search-placeholder` — `searchPlaceholder`. Свойство атрибута `template` называется `templateName`. @@ -244,5 +244,5 @@ Tab не входят. Клавиши дерева и панели — у `sf-ed ### Источник -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/mail-canvas` -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/mail-canvas/rule.js#name=cl-mail-canvas` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/mail-canvas` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/mail-canvas/rule.js#name=cl-mail-canvas` diff --git a/content/ru/pro/mail/mail-inspector.md b/content/ru/pro/mail/mail-inspector.md index 229b2129f..2ab5c644f 100644 --- a/content/ru/pro/mail/mail-inspector.md +++ b/content/ru/pro/mail/mail-inspector.md @@ -180,7 +180,7 @@ panel.sections = [ ## Справочник API -Раздел собран из манифеста компонента выпуска `ui-2bd5a3ab478a` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. +Раздел собран из манифеста компонента выпуска `ui-7fb26d395af2` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: `search-placeholder` — `searchPlaceholder`. Свойство атрибута `template` называется `templateName`. @@ -260,5 +260,5 @@ panel.sections = [ ### Источник -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/mail-inspector` -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/mail-inspector/rule.js#name=cl-mail-inspector` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/mail-inspector` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/mail-inspector/rule.js#name=cl-mail-inspector` diff --git a/content/ru/pro/mail/mail-letters.md b/content/ru/pro/mail/mail-letters.md index 45ebd5b65..fad19e2b4 100644 --- a/content/ru/pro/mail/mail-letters.md +++ b/content/ru/pro/mail/mail-letters.md @@ -106,7 +106,7 @@ list.addEventListener('sf-mail-letters-delete', async (event) => { ## Справочник API -Раздел собран из манифеста компонента выпуска `ui-2bd5a3ab478a` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. +Раздел собран из манифеста компонента выпуска `ui-7fb26d395af2` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: `search-placeholder` — `searchPlaceholder`. Свойство атрибута `template` называется `templateName`. @@ -160,5 +160,5 @@ list.addEventListener('sf-mail-letters-delete', async (event) => { ### Источник -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/mail-letters` -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/mail-letters/rule.js#name=cl-mail-letters` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/mail-letters` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/mail-letters/rule.js#name=cl-mail-letters` diff --git a/content/ru/pro/mail/mail-library.md b/content/ru/pro/mail/mail-library.md index 4dc1a8ace..f805a0e58 100644 --- a/content/ru/pro/mail/mail-library.md +++ b/content/ru/pro/mail/mail-library.md @@ -107,7 +107,7 @@ library.addEventListener('sf-mail-library-replace', (event) => { ## Справочник API -Раздел собран из манифеста компонента выпуска `ui-2bd5a3ab478a` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. +Раздел собран из манифеста компонента выпуска `ui-7fb26d395af2` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: `search-placeholder` — `searchPlaceholder`. Свойство атрибута `template` называется `templateName`. @@ -160,5 +160,5 @@ library.addEventListener('sf-mail-library-replace', (event) => { ### Источник -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/mail-library` -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/mail-library/rule.js#name=cl-mail-library` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/mail-library` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/mail-library/rule.js#name=cl-mail-library` diff --git a/content/ru/pro/mail/mail-structure.md b/content/ru/pro/mail/mail-structure.md index b25e002e2..3f46d1560 100644 --- a/content/ru/pro/mail/mail-structure.md +++ b/content/ru/pro/mail/mail-structure.md @@ -99,7 +99,7 @@ structure.inserterItems = [{type: 'heading', label: 'Основа'}, {value: 'te ## Справочник API -Раздел собран из манифеста компонента выпуска `ui-2bd5a3ab478a` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. +Раздел собран из манифеста компонента выпуска `ui-7fb26d395af2` и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест. Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: `search-placeholder` — `searchPlaceholder`. Свойство атрибута `template` называется `templateName`. @@ -158,5 +158,5 @@ structure.inserterItems = [{type: 'heading', label: 'Основа'}, {value: 'te ### Источник -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/mail-structure` -- `simai/ui-pro@dc13c0f724009847add06c25bf98a6c033c037db:components/src/smart/mail-structure/rule.js#name=cl-mail-structure` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/mail-structure` +- `simai/ui-pro@db490626ba74caeed832352c7bc005410ca825e2:components/src/smart/mail-structure/rule.js#name=cl-mail-structure` diff --git a/content/ru/recipes/copy.md b/content/ru/recipes/copy.md index dad9d7c12..31c7b6746 100644 --- a/content/ru/recipes/copy.md +++ b/content/ru/recipes/copy.md @@ -8,12 +8,8 @@ description: "Как дать скопировать ключ, команду, Ключ, команду, номер заказа или ссылку человек переносит в другое место. Кнопка копирования стоит рядом со значением и кладёт в буфер обмена его целиком, а не ту часть, что видна. Имя кнопки говорит, что она копирует. -Если браузер не дал доступ к буферу, кнопка выделяет текст, и рядом видно, -что нажать. - - +Если браузер не дал доступ к буферу, кнопка выделяет текст и сама +показывает, что нажать. ## Пример @@ -48,10 +44,21 @@ data-sf-copy-target, добавить сцену «обычная кнопка :::example {id="recipes/copy/group" label="Вебхук" preview=sandbox log="sf-button-copy-copied" log_console=true log_open=false} ::: +### Обычная кнопка с атрибутом + +Кнопка уже есть в ряду действий или в строке таблицы и должна выглядеть как +соседние. Атрибут `data-sf-copy` с текстом или `data-sf-copy-target` с +элементом делает её кнопкой копирования: отклик тот же, отдельного класса не +нужно. + +:::example {id="smart-components/copy-button/attribute" label="Кнопки с атрибутом" preview=sandbox log_console=true log_open=false} +::: + ### Браузер не дал доступ к буферу Так бывает во встроенном фрейме или по политике сайта; здесь отказ -смоделирован. Нажмите кнопку: ключ выделится, и рядом появится, что нажать. +смоделирован. Нажмите кнопку: ключ выделится, и над кнопкой появится, что +нажать. :::example {id="recipes/copy/denied" label="Отказ" preview=sandbox log="sf-button-copy-copy-failed" log_console=true log_open=false} ::: @@ -64,6 +71,7 @@ data-sf-copy-target, добавить сцену «обычная кнопка | Команда, отрывок кода | Блок кода со своей шапкой ставит кнопку «Копировать код» сам; без шапки (`data-chrome="none"`) — кнопка над блоком с `target` | | Номер или ссылка в строке таблицы | Маленькая кнопка рядом со значением, источник — `value` с самим значением | | Несколько значений в одной карточке | Кнопка у каждого, у каждой своё имя | +| Действие в ряду кнопок или значок в строке | Своя кнопка (`sf-button`, `sf-button-icon`, `