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

package/docs/profiles/UiToggleGroupOption.yml

@@ -3,6 +3,7 @@ summary: >
   UiToggleGroupOption is the declarative option child of UiToggleGroup. It is the
   richer alternative to the plain options array and is used when one segment needs
   custom icon, custom label markup, or a non-trivial value.
+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'
@@ -96,17 +97,6 @@ composition:
     - title: Custom label content
       notes: Use label or default slot when the option needs richer inline markup.
 
-examples:
-  - title: Icon option inside a group
-    goal: Define one rich segmented option with icon content.
-    code: |
-      <UiToggleGroup v-model:model="filters" aria-label="Filters">
-        <UiToggleGroupOption label="Files" value="files">
-          <template #icon>
-            <IconFile />
-          </template>
-        </UiToggleGroupOption>
-      </UiToggleGroup>
 
 ai_notes:
   do:
@@ -114,3 +104,11 @@ ai_notes:
     - Prefer label prop for plain text and slots for richer content.
   avoid:
     - Do not use it as a standalone control outside UiToggleGroup.
+
+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-toggle-button

package/docs/profiles/UiToolbarButton.yml

@@ -2,6 +2,7 @@ component: UiToolbarButton
 summary: >
   UiToolbarButton is a compact button for toolbar zones. It shares action semantics with buttons
   but is tuned for dense toolbar layouts.
+usage: https://retailcrm.github.io/embed-ui/v1-components/0.9.18/?path=/docs/components-uitoolbarbutton--docs
 
 public_import:
   from: '@retailcrm/embed-ui-v1-components/remote'
@@ -35,3 +36,39 @@ geometry:
   layout: compact toolbar action
   root_display: inline-block
   width_behavior: content-sized by default
+
+behavior:
+  notes:
+    - Delegates button semantics to UiButton.
+    - Use for dense repeated toolbar actions, not primary form submission.
+
+composition:
+  works_well_with:
+    - UiToolbarLink
+    - UiButton
+  patterns:
+    - title: Compact action strip
+      notes: Use for secondary actions near tables, editors, or filter bars.
+
+ai_notes:
+  do:
+    - Use in toolbar zones where UiButton would be too visually heavy.
+  avoid:
+    - Do not use for the main page CTA; use UiButton.
+
+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-button

package/docs/profiles/UiToolbarLink.yml

@@ -1,6 +1,7 @@
 component: UiToolbarLink
 summary: >
   UiToolbarLink is a compact toolbar-oriented link. It is the link counterpart to UiToolbarButton.
+usage: https://retailcrm.github.io/embed-ui/v1-components/0.9.18/?path=/docs/components-uitoolbarlink--docs
 
 public_import:
   from: '@retailcrm/embed-ui-v1-components/remote'
@@ -30,3 +31,39 @@ geometry:
   layout: compact toolbar link
   root_display: inline-flex
   width_behavior: content-sized by default
+
+behavior:
+  notes:
+    - Delegates link semantics to UiLink.
+    - Use only for real navigation or link-shaped actions in dense toolbar areas.
+
+composition:
+  works_well_with:
+    - UiToolbarButton
+    - UiLink
+  patterns:
+    - title: Toolbar navigation
+      notes: Use for compact links next to toolbar buttons when the action navigates.
+
+ai_notes:
+  do:
+    - Use in toolbar zones when a compact real link is needed.
+  avoid:
+    - Do not use for ordinary inline content links; use UiLink.
+
+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-link

package/docs/profiles/UiTooltip.yml

@@ -2,6 +2,7 @@ component: UiTooltip
 summary: >
   UiTooltip is the tooltip-specialized floating layer built on top of popper mechanics.
   Use it for compact helper content anchored to one target.
+usage: https://retailcrm.github.io/embed-ui/v1-components/0.9.18/?path=/docs/components-uitooltip--docs
 
 public_import:
   from: '@retailcrm/embed-ui-v1-components/remote'
@@ -41,3 +42,40 @@ geometry:
 ai_notes:
   do:
     - Use UiTooltip for tooltip semantics and UiPopper for lower-level floating behavior.
+    - Keep tooltip content short and non-essential.
+  avoid:
+    - Do not put forms, tables, or multi-step interactions in tooltips.
+
+behavior:
+  notes:
+    - visible can control display explicitly.
+    - targetTriggers and popperTriggers define how the tooltip opens and closes.
+    - placement controls the preferred floating position.
+
+composition:
+  works_well_with:
+    - UiPopperConnector
+    - UiPopperTarget
+    - UiButton
+  patterns:
+    - title: Icon helper
+      notes: Pair with an icon-only or compact control when a short explanation is needed.
+    - title: Truncated text hint
+      notes: Use to reveal full text only when the visible cell or label is intentionally truncated.
+
+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-popper

package/docs/profiles/UiTransition.yml

@@ -2,6 +2,7 @@ component: UiTransition
 summary: >
   UiTransition is a transition wrapper for animated mount, unmount, and visibility flows.
   Use it to express motion without switching to raw transition markup.
