@retailcrm/embed-ui-v1-components 0.9.19 → 0.9.22-alpha.1

package/docs/profiles/UiSelectOption.yml

@@ -1,44 +0,0 @@
-component: UiSelectOption
-summary: >
-  UiSelectOption is the base selectable child of UiSelect. It represents one option node
-  in the select option tree.
-
-public_import:
-  from: '@retailcrm/embed-ui-v1-components/remote'
-  named:
-    - UiSelectOption
-
-related_components:
-  - UiSelect
-  - UiSelectOptionGroup
-
-use_when:
-  - You need one option inside UiSelect.
-
-avoid_when:
-  - You need free layout content inside a select dropdown.
-
-api:
-  key_props:
-    - name: value
-    - name: label
-    - name: description
-    - name: disabled
-    - name: counter
-    - name: accent
-
-rendered_structure:
-  descriptive_only: true
-  root:
-    shape: div.ui-v1-select-option
-    tag: div
-  notes: Renders one option wrapper that usually contains a UiMenuItem row.
-
-geometry:
-  layout: listbox option row
-  root_display: block
-  width_behavior: stretches to available dropdown width
-
-ai_notes:
-  do:
-    - Use as the default child node of UiSelect.

package/docs/profiles/UiSelectOptionGroup.yml

@@ -1,38 +0,0 @@
-component: UiSelectOptionGroup
-summary: >
-  UiSelectOptionGroup groups related UiSelectOption nodes under a shared label.
-
-public_import:
-  from: '@retailcrm/embed-ui-v1-components/remote'
-  named:
-    - UiSelectOptionGroup
-
-related_components:
-  - UiSelect
-  - UiSelectOption
-
-use_when:
-  - You need grouped select options.
-
-avoid_when:
-  - You only have a flat list of options.
-
-api:
-  key_props:
-    - name: label
-
-rendered_structure:
-  descriptive_only: true
-  root:
-    shape: div.ui-v1-select-option-group
-    tag: div
-  notes: Renders one structural group wrapper around a heading area and nested option content.
-
-geometry:
-  layout: block-like option group wrapper
-  root_display: block
-  width_behavior: stretches to available dropdown width
-
-ai_notes:
-  do:
-    - Use to structure large option lists inside UiSelect.

package/docs/profiles/UiSkeleton.yml

@@ -1,41 +0,0 @@
-component: UiSkeleton
-summary: >
-  UiSkeleton displays a placeholder block for loading content. It supports text,
-  rectangle and circle appearances with pulse or shimmer animation.
-
-public_import:
-  from: '@retailcrm/embed-ui-v1-components/remote'
-  named:
-    - UiSkeleton
-
-use_when:
-  - You need a content placeholder before actual data is loaded.
-  - You need line, card or avatar-like loading placeholders.
-
-avoid_when:
-  - You need a spinner-like indicator instead of a content-shaped placeholder.
-
-api:
-  key_props:
-    - name: appearance
-    - name: size
-    - name: animation
-    - name: width
-    - name: height
-
-rendered_structure:
-  descriptive_only: true
-  root:
-    shape: div.ui-v1-skeleton
-    tag: div
-
-geometry:
-  layout: inline block or block placeholder
-  root_display: inline-block
-  width_behavior: preset width by appearance and size, overridable via width prop
-
-ai_notes:
-  do:
-    - Use text appearance for line placeholders.
-    - Use circle appearance for avatar placeholders.
-    - Override width or height only when the preset size is not enough.

package/docs/profiles/UiSlider.yml

