@waggylabs/yumekit 0.5.1-beta.6 → 0.5.1-beta.9

package/CHANGELOG.md

@@ -35,7 +35,9 @@ Delete any empty sections before publishing.
 
 ### Added
 
-- Several theme color variations including the `Catppuccin` color schemes, 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-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.
+
+- Several theme color variations including `Slate`, `Rose`, the `Catppuccin` and `Nord` color schemes, 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, Bootstrap, and a few throwback themes inspired by Yumekit's spiritual ancestor: `Kepler UI`.
 
 - `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.
 
@@ -55,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`.
 
@@ -71,7 +83,17 @@ Delete any empty sections before publishing.
 
 ### Fixed
 
-- `y-data-grid` — selected-row colors are now readable in every theme. The row used a near-surface tint (`--primary-background-component`) for its background but the white `--primary-content-inverse` for text, so text was invisible on light themes and the background was indistinguishable from the surface on dark themes. Selected rows now use the `--primary-background-active` tint with the normal `--base-content` text (override via `--component-data-grid-row-selected-bg` / `--component-data-grid-row-selected-text`). The multi-sort priority badge and group-toggle focus ring, which shared the same mistake, now use `--primary-content`.
+- `y-sidebar` — nav/footer icons now stay in the same position between the expanded and collapsed states under themes whose borders use a multi-value width (e.g. the Neobrutalist offset border `2px 2px 6px 2px`). The icon-column width is now derived from the sidebar's resolved horizontal border (flat buttons render no border) instead of an invalid `calc()` that multiplied the multi-value token, which had collapsed the column to `auto` and shifted icons.
+
+- `y-drawer` — corners closest to the screen's edge are now squared in all themes.
+
+- `y-datepicker` — the month and year pickers were reworked. The month picker (`show-days="false"`) now shows a selectable year dropdown in its header (toggled by `show-years`, omitted when `false`) above the twelve months, and the year picker (`show-months="false"`) now bounds its scrollable year grid with two start/end year inputs. Clicking a month or year now selects it and fires `change`; clicking a year in the year picker no longer shifts the visible range.
+
+- `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>`, walking up across shadow boundaries so the fix also applies when the component is used inside another component's shadow root (e.g. `y-data-grid`'s per-column header menus), falling back to `document.body` when there is no theme ancestor. 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.
 

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",
             },
         };