@waggylabs/yumekit 0.5.1 → 0.5.3

package/CHANGELOG.md

@@ -31,6 +31,30 @@ Delete any empty sections before publishing.
 <!-- ### Security -->
 <!-- Vulnerability patches or hardening changes -->
 
+## [0.5.3]
+
+### Changed
+
+- `y-button` and `y-tag` rename the `style-type` attribute to `variant`.
+
+### Deprecated
+
+- `y-button`'s and `y-tag`'s `style-type` attribute is deprecated in favor of `variant`; it still works (with `variant` taking precedence) but will be removed in a future major version.
+
+### Fixed
+
+- `y-input`, `y-textarea`, and `y-checkbox` now respond to clicks across their full interactive area. Clicking anywhere in a `y-input`/`y-textarea` (padding and icon slots included) focuses the field, and clicking a `y-checkbox`'s label toggles it, matching the existing hover affordance and `y-radio`'s label behavior.
+
+## [0.5.2] - 2026-06-27
+
+### Added
+
+- `y-tabs` gains an `overflow` attribute: `scroll` (default) keeps tabs on a single line and shows prev/next arrow buttons when the strip overflows its container, while `wrap` lets tabs flow onto multiple rows.
+
+### Changed
+
+- `y-code` now scrolls its content within a height-constrained container — set a CSS `height` or `max-height` and the code area scrolls, where previously vertical scrolling only kicked in with `max-lines`.
+
 ## [0.5.1] - 2026-06-20
 
 ### Added

package/README.md

@@ -21,7 +21,7 @@ YumeKit is a collection of 51 production-ready components built with native Web
 
 - **Zero dependencies** — built entirely on web standards
 - **Framework-agnostic** — works with React, Vue, Svelte, or plain HTML
-- **Themeable** — 22 built-in themes plus support for fully custom themes
+- **Themeable** — 60 built-in themes plus support for fully custom themes
 - **Accessible** — ARIA-compliant, keyboard navigable, form-associated inputs
 - **Tree-shakeable** — import only the components you use
 
@@ -73,68 +73,59 @@ Then use the `<y-theme>` component to apply a theme:
 
 ## Components
 
