@retailcrm/embed-ui-v1-components 0.9.18 → 0.9.21

package/docs/profiles/UiTable.yml

@@ -2,6 +2,7 @@ component: UiTable
 summary: >
   UiTable is the main data table component. It supports row rendering, grouping, expandable rows,
   footer areas, and row-level interactions.
+usage: https://retailcrm.github.io/embed-ui/v1-components/0.9.18/?path=/docs/components-uitable--docs
 
 public_import:
   from: '@retailcrm/embed-ui-v1-components/remote'
@@ -10,6 +11,9 @@ public_import:
 
 related_components:
   - UiTableColumn
+  - UiTableFooterButton
+  - UiTableFooterSection
+  - UiTableSorter
 
 use_when:
   - You need structured tabular data.
@@ -36,6 +40,18 @@ api:
     - name: footer
       zone: footer
       creates: Full footer area.
+    - name: footer-summary
+      zone: structured-footer
+      creates: Summary or selected-count area above table footer controls.
+    - name: footer-page-size
+      zone: structured-footer
+      creates: Page-size controls in the footer control row.
+    - name: footer-export
+      zone: structured-footer
+      creates: Export controls in the footer control row.
+    - name: footer-pagination
+      zone: structured-footer
+      creates: Pagination controls in the footer control row.
     - name: group-head
       zone: group-head
       creates: Group heading content.
@@ -75,12 +91,16 @@ geometry:
     - Root fills available width.
     - fixed=true switches table-layout from auto to fixed.
     - bordered=true adds border and corner rounding through CSS variables.
+    - Filters and search controls should usually be placed above the table, not in the table root.
+    - Table-scoped pagination belongs in footer slots when custom controls are needed.
 
 styling:
   notes:
     - UiTable exposes a relatively rich CSS-variable surface for spacing and table chrome.
     - Prefer table props and slot composition first, then CSS variables for spacing or background tuning.
     - Internal classes are descriptive and mainly useful for debugging or narrow local integration.
+    - For reference-style footers, add a local class to UiTable and scope footer styles through that class.
+    - When styling footer pagination buttons, combine the internal footer button class with the local state class so base footer styles do not override page, active, or arrow colors.
   root_classes:
     - .ui-v1-table
   state_classes:
@@ -150,3 +170,131 @@ styling:
       size: 12px
       line_height: 14px
       weight: 400