@@ -1,38 +0,0 @@
-component: UiSlider
-summary: >
-  UiSlider is a range-selection control for single values or ranges on a numeric track.
-  It supports single-handle and range-handle modes.
-
-public_import:
-  from: '@retailcrm/embed-ui-v1-components/remote'
-  named:
-    - UiSlider
-
-use_when:
-  - You need compact ranged numeric selection.
-  - You need one or two draggable handles on a track.
-
-avoid_when:
-  - You need precise text entry.
-
-api:
-  key_props:
-    - name: type
-    - name: value
-    - name: min
-    - name: max
-    - name: labelled
-  emits:
-    - name: update:value
-
-rendered_structure:
-  descriptive_only: true
-  root:
-    shape: div.ui-v1-slider
-    tag: div
-  notes: The root contains labels, track, filler, and draggable handle nodes.
-
-geometry:
-  layout: horizontal slider track
-  root_display: flex
-  width_behavior: stretches to container width by default

package/docs/profiles/UiSwitch.yml

@@ -1,37 +0,0 @@
-component: UiSwitch
-summary: >
-  UiSwitch is a compact boolean toggle control. It is the most concise choice for on or off state
-  when checkbox semantics would feel visually heavy.
-
-public_import:
-  from: '@retailcrm/embed-ui-v1-components/remote'
-  named:
-    - UiSwitch
-
-use_when:
-  - You need a compact on or off toggle.
-
-avoid_when:
-  - You need checkbox-group semantics.
-
-api:
-  key_props:
-    - name: value
-    - name: square
-    - name: disabled
-  methods:
-    - name: click
-    - name: focus
-    - name: blur
-
-rendered_structure:
-  descriptive_only: true
-  root:
-    shape: span.ui-v1-switch
-    tag: span
-  notes: The root is one compact inline switch control.
-
-geometry:
-  layout: inline switch control
-  root_display: inline-block
-  width_behavior: content-sized by default

package/docs/profiles/UiTab.yml

@@ -1,119 +0,0 @@
-component: UiTab
-summary: >
-  UiTab is a declarative child node for UiTabGroup. It does not render meaningful
-  standalone UI by itself; instead, UiTabGroup consumes its props and slots to build
-  tab buttons, overflow menu items, and optional tab panel content.
-
-public_import:
-  from: '@retailcrm/embed-ui-v1-components/remote'
-  named:
-    - UiTab
-    - UiTabGroup
-
-related_components:
-  - UiTabGroup
-
-use_when:
-  - You need custom icon, label, counter, or content inside UiTabGroup.
-  - You want each tab declaration to keep its header and panel content together.
-
-avoid_when:
-  - You need a standalone button or link.
-  - A plain items array on UiTabGroup is enough for the screen.
-  - You need non-string tab identity, because UiTabGroup uses string id.
-
-api:
-  key_props:
-    - name: id
-      notes: Required string identifier used by UiTabGroup as activeId.
-    - name: label
-      notes: Fallback plain-text header label.
-    - name: counter
-      notes: Optional badge-like counter.
-    - name: disabled
-      notes: Marks the tab as non-interactive.
-  props:
-    - name: id
-      notes: Must be unique within one UiTabGroup.
-    - name: label
-      notes: Optional when label slot is used.
-    - name: counter
-      notes: Optional when counter slot is used.
-    - name: disabled
-      notes: Excluded from selection and keyboard navigation.
-  slots:
-    - name: icon
-      zone: tab leading icon
-      notes: Used both in the visible tab button and in the overflow menu item.
-    - name: label
-      zone: tab label
-      notes: Overrides plain label prop for the header.
-    - name: counter
-      zone: tab counter
-      notes: Overrides plain counter prop for the header.
-    - name: content
-      zone: active tab panel
-      notes: Rendered only for the active tab by UiTabGroup.
-
-rendered_structure:
-  descriptive_only: true
-  root:
-    shape: no standalone DOM root
-    tag: none
-  notes: >
-    UiTab is a structural declaration rather than a standalone DOM component. The
-    parent UiTabGroup resolves UiTab children and renders the actual tab buttons,
-    menu items, and optional tabpanel.
-
-geometry:
-  layout: no standalone layout, interpreted by UiTabGroup
-  root_display: none
-  width_behavior: no standalone width behavior of its own
-  notes:
-    - UiTab itself should not be used outside UiTabGroup.
-    - Icon-only tabs are inferred when icon exists but label and counter do not.
-
-behavior:
-  states:
-    - name: disabled
-      notes: The parent group keeps it visible but non-interactive.
-  notes:
-    - content slot is mounted only for the active tab.
-    - icon, label, and counter are also used when the tab moves into overflow menu.
-
-accessibility:
-  notes:
-    - UiTab does not create tab semantics by itself.
-    - UiTabGroup applies role=tab, aria-selected, aria-controls, and tabpanel relationships.
-
-composition:
-  works_well_with:
-    - UiTabGroup
-  patterns:
-    - title: Rich tab declaration
-      notes: Keep icon, counter, and content close to the tab declaration inside UiTabGroup.
-
-examples:
-  - title: Rich tab child
-    goal: Declare one tab with custom icon and panel content.
-    code: |
-      <UiTab id="overview" label="Overview" counter="8">
-        <template #icon>
-          <IconStar />
-        </template>
-
-        <template #content>
-          <section>
-            <h4>Overview</h4>
-            <p>Panel content for the active tab.</p>
-          </section>
-        </template>
-      </UiTab>
-
-ai_notes:
-  do:
-    - Use UiTab only inside UiTabGroup.
-    - Prefer label and counter props for simple cases, and slots for richer markup.
-  avoid:
-    - Do not expect UiTab to render useful DOM outside a group.
-    - Do not rely on an undocumented default slot for header rendering.

