@waggylabs/yumekit 0.5.1-beta.5 → 0.5.1-beta.8

package/CHANGELOG.md

@@ -35,9 +35,9 @@ Delete any empty sections before publishing.
 
 ### Added
 
-- Two new built-in themes, `material-blue-light` and `material-blue-dark`, applying Material Design 3 — a Material palette (Blue primary, Material status colors, grey surfaces), Roboto typography, and the M3 shape scale (4/8/12/28px radii, pill buttons, 28px dialogs, 4px text fields, 1px borders) applied across all components. `y-theme` now loads the Roboto webfont automatically when one of these themes is active.
+- `y-checkbox` / `y-radio` — checked-state color hooks so themes can fill the control on selection: `--component-checkbox-checked-background` / `-checked-border-color` / `-checked-icon-color` and `--component-radio-background` / `-checked-background` / `-checked-border-color` / `-checked-dot-color`. Each falls back to the matching unchecked value, so existing themes are unchanged. The design-system themes now use them — checked checkboxes (and Shadcn/Bootstrap/Primer radios) fill with the primary color and draw the check/dot in the primary-inverse color, matching each system's native look.
 
-- Two new built-in themes, `carbon-light` and `carbon-dark`, applying IBM Carbon — the Carbon palette (Interactive Blue `#0f62fe`, IBM gray surfaces, Carbon status colors), IBM Plex Sans typography, and Carbon's sharp shape language (0px radii, 1px borders). `y-theme` loads the IBM Plex Sans webfont automatically when one of these themes is active.
+- Several theme color variations including the `Catppuccin` and `Nord` color schemes, two `Rose` color themes, two `Neobrutalist` themes, as well as several new themes based on some of the most popular design systems. This includes Material, Carbon, Ant, Shadcn, Primer, and Bootstrap.
 
 - `y-tabs` — new `variant="accent"` style: minimal tabs where the active tab shows a primary-colored indicator border on its content-facing edge (bottom for top tabs, etc.). The default bordered style is unchanged. Adds `--component-tabs-accent-width` (indicator thickness). The border-width token is normalized to `--component-tabs-border-width` (matching `--component-tabs-border-color`); the legacy `--component-tab-border-width` is still honored as a fallback.
 
@@ -57,9 +57,19 @@ Delete any empty sections before publishing.
 
 - Filled icon variants for `y-icon` via a new `weight="filled"` value, with automatic fallback to the line icon when no filled version is registered. 116 filled icons ship under `icons/all-filled.js` (also pulled in by `icons/all.js`); the remaining component-illustration icons fall back to their line versions.
 
+- New theming hooks: `--component-control-height-{size}` (shared min-height for `y-button` and `y-input` so fields and buttons match per theme, falling back to `--sizing-{size}`), `--component-checkbox-border-radius` (lets checkboxes use a tighter radius than text inputs). Outlined `y-button`s now source their border from the matching semantic border token (`--base-border`, `--error-border`, …) per color, falling back to the button's text color when that token is unset; `--component-button-outline-border` / `--component-button-outline-border-color` remain available as optional global overrides. Defaults preserve the existing look for all current themes.
+
 ### Changed
 