+  reference_footer_css:
+    notes:
+      - Use this as the minimum CSS contract when recreating the Storybook reference table footer.
+      - Keep class names local to the screen, but preserve the same geometry and state rules.
+      - Plain CSS values below mirror the package palette: blue #005eeb, black #1e2248, grey #afb9c3 / #dee2e6.
+    example: |
+      .entity-list-table {
+        --ui-v1-table-cell-padding-x: 12px;
+        --ui-v1-table-cell-padding-y: 12px;
+        --ui-v1-table-padding-start: 16px;
+        --ui-v1-table-padding-end: 16px;
+        --ui-v1-table-rounding: 4px;
+        --ui-v1-table-head-cell-padding-block-start: 14px;
+        --ui-v1-table-head-cell-padding-block-end: 14px;
+        --ui-v1-table-body-cell-padding-block-start: 15px;
+        --ui-v1-table-body-cell-padding-block-end: 15px;
+      }
+
+      .entity-list-table .ui-v1-table__footer-meta {
+        min-height: 40px;
+        font-weight: 400;
+      }
+
+      .entity-list-table .ui-v1-table__footer-controls {
+        min-height: 52px;
+        background: #f9fafb;
+      }
+
+      .entity-list-table .ui-v1-table__footer-section {
+        font-size: 14px;
+        line-height: 20px;
+      }
+
+      .entity-list-table .ui-v1-table__footer-side > .entity-list-table__pagination-section {
+        padding-block: 8px;
+      }
+
+      .entity-list-table__pagination {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        height: 36px;
+      }
+
+      .entity-list-table__pagination-button,
+      .entity-list-table__pagination-arrow {
+        width: 36px;
+        height: 36px;
+        border-radius: 4px;
+      }
+
+      .entity-list-table .ui-v1-table__footer-button.entity-list-table__pagination-button {
+        color: #1e2248;
+        font-size: 14px;
+        line-height: 20px;
+      }
+
+      .entity-list-table .ui-v1-table__footer-button.entity-list-table__pagination-button_current {
+        color: #fff;
+        background: #005eeb;
+      }
+
+      .entity-list-table .ui-v1-table__footer-button.entity-list-table__pagination-arrow {
+        color: #afb9c3;
+      }
+
+      .entity-list-table__pagination-arrow-icon {
+        display: block;
+        width: 24px;
+        height: 24px;
+      }
+
+      .entity-list-table__pagination-divider {
+        width: 1px;
+        height: 52px;
+        margin-block: -8px;
+        background: #dee2e6;
+      }
+
+composition:
+  filters:
+    notes:
+      - Keep filter controls directly above UiTable so the relationship between filters and rows is obvious.
+      - Use UiTextbox for text search and UiSelect or compact toggle controls for finite filters.
+      - Persist filter values in URL query parameters when routing is available.
+  sorting:
+    notes:
+      - Use UiTableSorter inside a UiTableColumn label slot for sortable columns.
+      - Reset pagination to the first page when sorting changes.
+      - Persist sort key and direction in URL query parameters when routing is available.
+  pagination:
+    notes:
+      - Use footer-summary, footer-page-size, footer-export, and footer-pagination slots for structured footer controls.
+      - footer-pagination should use UiTableFooterSection as the root wrapper.
+      - Use UiTableFooterButton for page numbers and previous/next arrow controls.
+      - Do not use regular UiButton for table footer pagination.
+      - Use a local inner flex group for page buttons, dividers, and arrow buttons when recreating the reference-table footer pattern.
+      - Use chevron icon assets for previous/next arrows instead of text glyphs such as < or >.
+      - Add scoped CSS for footer meta height, control-row background, pagination button size, active page state, arrow icon size, and vertical dividers.
+      - Persist page and page size in URL query parameters when routing is available.
+      - Reset page to 1 when filters or sorting change.
+
+ai_notes:
+  do:
+    - Read ../AI.md table-screen rules before generating complete table screens.
+    - Provide row-key for stable row identity.
+    - Put table filters above the table.
+    - Use structured footer slots for summary, page-size controls, export, and pagination.
+    - Compose footer controls with UiTableFooterSection and UiTableFooterButton.
+    - Copy the reference_footer_css pattern when building a realistic entity-list footer.
+    - Use UiTableSorter for sortable headers.
+  avoid:
+    - Do not hide table filters in page header actions.
+    - Do not use UiButton inside table footer pagination.
+    - Do not put pagination only in local state when the screen has routable result sets.
+    - Do not import table internals from host or src paths.
+
+behavior:
+  notes:
+    - Read key_props first to identify supported states and variants.
+    - Prefer controlled props and documented emits when synchronizing component state with screen logic.
+
+accessibility:
+  notes:
+    - Use meaningful column labels so screen-reader users can understand each cell in context.
+    - Use stable row keys so expanded rows and row-level state remain attached to the correct data item.
+    - Put interactive controls inside cells as real controls such as UiLink or UiButton, not plain clickable text.
+    - When rows are clickable, keep the primary row action visible as a link or button as well.

package/docs/profiles/UiTableBodyCell.yml

@@ -2,6 +2,7 @@ component: UiTableBodyCell
 summary: >
   UiTableBodyCell is the low-level body cell primitive used inside UiTable rows.
   Use it only for custom table layouts built from public table parts.
+usage: https://retailcrm.github.io/embed-ui/v1-components/0.9.18/?path=/docs/components-uitable--docs
 
 public_import:
   from: '@retailcrm/embed-ui-v1-components/remote'