package/docs/profiles/UiTable.yml

@@ -1,152 +0,0 @@
-component: UiTable
-summary: >
-  UiTable is the main data table component. It supports row rendering, grouping, expandable rows,
-  footer areas, and row-level interactions.
-
-public_import:
-  from: '@retailcrm/embed-ui-v1-components/remote'
-  named:
-    - UiTable
-
-related_components:
-  - UiTableColumn
-
-use_when:
-  - You need structured tabular data.
-  - You need group headers, expandable rows, or footer sections.
-
-avoid_when:
-  - You need a simple list or card layout.
-
-api:
-  key_props:
-    - name: rows
-    - name: rowKey
-    - name: headless
-    - name: bordered
-    - name: fixed
-    - name: groupBy
-  slots:
-    - name: default
-      zone: columns
-      creates: Column declarations.
-    - name: expand
-      zone: expanded-row
-      creates: Expanded row content.
-    - name: footer
-      zone: footer
-      creates: Full footer area.
-    - name: group-head
-      zone: group-head
-      creates: Group heading content.
-    - name: empty
-      zone: empty-state
-      creates: Empty-state content.
-  emits:
-    - name: row:click
-  methods:
-    - name: resetExpanded
-    - name: expand
-    - name: collapse
-    - name: toggle
-
-rendered_structure:
-  descriptive_only: true
-  root:
-    shape: table.ui-v1-table
-    tag: table
-  zones:
-    - .ui-v1-table__section_head
-    - .ui-v1-table__section_body
-    - .ui-v1-table__section_foot
-    - .ui-v1-table__row
-    - .ui-v1-table__head-cell
-    - .ui-v1-table__body-cell
-  notes: >
-    Table layout is distributed across head, body, foot, and cell-level classes. Treat this as a
-    reasoning model for geometry and spacing, not as a stable selector contract.
-
-geometry:
-  layout: block-width table
-  root_display: table
-  width: 100%
-  width_behavior: stretches to container width by default
-  notes:
-    - Root fills available width.
-    - fixed=true switches table-layout from auto to fixed.
-    - bordered=true adds border and corner rounding through CSS variables.
-
-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.
-  root_classes:
-    - .ui-v1-table
-  state_classes:
-    - .ui-v1-table_fixed
-    - .ui-v1-table_bordered
-    - .ui-v1-table__head-cell_align-center
-    - .ui-v1-table__head-cell_align-right
-    - .ui-v1-table__body-cell_align-center
-    - .ui-v1-table__body-cell_align-right
-    - .ui-v1-table__body-cell_valign-top
-    - .ui-v1-table__body-cell_valign-bottom
-    - .ui-v1-table__body-cell_theme-group
-    - .ui-v1-table__body-cell_trim
-    - .ui-v1-table__head-cell_trim
-  zones:
-    - .ui-v1-table__head-cell
-    - .ui-v1-table__body-cell
-    - .ui-v1-table__footer-cell
-  css_variables:
-    public_theme_variables:
-      - name: --ui-v1-table-border-width
-        effect: Outer border width in bordered mode.
-      - name: --ui-v1-table-rounding
-        effect: Shared corner rounding.
-      - name: --ui-v1-table-cell-padding-x
-        effect: Base inline cell padding.
-      - name: --ui-v1-table-cell-padding-y
-        effect: Base block cell padding.
-      - name: --ui-v1-table-head-background
-        effect: Header row background.
-      - name: --ui-v1-table-group-head-background
-        effect: Group heading row background.
-      - name: --ui-v1-table-padding-start
-        effect: Effective first-column start padding.
-      - name: --ui-v1-table-padding-end
-        effect: Effective last-column end padding.
-    internal_layout_variables:
-      - name: --ui-v1-table-effective-padding-start
-        effect: Start padding after bordered adjustments.
-      - name: --ui-v1-table-effective-padding-end
-        effect: End padding after bordered adjustments.
-      - name: --ui-v1-table-head-cell-padding-block-start
-        effect: Header top padding.
-      - name: --ui-v1-table-head-cell-padding-block-end
-        effect: Header bottom padding.
-      - name: --ui-v1-table-body-cell-padding-block-start
-        effect: Body top padding.
-      - name: --ui-v1-table-body-cell-padding-block-end
-        effect: Body bottom padding.
-      - name: --ui-v1-table-group-head-padding-block-start
-        effect: Group row top padding.
-      - name: --ui-v1-table-group-head-padding-block-end
-        effect: Group row bottom padding.
-  typography:
-    default:
-      mixin: text-small
-      size: 14px
-      line_height: 20px
-      weight: 400
-    head_cells:
-      mixin: text-tiny-accent
-      size: 12px
-      line_height: 14px
-      weight: 500
-    group_rows:
-      mixin: text-tiny
-      size: 12px
-      line_height: 14px
-      weight: 400