+usage: https://retailcrm.github.io/embed-ui/v1-components/0.9.18/?path=/docs/components-uialert--docs
 
 public_import:
   from: '@retailcrm/embed-ui-v1-components/remote'
@@ -25,3 +26,39 @@ geometry:
   layout: no standalone layout of its own
   root_display: none
   width_behavior: defined entirely by the transitioned child
+
+api:
+  key_props:
+    - name: name
+    - name: appear
+
+behavior:
+  notes:
+    - Adds transition semantics around the slotted child.
+    - Does not create layout or styling by itself.
+
+composition:
+  works_well_with:
+    - UiAlert
+    - UiCollapse
+    - UiModalWindow
+  patterns:
+    - title: Animated presence
+      notes: Use when content should mount or unmount with the shared transition behavior.
+
+ai_notes:
+  do:
+    - Use around one logical child whose own layout should remain responsible for size.
+  avoid:
+    - Do not use as a layout wrapper or visual container.
+
+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.

package/docs/profiles/UiYandexMap.yml

@@ -2,6 +2,7 @@ component: UiYandexMap
 summary: >
   UiYandexMap is the Yandex map component for map display and related location scenarios.
   Treat it as unstable for now and avoid it unless the screen explicitly requires a map surface.
+usage: https://retailcrm.github.io/embed-ui/v1-components/0.9.18/?path=/docs/experimental-uiyandexmap--docs
 
 public_import:
   from: '@retailcrm/embed-ui-v1-components/remote'
@@ -27,3 +28,55 @@ geometry:
   layout: block-like map container
   root_display: flex
   width_behavior: stretches to container width by default
+
+api:
+  key_props:
+    - name: apiKey
+      notes: Required Yandex Maps API key.
+    - name: address
+      notes: Address string used by the map and update channel.
+    - name: plugins
+      notes: Optional map plugins such as locator integration.
+  emits:
+    - name: update:address
+    - name: change
+
+behavior:
+  notes:
+    - Depends on Yandex map runtime availability.
+    - Should be treated as a specialized surface, not a generic layout block.
+    - The current public API is address-oriented rather than marker-list oriented.
+
+composition:
+  works_well_with:
+    - UiLoader
+    - UiAlert
+  patterns:
+    - title: Location display
+      notes: Use only when map interaction or spatial context is essential.
+    - title: Address-only view
+      notes: Prefer text address output when a map does not add actionable value.
+
+ai_notes:
+  do:
+    - Use only for explicit map requirements.
+    - Provide a non-map fallback or error state when the map runtime can fail.
+  avoid:
+    - Do not add maps as decorative content.
+
+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-yandex-map

package/package.json

@@ -2,7 +2,7 @@
   "name": "@retailcrm/embed-ui-v1-components",
   "bin": "./bin/embed-ui-v1-components.mjs",
   "type": "module",
-  "version": "0.9.18",
+  "version": "0.9.21",
   "license": "MIT",
   "author": "RetailDriverLLC <integration@retailcrm.ru>",
   "repository": "git@github.com:retailcrm/embed-ui.git",
@@ -67,20 +67,20 @@
     "@retailcrm/image-preview": "^1.0.2",
     "date-fns": "^4.1.0",
     "lodash.isequal": "^4.5.0",
-    "vue3-perfect-scrollbar": "^1.6.0"
+    "vue3-perfect-scrollbar": "^2.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^10.1.11",
-    "@storybook/addon-docs": "^10.1.11",
-    "@storybook/addon-links": "^10.1.11",
-    "@storybook/addon-themes": "^10.1.11",
-    "@storybook/builder-vite": "^10.1.11",
-    "@storybook/vue3": "^10.1.11",
-    "@storybook/vue3-vite": "^10.1.11",
+    "@storybook/addon-a11y": "^10.3.5",
+    "@storybook/addon-docs": "^10.3.5",
+    "@storybook/addon-links": "^10.3.5",
+    "@storybook/addon-themes": "^10.3.5",
+    "@storybook/builder-vite": "^10.3.5",
+    "@storybook/vue3": "^10.3.5",
+    "@storybook/vue3-vite": "^10.3.5",
     "@types/lodash.isequal": "^4.5.8",
     "@vitejs/plugin-vue": "^6.0.2",
-    "@vitest/browser": "4.0.15",
-    "@vitest/browser-playwright": "4.0.15",
+    "@vitest/browser": "4.1.3",
+    "@vitest/browser-playwright": "4.1.3",
     "@vue/compiler-sfc": "^3.5.25",
     "@vue/test-utils": "^2.4.6",
     "@yandex/ymaps3-types": "^1.0.19072130",
@@ -90,15 +90,15 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "remark-gfm": "^4.0.0",
-    "storybook": "^10.1.11",
+    "storybook": "^10.3.5",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
     "uuid": "^13.0.0",
-    "vite": "^7.2.7",
+    "vite": "^7.3.2",
     "vite-plugin-dts": "^4.5.4",
     "vite-svg-loader": "^5.1.0",
-    "vitest": "^4.0.15",
-    "vue": "^3.5.25",
+    "vitest": "^4.1.3",
+    "vue": "^3.5.32",
     "vue-i18n": "10.0.8"
   }
 }