@@ -43,5 +44,32 @@ geometry:
 ai_notes:
   do:
     - Keep it inside UiTable row composition.
+    - Use theme="group" only for group header style cells.
   avoid:
     - Do not use it as a generic box or layout wrapper.
+
+composition:
+  works_well_with:
+    - UiTable
+    - UiTableColumn
+  patterns:
+    - title: Custom row structure
+      notes: Prefer UiTableColumn cell slots first; use UiTableBodyCell only for low-level custom rows.
+
+behavior:
+  notes:
+    - Behavior is mostly coordinated by the parent component.
+    - Use this child only in the documented parent composition.
+
+accessibility:
+  notes:
+    - This component is normally used inside its parent composition; accessibility behavior is completed by the parent component.
+    - Keep labels and visible text meaningful because parent keyboard and screen-reader behavior depends on child content.
+
+styling:
+  notes:
+    - Use documented props and slots as the primary styling API.
+    - Internal .ui-v1-* classes are descriptive implementation details for reasoning and debugging unless a profile marks them as public theme hooks.
+    - Use Storybook from the usage link to verify visual variants before generating custom layout around the component.
+  root_classes:
+    - .ui-v1-table

package/docs/profiles/UiTableColumn.yml

@@ -2,6 +2,7 @@ component: UiTableColumn
 summary: >
   UiTableColumn declares one logical column inside UiTable. It carries label and sizing metadata
   and defines how header labels and cells render.
+usage: https://retailcrm.github.io/embed-ui/v1-components/0.9.18/?path=/docs/components-uitable--docs
 
 public_import:
   from: '@retailcrm/embed-ui-v1-components/remote'
@@ -48,3 +49,41 @@ geometry:
   layout: structural table column
   root_display: table-column
   width_behavior: controlled by table layout and width props on the parent table
+
+composition:
+  works_well_with:
+    - UiTable
+    - UiTableSorter
+    - UiLink
+    - UiTag
+  patterns:
+    - title: Primary link column
+      notes: Put the row's main UiLink in the first meaningful text column and set link size to small.
+    - title: Sortable header
+      notes: Use the label slot with UiTableSorter when the column supports sorting.
+    - title: Status column
+      notes: Use UiTag for categorical statuses instead of raw colored text.
+
+ai_notes:
+  do:
+    - Set minWidth for important text columns so generated tables remain scannable.
+    - Use align="right" for numbers, money, and percentages.
+    - Use trim only for narrow checkbox, icon, or action columns.
+  avoid:
+    - Do not place filters inside column labels; filters belong above the table.
+
+behavior:
+  notes:
+    - Behavior is mostly coordinated by the parent component.
+    - Use this child only in the documented parent composition.
+
+accessibility:
+  notes:
+    - This component is normally used inside its parent composition; accessibility behavior is completed by the parent component.
+    - Keep labels and visible text meaningful because parent keyboard and screen-reader behavior depends on child content.
+
+styling:
+  notes:
+    - Use documented props and slots as the primary styling API.
+    - Internal .ui-v1-* classes are descriptive implementation details for reasoning and debugging unless a profile marks them as public theme hooks.
+    - Use Storybook from the usage link to verify visual variants before generating custom layout around the component.

package/docs/profiles/UiTableFooterButton.yml

@@ -2,6 +2,7 @@ component: UiTableFooterButton
 summary: >
   UiTableFooterButton is a footer-scoped action control for custom table footer layouts.
   It behaves like a table-specific button primitive rather than a full replacement for UiButton.
+usage: https://retailcrm.github.io/embed-ui/v1-components/0.9.20/?path=/docs/components-uitable--docs
 
 public_import:
   from: '@retailcrm/embed-ui-v1-components/remote'
@@ -40,5 +41,47 @@ geometry:
 ai_notes:
   do:
     - Keep it in table footer usage.
+    - Use for page-size, pagination, export, and compact table-scoped footer actions.
   avoid:
     - Do not substitute it for general page-level actions.