package/docs/profiles/UiTableColumn.yml

@@ -1,50 +0,0 @@
-component: UiTableColumn
-summary: >
-  UiTableColumn declares one logical column inside UiTable. It carries label and sizing metadata
-  and defines how header labels and cells render.
-
-public_import:
-  from: '@retailcrm/embed-ui-v1-components/remote'
-  named:
-    - UiTableColumn
-
-related_components:
-  - UiTable
-
-use_when:
-  - You define columns for UiTable.
-
-avoid_when:
-  - You need standalone layout markup outside UiTable.
-
-api:
-  key_props:
-    - name: label
-    - name: width
-    - name: minWidth
-    - name: maxWidth
-    - name: align
-    - name: valign
-    - name: trim
-  slots:
-    - name: default
-      zone: cell
-      creates: Cell content.
-    - name: cell
-      zone: cell
-      creates: Explicit cell content.
-    - name: label
-      zone: header-label
-      creates: Header label content.
-
-rendered_structure:
-  descriptive_only: true
-  root:
-    shape: col
-    tag: col
-  notes: The component renders one structural table column node.
-
-geometry:
-  layout: structural table column
-  root_display: table-column
-  width_behavior: controlled by table layout and width props on the parent table

package/docs/profiles/UiTableFooterButton.yml