-| Component     | Element            | Description                                              |
-| ------------- | ------------------ | ------------------------------------------------------- |
-| Animate       | `<y-animate>`      | Scroll/viewport-triggered animation wrapper             |
-| App Bar       | `<y-appbar>`       | Top or side navigation bar                              |
-| Avatar        | `<y-avatar>`       | User avatar with shape and color variants               |
-| Avatar Group  | `<y-avatar-group>` | Overlapping avatar group with overflow count            |
-| Badge         | `<y-badge>`        | Status badge or label                                   |
-| Banner        | `<y-banner>`       | Full-width inline message / alert banner                |
-| Break         | `<y-break>`        | Divider with optional centered label, icon, or slot     |
-| Breadcrumbs   | `<y-breadcrumbs>`  | Navigation breadcrumb trail with collapse support       |
-| Button        | `<y-button>`       | Button with icon, size, and style variants              |
-| Button Group  | `<y-button-group>` | Groups buttons (or inputs) into a connected toolbar     |
-| Card          | `<y-card>`         | Content card container                                  |
-| Checkbox      | `<y-checkbox>`     | Form checkbox input                                     |
-| Code          | `<y-code>`         | Code block with built-in syntax highlighting            |
-| Color         | `<y-color>`        | Color swatch / value display                            |
-| Color Picker  | `<y-colorpicker>`  | Interactive color picker                                |
-| Data Grid     | `<y-data-grid>`    | Data grid with sorting, filtering, editing, pagination  |
-| Date          | `<y-date>`         | Date input                                              |
-| DatePicker    | `<y-datepicker>`   | A date and time picker                                  |
-| Dialog        | `<y-dialog>`       | Modal dialog                                            |
-| Dock          | `<y-dock>`         | Fixed navigation dock                                   |
-| Drawer        | `<y-drawer>`       | Side drawer / sidebar                                   |
-| Droplist      | `<y-droplist>`     | Drag-and-drop reorderable list                          |
-| Gallery       | `<y-gallery>`      | Media gallery with lightbox                             |
-| Grid          | `<y-grid>`         | CSS Grid layout container                               |
-| Help          | `<y-help>`         | Guided product tour / onboarding walkthrough            |
-| Icon          | `<y-icon>`         | SVG icon display                                        |
-| Input         | `<y-input>`        | Text input field                                        |
-| Masonry       | `<y-masonry>`      | JS-positioned masonry layout                            |
-| Menu          | `<y-menu>`         | Dropdown navigation menu                                |
-| Paginator     | `<y-paginator>`    | Pagination controls                                     |
-| Panel Bar     | `<y-panelbar>`     | Accordion panel group                                   |
-| Popover       | `<y-popover>`      | Anchored floating popover                               |
-| Progress      | `<y-progress>`     | Progress bar                                            |
-| Radio         | `<y-radio>`        | Radio button input                                      |
-| Rating        | `<y-rating>`       | Star / icon rating input                                |
-| Select        | `<y-select>`       | Select / dropdown input                                 |
-| Shape         | `<y-shape>`        | Decorative CSS shape container                          |
-| Sidebar       | `<y-sidebar>`      | Collapsible app sidebar navigation                      |
-| Slider        | `<y-slider>`       | Range slider input                                      |
-| Splitter      | `<y-splitter>`     | Two-pane container with a draggable resize handle       |
-| Stack         | `<y-stack>`        | Flexbox layout container (row or column)                |
-| Stepper       | `<y-stepper>`      | Multi-step wizard with sequential flow                  |
-| Switch        | `<y-switch>`       | Toggle switch                                           |
-| Table         | `<y-table>`        | Sortable data table                                     |
-| Tabs          | `<y-tabs>`         | Tabbed interface                                        |
-| Tag           | `<y-tag>`          | Tag / chip label                                        |
-| Textarea      | `<y-textarea>`     | Multi-line text input                                   |
-| Theme         | `<y-theme>`        | Theme provider                                          |
-| Toast         | `<y-toast>`        | Notification toast                                      |
-| Tooltip       | `<y-tooltip>`      | Tooltip / popover                                       |
-| Tree          | `<y-tree>`         | Hierarchical tree view                                  |
-
-### Sub-elements
-
-These are building blocks used inside their parent component, not standalone components (and not included in the count above):
-
-| Element         | Used inside    | Description                       |
-| --------------- | -------------- | -------------------------------- |
-| `<y-panel>`     | `<y-panelbar>` | Individual accordion panel       |
-| `<y-tree-item>` | `<y-tree>`     | Individual node within a tree    |
+| Component    | Element            | Description                                            |
+| ------------ | ------------------ | ------------------------------------------------------ |
+| Animate      | `<y-animate>`      | Scroll/viewport-triggered animation wrapper            |
+| App Bar      | `<y-appbar>`       | Top or side navigation bar                             |
+| Avatar       | `<y-avatar>`       | User avatar with shape and color variants              |
+| Avatar Group | `<y-avatar-group>` | Overlapping avatar group with overflow count           |
+| Badge        | `<y-badge>`        | Status badge or label                                  |
+| Banner       | `<y-banner>`       | Full-width inline message / alert banner               |
+| Break        | `<y-break>`        | Divider with optional centered label, icon, or slot    |
+| Breadcrumbs  | `<y-breadcrumbs>`  | Navigation breadcrumb trail with collapse support      |
+| Button       | `<y-button>`       | Button with icon, size, and style variants             |
+| Button Group | `<y-button-group>` | Groups buttons (or inputs) into a connected toolbar    |
+| Card         | `<y-card>`         | Content card container                                 |
+| Checkbox     | `<y-checkbox>`     | Form checkbox input                                    |
+| Code         | `<y-code>`         | Code block with built-in syntax highlighting           |
+| Color        | `<y-color>`        | Color swatch / value display                           |
+| Color Picker | `<y-colorpicker>`  | Interactive color picker                               |
+| Data Grid    | `<y-data-grid>`    | Data grid with sorting, filtering, editing, pagination |
+| Date         | `<y-date>`         | Date input                                             |
+| DatePicker   | `<y-datepicker>`   | A date and time picker                                 |
+| Dialog       | `<y-dialog>`       | Modal dialog                                           |
+| Dock         | `<y-dock>`         | Fixed navigation dock                                  |
+| Drawer       | `<y-drawer>`       | Side drawer / sidebar                                  |
+| Droplist     | `<y-droplist>`     | Drag-and-drop reorderable list                         |
+| Gallery      | `<y-gallery>`      | Media gallery with lightbox                            |
+| Grid         | `<y-grid>`         | CSS Grid layout container                              |
+| Help         | `<y-help>`         | Guided product tour / onboarding walkthrough           |
+| Icon         | `<y-icon>`         | SVG icon display                                       |
+| Input        | `<y-input>`        | Text input field                                       |
+| Masonry      | `<y-masonry>`      | JS-positioned masonry layout                           |
+| Menu         | `<y-menu>`         | Dropdown navigation menu                               |
+| Paginator    | `<y-paginator>`    | Pagination controls                                    |
+| Panel Bar    | `<y-panelbar>`     | Accordion panel group                                  |
+| Popover      | `<y-popover>`      | Anchored floating popover                              |
+| Progress     | `<y-progress>`     | Progress bar                                           |
+| Radio        | `<y-radio>`        | Radio button input                                     |
+| Rating       | `<y-rating>`       | Star / icon rating input                               |
+| Select       | `<y-select>`       | Select / dropdown input                                |
+| Shape        | `<y-shape>`        | Decorative CSS shape container                         |
+| Sidebar      | `<y-sidebar>`      | Collapsible app sidebar navigation                     |
+| Slider       | `<y-slider>`       | Range slider input                                     |
+| Splitter     | `<y-splitter>`     | Two-pane container with a draggable resize handle      |
+| Stack        | `<y-stack>`        | Flexbox layout container (row or column)               |
+| Stepper      | `<y-stepper>`      | Multi-step wizard with sequential flow                 |
+| Switch       | `<y-switch>`       | Toggle switch                                          |
+| Table        | `<y-table>`        | Sortable data table                                    |
+| Tabs         | `<y-tabs>`         | Tabbed interface                                       |
+| Tag          | `<y-tag>`          | Tag / chip label                                       |
+| Textarea     | `<y-textarea>`     | Multi-line text input                                  |
+| Theme        | `<y-theme>`        | Theme provider                                         |
+| Toast        | `<y-toast>`        | Notification toast                                     |
+| Tooltip      | `<y-tooltip>`      | Tooltip / popover                                      |
+| Tree         | `<y-tree>`         | Hierarchical tree view                                 |
 
 ---
 