+
+composition:
+  works_well_with:
+    - UiTableFooterSection
+    - UiTable
+  patterns:
+    - title: Pagination control
+      notes: Use inside footer-pagination slot for previous, next, and page controls.
+      states:
+        - name: ordinary-page
+          notes: Render the page number as UiTableFooterButton text.
+        - name: current-page
+          notes: Mark the active page with a local custom class and style it inside the table example scope.
+        - name: arrow
+          notes: Render the previous/next chevron icon inside UiTableFooterButton and provide an aria-label.
+        - name: passive-or-disabled
+          notes: Use disabled when the control is unavailable; use a local custom class only for visual passive states such as selected page size.
+    - title: Page-size control
+      notes: Use inside footer-page-size slot for compact page-size choices.
+
+behavior:
+  notes:
+    - Behavior is mostly coordinated by the parent component.
+    - Use this child only in the documented parent composition.
+
+accessibility:
+  notes:
+    - This component is normally used inside its parent composition; accessibility behavior is completed by the parent component.
+    - Keep labels and visible text meaningful because parent keyboard and screen-reader behavior depends on child content.
+
+styling:
+  notes:
+    - Use documented props and slots as the primary styling API.
+    - Internal .ui-v1-* classes are descriptive implementation details for reasoning and debugging unless a profile marks them as public theme hooks.
+    - Use Storybook from the usage link to verify visual variants before generating custom layout around the component.
+    - For footer pagination, style local custom classes on UiTableFooterButton instead of replacing it with UiButton.
+    - For page buttons, use a 36px square target with 4px radius, 14px text, black ordinary page color, and blue active background.
+    - For arrow buttons, use a 36px square target with a 24px chevron icon and grey color.
+    - Combine selectors like `.entity-list-table .ui-v1-table__footer-button.entity-list-table__pagination-button_current` when overriding active states, because base footer button styles set link-like colors.
+  root_classes:
+    - .ui-v1-table

package/docs/profiles/UiTableFooterSection.yml

@@ -2,6 +2,7 @@ component: UiTableFooterSection
 summary: >
   UiTableFooterSection is the low-level footer container for custom table footer layouts.
   It is mainly useful when UiTable footer slots are not enough on their own.
+usage: https://retailcrm.github.io/embed-ui/v1-components/0.9.20/?path=/docs/components-uitable--docs
 
 public_import:
   from: '@retailcrm/embed-ui-v1-components/remote'
@@ -19,6 +20,12 @@ avoid_when:
   - UiTable footer slots already solve the layout.
   - You do not need explicit footer structure.
 
+api:
+  slots:
+    - name: default
+      zone: footer-section-content
+      creates: Compact footer controls or metadata.
+
 rendered_structure:
   descriptive_only: true
   root:
@@ -34,5 +41,35 @@ geometry:
 ai_notes:
   do:
     - Use it only as part of custom table footer composition.
+    - Keep content compact and table-scoped.
+    - Add local CSS on the table root for footer row height, background, typography, and pagination spacing when recreating the reference footer.
   avoid:
     - Do not treat it as a standalone layout section.
+
+composition:
+  works_well_with:
+    - UiTable
+    - UiTableFooterButton
+  patterns:
+    - title: Structured table footer
+      notes: Use in footer-page-size, footer-export, and footer-pagination slots to match table footer spacing.
+
+behavior:
+  notes:
+    - Behavior is mostly coordinated by the parent component.
+    - Use this child only in the documented parent composition.
+
+accessibility:
+  notes:
+    - This component is normally used inside its parent composition; accessibility behavior is completed by the parent component.
+    - Keep labels and visible text meaningful because parent keyboard and screen-reader behavior depends on child content.
+
+styling:
+  notes:
+    - Use documented props and slots as the primary styling API.
+    - Internal .ui-v1-* classes are descriptive implementation details for reasoning and debugging unless a profile marks them as public theme hooks.
+    - Use Storybook from the usage link to verify visual variants before generating custom layout around the component.
+    - For reference-style footer controls, apply a local class to each UiTableFooterSection and style it through the UiTable root class.
+    - The pagination section usually needs padding-block 8px and an inner flex group with 8px gaps.
+  root_classes:
+    - .ui-v1-table

