diff --git a/.github/workflows/freshness.yml b/.github/workflows/freshness.yml index 729acc8..b27b63e 100644 --- a/.github/workflows/freshness.yml +++ b/.github/workflows/freshness.yml @@ -28,6 +28,11 @@ jobs: node-version: 22 cache: npm + - name: Documentation pages are still published + run: | + npm ci + npm run docs:check + - name: Compare releases id: compare env: diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index cb6753a..bf19de3 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -39,6 +39,8 @@ jobs: node-version: 22 cache: npm - run: npm ci + - name: Documentation pages are still published + run: npm run docs:check - name: Package id: package run: | diff --git a/CHANGELOG.md b/CHANGELOG.md index b8be668..a9f3f00 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,21 @@ All notable changes to SIMAI Framework for VS Code (formerly SIMAI Framework IntelliSense) are listed here. +## [0.3.2] - 2026-10-30 + +### Fixed + +- Documentation links in hovers led to pages that do not exist, such as + `/smart.buttons`. Hovers now link to the real page of the tag or utility on + https://ui.simai.io, for example `/ru/smart-components/actions/buttons/`. + Links are built only from pages the site lists (`contracts/docs-pages.json`), + and the release and a weekly check fail if a recorded page disappears. + +### Changed + +- `sf.docs.baseUrl` now defaults to `https://ui.simai.io`, so the links work + without configuration. Set it to empty for no link. + ## [0.3.1] - 2026-10-20 ### Changed diff --git a/README.md b/README.md index 35e55ce..15b879e 100644 --- a/README.md +++ b/README.md @@ -97,7 +97,7 @@ Bitrix templates. In markup, class attributes, `sf-` tags and `--sf-` tokens in | `sf.diagnostics.enabled` | `true` | Report deprecated and likely misspelt Framework names. | | `sf.diagnostics.unknownSeverity` | `information` | `off`, `hint`, `information`, `warning` or `error` for likely misspellings. | | `sf.diagnostics.deprecatedSeverity` | `warning` | The same choices for deprecated tags and attributes. | -| `sf.docs.baseUrl` | empty | Base URL of the SIMAI Framework documentation site. When set, hovers link to `/`, for example `/smart.buttons`. | +| `sf.docs.baseUrl` | `https://ui.simai.io` | Base URL of the SIMAI Framework documentation site that hovers link to. Leave empty for no link. | ## What is suggested diff --git a/contracts/docs-pages.json b/contracts/docs-pages.json new file mode 100644 index 0000000..09cd306 --- /dev/null +++ b/contracts/docs-pages.json @@ -0,0 +1,396 @@ +{ + "site": "https://ui.simai.io", + "pages": [ + "/ru/components/actions/", + "/ru/components/actions/button-group/", + "/ru/components/actions/buttons/", + "/ru/components/actions/clipboard/", + "/ru/components/actions/close/", + "/ru/components/actions/download-file/", + "/ru/components/actions/fab/", + "/ru/components/actions/icon-buttons/", + "/ru/components/content/", + "/ru/components/content/accordion/", + "/ru/components/content/avatars/", + "/ru/components/content/content-divider/", + "/ru/components/content/doc/", + "/ru/components/content/emoji/", + "/ru/components/content/featured-icon/", + "/ru/components/content/file-preview/", + "/ru/components/content/flag/", + "/ru/components/content/highlight/", + "/ru/components/content/icons/", + "/ru/components/content/kbd/", + "/ru/components/content/reference-link/", + "/ru/components/content/tags/", + "/ru/components/feedback/", + "/ru/components/feedback/alerts/", + "/ru/components/feedback/badges/", + "/ru/components/feedback/dot/", + "/ru/components/feedback/placeholder/", + "/ru/components/feedback/progress-bar/", + "/ru/components/feedback/progress-scale/", + "/ru/components/feedback/skeleton/", + "/ru/components/feedback/spinner/", + "/ru/components/feedback/toast/", + "/ru/components/forms/", + "/ru/components/forms/checkbox/", + "/ru/components/forms/country-code/", + "/ru/components/forms/datepicker/", + "/ru/components/forms/file-upload/", + "/ru/components/forms/inputs/", + "/ru/components/forms/quantity/", + "/ru/components/forms/radio/", + "/ru/components/forms/range-slider/", + "/ru/components/forms/slider/", + "/ru/components/forms/switch/", + "/ru/components/forms/textarea/", + "/ru/components/forms/toggle/", + "/ru/components/forms/verification/", + "/ru/components/internal/", + "/ru/components/internal/admin-menu/", + "/ru/components/navigation/", + "/ru/components/navigation/breadcrumbs/", + "/ru/components/navigation/context-menu/", + "/ru/components/navigation/dropdown/", + "/ru/components/navigation/link/", + "/ru/components/navigation/menu/", + "/ru/components/navigation/pagination/", + "/ru/components/navigation/step/", + "/ru/components/navigation/tab/", + "/ru/components/navigation/tabs/", + "/ru/components/navigation/tree-item/", + "/ru/components/navigation/tree/", + "/ru/components/overlays-media/", + "/ru/components/overlays-media/carousel/", + "/ru/components/overlays-media/modal/", + "/ru/components/overlays-media/swiper/", + "/ru/components/overlays-media/tooltip/", + "/ru/components/tools/", + "/ru/components/tools/hide-show/", + "/ru/components/tools/outline/", + "/ru/components/tools/scrollbar/", + "/ru/components/tools/theme/", + "/ru/smart-components/actions/", + "/ru/smart-components/actions/button-group/", + "/ru/smart-components/actions/buttons/", + "/ru/smart-components/actions/close/", + "/ru/smart-components/actions/copy-button/", + "/ru/smart-components/actions/download-file/", + "/ru/smart-components/actions/icon-buttons/", + "/ru/smart-components/actions/segmented/", + "/ru/smart-components/composite/", + "/ru/smart-components/composite/admin-menu/", + "/ru/smart-components/composite/change-confirm/", + "/ru/smart-components/composite/chat-composer/", + "/ru/smart-components/composite/chat-interlocutor/", + "/ru/smart-components/composite/chat-message/", + "/ru/smart-components/composite/chat-window/", + "/ru/smart-components/composite/message-log/", + "/ru/smart-components/composite/page-header/", + "/ru/smart-components/composite/profile-picker/", + "/ru/smart-components/composite/property-view/", + "/ru/smart-components/composite/search/", + "/ru/smart-components/composite/site-header/", + "/ru/smart-components/composite/thread-list/", + "/ru/smart-components/content/", + "/ru/smart-components/content/accordion/", + "/ru/smart-components/content/avatar/", + "/ru/smart-components/content/avatars/", + "/ru/smart-components/content/file-preview/", + "/ru/smart-components/content/gallery/", + "/ru/smart-components/content/icons/", + "/ru/smart-components/content/list-item/", + "/ru/smart-components/content/reference-link/", + "/ru/smart-components/content/table/", + "/ru/smart-components/content/tags/", + "/ru/smart-components/editor/", + "/ru/smart-components/editor/composition-overlay/", + "/ru/smart-components/editor/inline-editor/", + "/ru/smart-components/editor/sortable/", + "/ru/smart-components/feedback/", + "/ru/smart-components/feedback/alert/", + "/ru/smart-components/feedback/badges/", + "/ru/smart-components/feedback/empty-state/", + "/ru/smart-components/feedback/help-mark/", + "/ru/smart-components/feedback/progress-bar/", + "/ru/smart-components/feedback/progress-ring/", + "/ru/smart-components/feedback/progress-scale/", + "/ru/smart-components/feedback/skeleton/", + "/ru/smart-components/feedback/spinner/", + "/ru/smart-components/feedback/toast/", + "/ru/smart-components/feedback/tooltip/", + "/ru/smart-components/forms/", + "/ru/smart-components/forms/checkbox/", + "/ru/smart-components/forms/code-input/", + "/ru/smart-components/forms/color/", + "/ru/smart-components/forms/country-code/", + "/ru/smart-components/forms/datepicker/", + "/ru/smart-components/forms/file-upload/", + "/ru/smart-components/forms/image-field/", + "/ru/smart-components/forms/inputs/", + "/ru/smart-components/forms/lookup/", + "/ru/smart-components/forms/quantity/", + "/ru/smart-components/forms/radio/", + "/ru/smart-components/forms/range-slider/", + "/ru/smart-components/forms/rich-text/", + "/ru/smart-components/forms/slider/", + "/ru/smart-components/forms/switch/", + "/ru/smart-components/forms/textarea/", + "/ru/smart-components/forms/theme-generator/", + "/ru/smart-components/forms/toggle/", + "/ru/smart-components/navigation/", + "/ru/smart-components/navigation/breadcrumbs/", + "/ru/smart-components/navigation/contents/", + "/ru/smart-components/navigation/context-menu/", + "/ru/smart-components/navigation/dropdown/", + "/ru/smart-components/navigation/menu/", + "/ru/smart-components/navigation/pager/", + "/ru/smart-components/navigation/pagination/", + "/ru/smart-components/navigation/steps/", + "/ru/smart-components/navigation/tabs/", + "/ru/smart-components/navigation/tree-item/", + "/ru/smart-components/navigation/tree/", + "/ru/smart-components/overlays/", + "/ru/smart-components/overlays/drawer/", + "/ru/smart-components/overlays/modal/", + "/ru/smart-components/overlays/popover/", + "/ru/smart-components/overlays/resizer/", + "/ru/utilities/animation/", + "/ru/utilities/animation/animation-duration/", + "/ru/utilities/animation/animation-transition-delay/", + "/ru/utilities/animation/animation-transition-duration/", + "/ru/utilities/animation/animation-transition-property/", + "/ru/utilities/animation/animation-transition-timing-function/", + "/ru/utilities/animation/animation-type/", + "/ru/utilities/backdrop-filter/", + "/ru/utilities/backdrop-filter/backdrop-blur/", + "/ru/utilities/backdrop-filter/backdrop-brightness/", + "/ru/utilities/backdrop-filter/backdrop-contrast/", + "/ru/utilities/backdrop-filter/backdrop-grayscale/", + "/ru/utilities/backdrop-filter/backdrop-hue-rotate/", + "/ru/utilities/backdrop-filter/backdrop-invert/", + "/ru/utilities/backdrop-filter/backdrop-opacity/", + "/ru/utilities/backdrop-filter/backdrop-saturate/", + "/ru/utilities/backdrop-filter/backdrop-sepia/", + "/ru/utilities/background/", + "/ru/utilities/background/background-attachment/", + "/ru/utilities/background/background-clip/", + "/ru/utilities/background/background-color-brand/", + "/ru/utilities/background/background-color/", + "/ru/utilities/background/background-gradient-background/", + "/ru/utilities/background/background-gradient-stops/", + "/ru/utilities/background/background-gradient-type/", + "/ru/utilities/background/background-origin/", + "/ru/utilities/background/background-pattern/", + "/ru/utilities/background/background-position/", + "/ru/utilities/background/background-repeat/", + "/ru/utilities/background/background-size/", + "/ru/utilities/border/", + "/ru/utilities/border/border-color/", + "/ru/utilities/border/border-radius/", + "/ru/utilities/border/border-style/", + "/ru/utilities/border/border-width/", + "/ru/utilities/divider/", + "/ru/utilities/divider/divider-color/", + "/ru/utilities/divider/divider-opacity/", + "/ru/utilities/divider/divider-style/", + "/ru/utilities/divider/divider-width/", + "/ru/utilities/filters/", + "/ru/utilities/filters/filter-blur/", + "/ru/utilities/filters/filter-brightness/", + "/ru/utilities/filters/filter-contrast/", + "/ru/utilities/filters/filter-grayscale/", + "/ru/utilities/filters/filter-hue-rotate/", + "/ru/utilities/filters/filter-invert/", + "/ru/utilities/filters/filter-opacity/", + "/ru/utilities/filters/filter-saturate/", + "/ru/utilities/filters/filter-sepia/", + "/ru/utilities/filters/mix-blend-mode/", + "/ru/utilities/filters/opacity/", + "/ru/utilities/flex/", + "/ru/utilities/flex/flex-basis/", + "/ru/utilities/flex/flex-direction/", + "/ru/utilities/flex/flex-grow/", + "/ru/utilities/flex/flex-shrink/", + "/ru/utilities/flex/flex-wrap/", + "/ru/utilities/flex/flexibility/", + "/ru/utilities/forms/", + "/ru/utilities/forms/accent-color/", + "/ru/utilities/forms/appearance/", + "/ru/utilities/forms/caret-color/", + "/ru/utilities/forms/placeholder-color/", + "/ru/utilities/forms/placeholder-opacity/", + "/ru/utilities/forms/pointer-events/", + "/ru/utilities/forms/resize/", + "/ru/utilities/grid-and-flexbox-utilities/", + "/ru/utilities/grid-and-flexbox-utilities/align-content/", + "/ru/utilities/grid-and-flexbox-utilities/align-items/", + "/ru/utilities/grid-and-flexbox-utilities/align-self/", + "/ru/utilities/grid-and-flexbox-utilities/flex-align/", + "/ru/utilities/grid-and-flexbox-utilities/gap/", + "/ru/utilities/grid-and-flexbox-utilities/justify-content/", + "/ru/utilities/grid-and-flexbox-utilities/justify-items/", + "/ru/utilities/grid-and-flexbox-utilities/justify-self/", + "/ru/utilities/grid-and-flexbox-utilities/order/", + "/ru/utilities/grid-and-flexbox-utilities/place-content/", + "/ru/utilities/grid-and-flexbox-utilities/place-items/", + "/ru/utilities/grid-and-flexbox-utilities/place-self/", + "/ru/utilities/grid/", + "/ru/utilities/grid/grid-auto-columns/", + "/ru/utilities/grid/grid-auto-flow/", + "/ru/utilities/grid/grid-auto-rows/", + "/ru/utilities/grid/grid-column-end/", + "/ru/utilities/grid/grid-column-start/", + "/ru/utilities/grid/grid-column/", + "/ru/utilities/grid/grid-row-end/", + "/ru/utilities/grid/grid-row-start/", + "/ru/utilities/grid/grid-row/", + "/ru/utilities/grid/grid-template-columns/", + "/ru/utilities/grid/grid-template-rows/", + "/ru/utilities/indents/", + "/ru/utilities/indents/margin/", + "/ru/utilities/indents/padding/", + "/ru/utilities/indents/space/", + "/ru/utilities/interactivity/", + "/ru/utilities/interactivity/cursor/", + "/ru/utilities/interactivity/sr-only/", + "/ru/utilities/interactivity/touch-action/", + "/ru/utilities/interactivity/user-select/", + "/ru/utilities/interactivity/will-change/", + "/ru/utilities/layout-break/", + "/ru/utilities/layout-break/break-after/", + "/ru/utilities/layout-break/break-before/", + "/ru/utilities/layout-break/break-inside/", + "/ru/utilities/layout-break/column-gap/", + "/ru/utilities/layout-break/column/", + "/ru/utilities/layout/", + "/ru/utilities/layout/aspect-ratio/", + "/ru/utilities/layout/box-decoration-break/", + "/ru/utilities/layout/box-sizing/", + "/ru/utilities/layout/clear/", + "/ru/utilities/layout/container/", + "/ru/utilities/layout/display/", + "/ru/utilities/layout/element-position/", + "/ru/utilities/layout/float/", + "/ru/utilities/layout/isolation/", + "/ru/utilities/layout/max-container/", + "/ru/utilities/layout/overflow/", + "/ru/utilities/layout/query-container/", + "/ru/utilities/layout/query-layout/", + "/ru/utilities/layout/visibility/", + "/ru/utilities/layout/z-index/", + "/ru/utilities/links/", + "/ru/utilities/links/links-formatting/", + "/ru/utilities/mask/", + "/ru/utilities/mask/mask-clip/", + "/ru/utilities/mask/mask-composite/", + "/ru/utilities/mask/mask-mode/", + "/ru/utilities/mask/mask-origin/", + "/ru/utilities/mask/mask-position/", + "/ru/utilities/mask/mask-repeat/", + "/ru/utilities/mask/mask-size/", + "/ru/utilities/mask/mask-type/", + "/ru/utilities/objects/", + "/ru/utilities/objects/object-fit/", + "/ru/utilities/objects/object-position/", + "/ru/utilities/outline/", + "/ru/utilities/outline/outline-color/", + "/ru/utilities/outline/outline-offset/", + "/ru/utilities/outline/outline-style/", + "/ru/utilities/outline/outline-width/", + "/ru/utilities/outline/ring-inset/", + "/ru/utilities/outline/ring-opacity/", + "/ru/utilities/outline/ring/", + "/ru/utilities/overscroll/", + "/ru/utilities/overscroll/overscroll-behavior-smooth/", + "/ru/utilities/overscroll/overscroll-behavior/", + "/ru/utilities/overscroll/scroll-backdrop-color/", + "/ru/utilities/overscroll/scroll-backdrop-radius/", + "/ru/utilities/overscroll/scroll-backdrop-width/", + "/ru/utilities/overscroll/scroll-hover/", + "/ru/utilities/overscroll/scroll-margin/", + "/ru/utilities/overscroll/scroll-padding/", + "/ru/utilities/overscroll/scroll-slider-color/", + "/ru/utilities/overscroll/scroll-slider-radius/", + "/ru/utilities/overscroll/scroll-snap-align/", + "/ru/utilities/overscroll/scroll-snap-stop/", + "/ru/utilities/overscroll/scroll-snap-type/", + "/ru/utilities/overscroll/scroll-subtle/", + "/ru/utilities/overscroll/scroll/", + "/ru/utilities/print/", + "/ru/utilities/print/display-print/", + "/ru/utilities/print/display-visibility/", + "/ru/utilities/shadows/", + "/ru/utilities/shadows/drop-shadow-color/", + "/ru/utilities/shadows/drop-shadow/", + "/ru/utilities/shadows/element-color/", + "/ru/utilities/shadows/element-shadow/", + "/ru/utilities/shadows/elevation/", + "/ru/utilities/sizes/", + "/ru/utilities/sizes/height/", + "/ru/utilities/sizes/max-height/", + "/ru/utilities/sizes/max-width/", + "/ru/utilities/sizes/min-height/", + "/ru/utilities/sizes/min-width/", + "/ru/utilities/sizes/width/", + "/ru/utilities/stripes/", + "/ru/utilities/stripes/stripes-color/", + "/ru/utilities/stripes/stripes-size/", + "/ru/utilities/stripes/stripes/", + "/ru/utilities/svg/", + "/ru/utilities/svg/svg-fill-brand/", + "/ru/utilities/svg/svg-fill-color/", + "/ru/utilities/svg/svg-fill-type/", + "/ru/utilities/svg/svg-image-size/", + "/ru/utilities/svg/svg-stroke-color/", + "/ru/utilities/svg/svg-stroke-line-cap/", + "/ru/utilities/svg/svg-stroke-line-join/", + "/ru/utilities/svg/svg-stroke-width/", + "/ru/utilities/tables/", + "/ru/utilities/tables/table-border-spacing/", + "/ru/utilities/tables/table-border/", + "/ru/utilities/tables/table-frame/", + "/ru/utilities/tables/table-layout/", + "/ru/utilities/tables/tables-active-rows-and-cells/", + "/ru/utilities/tables/tables-alternating-rows-and-columns/", + "/ru/utilities/tables/tables-default-parameters/", + "/ru/utilities/text-formatting/", + "/ru/utilities/text-formatting/text-color/", + "/ru/utilities/text-formatting/text-decoration-color/", + "/ru/utilities/text-formatting/text-decoration-offset/", + "/ru/utilities/text-formatting/text-decoration-style/", + "/ru/utilities/text-formatting/text-decoration/", + "/ru/utilities/text-formatting/text-formatting-text/", + "/ru/utilities/text-formatting/text-formatting-thickness/", + "/ru/utilities/transform/", + "/ru/utilities/transform/transform-origin/", + "/ru/utilities/transform/transform-rotate/", + "/ru/utilities/transform/transform-scale/", + "/ru/utilities/transform/transform-skew/", + "/ru/utilities/transform/transform-translate/", + "/ru/utilities/typography/", + "/ru/utilities/typography/content/", + "/ru/utilities/typography/font-family/", + "/ru/utilities/typography/font-smoothing/", + "/ru/utilities/typography/font-style/", + "/ru/utilities/typography/font-variant-numeric/", + "/ru/utilities/typography/font-variant/", + "/ru/utilities/typography/font-weight/", + "/ru/utilities/typography/letter-spacing/", + "/ru/utilities/typography/line-clamp/", + "/ru/utilities/typography/line-height/", + "/ru/utilities/typography/list-style-position/", + "/ru/utilities/typography/list-style-type/", + "/ru/utilities/typography/text-align/", + "/ru/utilities/typography/text-indent/", + "/ru/utilities/typography/text-max-width/", + "/ru/utilities/typography/text-overflow/", + "/ru/utilities/typography/text-size/", + "/ru/utilities/typography/text-wrap/", + "/ru/utilities/typography/title-size/", + "/ru/utilities/typography/vertical-align/", + "/ru/utilities/typography/white-space/", + "/ru/utilities/typography/word-break/" + ] +} diff --git a/data/sf-framework.json b/data/sf-framework.json index 59a5e0c..ca842cb 100644 --- a/data/sf-framework.json +++ b/data/sf-framework.json @@ -4,58 +4,58 @@ "release": {"id":"ui-132b0863e12b","repository":"simai/ui","registryCommit":"ef3846772d453ca6df280e64d9d63f6969ee078c","coreCommit":"132b0863e12b9d5d9c9180d32b20c71f0584e7eb","smartCommit":"132b0863e12b9d5d9c9180d32b20c71f0584e7eb","registrySha256":"612c0419bac34be492f1200ae1dca4964eebd4639467bd3bd012538bc22acdfe"}, "desktopMinWidth": "60rem", "tags": [ -{"tag":"sf-alert","id":"smart.alert","title":"Alert","summary":"Persistent inline notice with semantic roles, optional actions and dismiss behavior.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"action","type":"string","default":"action","description":"Stable action value emitted in sf-alert-action.","values":[],"examples":[],"deprecated":null},{"name":"action-text","type":"string","default":"","description":"Visible label of the primary optional action.","values":[],"examples":[],"deprecated":null},{"name":"appearance","type":"string","default":"default","description":"How the alert looks: a filled surface, an outline, or flat.","values":["default","outlined","flat"],"examples":[],"deprecated":null},{"name":"closable","type":"boolean","default":"false","description":"Render an explicitly named close action.","values":[],"examples":[],"deprecated":null},{"name":"close-label","type":"string","default":"","description":"Localized accessible name of the close action. Empty: the text of the page's language (\"Close alert\" in English).","values":[],"examples":[],"deprecated":null},{"name":"icon","type":"string","default":"","description":"Optional icon override. Use none to hide the semantic icon.","values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"secondary-action","type":"string","default":"secondary","description":"Stable secondary action value emitted in sf-alert-action.","values":[],"examples":[],"deprecated":null},{"name":"secondary-action-text","type":"string","default":"","description":"Visible label of the secondary optional action.","values":[],"examples":[],"deprecated":null},{"name":"status","type":"string","default":"neutral","description":"What the alert reports, in the shared status vocabulary. The words this component used before — clear and danger — are still accepted and mean neutral and error.","values":["neutral","info","success","warning","error"],"examples":[],"deprecated":null},{"name":"supporting-text","type":"string","default":"","description":"Supporting body text at the normal text size.","values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"title","type":"string","default":"","description":"Short message heading.","values":[],"examples":[],"deprecated":null},{"name":"type","type":"string","default":"neutral","description":"Legacy name for status, still honoured. See contracts/public-api-axes.json.","values":["neutral","info","success","warning","error"],"examples":[],"deprecated":null},{"name":"variant","type":"string","default":"default","description":"Legacy name for appearance, still honoured. See contracts/public-api-axes.json.","values":["default","outlined","flat"],"examples":[],"deprecated":null}]}, -{"tag":"sf-avatar","id":"smart.avatar","title":"Avatar","summary":"Shows a person or organisation as a photo or initials, with an optional availability or verification mark. The default and label templates render a native button whose aria-label names its action; the card template is static and adds a title, description and meta line.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"aria-label","type":"string","default":"","description":"Empty: the text of the page's language (\"Avatar\" in English).","values":[],"examples":[],"deprecated":null},{"name":"card-variant","type":"string","default":"square","description":null,"values":["square","portrait"],"examples":[],"deprecated":null},{"name":"description","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"image-alt","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"image-url","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"line","type":"string","default":"","description":"Takes the text line of this form size instead of a control height, for an avatar beside a label in a row or a table cell.","values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"meta","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"meta-icon","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"no-wrap","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"shape","type":"string","default":"circle","description":null,"values":["circle","square"],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":null,"values":["1/4","1/3","1/2","1","2","3"],"examples":[],"deprecated":null},{"name":"status","type":"string","default":"none","description":null,"values":["none","online","offline","company","verified"],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"text","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"title","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-avatars","id":"smart.avatars","title":"Avatars","summary":"Ready combinations of avatars: a person with a source, a stacked group with a remainder, an avatar with two lines of label, and a profile avatar with a verified badge. Drawn from sf-avatar's parts; for a single avatar with a name or a card use sf-avatar.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"active","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"avatar-size","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"avatar-url","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"avatars","type":"array","default":"[]","description":null,"values":[],"examples":[],"deprecated":null},{"name":"avatars-more","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"check","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"data","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"image-url","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"label-second-text","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"label-size","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"label-text","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"name","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"profile-size","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"property","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"round-size","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"source","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-badge","id":"smart.badges","title":"Badges","summary":"A short non-interactive label for a status, category, version or count beside an object, drawn in a size, appearance and colour role or status. It adds no keyboard or pointer behaviour.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"appearance","type":"string","default":"main","description":"How the badge looks: the most visible fill, a calmer tonal one, or an outline.","values":["main","tonal","outline"],"examples":[],"deprecated":null},{"name":"aria-label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"icon","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"icon-end","type":"string","default":"null","description":null,"values":[],"examples":[],"deprecated":null},{"name":"icon-left","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"icon-position","type":"string","default":"start","description":null,"values":["start","end"],"examples":[],"deprecated":null},{"name":"icon-right","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"icon-start","type":"string","default":"null","description":null,"values":[],"examples":[],"deprecated":null},{"name":"line","type":"string","default":"","description":"Takes the text line of this form size, for a table cell or a row of fields, so the row keeps its control height.","values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"scheme","type":"string","default":"neutral","description":"Which semantic colour the badge takes. A status word given here still works and reaches the status axis.","values":["neutral","primary","secondary","tertiary","on-surface"],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1/3","description":null,"values":["1/3","1/2","1"],"examples":[],"deprecated":null},{"name":"status","type":"string","default":"","description":"What the badge reports, in the shared status vocabulary. The word this component used before, danger, is still accepted and means error.","values":["info","success","warning","error"],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"text","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"type","type":"string","default":"main","description":"Legacy name for appearance, still honoured. See contracts/public-api-axes.json.","values":["main","tonal","outline"],"examples":[],"deprecated":null}]}, -{"tag":"sf-breadcrumbs","id":"smart.breadcrumbs","title":"Breadcrumbs","summary":"Shows the current page's place in a hierarchy as a trail of native links built from items, the items attribute or sf-breadcrumbs-item children. A long trail collapses its middle into an ellipsis button (max-items, default 4) that expands in place.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"aria-label","type":"string","default":"","description":"Empty: the text of the page's language (\"Breadcrumb\" in English).","values":[],"examples":[],"deprecated":null},{"name":"container-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"current-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"expand-label","type":"string","default":"","description":"Empty: the text of the page's language (\"Show hidden breadcrumbs\" in English).","values":[],"examples":[],"deprecated":null},{"name":"expand-on-ellipsis","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"home-icon","type":"string","default":"home","description":null,"values":[],"examples":[],"deprecated":null},{"name":"home-label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"item-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"items","type":"string","default":"[]","description":null,"values":[],"examples":[],"deprecated":null},{"name":"link-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"max-items","type":"number","default":"4","description":null,"values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"separator-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"separator-icon","type":"string","default":"chevron_right","description":null,"values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-button","id":"smart.buttons","title":"Buttons","summary":"A native button with Framework presentation: size, appearance, colour role or status, optional start and end icons, spacing and radius. loading sets aria-busy and disables it against repeated activation.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"appearance","type":"string","default":"default","description":"How the button looks. Surface reads the neutral alpha ramp: a faint fill and a border. ghost is the link appearance under its old name (compat until 2026-12-01).","values":["default","tonal","outline","link","surface","ghost"],"examples":[],"deprecated":null},{"name":"aria-label","type":"string","default":"","description":"Accessible label for icon-only or custom buttons.","values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":"Disabled state flag.","values":[],"examples":[],"deprecated":null},{"name":"icon","type":"string","default":"","description":"Single icon name shortcut.","values":[],"examples":["home","settings","search","edit","check","close"],"deprecated":null},{"name":"icon-end","type":"string","default":"","description":"Logical end icon name.","values":[],"examples":["home","settings","search","edit","check","close"],"deprecated":null},{"name":"icon-left","type":"string","default":"","description":"Compatibility alias for icon-start.","values":[],"examples":["home","settings","search","edit","check","close"],"deprecated":null},{"name":"icon-position","type":"string","default":"start","description":"Placement for the single icon shortcut.","values":["start","end"],"examples":[],"deprecated":null},{"name":"icon-right","type":"string","default":"","description":"Compatibility alias for icon-end.","values":[],"examples":["home","settings","search","edit","check","close"],"deprecated":null},{"name":"icon-start","type":"string","default":"","description":"Logical start icon name.","values":[],"examples":["home","settings","search","edit","check","close"],"deprecated":null},{"name":"loading","type":"boolean","default":"false","description":"Loading state: the spinner at the icon's size in place of the start icon (else the end icon); without an icon it lies over the label, which keeps its place, so the width does not change. Sets aria-busy and disables the native button.","values":[],"examples":[],"deprecated":null},{"name":"native-type","type":"string","default":"button","description":"Native button type attribute.","values":["button","submit","reset"],"examples":[],"deprecated":null},{"name":"radius","type":"string","default":"","description":"Border radius modifier.","values":["default","square","rounded"],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":"Extra classes applied to the inner button element.","values":[],"examples":[],"deprecated":null},{"name":"scheme","type":"string","default":"primary","description":"Which colour family the control takes. What the control is about is the status axis; a status set there wins over this.","values":["primary","secondary","on-surface"],"examples":[],"deprecated":null},{"name":"segment","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":"Button size token.","values":["1/3","1/2","1","2","3"],"examples":[],"deprecated":null},{"name":"spacing","type":"string","default":"normal","description":"Semantic internal spacing profile.","values":["compact","normal","comfortable","spacious"],"examples":[],"deprecated":null},{"name":"status","type":"string","default":"","description":"What the control is about, in the shared status vocabulary. The only one a control paints today is `error`, the destructive one: a control that deletes, discards or cannot be undone.","values":["error"],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":"Template variant name for SfBaseElement external templates.","values":[],"examples":[],"deprecated":null},{"name":"text","type":"string","default":"","description":"Visible button text when no text slot is provided.","values":[],"examples":[],"deprecated":null},{"name":"text-position","type":"string","default":"center","description":null,"values":[],"examples":[],"deprecated":null},{"name":"tightness","type":"string","default":"","description":"Compatibility alias for spacing.","values":["low","high","highest"],"examples":[],"deprecated":null},{"name":"type","type":"string","default":"default","description":"Legacy name for appearance, still honoured. See contracts/public-api-axes.json.","values":["default","tonal","outline","link","surface","ghost"],"examples":[],"deprecated":null}]}, -{"tag":"sf-button-group","id":"smart.button-group","title":"Button group","summary":"A controlled single-selection group built from SF5 buttons.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"appearance","type":"string","default":"default","description":"How the group looks. default joins outlined buttons into one perimeter; segmented draws a sunken track with borderless segments and a plate under the selected one. The selection model, keyboard and events are the same.","values":["default","segmented"],"examples":[],"deprecated":null},{"name":"aria-label","type":"string","default":"","description":"Accessible name for the group.","values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":"Disables the whole group.","values":[],"examples":[],"deprecated":null},{"name":"full-width","type":"boolean","default":"false","description":"In the segmented appearance, the track fills its container and the segments share the width equally.","values":[],"examples":[],"deprecated":null},{"name":"items","type":"array","default":"[]","description":"Selectable items with stable value, label, icon, count, icon-only, disabled and loading fields.","values":[],"examples":["[{\"value\":\"list\",\"label\":\"List\",\"icon\":\"list\"},{\"value\":\"grid\",\"label\":\"Grid\",\"icon\":\"grid_view\"}]","[{\"value\":\"all\",\"label\":\"Все\",\"count\":24},{\"value\":\"light\",\"label\":\"Светлые\",\"count\":17},{\"value\":\"dark\",\"label\":\"Тёмные\",\"count\":7}]"],"deprecated":null},{"name":"name","type":"string","default":"","description":"Native form field name: the group submits its value with its form, a form reset restores the initial value, and a disabled group is left out.","values":[],"examples":[],"deprecated":null},{"name":"orientation","type":"string","default":"horizontal","description":"Layout and keyboard navigation orientation.","values":["horizontal","vertical"],"examples":[],"deprecated":null},{"name":"plate","type":"string","default":"scheme","description":"The selected segment's plate in the segmented appearance: the scheme's fill, or a raised neutral surface with its shadow.","values":["scheme","raised"],"examples":[],"deprecated":null},{"name":"radius","type":"string","default":"","description":"Corner radius, as on sf-button: empty is the UI radius. In the segmented appearance the plate, a button-sized segment, takes the radius a button of that value has, and the track is it plus the padding (rounded: both pills).","values":["default","square","rounded"],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":"Extra classes applied to the group root.","values":[],"examples":[],"deprecated":null},{"name":"scheme","type":"string","default":"primary","description":"Color scheme for the selected button, and for the selected plate in the segmented appearance.","values":["primary","secondary","on-surface"],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":"Shared button size token.","values":["1/3","1/2","1","2","3"],"examples":[],"deprecated":null},{"name":"spacing","type":"string","default":"normal","description":"Shared semantic internal spacing profile.","values":["compact","normal","comfortable","spacious"],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":"Template variant name.","values":[],"examples":[],"deprecated":null},{"name":"theme-switch","type":"boolean","default":"false","description":"A ready theme switch: the group draws its own three icon-only items (system, light, dark) named in the page language, selects SF.Loader's theme preference and follows sf-theme-change, and a choice calls SF.Loader.setTheme. items is ignored.","values":[],"examples":[],"deprecated":null},{"name":"tightness","type":"string","default":"","description":"Compatibility alias for spacing.","values":["low","high","highest"],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"","description":"Currently selected item value.","values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-checkbox","id":"smart.checkbox","title":"Checkbox","summary":"A native checkbox with a label, Framework presentation and checked, indeterminate and disabled states kept in step between the host attributes and the inner input.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"aria-label","type":"string","default":"","description":"Accessible name for a checkbox rendered without a visible label.","values":[],"examples":[],"deprecated":null},{"name":"checked","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"description","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"error","type":"boolean","default":"false","description":"Invalid state; the native input publishes aria-invalid.","values":[],"examples":[],"deprecated":null},{"name":"help","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"indeterminate","type":"boolean","default":"false","description":"Mixed visual state for a checkbox that summarizes related options.","values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"name","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"position","type":"string","default":"start","description":"Logical placement of the indicator relative to its text.","values":["start","end"],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":"Checkbox size token.","values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-close","id":"smart.close","title":"Close","summary":"The decorative cross glyph of a close action, sized on the control ladder. It is aria-hidden and never focusable; the containing native button owns the action and its name.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1/3","description":"Decorative close-glyph size token.","values":["1/4","1/3","1/2","1","2","3","4","5","6","7"],"examples":[],"deprecated":null}]}, -{"tag":"sf-color","id":"smart.color","title":"Color","summary":"A colour control: a swatch that opens the platform picker, the colours a product already has as presets, and a way back to an inherited colour. Built as a general part because a colour is set in a theme, in a site look, on a label and on a chart series, not only on a record.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"appearance","type":"string","default":"bordered","description":"How the swatch is bounded.","values":["bordered","outlined","plain"],"examples":[],"deprecated":null},{"name":"choose-label","type":"string","default":"","description":"The words on the swatch. Unset, the component answers in the page's language (\"Choose a colour\" in English).","values":[],"examples":[],"deprecated":null},{"name":"clear-label","type":"string","default":"","description":"The words on the control that returns to the inherited colour. Unset, it follows the page's language.","values":[],"examples":[],"deprecated":null},{"name":"clearable","type":"boolean","default":"false","description":"Whether a chosen colour can be returned to the inherited one.","values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"inherited-text","type":"string","default":"","description":"What is read in place of a value while nothing is chosen. Unset, it follows the page's language.","values":[],"examples":[],"deprecated":null},{"name":"inherited-value","type":"string","default":"","description":"The colour that applies while nothing is chosen. Shown as inherited rather than drawn as the value: a control that drew it as the value would make «not set» and «set to the same colour» look identical, and only one of them follows the theme when the theme changes.","values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":"The accessible name of the control.","values":[],"examples":[],"deprecated":null},{"name":"name","type":"string","default":"","description":"The form name. A hidden input carries the value under it, empty while the inherited colour applies.","values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":"The size ladder step, so a colour beside a text field lines up with it.","values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"swatches","type":"string","default":"","description":"The colours a product already has, comma separated, each #hex or #hex|Name; a name may hold spaces. A piece without a name may list several colours by spaces. A person picks the brand colour rather than matching a hex by eye.","values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":"Which template draws it.","values":[],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"","description":"The colour, as #rgb, #rrggbb or #rrggbbaa. Empty means nothing is chosen and the inherited colour applies.","values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-composition-overlay","id":"smart.composition-overlay","title":"Composition overlay","summary":"Editor chrome over a rendered Composition Document: frames, labels, badges, action toolbar, insertion places, drag and keyboard moves and a keyboard tree, without changing the canvas HTML.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"accepts","type":"string","default":"","description":"sf-sortable groups whose items may be dropped on insertion places","values":[],"examples":[],"deprecated":null},{"name":"for","type":"string","default":"","description":"id of the canvas element that holds SF.Composition.render output","values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-context-menu","id":"smart.context-menu","title":"Context Menu","summary":"The Framework's action menu: data entries with icon, caption, value, shortcut, check, submenu, separator and heading, opened by openFor() into the top layer, anchored, with keyboard, typeahead and focus return. A host may still render its own items and own the lifecycle.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"active-tab","type":"string","default":"","description":"The chosen tab's id or index; the host renders that tab's rows into the content slot.","values":[],"examples":[],"deprecated":null},{"name":"aria-label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"closable","type":"boolean","default":"false","description":"A close button at the end of the panel's head.","values":[],"examples":[],"deprecated":null},{"name":"content-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"entries","type":"array","default":"[]","description":"The menu as data (set as a property, or JSON in the attribute). See item_contract. When present, it replaces items and the content slot.","values":[],"examples":[],"deprecated":null},{"name":"items","type":"array","default":"[]","description":null,"values":[],"examples":[],"deprecated":null},{"name":"popup","type":"boolean","default":"false","description":"Not drawn until opened through openFor(). A menu without it is drawn in place, as before.","values":[],"examples":[],"deprecated":null},{"name":"position","type":"string","default":"","description":"Deprecated: a menu has no tail since 1.3.0 (owner, 2026-10-12); the value is kept for its class and draws nothing.","values":["inline-start","inline-start-top","inline-start-bottom","inline-end","inline-end-top","inline-end-bottom","top","top-inline-start","top-inline-end","bottom","bottom-inline-start","bottom-inline-end","start","end","top-start","top-end","bottom-start","bottom-end","left","left-top","left-bottom","right","right-top","right-bottom","top-left","top-center","top-right","bottom-left","bottom-center","bottom-right","left-start","left-end","right-start","right-end","inline-start-start","inline-start-end","inline-end-start","inline-end-end"],"examples":[],"deprecated":{"since":"1.3.0","replacement":"openFor(anchor, {side, align}) places the menu; no tail is drawn"}},{"name":"role","type":"string","default":"menu","description":null,"values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"search","type":"object","default":"null","description":"{placeholder, empty, remote}: a search field above the rows (set as a property). Local by default; with remote: true the menu raises sf-context-menu-search {query} and shows the entries the host sets. A submenu entry passes it with `search`.","values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1/2","description":"The menu's size: rows as tall as a field of that size (32px at 1/2, 40px at 1), its text, insets, search and footer. A submenu takes its parent's size.","values":["1/2","1"],"examples":[],"deprecated":null},{"name":"tabs","type":"string | array","default":"","description":"A panel with tabs: labels separated by |, or [{id, label}] as a property. The head (tabs and the close button) and the footer never scroll, the body does, and the panel keeps a fixed width (a ladder step, or width) whatever a tab holds.","values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"text","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"tooltip","type":"boolean","default":"true","description":"Deprecated: a menu has no tail since 1.3.0 (owner, 2026-10-12); the value is kept for its class and draws nothing.","values":[],"examples":[],"deprecated":{"since":"1.3.0","replacement":"none: a menu has no tail"}},{"name":"width","type":"string","default":"content","description":"How wide openFor() opens the menu: content (its longest line, between --sf-context-menu--min-inline-size and --sf-context-menu--max-inline-size), trigger (exactly the control that opened it; a long line ends in an ellipsis) or a CSS length. openFor(anchor, {width}) overrides it.","values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-copy-button","id":"smart.copy-button","title":"Copy button","summary":"Copies a value or a target's text, confirms with a check and a polite announcement, and selects the text for Ctrl+C when the browser refuses the clipboard.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"appearance","type":"string","default":"link","description":null,"values":["link","ghost","outline","tonal"],"examples":[],"deprecated":null},{"name":"duration","type":"string","default":"2000","description":"Milliseconds the result stays.","values":[],"examples":[],"deprecated":null},{"name":"error-text","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"icon","type":"string","default":"content_copy","description":"The resting glyph: link, key, ...","values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":"The accessible name, saying what is copied («Скопировать команду»); «Копировать» / Copy by default.","values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1/2","description":null,"values":["1/3","1/2","1","2"],"examples":[],"deprecated":null},{"name":"success-icon","type":"string","default":"check","description":null,"values":[],"examples":[],"deprecated":null},{"name":"success-text","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"target","type":"string","default":"","description":"#id of an input (its value) or an element (its text; a numbered code block without its numbers). value and target together are an error.","values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"text","type":"string","default":"","description":"A visible label; empty draws an icon-only button.","values":[],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"","description":"The text to copy.","values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-country-code","id":"smart.country-code","title":"Country Code","summary":"A telephone field with a country picker: a button opens a searchable listbox of countries, and the chosen country sets the dial code, flag and, optionally, the input mask of the native tel input.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"dial-code","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"flag-base","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"form","type":"string","default":"","description":"Optional id of the native owning form when the field is outside it.","values":[],"examples":[],"deprecated":null},{"name":"hint","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"iso2","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"lazy-flags","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"locale","type":"string","default":"","description":"Language of the country names and the field's own words: ru or en. When not set it follows the page: Russian on a Russian page, English otherwise.","values":[],"examples":[],"deprecated":null},{"name":"mask-pattern","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"mask-placeholder-char","type":"string","default":"_","description":null,"values":[],"examples":[],"deprecated":null},{"name":"mask-style","type":"string","default":"native","description":null,"values":[],"examples":[],"deprecated":null},{"name":"max-items","type":"number","default":"0","description":null,"values":[],"examples":[],"deprecated":null},{"name":"multi-country","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"name","type":"string","default":"","description":"Native input name used by FormData and form submission.","values":[],"examples":[],"deprecated":null},{"name":"open","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"placeholder","type":"string","default":"+7(___)___-__-__","description":null,"values":[],"examples":[],"deprecated":null},{"name":"required","type":"boolean","default":"false","description":"Native required phone input; the country prefix alone does not satisfy the requirement.","values":[],"examples":[],"deprecated":null},{"name":"show-code","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"show-mask-placeholder","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":null,"values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"use-country-masks","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"use-mask","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-datepicker","id":"smart.datepicker","title":"Datepicker","summary":"Accessible date and date-range picker with popup and inline presentation, calendar navigation and host-owned values.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"close-on-select","type":"boolean","default":"true","description":"Close the panel once a date (or a range end) is chosen.","values":[],"examples":[],"deprecated":null},{"name":"context","type":"string","default":"","description":"Which grid the panel opens on: days (empty), month or year.","values":["month","year"],"examples":[],"deprecated":null},{"name":"date","type":"string","default":"","description":"The ISO date (yyyy-mm-dd) chosen; value is read when date is absent.","values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":"Disable the field and the panel.","values":[],"examples":[],"deprecated":null},{"name":"end-value","type":"string","default":"","description":"Range only: the ISO end date.","values":[],"examples":[],"deprecated":null},{"name":"format","type":"string","default":"DD.MM.YYYY","description":"How the date is shown in the field, e.g. DD.MM.YYYY. The value stays ISO.","values":[],"examples":[],"deprecated":null},{"name":"icon-start","type":"string","default":"calendar_today","description":"The icon at the start of the field; the canonical name for left-icon.","values":[],"examples":[],"deprecated":null},{"name":"input","type":"boolean","default":"true","description":"Draw the text field; without it only the panel is drawn.","values":[],"examples":[],"deprecated":null},{"name":"input-name","type":"string","default":"","description":"The form field name of the value; wins over name.","values":[],"examples":[],"deprecated":null},{"name":"input-root-class","type":"string","default":"","description":"Classes added to the field's root.","values":[],"examples":[],"deprecated":null},{"name":"input-size","type":"string","default":"1","description":"Legacy name for size, still honoured; size wins when both are set. See contracts/public-api-axes.json.","values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"input-type","type":"string","default":"bordered","description":"The field's appearance (bordered by default), as on sf-inputs.","values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":"The field's visible label.","values":[],"examples":[],"deprecated":null},{"name":"left-icon","type":"string","default":"calendar_today","description":"Legacy name for icon-start, still honoured; icon-start wins when both are set.","values":[],"examples":[],"deprecated":null},{"name":"locale","type":"string","default":"","description":"The language of month and day names; defaults to the page language.","values":[],"examples":[],"deprecated":null},{"name":"mask","type":"boolean","default":"false","description":"Mask what can be typed in the field to the format.","values":[],"examples":[],"deprecated":null},{"name":"mask-lazy","type":"boolean","default":"false","description":"Show the mask's placeholder characters only as they are typed.","values":[],"examples":[],"deprecated":null},{"name":"mask-options","type":"string","default":"","description":"Further mask options as JSON, passed to the field's mask.","values":[],"examples":[],"deprecated":null},{"name":"mask-pattern","type":"string","default":"00.00.0000","description":"Input mask; when not set it is derived from format, so the default format DD.MM.YYYY gives 00.00.0000.","values":[],"examples":[],"deprecated":null},{"name":"mask-placeholder-char","type":"string","default":"_","description":"The character that stands for a position not yet typed.","values":[],"examples":[],"deprecated":null},{"name":"max-date","type":"string","default":"","description":"The latest ISO date that can be chosen; later days are disabled.","values":[],"examples":[],"deprecated":null},{"name":"min-date","type":"string","default":"","description":"The earliest ISO date that can be chosen; earlier days are disabled.","values":[],"examples":[],"deprecated":null},{"name":"month","type":"number","default":"null","description":"The month shown when the panel opens, 0-11; defaults to the chosen date's month, else the current one.","values":[],"examples":[],"deprecated":null},{"name":"name","type":"string","default":"","description":"The form field name of the value. input-name is the same and wins when both are set.","values":[],"examples":[],"deprecated":null},{"name":"open","type":"boolean","default":"false","description":"Whether the panel is open.","values":[],"examples":[],"deprecated":null},{"name":"placeholder","type":"string","default":"","description":"The field's placeholder text.","values":[],"examples":[],"deprecated":null},{"name":"portal","type":"boolean","default":"true","description":"Draw the panel at the end of the document so no clipping ancestor cuts it.","values":[],"examples":[],"deprecated":null},{"name":"preset","type":"string","default":"","description":"The chosen quick range's id. Set by a host it wins over start-value and end-value, and a relative one is resolved against today in the person's time zone when drawn; nothing is emitted for it.","values":[],"examples":[],"deprecated":null},{"name":"presets","type":"string | array","default":"","description":"Range only: quick ranges beside the grid. Built-in ids, comma separated (today, yesterday, last-7-days, last-30-days, this-week, this-month, last-month), or as a property [{id, label, relative} | {id, label, range: [from, to]}]. Clamped to min-date and max-date; a range with nothing left is disabled.","values":[],"examples":[],"deprecated":null},{"name":"range","type":"boolean","default":"false","description":"Pick a start and an end instead of one date.","values":[],"examples":[],"deprecated":null},{"name":"required","type":"boolean","default":"false","description":"Mark the field required in its form.","values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":"Classes added to the component's root.","values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":"Form size of the field.","values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"start-value","type":"string","default":"","description":"Range only: the ISO start date.","values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":"Which template draws it.","values":[],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"","description":"The ISO date (yyyy-mm-dd). As a property, [start, end] for a range; the attribute is the same as date.","values":[],"examples":[],"deprecated":null},{"name":"week-start","type":"number","default":"null","description":"The first day of the week, 0 Sunday to 6 Saturday (1 Monday). Without the attribute it follows the page's language (ru: Monday, en-US: Sunday, ar-EG: Saturday).","values":[],"examples":[],"deprecated":null},{"name":"year","type":"number","default":"null","description":"The year shown when the panel opens; defaults to the chosen date's year, else the current one.","values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-download-file","id":"smart.download-file","title":"Download File","summary":"Native file download or application-owned file preparation action.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"aria-label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":"Render a disabled button with no live destination.","values":[],"examples":[],"deprecated":null},{"name":"download","type":"boolean","default":"false","description":"Apply native download semantics to an anchor destination.","values":[],"examples":[],"deprecated":null},{"name":"file-name","type":"string","default":"File.pdf","description":"Visible filename and default native download name.","values":[],"examples":[],"deprecated":null},{"name":"file-size","type":"string","default":"","description":"Known human-readable size. Pass it when available to avoid discovery.","values":[],"examples":[],"deprecated":null},{"name":"href","type":"string","default":"","description":"Real resource destination; renders a native anchor when enabled.","values":[],"examples":[],"deprecated":null},{"name":"icon","type":"string","default":"download","description":"Decorative icon name.","values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":"Existing compact-to-prominent component size scale.","values":["1/3","1/2","1","2","3"],"examples":[],"deprecated":null},{"name":"target","type":"string","default":"_blank","description":null,"values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-drawer","id":"smart.drawer","title":"Drawer","summary":"Workspace side panel that keeps the page usable: docked column or modeless panel. Modal side panels belong to sf-modal; the modal Drawer mode is deprecated.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"body-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"close-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"close-label","type":"string","default":"","description":"Empty: the text of the page's language (\"Close drawer\" in English).","values":[],"examples":[],"deprecated":null},{"name":"close-on-esc","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"close-on-overlay","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"close-placement","type":"string","default":"inside","description":null,"values":["inside","outside"],"examples":[],"deprecated":null},{"name":"docked","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"gutter","type":"string","default":"","description":"The inline gutter the head and the body share, as a length (for example var(--sf-space-3)), so the title and the content start on one axis. Empty: the drawer's own, space-1. A theme may set --sf-drawer-gutter instead.","values":[],"examples":[],"deprecated":null},{"name":"header-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"modal","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"open","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"overlay","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"overlay-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"panel-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"panel-style","type":"string","default":"","description":"Declarations set on the panel itself, for the custom properties it reads -- its background, radius, shadow. A consumer painting its content a different colour than the panel leaves the head and the gutters in the other one.","values":[],"examples":[],"deprecated":null},{"name":"placement","type":"string","default":"right","description":null,"values":["left","right","inline-start","inline-end"],"examples":[],"deprecated":null},{"name":"preserve-scroll-gap","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"show-close","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":null,"values":["1/2","1","2","full"],"examples":[],"deprecated":null},{"name":"stack-offset","type":"string","default":"","description":"How much of each drawer below shows past the one above it at the same edge, as a length (for example var(--sf-space-4)). A drawer stands depth × offset in from its edge, where depth counts the open, undocked drawers below it at that edge. Empty: drawers lie flush.","values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"title","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"width","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"z-index","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-dropdown","id":"smart.dropdown","title":"Dropdown","summary":"Accessible single or multiple selection control with searchable options and optional portal projection.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"appearance","type":"string","default":"outlined","description":"How the dropdown looks: a filled field or an outlined one.","values":["filled","outlined"],"examples":[],"deprecated":null},{"name":"aria-label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"columns","type":"string","default":"6","description":"How many options a row holds in the grid layout. Ignored in a list.","values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"layout","type":"string","default":"list","description":"How the options are laid out. A list is one option a row; a grid puts several in a row, which is the only way a hundred glyphs can be looked at -- a column of them is a column nobody scrolls to the end of. In a grid an option shows its picture and keeps its text as the name a search reads and a pointer sees.","values":["list","grid"],"examples":[],"deprecated":null},{"name":"mode","type":"string","default":"select","description":null,"values":["tag","select"],"examples":[],"deprecated":null},{"name":"multiple","type":"boolean","default":"false","description":"Allow several values while preserving their serialized selection order. Tag mode is multiple by default.","values":[],"examples":[],"deprecated":null},{"name":"name","type":"string","default":"","description":"Native form field name for the selected machine value.","values":[],"examples":[],"deprecated":null},{"name":"options","type":"array","default":"[]","description":"Options given as data instead of as sf-list-item children: [{text, value, type?, size?, icon?, selected?, disabled?, colorClass?, avatarImageUrl?, avatarTitle?, ariaLabel?, group?}]. A string or a number is taken as both the label and the value. A parent that renders this dropdown from a template passes its options this way, because capturing child elements means removing them, and the parent can then no longer put a changed list back. Options carrying the same `group`, one after another, are drawn under one heading, so a long list says where each stretch of it comes from instead of repeating that in every row.","values":[],"examples":[],"deprecated":null},{"name":"placeholder","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"portal","type":"boolean","default":"true","description":"Anchor the popup with the shared Framework positioning (SF.Position): native top layer, flip, shift and viewport-limited height. On by default; portal=\"false\" keeps the in-flow list.","values":[],"examples":[],"deprecated":null},{"name":"required","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"search","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"search-placeholder","type":"string","default":"","description":"Empty: the text of the page's language (\"Search\" in English).","values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":null,"values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"type","type":"string","default":"outlined","description":"Legacy name for appearance, still honoured. See contracts/public-api-axes.json.","values":["filled","outlined"],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"","description":"Selected machine value, or a comma-separated list of values for multiple selection.","values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-empty-state","id":"smart.empty-state","title":"Empty state","summary":"What a list, a panel or a page says when it has nothing to show: no data, nothing found, no access or an error, with an icon, a real heading, a sentence and actions.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"heading-level","type":"string","default":"3","description":"The title's outline level; its look follows the size.","values":["2","3","4","5","6"],"examples":[],"deprecated":null},{"name":"icon","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"kind","type":"string","default":"no-data","description":"The reason, which picks the default icon, title and text, and for error a «Повторить» action.","values":["no-data","nothing-found","no-access","error"],"examples":[],"deprecated":null},{"name":"layout","type":"string","default":"block","description":"inline: one line for a list inside a menu, a dropdown or a search -- a small icon, the words and at most one link action, no heading.","values":["block","inline"],"examples":[],"deprecated":null},{"name":"live","type":"string","default":"auto","description":"auto: nothing-found and error are a polite status, the others say nothing; alert: an error the person caused; off: the host announces it.","values":["auto","alert","off"],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":"1/3 is always the inline form; 1/2 inside a table or panel, 2 for a whole page: the icon, title role, text and gaps follow.","values":["1/3","1/2","1","2"],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"text","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"title","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-file-preview","id":"smart.file-preview","title":"File Preview","summary":"Accessible Smart projection of the ordinary File Preview row.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"actions","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"aria-label","type":"string","default":"","description":"Empty: the text of the page's language (\"File\" in English).","values":[],"examples":[],"deprecated":null},{"name":"avatar-size","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"compact","type":"boolean","default":"false","description":"Only the leading visual, as tall as a list row's line: the image, or the file's extension in a tile. For a file in a table cell.","values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"download","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"download-action","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"download-label","type":"string","default":"","description":"Empty: the text of the page's language (\"Download file\" in English).","values":[],"examples":[],"deprecated":null},{"name":"file-name","type":"string","default":"File","description":null,"values":[],"examples":[],"deprecated":null},{"name":"file-size","type":"string","default":"","description":"The file's size as text, for example 12 KB.","values":[],"examples":[],"deprecated":null},{"name":"href","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"icon","type":"string","default":"description","description":null,"values":[],"examples":[],"deprecated":null},{"name":"image-url","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"kind","type":"string","default":"auto","description":"What the preview shows: an icon, the image itself, or whichever suits the file.","values":["auto","icon","image"],"examples":[],"deprecated":null},{"name":"mime-type","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"name","type":"string","default":"File","description":null,"values":[],"examples":[],"deprecated":null},{"name":"open","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":{"since":"1.0.0","replacement":null}},{"name":"remove-action","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"remove-label","type":"string","default":"","description":"Empty: the text of the page's language (\"Remove file\" in English).","values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"","description":"Legacy name for file-size: the file's own size as text (\"12 KB\"), not the size ladder. Still honoured; pass file-size.","values":[],"examples":[],"deprecated":null},{"name":"surface","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"target","type":"string","default":"_blank","description":null,"values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"type","type":"string","default":"auto","description":"Legacy name for kind, still honoured. See contracts/public-api-axes.json.","values":["auto","icon","image"],"examples":[],"deprecated":null}]}, -{"tag":"sf-file-upload","id":"smart.file-upload","title":"File Upload","summary":"A drop area that opens the platform file dialog or takes dropped files, filtered by accept, and lists each file with its upload progress, an error with a retry, and removal. The host uploads; the component shows the state the host sets.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"accept","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"aria-label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"formats","type":"string","default":"","description":"Formats line shown under the action. When not set it is derived from accept, and is empty when neither is given: the component names no formats it cannot know.","values":[],"examples":[],"deprecated":null},{"name":"icon","type":"string","default":"upload_file","description":null,"values":[],"examples":[],"deprecated":null},{"name":"link-text","type":"string","default":"","description":"Empty: the text of the page's language (\"Click to upload\" in English).","values":[],"examples":[],"deprecated":null},{"name":"multiple","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":null,"values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"supporting-text","type":"string","default":"","description":"Supporting line; falls back to formats.","values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"text","type":"string","default":"or drag and drop","description":null,"values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-gallery","id":"smart.gallery","title":"Gallery","summary":"An ordered media collection shown in an inline Slider, with an optional Modal lightbox holding a second Slider. The gallery owns the one-based current slide and keeps both views on it.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"arrows","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"blur","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"blur-type","type":"string","default":"medium","description":null,"values":["none","small","medium","large"],"examples":[],"deprecated":null},{"name":"body-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"button-size","type":"string","default":"1","description":null,"values":[],"examples":[],"deprecated":null},{"name":"button-type","type":"string","default":"primary","description":null,"values":[],"examples":[],"deprecated":null},{"name":"close-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"close-on-esc","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"close-on-overlay","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"content-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"current","type":"number","default":"1","description":null,"values":[],"examples":[],"deprecated":null},{"name":"dots","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"dots-size","type":"string","default":"2","description":null,"values":[],"examples":[],"deprecated":null},{"name":"dots-type","type":"string","default":"primary-dark","description":null,"values":[],"examples":[],"deprecated":null},{"name":"footer-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"fullscreen","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"header-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"height","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"inline","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"inline-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"lightbox","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"lightbox-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"loop","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"modal-id","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"open","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"overlay","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"overlay-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"panel-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"position","type":"string","default":"center","description":null,"values":["center","left","right","top","bottom"],"examples":[],"deprecated":null},{"name":"preserve-scroll-gap","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"show-close","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"show-header","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"slide-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"space-between","type":"number","default":"12","description":null,"values":[],"examples":[],"deprecated":null},{"name":"speed","type":"number","default":"450","description":null,"values":[],"examples":[],"deprecated":null},{"name":"surface-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"surface-padding","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"text","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"thumb-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"thumbs","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"thumbs-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"title","type":"string","default":"Gallery","description":null,"values":[],"examples":[],"deprecated":null},{"name":"width","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-help-mark","id":"smart.help-mark","title":"Help mark","summary":"A «?» beside a label that opens a short explanation on a press -- a toggletip -- announced politely, closed by Escape, a second press or a click outside.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"label","type":"string","default":"","description":"The button's accessible name; «Подробнее» / More information by default, best naming the subject («Подробнее: код решения»).","values":[],"examples":[],"deprecated":null},{"name":"placement","type":"string","default":"auto","description":null,"values":["auto","top","bottom","start","end"],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1/2","description":null,"values":["1/3","1/2","1"],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"text","type":"string","default":"","description":"The explanation; slot `content` takes links or lists instead.","values":[],"examples":[],"deprecated":null},{"name":"title","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-icon","id":"smart.icons","title":"Icons","summary":"Semantic Material Symbol wrapper with exact Loader tracking, accessible decorative or informative modes and token-owned geometry.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"filled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"grade","type":"number","default":"0","description":null,"values":[],"examples":[],"deprecated":null},{"name":"icon","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"loaded","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"optical-size","type":"number","default":"24","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"","description":null,"values":["1/4","1/3","1/2","1","2","3","4","5","6","7"],"examples":[],"deprecated":null},{"name":"type","type":"string","default":"","description":null,"values":["outlined","rounded","sharp","shape"],"examples":[],"deprecated":null},{"name":"weight","type":"number","default":"400","description":null,"values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-icon-button","id":"smart.icon-buttons","title":"Icon Buttons","summary":"Native icon-only action with token geometry, accessible naming and shared loading semantics.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"appearance","type":"string","default":"default","description":"How the icon button looks. Surface and ghost read the neutral alpha ramp: surface keeps a faint fill and a border, ghost keeps nothing until it is hovered or focused.","values":["default","tonal","outline","link","surface","ghost"],"examples":[],"deprecated":null},{"name":"aria-label","type":"string","default":"","description":"Accessible label.","values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":"Disabled state flag.","values":[],"examples":[],"deprecated":null},{"name":"filled","type":"boolean","default":"false","description":"Use the filled glyph axis for the standard icon variant.","values":[],"examples":[],"deprecated":null},{"name":"icon","type":"string","default":"add","description":"Material icon name.","values":[],"examples":[],"deprecated":null},{"name":"kind","type":"string","default":"icon","description":"What the icon button is: an ordinary icon action or a close control.","values":["icon","close"],"examples":[],"deprecated":null},{"name":"loading","type":"boolean","default":"false","description":"Loading state: the spinner in place of the icon, at the icon's size. Sets aria-busy and disables the native button.","values":[],"examples":[],"deprecated":null},{"name":"native-type","type":"string","default":"button","description":"Native button type attribute.","values":["button","submit","reset"],"examples":[],"deprecated":null},{"name":"radius","type":"string","default":"","description":"Border radius modifier.","values":["default","square","rounded"],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":"Extra classes applied to the inner icon button element.","values":[],"examples":[],"deprecated":null},{"name":"scheme","type":"string","default":"primary","description":"Which colour family the control takes. What the control is about is the status axis; a status set there wins over this.","values":["primary","secondary","on-surface"],"examples":[],"deprecated":null},{"name":"segment","type":"string","default":"","description":"Joined-control position owned by Button Group composition.","values":["start","middle","end"],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":"Icon button size token.","values":["1/3","1/2","1","2","3"],"examples":[],"deprecated":null},{"name":"spacing","type":"string","default":"normal","description":"Semantic internal spacing profile.","values":["compact","normal","comfortable","spacious"],"examples":[],"deprecated":null},{"name":"status","type":"string","default":"","description":"What the control is about, in the shared status vocabulary. The only one a control paints today is `error`, the destructive one: a control that deletes, discards or cannot be undone.","values":["error"],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":"Template variant name for SfBaseElement external templates.","values":[],"examples":[],"deprecated":null},{"name":"tightness","type":"string","default":"","description":"Compatibility alias for spacing.","values":["low","high","highest"],"examples":[],"deprecated":null},{"name":"type","type":"string","default":"default","description":"Legacy name for appearance, still honoured. See contracts/public-api-axes.json.","values":["default","tonal","outline","link","surface","ghost"],"examples":[],"deprecated":null},{"name":"variant","type":"string","default":"icon","description":"Legacy name for kind, still honoured. See contracts/public-api-axes.json.","values":["icon","close"],"examples":[],"deprecated":null}]}, -{"tag":"sf-input","id":"smart.inputs","title":"Inputs","summary":"A native single-line form control with Framework presentation, validation messaging and optional mask integration.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"appearance","type":"string","default":"bordered","description":"How the field looks: a bordered box, a filled one, or hidden.","values":["bordered","filled","hidden"],"examples":[],"deprecated":null},{"name":"autocomplete","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"default-value","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"error","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"error-message","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"hint","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"hint-icon","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"icon-start","type":"string","default":"null","description":null,"values":[],"examples":[],"deprecated":null},{"name":"input-type","type":"string","default":"text","description":null,"values":["text","email","password","search","tel","url"],"examples":[],"deprecated":null},{"name":"inputmode","type":"string","default":"","description":null,"values":["none","text","tel","url","email","numeric","decimal","search"],"examples":[],"deprecated":null},{"name":"invalid","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"left-icon","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"mask","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"mask-lazy","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"mask-options","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"mask-pattern","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"mask-placeholder-char","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"maxlength","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"minlength","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"name","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"pattern","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"placeholder","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"readonly","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"required","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"right-text","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":null,"values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"text-end","type":"string","default":"null","description":null,"values":[],"examples":[],"deprecated":null},{"name":"type","type":"string","default":"bordered","description":"Legacy name for appearance, still honoured. See contracts/public-api-axes.json.","values":["bordered","filled","hidden"],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-list-item","id":"smart.list-item","title":"List Item","summary":"Declarative option descriptor and visual row primitive owned by Dropdown.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"aria-label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"avatar-image-url","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"avatar-title","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"checked","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"color-class","type":"string","default":"bg-tertiary","description":null,"values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"icon","type":"string","default":"person","description":null,"values":[],"examples":[],"deprecated":null},{"name":"kind","type":"string","default":"text","description":"What the list item carries: plain text, an icon, a checkbox, an avatar or a colour.","values":["text","icon","checkbox","avatar","color"],"examples":[],"deprecated":null},{"name":"selected","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":null,"values":["1/3","1/2","1","2","3"],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"text","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"type","type":"string","default":"text","description":"Legacy name for kind, still honoured. See contracts/public-api-axes.json.","values":["text","icon","checkbox","avatar","color"],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-modal","id":"smart.modal","title":"Modal","summary":"A dialog window over the page in the shared modal stack: centered or at a side, top or bottom edge, with header, content and footer slots, focus trap, scroll lock and focus return. It can also be minimized, load its content by Ajax or into an iframe, or render inline in the page flow.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"aria-label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"autoload","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"blur","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"blur-type","type":"string","default":"medium","description":null,"values":["none","small","medium","large"],"examples":[],"deprecated":null},{"name":"body-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"close-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"close-on-esc","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"close-on-overlay","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"content-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"display","type":"string","default":"modal","description":null,"values":["modal","inline"],"examples":[],"deprecated":null},{"name":"footer-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"fullscreen","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"header-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"height","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"hide","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"hide-modifier","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"minimized","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"modal-id","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"mode","type":"string","default":"inline","description":null,"values":["inline","ajax","iframe"],"examples":[],"deprecated":null},{"name":"open","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"overlay","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"overlay-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"overlay-preset","type":"string","default":"default","description":null,"values":["default","focus"],"examples":[],"deprecated":null},{"name":"panel-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"position","type":"string","default":"center","description":null,"values":["center","left","right","inline-start","inline-end","top","bottom"],"examples":[],"deprecated":null},{"name":"preload","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"preserve-scroll-gap","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"show-close","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"show-footer","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"show-header","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"src","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"surface-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"surface-padding","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"text","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"title","type":"string","default":"","description":"Empty: the text of the page's language (\"Dialog\" in English).","values":[],"examples":[],"deprecated":null},{"name":"unclose","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"width","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-page-header","id":"smart.page-header","title":"Page header","summary":"The head of an admin page: path, heading, count, favourite star, install mark and main action. Replaces the admin top bar together with sf-admin-menu.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"count","type":"string","default":"","description":"How many records the page holds; empty draws no count. The admin menu carries no totals, so this is where they are.","values":[],"examples":[],"deprecated":null},{"name":"heading","type":"string","default":"","description":"The page heading.","values":[],"examples":[],"deprecated":null},{"name":"level","type":"string","default":"site","description":"install marks a page shared by every site.","values":["site","install"],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"star","type":"string","default":"","description":"Empty draws no star; off and on draw it in that state.","values":["off","on"],"examples":[],"deprecated":null}]}, -{"tag":"sf-pagination","id":"smart.pagination","title":"Pagination","summary":"Source-driven navigation for a collection split into numbered pages.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"action","type":"string","default":"","description":"Selected batch-action value.","values":[],"examples":[],"deprecated":null},{"name":"action-apply-text","type":"string","default":"","description":"Label of the batch-action apply button. Empty: the text of the page's language (\"Apply\" in English).","values":[],"examples":[],"deprecated":null},{"name":"action-choose-label","type":"string","default":"","description":"Placeholder of the batch-action selector, shown until an action is chosen. Empty: the text of the page's language (\"Choose an action\" in English).","values":[],"examples":[],"deprecated":null},{"name":"action-for-all","type":"boolean","default":"false","description":"Current all-items toggle value.","values":[],"examples":[],"deprecated":null},{"name":"action-for-all-label","type":"string","default":"","description":"Label of the all-items toggle. Empty: the text of the page's language (\"For all\" in English).","values":[],"examples":[],"deprecated":null},{"name":"actions","type":"string","default":"","description":"Pipe-separated compatible batch-action definitions.","values":[],"examples":[],"deprecated":null},{"name":"actions-label","type":"string","default":"","description":"Accessible name of the batch-action selector. Empty: the text of the page's language (\"Action for the selected records\" in English).","values":[],"examples":[],"deprecated":null},{"name":"actions-region-label","type":"string","default":"","description":"Accessible name of the panel that appears while rows are marked. Empty: the text of the page's language (\"Actions for the selected\" in English).","values":[],"examples":[],"deprecated":null},{"name":"aria-label","type":"string","default":"","description":"Accessible name of the navigation landmark. Empty: the text of the page's language (\"Result pages\" in English).","values":[],"examples":[],"deprecated":null},{"name":"bottom","type":"boolean","default":"true","description":"Allow the compatible batch-action section.","values":[],"examples":[],"deprecated":null},{"name":"bottom-class","type":"string","default":"","description":"Framework utility classes for the batch-action section.","values":[],"examples":[],"deprecated":null},{"name":"can-count","type":"boolean","default":"false","description":"Whether the host can count on request. Without it the view offers nothing and asks for nothing.","values":[],"examples":[],"deprecated":null},{"name":"clear-selection-label","type":"string","default":"","description":"Accessible name and tooltip of the control that drops the selection. Empty: the text of the page's language (\"Clear the selection\" in English).","values":[],"examples":[],"deprecated":null},{"name":"count-known","type":"boolean","default":"true","description":"Whether the number of records is known. A host that does not count every answer sets it false, and the view offers the number instead of showing it.","values":[],"examples":[],"deprecated":null},{"name":"counting","type":"boolean","default":"false","description":"A count is on its way; the view shows a short wait in place of the number.","values":[],"examples":[],"deprecated":null},{"name":"counting-label","type":"string","default":"","description":"Accessible name of the short wait shown while the count is on its way. Empty: the text of the page's language (\"Counting\" in English).","values":[],"examples":[],"deprecated":null},{"name":"current","type":"integer","default":"1","description":"Current one-based page number.","values":[],"examples":[],"deprecated":null},{"name":"first-label","type":"string","default":"","description":"Accessible name and tooltip of the control that goes to the first page. Empty: the text of the page's language (\"First\" in English).","values":[],"examples":[],"deprecated":null},{"name":"has-next","type":"boolean","default":"false","description":"Whether a further page exists. It is what moves forward and Show more when no total was sent.","values":[],"examples":[],"deprecated":null},{"name":"last-label","type":"string","default":"","description":"Visible label of the compatible last-page action. Empty: the text of the page's language (\"Last\" in English).","values":[],"examples":[],"deprecated":null},{"name":"main-class","type":"string","default":"","description":"Framework utility classes for the navigation section.","values":[],"examples":[],"deprecated":null},{"name":"middle","type":"boolean","default":"true","description":"Show page navigation and collection summary.","values":[],"examples":[],"deprecated":null},{"name":"next-label","type":"string","default":"","description":"Accessible name of the next-page action. Empty: the text of the page's language (\"Next page\" in English).","values":[],"examples":[],"deprecated":null},{"name":"page-field-label","type":"string","default":"","description":"Label of the field that takes a page number. Empty: the text of the page's language (\"Page:\" in English).","values":[],"examples":[],"deprecated":null},{"name":"page-label","type":"string","default":"","description":"Accessible prefix for a numbered page action. Empty: the text of the page's language (\"Page\" in English).","values":[],"examples":[],"deprecated":null},{"name":"page-size","type":"integer","default":"10","description":"Positive number of items per page.","values":[],"examples":[],"deprecated":null},{"name":"page-size-label","type":"string","default":"","description":"Visible and accessible label of the page-size selector. Empty: the text of the page's language (\"Per page:\" in English).","values":[],"examples":[],"deprecated":null},{"name":"page-sizes","type":"string","default":"10,20,30,40","description":"Comma-separated positive page-size choices.","values":[],"examples":[],"deprecated":null},{"name":"pages-label","type":"string","default":"","description":"Visible label before page controls. Empty: the text of the page's language (\"Pages:\" in English).","values":[],"examples":[],"deprecated":null},{"name":"previous-label","type":"string","default":"","description":"Accessible name of the previous-page action. Empty: the text of the page's language (\"Previous page\" in English).","values":[],"examples":[],"deprecated":null},{"name":"selected-count","type":"integer","default":"0","description":"Selected item count, clamped between zero and total.","values":[],"examples":[],"deprecated":null},{"name":"selected-label","type":"string","default":"","description":"Visible label for the selected item count. Empty: the text of the page's language (\"Selected:\" in English).","values":[],"examples":[],"deprecated":null},{"name":"show-action-for-all","type":"boolean","default":"false","description":"Show the compatible all-items toggle.","values":[],"examples":[],"deprecated":null},{"name":"show-actions","type":"boolean","default":"true","description":"Show batch actions when actions are supplied.","values":[],"examples":[],"deprecated":null},{"name":"show-count-label","type":"string","default":"","description":"Text of the control that asks the host for the number. Empty: the text of the page's language (\"Show the number\" in English).","values":[],"examples":[],"deprecated":null},{"name":"show-more-busy","type":"boolean","default":"false","description":"Mark the Show more control as working while the host fetches the next portion; it is disabled and shows a loader.","values":[],"examples":[],"deprecated":null},{"name":"show-more-text","type":"string","default":"","description":"Label of the compatible show-more action. Empty: the text of the page's language (\"Show more\" in English).","values":[],"examples":[],"deprecated":null},{"name":"show-page-size","type":"boolean","default":"true","description":"Show the page-size selector for a non-empty collection.","values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":"The step of the size ladder its fields, buttons, labels and page numbers take: 1, or the dense 1/2 of an admin.","values":["1/2","1"],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":"Template name.","values":[],"examples":[],"deprecated":null},{"name":"top","type":"boolean","default":"true","description":"Show the compatible show-more section.","values":[],"examples":[],"deprecated":null},{"name":"top-class","type":"string","default":"","description":"Framework utility classes for the show-more section.","values":[],"examples":[],"deprecated":null},{"name":"total","type":"integer","default":"10","description":"Non-negative total item count.","values":[],"examples":[],"deprecated":null},{"name":"total-label","type":"string","default":"","description":"Visible label for the total item count. Empty: the text of the page's language (\"Total:\" in English).","values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-popover","id":"smart.popover","title":"Popover","summary":"A surface anchored to a control the consumer supplies, with its own open state, dismissal and returned focus. Built as a general part because the Framework had the surface and not the behaviour: two composites wrote it by hand within a week, the second copying the first.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"dismissible","type":"boolean","default":"true","description":"Esc and a press outside close it. A consumer that owns those keys turns this off and calls close() when it decides.","values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":"The accessible name of the surface. A surface with a role and no name is announced as an unnamed one.","values":[],"examples":[],"deprecated":null},{"name":"open","type":"boolean","default":"false","description":"Whether the surface is shown. Reflected, so a consumer can read it and set it.","values":[],"examples":[],"deprecated":null},{"name":"placement","type":"string","default":"bottom-end","description":"Which corner of the trigger the surface hangs from.","values":["bottom-start","bottom-end","top-start","top-end","inline-start","inline-end"],"examples":[],"deprecated":null},{"name":"role","type":"string","default":"dialog","description":"Legacy name for surface-role. Read once and removed from the host, which is not itself a menu or dialog.","values":["dialog","menu","listbox","group"],"examples":[],"deprecated":null},{"name":"surface-role","type":"string","default":"dialog","description":"What the surface is to a reader: dialog, menu, listbox or group. Written on sf-popover; the surface gets the role and the trigger aria-haspopup.","values":["dialog","menu","listbox","group"],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":"Template variant name.","values":[],"examples":[],"deprecated":null},{"name":"width","type":"string","default":"","description":"A width of its own. Left to its content a surface takes the width of its longest line, which a list of names makes wide and ragged.","values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-profile-picker","id":"smart.profile-picker","title":"Profile picker","summary":"One way to choose, make, rename, remove and reset a profile: a field-like button naming the profile in use, and a panel where every act happens inline. The profiles and the rights are the host's; the component says what was asked.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"current","type":"string","default":"","description":"The id of the profile in use.","values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":"What a profile is called here («Профиль», «Вид»); the page language's «Profile» when empty.","values":[],"examples":[],"deprecated":null},{"name":"message","type":"string","default":"","description":"Why the host refused the last act, shown in the panel.","values":[],"examples":[],"deprecated":null},{"name":"resettable","type":"boolean","default":"false","description":"Offers «Сбросить к стандартному» at the foot.","values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1/2","description":null,"values":["1/2","1"],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-progress-bar","id":"smart.progress-bar","title":"Progress Bar","summary":"Continuous determinate progress with normalized value, accessible range semantics and explicit semantic tone.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":null,"values":["1/3","1/2","1","2","3"],"examples":[],"deprecated":null},{"name":"status","type":"string","default":"neutral","description":"What the progress reports, in the shared status vocabulary. The word this component used before, primary, is still accepted and means neutral.","values":["neutral","info","success","warning","error"],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"text-position","type":"string","default":"none","description":null,"values":["none","inline-end","bottom","right"],"examples":[],"deprecated":null},{"name":"tone","type":"string","default":"neutral","description":"Legacy name for status, still honoured. See contracts/public-api-axes.json.","values":["neutral","info","success","warning","error"],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"0","description":null,"values":[],"examples":[],"deprecated":null},{"name":"value-text","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-progress-scale","id":"smart.progress-scale","title":"Progress Scale","summary":"Segmented determinate progress with exact accessible value, explicit semantic tone and ten visual steps.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"line","type":"string","default":"","description":"Takes the text line of this form size, for a table cell or a row of fields, so the row keeps its control height.","values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"show-text","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":null,"values":["1/3","1/2","1","2","3"],"examples":[],"deprecated":null},{"name":"status","type":"string","default":"neutral","description":"What the progress reports, in the shared status vocabulary. The word this component used before, primary, is still accepted and means neutral.","values":["neutral","info","success","warning","error"],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"tone","type":"string","default":"neutral","description":"Legacy name for status, still honoured. See contracts/public-api-axes.json.","values":["neutral","info","success","warning","error"],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"0","description":null,"values":[],"examples":[],"deprecated":null},{"name":"value-text","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-radio","id":"smart.radio","title":"Radio","summary":"One radio option: a native radio input with a label, description and help text. Radios with the same name form a group in which checking one unchecks the others.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"checked","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"description","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"error","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"help","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"name","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":"Radio size token.","values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-range-slider","id":"smart.range-slider","title":"Range Slider","summary":"A slider for one number or a range of two on a track: drag, click or keys move a handle by step, the fill shows the chosen part, and the value can be shown as text or a tooltip on each handle.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"connect","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"decimals","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"keyboard","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"none","description":"How each handle shows its value: not at all, as text beside it, or as a tooltip.","values":["none","text","tooltip"],"examples":[],"deprecated":null},{"name":"label-position","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"lower-label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"margin","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"max","type":"string","default":"100","description":null,"values":[],"examples":[],"deprecated":null},{"name":"min","type":"string","default":"0","description":null,"values":[],"examples":[],"deprecated":null},{"name":"multiple","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"prefix","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"start","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"step","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"suffix","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"text-position","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"tooltip-position","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"upper-label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-reference-link","id":"smart.reference-link","title":"Reference Link","summary":"Navigation surface that pairs a real destination with a compact reference.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"appearance","type":"string","default":"card","description":"card is the reference as its own box: frame, fill and padding. plain is the link alone, taking the width of its text, for a reference inside something that is already a box -- a record’s field, a table cell -- where a second frame reads as a control the value is not.","values":["card","plain"],"examples":[],"deprecated":null},{"name":"aria-label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":"Render an unavailable, non-focusable reference without navigation.","values":[],"examples":[],"deprecated":null},{"name":"href","type":"string","default":"","description":"Real navigation destination. Required for an enabled reference.","values":[],"examples":[],"deprecated":null},{"name":"icon","type":"string","default":"arrow_forward","description":"Decorative icon name. An absent attribute is the arrow; an empty one draws no icon, for a reference that stands beside its own label.","values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":"Destination-oriented visible link label.","values":[],"examples":[],"deprecated":null},{"name":"line","type":"string","default":"","description":"Takes the text line of this form size as a link without the card, for a table cell, so the row keeps its control height.","values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"","description":"Form size: the reference becomes a control of that size, for a row of fields or a table cell. Empty keeps the card spacing.","values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"target","type":"string","default":"_self","description":"Native browsing-context target. Disclose new-context navigation in the name.","values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"text","type":"string","default":"","description":"Compact route, source or reference shown beside the label.","values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-resizer","id":"smart.resizer","title":"Resizer","summary":"A handle on a panel's edge that changes the panel's width by a drag, the keyboard or a double click back to the default, within limits; optionally remembered in the browser.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"disabled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"edge","type":"string","default":"inline-end","description":null,"values":["inline-end","inline-start"],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":"The accessible name; defaults to the page language's «Resize».","values":[],"examples":[],"deprecated":null},{"name":"max","type":"string","default":"40rem","description":"The widest width, a CSS length.","values":[],"examples":[],"deprecated":null},{"name":"min","type":"string","default":"12rem","description":"The narrowest width, a CSS length (tokens and percentages of the panel's parent too).","values":[],"examples":[],"deprecated":null},{"name":"property","type":"string","default":"","description":"A CSS custom property the width is written to on the target; empty writes inline-size.","values":[],"examples":[],"deprecated":null},{"name":"step","type":"string","default":"16","description":"Pixels an arrow key moves; Shift moves four steps.","values":[],"examples":[],"deprecated":null},{"name":"storage-key","type":"string","default":"","description":"Remembers the width in this browser as the view preference sf-resizer/ (SF.Preferences); a double click forgets it.","values":[],"examples":[],"deprecated":null},{"name":"target","type":"string","default":"","description":"A selector of the closest ancestor that is the panel; empty is the parent.","values":[],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"","description":"A width in pixels the host keeps (a person's settings); it wins over the browser's memory.","values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-skeleton","id":"smart.skeleton","title":"Skeleton","summary":"Decorative loading placeholder that reserves source-backed content geometry with semantic tokens and reduced-motion support.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"animation","type":"string","default":"pulse","description":null,"values":["pulse","wave","none"],"examples":[],"deprecated":null},{"name":"count","type":"number","default":"1","description":null,"values":[],"examples":[],"deprecated":null},{"name":"height","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"items","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"kind","type":"string","default":"text","description":"What shape the placeholder takes: a line of text, a circle, a square or a rounded block.","values":["text","circle","square","rounded"],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":null,"values":["1/7","1/6","1/5","1/4","1/3","1/2","1","2","3","4","5","6","7"],"examples":[],"deprecated":null},{"name":"type","type":"string","default":"","description":"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.","values":["icon"],"examples":[],"deprecated":null},{"name":"variant","type":"string","default":"text","description":"Legacy name for kind, still honoured. See contracts/public-api-axes.json.","values":["text","circle","square","rounded"],"examples":[],"deprecated":null},{"name":"width","type":"string","default":"100%","description":null,"values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-slider","id":"smart.slider","title":"Slider","summary":"A row of slides moved by arrows, dots, swipe or keys, built on the shared Swiper adapter; with linked thumbnails a second slider picks the slide.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"arrows","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"button-size","type":"string","default":"1","description":null,"values":[],"examples":[],"deprecated":null},{"name":"button-type","type":"string","default":"primary","description":null,"values":[],"examples":[],"deprecated":null},{"name":"dots","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"dots-size","type":"string","default":"2","description":null,"values":[],"examples":[],"deprecated":null},{"name":"dots-type","type":"string","default":"primary-dark","description":null,"values":[],"examples":[],"deprecated":null},{"name":"loop","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"slide-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"space-between","type":"number","default":"12","description":null,"values":[],"examples":[],"deprecated":null},{"name":"speed","type":"number","default":"450","description":null,"values":[],"examples":[],"deprecated":null},{"name":"thumb-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"thumbs","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"thumbs-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-sortable","id":"smart.sortable","title":"Sortable","summary":"Drag-and-drop list primitive for reordering, moving between lists and copying from a library by mouse, pen, touch and keyboard; reports intent only.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"accepts","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"group","type":"string","default":null,"description":null,"values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"mode","type":"string","default":"move","description":null,"values":["move","copy"],"examples":[],"deprecated":null},{"name":"orientation","type":"string","default":"vertical","description":null,"values":["vertical","horizontal"],"examples":[],"deprecated":null},{"name":"preview","type":"string","default":"silhouette","description":"How a pointer drag shows where the item lands: silhouette lifts the item out of the list and opens an outline of its size at the place it would take, the list making room; line draws a thin line there and leaves the list as it is. Keyboard moves and external targets always use the line; a list that wraps into a grid opens the outline as one of its cells, in reading order.","values":["silhouette","line"],"examples":[],"deprecated":null}]}, -{"tag":"sf-spinner","id":"smart.spinner","title":"Spinner","summary":"Indeterminate waiting indicator with arc or dots presentation, optional polite status announcement and Framework-owned motion.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"announce","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"direction","type":"string","default":"clockwise","description":null,"values":["clockwise","counterclockwise"],"examples":[],"deprecated":null},{"name":"dot-radius","type":"string","default":"","description":"Deprecated since 2026-10-20, read until 2026-12-01 (journal attribute-spinner-pixel-geometry): the size ladder decides the spinner's geometry; write size.","values":[],"examples":[],"deprecated":{"since":"1.1.0","replacement":"size"}},{"name":"dots","type":"string","default":"16","description":null,"values":[],"examples":[],"deprecated":null},{"name":"filled","type":"string","default":"6","description":null,"values":[],"examples":[],"deprecated":null},{"name":"height","type":"string","default":"","description":"Deprecated since 2026-10-20, read until 2026-12-01 (journal attribute-spinner-pixel-geometry): the size ladder decides the spinner's geometry; write size.","values":[],"examples":[],"deprecated":{"since":"1.1.0","replacement":"size"}},{"name":"infinite","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"kind","type":"string","default":"arc","description":"What the spinner is: an arc or a row of dots.","values":["arc","dots"],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":"Empty: the text of the page's language (\"Loading...\" in English).","values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":"The size ladder: at each step the spinner is the icon of an sf-button of the same size (diameter and stroke), so it can stand in for that icon.","values":["1/3","1/2","1","2","3"],"examples":[],"deprecated":null},{"name":"stroke-width","type":"string","default":"","description":"Deprecated since 2026-10-20, read until 2026-12-01 (journal attribute-spinner-pixel-geometry): the size ladder decides the spinner's geometry; write size.","values":[],"examples":[],"deprecated":{"since":"1.1.0","replacement":"size"}},{"name":"variant","type":"string","default":"arc","description":"Legacy name for kind, still honoured. See contracts/public-api-axes.json.","values":["arc","dots"],"examples":[],"deprecated":null},{"name":"width","type":"string","default":"","description":"Deprecated since 2026-10-20, read until 2026-12-01 (journal attribute-spinner-pixel-geometry): the size ladder decides the spinner's geometry; write size.","values":[],"examples":[],"deprecated":{"since":"1.1.0","replacement":"size"}}]}, -{"tag":"sf-steps","id":"smart.steps","title":"Steps","summary":"A row of labelled step buttons, separated by an icon, for a multi-step process: marks the current, completed and error steps and moves to an enabled step when it is pressed.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"aria-label","type":"string","default":"","description":"Empty: the text of the page's language (\"Steps\" in English).","values":[],"examples":[],"deprecated":null},{"name":"completed-label","type":"string","default":"","description":"Empty: the text of the page's language (\"Completed\" in English).","values":[],"examples":[],"deprecated":null},{"name":"current","type":"number","default":"0","description":null,"values":[],"examples":[],"deprecated":null},{"name":"error-label","type":"string","default":"","description":"Empty: the text of the page's language (\"Error\" in English).","values":[],"examples":[],"deprecated":null},{"name":"error-step","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"items","type":"string","default":"[]","description":null,"values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"separator-icon","type":"string","default":"chevron_right","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":null,"values":["1","1/2"],"examples":[],"deprecated":null}]}, -{"tag":"sf-switch","id":"smart.switch","title":"Switch","summary":"An on/off control for a setting that applies at once: a native checkbox with role=\"switch\", a track and a moving thumb, with a label, description and help text.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"checked","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"description","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"help","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"name","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":"Switch size token.","values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-tabs","id":"smart.tabs","title":"Tabs","summary":"A tab list that shows one local panel at a time, with text or icon tabs given as attributes, slots or data, roving keyboard focus and linked tab panels.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"active-index","type":"number","default":"0","description":null,"values":[],"examples":[],"deprecated":null},{"name":"configurable","type":"boolean","default":"false","description":"A gear at the end of the tabs («Настроить вкладки») opens the standard menu with the tabs as a sortable list, a visibility checkbox per tab (pinned tabs fixed) and «Сбросить» in its footer. The choice is the host's: sf-tabs-settings-change {order, hidden}, sf-tabs-settings-reset, setSettings({order, hidden}).","values":[],"examples":[],"deprecated":null},{"name":"items","type":"string","default":"[]","description":"An item (set with setItems) may carry key (a stable id for the settings; the index otherwise), icon, count (a small counter after the label), href (the tab is a link: activating it goes to the address; aria-current=page on the active one) and pinned (never hidden, fixed in the settings).","values":[],"examples":[],"deprecated":null},{"name":"overflow","type":"string","default":"scroll","description":"What the tabs do when they do not fit: scroll (the row scrolls), wrap (rows wrap), or more (the tabs that do not fit go into a trailing «Ещё (n)» menu; the active one always stays).","values":["scroll","wrap","more"],"examples":[],"deprecated":null},{"name":"panel-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"scheme","type":"string","default":"default","description":"Built-in button appearance: default, outline or link. Historical name retained; this is not a semantic color selector. Custom templates may interpret it separately.","values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":null,"values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"top-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"top-position","type":"string","default":"start","description":null,"values":[],"examples":[],"deprecated":null},{"name":"type","type":"string","default":"null","description":null,"values":[],"examples":[],"deprecated":null},{"name":"variant","type":"string","default":"buttons","description":null,"values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-tag","id":"smart.tags","title":"Tags","summary":"Compact static, selectable and removable labels with one explicit interaction owner.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"active","type":"boolean","default":"false","description":"Selected state of a checkbox tag.","values":[],"examples":[],"deprecated":null},{"name":"appearance","type":"string","default":"default","description":"Visual appearance, read from the neutral alpha ramp and separate from type: surface keeps a faint fill and a boundary, ghost keeps nothing until it is hovered. Only the neutral types take it, because a status tag carries its meaning in its colour.","values":["default","surface","ghost"],"examples":[],"deprecated":null},{"name":"aria-label","type":"string","default":"","description":"Optional accessible name override for a selectable tag.","values":[],"examples":[],"deprecated":null},{"name":"avatar-image-url","type":"string","default":"","description":"Avatar image URL; the visible text remains the accessible label.","values":[],"examples":[],"deprecated":null},{"name":"avatar-status","type":"string","default":"","description":"Reserved avatar status value for compatible templates.","values":[],"examples":[],"deprecated":null},{"name":"avatar-text","type":"string","default":"","description":"Avatar initials fallback.","values":[],"examples":[],"deprecated":null},{"name":"closable","type":"boolean","default":"false","description":"Show a separate remove action; icon, color and avatar tags enable it by default, a checkbox tag only when it is set.","values":[],"examples":[],"deprecated":null},{"name":"close-label","type":"string","default":"","description":"Accessible name of the remove action. Defaults to Remove, or Удалить on a Russian page.","values":[],"examples":[],"deprecated":null},{"name":"color-class","type":"string","default":"","description":"Framework semantic background utility for the color marker.","values":[],"examples":[],"deprecated":null},{"name":"count","type":"string","default":"","description":"Optional count shown with the default tag.","values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":"Disable interactive toggle and close actions.","values":[],"examples":[],"deprecated":null},{"name":"icon","type":"string","default":"","description":"Decorative Framework icon name.","values":[],"examples":[],"deprecated":null},{"name":"inline","type":"boolean","default":"false","description":"Sit on the text line of another control: no block padding, a flush label, and a remove button the height of the line. The host may publish --sf-tag--line.","values":[],"examples":[],"deprecated":null},{"name":"interactive","type":"boolean","default":"false","description":"Render the label as a button next to the remove action, for tags that open something (for example a filter chip menu); ignored for checkbox tags.","values":[],"examples":[],"deprecated":null},{"name":"kind","type":"string","default":"checkbox","description":"What the tag carries: a checkbox, an icon, a colour, an avatar, or nothing but its label. The compatibility input quantity is still accepted and means default.","values":["checkbox","icon","default","color","avatar"],"examples":[],"deprecated":null},{"name":"line","type":"string","default":"","description":"Takes the text line of this form size as an inline tag one size down, for a table cell, so the row keeps its control height. Overrides size and inline.","values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":"Framework utility classes for the visible root.","values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1/2","description":"Framework size token: sets the label text and the default spacing.","values":["1/3","1/2","1","2","3"],"examples":[],"deprecated":null},{"name":"spacing","type":"string","default":"normal","description":"Block padding of a free-standing tag, with the names the buttons use.","values":["compact","normal","comfortable","spacious"],"examples":[],"deprecated":null},{"name":"status","type":"string","default":"","description":"What the tag reports, in the shared status vocabulary. Leave it empty for a tag that reports nothing.","values":["info","success","warning","error"],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":"Template name.","values":[],"examples":[],"deprecated":null},{"name":"text","type":"string","default":"","description":"Visible tag label.","values":[],"examples":[],"deprecated":null},{"name":"type","type":"string","default":"checkbox","description":"Legacy name that answered both questions from one list: a content word reaches kind, a status word reaches status. See contracts/public-api-axes.json.","values":["checkbox","icon","default","color","avatar","info","success","warning","error"],"examples":[],"deprecated":null}]}, -{"tag":"sf-textarea","id":"smart.textarea","title":"Textarea","summary":"A native multiline form control with Framework presentation, validation messaging and safe vertical resizing.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"appearance","type":"string","default":"bordered","description":"How the field looks: a bordered box or a filled one.","values":["bordered","filled"],"examples":[],"deprecated":null},{"name":"autocomplete","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"error","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"error-message","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"hint","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"inputmode","type":"string","default":"","description":null,"values":["none","text","tel","url","email","numeric","decimal","search"],"examples":[],"deprecated":null},{"name":"invalid","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"mask","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"mask-options","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"mask-pattern","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"maxlength","type":"number","default":"null","description":null,"values":[],"examples":[],"deprecated":null},{"name":"minlength","type":"number","default":"null","description":null,"values":[],"examples":[],"deprecated":null},{"name":"name","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"placeholder","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"readonly","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"required","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"rows","type":"number","default":"3","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":null,"values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"spellcheck","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"type","type":"string","default":"bordered","description":"Legacy name for appearance, still honoured. See contracts/public-api-axes.json.","values":["bordered","filled"],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"wrap","type":"string","default":"soft","description":null,"values":["soft","hard"],"examples":[],"deprecated":null}]}, -{"tag":"sf-theme-generator","id":"smart.theme-generator","title":"Theme generator","summary":"A theme from one colour: a person chooses the main colour (or the generator's hue and chroma) and it makes the Framework's eight tonal palettes, the 128 primitives every semantic token reads and the 98 translucent steps core derives from them, with a preview, events carrying the CSS, and an optional live application to the page.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"apply","type":"boolean","default":"false","description":"Apply the theme to `target` as inline custom properties, live on every change, undoing the previous application first and on removal. Without it the page is not changed.","values":[],"examples":[],"deprecated":null},{"name":"chroma","type":"string","default":"","description":"The generator's chroma, 0-150, overriding the colour's reading; set by the fine-tuning fields. Empty reads it from the colour.","values":[],"examples":[],"deprecated":null},{"name":"hue","type":"string","default":"","description":"The generator's hue, 0-360, overriding the colour's reading; set by the fine-tuning fields. Empty reads it from the colour.","values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"selector","type":"string","default":":root","description":"The selector of the rule in the events' css and in toCSS().","values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":null,"values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"swatches","type":"string","default":"","description":"The product's own colours offered beside the picker, as sf-color takes them: '#hex|Name, #hex'.","values":[],"examples":[],"deprecated":null},{"name":"target","type":"string","default":"","description":"A CSS selector for the element the theme is applied to; empty is the document element. A target other than the root carries a theme class (theme-light or theme-dark): the semantic tokens are declared there, so without one only the primitives change on it.","values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"","description":"The main colour, #rrggbb. Empty means the Framework's own colour (#005bbe) and draws the Framework's own theme.","values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-toast","id":"smart.toast","title":"Toast","summary":"Transient overlay feedback with semantic roles, optional action, pause-safe lifetime and dismiss behavior.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"action","type":"string","default":"action","description":"Stable action value emitted in sf-toast-action.","values":[],"examples":[],"deprecated":null},{"name":"action-text","type":"string","default":"","description":"Visible label of the one optional action.","values":[],"examples":[],"deprecated":null},{"name":"closable","type":"boolean","default":"true","description":"Render an explicitly named close action.","values":[],"examples":[],"deprecated":null},{"name":"close-label","type":"string","default":"","description":"Localized accessible name of the close action. Empty: the text of the page's language (\"Close message\" in English).","values":[],"examples":[],"deprecated":null},{"name":"duration","type":"number","default":"0","description":"Explicit lifetime in milliseconds. Zero keeps the message until dismissed.","values":[],"examples":[],"deprecated":null},{"name":"icon","type":"string","default":"","description":"Optional decorative icon name.","values":[],"examples":[],"deprecated":null},{"name":"role","type":"string","default":"","description":"Live-region role for dynamically inserted feedback only.","values":["status","alert"],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"status","type":"string","default":"neutral","description":"What the message reports, in the shared status vocabulary. The words this component used before — default and primary — are still accepted and mean neutral and info.","values":["neutral","info","success","warning","error"],"examples":[],"deprecated":null},{"name":"supporting-text","type":"string","default":"","description":"Concise supporting text at the normal body size.","values":[],"examples":[],"deprecated":null},{"name":"title","type":"string","default":"","description":"Short result heading.","values":[],"examples":[],"deprecated":null},{"name":"type","type":"string","default":"neutral","description":"Legacy name for status, still honoured. See contracts/public-api-axes.json.","values":["neutral","info","success","warning","error"],"examples":[],"deprecated":null}]}, -{"tag":"sf-tooltip","id":"smart.tooltip","title":"Tooltip","summary":"Tooltip surface that can join the ordinary data-tooltip trigger composition.","lifecycle":"released","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"appearance","type":"string","default":"light","description":"How the tooltip looks: light on a dark surface or the reverse.","values":["light","dark"],"examples":[],"deprecated":null},{"name":"arrow","type":"string","default":"none","description":"Logical tail placement.","values":["none","top-center","bottom-center","inline-start","inline-end","bottom-inline-start","bottom-inline-end"],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":"Framework utility classes for the visible surface root.","values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":"Framework typography and spacing scale.","values":["1/3","1/2","1","2","3"],"examples":[],"deprecated":null},{"name":"supporting-text","type":"string","default":"","description":"Optional secondary description.","values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":"Template name.","values":[],"examples":[],"deprecated":null},{"name":"text","type":"string","default":"","description":"Short primary description.","values":[],"examples":[],"deprecated":null},{"name":"type","type":"string","default":"light","description":"Legacy name for appearance, still honoured. See contracts/public-api-axes.json.","values":["light","dark"],"examples":[],"deprecated":null}]}, -{"tag":"sf-tree","id":"smart.tree","title":"Tree","summary":"Accessible hierarchical composite with roving focus, branch expansion and host-owned selection.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"accept-files","type":"boolean","default":"false","description":"A node takes files dropped from the computer and says so with sf-tree-files-drop.","values":[],"examples":[],"deprecated":null},{"name":"accept-records","type":"boolean","default":"false","description":"A node takes the records dragged from a list (application/x-sf-records+json) and says so with sf-tree-records-drop.","values":[],"examples":[],"deprecated":null},{"name":"aria-label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"items","type":"array","default":"[]","description":"Items given as data instead of as sf-tree-item children (set as a property, not an attribute): [{label, href?, target?, rel?, kind?, value?, open?, selected?, active?, disabled?, icon?, openIcon?, closedIcon?, chevronOpenIcon?, chevronClosedIcon?, openLabel?, closeLabel?, children?}]. text or title stand in for label. Setting it replaces the items and re-renders; sf-tree-item children are read once and removed, so a parent that re-renders changed items passes them this way.","values":[],"examples":[],"deprecated":null},{"name":"role","type":"string","default":"tree","description":null,"values":["tree"],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"selection","type":"string","default":"none","description":null,"values":["none","single","multiple"],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null}]}, -{"tag":"sf-tree-item","id":"smart.tree-item","title":"Tree Item","summary":"One accessible node in a Smart Tree hierarchy.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"attributes":[{"name":"active","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"chevron-closed-icon","type":"string","default":"chevron_right","description":null,"values":[],"examples":[],"deprecated":null},{"name":"chevron-open-icon","type":"string","default":"keyboard_arrow_down","description":null,"values":[],"examples":[],"deprecated":null},{"name":"close-label","type":"string","default":"","description":"Empty: the text of the page's language (\"Close item\" in English).","values":[],"examples":[],"deprecated":null},{"name":"closed-icon","type":"string","default":"folder","description":null,"values":[],"examples":[],"deprecated":null},{"name":"container-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"href","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"icon","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"item-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"items-data","type":"array","default":"[]","description":null,"values":[],"examples":[],"deprecated":null},{"name":"kind","type":"string","default":"folder","description":"What the tree item is: a folder or a file.","values":["folder","file"],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"name-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"open","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"open-icon","type":"string","default":"folder_open","description":null,"values":[],"examples":[],"deprecated":null},{"name":"open-label","type":"string","default":"","description":"Empty: the text of the page's language (\"Open item\" in English).","values":[],"examples":[],"deprecated":null},{"name":"rel","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"selected","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"target","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"text","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"type","type":"string","default":"folder","description":"Legacy name for kind, still honoured. See contracts/public-api-axes.json.","values":["folder","file"],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]} +{"tag":"sf-alert","id":"smart.alert","title":"Alert","summary":"Persistent inline notice with semantic roles, optional actions and dismiss behavior.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/feedback/alert/","attributes":[{"name":"action","type":"string","default":"action","description":"Stable action value emitted in sf-alert-action.","values":[],"examples":[],"deprecated":null},{"name":"action-text","type":"string","default":"","description":"Visible label of the primary optional action.","values":[],"examples":[],"deprecated":null},{"name":"appearance","type":"string","default":"default","description":"How the alert looks: a filled surface, an outline, or flat.","values":["default","outlined","flat"],"examples":[],"deprecated":null},{"name":"closable","type":"boolean","default":"false","description":"Render an explicitly named close action.","values":[],"examples":[],"deprecated":null},{"name":"close-label","type":"string","default":"","description":"Localized accessible name of the close action. Empty: the text of the page's language (\"Close alert\" in English).","values":[],"examples":[],"deprecated":null},{"name":"icon","type":"string","default":"","description":"Optional icon override. Use none to hide the semantic icon.","values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"secondary-action","type":"string","default":"secondary","description":"Stable secondary action value emitted in sf-alert-action.","values":[],"examples":[],"deprecated":null},{"name":"secondary-action-text","type":"string","default":"","description":"Visible label of the secondary optional action.","values":[],"examples":[],"deprecated":null},{"name":"status","type":"string","default":"neutral","description":"What the alert reports, in the shared status vocabulary. The words this component used before — clear and danger — are still accepted and mean neutral and error.","values":["neutral","info","success","warning","error"],"examples":[],"deprecated":null},{"name":"supporting-text","type":"string","default":"","description":"Supporting body text at the normal text size.","values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"title","type":"string","default":"","description":"Short message heading.","values":[],"examples":[],"deprecated":null},{"name":"type","type":"string","default":"neutral","description":"Legacy name for status, still honoured. See contracts/public-api-axes.json.","values":["neutral","info","success","warning","error"],"examples":[],"deprecated":null},{"name":"variant","type":"string","default":"default","description":"Legacy name for appearance, still honoured. See contracts/public-api-axes.json.","values":["default","outlined","flat"],"examples":[],"deprecated":null}]}, +{"tag":"sf-avatar","id":"smart.avatar","title":"Avatar","summary":"Shows a person or organisation as a photo or initials, with an optional availability or verification mark. The default and label templates render a native button whose aria-label names its action; the card template is static and adds a title, description and meta line.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/content/avatar/","attributes":[{"name":"aria-label","type":"string","default":"","description":"Empty: the text of the page's language (\"Avatar\" in English).","values":[],"examples":[],"deprecated":null},{"name":"card-variant","type":"string","default":"square","description":null,"values":["square","portrait"],"examples":[],"deprecated":null},{"name":"description","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"image-alt","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"image-url","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"line","type":"string","default":"","description":"Takes the text line of this form size instead of a control height, for an avatar beside a label in a row or a table cell.","values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"meta","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"meta-icon","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"no-wrap","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"shape","type":"string","default":"circle","description":null,"values":["circle","square"],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":null,"values":["1/4","1/3","1/2","1","2","3"],"examples":[],"deprecated":null},{"name":"status","type":"string","default":"none","description":null,"values":["none","online","offline","company","verified"],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"text","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"title","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-avatars","id":"smart.avatars","title":"Avatars","summary":"Ready combinations of avatars: a person with a source, a stacked group with a remainder, an avatar with two lines of label, and a profile avatar with a verified badge. Drawn from sf-avatar's parts; for a single avatar with a name or a card use sf-avatar.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/content/avatars/","attributes":[{"name":"active","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"avatar-size","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"avatar-url","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"avatars","type":"array","default":"[]","description":null,"values":[],"examples":[],"deprecated":null},{"name":"avatars-more","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"check","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"data","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"image-url","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"label-second-text","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"label-size","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"label-text","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"name","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"profile-size","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"property","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"round-size","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"source","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-badge","id":"smart.badges","title":"Badges","summary":"A short non-interactive label for a status, category, version or count beside an object, drawn in a size, appearance and colour role or status. It adds no keyboard or pointer behaviour.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/feedback/badges/","attributes":[{"name":"appearance","type":"string","default":"main","description":"How the badge looks: the most visible fill, a calmer tonal one, or an outline.","values":["main","tonal","outline"],"examples":[],"deprecated":null},{"name":"aria-label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"icon","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"icon-end","type":"string","default":"null","description":null,"values":[],"examples":[],"deprecated":null},{"name":"icon-left","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"icon-position","type":"string","default":"start","description":null,"values":["start","end"],"examples":[],"deprecated":null},{"name":"icon-right","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"icon-start","type":"string","default":"null","description":null,"values":[],"examples":[],"deprecated":null},{"name":"line","type":"string","default":"","description":"Takes the text line of this form size, for a table cell or a row of fields, so the row keeps its control height.","values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"scheme","type":"string","default":"neutral","description":"Which semantic colour the badge takes. A status word given here still works and reaches the status axis.","values":["neutral","primary","secondary","tertiary","on-surface"],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1/3","description":null,"values":["1/3","1/2","1"],"examples":[],"deprecated":null},{"name":"status","type":"string","default":"","description":"What the badge reports, in the shared status vocabulary. The word this component used before, danger, is still accepted and means error.","values":["info","success","warning","error"],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"text","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"type","type":"string","default":"main","description":"Legacy name for appearance, still honoured. See contracts/public-api-axes.json.","values":["main","tonal","outline"],"examples":[],"deprecated":null}]}, +{"tag":"sf-breadcrumbs","id":"smart.breadcrumbs","title":"Breadcrumbs","summary":"Shows the current page's place in a hierarchy as a trail of native links built from items, the items attribute or sf-breadcrumbs-item children. A long trail collapses its middle into an ellipsis button (max-items, default 4) that expands in place.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/navigation/breadcrumbs/","attributes":[{"name":"aria-label","type":"string","default":"","description":"Empty: the text of the page's language (\"Breadcrumb\" in English).","values":[],"examples":[],"deprecated":null},{"name":"container-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"current-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"expand-label","type":"string","default":"","description":"Empty: the text of the page's language (\"Show hidden breadcrumbs\" in English).","values":[],"examples":[],"deprecated":null},{"name":"expand-on-ellipsis","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"home-icon","type":"string","default":"home","description":null,"values":[],"examples":[],"deprecated":null},{"name":"home-label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"item-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"items","type":"string","default":"[]","description":null,"values":[],"examples":[],"deprecated":null},{"name":"link-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"max-items","type":"number","default":"4","description":null,"values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"separator-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"separator-icon","type":"string","default":"chevron_right","description":null,"values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-button","id":"smart.buttons","title":"Buttons","summary":"A native button with Framework presentation: size, appearance, colour role or status, optional start and end icons, spacing and radius. loading sets aria-busy and disables it against repeated activation.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/actions/buttons/","attributes":[{"name":"appearance","type":"string","default":"default","description":"How the button looks. Surface reads the neutral alpha ramp: a faint fill and a border. ghost is the link appearance under its old name (compat until 2026-12-01).","values":["default","tonal","outline","link","surface","ghost"],"examples":[],"deprecated":null},{"name":"aria-label","type":"string","default":"","description":"Accessible label for icon-only or custom buttons.","values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":"Disabled state flag.","values":[],"examples":[],"deprecated":null},{"name":"icon","type":"string","default":"","description":"Single icon name shortcut.","values":[],"examples":["home","settings","search","edit","check","close"],"deprecated":null},{"name":"icon-end","type":"string","default":"","description":"Logical end icon name.","values":[],"examples":["home","settings","search","edit","check","close"],"deprecated":null},{"name":"icon-left","type":"string","default":"","description":"Compatibility alias for icon-start.","values":[],"examples":["home","settings","search","edit","check","close"],"deprecated":null},{"name":"icon-position","type":"string","default":"start","description":"Placement for the single icon shortcut.","values":["start","end"],"examples":[],"deprecated":null},{"name":"icon-right","type":"string","default":"","description":"Compatibility alias for icon-end.","values":[],"examples":["home","settings","search","edit","check","close"],"deprecated":null},{"name":"icon-start","type":"string","default":"","description":"Logical start icon name.","values":[],"examples":["home","settings","search","edit","check","close"],"deprecated":null},{"name":"loading","type":"boolean","default":"false","description":"Loading state: the spinner at the icon's size in place of the start icon (else the end icon); without an icon it lies over the label, which keeps its place, so the width does not change. Sets aria-busy and disables the native button.","values":[],"examples":[],"deprecated":null},{"name":"native-type","type":"string","default":"button","description":"Native button type attribute.","values":["button","submit","reset"],"examples":[],"deprecated":null},{"name":"radius","type":"string","default":"","description":"Border radius modifier.","values":["default","square","rounded"],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":"Extra classes applied to the inner button element.","values":[],"examples":[],"deprecated":null},{"name":"scheme","type":"string","default":"primary","description":"Which colour family the control takes. What the control is about is the status axis; a status set there wins over this.","values":["primary","secondary","on-surface"],"examples":[],"deprecated":null},{"name":"segment","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":"Button size token.","values":["1/3","1/2","1","2","3"],"examples":[],"deprecated":null},{"name":"spacing","type":"string","default":"normal","description":"Semantic internal spacing profile.","values":["compact","normal","comfortable","spacious"],"examples":[],"deprecated":null},{"name":"status","type":"string","default":"","description":"What the control is about, in the shared status vocabulary. The only one a control paints today is `error`, the destructive one: a control that deletes, discards or cannot be undone.","values":["error"],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":"Template variant name for SfBaseElement external templates.","values":[],"examples":[],"deprecated":null},{"name":"text","type":"string","default":"","description":"Visible button text when no text slot is provided.","values":[],"examples":[],"deprecated":null},{"name":"text-position","type":"string","default":"center","description":null,"values":[],"examples":[],"deprecated":null},{"name":"tightness","type":"string","default":"","description":"Compatibility alias for spacing.","values":["low","high","highest"],"examples":[],"deprecated":null},{"name":"type","type":"string","default":"default","description":"Legacy name for appearance, still honoured. See contracts/public-api-axes.json.","values":["default","tonal","outline","link","surface","ghost"],"examples":[],"deprecated":null}]}, +{"tag":"sf-button-group","id":"smart.button-group","title":"Button group","summary":"A controlled single-selection group built from SF5 buttons.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/actions/button-group/","attributes":[{"name":"appearance","type":"string","default":"default","description":"How the group looks. default joins outlined buttons into one perimeter; segmented draws a sunken track with borderless segments and a plate under the selected one. The selection model, keyboard and events are the same.","values":["default","segmented"],"examples":[],"deprecated":null},{"name":"aria-label","type":"string","default":"","description":"Accessible name for the group.","values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":"Disables the whole group.","values":[],"examples":[],"deprecated":null},{"name":"full-width","type":"boolean","default":"false","description":"In the segmented appearance, the track fills its container and the segments share the width equally.","values":[],"examples":[],"deprecated":null},{"name":"items","type":"array","default":"[]","description":"Selectable items with stable value, label, icon, count, icon-only, disabled and loading fields.","values":[],"examples":["[{\"value\":\"list\",\"label\":\"List\",\"icon\":\"list\"},{\"value\":\"grid\",\"label\":\"Grid\",\"icon\":\"grid_view\"}]","[{\"value\":\"all\",\"label\":\"Все\",\"count\":24},{\"value\":\"light\",\"label\":\"Светлые\",\"count\":17},{\"value\":\"dark\",\"label\":\"Тёмные\",\"count\":7}]"],"deprecated":null},{"name":"name","type":"string","default":"","description":"Native form field name: the group submits its value with its form, a form reset restores the initial value, and a disabled group is left out.","values":[],"examples":[],"deprecated":null},{"name":"orientation","type":"string","default":"horizontal","description":"Layout and keyboard navigation orientation.","values":["horizontal","vertical"],"examples":[],"deprecated":null},{"name":"plate","type":"string","default":"scheme","description":"The selected segment's plate in the segmented appearance: the scheme's fill, or a raised neutral surface with its shadow.","values":["scheme","raised"],"examples":[],"deprecated":null},{"name":"radius","type":"string","default":"","description":"Corner radius, as on sf-button: empty is the UI radius. In the segmented appearance the plate, a button-sized segment, takes the radius a button of that value has, and the track is it plus the padding (rounded: both pills).","values":["default","square","rounded"],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":"Extra classes applied to the group root.","values":[],"examples":[],"deprecated":null},{"name":"scheme","type":"string","default":"primary","description":"Color scheme for the selected button, and for the selected plate in the segmented appearance.","values":["primary","secondary","on-surface"],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":"Shared button size token.","values":["1/3","1/2","1","2","3"],"examples":[],"deprecated":null},{"name":"spacing","type":"string","default":"normal","description":"Shared semantic internal spacing profile.","values":["compact","normal","comfortable","spacious"],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":"Template variant name.","values":[],"examples":[],"deprecated":null},{"name":"theme-switch","type":"boolean","default":"false","description":"A ready theme switch: the group draws its own three icon-only items (system, light, dark) named in the page language, selects SF.Loader's theme preference and follows sf-theme-change, and a choice calls SF.Loader.setTheme. items is ignored.","values":[],"examples":[],"deprecated":null},{"name":"tightness","type":"string","default":"","description":"Compatibility alias for spacing.","values":["low","high","highest"],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"","description":"Currently selected item value.","values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-checkbox","id":"smart.checkbox","title":"Checkbox","summary":"A native checkbox with a label, Framework presentation and checked, indeterminate and disabled states kept in step between the host attributes and the inner input.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/forms/checkbox/","attributes":[{"name":"aria-label","type":"string","default":"","description":"Accessible name for a checkbox rendered without a visible label.","values":[],"examples":[],"deprecated":null},{"name":"checked","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"description","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"error","type":"boolean","default":"false","description":"Invalid state; the native input publishes aria-invalid.","values":[],"examples":[],"deprecated":null},{"name":"help","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"indeterminate","type":"boolean","default":"false","description":"Mixed visual state for a checkbox that summarizes related options.","values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"name","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"position","type":"string","default":"start","description":"Logical placement of the indicator relative to its text.","values":["start","end"],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":"Checkbox size token.","values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-close","id":"smart.close","title":"Close","summary":"The decorative cross glyph of a close action, sized on the control ladder. It is aria-hidden and never focusable; the containing native button owns the action and its name.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/actions/close/","attributes":[{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1/3","description":"Decorative close-glyph size token.","values":["1/4","1/3","1/2","1","2","3","4","5","6","7"],"examples":[],"deprecated":null}]}, +{"tag":"sf-color","id":"smart.color","title":"Color","summary":"A colour control: a swatch that opens the platform picker, the colours a product already has as presets, and a way back to an inherited colour. Built as a general part because a colour is set in a theme, in a site look, on a label and on a chart series, not only on a record.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/forms/color/","attributes":[{"name":"appearance","type":"string","default":"bordered","description":"How the swatch is bounded.","values":["bordered","outlined","plain"],"examples":[],"deprecated":null},{"name":"choose-label","type":"string","default":"","description":"The words on the swatch. Unset, the component answers in the page's language (\"Choose a colour\" in English).","values":[],"examples":[],"deprecated":null},{"name":"clear-label","type":"string","default":"","description":"The words on the control that returns to the inherited colour. Unset, it follows the page's language.","values":[],"examples":[],"deprecated":null},{"name":"clearable","type":"boolean","default":"false","description":"Whether a chosen colour can be returned to the inherited one.","values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"inherited-text","type":"string","default":"","description":"What is read in place of a value while nothing is chosen. Unset, it follows the page's language.","values":[],"examples":[],"deprecated":null},{"name":"inherited-value","type":"string","default":"","description":"The colour that applies while nothing is chosen. Shown as inherited rather than drawn as the value: a control that drew it as the value would make «not set» and «set to the same colour» look identical, and only one of them follows the theme when the theme changes.","values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":"The accessible name of the control.","values":[],"examples":[],"deprecated":null},{"name":"name","type":"string","default":"","description":"The form name. A hidden input carries the value under it, empty while the inherited colour applies.","values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":"The size ladder step, so a colour beside a text field lines up with it.","values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"swatches","type":"string","default":"","description":"The colours a product already has, comma separated, each #hex or #hex|Name; a name may hold spaces. A piece without a name may list several colours by spaces. A person picks the brand colour rather than matching a hex by eye.","values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":"Which template draws it.","values":[],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"","description":"The colour, as #rgb, #rrggbb or #rrggbbaa. Empty means nothing is chosen and the inherited colour applies.","values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-composition-overlay","id":"smart.composition-overlay","title":"Composition overlay","summary":"Editor chrome over a rendered Composition Document: frames, labels, badges, action toolbar, insertion places, drag and keyboard moves and a keyboard tree, without changing the canvas HTML.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/editor/composition-overlay/","attributes":[{"name":"accepts","type":"string","default":"","description":"sf-sortable groups whose items may be dropped on insertion places","values":[],"examples":[],"deprecated":null},{"name":"for","type":"string","default":"","description":"id of the canvas element that holds SF.Composition.render output","values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-context-menu","id":"smart.context-menu","title":"Context Menu","summary":"The Framework's action menu: data entries with icon, caption, value, shortcut, check, submenu, separator and heading, opened by openFor() into the top layer, anchored, with keyboard, typeahead and focus return. A host may still render its own items and own the lifecycle.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/navigation/context-menu/","attributes":[{"name":"active-tab","type":"string","default":"","description":"The chosen tab's id or index; the host renders that tab's rows into the content slot.","values":[],"examples":[],"deprecated":null},{"name":"aria-label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"closable","type":"boolean","default":"false","description":"A close button at the end of the panel's head.","values":[],"examples":[],"deprecated":null},{"name":"content-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"entries","type":"array","default":"[]","description":"The menu as data (set as a property, or JSON in the attribute). See item_contract. When present, it replaces items and the content slot.","values":[],"examples":[],"deprecated":null},{"name":"items","type":"array","default":"[]","description":null,"values":[],"examples":[],"deprecated":null},{"name":"popup","type":"boolean","default":"false","description":"Not drawn until opened through openFor(). A menu without it is drawn in place, as before.","values":[],"examples":[],"deprecated":null},{"name":"position","type":"string","default":"","description":"Deprecated: a menu has no tail since 1.3.0 (owner, 2026-10-12); the value is kept for its class and draws nothing.","values":["inline-start","inline-start-top","inline-start-bottom","inline-end","inline-end-top","inline-end-bottom","top","top-inline-start","top-inline-end","bottom","bottom-inline-start","bottom-inline-end","start","end","top-start","top-end","bottom-start","bottom-end","left","left-top","left-bottom","right","right-top","right-bottom","top-left","top-center","top-right","bottom-left","bottom-center","bottom-right","left-start","left-end","right-start","right-end","inline-start-start","inline-start-end","inline-end-start","inline-end-end"],"examples":[],"deprecated":{"since":"1.3.0","replacement":"openFor(anchor, {side, align}) places the menu; no tail is drawn"}},{"name":"role","type":"string","default":"menu","description":null,"values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"search","type":"object","default":"null","description":"{placeholder, empty, remote}: a search field above the rows (set as a property). Local by default; with remote: true the menu raises sf-context-menu-search {query} and shows the entries the host sets. A submenu entry passes it with `search`.","values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1/2","description":"The menu's size: rows as tall as a field of that size (32px at 1/2, 40px at 1), its text, insets, search and footer. A submenu takes its parent's size.","values":["1/2","1"],"examples":[],"deprecated":null},{"name":"tabs","type":"string | array","default":"","description":"A panel with tabs: labels separated by |, or [{id, label}] as a property. The head (tabs and the close button) and the footer never scroll, the body does, and the panel keeps a fixed width (a ladder step, or width) whatever a tab holds.","values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"text","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"tooltip","type":"boolean","default":"true","description":"Deprecated: a menu has no tail since 1.3.0 (owner, 2026-10-12); the value is kept for its class and draws nothing.","values":[],"examples":[],"deprecated":{"since":"1.3.0","replacement":"none: a menu has no tail"}},{"name":"width","type":"string","default":"content","description":"How wide openFor() opens the menu: content (its longest line, between --sf-context-menu--min-inline-size and --sf-context-menu--max-inline-size), trigger (exactly the control that opened it; a long line ends in an ellipsis) or a CSS length. openFor(anchor, {width}) overrides it.","values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-copy-button","id":"smart.copy-button","title":"Copy button","summary":"Copies a value or a target's text, confirms with a check and a polite announcement, and selects the text for Ctrl+C when the browser refuses the clipboard.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/actions/copy-button/","attributes":[{"name":"appearance","type":"string","default":"link","description":null,"values":["link","ghost","outline","tonal"],"examples":[],"deprecated":null},{"name":"duration","type":"string","default":"2000","description":"Milliseconds the result stays.","values":[],"examples":[],"deprecated":null},{"name":"error-text","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"icon","type":"string","default":"content_copy","description":"The resting glyph: link, key, ...","values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":"The accessible name, saying what is copied («Скопировать команду»); «Копировать» / Copy by default.","values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1/2","description":null,"values":["1/3","1/2","1","2"],"examples":[],"deprecated":null},{"name":"success-icon","type":"string","default":"check","description":null,"values":[],"examples":[],"deprecated":null},{"name":"success-text","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"target","type":"string","default":"","description":"#id of an input (its value) or an element (its text; a numbered code block without its numbers). value and target together are an error.","values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"text","type":"string","default":"","description":"A visible label; empty draws an icon-only button.","values":[],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"","description":"The text to copy.","values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-country-code","id":"smart.country-code","title":"Country Code","summary":"A telephone field with a country picker: a button opens a searchable listbox of countries, and the chosen country sets the dial code, flag and, optionally, the input mask of the native tel input.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/forms/country-code/","attributes":[{"name":"dial-code","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"flag-base","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"form","type":"string","default":"","description":"Optional id of the native owning form when the field is outside it.","values":[],"examples":[],"deprecated":null},{"name":"hint","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"iso2","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"lazy-flags","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"locale","type":"string","default":"","description":"Language of the country names and the field's own words: ru or en. When not set it follows the page: Russian on a Russian page, English otherwise.","values":[],"examples":[],"deprecated":null},{"name":"mask-pattern","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"mask-placeholder-char","type":"string","default":"_","description":null,"values":[],"examples":[],"deprecated":null},{"name":"mask-style","type":"string","default":"native","description":null,"values":[],"examples":[],"deprecated":null},{"name":"max-items","type":"number","default":"0","description":null,"values":[],"examples":[],"deprecated":null},{"name":"multi-country","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"name","type":"string","default":"","description":"Native input name used by FormData and form submission.","values":[],"examples":[],"deprecated":null},{"name":"open","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"placeholder","type":"string","default":"+7(___)___-__-__","description":null,"values":[],"examples":[],"deprecated":null},{"name":"required","type":"boolean","default":"false","description":"Native required phone input; the country prefix alone does not satisfy the requirement.","values":[],"examples":[],"deprecated":null},{"name":"show-code","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"show-mask-placeholder","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":null,"values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"use-country-masks","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"use-mask","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-datepicker","id":"smart.datepicker","title":"Datepicker","summary":"Accessible date and date-range picker with popup and inline presentation, calendar navigation and host-owned values.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/forms/datepicker/","attributes":[{"name":"close-on-select","type":"boolean","default":"true","description":"Close the panel once a date (or a range end) is chosen.","values":[],"examples":[],"deprecated":null},{"name":"context","type":"string","default":"","description":"Which grid the panel opens on: days (empty), month or year.","values":["month","year"],"examples":[],"deprecated":null},{"name":"date","type":"string","default":"","description":"The ISO date (yyyy-mm-dd) chosen; value is read when date is absent.","values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":"Disable the field and the panel.","values":[],"examples":[],"deprecated":null},{"name":"end-value","type":"string","default":"","description":"Range only: the ISO end date.","values":[],"examples":[],"deprecated":null},{"name":"format","type":"string","default":"DD.MM.YYYY","description":"How the date is shown in the field, e.g. DD.MM.YYYY. The value stays ISO.","values":[],"examples":[],"deprecated":null},{"name":"icon-start","type":"string","default":"calendar_today","description":"The icon at the start of the field; the canonical name for left-icon.","values":[],"examples":[],"deprecated":null},{"name":"input","type":"boolean","default":"true","description":"Draw the text field; without it only the panel is drawn.","values":[],"examples":[],"deprecated":null},{"name":"input-name","type":"string","default":"","description":"The form field name of the value; wins over name.","values":[],"examples":[],"deprecated":null},{"name":"input-root-class","type":"string","default":"","description":"Classes added to the field's root.","values":[],"examples":[],"deprecated":null},{"name":"input-size","type":"string","default":"1","description":"Legacy name for size, still honoured; size wins when both are set. See contracts/public-api-axes.json.","values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"input-type","type":"string","default":"bordered","description":"The field's appearance (bordered by default), as on sf-inputs.","values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":"The field's visible label.","values":[],"examples":[],"deprecated":null},{"name":"left-icon","type":"string","default":"calendar_today","description":"Legacy name for icon-start, still honoured; icon-start wins when both are set.","values":[],"examples":[],"deprecated":null},{"name":"locale","type":"string","default":"","description":"The language of month and day names; defaults to the page language.","values":[],"examples":[],"deprecated":null},{"name":"mask","type":"boolean","default":"false","description":"Mask what can be typed in the field to the format.","values":[],"examples":[],"deprecated":null},{"name":"mask-lazy","type":"boolean","default":"false","description":"Show the mask's placeholder characters only as they are typed.","values":[],"examples":[],"deprecated":null},{"name":"mask-options","type":"string","default":"","description":"Further mask options as JSON, passed to the field's mask.","values":[],"examples":[],"deprecated":null},{"name":"mask-pattern","type":"string","default":"00.00.0000","description":"Input mask; when not set it is derived from format, so the default format DD.MM.YYYY gives 00.00.0000.","values":[],"examples":[],"deprecated":null},{"name":"mask-placeholder-char","type":"string","default":"_","description":"The character that stands for a position not yet typed.","values":[],"examples":[],"deprecated":null},{"name":"max-date","type":"string","default":"","description":"The latest ISO date that can be chosen; later days are disabled.","values":[],"examples":[],"deprecated":null},{"name":"min-date","type":"string","default":"","description":"The earliest ISO date that can be chosen; earlier days are disabled.","values":[],"examples":[],"deprecated":null},{"name":"month","type":"number","default":"null","description":"The month shown when the panel opens, 0-11; defaults to the chosen date's month, else the current one.","values":[],"examples":[],"deprecated":null},{"name":"name","type":"string","default":"","description":"The form field name of the value. input-name is the same and wins when both are set.","values":[],"examples":[],"deprecated":null},{"name":"open","type":"boolean","default":"false","description":"Whether the panel is open.","values":[],"examples":[],"deprecated":null},{"name":"placeholder","type":"string","default":"","description":"The field's placeholder text.","values":[],"examples":[],"deprecated":null},{"name":"portal","type":"boolean","default":"true","description":"Draw the panel at the end of the document so no clipping ancestor cuts it.","values":[],"examples":[],"deprecated":null},{"name":"preset","type":"string","default":"","description":"The chosen quick range's id. Set by a host it wins over start-value and end-value, and a relative one is resolved against today in the person's time zone when drawn; nothing is emitted for it.","values":[],"examples":[],"deprecated":null},{"name":"presets","type":"string | array","default":"","description":"Range only: quick ranges beside the grid. Built-in ids, comma separated (today, yesterday, last-7-days, last-30-days, this-week, this-month, last-month), or as a property [{id, label, relative} | {id, label, range: [from, to]}]. Clamped to min-date and max-date; a range with nothing left is disabled.","values":[],"examples":[],"deprecated":null},{"name":"range","type":"boolean","default":"false","description":"Pick a start and an end instead of one date.","values":[],"examples":[],"deprecated":null},{"name":"required","type":"boolean","default":"false","description":"Mark the field required in its form.","values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":"Classes added to the component's root.","values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":"Form size of the field.","values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"start-value","type":"string","default":"","description":"Range only: the ISO start date.","values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":"Which template draws it.","values":[],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"","description":"The ISO date (yyyy-mm-dd). As a property, [start, end] for a range; the attribute is the same as date.","values":[],"examples":[],"deprecated":null},{"name":"week-start","type":"number","default":"null","description":"The first day of the week, 0 Sunday to 6 Saturday (1 Monday). Without the attribute it follows the page's language (ru: Monday, en-US: Sunday, ar-EG: Saturday).","values":[],"examples":[],"deprecated":null},{"name":"year","type":"number","default":"null","description":"The year shown when the panel opens; defaults to the chosen date's year, else the current one.","values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-download-file","id":"smart.download-file","title":"Download File","summary":"Native file download or application-owned file preparation action.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/actions/download-file/","attributes":[{"name":"aria-label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":"Render a disabled button with no live destination.","values":[],"examples":[],"deprecated":null},{"name":"download","type":"boolean","default":"false","description":"Apply native download semantics to an anchor destination.","values":[],"examples":[],"deprecated":null},{"name":"file-name","type":"string","default":"File.pdf","description":"Visible filename and default native download name.","values":[],"examples":[],"deprecated":null},{"name":"file-size","type":"string","default":"","description":"Known human-readable size. Pass it when available to avoid discovery.","values":[],"examples":[],"deprecated":null},{"name":"href","type":"string","default":"","description":"Real resource destination; renders a native anchor when enabled.","values":[],"examples":[],"deprecated":null},{"name":"icon","type":"string","default":"download","description":"Decorative icon name.","values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":"Existing compact-to-prominent component size scale.","values":["1/3","1/2","1","2","3"],"examples":[],"deprecated":null},{"name":"target","type":"string","default":"_blank","description":null,"values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-drawer","id":"smart.drawer","title":"Drawer","summary":"Workspace side panel that keeps the page usable: docked column or modeless panel. Modal side panels belong to sf-modal; the modal Drawer mode is deprecated.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/overlays/drawer/","attributes":[{"name":"body-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"close-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"close-label","type":"string","default":"","description":"Empty: the text of the page's language (\"Close drawer\" in English).","values":[],"examples":[],"deprecated":null},{"name":"close-on-esc","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"close-on-overlay","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"close-placement","type":"string","default":"inside","description":null,"values":["inside","outside"],"examples":[],"deprecated":null},{"name":"docked","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"gutter","type":"string","default":"","description":"The inline gutter the head and the body share, as a length (for example var(--sf-space-3)), so the title and the content start on one axis. Empty: the drawer's own, space-1. A theme may set --sf-drawer-gutter instead.","values":[],"examples":[],"deprecated":null},{"name":"header-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"modal","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"open","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"overlay","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"overlay-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"panel-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"panel-style","type":"string","default":"","description":"Declarations set on the panel itself, for the custom properties it reads -- its background, radius, shadow. A consumer painting its content a different colour than the panel leaves the head and the gutters in the other one.","values":[],"examples":[],"deprecated":null},{"name":"placement","type":"string","default":"right","description":null,"values":["left","right","inline-start","inline-end"],"examples":[],"deprecated":null},{"name":"preserve-scroll-gap","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"show-close","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":null,"values":["1/2","1","2","full"],"examples":[],"deprecated":null},{"name":"stack-offset","type":"string","default":"","description":"How much of each drawer below shows past the one above it at the same edge, as a length (for example var(--sf-space-4)). A drawer stands depth × offset in from its edge, where depth counts the open, undocked drawers below it at that edge. Empty: drawers lie flush.","values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"title","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"width","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"z-index","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-dropdown","id":"smart.dropdown","title":"Dropdown","summary":"Accessible single or multiple selection control with searchable options and optional portal projection.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/navigation/dropdown/","attributes":[{"name":"appearance","type":"string","default":"outlined","description":"How the dropdown looks: a filled field or an outlined one.","values":["filled","outlined"],"examples":[],"deprecated":null},{"name":"aria-label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"columns","type":"string","default":"6","description":"How many options a row holds in the grid layout. Ignored in a list.","values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"layout","type":"string","default":"list","description":"How the options are laid out. A list is one option a row; a grid puts several in a row, which is the only way a hundred glyphs can be looked at -- a column of them is a column nobody scrolls to the end of. In a grid an option shows its picture and keeps its text as the name a search reads and a pointer sees.","values":["list","grid"],"examples":[],"deprecated":null},{"name":"mode","type":"string","default":"select","description":null,"values":["tag","select"],"examples":[],"deprecated":null},{"name":"multiple","type":"boolean","default":"false","description":"Allow several values while preserving their serialized selection order. Tag mode is multiple by default.","values":[],"examples":[],"deprecated":null},{"name":"name","type":"string","default":"","description":"Native form field name for the selected machine value.","values":[],"examples":[],"deprecated":null},{"name":"options","type":"array","default":"[]","description":"Options given as data instead of as sf-list-item children: [{text, value, type?, size?, icon?, selected?, disabled?, colorClass?, avatarImageUrl?, avatarTitle?, ariaLabel?, group?}]. A string or a number is taken as both the label and the value. A parent that renders this dropdown from a template passes its options this way, because capturing child elements means removing them, and the parent can then no longer put a changed list back. Options carrying the same `group`, one after another, are drawn under one heading, so a long list says where each stretch of it comes from instead of repeating that in every row.","values":[],"examples":[],"deprecated":null},{"name":"placeholder","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"portal","type":"boolean","default":"true","description":"Anchor the popup with the shared Framework positioning (SF.Position): native top layer, flip, shift and viewport-limited height. On by default; portal=\"false\" keeps the in-flow list.","values":[],"examples":[],"deprecated":null},{"name":"required","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"search","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"search-placeholder","type":"string","default":"","description":"Empty: the text of the page's language (\"Search\" in English).","values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":null,"values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"type","type":"string","default":"outlined","description":"Legacy name for appearance, still honoured. See contracts/public-api-axes.json.","values":["filled","outlined"],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"","description":"Selected machine value, or a comma-separated list of values for multiple selection.","values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-empty-state","id":"smart.empty-state","title":"Empty state","summary":"What a list, a panel or a page says when it has nothing to show: no data, nothing found, no access or an error, with an icon, a real heading, a sentence and actions.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/feedback/empty-state/","attributes":[{"name":"heading-level","type":"string","default":"3","description":"The title's outline level; its look follows the size.","values":["2","3","4","5","6"],"examples":[],"deprecated":null},{"name":"icon","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"kind","type":"string","default":"no-data","description":"The reason, which picks the default icon, title and text, and for error a «Повторить» action.","values":["no-data","nothing-found","no-access","error"],"examples":[],"deprecated":null},{"name":"layout","type":"string","default":"block","description":"inline: one line for a list inside a menu, a dropdown or a search -- a small icon, the words and at most one link action, no heading.","values":["block","inline"],"examples":[],"deprecated":null},{"name":"live","type":"string","default":"auto","description":"auto: nothing-found and error are a polite status, the others say nothing; alert: an error the person caused; off: the host announces it.","values":["auto","alert","off"],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":"1/3 is always the inline form; 1/2 inside a table or panel, 2 for a whole page: the icon, title role, text and gaps follow.","values":["1/3","1/2","1","2"],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"text","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"title","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-file-preview","id":"smart.file-preview","title":"File Preview","summary":"Accessible Smart projection of the ordinary File Preview row.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/content/file-preview/","attributes":[{"name":"actions","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"aria-label","type":"string","default":"","description":"Empty: the text of the page's language (\"File\" in English).","values":[],"examples":[],"deprecated":null},{"name":"avatar-size","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"compact","type":"boolean","default":"false","description":"Only the leading visual, as tall as a list row's line: the image, or the file's extension in a tile. For a file in a table cell.","values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"download","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"download-action","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"download-label","type":"string","default":"","description":"Empty: the text of the page's language (\"Download file\" in English).","values":[],"examples":[],"deprecated":null},{"name":"file-name","type":"string","default":"File","description":null,"values":[],"examples":[],"deprecated":null},{"name":"file-size","type":"string","default":"","description":"The file's size as text, for example 12 KB.","values":[],"examples":[],"deprecated":null},{"name":"href","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"icon","type":"string","default":"description","description":null,"values":[],"examples":[],"deprecated":null},{"name":"image-url","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"kind","type":"string","default":"auto","description":"What the preview shows: an icon, the image itself, or whichever suits the file.","values":["auto","icon","image"],"examples":[],"deprecated":null},{"name":"mime-type","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"name","type":"string","default":"File","description":null,"values":[],"examples":[],"deprecated":null},{"name":"open","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":{"since":"1.0.0","replacement":null}},{"name":"remove-action","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"remove-label","type":"string","default":"","description":"Empty: the text of the page's language (\"Remove file\" in English).","values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"","description":"Legacy name for file-size: the file's own size as text (\"12 KB\"), not the size ladder. Still honoured; pass file-size.","values":[],"examples":[],"deprecated":null},{"name":"surface","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"target","type":"string","default":"_blank","description":null,"values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"type","type":"string","default":"auto","description":"Legacy name for kind, still honoured. See contracts/public-api-axes.json.","values":["auto","icon","image"],"examples":[],"deprecated":null}]}, +{"tag":"sf-file-upload","id":"smart.file-upload","title":"File Upload","summary":"A drop area that opens the platform file dialog or takes dropped files, filtered by accept, and lists each file with its upload progress, an error with a retry, and removal. The host uploads; the component shows the state the host sets.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/forms/file-upload/","attributes":[{"name":"accept","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"aria-label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"formats","type":"string","default":"","description":"Formats line shown under the action. When not set it is derived from accept, and is empty when neither is given: the component names no formats it cannot know.","values":[],"examples":[],"deprecated":null},{"name":"icon","type":"string","default":"upload_file","description":null,"values":[],"examples":[],"deprecated":null},{"name":"link-text","type":"string","default":"","description":"Empty: the text of the page's language (\"Click to upload\" in English).","values":[],"examples":[],"deprecated":null},{"name":"multiple","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":null,"values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"supporting-text","type":"string","default":"","description":"Supporting line; falls back to formats.","values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"text","type":"string","default":"or drag and drop","description":null,"values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-gallery","id":"smart.gallery","title":"Gallery","summary":"An ordered media collection shown in an inline Slider, with an optional Modal lightbox holding a second Slider. The gallery owns the one-based current slide and keeps both views on it.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/content/gallery/","attributes":[{"name":"arrows","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"blur","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"blur-type","type":"string","default":"medium","description":null,"values":["none","small","medium","large"],"examples":[],"deprecated":null},{"name":"body-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"button-size","type":"string","default":"1","description":null,"values":[],"examples":[],"deprecated":null},{"name":"button-type","type":"string","default":"primary","description":null,"values":[],"examples":[],"deprecated":null},{"name":"close-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"close-on-esc","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"close-on-overlay","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"content-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"current","type":"number","default":"1","description":null,"values":[],"examples":[],"deprecated":null},{"name":"dots","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"dots-size","type":"string","default":"2","description":null,"values":[],"examples":[],"deprecated":null},{"name":"dots-type","type":"string","default":"primary-dark","description":null,"values":[],"examples":[],"deprecated":null},{"name":"footer-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"fullscreen","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"header-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"height","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"inline","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"inline-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"lightbox","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"lightbox-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"loop","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"modal-id","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"open","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"overlay","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"overlay-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"panel-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"position","type":"string","default":"center","description":null,"values":["center","left","right","top","bottom"],"examples":[],"deprecated":null},{"name":"preserve-scroll-gap","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"show-close","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"show-header","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"slide-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"space-between","type":"number","default":"12","description":null,"values":[],"examples":[],"deprecated":null},{"name":"speed","type":"number","default":"450","description":null,"values":[],"examples":[],"deprecated":null},{"name":"surface-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"surface-padding","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"text","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"thumb-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"thumbs","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"thumbs-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"title","type":"string","default":"Gallery","description":null,"values":[],"examples":[],"deprecated":null},{"name":"width","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-help-mark","id":"smart.help-mark","title":"Help mark","summary":"A «?» beside a label that opens a short explanation on a press -- a toggletip -- announced politely, closed by Escape, a second press or a click outside.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/feedback/help-mark/","attributes":[{"name":"label","type":"string","default":"","description":"The button's accessible name; «Подробнее» / More information by default, best naming the subject («Подробнее: код решения»).","values":[],"examples":[],"deprecated":null},{"name":"placement","type":"string","default":"auto","description":null,"values":["auto","top","bottom","start","end"],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1/2","description":null,"values":["1/3","1/2","1"],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"text","type":"string","default":"","description":"The explanation; slot `content` takes links or lists instead.","values":[],"examples":[],"deprecated":null},{"name":"title","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-icon","id":"smart.icons","title":"Icons","summary":"Semantic Material Symbol wrapper with exact Loader tracking, accessible decorative or informative modes and token-owned geometry.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/content/icons/","attributes":[{"name":"filled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"grade","type":"number","default":"0","description":null,"values":[],"examples":[],"deprecated":null},{"name":"icon","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"loaded","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"optical-size","type":"number","default":"24","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"","description":null,"values":["1/4","1/3","1/2","1","2","3","4","5","6","7"],"examples":[],"deprecated":null},{"name":"type","type":"string","default":"","description":null,"values":["outlined","rounded","sharp","shape"],"examples":[],"deprecated":null},{"name":"weight","type":"number","default":"400","description":null,"values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-icon-button","id":"smart.icon-buttons","title":"Icon Buttons","summary":"Native icon-only action with token geometry, accessible naming and shared loading semantics.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/actions/icon-buttons/","attributes":[{"name":"appearance","type":"string","default":"default","description":"How the icon button looks. Surface and ghost read the neutral alpha ramp: surface keeps a faint fill and a border, ghost keeps nothing until it is hovered or focused.","values":["default","tonal","outline","link","surface","ghost"],"examples":[],"deprecated":null},{"name":"aria-label","type":"string","default":"","description":"Accessible label.","values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":"Disabled state flag.","values":[],"examples":[],"deprecated":null},{"name":"filled","type":"boolean","default":"false","description":"Use the filled glyph axis for the standard icon variant.","values":[],"examples":[],"deprecated":null},{"name":"icon","type":"string","default":"add","description":"Material icon name.","values":[],"examples":[],"deprecated":null},{"name":"kind","type":"string","default":"icon","description":"What the icon button is: an ordinary icon action or a close control.","values":["icon","close"],"examples":[],"deprecated":null},{"name":"loading","type":"boolean","default":"false","description":"Loading state: the spinner in place of the icon, at the icon's size. Sets aria-busy and disables the native button.","values":[],"examples":[],"deprecated":null},{"name":"native-type","type":"string","default":"button","description":"Native button type attribute.","values":["button","submit","reset"],"examples":[],"deprecated":null},{"name":"radius","type":"string","default":"","description":"Border radius modifier.","values":["default","square","rounded"],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":"Extra classes applied to the inner icon button element.","values":[],"examples":[],"deprecated":null},{"name":"scheme","type":"string","default":"primary","description":"Which colour family the control takes. What the control is about is the status axis; a status set there wins over this.","values":["primary","secondary","on-surface"],"examples":[],"deprecated":null},{"name":"segment","type":"string","default":"","description":"Joined-control position owned by Button Group composition.","values":["start","middle","end"],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":"Icon button size token.","values":["1/3","1/2","1","2","3"],"examples":[],"deprecated":null},{"name":"spacing","type":"string","default":"normal","description":"Semantic internal spacing profile.","values":["compact","normal","comfortable","spacious"],"examples":[],"deprecated":null},{"name":"status","type":"string","default":"","description":"What the control is about, in the shared status vocabulary. The only one a control paints today is `error`, the destructive one: a control that deletes, discards or cannot be undone.","values":["error"],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":"Template variant name for SfBaseElement external templates.","values":[],"examples":[],"deprecated":null},{"name":"tightness","type":"string","default":"","description":"Compatibility alias for spacing.","values":["low","high","highest"],"examples":[],"deprecated":null},{"name":"type","type":"string","default":"default","description":"Legacy name for appearance, still honoured. See contracts/public-api-axes.json.","values":["default","tonal","outline","link","surface","ghost"],"examples":[],"deprecated":null},{"name":"variant","type":"string","default":"icon","description":"Legacy name for kind, still honoured. See contracts/public-api-axes.json.","values":["icon","close"],"examples":[],"deprecated":null}]}, +{"tag":"sf-input","id":"smart.inputs","title":"Inputs","summary":"A native single-line form control with Framework presentation, validation messaging and optional mask integration.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/forms/inputs/","attributes":[{"name":"appearance","type":"string","default":"bordered","description":"How the field looks: a bordered box, a filled one, or hidden.","values":["bordered","filled","hidden"],"examples":[],"deprecated":null},{"name":"autocomplete","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"default-value","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"error","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"error-message","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"hint","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"hint-icon","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"icon-start","type":"string","default":"null","description":null,"values":[],"examples":[],"deprecated":null},{"name":"input-type","type":"string","default":"text","description":null,"values":["text","email","password","search","tel","url"],"examples":[],"deprecated":null},{"name":"inputmode","type":"string","default":"","description":null,"values":["none","text","tel","url","email","numeric","decimal","search"],"examples":[],"deprecated":null},{"name":"invalid","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"left-icon","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"mask","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"mask-lazy","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"mask-options","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"mask-pattern","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"mask-placeholder-char","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"maxlength","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"minlength","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"name","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"pattern","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"placeholder","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"readonly","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"required","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"right-text","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":null,"values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"text-end","type":"string","default":"null","description":null,"values":[],"examples":[],"deprecated":null},{"name":"type","type":"string","default":"bordered","description":"Legacy name for appearance, still honoured. See contracts/public-api-axes.json.","values":["bordered","filled","hidden"],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-list-item","id":"smart.list-item","title":"List Item","summary":"Declarative option descriptor and visual row primitive owned by Dropdown.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/content/list-item/","attributes":[{"name":"aria-label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"avatar-image-url","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"avatar-title","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"checked","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"color-class","type":"string","default":"bg-tertiary","description":null,"values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"icon","type":"string","default":"person","description":null,"values":[],"examples":[],"deprecated":null},{"name":"kind","type":"string","default":"text","description":"What the list item carries: plain text, an icon, a checkbox, an avatar or a colour.","values":["text","icon","checkbox","avatar","color"],"examples":[],"deprecated":null},{"name":"selected","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":null,"values":["1/3","1/2","1","2","3"],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"text","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"type","type":"string","default":"text","description":"Legacy name for kind, still honoured. See contracts/public-api-axes.json.","values":["text","icon","checkbox","avatar","color"],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-modal","id":"smart.modal","title":"Modal","summary":"A dialog window over the page in the shared modal stack: centered or at a side, top or bottom edge, with header, content and footer slots, focus trap, scroll lock and focus return. It can also be minimized, load its content by Ajax or into an iframe, or render inline in the page flow.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/overlays/modal/","attributes":[{"name":"aria-label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"autoload","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"blur","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"blur-type","type":"string","default":"medium","description":null,"values":["none","small","medium","large"],"examples":[],"deprecated":null},{"name":"body-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"close-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"close-on-esc","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"close-on-overlay","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"content-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"display","type":"string","default":"modal","description":null,"values":["modal","inline"],"examples":[],"deprecated":null},{"name":"footer-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"fullscreen","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"header-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"height","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"hide","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"hide-modifier","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"minimized","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"modal-id","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"mode","type":"string","default":"inline","description":null,"values":["inline","ajax","iframe"],"examples":[],"deprecated":null},{"name":"open","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"overlay","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"overlay-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"overlay-preset","type":"string","default":"default","description":null,"values":["default","focus"],"examples":[],"deprecated":null},{"name":"panel-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"position","type":"string","default":"center","description":null,"values":["center","left","right","inline-start","inline-end","top","bottom"],"examples":[],"deprecated":null},{"name":"preload","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"preserve-scroll-gap","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"show-close","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"show-footer","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"show-header","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"src","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"surface-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"surface-padding","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"text","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"title","type":"string","default":"","description":"Empty: the text of the page's language (\"Dialog\" in English).","values":[],"examples":[],"deprecated":null},{"name":"unclose","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"width","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-page-header","id":"smart.page-header","title":"Page header","summary":"The head of an admin page: path, heading, count, favourite star, install mark and main action. Replaces the admin top bar together with sf-admin-menu.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/composite/page-header/","attributes":[{"name":"count","type":"string","default":"","description":"How many records the page holds; empty draws no count. The admin menu carries no totals, so this is where they are.","values":[],"examples":[],"deprecated":null},{"name":"heading","type":"string","default":"","description":"The page heading.","values":[],"examples":[],"deprecated":null},{"name":"level","type":"string","default":"site","description":"install marks a page shared by every site.","values":["site","install"],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"star","type":"string","default":"","description":"Empty draws no star; off and on draw it in that state.","values":["off","on"],"examples":[],"deprecated":null}]}, +{"tag":"sf-pagination","id":"smart.pagination","title":"Pagination","summary":"Source-driven navigation for a collection split into numbered pages.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/navigation/pagination/","attributes":[{"name":"action","type":"string","default":"","description":"Selected batch-action value.","values":[],"examples":[],"deprecated":null},{"name":"action-apply-text","type":"string","default":"","description":"Label of the batch-action apply button. Empty: the text of the page's language (\"Apply\" in English).","values":[],"examples":[],"deprecated":null},{"name":"action-choose-label","type":"string","default":"","description":"Placeholder of the batch-action selector, shown until an action is chosen. Empty: the text of the page's language (\"Choose an action\" in English).","values":[],"examples":[],"deprecated":null},{"name":"action-for-all","type":"boolean","default":"false","description":"Current all-items toggle value.","values":[],"examples":[],"deprecated":null},{"name":"action-for-all-label","type":"string","default":"","description":"Label of the all-items toggle. Empty: the text of the page's language (\"For all\" in English).","values":[],"examples":[],"deprecated":null},{"name":"actions","type":"string","default":"","description":"Pipe-separated compatible batch-action definitions.","values":[],"examples":[],"deprecated":null},{"name":"actions-label","type":"string","default":"","description":"Accessible name of the batch-action selector. Empty: the text of the page's language (\"Action for the selected records\" in English).","values":[],"examples":[],"deprecated":null},{"name":"actions-region-label","type":"string","default":"","description":"Accessible name of the panel that appears while rows are marked. Empty: the text of the page's language (\"Actions for the selected\" in English).","values":[],"examples":[],"deprecated":null},{"name":"aria-label","type":"string","default":"","description":"Accessible name of the navigation landmark. Empty: the text of the page's language (\"Result pages\" in English).","values":[],"examples":[],"deprecated":null},{"name":"bottom","type":"boolean","default":"true","description":"Allow the compatible batch-action section.","values":[],"examples":[],"deprecated":null},{"name":"bottom-class","type":"string","default":"","description":"Framework utility classes for the batch-action section.","values":[],"examples":[],"deprecated":null},{"name":"can-count","type":"boolean","default":"false","description":"Whether the host can count on request. Without it the view offers nothing and asks for nothing.","values":[],"examples":[],"deprecated":null},{"name":"clear-selection-label","type":"string","default":"","description":"Accessible name and tooltip of the control that drops the selection. Empty: the text of the page's language (\"Clear the selection\" in English).","values":[],"examples":[],"deprecated":null},{"name":"count-known","type":"boolean","default":"true","description":"Whether the number of records is known. A host that does not count every answer sets it false, and the view offers the number instead of showing it.","values":[],"examples":[],"deprecated":null},{"name":"counting","type":"boolean","default":"false","description":"A count is on its way; the view shows a short wait in place of the number.","values":[],"examples":[],"deprecated":null},{"name":"counting-label","type":"string","default":"","description":"Accessible name of the short wait shown while the count is on its way. Empty: the text of the page's language (\"Counting\" in English).","values":[],"examples":[],"deprecated":null},{"name":"current","type":"integer","default":"1","description":"Current one-based page number.","values":[],"examples":[],"deprecated":null},{"name":"first-label","type":"string","default":"","description":"Accessible name and tooltip of the control that goes to the first page. Empty: the text of the page's language (\"First\" in English).","values":[],"examples":[],"deprecated":null},{"name":"has-next","type":"boolean","default":"false","description":"Whether a further page exists. It is what moves forward and Show more when no total was sent.","values":[],"examples":[],"deprecated":null},{"name":"last-label","type":"string","default":"","description":"Visible label of the compatible last-page action. Empty: the text of the page's language (\"Last\" in English).","values":[],"examples":[],"deprecated":null},{"name":"main-class","type":"string","default":"","description":"Framework utility classes for the navigation section.","values":[],"examples":[],"deprecated":null},{"name":"middle","type":"boolean","default":"true","description":"Show page navigation and collection summary.","values":[],"examples":[],"deprecated":null},{"name":"next-label","type":"string","default":"","description":"Accessible name of the next-page action. Empty: the text of the page's language (\"Next page\" in English).","values":[],"examples":[],"deprecated":null},{"name":"page-field-label","type":"string","default":"","description":"Label of the field that takes a page number. Empty: the text of the page's language (\"Page:\" in English).","values":[],"examples":[],"deprecated":null},{"name":"page-label","type":"string","default":"","description":"Accessible prefix for a numbered page action. Empty: the text of the page's language (\"Page\" in English).","values":[],"examples":[],"deprecated":null},{"name":"page-size","type":"integer","default":"10","description":"Positive number of items per page.","values":[],"examples":[],"deprecated":null},{"name":"page-size-label","type":"string","default":"","description":"Visible and accessible label of the page-size selector. Empty: the text of the page's language (\"Per page:\" in English).","values":[],"examples":[],"deprecated":null},{"name":"page-sizes","type":"string","default":"10,20,30,40","description":"Comma-separated positive page-size choices.","values":[],"examples":[],"deprecated":null},{"name":"pages-label","type":"string","default":"","description":"Visible label before page controls. Empty: the text of the page's language (\"Pages:\" in English).","values":[],"examples":[],"deprecated":null},{"name":"previous-label","type":"string","default":"","description":"Accessible name of the previous-page action. Empty: the text of the page's language (\"Previous page\" in English).","values":[],"examples":[],"deprecated":null},{"name":"selected-count","type":"integer","default":"0","description":"Selected item count, clamped between zero and total.","values":[],"examples":[],"deprecated":null},{"name":"selected-label","type":"string","default":"","description":"Visible label for the selected item count. Empty: the text of the page's language (\"Selected:\" in English).","values":[],"examples":[],"deprecated":null},{"name":"show-action-for-all","type":"boolean","default":"false","description":"Show the compatible all-items toggle.","values":[],"examples":[],"deprecated":null},{"name":"show-actions","type":"boolean","default":"true","description":"Show batch actions when actions are supplied.","values":[],"examples":[],"deprecated":null},{"name":"show-count-label","type":"string","default":"","description":"Text of the control that asks the host for the number. Empty: the text of the page's language (\"Show the number\" in English).","values":[],"examples":[],"deprecated":null},{"name":"show-more-busy","type":"boolean","default":"false","description":"Mark the Show more control as working while the host fetches the next portion; it is disabled and shows a loader.","values":[],"examples":[],"deprecated":null},{"name":"show-more-text","type":"string","default":"","description":"Label of the compatible show-more action. Empty: the text of the page's language (\"Show more\" in English).","values":[],"examples":[],"deprecated":null},{"name":"show-page-size","type":"boolean","default":"true","description":"Show the page-size selector for a non-empty collection.","values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":"The step of the size ladder its fields, buttons, labels and page numbers take: 1, or the dense 1/2 of an admin.","values":["1/2","1"],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":"Template name.","values":[],"examples":[],"deprecated":null},{"name":"top","type":"boolean","default":"true","description":"Show the compatible show-more section.","values":[],"examples":[],"deprecated":null},{"name":"top-class","type":"string","default":"","description":"Framework utility classes for the show-more section.","values":[],"examples":[],"deprecated":null},{"name":"total","type":"integer","default":"10","description":"Non-negative total item count.","values":[],"examples":[],"deprecated":null},{"name":"total-label","type":"string","default":"","description":"Visible label for the total item count. Empty: the text of the page's language (\"Total:\" in English).","values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-popover","id":"smart.popover","title":"Popover","summary":"A surface anchored to a control the consumer supplies, with its own open state, dismissal and returned focus. Built as a general part because the Framework had the surface and not the behaviour: two composites wrote it by hand within a week, the second copying the first.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/overlays/popover/","attributes":[{"name":"dismissible","type":"boolean","default":"true","description":"Esc and a press outside close it. A consumer that owns those keys turns this off and calls close() when it decides.","values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":"The accessible name of the surface. A surface with a role and no name is announced as an unnamed one.","values":[],"examples":[],"deprecated":null},{"name":"open","type":"boolean","default":"false","description":"Whether the surface is shown. Reflected, so a consumer can read it and set it.","values":[],"examples":[],"deprecated":null},{"name":"placement","type":"string","default":"bottom-end","description":"Which corner of the trigger the surface hangs from.","values":["bottom-start","bottom-end","top-start","top-end","inline-start","inline-end"],"examples":[],"deprecated":null},{"name":"role","type":"string","default":"dialog","description":"Legacy name for surface-role. Read once and removed from the host, which is not itself a menu or dialog.","values":["dialog","menu","listbox","group"],"examples":[],"deprecated":null},{"name":"surface-role","type":"string","default":"dialog","description":"What the surface is to a reader: dialog, menu, listbox or group. Written on sf-popover; the surface gets the role and the trigger aria-haspopup.","values":["dialog","menu","listbox","group"],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":"Template variant name.","values":[],"examples":[],"deprecated":null},{"name":"width","type":"string","default":"","description":"A width of its own. Left to its content a surface takes the width of its longest line, which a list of names makes wide and ragged.","values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-profile-picker","id":"smart.profile-picker","title":"Profile picker","summary":"One way to choose, make, rename, remove and reset a profile: a field-like button naming the profile in use, and a panel where every act happens inline. The profiles and the rights are the host's; the component says what was asked.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/composite/profile-picker/","attributes":[{"name":"current","type":"string","default":"","description":"The id of the profile in use.","values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":"What a profile is called here («Профиль», «Вид»); the page language's «Profile» when empty.","values":[],"examples":[],"deprecated":null},{"name":"message","type":"string","default":"","description":"Why the host refused the last act, shown in the panel.","values":[],"examples":[],"deprecated":null},{"name":"resettable","type":"boolean","default":"false","description":"Offers «Сбросить к стандартному» at the foot.","values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1/2","description":null,"values":["1/2","1"],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-progress-bar","id":"smart.progress-bar","title":"Progress Bar","summary":"Continuous determinate progress with normalized value, accessible range semantics and explicit semantic tone.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/feedback/progress-bar/","attributes":[{"name":"label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":null,"values":["1/3","1/2","1","2","3"],"examples":[],"deprecated":null},{"name":"status","type":"string","default":"neutral","description":"What the progress reports, in the shared status vocabulary. The word this component used before, primary, is still accepted and means neutral.","values":["neutral","info","success","warning","error"],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"text-position","type":"string","default":"none","description":null,"values":["none","inline-end","bottom","right"],"examples":[],"deprecated":null},{"name":"tone","type":"string","default":"neutral","description":"Legacy name for status, still honoured. See contracts/public-api-axes.json.","values":["neutral","info","success","warning","error"],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"0","description":null,"values":[],"examples":[],"deprecated":null},{"name":"value-text","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-progress-scale","id":"smart.progress-scale","title":"Progress Scale","summary":"Segmented determinate progress with exact accessible value, explicit semantic tone and ten visual steps.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/feedback/progress-scale/","attributes":[{"name":"label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"line","type":"string","default":"","description":"Takes the text line of this form size, for a table cell or a row of fields, so the row keeps its control height.","values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"show-text","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":null,"values":["1/3","1/2","1","2","3"],"examples":[],"deprecated":null},{"name":"status","type":"string","default":"neutral","description":"What the progress reports, in the shared status vocabulary. The word this component used before, primary, is still accepted and means neutral.","values":["neutral","info","success","warning","error"],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"tone","type":"string","default":"neutral","description":"Legacy name for status, still honoured. See contracts/public-api-axes.json.","values":["neutral","info","success","warning","error"],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"0","description":null,"values":[],"examples":[],"deprecated":null},{"name":"value-text","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-radio","id":"smart.radio","title":"Radio","summary":"One radio option: a native radio input with a label, description and help text. Radios with the same name form a group in which checking one unchecks the others.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/forms/radio/","attributes":[{"name":"checked","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"description","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"error","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"help","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"name","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":"Radio size token.","values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-range-slider","id":"smart.range-slider","title":"Range Slider","summary":"A slider for one number or a range of two on a track: drag, click or keys move a handle by step, the fill shows the chosen part, and the value can be shown as text or a tooltip on each handle.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/forms/range-slider/","attributes":[{"name":"connect","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"decimals","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"keyboard","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"none","description":"How each handle shows its value: not at all, as text beside it, or as a tooltip.","values":["none","text","tooltip"],"examples":[],"deprecated":null},{"name":"label-position","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"lower-label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"margin","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"max","type":"string","default":"100","description":null,"values":[],"examples":[],"deprecated":null},{"name":"min","type":"string","default":"0","description":null,"values":[],"examples":[],"deprecated":null},{"name":"multiple","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"prefix","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"start","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"step","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"suffix","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"text-position","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"tooltip-position","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"upper-label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-reference-link","id":"smart.reference-link","title":"Reference Link","summary":"Navigation surface that pairs a real destination with a compact reference.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/content/reference-link/","attributes":[{"name":"appearance","type":"string","default":"card","description":"card is the reference as its own box: frame, fill and padding. plain is the link alone, taking the width of its text, for a reference inside something that is already a box -- a record’s field, a table cell -- where a second frame reads as a control the value is not.","values":["card","plain"],"examples":[],"deprecated":null},{"name":"aria-label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":"Render an unavailable, non-focusable reference without navigation.","values":[],"examples":[],"deprecated":null},{"name":"href","type":"string","default":"","description":"Real navigation destination. Required for an enabled reference.","values":[],"examples":[],"deprecated":null},{"name":"icon","type":"string","default":"arrow_forward","description":"Decorative icon name. An absent attribute is the arrow; an empty one draws no icon, for a reference that stands beside its own label.","values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":"Destination-oriented visible link label.","values":[],"examples":[],"deprecated":null},{"name":"line","type":"string","default":"","description":"Takes the text line of this form size as a link without the card, for a table cell, so the row keeps its control height.","values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"","description":"Form size: the reference becomes a control of that size, for a row of fields or a table cell. Empty keeps the card spacing.","values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"target","type":"string","default":"_self","description":"Native browsing-context target. Disclose new-context navigation in the name.","values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"text","type":"string","default":"","description":"Compact route, source or reference shown beside the label.","values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-resizer","id":"smart.resizer","title":"Resizer","summary":"A handle on a panel's edge that changes the panel's width by a drag, the keyboard or a double click back to the default, within limits; optionally remembered in the browser.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/overlays/resizer/","attributes":[{"name":"disabled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"edge","type":"string","default":"inline-end","description":null,"values":["inline-end","inline-start"],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":"The accessible name; defaults to the page language's «Resize».","values":[],"examples":[],"deprecated":null},{"name":"max","type":"string","default":"40rem","description":"The widest width, a CSS length.","values":[],"examples":[],"deprecated":null},{"name":"min","type":"string","default":"12rem","description":"The narrowest width, a CSS length (tokens and percentages of the panel's parent too).","values":[],"examples":[],"deprecated":null},{"name":"property","type":"string","default":"","description":"A CSS custom property the width is written to on the target; empty writes inline-size.","values":[],"examples":[],"deprecated":null},{"name":"step","type":"string","default":"16","description":"Pixels an arrow key moves; Shift moves four steps.","values":[],"examples":[],"deprecated":null},{"name":"storage-key","type":"string","default":"","description":"Remembers the width in this browser as the view preference sf-resizer/ (SF.Preferences); a double click forgets it.","values":[],"examples":[],"deprecated":null},{"name":"target","type":"string","default":"","description":"A selector of the closest ancestor that is the panel; empty is the parent.","values":[],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"","description":"A width in pixels the host keeps (a person's settings); it wins over the browser's memory.","values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-skeleton","id":"smart.skeleton","title":"Skeleton","summary":"Decorative loading placeholder that reserves source-backed content geometry with semantic tokens and reduced-motion support.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/feedback/skeleton/","attributes":[{"name":"animation","type":"string","default":"pulse","description":null,"values":["pulse","wave","none"],"examples":[],"deprecated":null},{"name":"count","type":"number","default":"1","description":null,"values":[],"examples":[],"deprecated":null},{"name":"height","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"items","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"kind","type":"string","default":"text","description":"What shape the placeholder takes: a line of text, a circle, a square or a rounded block.","values":["text","circle","square","rounded"],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":null,"values":["1/7","1/6","1/5","1/4","1/3","1/2","1","2","3","4","5","6","7"],"examples":[],"deprecated":null},{"name":"type","type":"string","default":"","description":"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.","values":["icon"],"examples":[],"deprecated":null},{"name":"variant","type":"string","default":"text","description":"Legacy name for kind, still honoured. See contracts/public-api-axes.json.","values":["text","circle","square","rounded"],"examples":[],"deprecated":null},{"name":"width","type":"string","default":"100%","description":null,"values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-slider","id":"smart.slider","title":"Slider","summary":"A row of slides moved by arrows, dots, swipe or keys, built on the shared Swiper adapter; with linked thumbnails a second slider picks the slide.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/forms/slider/","attributes":[{"name":"arrows","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"button-size","type":"string","default":"1","description":null,"values":[],"examples":[],"deprecated":null},{"name":"button-type","type":"string","default":"primary","description":null,"values":[],"examples":[],"deprecated":null},{"name":"dots","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"dots-size","type":"string","default":"2","description":null,"values":[],"examples":[],"deprecated":null},{"name":"dots-type","type":"string","default":"primary-dark","description":null,"values":[],"examples":[],"deprecated":null},{"name":"loop","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"slide-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"space-between","type":"number","default":"12","description":null,"values":[],"examples":[],"deprecated":null},{"name":"speed","type":"number","default":"450","description":null,"values":[],"examples":[],"deprecated":null},{"name":"thumb-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"thumbs","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"thumbs-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-sortable","id":"smart.sortable","title":"Sortable","summary":"Drag-and-drop list primitive for reordering, moving between lists and copying from a library by mouse, pen, touch and keyboard; reports intent only.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/editor/sortable/","attributes":[{"name":"accepts","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"group","type":"string","default":null,"description":null,"values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"mode","type":"string","default":"move","description":null,"values":["move","copy"],"examples":[],"deprecated":null},{"name":"orientation","type":"string","default":"vertical","description":null,"values":["vertical","horizontal"],"examples":[],"deprecated":null},{"name":"preview","type":"string","default":"silhouette","description":"How a pointer drag shows where the item lands: silhouette lifts the item out of the list and opens an outline of its size at the place it would take, the list making room; line draws a thin line there and leaves the list as it is. Keyboard moves and external targets always use the line; a list that wraps into a grid opens the outline as one of its cells, in reading order.","values":["silhouette","line"],"examples":[],"deprecated":null}]}, +{"tag":"sf-spinner","id":"smart.spinner","title":"Spinner","summary":"Indeterminate waiting indicator with arc or dots presentation, optional polite status announcement and Framework-owned motion.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/feedback/spinner/","attributes":[{"name":"announce","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"direction","type":"string","default":"clockwise","description":null,"values":["clockwise","counterclockwise"],"examples":[],"deprecated":null},{"name":"dot-radius","type":"string","default":"","description":"Deprecated since 2026-10-20, read until 2026-12-01 (journal attribute-spinner-pixel-geometry): the size ladder decides the spinner's geometry; write size.","values":[],"examples":[],"deprecated":{"since":"1.1.0","replacement":"size"}},{"name":"dots","type":"string","default":"16","description":null,"values":[],"examples":[],"deprecated":null},{"name":"filled","type":"string","default":"6","description":null,"values":[],"examples":[],"deprecated":null},{"name":"height","type":"string","default":"","description":"Deprecated since 2026-10-20, read until 2026-12-01 (journal attribute-spinner-pixel-geometry): the size ladder decides the spinner's geometry; write size.","values":[],"examples":[],"deprecated":{"since":"1.1.0","replacement":"size"}},{"name":"infinite","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"kind","type":"string","default":"arc","description":"What the spinner is: an arc or a row of dots.","values":["arc","dots"],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":"Empty: the text of the page's language (\"Loading...\" in English).","values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":"The size ladder: at each step the spinner is the icon of an sf-button of the same size (diameter and stroke), so it can stand in for that icon.","values":["1/3","1/2","1","2","3"],"examples":[],"deprecated":null},{"name":"stroke-width","type":"string","default":"","description":"Deprecated since 2026-10-20, read until 2026-12-01 (journal attribute-spinner-pixel-geometry): the size ladder decides the spinner's geometry; write size.","values":[],"examples":[],"deprecated":{"since":"1.1.0","replacement":"size"}},{"name":"variant","type":"string","default":"arc","description":"Legacy name for kind, still honoured. See contracts/public-api-axes.json.","values":["arc","dots"],"examples":[],"deprecated":null},{"name":"width","type":"string","default":"","description":"Deprecated since 2026-10-20, read until 2026-12-01 (journal attribute-spinner-pixel-geometry): the size ladder decides the spinner's geometry; write size.","values":[],"examples":[],"deprecated":{"since":"1.1.0","replacement":"size"}}]}, +{"tag":"sf-steps","id":"smart.steps","title":"Steps","summary":"A row of labelled step buttons, separated by an icon, for a multi-step process: marks the current, completed and error steps and moves to an enabled step when it is pressed.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/navigation/steps/","attributes":[{"name":"aria-label","type":"string","default":"","description":"Empty: the text of the page's language (\"Steps\" in English).","values":[],"examples":[],"deprecated":null},{"name":"completed-label","type":"string","default":"","description":"Empty: the text of the page's language (\"Completed\" in English).","values":[],"examples":[],"deprecated":null},{"name":"current","type":"number","default":"0","description":null,"values":[],"examples":[],"deprecated":null},{"name":"error-label","type":"string","default":"","description":"Empty: the text of the page's language (\"Error\" in English).","values":[],"examples":[],"deprecated":null},{"name":"error-step","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"items","type":"string","default":"[]","description":null,"values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"separator-icon","type":"string","default":"chevron_right","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":null,"values":["1","1/2"],"examples":[],"deprecated":null}]}, +{"tag":"sf-switch","id":"smart.switch","title":"Switch","summary":"An on/off control for a setting that applies at once: a native checkbox with role=\"switch\", a track and a moving thumb, with a label, description and help text.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/forms/switch/","attributes":[{"name":"checked","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"description","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"help","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"name","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":"Switch size token.","values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-tabs","id":"smart.tabs","title":"Tabs","summary":"A tab list that shows one local panel at a time, with text or icon tabs given as attributes, slots or data, roving keyboard focus and linked tab panels.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/navigation/tabs/","attributes":[{"name":"active-index","type":"number","default":"0","description":null,"values":[],"examples":[],"deprecated":null},{"name":"configurable","type":"boolean","default":"false","description":"A gear at the end of the tabs («Настроить вкладки») opens the standard menu with the tabs as a sortable list, a visibility checkbox per tab (pinned tabs fixed) and «Сбросить» in its footer. The choice is the host's: sf-tabs-settings-change {order, hidden}, sf-tabs-settings-reset, setSettings({order, hidden}).","values":[],"examples":[],"deprecated":null},{"name":"items","type":"string","default":"[]","description":"An item (set with setItems) may carry key (a stable id for the settings; the index otherwise), icon, count (a small counter after the label), href (the tab is a link: activating it goes to the address; aria-current=page on the active one) and pinned (never hidden, fixed in the settings).","values":[],"examples":[],"deprecated":null},{"name":"overflow","type":"string","default":"scroll","description":"What the tabs do when they do not fit: scroll (the row scrolls), wrap (rows wrap), or more (the tabs that do not fit go into a trailing «Ещё (n)» menu; the active one always stays).","values":["scroll","wrap","more"],"examples":[],"deprecated":null},{"name":"panel-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"scheme","type":"string","default":"default","description":"Built-in button appearance: default, outline or link. Historical name retained; this is not a semantic color selector. Custom templates may interpret it separately.","values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":null,"values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"top-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"top-position","type":"string","default":"start","description":null,"values":[],"examples":[],"deprecated":null},{"name":"type","type":"string","default":"null","description":null,"values":[],"examples":[],"deprecated":null},{"name":"variant","type":"string","default":"buttons","description":null,"values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-tag","id":"smart.tags","title":"Tags","summary":"Compact static, selectable and removable labels with one explicit interaction owner.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/content/tags/","attributes":[{"name":"active","type":"boolean","default":"false","description":"Selected state of a checkbox tag.","values":[],"examples":[],"deprecated":null},{"name":"appearance","type":"string","default":"default","description":"Visual appearance, read from the neutral alpha ramp and separate from type: surface keeps a faint fill and a boundary, ghost keeps nothing until it is hovered. Only the neutral types take it, because a status tag carries its meaning in its colour.","values":["default","surface","ghost"],"examples":[],"deprecated":null},{"name":"aria-label","type":"string","default":"","description":"Optional accessible name override for a selectable tag.","values":[],"examples":[],"deprecated":null},{"name":"avatar-image-url","type":"string","default":"","description":"Avatar image URL; the visible text remains the accessible label.","values":[],"examples":[],"deprecated":null},{"name":"avatar-status","type":"string","default":"","description":"Reserved avatar status value for compatible templates.","values":[],"examples":[],"deprecated":null},{"name":"avatar-text","type":"string","default":"","description":"Avatar initials fallback.","values":[],"examples":[],"deprecated":null},{"name":"closable","type":"boolean","default":"false","description":"Show a separate remove action; icon, color and avatar tags enable it by default, a checkbox tag only when it is set.","values":[],"examples":[],"deprecated":null},{"name":"close-label","type":"string","default":"","description":"Accessible name of the remove action. Defaults to Remove, or Удалить on a Russian page.","values":[],"examples":[],"deprecated":null},{"name":"color-class","type":"string","default":"","description":"Framework semantic background utility for the color marker.","values":[],"examples":[],"deprecated":null},{"name":"count","type":"string","default":"","description":"Optional count shown with the default tag.","values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":"Disable interactive toggle and close actions.","values":[],"examples":[],"deprecated":null},{"name":"icon","type":"string","default":"","description":"Decorative Framework icon name.","values":[],"examples":[],"deprecated":null},{"name":"inline","type":"boolean","default":"false","description":"Sit on the text line of another control: no block padding, a flush label, and a remove button the height of the line. The host may publish --sf-tag--line.","values":[],"examples":[],"deprecated":null},{"name":"interactive","type":"boolean","default":"false","description":"Render the label as a button next to the remove action, for tags that open something (for example a filter chip menu); ignored for checkbox tags.","values":[],"examples":[],"deprecated":null},{"name":"kind","type":"string","default":"checkbox","description":"What the tag carries: a checkbox, an icon, a colour, an avatar, or nothing but its label. The compatibility input quantity is still accepted and means default.","values":["checkbox","icon","default","color","avatar"],"examples":[],"deprecated":null},{"name":"line","type":"string","default":"","description":"Takes the text line of this form size as an inline tag one size down, for a table cell, so the row keeps its control height. Overrides size and inline.","values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":"Framework utility classes for the visible root.","values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1/2","description":"Framework size token: sets the label text and the default spacing.","values":["1/3","1/2","1","2","3"],"examples":[],"deprecated":null},{"name":"spacing","type":"string","default":"normal","description":"Block padding of a free-standing tag, with the names the buttons use.","values":["compact","normal","comfortable","spacious"],"examples":[],"deprecated":null},{"name":"status","type":"string","default":"","description":"What the tag reports, in the shared status vocabulary. Leave it empty for a tag that reports nothing.","values":["info","success","warning","error"],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":"Template name.","values":[],"examples":[],"deprecated":null},{"name":"text","type":"string","default":"","description":"Visible tag label.","values":[],"examples":[],"deprecated":null},{"name":"type","type":"string","default":"checkbox","description":"Legacy name that answered both questions from one list: a content word reaches kind, a status word reaches status. See contracts/public-api-axes.json.","values":["checkbox","icon","default","color","avatar","info","success","warning","error"],"examples":[],"deprecated":null}]}, +{"tag":"sf-textarea","id":"smart.textarea","title":"Textarea","summary":"A native multiline form control with Framework presentation, validation messaging and safe vertical resizing.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/forms/textarea/","attributes":[{"name":"appearance","type":"string","default":"bordered","description":"How the field looks: a bordered box or a filled one.","values":["bordered","filled"],"examples":[],"deprecated":null},{"name":"autocomplete","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"error","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"error-message","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"hint","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"inputmode","type":"string","default":"","description":null,"values":["none","text","tel","url","email","numeric","decimal","search"],"examples":[],"deprecated":null},{"name":"invalid","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"mask","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"mask-options","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"mask-pattern","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"maxlength","type":"number","default":"null","description":null,"values":[],"examples":[],"deprecated":null},{"name":"minlength","type":"number","default":"null","description":null,"values":[],"examples":[],"deprecated":null},{"name":"name","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"placeholder","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"readonly","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"required","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"rows","type":"number","default":"3","description":null,"values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":null,"values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"spellcheck","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"type","type":"string","default":"bordered","description":"Legacy name for appearance, still honoured. See contracts/public-api-axes.json.","values":["bordered","filled"],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"wrap","type":"string","default":"soft","description":null,"values":["soft","hard"],"examples":[],"deprecated":null}]}, +{"tag":"sf-theme-generator","id":"smart.theme-generator","title":"Theme generator","summary":"A theme from one colour: a person chooses the main colour (or the generator's hue and chroma) and it makes the Framework's eight tonal palettes, the 128 primitives every semantic token reads and the 98 translucent steps core derives from them, with a preview, events carrying the CSS, and an optional live application to the page.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/forms/theme-generator/","attributes":[{"name":"apply","type":"boolean","default":"false","description":"Apply the theme to `target` as inline custom properties, live on every change, undoing the previous application first and on removal. Without it the page is not changed.","values":[],"examples":[],"deprecated":null},{"name":"chroma","type":"string","default":"","description":"The generator's chroma, 0-150, overriding the colour's reading; set by the fine-tuning fields. Empty reads it from the colour.","values":[],"examples":[],"deprecated":null},{"name":"hue","type":"string","default":"","description":"The generator's hue, 0-360, overriding the colour's reading; set by the fine-tuning fields. Empty reads it from the colour.","values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"selector","type":"string","default":":root","description":"The selector of the rule in the events' css and in toCSS().","values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":null,"values":["1/2","1","2"],"examples":[],"deprecated":null},{"name":"swatches","type":"string","default":"","description":"The product's own colours offered beside the picker, as sf-color takes them: '#hex|Name, #hex'.","values":[],"examples":[],"deprecated":null},{"name":"target","type":"string","default":"","description":"A CSS selector for the element the theme is applied to; empty is the document element. A target other than the root carries a theme class (theme-light or theme-dark): the semantic tokens are declared there, so without one only the primitives change on it.","values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"","description":"The main colour, #rrggbb. Empty means the Framework's own colour (#005bbe) and draws the Framework's own theme.","values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-toast","id":"smart.toast","title":"Toast","summary":"Transient overlay feedback with semantic roles, optional action, pause-safe lifetime and dismiss behavior.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/feedback/toast/","attributes":[{"name":"action","type":"string","default":"action","description":"Stable action value emitted in sf-toast-action.","values":[],"examples":[],"deprecated":null},{"name":"action-text","type":"string","default":"","description":"Visible label of the one optional action.","values":[],"examples":[],"deprecated":null},{"name":"closable","type":"boolean","default":"true","description":"Render an explicitly named close action.","values":[],"examples":[],"deprecated":null},{"name":"close-label","type":"string","default":"","description":"Localized accessible name of the close action. Empty: the text of the page's language (\"Close message\" in English).","values":[],"examples":[],"deprecated":null},{"name":"duration","type":"number","default":"0","description":"Explicit lifetime in milliseconds. Zero keeps the message until dismissed.","values":[],"examples":[],"deprecated":null},{"name":"icon","type":"string","default":"","description":"Optional decorative icon name.","values":[],"examples":[],"deprecated":null},{"name":"role","type":"string","default":"","description":"Live-region role for dynamically inserted feedback only.","values":["status","alert"],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"status","type":"string","default":"neutral","description":"What the message reports, in the shared status vocabulary. The words this component used before — default and primary — are still accepted and mean neutral and info.","values":["neutral","info","success","warning","error"],"examples":[],"deprecated":null},{"name":"supporting-text","type":"string","default":"","description":"Concise supporting text at the normal body size.","values":[],"examples":[],"deprecated":null},{"name":"title","type":"string","default":"","description":"Short result heading.","values":[],"examples":[],"deprecated":null},{"name":"type","type":"string","default":"neutral","description":"Legacy name for status, still honoured. See contracts/public-api-axes.json.","values":["neutral","info","success","warning","error"],"examples":[],"deprecated":null}]}, +{"tag":"sf-tooltip","id":"smart.tooltip","title":"Tooltip","summary":"Tooltip surface that can join the ordinary data-tooltip trigger composition.","lifecycle":"released","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/feedback/tooltip/","attributes":[{"name":"appearance","type":"string","default":"light","description":"How the tooltip looks: light on a dark surface or the reverse.","values":["light","dark"],"examples":[],"deprecated":null},{"name":"arrow","type":"string","default":"none","description":"Logical tail placement.","values":["none","top-center","bottom-center","inline-start","inline-end","bottom-inline-start","bottom-inline-end"],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":"Framework utility classes for the visible surface root.","values":[],"examples":[],"deprecated":null},{"name":"size","type":"string","default":"1","description":"Framework typography and spacing scale.","values":["1/3","1/2","1","2","3"],"examples":[],"deprecated":null},{"name":"supporting-text","type":"string","default":"","description":"Optional secondary description.","values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":"Template name.","values":[],"examples":[],"deprecated":null},{"name":"text","type":"string","default":"","description":"Short primary description.","values":[],"examples":[],"deprecated":null},{"name":"type","type":"string","default":"light","description":"Legacy name for appearance, still honoured. See contracts/public-api-axes.json.","values":["light","dark"],"examples":[],"deprecated":null}]}, +{"tag":"sf-tree","id":"smart.tree","title":"Tree","summary":"Accessible hierarchical composite with roving focus, branch expansion and host-owned selection.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/navigation/tree/","attributes":[{"name":"accept-files","type":"boolean","default":"false","description":"A node takes files dropped from the computer and says so with sf-tree-files-drop.","values":[],"examples":[],"deprecated":null},{"name":"accept-records","type":"boolean","default":"false","description":"A node takes the records dragged from a list (application/x-sf-records+json) and says so with sf-tree-records-drop.","values":[],"examples":[],"deprecated":null},{"name":"aria-label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"items","type":"array","default":"[]","description":"Items given as data instead of as sf-tree-item children (set as a property, not an attribute): [{label, href?, target?, rel?, kind?, value?, open?, selected?, active?, disabled?, icon?, openIcon?, closedIcon?, chevronOpenIcon?, chevronClosedIcon?, openLabel?, closeLabel?, children?}]. text or title stand in for label. Setting it replaces the items and re-renders; sf-tree-item children are read once and removed, so a parent that re-renders changed items passes them this way.","values":[],"examples":[],"deprecated":null},{"name":"role","type":"string","default":"tree","description":null,"values":["tree"],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"selection","type":"string","default":"none","description":null,"values":["none","single","multiple"],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null}]}, +{"tag":"sf-tree-item","id":"smart.tree-item","title":"Tree Item","summary":"One accessible node in a Smart Tree hierarchy.","lifecycle":"experimental","deprecated":null,"docs":["https://github.com/simai/ui/blob/132b0863e12b9d5d9c9180d32b20c71f0584e7eb/README.md"],"page":"/ru/smart-components/navigation/tree-item/","attributes":[{"name":"active","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"chevron-closed-icon","type":"string","default":"chevron_right","description":null,"values":[],"examples":[],"deprecated":null},{"name":"chevron-open-icon","type":"string","default":"keyboard_arrow_down","description":null,"values":[],"examples":[],"deprecated":null},{"name":"close-label","type":"string","default":"","description":"Empty: the text of the page's language (\"Close item\" in English).","values":[],"examples":[],"deprecated":null},{"name":"closed-icon","type":"string","default":"folder","description":null,"values":[],"examples":[],"deprecated":null},{"name":"container-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"disabled","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"href","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"icon","type":"boolean","default":"true","description":null,"values":[],"examples":[],"deprecated":null},{"name":"item-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"items-data","type":"array","default":"[]","description":null,"values":[],"examples":[],"deprecated":null},{"name":"kind","type":"string","default":"folder","description":"What the tree item is: a folder or a file.","values":["folder","file"],"examples":[],"deprecated":null},{"name":"label","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"name-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"open","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"open-icon","type":"string","default":"folder_open","description":null,"values":[],"examples":[],"deprecated":null},{"name":"open-label","type":"string","default":"","description":"Empty: the text of the page's language (\"Open item\" in English).","values":[],"examples":[],"deprecated":null},{"name":"rel","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"root-class","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"selected","type":"boolean","default":"false","description":null,"values":[],"examples":[],"deprecated":null},{"name":"target","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"template","type":"string","default":"default","description":null,"values":[],"examples":[],"deprecated":null},{"name":"text","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null},{"name":"type","type":"string","default":"folder","description":"Legacy name for kind, still honoured. See contracts/public-api-axes.json.","values":["folder","file"],"examples":[],"deprecated":null},{"name":"value","type":"string","default":"","description":null,"values":[],"examples":[],"deprecated":null}]} ], "classes": [ {"name":"-lg:m-0","id":"utility.margin","family":"margin","breakpoint":"lg","media":"(min-width: 60rem)","declarations":"margin: calc(0rem - var(--sf-space-0));","lifecycle":"released"}, @@ -10311,6 +10311,7 @@ {"name":"--sf-z-index-8","group":"z-index","source":"core","component":null,"summary":null,"value":"80","light":"80","dark":null,"desktop":null,"color":null,"darkColor":null,"since":null}, {"name":"--sf-z-index-9","group":"z-index","source":"core","component":null,"summary":null,"value":"90","light":"90","dark":null,"desktop":null,"color":null,"darkColor":null,"since":null} ], +"utilityPages": {"align-items":"/ru/utilities/grid-and-flexbox-utilities/align-items/","background-color":"/ru/utilities/background/background-color/","border-color":"/ru/utilities/border/border-color/","border-radius":"/ru/utilities/border/border-radius/","border-width":"/ru/utilities/border/border-width/","container":"/ru/utilities/layout/container/","cursor":"/ru/utilities/interactivity/cursor/","display":"/ru/utilities/layout/display/","divider-color":"/ru/utilities/divider/divider-color/","element-position":"/ru/utilities/layout/element-position/","elevation":"/ru/utilities/shadows/elevation/","flex":"/ru/utilities/flex/","flex-direction":"/ru/utilities/flex/flex-direction/","flex-grow":"/ru/utilities/flex/flex-grow/","flex-wrap":"/ru/utilities/flex/flex-wrap/","font-weight":"/ru/utilities/typography/font-weight/","gap":"/ru/utilities/grid-and-flexbox-utilities/gap/","grid-template-columns":"/ru/utilities/grid/grid-template-columns/","height":"/ru/utilities/sizes/height/","height-ext":"/ru/utilities/sizes/height/","justify-content":"/ru/utilities/grid-and-flexbox-utilities/justify-content/","letter-spacing":"/ru/utilities/typography/letter-spacing/","list-style-type":"/ru/utilities/typography/list-style-type/","margin":"/ru/utilities/indents/margin/","max-container":"/ru/utilities/layout/max-container/","max-height":"/ru/utilities/sizes/max-height/","max-height-ext":"/ru/utilities/sizes/max-height/","max-width":"/ru/utilities/sizes/max-width/","max-width-ext":"/ru/utilities/sizes/max-width/","min-height":"/ru/utilities/sizes/min-height/","min-width":"/ru/utilities/sizes/min-width/","overflow":"/ru/utilities/layout/overflow/","padding":"/ru/utilities/indents/padding/","place-items":"/ru/utilities/grid-and-flexbox-utilities/place-items/","pointer-events":"/ru/utilities/forms/pointer-events/","query-container":"/ru/utilities/layout/query-container/","resize":"/ru/utilities/forms/resize/","scroll-hover":"/ru/utilities/overscroll/scroll-hover/","scroll-subtle":"/ru/utilities/overscroll/scroll-subtle/","sr-only":"/ru/utilities/interactivity/sr-only/","text-align":"/ru/utilities/typography/text-align/","text-color":"/ru/utilities/text-formatting/text-color/","text-wrap":"/ru/utilities/typography/text-wrap/","transform-scale":"/ru/utilities/transform/transform-scale/","width":"/ru/utilities/sizes/width/","width-ext":"/ru/utilities/sizes/width/","z-index":"/ru/utilities/layout/z-index/"}, "knownTags": [ "sf-inline-editor", "sf-toggle" diff --git a/package-lock.json b/package-lock.json index 873cacc..6d667dd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "sf-vscode", - "version": "0.3.1", + "version": "0.3.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "sf-vscode", - "version": "0.3.1", + "version": "0.3.2", "license": "MIT", "devDependencies": { "@eslint/js": "^9.16.0", diff --git a/package.json b/package.json index cdf30de..29816b0 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "sf-vscode", "displayName": "SIMAI Framework for VS Code", "description": "Autocomplete and hovers for SIMAI Framework: sf- component tags and attributes, utility classes and --sf- design tokens with colour swatches and adaptive values.", - "version": "0.3.1", + "version": "0.3.2", "publisher": "SIMAI", "author": "Rim Zabarov and contributors", "license": "MIT", @@ -96,9 +96,9 @@ }, "sf.docs.baseUrl": { "type": "string", - "default": "", + "default": "https://ui.simai.io", "pattern": "^(https://\\S+)?$", - "description": "Base URL of the SIMAI Framework documentation site. When set, hovers link to /, for example /smart.buttons. Leave empty for no link." + "description": "Base URL of the SIMAI Framework documentation site that hovers link to. Leave empty for no link." } } } @@ -117,6 +117,8 @@ "package": "vsce package", "package:ls": "vsce ls", "vendor:framework": "npm run compile && node ./out/generate/vendorFramework.js", + "vendor:docs": "npm run compile && node ./out/generate/vendorDocs.js", + "docs:check": "npm run compile && node ./out/generate/vendorDocs.js --check", "package:check": "vsce ls | node ./out/generate/checkPackage.js", "screenshots": "npm run compile && node ./out/test/runScreenshots.js" }, diff --git a/src/extension.ts b/src/extension.ts index da1c908..a64bb95 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -56,7 +56,7 @@ const stylesheetLanguages = new Set(['css', 'scss', 'sass', 'less']); const markupLookbehindLines = 20; const settings = (): vscode.WorkspaceConfiguration => vscode.workspace.getConfiguration('sf'); -const docsBaseUrl = (): string => settings().get('docs.baseUrl', ''); +const docsBaseUrl = (): string => settings().get('docs.baseUrl', 'https://ui.simai.io'); const diagnosticSource = 'SIMAI Framework'; const severities: Record = { diff --git a/src/framework.ts b/src/framework.ts index 55aa21b..909363e 100644 --- a/src/framework.ts +++ b/src/framework.ts @@ -140,14 +140,14 @@ export function describeToken(index: FrameworkIndex, token: FrameworkToken): str } /** - * Link to the SIMAI Framework documentation site for a registry entry. The - * site serves one page per stable ID under the configured base URL - * (sf.docs.baseUrl); without a base URL there is no link. + * Link to a page of the SIMAI Framework documentation site under the + * configured base URL (sf.docs.baseUrl). Without a page or a usable base URL + * there is no link. */ -export function docsLink(baseUrl: string | undefined, stableId: string): string | null { +export function docsLink(baseUrl: string | undefined, page: string | null): string | null { const base = (baseUrl ?? '').trim().replace(/\/+$/, ''); - if (!/^https:\/\/\S+$/.test(base)) return null; - return `${base}/${encodeURIComponent(stableId)}`; + if (!page || !/^https:\/\/\S+$/.test(base)) return null; + return `${base}${page}`; } export function describeClass( @@ -163,7 +163,7 @@ export function describeClass( '```', ]; if (item.breakpoint) lines.push('', `Applies from the \`${item.breakpoint}\` breakpoint.`); - const docs = docsLink(docsBaseUrl, item.id); + const docs = docsLink(docsBaseUrl, index.framework.utilityPages[item.family] ?? '/ru/utilities/'); if (docs) lines.push('', `[SIMAI Framework docs](${docs})`); lines.push('', releaseLine(index, `\`${item.id}\` · ${item.lifecycle}`)); return lines.join('\n'); @@ -174,9 +174,10 @@ export function describeTag(index: FrameworkIndex, tag: FrameworkTag, docsBaseUr if (tag.deprecated) lines.push('', deprecationLine(tag.deprecated)); const attributes = tag.attributes.filter(attribute => !attribute.deprecated).map(item => `\`${item.name}\``); if (attributes.length > 0) lines.push('', `Attributes: ${attributes.join(', ')}`); - const links = tag.docs.map(url => `[Documentation](${url})`); - const docs = docsLink(docsBaseUrl, tag.id); - if (docs) links.unshift(`[SIMAI Framework docs](${docs})`); + const docs = docsLink(docsBaseUrl, tag.page); + const links = docs + ? [`[SIMAI Framework docs](${docs})`] + : tag.docs.map(url => `[Documentation](${url})`); if (links.length > 0) lines.push('', links.join(' · ')); lines.push('', releaseLine(index, `\`${tag.id}\` · ${tag.lifecycle}`)); return lines.join('\n'); diff --git a/src/generate/buildFramework.ts b/src/generate/buildFramework.ts index e46031a..219b7cf 100644 --- a/src/generate/buildFramework.ts +++ b/src/generate/buildFramework.ts @@ -15,6 +15,7 @@ import { RawPublicVariables, RawSmartManifest, } from './frameworkInputs'; +import { familyPage, tagPage } from './docsPages'; export interface FrameworkInputs { pointer: FrameworkPointer; @@ -28,6 +29,8 @@ export interface FrameworkInputs { manifests: Record; /** Desktop mode boundary from the adaptive sizing contract, in px. */ desktopMinWidthPx: number; + /** Paths of the documentation site's reference pages. */ + docPages?: string[]; } export interface FrameworkReport { @@ -275,6 +278,7 @@ function buildTags( registry: RawContractRegistry, safe: Set, manifests: Record, + docPages: string[], ): FrameworkTag[] { const byId = new Map(Object.values(manifests).map(manifest => [manifest.id, manifest])); const tags: FrameworkTag[] = []; @@ -311,6 +315,7 @@ function buildTags( docs: entry.documentation_refs .map(githubUrl) .filter((url): url is string => url !== null), + page: tagPage(docPages, tag, entry.id), attributes, }); } @@ -404,7 +409,14 @@ export function buildFramework(inputs: FrameworkInputs): { for (const component of inputs.publicVariables.components) { for (const variable of component.variables) knownTokens.add(variable.name); } - const tags = buildTags(registry, safe, inputs.manifests); + const docPages = inputs.docPages ?? []; + const tags = buildTags(registry, safe, inputs.manifests, docPages); + const classes = buildClasses(inputs.utilityCss, registry, safe); + const utilityPages: Record = {}; + for (const family of [...new Set(classes.map(item => item.family))].sort()) { + const page = familyPage(docPages, family); + if (page) utilityPages[family] = page; + } const suggestedTags = new Set(tags.map(tag => tag.tag)); const knownTags = new Set(registry.entries.flatMap(entry => entry.runtime.tags ?? [])); @@ -422,8 +434,9 @@ export function buildFramework(inputs: FrameworkInputs): { }, desktopMinWidth: `${desktopRem}rem`, tags, - classes: buildClasses(inputs.utilityCss, registry, safe), + classes, tokens, + utilityPages, knownTags: [...knownTags].filter(tag => !suggestedTags.has(tag)).sort(), knownTokens: [...knownTokens].filter(name => !suggested.has(name)).sort(), }, diff --git a/src/generate/docsPages.ts b/src/generate/docsPages.ts new file mode 100644 index 0000000..ae6b7f3 --- /dev/null +++ b/src/generate/docsPages.ts @@ -0,0 +1,43 @@ +/* + * Maps SIMAI Framework names to real pages of the documentation site. The + * site's paths follow its own navigation (group folders, plural page names), + * not registry IDs, so a link is only ever built from a page the site lists. + */ + +export interface DocsPages { + site: string; + pages: string[]; +} + +const sections = ['/ru/components/', '/ru/smart-components/', '/ru/utilities/']; + +/** Page paths of the reference sections from the text of a sitemap. */ +export function pagesFromSitemap(xml: string, site: string): string[] { + const pages = new Set(); + for (const match of xml.matchAll(/\s*([^<\s]+)\s*<\/loc>/g)) { + if (!match[1].startsWith(`${site}/`)) continue; + const page = match[1].slice(site.length); + if (sections.some(section => page.startsWith(section) && page !== section)) pages.add(page); + } + return [...pages].sort(); +} + +const pageNamed = (pages: string[], section: string, names: string[]): string | null => { + for (const name of names) { + const found = pages.filter(page => page.startsWith(section) && page.endsWith(`/${name}/`)); + if (found.length === 1) return found[0]; + } + return null; +}; + +/** Smart component page of a tag. Page names are often plural: sf-button is buttons. */ +export function tagPage(pages: string[], tag: string, id: string): string | null { + const name = tag.replace(/^sf-/, ''); + const entry = id.replace(/^smart\./, ''); + return pageNamed(pages, '/ru/smart-components/', [name, `${name}s`, entry, `${entry}s`]); +} + +/** Utility page of a utility family. The -ext families extend the base page. */ +export function familyPage(pages: string[], family: string): string | null { + return pageNamed(pages, '/ru/utilities/', [family, family.replace(/-ext$/, '')]); +} diff --git a/src/generate/generateFramework.ts b/src/generate/generateFramework.ts index 567aea4..d9e1b08 100644 --- a/src/generate/generateFramework.ts +++ b/src/generate/generateFramework.ts @@ -7,6 +7,7 @@ import * as fs from 'fs'; import * as path from 'path'; import { validateFrameworkRegistry } from '../registry/frameworkValidation'; import { buildFramework } from './buildFramework'; +import { DocsPages } from './docsPages'; import { buildSnippets } from './snippets'; import { FrameworkPointer, @@ -22,6 +23,7 @@ const pointerPath = path.join(repositoryRoot, 'contracts', 'framework.pointer.js const sizingContractPath = path.join(repositoryRoot, 'contracts', 'adaptive-sizing.v1.json'); const outputPath = path.join(repositoryRoot, 'data', 'sf-framework.json'); const snippetsPath = path.join(repositoryRoot, 'snippets', 'sf-framework.json'); +const docsPagesPath = path.join(repositoryRoot, 'contracts', 'docs-pages.json'); const listFiles = (root: string, prefix = ''): string[] => fs.readdirSync(path.join(root, prefix), { withFileTypes: true }).flatMap(item => { @@ -66,6 +68,7 @@ const { registry, report } = buildFramework({ utilityCss: select(/^utility\//, text), manifests: select(/^smart\//, file => json(file)), desktopMinWidthPx: sizingContract.modes.desktop.minWidthPx, + docPages: (JSON.parse(fs.readFileSync(docsPagesPath, 'utf8')) as DocsPages).pages, }); validateFrameworkRegistry(registry); diff --git a/src/generate/vendorDocs.ts b/src/generate/vendorDocs.ts new file mode 100644 index 0000000..3ceec3f --- /dev/null +++ b/src/generate/vendorDocs.ts @@ -0,0 +1,38 @@ +/* + * Records the reference pages of the documentation site in + * contracts/docs-pages.json, which the generator builds hover links from. + * With --check it only verifies that every recorded page is still published, + * so a moved page fails the release and the weekly check instead of a reader. + */ +import * as fs from 'fs'; +import * as path from 'path'; +import { DocsPages, pagesFromSitemap } from './docsPages'; + +const repositoryRoot = path.resolve(__dirname, '..', '..'); +const outputPath = path.join(repositoryRoot, 'contracts', 'docs-pages.json'); +const site = 'https://ui.simai.io'; + +async function main(): Promise { + const response = await fetch(`${site}/sitemap.xml`); + if (!response.ok) throw new Error(`${site}/sitemap.xml answered ${response.status}`); + const pages = pagesFromSitemap(await response.text(), site); + if (pages.length === 0) throw new Error(`${site}/sitemap.xml lists no reference pages`); + + if (process.argv.includes('--check')) { + const recorded = JSON.parse(fs.readFileSync(outputPath, 'utf8')) as DocsPages; + const missing = recorded.pages.filter(page => !pages.includes(page)); + if (missing.length > 0) { + throw new Error(`recorded pages are no longer published: ${missing.join(', ')}`); + } + process.stdout.write(`docs pages PASS ${recorded.pages.length} recorded pages are published\n`); + return; + } + const value: DocsPages = { site, pages }; + fs.writeFileSync(outputPath, `${JSON.stringify(value, null, 2)}\n`); + process.stdout.write(`recorded ${pages.length} pages from ${site}\n`); +} + +main().catch((error: unknown) => { + process.stderr.write(`${error instanceof Error ? error.message : String(error)}\n`); + process.exitCode = 1; +}); diff --git a/src/registry/frameworkTypes.ts b/src/registry/frameworkTypes.ts index bd52383..038b359 100644 --- a/src/registry/frameworkTypes.ts +++ b/src/registry/frameworkTypes.ts @@ -24,6 +24,8 @@ export interface FrameworkTag { lifecycle: string; deprecated: Deprecation | null; docs: string[]; + /** Path of the tag's page on the documentation site, when it has one. */ + page: string | null; attributes: FrameworkAttribute[]; } @@ -75,6 +77,8 @@ export interface FrameworkRegistry { tags: FrameworkTag[]; classes: FrameworkClass[]; tokens: FrameworkToken[]; + /** Documentation page path of each utility family that has one. */ + utilityPages: Record; /** * Real Framework names that are not suggested (not safe to suggest, or not * global tokens). Diagnostics never call them unknown. diff --git a/src/registry/frameworkValidation.ts b/src/registry/frameworkValidation.ts index f75c61f..b2e680d 100644 --- a/src/registry/frameworkValidation.ts +++ b/src/registry/frameworkValidation.ts @@ -36,6 +36,12 @@ export function validateFrameworkRegistry(value: unknown): FrameworkRegistry { ) { throw new Error('framework registry sections are missing'); } + for (const page of [ + ...registry.tags.flatMap(tag => (tag.page === null ? [] : [tag.page])), + ...Object.values(registry.utilityPages ?? {}), + ]) { + if (!/^\/\S+\/$/.test(page)) throw new Error(`documentation page is not a path: ${page}`); + } unique(registry.tags.map(tag => tag.tag), 'tag'); unique(registry.classes.map(item => item.name), 'class'); unique(registry.tokens.map(token => token.name), 'token'); diff --git a/src/test/features.unit.test.ts b/src/test/features.unit.test.ts index ebd7191..4541a4e 100644 --- a/src/test/features.unit.test.ts +++ b/src/test/features.unit.test.ts @@ -1,3 +1,4 @@ +import { DocsPages, familyPage, pagesFromSitemap, tagPage } from '../generate/docsPages'; import * as assert from 'node:assert/strict'; import * as fs from 'node:fs'; import * as path from 'node:path'; @@ -60,15 +61,51 @@ test('deprecations are reported with the configured kind', () => { assert.match(finding.message, /deprecated since 1\.3\.0: openFor/); }); -test('documentation links come from a configured https base URL only', () => { - assert.equal(docsLink('', 'smart.buttons'), null); - assert.equal(docsLink('http://insecure.example', 'smart.buttons'), null); - assert.equal(docsLink('https://docs.example/sf/', 'smart.buttons'), 'https://docs.example/sf/smart.buttons'); +test('documentation links need a real page and an https base URL', () => { + const page = '/ru/smart-components/actions/buttons/'; + assert.equal(docsLink('', page), null); + assert.equal(docsLink('http://insecure.example', page), null); + assert.equal(docsLink('https://docs.example', null), null); + assert.equal(docsLink('https://docs.example/sf/', page), `https://docs.example/sf${page}`); const button = index.tagByName.get('sf-button')!; assert.doesNotMatch(describeTag(index, button), /SIMAI Framework docs/); - assert.match( - describeTag(index, button, 'https://docs.example'), - /\[SIMAI Framework docs\]\(https:\/\/docs\.example\/smart\.buttons\)/, + assert.ok(describeTag(index, button, 'https://docs.example').includes( + `[SIMAI Framework docs](https://docs.example${page})`, + )); +}); + +test('every link target in the data is a page the documentation site lists', () => { + const recorded = (JSON.parse(fs.readFileSync( + path.join(__dirname, '..', '..', 'contracts', 'docs-pages.json'), 'utf8', + )) as DocsPages).pages; + const targets = [ + ...index.framework.tags.flatMap(tag => (tag.page ? [tag.page] : [])), + ...Object.values(index.framework.utilityPages), + ]; + assert.ok(targets.length > 50, 'expected the data to link to many pages'); + for (const target of targets) assert.ok(recorded.includes(target), `not on the site: ${target}`); + assert.ok(!targets.some(target => /smart\.|utility\.|component\./.test(target)), 'a registry ID is not a page'); +}); + +test('registry names map to the site\'s own page names', () => { + const pages = [ + '/ru/smart-components/actions/buttons/', + '/ru/smart-components/overlays/modal/', + '/ru/utilities/spacing/margin/', + ]; + assert.equal(tagPage(pages, 'sf-button', 'smart.buttons'), pages[0]); + assert.equal(tagPage(pages, 'sf-button', 'smart.button'), pages[0]); + assert.equal(tagPage(pages, 'sf-modal', 'smart.modal'), pages[1]); + assert.equal(tagPage(pages, 'sf-unknown', 'smart.unknown'), null); + assert.equal(familyPage(pages, 'margin-ext'), pages[2]); + assert.equal(familyPage(pages, 'absent'), null); + assert.deepEqual( + pagesFromSitemap( + 'https://site.example/ru/utilities/https://site.example/ru/utilities/a/b/' + + 'https://site.example/ru/guide/x/https://other.example/ru/utilities/c/d/', + 'https://site.example', + ), + ['/ru/utilities/a/b/'], ); }); diff --git a/src/test/suite/completion.ext.test.ts b/src/test/suite/completion.ext.test.ts index c38a3bb..5b06f94 100644 --- a/src/test/suite/completion.ext.test.ts +++ b/src/test/suite/completion.ext.test.ts @@ -203,7 +203,7 @@ suite('hover provider', () => { const text = await hoverText('html', ''); assert.match(text, /Buttons/); assert.match(text, /smart\.buttons` · experimental/); - assert.match(text, /\[Documentation\]\(https:\/\/github\.com\/simai\/ui\/blob\//); + assert.match(text, /\[SIMAI Framework docs\]\(https:\/\/ui\.simai\.io\/ru\/smart-components\/actions\/buttons\/\)/); }); test('attributes show values and deprecation', async () => { @@ -307,15 +307,15 @@ suite('PHP templates, snippets and documentation links', () => { assert.ok(snippet, 'sf-field snippet missing'); }); - test('hovers link to the configured documentation site', async () => { + test('hovers link to real pages of the documentation site', async () => { const config = vscode.workspace.getConfiguration('sf'); - assert.doesNotMatch(await hoverText('html', ''), /SIMAI Framework docs/); + const page = '/ru/smart-components/actions/buttons/'; + assert.ok((await hoverText('html', '')).includes(`[SIMAI Framework docs](https://ui.simai.io${page})`)); await config.update('docs.baseUrl', 'https://docs.example', vscode.ConfigurationTarget.Global); try { - assert.match( - await hoverText('html', ''), - /\[SIMAI Framework docs\]\(https:\/\/docs\.example\/smart\.buttons\)/, - ); + assert.ok((await hoverText('html', '')).includes(`[SIMAI Framework docs](https://docs.example${page})`)); + await config.update('docs.baseUrl', '', vscode.ConfigurationTarget.Global); + assert.doesNotMatch(await hoverText('html', ''), /SIMAI Framework docs/); } finally { await config.update('docs.baseUrl', undefined, vscode.ConfigurationTarget.Global); }