@waggylabs/yumekit 0.5.2 → 0.5.3

package/CHANGELOG.md

@@ -31,6 +31,20 @@ 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

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
 

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.2
+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)
@@ -1816,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
@@ -1728,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>
@@ -1851,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>

package/dist/components/y-appbar.js

@@ -7,6 +7,7 @@ class YumeButton extends HTMLElement {
             "right-icon",
             "color",
             "size",
+            "variant",
             "style-type",
             "type",
             "padding-mode",
@@ -59,9 +60,13 @@ class YumeButton extends HTMLElement {
             }
         }
 
+        if (name === "style-type" && newValue !== null) {
+            this._warnStyleTypeDeprecated();
+        }
+
         this._init();
 
-        if (["color", "size", "style-type", "disabled"].includes(name)) {
+        if (["color", "size", "variant", "style-type", "disabled"].includes(name)) {
             this._updateStyles();
         }
     }
@@ -143,9 +148,12 @@ class YumeButton extends HTMLElement {
         this.setAttribute("size", val);
     }
 
-    /** Visual style: "filled" | "outlined" | "flat" (default "outlined"). */
+    /**
+     * Deprecated alias for `variant`. Use `variant` instead; retained for
+     * backward compatibility and removed in a future major version.
+     */
     get styleType() {
-        return this.getAttribute("style-type") || "outlined";
+        return this.variant;
     }
     set styleType(val) {
         this.setAttribute("style-type", val);
@@ -188,6 +196,18 @@ class YumeButton extends HTMLElement {
         this.setAttribute("value", newVal);
     }
 
+    /** Visual style: "filled" | "outlined" | "flat" (default "outlined"). */
+    get variant() {
+        return (
+            this.getAttribute("variant") ||
+            this.getAttribute("style-type") ||
+            "outlined"
+        );
+    }
+    set variant(val) {
+        this.setAttribute("variant", val);
+    }
+
     // -------------------------------------------------------------------------
     // Public
     // -------------------------------------------------------------------------
@@ -242,7 +262,7 @@ class YumeButton extends HTMLElement {
         });
     }
 
-    _applyCustomColorStyles(color, styleType, size) {
+    _applyCustomColorStyles(color, variant, size) {
         const text = contrastTextColor(color);
         const hover = `color-mix(in srgb, ${color} 85%, black)`;
         const active = `color-mix(in srgb, ${color} 70%, black)`;
@@ -298,7 +318,7 @@ class YumeButton extends HTMLElement {
             },
         };
 
-        Object.entries(styles[styleType] || styles.outlined).forEach(
+        Object.entries(styles[variant] || styles.outlined).forEach(
             ([key, val]) => this.button.style.setProperty(key, val),
         );
 
@@ -344,11 +364,11 @@ class YumeButton extends HTMLElement {
         );
     }
 
-    _applyInteractionStyles(vars, styleType) {
-        if (styleType === "filled") {
+    _applyInteractionStyles(vars, variant) {
+        if (variant === "filled") {
             this._applyFilledInteractionStyles(vars);
         } else {
-            this._applyUnfilledInteractionStyles(vars, styleType);
+            this._applyUnfilledInteractionStyles(vars, variant);
         }
     }
 
@@ -473,7 +493,7 @@ class YumeButton extends HTMLElement {
         this.shadowRoot.appendChild(style);
     }
 
-    _applyUnfilledInteractionStyles(vars, styleType) {
+    _applyUnfilledInteractionStyles(vars, variant) {
         const borderColor = this._outlineBorderColor(
             `var(${vars[7]}, var(${vars[0]}, #f7f7fa))`,
         );
@@ -503,7 +523,7 @@ class YumeButton extends HTMLElement {
             `var(${vars[6]}, #0c0c0d)`,
         );
 
-        if (styleType === "outlined") {
+        if (variant === "outlined") {
             // Outlined buttons keep their border color across all states
             this.button.style.setProperty("--hover-border-color", borderColor);
             this.button.style.setProperty("--focus-border-color", borderColor);
@@ -791,11 +811,11 @@ class YumeButton extends HTMLElement {
     }
 
     _updateStyles() {
-        const { color, size, styleType } = this;
+        const { color, size, variant } = this;
         const colorVars = this._getColorVarsMap();
 
         if (!colorVars[color] && isSafeCssColor(color)) {
-            this._applyCustomColorStyles(color, styleType, size);
+            this._applyCustomColorStyles(color, variant, size);
             return;
         }
 
@@ -824,14 +844,23 @@ class YumeButton extends HTMLElement {
             },
         };
 
-        const currentStyle = styleVars[styleType] || styleVars.outlined;
+        const currentStyle = styleVars[variant] || styleVars.outlined;
         Object.entries(currentStyle).forEach(([key, value]) => {
             this.button.style.setProperty(key, value);
         });
 
-        this._applyInteractionStyles(vars, styleType);
+        this._applyInteractionStyles(vars, variant);
         this._applySizeStyles(size);
     }
+
+    _warnStyleTypeDeprecated() {
+        if (YumeButton._styleTypeDeprecationWarned) return;
+
+        YumeButton._styleTypeDeprecationWarned = true;
+        console.warn(
+            'y-button: the "style-type" attribute is deprecated and will be removed in a future major version. Use "variant" instead.',
+        );
+    }
 }
 
 if (!customElements.get("y-button")) {
@@ -2168,7 +2197,7 @@ class YumeAppbar extends HTMLElement {
             {
                 id,
                 color: "base",
-                "style-type": "flat",
+                "variant": "flat",
                 size: cfg.buttonSize,
                 "aria-label": "Open menu",
                 "aria-controls": panelId,
@@ -2320,7 +2349,7 @@ class YumeAppbar extends HTMLElement {
         const btn = createElement("y-button", {
             id: btnId,
             color: isActive ? "primary" : "base",
-            "style-type": "flat",
+            "variant": "flat",
             size: cfg.buttonSize,
             "aria-current": isActive ? "page" : false,
         });