package/docs/profiles/UiTableHeadCell.yml

@@ -2,6 +2,7 @@ component: UiTableHeadCell
 summary: >
   UiTableHeadCell is the low-level table header cell primitive used inside UiTable head rows.
   Use it only when you build custom table structure from public table parts.
+usage: https://retailcrm.github.io/embed-ui/v1-components/0.9.18/?path=/docs/components-uitable--docs
 
 public_import:
   from: '@retailcrm/embed-ui-v1-components/remote'
@@ -40,5 +41,32 @@ geometry:
 ai_notes:
   do:
     - Prefer UiTableColumn first for regular table headers.
+    - Use with UiTableSorter when building fully custom table structure.
   avoid:
     - Do not use it as a generic container outside table head rows.
+
+composition:
+  works_well_with:
+    - UiTableSorter
+    - UiTableColumn
+  patterns:
+    - title: Low-level sortable head
+      notes: Use only when UiTableColumn label slot cannot express the needed header.
+
+behavior:
+  notes:
+    - Behavior is mostly coordinated by the parent component.
+    - Use this child only in the documented parent composition.
+
+accessibility:
+  notes:
+    - This component is normally used inside its parent composition; accessibility behavior is completed by the parent component.
+    - Keep labels and visible text meaningful because parent keyboard and screen-reader behavior depends on child content.
+
+styling:
+  notes:
+    - Use documented props and slots as the primary styling API.
+    - Internal .ui-v1-* classes are descriptive implementation details for reasoning and debugging unless a profile marks them as public theme hooks.
+    - Use Storybook from the usage link to verify visual variants before generating custom layout around the component.
+  root_classes:
+    - .ui-v1-table

package/docs/profiles/UiTableSorter.yml

@@ -2,6 +2,7 @@ component: UiTableSorter
 summary: >
   UiTableSorter is a compact sort control primitive for custom table head content.
   Use it when header rendering is composed manually and sorting state must be shown explicitly.
+usage: https://retailcrm.github.io/embed-ui/v1-components/0.9.18/?path=/docs/components-uitable--docs
 
 public_import:
   from: '@retailcrm/embed-ui-v1-components/remote'
@@ -41,5 +42,33 @@ geometry:
 ai_notes:
   do:
     - Pair it with explicit sort state in screen logic.
+    - Persist sort key and direction in URL query parameters when the table is routable.
+    - Reset the current page to 1 when sorting changes.
   avoid:
     - Do not use it as a generic icon-only control outside table headers.
+
+composition:
+  works_well_with:
+    - UiTableColumn
+    - UiTableHeadCell
+  patterns:
+    - title: Column label slot
+      notes: Place in UiTableColumn label slot for normal sortable columns.
+
+behavior:
+  notes:
+    - Behavior is mostly coordinated by the parent component.
+    - Use this child only in the documented parent composition.
+
+accessibility:
+  notes:
+    - This component is normally used inside its parent composition; accessibility behavior is completed by the parent component.
+    - Keep labels and visible text meaningful because parent keyboard and screen-reader behavior depends on child content.
+
+styling:
+  notes:
+    - Use documented props and slots as the primary styling API.
+    - Internal .ui-v1-* classes are descriptive implementation details for reasoning and debugging unless a profile marks them as public theme hooks.
+    - Use Storybook from the usage link to verify visual variants before generating custom layout around the component.
+  root_classes:
+    - .ui-v1-table

package/docs/profiles/UiTag.yml

@@ -1,6 +1,7 @@
 component: UiTag
 summary: >
   UiTag is a compact label or status pill. It can be interactive, removable, pinned, or visually saturated.
