@waggylabs/yumekit 0.5.2 → 0.5.3

package/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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@waggylabs/yumekit",
-    "version": "0.5.2",
+    "version": "0.5.3",
     "description": "Modern Web Component UI Kit",
     "type": "module",
     "main": "dist/yumekit.min.js",