depthark · Oct 12, 2026 · Oct 8, 2026 · Oct 8, 2026 · Oct 8, 2026 · Oct 8, 2026
diff --git a/libs/ui/agent-plugin/skills/accordion-usage/SKILL.md b/libs/ui/agent-plugin/skills/accordion-usage/SKILL.md
@@ -5,7 +5,7 @@ description: >
   collapsible sections using the Zag.js-backed compound anatomy, supported
   variant, shadow, size, value, multiple, and collapsible props.
 metadata:
-  component_version: "1.0.2"
+  component_version: "1.0.3"
   type: "core"
   library: "@techsio/ui-kit"
   library_version: "0.3.2"
@@ -90,6 +90,10 @@ collapsible, multiple, disabled, dir, onChange
 Use `Accordion.Item`, `Accordion.Header`, `Accordion.Content`, and optional
 `Accordion.Indicator`, `Accordion.Title`, `Accordion.Subtitle`.
 
+`Accordion.Header` is a `role="heading"` (level 3 by default). Set
+`aria-level` so it fits the page outline, e.g. `<Accordion.Header aria-level={2}>`
+directly under a page `h1`. Do not wrap it in another heading or `<header>`.
+
 ### Choose behavior from content model
 
 ```text

diff --git a/libs/ui/agent-plugin/skills/action-icon-usage/SKILL.md b/libs/ui/agent-plugin/skills/action-icon-usage/SKILL.md
@@ -8,7 +8,7 @@ metadata:
   type: "core"
   library: "@techsio/ui-kit"
   component: "ActionIcon"
-  component_version: "1.0.0"
+  component_version: "1.1.0"
   requires: "ux-guidelines"
 ---
 
@@ -61,6 +61,11 @@ where actions and feedback live). This section applies them to `ActionIcon`.
 An icon-only control has no visible text, so it **must** carry an accessible name — pass
 `aria-label` (or an equivalent labelling mechanism). Never ship an ActionIcon without one.
 
+Since v1.1.0 the type enforces it: `ActionIconProps` requires `aria-label` or
+`aria-labelledby`, so `<ActionIcon icon="…" />` without a name no longer compiles.
+When spreading Zag trigger props (typed with an optional `aria-label`), pass the
+name explicitly: `aria-label={triggerProps["aria-label"] ?? "Next slide"}`.
+
 ## Styling
 
 Use the component's own token classes; do not reach for semantic tokens or arbitrary Tailwind

diff --git a/libs/ui/agent-plugin/skills/button-usage/SKILL.md b/libs/ui/agent-plugin/skills/button-usage/SKILL.md
@@ -9,7 +9,7 @@ metadata:
   library: "@techsio/ui-kit"
   library_version: "0.3.2"
   component: "Button"
-  component_version: "0.3.3"
+  component_version: "0.3.4"
   requires: "component-usage-ux app-token-overrides ux-guidelines"
   sources: "libs/ui/src/atoms/button.tsx libs/ui/src/tokens/components/atoms/_button.css libs/ui/stories/atoms/button.stories.tsx libs/ui/src/atoms/button.figma.ts"
 ---

diff --git a/libs/ui/agent-plugin/skills/carousel-usage/SKILL.md b/libs/ui/agent-plugin/skills/carousel-usage/SKILL.md
@@ -5,7 +5,7 @@ description: >
   Zag.js-backed slides, images, controls, indicators, autoplay, sizing, aspect
   ratio, object fit, and framework image adapters.
 metadata:
-  component_version: "1.0.1"
+  component_version: "1.2.3"
   type: "core"
   library: "@techsio/ui-kit"
   library_version: "0.3.2"
@@ -53,6 +53,11 @@ where actions and feedback live). This section applies them to `Carousel`.
 **Copy and states**
 
 - Controls labelled `Previous slide` / `Next slide`; indicators `Go to slide 2 of 5`.
+- Prev / next / autoplay are `ActionIcon`s sized from the carousel `size` (`sm` → 24 px, `md` → 32 px, `lg` / `full` → 40 px). Don't restyle them with `Button` classes.
+- `autoplay` does not start when the user prefers reduced motion; always render `Carousel.Autoplay` with it so they can start rotation themselves.
+- Give every carousel an `aria-label` ("Product photos") — several unnamed carousels on one page are indistinguishable regions.
+- Off-screen slides are `inert`; never rely on focusing content inside a hidden slide.
+- `Carousel.Indicator` is a 24 px target with an 8 px dot inside (`--size-carousel-indicator`, `--size-carousel-indicator-dot`). Passing `children` replaces the dot (e.g. numbered indicators); keep the button at least 24 px.
 
 ## Setup
 

diff --git a/libs/ui/agent-plugin/skills/cascade-select-usage/SKILL.md b/libs/ui/agent-plugin/skills/cascade-select-usage/SKILL.md
@@ -6,7 +6,7 @@ description: >
   compound parts, parent or multiple selection, validation, and keyboard
   navigation.
 metadata:
-  component_version: "1.0.2"
+  component_version: "1.0.3"
   type: "core"
   library: "@techsio/ui-kit"
   library_version: "0.3.2"

diff --git a/libs/ui/agent-plugin/skills/chart-usage/SKILL.md b/libs/ui/agent-plugin/skills/chart-usage/SKILL.md
@@ -8,7 +8,7 @@ description: >
   data/x/y/series channels, with token-driven series colors, legend, tooltip,
   value formatting and selection callbacks.
 metadata:
-  component_version: "1.0.1"
+  component_version: "1.1.0"
   type: "core"
   library: "@techsio/ui-kit"
   library_version: "0.3.2"
@@ -123,7 +123,7 @@ Never combine two value scales in one chart — render two charts instead.
 - `xLabel`, `yLabel`, `formatValue` — axis labels and value tick formatting.
 - `height` or `aspectRatio` (default 16/9) — fixed or proportional sizing;
   `initialWidth` is the SSR/first-frame fallback.
-- `animate` (default true), `tooltip` (default true).
+- `animate` (default true, or false when the user prefers reduced motion), `tooltip` (default true).
 - `ariaLabel` (required), `ariaDescription` — accessibility naming.
 - `onSelect(datum | null)` — click/keyboard selection of a mark.
 

diff --git a/libs/ui/agent-plugin/skills/combobox-usage/SKILL.md b/libs/ui/agent-plugin/skills/combobox-usage/SKILL.md
@@ -5,7 +5,7 @@ description: >
   searchable selection with Zag.js collection behavior, controlled value/input,
   multiple mode, validation status, clear trigger, and token styling.
 metadata:
-  component_version: "1.3.2"
+  component_version: "1.3.4"
   type: "core"
   library: "@techsio/ui-kit"
   library_version: "0.3.2"

diff --git a/libs/ui/agent-plugin/skills/data-table-usage/SKILL.md b/libs/ui/agent-plugin/skills/data-table-usage/SKILL.md
@@ -8,7 +8,7 @@ description: >
   row reorder, tree/expanding rows, inline edit, colSpan/rowSpan, virtualization /
   infinite scroll and pagination — every feature behind a flag with a callback.
 metadata:
-  component_version: "1.2.2"
+  component_version: "1.2.4"
   type: "core"
   library: "@techsio/ui-kit"
   library_version: "0.3.2"

diff --git a/libs/ui/agent-plugin/skills/file-upload-usage/SKILL.md b/libs/ui/agent-plugin/skills/file-upload-usage/SKILL.md
@@ -5,7 +5,7 @@ description: >
   select, validate, preview, and manage local File objects through the Zag.js
   compound API, including accepted/rejected files and native form behavior.
 metadata:
-  component_version: "1.0.1"
+  component_version: "1.0.2"
   type: "core"
   library: "@techsio/ui-kit"
   library_version: "0.3.2"

diff --git a/libs/ui/agent-plugin/skills/footer-usage/SKILL.md b/libs/ui/agent-plugin/skills/footer-usage/SKILL.md
@@ -6,7 +6,7 @@ description: >
   divider, bottom area, size, layout, direction, section flow, and framework
   link adapters.
 metadata:
-  component_version: "1.0.1"
+  component_version: "1.0.3"
   type: "core"
   library: "@techsio/ui-kit"
   library_version: "0.3.2"
@@ -89,6 +89,8 @@ It wraps the UI-kit Link atom and supports framework adapters.
 ### Use sections for groups
 
 Group footer columns with `Footer.Section`, `Footer.Title`, and `Footer.List`.
+`Footer.List` is a `<ul>` and wraps each child that is not already an `<li>` in one,
+so put `Footer.Link`s straight inside it. Icon-only links (social icons) need `aria-label`.
 
 ### Let footer tokens define density
 

diff --git a/libs/ui/agent-plugin/skills/form-input-usage/SKILL.md b/libs/ui/agent-plugin/skills/form-input-usage/SKILL.md
@@ -5,7 +5,7 @@ description: >
   labeled single-line fields with Label, Input, StatusText, validation status,
   help text, required, disabled, and size props.
 metadata:
-  component_version: "1.1.0"
+  component_version: "1.1.1"
   type: "core"
   library: "@techsio/ui-kit"
   library_version: "0.3.2"

diff --git a/libs/ui/agent-plugin/skills/form-numeric-input-usage/SKILL.md b/libs/ui/agent-plugin/skills/form-numeric-input-usage/SKILL.md
@@ -5,7 +5,7 @@ description: >
   FormNumericInput for labeled numeric fields using NumericInput compound
   children, validation status, help text, and number-specific constraints.
 metadata:
-  component_version: "1.1.1"
+  component_version: "1.1.2"
   type: "core"
   library: "@techsio/ui-kit"
   library_version: "0.3.2"

diff --git a/libs/ui/agent-plugin/skills/form-textarea-usage/SKILL.md b/libs/ui/agent-plugin/skills/form-textarea-usage/SKILL.md
@@ -5,7 +5,7 @@ description: >
   for labeled multi-line text fields with Textarea, Label, StatusText,
   validation status, help text, size, resize, required, and disabled props.
 metadata:
-  component_version: "1.1.0"
+  component_version: "1.1.1"
   type: "core"
   library: "@techsio/ui-kit"
   library_version: "0.3.2"

diff --git a/libs/ui/agent-plugin/skills/icon-usage/SKILL.md b/libs/ui/agent-plugin/skills/icon-usage/SKILL.md
@@ -4,7 +4,7 @@ description: >
   Use after component-usage-ux when an app needs @techsio/ui-kit Icon tokens or
   Iconify classes with the library's supported size and semantic color props.
 metadata:
-  component_version: "1.0.0"
+  component_version: "1.1.0"
   type: "core"
   library: "@techsio/ui-kit"
   library_version: "0.3.2"
@@ -15,7 +15,9 @@ metadata:
 # @techsio/ui-kit Icon Usage
 
 Use Icon for decorative or component-adjacent icons. The Icon atom renders
-`aria-hidden`, so it must not be the only accessible content for an action.
+`aria-hidden` by default, so it must not be the only accessible content for an action.
+A meaningful standalone icon (a status glyph with no text beside it) takes `label`
+and renders as `role="img"`.
 
 ## UX/UI guidelines
 
@@ -97,6 +99,15 @@ separate Icon next to text.
 Icon itself is decorative. The parent action or surrounding text carries the
 accessible name.
 
+### Label a meaningful standalone icon
+
+```tsx
+<Icon icon="icon-[mdi--check-circle]" label="In stock" />
+```
+
+Use `label` only when the icon is not inside a control and no text next to it
+says the same thing. Never put `label` on an icon inside a labelled button.
+
 ## Common Mistakes
 
 ### HIGH Inline SVG instead of token/icon class

diff --git a/libs/ui/agent-plugin/skills/numeric-input-usage/SKILL.md b/libs/ui/agent-plugin/skills/numeric-input-usage/SKILL.md
@@ -6,7 +6,7 @@ description: >
   numeric compatibility or controlled string drafts, locale formatting, min/max/step, and token-first
   styling.
 metadata:
-  component_version: "1.1.2"
+  component_version: "1.1.3"
   type: "core"
   library: "@techsio/ui-kit"
   library_version: "0.3.2"
@@ -87,6 +87,10 @@ Pass native input attributes such as `autoFocus`, `aria-label` and
 `aria-labelledby` to `NumericInput.Input`. Automatic focus is synchronized with
 Zag so typing and arrow keys work immediately after mount.
 
+`NumericInputTemplate` forwards its own `aria-label` / `aria-labelledby` to the
+input (not the root), so an unlabelled template still has a name:
+`<NumericInputTemplate aria-label="Quantity" />`.
+
 ## Core Patterns
 
 ### Keep the compound anatomy intact

diff --git a/libs/ui/agent-plugin/skills/pagination-usage/SKILL.md b/libs/ui/agent-plugin/skills/pagination-usage/SKILL.md
@@ -5,7 +5,7 @@ description: >
   link-based paginated navigation with Zag.js pagination, getPageUrl,
   LinkButton, NextLink adapters, compact mode, variants, and sizes.
 metadata:
-  component_version: "1.0.1"
+  component_version: "1.0.3"
   type: "core"
   library: "@techsio/ui-kit"
   library_version: "0.3.2"

diff --git a/libs/ui/agent-plugin/skills/phone-input-usage/SKILL.md b/libs/ui/agent-plugin/skills/phone-input-usage/SKILL.md
@@ -6,7 +6,7 @@ description: >
   hidden E.164 form value, native validation, validation status, and compound
   country picker slots.
 metadata:
-  component_version: "1.0.2"
+  component_version: "1.0.4"
   type: "core"
   library: "@techsio/ui-kit"
   library_version: "0.3.2"

diff --git a/libs/ui/agent-plugin/skills/product-card-usage/SKILL.md b/libs/ui/agent-plugin/skills/product-card-usage/SKILL.md
@@ -5,7 +5,7 @@ description: >
   for product summaries with image adapter, name, price, stock, badges,
   rating, actions, and card button variants.
 metadata:
-  component_version: "1.0.1"
+  component_version: "1.1.0"
   type: "core"
   library: "@techsio/ui-kit"
   library_version: "0.3.2"
@@ -72,6 +72,10 @@ Button buttonVariant: cart | detail | wishlist | custom
 Badges, Rating, Actions, Name, Price
 ```
 