+usage: https://retailcrm.github.io/embed-ui/v1-components/0.9.18/?path=/docs/components-uitag--docs
 
 public_import:
   from: '@retailcrm/embed-ui-v1-components/remote'
@@ -39,3 +40,40 @@ geometry:
   layout: wrapper around a content-sized tag pill
   root_display: block
   width_behavior: root follows normal block flow, inner tag stays content-sized
+
+behavior:
+  notes:
+    - interactive makes the tag feel actionable; use it only when click handling exists.
+    - removable should emit remove and needs a clear removal consequence.
+    - background is useful for semantic status palettes, but keep contrast readable.
+
+composition:
+  works_well_with:
+    - UiTable
+    - UiSelectOption
+    - UiMenuItem
+  patterns:
+    - title: Table status
+      notes: Use in UiTable cells for categorical states instead of raw colored text.
+    - title: Removable filter chip
+      notes: Use removable tags to show active filters when space allows.
+
+ai_notes:
+  do:
+    - Use for short statuses, categories, and active filter chips.
+    - Keep labels concise; tags should scan quickly.
+  avoid:
+    - Do not use as a full command button or as long explanatory text.
+
+accessibility:
+  notes:
+    - Keep rendered text concise and meaningful for screen-reader users.
+    - Do not use this component as the only carrier of critical state if the state also needs form-level validation or focus management.
+
+styling:
+  notes:
+    - Use documented props and slots as the primary styling API.
+    - Internal .ui-v1-* classes are descriptive implementation details for reasoning and debugging unless a profile marks them as public theme hooks.
+    - Use Storybook from the usage link to verify visual variants before generating custom layout around the component.
+  root_classes:
+    - .ui-v1-tag-wrapper

package/docs/profiles/UiTextbox.yml

@@ -2,6 +2,7 @@ component: UiTextbox
 summary: >
   UiTextbox is the base text and numeric input component. It covers single-line input,
   textarea mode, numeric and decimal input, plus prefix, suffix, icon zones, and a clear action.
+usage: https://retailcrm.github.io/embed-ui/v1-components/0.9.18/?path=/docs/components-uitextbox--docs
 
 public_import:
   from: '@retailcrm/embed-ui-v1-components/remote'
@@ -346,38 +347,6 @@ composition:
     - title: Inline control
       notes: Use UiTextbox as a self-contained control, not as a wrapper for arbitrary content.
 
-examples:
-  - title: Field wiring
-    goal: Build a standard text field with correct ARIA wiring.
-    code: |
-      <UiField id="name" label="Name">
-        <template #default="field">
-          <UiTextbox
-            :id="field.id"
-            :input-attributes="{
-              'aria-labelledby': field.ariaLabelledby,
-              'aria-invalid': field.ariaInvalid,
-            }"
-            v-model:value="name"
-          />
-        </template>
-      </UiField>
-  - title: Search pattern
-    goal: Build a textbox with a leading icon and clear action.
-    code: |
-      <UiTextbox v-model:value="term" clearable>
-        <template #leading-icon>
-          <IconSearch aria-hidden="true" />
-        </template>
-      </UiTextbox>
-  - title: Prefix and suffix zones
-    goal: Show safe markup for prefix and suffix content.
-    code: |
-      <UiTextbox v-model:value="amount" inputmode="decimal" suffix="₽">
-        <template #prefix>
-          <span>Amount</span>
-        </template>
-      </UiTextbox>
 
 ai_notes:
   do:

package/docs/profiles/UiTimePicker.yml

@@ -2,6 +2,7 @@ component: UiTimePicker
 summary: >
   UiTimePicker is a time input component that combines textbox-like entry with a list of
   normalized time variants and bounds.
+usage: https://retailcrm.github.io/embed-ui/v1-components/0.9.18/?path=/docs/components-uitimepicker--docs
 
 public_import:
   from: '@retailcrm/embed-ui-v1-components/remote'