-- `y-button` — padding can now be set per-axis via `--component-button-padding-block-{size}` / `--component-button-padding-inline-{size}` (overriding, and falling back to, the all-sides `--component-button-padding-{size}`), plus a new `padding-mode` attribute (`auto` (default) / `square` / `wide`) controlling whether the inline axis collapses to the block value. `auto` makes icon-only buttons square automatically; `square`/`wide` force it. The Material themes use this for wide pill buttons that stay round when icon-only; `y-paginator` number buttons and `y-datepicker` day / month / year buttons set `padding-mode="square"` so they don't bloat under the wide Material padding.
+- `y-break` — the divider line now uses the semantic border color (`base.border`) instead of `base.content.lightest`, matching other component borders, and the host now applies default perpendicular spacing (above/below a horizontal break, left/right of a vertical one) via the new `--component-break-spacing` token (defaults to `--spacing-medium`) so a break separates content out of the box. The line color and thickness also gained `--base-border` / `1px` fallbacks for use without a full token set.
+
+- `y-button` — `--component-button-border-width` is now applied as the `border-width` longhand instead of being baked into the `border` shorthand, so it accepts a 1–4 value pattern for per-side widths (e.g. `0 0 2px 0` for a bottom-only border). Default (`1px`) is unchanged. The `--component-button-outline-border` shorthand override now controls border style + color only; its width is superseded by `--component-button-border-width`.
+
+- Every bordered component now applies its `--component-*-border-width` token as the `border-width` longhand (out of the `border` shorthand), so each accepts a 1–4 value pattern for per-side borders, consistent with `y-button` and the form fields: surfaces/containers (`y-card`, `y-menu`, `y-dialog`, `y-popover`, `y-datepicker`, `y-data-grid`, `y-appbar`, `y-sidebar`, `y-tabs`) and controls (`y-checkbox`, `y-radio`, `y-switch`, `y-slider`, `y-progress`). Default rendering is unchanged.
+
+- Form fields (`y-input`, `y-textarea`, `y-select`, `y-color`, `y-date`) — `--component-inputs-border-width` is now applied as the `border-width` longhand (out of the `border` shorthand) on every field surface, including the `y-select` dropdown panel and the `y-color` picker popup, so like `y-button` it accepts a 1–4 value pattern for per-side borders.
+
+- `y-button` — Outlined button borders were changed to use semantic border values instead of content color. Padding can now be set per-axis via `--component-button-padding-block-{size}` / `--component-button-padding-inline-{size}` (overriding, and falling back to, the all-sides `--component-button-padding-{size}`), plus a new `padding-mode` attribute (`auto` (default) / `square` / `wide`) controlling whether the inline axis collapses to the block value. `auto` makes icon-only buttons square automatically; `square`/`wide` force it. The Material themes use this for wide pill buttons that stay round when icon-only; `y-paginator` number buttons and `y-datepicker` day / month / year buttons set `padding-mode="square"` so they don't bloat under the wide Material padding.
 
 - Custom color support expanded to the browser-native color functions — `hwb()`, `lab()`, `lch()`, `oklab()`, `oklch()`, and `color()` — in addition to `#hex`, `rgb()`/`rgba()`, and `hsl()`/`hsla()`. The shared `isSafeCssColor` gate now also tightens its argument allowlist (rejecting semicolons, braces, angle brackets, and nested functions). Applies anywhere a `color` accepts a custom value, including `y-badge`, `y-select`, `y-popover`, `y-button`, `y-tag`, `y-icon`, and `y-rating`.
 
@@ -73,6 +83,12 @@ Delete any empty sections before publishing.
 
 ### Fixed
 
+- `y-theme` — switching themes now clears the previous theme's CSS custom properties from the host before applying the new ones. Variables defined only by the outgoing theme (e.g. a theme-specific token like `--component-tabs-inactive-background`) previously lingered inline and "stuck" until a page reload; they are now removed on every switch.
+
+- `y-tabs` — unselected tabs now use a dedicated `--component-tabs-inactive-background` (falling back to `--component-tabs-border-color`, so existing themes are unchanged) instead of always painting the tab background with the border color. This fixes the Neobrutalist themes, where the border color equals the text color and made unselected tab labels unreadable; both Neobrutalist themes now set it to a distinct surface tone.
+
+- Portaled overlays now inherit the active theme. `y-help` (tour overlay/tooltip), `y-popover` (`portal` mode), and `y-select` (`portal` mode) previously rendered into `document.body`, escaping the `<y-theme>` subtree that scopes the theme's CSS custom properties — so they fell back to the default un-themed palette. They now mount into the nearest enclosing `<y-theme>` (falling back to `document.body` when there isn't one), so the portaled surface matches the active theme and tracks live theme switches. Keep the component inside your `<y-theme>`.
+
 - Form field components now share one field background. `y-select` (trigger and dropdown) used `base.background.app` while `y-input` / `y-textarea` / `y-color` / `y-date` used `base.background.component`; `select.background` is now `base.background.component` across all themes, so fields match when placed together on a form (most visible in the Material and Carbon themes). The select dropdown panel now also matches menus/popovers.
 
 - `y-avatar` — the three `shape` values are now visually distinct. Added a `--component-avatar-border-radius-rounded` token (medium radius) and changed `square` to a zero radius (sharp corners); `circle` is unchanged.