+`ProductCard.Name` is an `h3` by default; set `as` (or `nameAs` on
+`ProductCardTemplate`) so it follows the page outline, e.g. `as="h2"` for cards
+directly under the page `h1`.
+
 ## Core Patterns
 
 ### Use slots for meaning

diff --git a/libs/ui/agent-plugin/skills/radio-group-usage/SKILL.md b/libs/ui/agent-plugin/skills/radio-group-usage/SKILL.md
@@ -6,7 +6,7 @@ description: >
   hidden inputs, controls, text, descriptions, validation status, variants, and
   sizes.
 metadata:
-  component_version: "1.0.1"
+  component_version: "1.0.2"
   type: "core"
   library: "@techsio/ui-kit"
   library_version: "0.3.2"

diff --git a/libs/ui/agent-plugin/skills/rating-usage/SKILL.md b/libs/ui/agent-plugin/skills/rating-usage/SKILL.md
@@ -5,7 +5,7 @@ description: >
   accessible rating capture or display using the Zag.js rating-group wrapper,
   supported value/count/allowHalf/readOnly/disabled props, and token styling.
 metadata:
-  component_version: "1.0.0"
+  component_version: "1.1.1"
   type: "core"
   library: "@techsio/ui-kit"
   library_version: "0.3.2"
@@ -93,6 +93,10 @@ Zag exposes hover/value changes; the wrapper converts them to numbers.
 
 Use `disabled` when the control is unavailable, not for normal display.
 
+A `readOnly` rating renders as one `role="img"` named "<labelText>: 4.5 out of 5":
+no radios and no tab stop, so read-only stars are never focusable or a target.
+The hidden input stays, so a `name`d read-only rating still submits with its form.
+
 ### Use token-backed size and state styling
 
 ```tsx

diff --git a/libs/ui/agent-plugin/skills/search-form-usage/SKILL.md b/libs/ui/agent-plugin/skills/search-form-usage/SKILL.md
@@ -6,7 +6,7 @@ description: >
   input, submit button, clear button, icon props, and token-backed field
   layout.
 metadata:
-  component_version: "1.0.1"
+  component_version: "1.0.2"
   type: "core"
   library: "@techsio/ui-kit"
   library_version: "0.3.2"

diff --git a/libs/ui/agent-plugin/skills/select-usage/SKILL.md b/libs/ui/agent-plugin/skills/select-usage/SKILL.md
@@ -6,7 +6,7 @@ description: >
   trigger, value text, clear trigger, item groups, item indicators, validation
   status, size, and multiple mode.
 metadata:
-  component_version: "1.1.2"
+  component_version: "1.1.4"
   type: "core"
   library: "@techsio/ui-kit"
   library_version: "0.3.2"

diff --git a/libs/ui/agent-plugin/skills/skeleton-usage/SKILL.md b/libs/ui/agent-plugin/skills/skeleton-usage/SKILL.md
@@ -5,7 +5,7 @@ description: >
   loading placeholders using Root, Circle, Text, and Rectangle compound parts
   with token-backed variants, sizes, and animation speeds.
 metadata:
-  component_version: "1.0.2"
+  component_version: "1.0.3"
   type: "core"
   library: "@techsio/ui-kit"
   library_version: "0.3.2"

diff --git a/libs/ui/agent-plugin/skills/slider-usage/SKILL.md b/libs/ui/agent-plugin/skills/slider-usage/SKILL.md
@@ -6,7 +6,7 @@ description: >
   markers, value text, orientation, min/max/step, validation status, and token
   styling.
 metadata:
-  component_version: "1.0.1"
+  component_version: "1.1.0"
   type: "core"
   library: "@techsio/ui-kit"
   library_version: "0.3.2"
@@ -76,6 +76,10 @@ validateStatus, helpText, onChange, onChangeEnd
 size: sm | md | lg
 ```
 
+A slider without a visible `label` (a price filter under an accordion title)
+names its thumbs with `aria-label`, one entry per thumb:
+`<Slider aria-label={["Minimum price", "Maximum price"]} />`.
+
 ## Core Patterns
 
 ### Use array values

diff --git a/libs/ui/agent-plugin/skills/status-text-usage/SKILL.md b/libs/ui/agent-plugin/skills/status-text-usage/SKILL.md
@@ -5,7 +5,7 @@ description: >
   for inline validation, success, warning, or default status messages with
   optional token icons and size/alignment props.
 metadata:
-  component_version: "1.0.0"
+  component_version: "1.0.1"
   type: "core"
   library: "@techsio/ui-kit"
   library_version: "0.3.2"

diff --git a/libs/ui/agent-plugin/skills/steps-usage/SKILL.md b/libs/ui/agent-plugin/skills/steps-usage/SKILL.md
@@ -6,7 +6,7 @@ description: >
   panels, progress, navigation triggers, linear flow, controlled step, and
   variants.
 metadata:
-  component_version: "1.0.2"
+  component_version: "1.0.5"
   type: "core"
   library: "@techsio/ui-kit"
   library_version: "0.3.2"

diff --git a/libs/ui/agent-plugin/skills/switch-usage/SKILL.md b/libs/ui/agent-plugin/skills/switch-usage/SKILL.md
@@ -6,7 +6,7 @@ description: >
   checked/defaultChecked, validation status, help text, required, disabled, and
   read-only state.
 metadata:
-  component_version: "1.0.0"
+  component_version: "1.0.1"
   type: "core"
   library: "@techsio/ui-kit"
   library_version: "0.3.2"

diff --git a/libs/ui/agent-plugin/skills/tabs-usage/SKILL.md b/libs/ui/agent-plugin/skills/tabs-usage/SKILL.md
@@ -6,7 +6,7 @@ description: >
   triggers, content, indicator, orientation, activation mode, variants, fitted,
   and justify props.
 metadata:
-  component_version: "1.0.1"
+  component_version: "1.0.3"
   type: "core"
   library: "@techsio/ui-kit"
   library_version: "0.3.2"

diff --git a/libs/ui/agent-plugin/skills/textarea-usage/SKILL.md b/libs/ui/agent-plugin/skills/textarea-usage/SKILL.md
@@ -5,7 +5,7 @@ description: >
   multi-line text entry with valid variant, size, resize, readonly styling, and
   token-first validation.
 metadata:
-  component_version: "1.0.1"
+  component_version: "1.0.2"
   type: "core"
   library: "@techsio/ui-kit"
   library_version: "0.3.2"

diff --git a/libs/ui/agent-plugin/skills/tour-usage/SKILL.md b/libs/ui/agent-plugin/skills/tour-usage/SKILL.md
@@ -5,7 +5,7 @@ description: >
   tooltip/dialog/floating steps, target resolution, interactive wait effects,
   imperative control, shared action buttons, cleanup and app-owned onboarding policy.
 metadata:
-  component_version: "1.0.4"
+  component_version: "1.0.5"
   type: "core"
   library: "@techsio/ui-kit"
   library_version: "0.3.2"