package/dist/ai/llm.txt

@@ -3,7 +3,7 @@
 A modern, framework-agnostic Web Components UI kit providing 51 production-ready custom HTML elements. Built entirely on native web standards with zero external runtime dependencies.
 
 ## Version
-0.5.1
+0.5.3
 
 ## License
 MIT
@@ -158,7 +158,8 @@ Tag: `<y-button>`
 Attributes:
 - `color` — predefined scheme (`"base"` | `"primary"` | `"secondary"` | `"success"` | `"warning"` | `"error"` | `"help"`) or any CSS color (`#hex`, `rgb()`, `hsl()`)
 - `size` — `"small"` | `"medium"` (default) | `"large"`
-- `style-type` — `"outlined"` (default) | `"filled"` | `"flat"`
+- `variant` — `"outlined"` (default) | `"filled"` | `"flat"`
+- `style-type` — **deprecated** alias for `variant`; still honored (with `variant` winning if both are set) but will be removed in a future major version
 - `padding-mode` — `"auto"` (default) | `"square"` | `"wide"`. Controls whether the inline padding collapses to the block value: `auto` does so for icon-only buttons; `square` forces it (e.g. paginator number buttons); `wide` never does
 - `left-icon` — icon name (from registry)
 - `right-icon` — icon name (from registry)
@@ -176,7 +177,7 @@ Attributes:
 <y-button href="/docs" target="_blank" rel="noopener">Docs</y-button>
 ```
 
-CSS Custom Properties (per `small|medium|large`): `--component-button-padding-{size}` sets padding on all sides; `--component-button-padding-block-{size}` and `--component-button-padding-inline-{size}` override the vertical / horizontal axes independently and fall back to `--component-button-padding-{size}` when unset (the Material and Shadcn themes use this for wider buttons). Whether the inline axis collapses to the block value is governed by the `padding-mode` attribute above (default `auto` = collapse for icon-only buttons). `--component-control-height-{size}` sets the min-height (shared with `y-input` so fields and buttons stay the same height per theme); falls back to `--sizing-{size}`. For `style-type="outlined"`, the border is sourced from the button's matching semantic border token (`--base-border`, `--primary-border`, `--error-border`, …) per `color`, falling back to the button's text color when that token is unset. `--component-button-border-width` sets the border width and is applied as the `border-width` longhand (not baked into a shorthand), so it accepts a 1–4 value pattern for per-side widths (e.g. `1px 2px` or `0 0 2px 0` for a bottom-only border); defaults to `1px`. Two optional global overrides remain: `--component-button-outline-border` overrides the border style + color as a CSS `border` shorthand (e.g. `1px solid var(--base-border)`) — note its width is superseded by `--component-button-border-width` — and `--component-button-outline-border-color` sets just the border color across resting/hover/focus/active — set either via CSS or a scoped `y-theme` to flatten all outlined borders to one color.
+CSS Custom Properties (per `small|medium|large`): `--component-button-padding-{size}` sets padding on all sides; `--component-button-padding-block-{size}` and `--component-button-padding-inline-{size}` override the vertical / horizontal axes independently and fall back to `--component-button-padding-{size}` when unset (the Material and Shadcn themes use this for wider buttons). Whether the inline axis collapses to the block value is governed by the `padding-mode` attribute above (default `auto` = collapse for icon-only buttons). `--component-control-height-{size}` sets the min-height (shared with `y-input` so fields and buttons stay the same height per theme); falls back to `--sizing-{size}`. For `variant="outlined"`, the border is sourced from the button's matching semantic border token (`--base-border`, `--primary-border`, `--error-border`, …) per `color`, falling back to the button's text color when that token is unset. `--component-button-border-width` sets the border width and is applied as the `border-width` longhand (not baked into a shorthand), so it accepts a 1–4 value pattern for per-side widths (e.g. `1px 2px` or `0 0 2px 0` for a bottom-only border); defaults to `1px`. Two optional global overrides remain: `--component-button-outline-border` overrides the border style + color as a CSS `border` shorthand (e.g. `1px solid var(--base-border)`) — note its width is superseded by `--component-button-border-width` — and `--component-button-outline-border-color` sets just the border color across resting/hover/focus/active — set either via CSS or a scoped `y-theme` to flatten all outlined borders to one color.
 
 ---
 
@@ -779,7 +780,8 @@ Tag: `<y-tag>`
 Attributes:
 - `color` — predefined scheme or CSS color (`#hex`, `rgb()`, `hsl()`). For `filled`, text is auto-contrasted via WCAG luminance. For `flat`, background is a 20% tint via `color-mix()`.
 - `size` — `"small"` | `"medium"` | `"large"`