package/dist/components/y-appbar.js

@@ -253,6 +253,7 @@ class YumeButton extends HTMLElement {
                 "--background-color": color,
                 "--border-color": color,
                 "--text-color": text,
+                "--btn-outline-border": "initial",
                 "--hover-background-color": hover,
                 "--hover-border-color": hover,
                 "--hover-text-color": text,
@@ -267,20 +268,22 @@ class YumeButton extends HTMLElement {
                 "--background-color": "transparent",
                 "--border-color": color,
                 "--text-color": color,
+                "--btn-outline-border": this._outlineBorder(color),
                 "--hover-background-color": subtle,
-                "--hover-border-color": color,
+                "--hover-border-color": this._outlineBorderColor(color),
                 "--hover-text-color": color,
                 "--focus-background-color": subtle,
-                "--focus-border-color": color,
+                "--focus-border-color": this._outlineBorderColor(color),
                 "--focus-text-color": color,
                 "--active-background-color": color,
-                "--active-border-color": color,
+                "--active-border-color": this._outlineBorderColor(color),
                 "--active-text-color": text,
             },
             flat: {
                 "--background-color": "transparent",
                 "--border-color": "transparent",
                 "--text-color": color,
+                "--btn-outline-border": "initial",
                 "--hover-background-color": subtle,
                 "--hover-border-color": subtle,
                 "--hover-text-color": color,
@@ -361,9 +364,9 @@ class YumeButton extends HTMLElement {
         this.button.style.setProperty("--button-gap", shared);
 
         const minSizeMapping = {
-            small: "var(--sizing-small, 32px)",
-            medium: "var(--sizing-medium, 40px)",
-            large: "var(--sizing-large, 56px)",
+            small: "var(--component-control-height-small, var(--sizing-small, 32px))",
+            medium: "var(--component-control-height-medium, var(--sizing-medium, 40px))",
+            large: "var(--component-control-height-large, var(--sizing-large, 56px))",
         };
         this.button.style.setProperty(
             "--button-min-height",
@@ -400,7 +403,13 @@ class YumeButton extends HTMLElement {
                 position: relative;
                 overflow: hidden;
                 border-radius: var(--component-button-border-radius-outer, 4px);
-                border: var(--component-button-border-width, 1px) solid var(--border-color, var(--base-content--, #f7f7fa));
+                /* Style + color come from the shorthand (its width stays a
+                   fixed, always-valid 1px); the real width is applied as a
+                   longhand below so --component-button-border-width can take a
+                   1–4 value pattern (e.g. "1px 2px") for per-side widths
+                   without invalidating the shorthand. */
+                border: var(--btn-outline-border, 1px solid var(--border-color, var(--base-content--, #f7f7fa)));
+                border-width: var(--component-button-border-width, 1px);
                 background: var(--background-color, #0c0c0d);
                 transition: background-color 0.1s, color 0.1s, border-color 0.1s;
                 cursor: pointer;
@@ -463,7 +472,9 @@ class YumeButton extends HTMLElement {
     }
 
     _applyUnfilledInteractionStyles(vars, styleType) {
-        const borderColor = `var(${vars[0]}, #f7f7fa)`;
+        const borderColor = this._outlineBorderColor(
+            `var(${vars[7]}, var(${vars[0]}, #f7f7fa))`,
+        );
 
         this.button.style.setProperty(
             "--hover-background-color",
@@ -522,6 +533,7 @@ class YumeButton extends HTMLElement {
                 "--primary-background-hover",
                 "--primary-background-active",
                 "--primary-content-inverse",
+                "--primary-border",
             ],
             secondary: [
                 "--secondary-content--",
@@ -531,6 +543,7 @@ class YumeButton extends HTMLElement {
                 "--secondary-background-hover",
                 "--secondary-background-active",
                 "--secondary-content-inverse",
+                "--secondary-border",
             ],
             base: [
                 "--base-content--",
@@ -540,6 +553,7 @@ class YumeButton extends HTMLElement {
                 "--base-background-hover",
                 "--base-background-active",
                 "--base-content-inverse",
+                "--base-border",
             ],
             success: [
                 "--success-content--",
@@ -549,6 +563,7 @@ class YumeButton extends HTMLElement {
                 "--success-background-hover",
                 "--success-background-active",
                 "--success-content-inverse",
+                "--success-border",
             ],
             error: [
                 "--error-content--",
@@ -558,6 +573,7 @@ class YumeButton extends HTMLElement {
                 "--error-background-hover",
                 "--error-background-active",
                 "--error-content-inverse",
+                "--error-border",
             ],
             warning: [
                 "--warning-content--",
@@ -567,6 +583,7 @@ class YumeButton extends HTMLElement {
                 "--warning-background-hover",
                 "--warning-background-active",
                 "--warning-content-inverse",
+                "--warning-border",
             ],
             help: [
                 "--help-content--",
@@ -576,6 +593,7 @@ class YumeButton extends HTMLElement {
                 "--help-background-hover",
                 "--help-background-active",
                 "--help-content-inverse",
+                "--help-border",
             ],
         };
     }
@@ -762,6 +780,14 @@ class YumeButton extends HTMLElement {
         });
     }
 
+    _outlineBorder(defaultColor) {
+        return `var(--component-button-outline-border, 1px solid ${this._outlineBorderColor(defaultColor)})`;
+    }
+
+    _outlineBorderColor(defaultColor) {
+        return `var(--component-button-outline-border-color, ${defaultColor})`;
+    }
+
     _updateStyles() {
         const { color, size, styleType } = this;
         const colorVars = this._getColorVarsMap();
@@ -778,16 +804,21 @@ class YumeButton extends HTMLElement {
                 "--background-color": `var(${vars[3]}, #0c0c0d)`,
                 "--border-color": `var(${vars[0]}, #f7f7fa)`,
                 "--text-color": `var(${vars[0]}, #f7f7fa)`,
+                "--btn-outline-border": this._outlineBorder(
+                    `var(${vars[7]}, var(${vars[0]}, #f7f7fa))`,
+                ),
             },
             filled: {
                 "--background-color": `var(${vars[0]}, #f7f7fa)`,
                 "--border-color": `var(${vars[0]}, #f7f7fa)`,
                 "--text-color": `var(${vars[6]}, #0c0c0d)`,
+                "--btn-outline-border": "initial",
             },
             flat: {
                 "--background-color": `var(${vars[3]},#0c0c0d)`,
                 "--border-color": `var(${vars[3]},#0c0c0d)`,
                 "--text-color": `var(${vars[0]},#f7f7fa)`,
+                "--btn-outline-border": "initial",
             },
         };
 
@@ -1341,7 +1372,8 @@ class YumeMenu extends HTMLElement {
             .menu,
             .submenu {
                 background: var(--component-menu-background, #0c0c0d);
-                border: var(--component-menu-border-width, 1px) solid var(--component-menu-border-color, #37383a);
+                border: 1px solid var(--component-menu-border-color, #37383a);
+                border-width: var(--component-menu-border-width, 1px);
                 border-radius: var(--component-menu-border-radius, 4px);
                 box-shadow: var(--component-menu-shadow, 0 2px 8px rgba(0, 0, 0, 0.15));
                 min-width: 150px;
@@ -1910,7 +1942,8 @@ class YumeAppbar extends HTMLElement {
                 flex-direction: row;
                 align-items: center;
                 background: var(--component-appbar-background, #0c0c0d);
-                border: var(--component-appbar-border-width, 2px) solid var(--component-appbar-border-color, #37383a);
+                border: 2px solid var(--component-appbar-border-color, #37383a);
+                border-width: var(--component-appbar-border-width, 2px);
                 border-radius: var(--component-appbar-border-radius, 4px);
                 overflow: visible;
                 padding: var(--_appbar-padding);
@@ -2108,7 +2141,8 @@ class YumeAppbar extends HTMLElement {
                 flex-direction: row;
                 align-items: center;
                 background: var(--component-appbar-background, #0c0c0d);
-                border: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
+                border: 2px solid var(--component-appbar-border-color, #37383a);
+                border-width: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px));
                 border-radius: var(--component-appbar-border-radius, var(--component-sidebar-border-radius, 4px));
                 overflow: visible;
                 padding: var(--_appbar-padding);
@@ -2144,7 +2178,8 @@ class YumeAppbar extends HTMLElement {
                 left: 0;
                 margin-top: 4px;
                 background: var(--component-appbar-background, #0c0c0d);
-                border: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px)) solid var(--component-appbar-border-color, #37383a);
+                border: 2px solid var(--component-appbar-border-color, #37383a);
+                border-width: var(--component-appbar-border-width, var(--component-sidebar-border-width, 2px));
                 border-radius: var(--component-appbar-border-radius, var(--component-sidebar-border-radius, 4px));
                 padding: var(--_appbar-padding);
                 display: none;

package/dist/components/y-banner.js

@@ -253,6 +253,7 @@ class YumeButton extends HTMLElement {
                 "--background-color": color,
                 "--border-color": color,
                 "--text-color": text,
+                "--btn-outline-border": "initial",
                 "--hover-background-color": hover,
                 "--hover-border-color": hover,
                 "--hover-text-color": text,
@@ -267,20 +268,22 @@ class YumeButton extends HTMLElement {
                 "--background-color": "transparent",
                 "--border-color": color,
                 "--text-color": color,
+                "--btn-outline-border": this._outlineBorder(color),
                 "--hover-background-color": subtle,
-                "--hover-border-color": color,
+                "--hover-border-color": this._outlineBorderColor(color),
                 "--hover-text-color": color,
                 "--focus-background-color": subtle,
-                "--focus-border-color": color,
+                "--focus-border-color": this._outlineBorderColor(color),
                 "--focus-text-color": color,
                 "--active-background-color": color,
-                "--active-border-color": color,
+                "--active-border-color": this._outlineBorderColor(color),
                 "--active-text-color": text,
             },
             flat: {
                 "--background-color": "transparent",
                 "--border-color": "transparent",
                 "--text-color": color,
+                "--btn-outline-border": "initial",
                 "--hover-background-color": subtle,
                 "--hover-border-color": subtle,
                 "--hover-text-color": color,
@@ -361,9 +364,9 @@ class YumeButton extends HTMLElement {
         this.button.style.setProperty("--button-gap", shared);
 
         const minSizeMapping = {
-            small: "var(--sizing-small, 32px)",
-            medium: "var(--sizing-medium, 40px)",
-            large: "var(--sizing-large, 56px)",
+            small: "var(--component-control-height-small, var(--sizing-small, 32px))",
+            medium: "var(--component-control-height-medium, var(--sizing-medium, 40px))",
+            large: "var(--component-control-height-large, var(--sizing-large, 56px))",
         };
         this.button.style.setProperty(
             "--button-min-height",
@@ -400,7 +403,13 @@ class YumeButton extends HTMLElement {
                 position: relative;
                 overflow: hidden;
                 border-radius: var(--component-button-border-radius-outer, 4px);
-                border: var(--component-button-border-width, 1px) solid var(--border-color, var(--base-content--, #f7f7fa));
+                /* Style + color come from the shorthand (its width stays a
+                   fixed, always-valid 1px); the real width is applied as a
+                   longhand below so --component-button-border-width can take a
+                   1–4 value pattern (e.g. "1px 2px") for per-side widths
+                   without invalidating the shorthand. */
+                border: var(--btn-outline-border, 1px solid var(--border-color, var(--base-content--, #f7f7fa)));
+                border-width: var(--component-button-border-width, 1px);
                 background: var(--background-color, #0c0c0d);
                 transition: background-color 0.1s, color 0.1s, border-color 0.1s;
                 cursor: pointer;
@@ -463,7 +472,9 @@ class YumeButton extends HTMLElement {
     }
 
     _applyUnfilledInteractionStyles(vars, styleType) {
-        const borderColor = `var(${vars[0]}, #f7f7fa)`;
+        const borderColor = this._outlineBorderColor(
+            `var(${vars[7]}, var(${vars[0]}, #f7f7fa))`,
+        );
 
         this.button.style.setProperty(
             "--hover-background-color",
@@ -522,6 +533,7 @@ class YumeButton extends HTMLElement {
                 "--primary-background-hover",
                 "--primary-background-active",
                 "--primary-content-inverse",
+                "--primary-border",
             ],
             secondary: [
                 "--secondary-content--",
@@ -531,6 +543,7 @@ class YumeButton extends HTMLElement {
                 "--secondary-background-hover",
                 "--secondary-background-active",
                 "--secondary-content-inverse",
+                "--secondary-border",
             ],
             base: [
                 "--base-content--",
@@ -540,6 +553,7 @@ class YumeButton extends HTMLElement {
                 "--base-background-hover",
                 "--base-background-active",
                 "--base-content-inverse",
+                "--base-border",
             ],
             success: [
                 "--success-content--",
@@ -549,6 +563,7 @@ class YumeButton extends HTMLElement {
                 "--success-background-hover",
                 "--success-background-active",
                 "--success-content-inverse",
+                "--success-border",
             ],
             error: [
                 "--error-content--",
@@ -558,6 +573,7 @@ class YumeButton extends HTMLElement {
                 "--error-background-hover",
                 "--error-background-active",
                 "--error-content-inverse",
+                "--error-border",
             ],
             warning: [
                 "--warning-content--",
@@ -567,6 +583,7 @@ class YumeButton extends HTMLElement {
                 "--warning-background-hover",
                 "--warning-background-active",
                 "--warning-content-inverse",
+                "--warning-border",
             ],
             help: [
                 "--help-content--",
@@ -576,6 +593,7 @@ class YumeButton extends HTMLElement {
                 "--help-background-hover",
                 "--help-background-active",
                 "--help-content-inverse",
+                "--help-border",
             ],
         };
     }
@@ -762,6 +780,14 @@ class YumeButton extends HTMLElement {
         });
     }
 
+    _outlineBorder(defaultColor) {
+        return `var(--component-button-outline-border, 1px solid ${this._outlineBorderColor(defaultColor)})`;
+    }
+
+    _outlineBorderColor(defaultColor) {
+        return `var(--component-button-outline-border-color, ${defaultColor})`;
+    }
+
     _updateStyles() {
         const { color, size, styleType } = this;
         const colorVars = this._getColorVarsMap();
@@ -778,16 +804,21 @@ class YumeButton extends HTMLElement {
                 "--background-color": `var(${vars[3]}, #0c0c0d)`,
                 "--border-color": `var(${vars[0]}, #f7f7fa)`,
                 "--text-color": `var(${vars[0]}, #f7f7fa)`,
+                "--btn-outline-border": this._outlineBorder(
+                    `var(${vars[7]}, var(${vars[0]}, #f7f7fa))`,
+                ),
             },
             filled: {
                 "--background-color": `var(${vars[0]}, #f7f7fa)`,
                 "--border-color": `var(${vars[0]}, #f7f7fa)`,
                 "--text-color": `var(${vars[6]}, #0c0c0d)`,
+                "--btn-outline-border": "initial",
             },
             flat: {
                 "--background-color": `var(${vars[3]},#0c0c0d)`,
                 "--border-color": `var(${vars[3]},#0c0c0d)`,
                 "--text-color": `var(${vars[0]},#f7f7fa)`,
+                "--btn-outline-border": "initial",
             },
         };
 

package/dist/components/y-break.js

@@ -526,13 +526,20 @@ class YumeBreak extends HTMLElement {
                 --_inset: var(--component-break-inset, ${inset});
                 display: block;
                 box-sizing: border-box;
-                color: var(--component-break-content-color);
+                /* Breathing room above/below the line so the break separates
+                   content out of the box. Perpendicular to the line, so it
+                   becomes inline padding when vertical (below). */
+                padding-block: var(--component-break-spacing, var(--spacing-medium, 16px));
+                padding-inline: 0;
+                color: var(--component-break-content-color, var(--base-content-lightest, currentColor));
             }
 
             :host([orientation="vertical"]) {
                 display: inline-flex;
                 align-self: stretch;
                 min-height: 1em;
+                padding-block: 0;
+                padding-inline: var(--component-break-spacing, var(--spacing-medium, 16px));
             }
 
             .break {
@@ -551,13 +558,13 @@ class YumeBreak extends HTMLElement {
             .line {
                 flex: 1 1 auto;
                 min-width: var(--component-break-min-length);
-                border-top: var(--component-break-line-thickness) var(--_line-style) var(--component-break-line-color);
+                border-top: var(--component-break-line-thickness, 1px) var(--_line-style) var(--component-break-line-color, var(--base-border, currentColor));
                 align-self: center;
             }
 
             :host([orientation="vertical"]) .line {
                 border-top: 0;
-                border-left: var(--component-break-line-thickness) var(--_line-style) var(--component-break-line-color);
+                border-left: var(--component-break-line-thickness, 1px) var(--_line-style) var(--component-break-line-color, var(--base-border, currentColor));
                 min-width: 0;
                 min-height: var(--component-break-min-length);
                 width: 0;

package/dist/components/y-button/y-button.d.ts

@@ -68,5 +68,7 @@ export class YumeButton extends HTMLElement {
     _render(): void;
     button: any;
     _updateButtonAttributes(): void;
+    _outlineBorder(defaultColor: any): string;
+    _outlineBorderColor(defaultColor: any): string;
     _updateStyles(): void;
 }

package/dist/components/y-button.d.ts

@@ -68,5 +68,7 @@ export class YumeButton extends HTMLElement {
     _render(): void;
     button: any;
     _updateButtonAttributes(): void;
+    _outlineBorder(defaultColor: any): string;
+    _outlineBorderColor(defaultColor: any): string;
     _updateStyles(): void;
 }

package/dist/components/y-button.js

@@ -253,6 +253,7 @@ class YumeButton extends HTMLElement {
                 "--background-color": color,
                 "--border-color": color,
                 "--text-color": text,
+                "--btn-outline-border": "initial",
                 "--hover-background-color": hover,
                 "--hover-border-color": hover,
                 "--hover-text-color": text,
@@ -267,20 +268,22 @@ class YumeButton extends HTMLElement {
                 "--background-color": "transparent",
                 "--border-color": color,
                 "--text-color": color,
+                "--btn-outline-border": this._outlineBorder(color),
                 "--hover-background-color": subtle,
-                "--hover-border-color": color,
+                "--hover-border-color": this._outlineBorderColor(color),
                 "--hover-text-color": color,
                 "--focus-background-color": subtle,
-                "--focus-border-color": color,
+                "--focus-border-color": this._outlineBorderColor(color),
                 "--focus-text-color": color,
                 "--active-background-color": color,
-                "--active-border-color": color,
+                "--active-border-color": this._outlineBorderColor(color),
                 "--active-text-color": text,
             },
             flat: {
                 "--background-color": "transparent",
                 "--border-color": "transparent",
                 "--text-color": color,
+                "--btn-outline-border": "initial",
                 "--hover-background-color": subtle,
                 "--hover-border-color": subtle,
                 "--hover-text-color": color,
@@ -361,9 +364,9 @@ class YumeButton extends HTMLElement {
         this.button.style.setProperty("--button-gap", shared);
 
         const minSizeMapping = {
-            small: "var(--sizing-small, 32px)",
-            medium: "var(--sizing-medium, 40px)",
-            large: "var(--sizing-large, 56px)",
+            small: "var(--component-control-height-small, var(--sizing-small, 32px))",
+            medium: "var(--component-control-height-medium, var(--sizing-medium, 40px))",
+            large: "var(--component-control-height-large, var(--sizing-large, 56px))",
         };
         this.button.style.setProperty(
             "--button-min-height",
@@ -400,7 +403,13 @@ class YumeButton extends HTMLElement {
                 position: relative;
                 overflow: hidden;
                 border-radius: var(--component-button-border-radius-outer, 4px);
-                border: var(--component-button-border-width, 1px) solid var(--border-color, var(--base-content--, #f7f7fa));
+                /* Style + color come from the shorthand (its width stays a
+                   fixed, always-valid 1px); the real width is applied as a
+                   longhand below so --component-button-border-width can take a
+                   1–4 value pattern (e.g. "1px 2px") for per-side widths
+                   without invalidating the shorthand. */
+                border: var(--btn-outline-border, 1px solid var(--border-color, var(--base-content--, #f7f7fa)));
+                border-width: var(--component-button-border-width, 1px);
                 background: var(--background-color, #0c0c0d);
                 transition: background-color 0.1s, color 0.1s, border-color 0.1s;
                 cursor: pointer;
@@ -463,7 +472,9 @@ class YumeButton extends HTMLElement {
     }
 
     _applyUnfilledInteractionStyles(vars, styleType) {
-        const borderColor = `var(${vars[0]}, #f7f7fa)`;
+        const borderColor = this._outlineBorderColor(
+            `var(${vars[7]}, var(${vars[0]}, #f7f7fa))`,
+        );
 
         this.button.style.setProperty(
             "--hover-background-color",
@@ -522,6 +533,7 @@ class YumeButton extends HTMLElement {
                 "--primary-background-hover",
                 "--primary-background-active",
                 "--primary-content-inverse",
+                "--primary-border",
             ],
             secondary: [
                 "--secondary-content--",
@@ -531,6 +543,7 @@ class YumeButton extends HTMLElement {
                 "--secondary-background-hover",
                 "--secondary-background-active",
                 "--secondary-content-inverse",
+                "--secondary-border",
             ],
             base: [
                 "--base-content--",
@@ -540,6 +553,7 @@ class YumeButton extends HTMLElement {
                 "--base-background-hover",
                 "--base-background-active",
                 "--base-content-inverse",
+                "--base-border",
             ],
             success: [
                 "--success-content--",
@@ -549,6 +563,7 @@ class YumeButton extends HTMLElement {
                 "--success-background-hover",
                 "--success-background-active",
                 "--success-content-inverse",
+                "--success-border",
             ],
             error: [
                 "--error-content--",
@@ -558,6 +573,7 @@ class YumeButton extends HTMLElement {
                 "--error-background-hover",
                 "--error-background-active",
                 "--error-content-inverse",
+                "--error-border",
             ],
             warning: [
                 "--warning-content--",
@@ -567,6 +583,7 @@ class YumeButton extends HTMLElement {
                 "--warning-background-hover",
                 "--warning-background-active",
                 "--warning-content-inverse",
+                "--warning-border",
             ],
             help: [
                 "--help-content--",
@@ -576,6 +593,7 @@ class YumeButton extends HTMLElement {
                 "--help-background-hover",
                 "--help-background-active",
                 "--help-content-inverse",
+                "--help-border",
             ],
         };
     }
@@ -762,6 +780,14 @@ class YumeButton extends HTMLElement {
         });
     }
 
+    _outlineBorder(defaultColor) {
+        return `var(--component-button-outline-border, 1px solid ${this._outlineBorderColor(defaultColor)})`;
+    }
+
+    _outlineBorderColor(defaultColor) {
+        return `var(--component-button-outline-border-color, ${defaultColor})`;
+    }
+
     _updateStyles() {
         const { color, size, styleType } = this;
         const colorVars = this._getColorVarsMap();
@@ -778,16 +804,21 @@ class YumeButton extends HTMLElement {
                 "--background-color": `var(${vars[3]}, #0c0c0d)`,
                 "--border-color": `var(${vars[0]}, #f7f7fa)`,
                 "--text-color": `var(${vars[0]}, #f7f7fa)`,
+                "--btn-outline-border": this._outlineBorder(
+                    `var(${vars[7]}, var(${vars[0]}, #f7f7fa))`,
+                ),
             },
             filled: {
                 "--background-color": `var(${vars[0]}, #f7f7fa)`,
                 "--border-color": `var(${vars[0]}, #f7f7fa)`,
                 "--text-color": `var(${vars[6]}, #0c0c0d)`,
+                "--btn-outline-border": "initial",
             },
             flat: {
                 "--background-color": `var(${vars[3]},#0c0c0d)`,
                 "--border-color": `var(${vars[3]},#0c0c0d)`,
                 "--text-color": `var(${vars[0]},#f7f7fa)`,
+                "--btn-outline-border": "initial",
             },
         };
 

package/dist/components/y-card.js

@@ -80,7 +80,8 @@ class YumeCard extends HTMLElement {
                 display: block;
                 box-sizing: border-box;
                 background: var(--card-background, var(--base-background-component));
-                border: var(--card-border-width, var(--component-card-border-width)) solid var(--card-border-color, var(--base-border));
+                border: 1px solid var(--card-border-color, var(--base-border));
+                border-width: var(--card-border-width, var(--component-card-border-width, 1px));
                 border-radius: var(--component-card-border-radius-outer);
                 font-family: var(--font-family-body);
                 color: var(--card-content-color, var(--base-content--));