@@ -1,44 +0,0 @@
-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.
-
-public_import:
-  from: '@retailcrm/embed-ui-v1-components/remote'
-  named:
-    - UiTableFooterButton
-
-related_components:
-  - UiTable
-  - UiTableFooterSection
-
-use_when:
-  - You need an action inside a custom table footer area.
-
-avoid_when:
-  - UiButton is enough outside table footer composition.
-  - You are not building custom footer structure.
-
-api:
-  key_props:
-    - name: type
-  emits:
-    - name: click
-
-rendered_structure:
-  descriptive_only: true
-  root:
-    shape: button.ui-v1-table__footer-button
-    tag: button
-  notes: The visible label is wrapped in an inner inline-flex content span.
-
-geometry:
-  layout: inline footer action
-  root_display: inline-block
-  width_behavior: content-sized by label content
-
-ai_notes:
-  do:
-    - Keep it in table footer usage.
-  avoid:
-    - Do not substitute it for general page-level actions.

package/docs/profiles/UiTableFooterSection.yml

@@ -1,38 +0,0 @@
-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.
-
-public_import:
-  from: '@retailcrm/embed-ui-v1-components/remote'
-  named:
-    - UiTableFooterSection
-
-related_components:
-  - UiTable
-  - UiTableFooterButton
-
-use_when:
-  - You compose custom footer content from public table primitives.
-
-avoid_when:
-  - UiTable footer slots already solve the layout.
-  - You do not need explicit footer structure.
-
-rendered_structure:
-  descriptive_only: true
-  root:
-    shape: div.ui-v1-table__footer-section
-    tag: div
-  notes: Renders one footer section wrapper inside the table footer controls area.
-
-geometry:
-  layout: footer meta or control section
-  root_display: block
-  width_behavior: content-sized within the footer flex row
-
-ai_notes:
-  do:
-    - Use it only as part of custom table footer composition.
-  avoid:
-    - Do not treat it as a standalone layout section.

package/docs/profiles/UiTag.yml

@@ -1,41 +0,0 @@
-component: UiTag
-summary: >
-  UiTag is a compact label or status pill. It can be interactive, removable, pinned, or visually saturated.
-
-public_import:
-  from: '@retailcrm/embed-ui-v1-components/remote'
-  named:
-    - UiTag
-
-use_when:
-  - You need a short status or label pill.
-  - You need removable or interactive tags.
-
-avoid_when:
-  - You need a full button or link.
-
-api:
-  key_props:
-    - name: size
-    - name: pinned
-    - name: removable
-    - name: interactive
-    - name: saturated
-    - name: background
-  emits:
-    - name: click
-    - name: focus
-    - name: blur
-    - name: remove
-
-rendered_structure:
-  descriptive_only: true
-  root:
-    shape: div.ui-v1-tag-wrapper
-    tag: div
-  notes: The public root is a wrapper div; the visible pill itself is the nested .ui-v1-tag node.
-
-geometry:
-  layout: wrapper around a content-sized tag pill
-  root_display: block
-  width_behavior: root follows normal block flow, inner tag stays content-sized

package/docs/profiles/UiTimePicker.yml

@@ -1,46 +0,0 @@
-component: UiTimePicker
-summary: >
-  UiTimePicker is a time input component that combines textbox-like entry with a list of
-  normalized time variants and bounds.
-
-public_import:
-  from: '@retailcrm/embed-ui-v1-components/remote'
-  named:
-    - UiTimePicker
-
-related_components:
-  - UiTextbox
-  - UiPopper
-
-use_when:
-  - You need editable time input.
-  - You need bounded time variants or interval-based time selection.
-
-avoid_when:
-  - You need raw text input without time semantics.
-
-api:
-  key_props:
-    - name: value
-    - name: placeholder
-    - name: interval
-    - name: timeVariants
-    - name: minTime
-    - name: maxTime
-    - name: textboxOptions
-  methods:
-    - name: open
-    - name: close
-    - name: focus
-
-rendered_structure:
-  descriptive_only: true
-  root:
-    shape: div.ui-v1-time-picker
-    tag: div
-  notes: The root is a combobox wrapper around the textbox-like trigger and the popper-based listbox.
-
-geometry:
-  layout: combobox wrapper with floating menu
-  root_display: block
-  width_behavior: follows normal block flow for the wrapper, with a floating dropdown layer