-- `style-type` — `"filled"` (default) | `"outlined"` | `"flat"`
+- `variant` — `"filled"` (default) | `"outlined"` | `"flat"`
+- `style-type` — **deprecated** alias for `variant`; still honored (with `variant` winning if both are set) but will be removed in a future major version
 - `shape` — `"square"` (default) | `"round"`
 - `removable` — boolean, shows close button
 
@@ -789,8 +791,8 @@ The `flat` style uses `--{color}-background-app` as the background, so it automa
 
 ```html
 <y-tag color="primary" removable>JavaScript</y-tag>
-<y-tag color="success" style-type="outlined" shape="round">Active</y-tag>
-<y-tag color="base" style-type="flat">Draft</y-tag>
+<y-tag color="success" variant="outlined" shape="round">Active</y-tag>
+<y-tag color="base" variant="flat">Draft</y-tag>
 ```
 
 ---
@@ -976,7 +978,7 @@ CSS Custom Properties: `--component-popover-background`, `--component-popover-co
     <strong slot="header">Confirm change</strong>
     <p>Saving will overwrite the existing layout.</p>
     <div slot="footer">
-        <y-button size="small" style-type="outlined">Cancel</y-button>
+        <y-button size="small" variant="outlined">Cancel</y-button>
         <y-button size="small" color="primary">Save</y-button>
     </div>
 </y-popover>
@@ -1470,7 +1472,7 @@ CSS Custom Properties: `--component-dock-height`, `--component-dock-height-{smal
 
 ```html
 <y-dock
-  items='[{"name":"Home","icon":"home","href":"/","selected":true},{"name":"Search","icon":"search","href":"/search"},{"name":"Profile","icon":"settings","href":"/profile"}]'
+  items='[{"name":"Home","icon":"home","href":"/","selected":true},{"name":"Search","icon":"magnifying-glass","href":"/search"},{"name":"Profile","icon":"gear","href":"/profile"}]'
 ></y-dock>
 ```
 
@@ -1481,7 +1483,7 @@ Dropdown menu. Positioned relative to an anchor element. Items can be defined vi
 
 Tag: `<y-menu>`
 Attributes:
-- `items` — JSON string: `[{"text": "Edit", "value": "edit", "href": "...", "icon": "edit", "slot": "name", "selected": true, "children": [...]}, ...]`
+- `items` — JSON string: `[{"text": "Edit", "value": "edit", "href": "...", "icon": "pencil", "slot": "name", "selected": true, "children": [...]}, ...]`
 - `anchor` — element ID (no `#`) of the trigger element; clicking the anchor toggles the menu automatically (no manual listener needed). A disabled anchor (native `disabled`, a reflected `disabled` attribute on a custom element like `y-button`, or `aria-disabled="true"`) will not open the menu.
 - `visible` — boolean
 - `direction` — `"down"` (default) | `"up"` | `"left"` | `"right"`
@@ -1498,7 +1500,7 @@ Item object fields:
 - `text` — display text
 - `value` — value reported in the `select` event (defaults to `text`)
 - `href` — optional navigation URL
-- `icon` — icon name rendered via `<y-icon>` (e.g. `"edit"`, `"trash"`)
+- `icon` — icon name rendered via `<y-icon>` (e.g. `"pencil"`, `"trash"`)
 - `slot` — named slot in light DOM whose content replaces this item's default content
 - `selected` — boolean, highlights the active item
 - `children` — array of sub-items (nested submenu)
@@ -1657,6 +1659,7 @@ Attributes:
 - `position` — `"top"` (default) | `"bottom"` | `"left"` | `"right"`
 - `size` — `"small"` | `"medium"` | `"large"`
 - `variant` — `"default"` (default, bordered boxes) | `"accent"` (minimal tabs; the active tab shows a primary-colored indicator border on its content-facing edge — bottom for `top` tabs, top for `bottom`, etc. — like Material/Carbon)
+- `overflow` — `"scroll"` (default; tabs stay on one line and prev/next arrow buttons appear when the strip overflows its container) | `"wrap"` (tabs flow onto multiple rows, or columns for `left`/`right` positions)
 
 Methods: `activateTab(id)`
 
@@ -1815,7 +1818,7 @@ Keyboard: ArrowUp/Down move between visible items; ArrowRight expands or focuses
 ```html
 <y-tree route-match="prefix" style="width:280px">
   <y-tree-item href="/docs" expanded>
-    <y-icon slot="icon" name="book" size="small"></y-icon>
+    <y-icon slot="icon" name="folder" size="small"></y-icon>
     <span slot="label">Docs</span>
     <y-tree-item slot="children" href="/docs/install">
       <span slot="label">Installation</span>

package/dist/ai/skill/examples/nav-layout.html

@@ -36,7 +36,7 @@
 
       <nav slot="nav">
         <y-button style-type="flat" left-icon="home">Dashboard</y-button>
-        <y-button style-type="flat" left-icon="chart">Reports</y-button>
+        <y-button style-type="flat" left-icon="diagram">Reports</y-button>
       </nav>
 
       <div slot="actions" style="display:flex; align-items:center; gap:0.5rem;">
@@ -50,8 +50,8 @@
         <!-- User menu -->
         <y-menu position="bottom-right">
           <y-avatar slot="trigger" alt="JD" color="secondary" size="small" style="cursor:pointer;"></y-avatar>
-          <y-button style-type="flat" left-icon="settings">Settings</y-button>
-          <y-button style-type="flat" left-icon="close">Sign Out</y-button>
+          <y-button style-type="flat" left-icon="gear">Settings</y-button>
+          <y-button style-type="flat" left-icon="x">Sign Out</y-button>
         </y-menu>
       </div>
     </y-appbar>
@@ -60,8 +60,8 @@
     <y-drawer id="sidebar" position="left" modal>
       <nav class="drawer-nav">
         <y-button style-type="flat" left-icon="home">Dashboard</y-button>
-        <y-button style-type="flat" left-icon="chart">Reports</y-button>
-        <y-button style-type="flat" left-icon="settings">Settings</y-button>
+        <y-button style-type="flat" left-icon="diagram">Reports</y-button>
+        <y-button style-type="flat" left-icon="gear">Settings</y-button>
       </nav>
     </y-drawer>
 

package/dist/ai/skill/examples/themed-app.html

@@ -89,15 +89,15 @@
       <!-- Icons tab -->
       <div slot="icons" style="display:flex; gap:1rem; flex-wrap:wrap; padding-top:1rem; align-items:center;">
         <y-icon name="home" size="large" label="Home"></y-icon>
-        <y-icon name="settings" size="large" label="Settings"></y-icon>
+        <y-icon name="gear" size="large" label="Settings"></y-icon>
         <y-icon name="bell" size="large" color="warning" label="Notifications"></y-icon>
         <y-icon name="check" size="large" color="success" label="Success"></y-icon>
-        <y-icon name="close" size="large" color="error" label="Close"></y-icon>
-        <y-icon name="info" size="large" color="primary" label="Info"></y-icon>
-        <y-icon name="search" size="large" label="Search"></y-icon>
+        <y-icon name="x" size="large" color="error" label="Close"></y-icon>
+        <y-icon name="circle-info" size="large" color="primary" label="Info"></y-icon>
+        <y-icon name="magnifying-glass" size="large" label="Search"></y-icon>
         <y-icon name="trash" size="large" color="error" label="Delete"></y-icon>
-        <y-icon name="edit" size="large" color="secondary" label="Edit"></y-icon>
-        <y-icon name="download" size="large" color="primary" label="Download"></y-icon>
+        <y-icon name="pencil" size="large" color="secondary" label="Edit"></y-icon>
+        <y-icon name="down-to-bracket" size="large" color="primary" label="Download"></y-icon>
       </div>
     </y-tabs>
   </div>

package/dist/ai/skill/patterns.md

@@ -18,7 +18,7 @@ Common multi-component patterns. Adapt these for specific use cases.
   <y-appbar
     orientation="horizontal"
     sticky="start"
-    items='[{"text":"Dashboard","icon":"home","href":"/"},{"text":"Reports","icon":"chart","href":"/reports"},{"text":"Settings","icon":"settings","href":"/settings"}]'
+    items='[{"text":"Dashboard","icon":"home","href":"/"},{"text":"Reports","icon":"diagram","href":"/reports"},{"text":"Settings","icon":"gear","href":"/settings"}]'
   >
     <y-icon slot="logo" name="bolt" size="medium"></y-icon>
     <span slot="title">MyApp</span>
@@ -48,7 +48,7 @@ Common multi-component patterns. Adapt these for specific use cases.
     <y-appbar
       orientation="vertical"
       sticky="start"
-      items='[{"text":"Dashboard","icon":"home","href":"/"},{"text":"Reports","icon":"chart","href":"/reports"},{"text":"Settings","icon":"settings","href":"/settings"}]'
+      items='[{"text":"Dashboard","icon":"home","href":"/"},{"text":"Reports","icon":"diagram","href":"/reports"},{"text":"Settings","icon":"gear","href":"/settings"}]'
     >
       <y-icon slot="logo" name="bolt" size="medium"></y-icon>
       <span slot="title">MyApp</span>
@@ -85,7 +85,7 @@ Common multi-component patterns. Adapt these for specific use cases.
         <y-button type="submit" color="primary">Sign In</y-button>
       </form>
 
-      <y-button slot="footer" style-type="flat">Forgot password?</y-button>
+      <y-button slot="footer" variant="flat">Forgot password?</y-button>
     </y-card>
   </div>
 
@@ -128,7 +128,7 @@ Common multi-component patterns. Adapt these for specific use cases.
   <y-dialog id="delete-dialog" persistent>
     <span slot="header">Confirm Delete</span>
     <p>This action cannot be undone. Are you sure?</p>
-    <y-button slot="footer" id="cancel-btn" style-type="outlined">Cancel</y-button>
+    <y-button slot="footer" id="cancel-btn" variant="outlined">Cancel</y-button>
     <y-button slot="footer" id="confirm-btn" color="error">Delete</y-button>
   </y-dialog>
 
@@ -186,13 +186,13 @@ Common multi-component patterns. Adapt these for specific use cases.
 
       <y-panel label="Danger Zone">
         <div style="padding:1rem 0;">
-          <y-button color="error" style-type="outlined">Delete Account</y-button>
+          <y-button color="error" variant="outlined">Delete Account</y-button>
         </div>
       </y-panel>
     </y-panelbar>
 
     <div style="margin-top:1rem; display:flex; justify-content:flex-end; gap:0.5rem;">
-      <y-button style-type="outlined">Cancel</y-button>
+      <y-button variant="outlined">Cancel</y-button>
       <y-button type="submit" color="primary">Save Changes</y-button>
     </div>
   </form>
@@ -256,7 +256,7 @@ function confirmAction(message) {
     dialog.innerHTML = `
       <span slot="header">Confirm</span>
       <p>${message}</p>
-      <y-button slot="footer" id="cancel" style-type="outlined">Cancel</y-button>
+      <y-button slot="footer" id="cancel" variant="outlined">Cancel</y-button>
       <y-button slot="footer" id="confirm" color="primary">Confirm</y-button>
     `;
     document.body.appendChild(dialog);

package/dist/ai/skill/reference.md

@@ -139,7 +139,8 @@ When `href` is set, the internal element renders as `<a>` instead of `<button>`
 | ------------ | -------------------------------------------------------------------------------------- |
 | `color`      | `base` \| `primary` \| `secondary` \| `success` \| `warning` \| `error` \| `help`      |
 | `size`       | `small` \| `medium` \| `large`                                                         |
-| `style-type` | `outlined` (default) \| `filled` \| `flat`                                             |
+| `variant`    | `outlined` (default) \| `filled` \| `flat`                                             |
+| `style-type` | **deprecated** alias for `variant` (still honored; `variant` wins if both set) — removed in a future major version |
 | `padding-mode` | `auto` (default) \| `square` \| `wide` — `square` forces equal block/inline padding (e.g. paginator numbers), `wide` keeps inline padding even when icon-only, `auto` squares icon-only buttons |
 | `disabled`   | boolean                                                                                |
 | `type`       | `button` (default) \| `submit` \| `reset` — ignored when `href` is set                 |
@@ -158,7 +159,7 @@ Slots: default (label), `left-icon`, `right-icon`
 </y-button>
 
 <!-- Link button — renders <a href="/docs"> internally -->
-<y-button href="/docs" color="primary" style-type="outlined"
+<y-button href="/docs" color="primary" variant="outlined"
     >Documentation</y-button
 >
 
@@ -167,7 +168,7 @@ Slots: default (label), `left-icon`, `right-icon`
     href="https://example.com"
     target="_blank"
     rel="noopener noreferrer"
-    style-type="flat"
+    variant="flat"
 >
     External
     <y-icon slot="right-icon" name="arrow-right" size="small"></y-icon>
@@ -177,7 +178,7 @@ Slots: default (label), `left-icon`, `right-icon`
 <y-button href="/restricted" disabled>Unavailable</y-button>
 ```
 
-CSS Custom Properties (per `small|medium|large`): `--component-button-padding-{size}` (all sides), and `--component-button-padding-block-{size}` / `--component-button-padding-inline-{size}` to override the vertical / horizontal axes independently (fall back to `--component-button-padding-{size}`). The `padding-mode` attribute governs whether the inline axis collapses to the block value (default `auto` = collapse for icon-only buttons). `--component-control-height-{size}` sets min-height (shared with `y-input`; falls back to `--sizing-{size}`). For `style-type="outlined"`: the border is sourced from the button's matching semantic border token (`--base-border`, `--error-border`, …) per `color`, falling back to the text color when that token is unset. `--component-button-border-width` (applied as the `border-width` longhand, default `1px`) accepts a 1–4 value pattern for per-side widths (e.g. `0 0 2px 0`). Optional global overrides: `--component-button-outline-border` (border style + color as a CSS `border` shorthand; its width is superseded by `--component-button-border-width`) and `--component-button-outline-border-color` (border color across all states) — set via CSS or a scoped `y-theme`.
+CSS Custom Properties (per `small|medium|large`): `--component-button-padding-{size}` (all sides), and `--component-button-padding-block-{size}` / `--component-button-padding-inline-{size}` to override the vertical / horizontal axes independently (fall back to `--component-button-padding-{size}`). The `padding-mode` attribute governs whether the inline axis collapses to the block value (default `auto` = collapse for icon-only buttons). `--component-control-height-{size}` sets min-height (shared with `y-input`; falls back to `--sizing-{size}`). For `variant="outlined"`: the border is sourced from the button's matching semantic border token (`--base-border`, `--error-border`, …) per `color`, falling back to the text color when that token is unset. `--component-button-border-width` (applied as the `border-width` longhand, default `1px`) accepts a 1–4 value pattern for per-side widths (e.g. `0 0 2px 0`). Optional global overrides: `--component-button-outline-border` (border style + color as a CSS `border` shorthand; its width is superseded by `--component-button-border-width`) and `--component-button-outline-border-color` (border color across all states) — set via CSS or a scoped `y-theme`.
 
 ---
 
@@ -208,8 +209,8 @@ Slot: default (accepts any child elements — typically `y-button`, `y-input`, o
 <!-- Mixed: input + button (search bar) -->
 <y-button-group>
     <y-input placeholder="Search…"></y-input>
-    <y-button style-type="filled" color="primary">
-        <y-icon slot="left-icon" name="search" size="small"></y-icon>
+    <y-button variant="filled" color="primary">
+        <y-icon slot="left-icon" name="magnifying-glass" size="small"></y-icon>
     </y-button>
 </y-button-group>
 ```
@@ -683,7 +684,8 @@ Slots: default (the element the badge overlays)
 | ------------ | ------------------------------------------ |
 | `color`      | color scheme name                          |
 | `size`       | `small` \| `medium` \| `large`             |
-| `style-type` | `filled` (default) \| `outlined` \| `flat` |
+| `variant`    | `filled` (default) \| `outlined` \| `flat` |
+| `style-type` | **deprecated** alias for `variant` (still honored; `variant` wins if both set) — removed in a future major version |
 | `shape`      | `square` (default) \| `round`              |
 | `removable`  | boolean — shows close button               |
 
@@ -693,8 +695,8 @@ Slot: default (label text)
 
 ```html
 <y-tag color="primary" removable>JavaScript</y-tag>
-<y-tag color="success" style-type="outlined" shape="round">Active</y-tag>
-<y-tag color="base" style-type="flat">Draft</y-tag>
+<y-tag color="success" variant="outlined" shape="round">Active</y-tag>
+<y-tag color="base" variant="flat">Draft</y-tag>
 ```
 
 ---
@@ -769,7 +771,7 @@ Slot: default (trigger element)
 
 ```html
 <y-tooltip text="Remove this item" position="top">
-    <y-button color="error" style-type="flat"
+    <y-button color="error" variant="flat"
         ><y-icon name="trash"></y-icon
     ></y-button>
 </y-tooltip>
@@ -973,8 +975,8 @@ Slots: `header`, `body`, `footer` — **named slots only**; content without a `s
 <y-drawer id="nav-drawer" position="left" anchor="open-nav-btn">
     <strong slot="header">Navigation</strong>
     <nav slot="body">
-        <y-button style-type="flat">Dashboard</y-button>
-        <y-button style-type="flat">Settings</y-button>
+        <y-button variant="flat">Dashboard</y-button>
+        <y-button variant="flat">Settings</y-button>
     </nav>
 </y-drawer>
 
@@ -1163,7 +1165,7 @@ Slots: `header`, `body`, `footer` — **named slots only**; content without a `s
 <y-dialog id="confirm-dialog">
     <span slot="header">Confirm Delete</span>
     <p slot="body">This action cannot be undone.</p>
-    <y-button slot="footer" style-type="outlined">Cancel</y-button>
+    <y-button slot="footer" variant="outlined">Cancel</y-button>
     <y-button slot="footer" color="error">Delete</y-button>
 </y-dialog>
 
@@ -1209,17 +1211,17 @@ Fixed navigation bar (dock) for primary app navigation. Displays icon+label item
 ```html
 <!-- Basic bottom dock -->
 <y-dock
-    items='[{"name":"Home","icon":"home","href":"/","selected":true},{"name":"Search","icon":"search","href":"/search"},{"name":"Profile","icon":"settings","href":"/profile"}]'
+    items='[{"name":"Home","icon":"home","href":"/","selected":true},{"name":"Search","icon":"magnifying-glass","href":"/search"},{"name":"Profile","icon":"gear","href":"/profile"}]'
 ></y-dock>
 
 <!-- Per-item custom slot template -->
 <y-dock
-    items='[{"name":"Home","icon":"home","href":"/"},{"name":"Create","icon":"plus","slot":"create-action"},{"name":"Profile","icon":"settings","href":"/profile"}]'
+    items='[{"name":"Home","icon":"home","href":"/"},{"name":"Create","icon":"plus","slot":"create-action"},{"name":"Profile","icon":"gear","href":"/profile"}]'
 >
     <y-button
         slot="create-action"
         color="primary"
-        style-type="filled"
+        variant="filled"
         size="small"
         left-icon="plus"
         >Create</y-button
@@ -1363,6 +1365,7 @@ Methods: `.show(opts)` — **single options object**: `{ message, color, duratio
 | `position` | `top` (default) \| `bottom` \| `left` \| `right` |
 | `size`     | `small` \| `medium` \| `large`                   |
 | `variant`  | `default` (bordered boxes) \| `accent` (minimal tabs; active tab shows a primary indicator border on its content-facing edge, like Material/Carbon) |
+| `overflow` | `scroll` (default; one line + prev/next arrows when the strip overflows) \| `wrap` (tabs flow onto multiple rows/columns) |
 
 Options object shape: `{"id":"tab1","label":"Tab 1","slot":"tab1","disabled":false,"leftIcon":"home","rightIcon":"arrow-right"}` — `id`, `label`, and `slot` are required; `disabled`, `leftIcon`, `rightIcon` are optional.
 
@@ -1727,7 +1730,7 @@ CSS Parts: `tree`
 ```html
 <y-tree route-match="prefix" style="width:280px">
     <y-tree-item href="/docs" expanded>
-        <y-icon slot="icon" name="book" size="small"></y-icon>
+        <y-icon slot="icon" name="folder" size="small"></y-icon>
         <span slot="label">Docs</span>
         <y-tree-item slot="children" href="/docs/install">
             <span slot="label">Installation</span>
@@ -1850,7 +1853,7 @@ Accessibility: non-modal uses `role="tooltip"`; modal uses `role="dialog"` + `ar
     <strong slot="header">Confirm change</strong>
     <p>Saving will overwrite the existing layout.</p>
     <div slot="footer">
-        <y-button size="small" style-type="outlined">Cancel</y-button>
+        <y-button size="small" variant="outlined">Cancel</y-button>
         <y-button size="small" color="primary">Save</y-button>
     </div>
 </y-popover>