@@ -44,3 +45,42 @@ geometry:
   layout: combobox wrapper with floating menu
   root_display: block
   width_behavior: follows normal block flow for the wrapper, with a floating dropdown layer
+
+behavior:
+  notes:
+    - interval and timeVariants shape the selectable list.
+    - minTime and maxTime constrain valid selection.
+    - textboxOptions should be used for trigger sizing and placeholder behavior.
+
+composition:
+  works_well_with:
+    - UiField
+    - UiTextbox
+  patterns:
+    - title: Time field
+      notes: Wrap in UiField for forms and settings screens.
+    - title: Bounded scheduler input
+      notes: Use minTime, maxTime, and interval for schedules instead of allowing arbitrary text.
+
+ai_notes:
+  do:
+    - Use for semantic time values and schedule inputs.
+  avoid:
+    - Do not use UiTextbox alone when the value must be a valid bounded time.
+
+accessibility:
+  notes:
+    - Prefer visible text labels for interactive controls.
+    - For icon-only or custom visual content, provide an accessible name through the supported label, title, or ARIA attributes exposed by the component.
+    - Preserve native keyboard semantics by using the component root instead of recreating the control with arbitrary markup.
+  keyboard:
+    - Tab moves focus to the control when it is focusable.
+    - Enter or Space activates native button-like controls when the host implementation renders a button.
+
+styling:
+  notes:
+    - Use documented props and slots as the primary styling API.
+    - Internal .ui-v1-* classes are descriptive implementation details for reasoning and debugging unless a profile marks them as public theme hooks.
+    - Use Storybook from the usage link to verify visual variants before generating custom layout around the component.
+  root_classes:
+    - .ui-v1-time-picker

package/docs/profiles/UiToggleButton.yml

@@ -4,6 +4,7 @@ summary: >
   native button shape and methods, but the pressed state is controlled externally and
   can be used either for a standalone toggle or as the visual basis of segmented groups
   such as UiToggleGroup.
+usage: https://retailcrm.github.io/embed-ui/v1-components/0.9.18/?path=/docs/components-uitogglebutton--docs
 
 public_import:
   from: '@retailcrm/embed-ui-v1-components/remote'
@@ -189,17 +190,6 @@ composition:
     - title: Segmented multi-select primitive
       notes: Use grouped buttons when composing a custom segmented row or when extending UiToggleGroup behavior.
 
-examples:
-  - title: Standalone pressed state
-    goal: Build a toggleable filter button.
-    code: |
-      <UiToggleButton
-        :pressed="filtersOpened"
-        :aria-pressed="filtersOpened"
-        @click="filtersOpened = !filtersOpened"
-      >
-        Filters
-      </UiToggleButton>
 
 ai_notes:
   do:

package/docs/profiles/UiToggleGroup.yml

@@ -4,6 +4,7 @@ summary: >
   designed for short always-visible choice sets such as weekdays, filters, or compact
   mode flags where classic checkboxes would feel visually heavy. For richer option
   markup, compose it with UiToggleGroupOption instead of relying only on the options array.
+usage: https://retailcrm.github.io/embed-ui/v1-components/0.9.18/?path=/docs/components-uitogglegroup--docs
 
 public_import:
   from: '@retailcrm/embed-ui-v1-components/remote'
@@ -187,19 +188,6 @@ composition:
     - title: Filter chips with icon
       notes: Use manual option composition or the shared icon slot for compact filters.
 
-examples:
-  - title: Weekday selection
-    goal: Build a segmented multi-select weekday picker.
-    code: |
-      <UiToggleGroup
-        v-model:model="days"
-        aria-label="Weekdays"
-        rubber
-      >
-        <UiToggleGroupOption label="Mon" value="monday" />
-        <UiToggleGroupOption label="Tue" value="tuesday" />
-        <UiToggleGroupOption label="Wed" value="wednesday" />
-      </UiToggleGroup>
 
 ai_notes:
   do: