diff --git a/libs/ui/agent-plugin/skills/accordion-usage/SKILL.md b/libs/ui/agent-plugin/skills/accordion-usage/SKILL.md index 852ead9d87..59bd7cd33e 100644 --- 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. `` +directly under a page `h1`. Do not wrap it in another heading or `
`. + ### 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 index 8533b60d27..178e1f2b3a 100644 --- 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 `` 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 index 07ca78530b..fa1317bc57 100644 --- 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 index bad085038a..2a237a8f72 100644 --- 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 index 2563f62878..3ab48895c4 100644 --- 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 index 1e0bf1de0c..0dd770f9d8 100644 --- 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 index f80c61d2d7..a3ba61ff84 100644 --- 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 index d6e75f2466..c3aaca1634 100644 --- 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 index 21662da09e..bf644a19f6 100644 --- 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 index dc678a1dea..d78230f900 100644 --- 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 `