@shineuix/core 1.0.0 → 1.0.1

package/dist/collection/components/sui-badge/sui-badge.js

@@ -70,7 +70,7 @@ export class SuiBadge {
                     "references": {
                         "SuiBadgeSeverity": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-badge/sui-badge.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-badge/sui-badge.tsx",
                             "id": "src/components/sui-badge/sui-badge.tsx::SuiBadgeSeverity"
                         }
                     }

package/dist/collection/components/sui-block-ui/sui-block-ui.js

@@ -75,7 +75,7 @@ export class SuiBlockUi {
             this.veil.style.borderRadius = r;
     }
     render() {
-        return (h(Host, { key: '2a0cabdd9914c2806fc27601d8e027511ef29dc0', "aria-busy": this.blocked ? 'true' : 'false' }, h("div", { key: '02b131d1491c6e93bd88d878a48f8e8c10d1f45b', class: "wrap" }, h("div", { key: '1d34c748a753ce332d2eb4f18a4f0d7f79e5327b', class: "content", ref: (el) => (this.content = el) }, h("slot", { key: '4bbec75b06833cb9fce5994bfb3450ba549b56de' })), this.blocked ? (h("div", { class: "veil", ref: (el) => (this.veil = el) }, this.hasVeilContent ? null : (h("sui-progress-spinner", { diameter: 30, thickness: 3, label: this.message === '' ? undefined : localeText(undefined, 'block-ui.message', this.message, 'Working') })), h("slot", { name: "veil" }))) : null)));
+        return (h(Host, { key: '40f4aef860e215bfa94f76eb65f807aba49c0ce7', "aria-busy": this.blocked ? 'true' : 'false' }, h("div", { key: '2750cf0477a95c4d07d00b8fec1214e6eaf6c7d6', class: "wrap" }, h("div", { key: 'ffe136c7f0febb69f3267e67da8e8683c399b1e6', class: "content", ref: (el) => (this.content = el) }, h("slot", { key: 'a494e524dbcad53467dae349d3288da85566c6b1' })), this.blocked ? (h("div", { class: "veil", ref: (el) => (this.veil = el) }, this.hasVeilContent ? null : (h("sui-progress-spinner", { diameter: 30, thickness: 3, label: this.message === '' ? undefined : localeText(undefined, 'block-ui.message', this.message, 'Working') })), h("slot", { name: "veil" }))) : null)));
     }
     static get is() { return "sui-block-ui"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/sui-board/sui-board.js

@@ -599,7 +599,7 @@ export class SuiBoard {
                     "references": {
                         "SuiBoardColumn": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-board/sui-board.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-board/sui-board.tsx",
                             "id": "src/components/sui-board/sui-board.tsx::SuiBoardColumn"
                         }
                     }
@@ -623,7 +623,7 @@ export class SuiBoard {
                     "references": {
                         "SuiBoardCard": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-board/sui-board.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-board/sui-board.tsx",
                             "id": "src/components/sui-board/sui-board.tsx::SuiBoardCard"
                         }
                     }
@@ -667,12 +667,12 @@ export class SuiBoard {
                     "references": {
                         "SuiBoardCard": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-board/sui-board.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-board/sui-board.tsx",
                             "id": "src/components/sui-board/sui-board.tsx::SuiBoardCard"
                         },
                         "SuiBoardColumn": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-board/sui-board.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-board/sui-board.tsx",
                             "id": "src/components/sui-board/sui-board.tsx::SuiBoardColumn"
                         },
                         "SuiRenderResult": {
@@ -845,7 +845,7 @@ export class SuiBoard {
                     "references": {
                         "SuiBoardMoveDetail": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-board/sui-board.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-board/sui-board.tsx",
                             "id": "src/components/sui-board/sui-board.tsx::SuiBoardMoveDetail"
                         }
                     }
@@ -888,7 +888,7 @@ export class SuiBoard {
                     "references": {
                         "SuiBoardCardClickDetail": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-board/sui-board.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-board/sui-board.tsx",
                             "id": "src/components/sui-board/sui-board.tsx::SuiBoardCardClickDetail"
                         }
                     }

package/dist/collection/components/sui-bottom-nav/sui-bottom-nav.css

@@ -1,6 +1,6 @@
 :host { display: block; font-family: var(--font-sans); }
 
-/* On navy the focus colour is the inverse ink: the navy ring would vanish into the ground. */
+/* On navy the focus color is the inverse ink: the navy ring would vanish into the ground. */
 .bar { display: flex; background: var(--surface-navy); border-radius: var(--radius-lg); overflow: hidden; --focus-ring: var(--ink-inverse); --focus-shadow: none; }
 .bar.fixed { position: fixed; bottom: 0; inset-inline: 0; z-index: var(--z-overlay); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
 

package/dist/collection/components/sui-bottom-nav/sui-bottom-nav.js

@@ -95,7 +95,7 @@ export class SuiBottomNav {
                     "references": {
                         "SuiBottomNavItem": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-bottom-nav/sui-bottom-nav.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-bottom-nav/sui-bottom-nav.tsx",
                             "id": "src/components/sui-bottom-nav/sui-bottom-nav.tsx::SuiBottomNavItem"
                         }
                     }

package/dist/collection/components/sui-breadcrumb/sui-breadcrumb.js

@@ -113,7 +113,7 @@ export class SuiBreadcrumb {
                     "references": {
                         "SuiBreadcrumbItem": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-breadcrumb/sui-breadcrumb.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-breadcrumb/sui-breadcrumb.tsx",
                             "id": "src/components/sui-breadcrumb/sui-breadcrumb.tsx::SuiBreadcrumbItem"
                         }
                     }

package/dist/collection/components/sui-button/sui-button.css

@@ -15,64 +15,68 @@
 .sui-btn.sm { height: var(--sui-button-height, var(--control-sm)); padding: 0 10px; font-size: 12.5px; }
 .sui-btn.md { height: var(--sui-button-height, var(--control-md)); padding: 0 var(--button-pad-x); font-size: 13px; }
 .sui-btn.lg { height: var(--sui-button-height, var(--control-lg)); padding: 0 var(--button-pad-x-lg); font-size: 14px; }
+/* xl is lg's type at the 44px touch target: the sign-in button under 42px fields. */
+.sui-btn.xl { height: var(--sui-button-height, var(--control-xl)); padding: 0 var(--button-pad-x-lg); font-size: 14px; }
 .sui-btn.sm .sui-btn-icon { font-size: 11px; }
 .sui-btn.md .sui-btn-icon { font-size: 12px; }
-.sui-btn.lg .sui-btn-icon { font-size: 14px; }
+.sui-btn.lg .sui-btn-icon, .sui-btn.xl .sui-btn-icon { font-size: 14px; }
 
 .sui-btn.accent { background: var(--accent); color: var(--accent-contrast); font-weight: var(--w-heavy); }
-.sui-btn.accent:hover:not(:disabled) { background: var(--accent-hover); }
+.sui-btn.accent:hover:not(:disabled, .loading, .disabled) { background: var(--accent-hover); }
 .sui-btn.accent:focus-visible { outline-color: var(--sui-button-focus-accent, var(--focus-ring)); }
-.sui-btn.accent:active:not(:disabled) { background: var(--accent-active); }
+.sui-btn.accent:active:not(:disabled, .loading, .disabled) { background: var(--accent-active); }
 
 .sui-btn.brand { background: var(--brand); color: var(--brand-contrast); font-weight: var(--w-bold); }
-.sui-btn.brand:hover:not(:disabled) { background: var(--brand-hover); }
+.sui-btn.brand:hover:not(:disabled, .loading, .disabled) { background: var(--brand-hover); }
 .sui-btn.brand:focus-visible { outline-color: var(--sui-button-focus-brand, var(--focus-ring)); }
-.sui-btn.brand:active:not(:disabled) { background: var(--brand-active); }
+.sui-btn.brand:active:not(:disabled, .loading, .disabled) { background: var(--brand-active); }
 
 .sui-btn.outline { background: var(--surface); color: var(--ink); border-color: var(--sui-button-border, var(--control-border)); font-weight: var(--w-semibold); background-clip: padding-box; }
-.sui-btn.outline:hover:not(:disabled) { border-color: var(--sui-button-hover-border, color-mix(in srgb, var(--ink) 30%, var(--control-border))); background: var(--brand-soft); }
-.sui-btn.outline:active:not(:disabled) { background: color-mix(in srgb, var(--brand-soft) 92%, var(--ink)); }
+.sui-btn.outline:hover:not(:disabled, .loading, .disabled) { border-color: var(--sui-button-hover-border, color-mix(in srgb, var(--ink) 30%, var(--control-border))); background: var(--brand-soft); }
+.sui-btn.outline:active:not(:disabled, .loading, .disabled) { background: color-mix(in srgb, var(--brand-soft) 92%, var(--ink)); }
 
 .sui-btn.ghost { background: transparent; color: var(--ink); font-weight: var(--w-semibold); }
-.sui-btn.ghost:hover:not(:disabled) { background: var(--brand-soft); }
-.sui-btn.ghost:active:not(:disabled) { background: color-mix(in srgb, var(--brand-soft) 92%, var(--ink)); }
+.sui-btn.ghost:hover:not(:disabled, .loading, .disabled) { background: var(--brand-soft); }
+.sui-btn.ghost:active:not(:disabled, .loading, .disabled) { background: color-mix(in srgb, var(--brand-soft) 92%, var(--ink)); }
 
 .sui-btn.danger { background: var(--danger-fill); color: var(--danger-contrast); font-weight: var(--w-heavy); box-shadow: inset 0 0 0 1.5px var(--danger-fill-edge); }
-.sui-btn.danger:hover:not(:disabled) { background: var(--danger-hover); }
+.sui-btn.danger:hover:not(:disabled, .loading, .disabled) { background: var(--danger-hover); }
 .sui-btn.danger:focus-visible { outline-color: var(--sui-button-focus-danger, var(--focus-ring)); }
-.sui-btn.danger:active:not(:disabled) { background: var(--danger-active); }
+.sui-btn.danger:active:not(:disabled, .loading, .disabled) { background: var(--danger-active); }
 
 /* A link is text: no inline padding, so its words end on the content line beside a heading. The hit
    area reaches past the words through an invisible box 6px past each end. */
 .sui-btn.link { background: transparent; color: var(--link); font-weight: var(--w-semibold); position: relative; }
-.sui-btn.link.sm, .sui-btn.link.md, .sui-btn.link.lg { padding-inline: 0; border-inline-width: 0; }
+.sui-btn.link.sm, .sui-btn.link.md, .sui-btn.link.lg, .sui-btn.link.xl { padding-inline: 0; border-inline-width: 0; }
 .sui-btn.link::after { content: ''; position: absolute; inset: 0 -6px; border-radius: var(--sui-button-radius, var(--radius-md)); }
-/* The ring is drawn just inside that box: 4px of air beside the words, and 4px clear of a neighbour
+/* The ring is drawn just inside that box: 4px of air beside the words, and 4px clear of a neighbor
    10px away. Drawn inside, it lays no halo outside it. */
 .sui-btn.link:focus-visible { outline: none; box-shadow: none; }
 .sui-btn.link:focus-visible::after { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
-.sui-btn.link:hover:not(:disabled) { text-decoration: underline; }
-.sui-btn.link:active:not(:disabled) { text-decoration: underline; }
-.sui-btn.link:not(.inverse):not(.tone-danger):active:not(:disabled) { color: color-mix(in srgb, var(--link) 70%, var(--ink)); }
+.sui-btn.link:hover:not(:disabled, .loading, .disabled) { text-decoration: underline; }
+.sui-btn.link:active:not(:disabled, .loading, .disabled) { text-decoration: underline; }
+.sui-btn.link:not(.inverse):not(.tone-danger):active:not(:disabled, .loading, .disabled) { color: color-mix(in srgb, var(--link) 70%, var(--ink)); }
 
-/* On navy the focus colour is the inverse ink: the navy ring would vanish into the ground. */
+/* On navy the focus color is the inverse ink: the navy ring would vanish into the ground. */
 .sui-btn.inverse { --focus-ring: var(--ink-inverse); --focus-shadow: none; }
 .sui-btn.outline.inverse { background: transparent; color: var(--ink-inverse-muted); border-color: var(--border-inverse); }
 .sui-btn.ghost.inverse, .sui-btn.link.inverse { background: transparent; color: var(--ink-inverse-muted); }
-.sui-btn.outline.inverse:hover:not(:disabled), .sui-btn.ghost.inverse:hover:not(:disabled) { background: var(--border-inverse); color: var(--ink-inverse); }
+.sui-btn.outline.inverse:hover:not(:disabled, .loading, .disabled), .sui-btn.ghost.inverse:hover:not(:disabled, .loading, .disabled) { background: var(--border-inverse); color: var(--ink-inverse); }
 /* On navy a press deepens the inverse wash, as the pressed wash deepens the hover on a card. */
-.sui-btn.outline.inverse:active:not(:disabled), .sui-btn.ghost.inverse:active:not(:disabled) { background: color-mix(in srgb, var(--ink-inverse) 22%, transparent); color: var(--ink-inverse); }
-.sui-btn.link.inverse:hover:not(:disabled) { color: var(--ink-inverse); }
+.sui-btn.outline.inverse:active:not(:disabled, .loading, .disabled), .sui-btn.ghost.inverse:active:not(:disabled, .loading, .disabled) { background: color-mix(in srgb, var(--ink-inverse) 22%, transparent); color: var(--ink-inverse); }
+.sui-btn.link.inverse:hover:not(:disabled, .loading, .disabled) { color: var(--ink-inverse); }
 .sui-btn.outline.tone-danger { color: var(--danger); border-color: var(--danger); }
 .sui-btn.ghost.tone-danger, .sui-btn.link.tone-danger { color: var(--danger); font-weight: var(--w-bold); }
 /* On the red tint the label takes the red made for it, which holds 4.5:1 there and on the pressed tint. */
-.sui-btn.outline.tone-danger:hover:not(:disabled), .sui-btn.ghost.tone-danger:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger-soft-ink); }
-.sui-btn.outline.tone-danger:active:not(:disabled), .sui-btn.ghost.tone-danger:active:not(:disabled) { background: color-mix(in srgb, var(--danger-soft) 84%, var(--danger)); color: var(--danger-soft-ink); }
-.sui-btn.outline.tone-danger:hover:not(:disabled), .sui-btn.outline.tone-danger:active:not(:disabled) { border-color: var(--danger); }
+.sui-btn.outline.tone-danger:hover:not(:disabled, .loading, .disabled), .sui-btn.ghost.tone-danger:hover:not(:disabled, .loading, .disabled) { background: var(--danger-soft); color: var(--danger-soft-ink); }
+.sui-btn.outline.tone-danger:active:not(:disabled, .loading, .disabled), .sui-btn.ghost.tone-danger:active:not(:disabled, .loading, .disabled) { background: color-mix(in srgb, var(--danger-soft) 84%, var(--danger)); color: var(--danger-soft-ink); }
+.sui-btn.outline.tone-danger:hover:not(:disabled, .loading, .disabled), .sui-btn.outline.tone-danger:active:not(:disabled, .loading, .disabled) { border-color: var(--danger); }
 
-.sui-btn:disabled { cursor: not-allowed; }
-.sui-btn.loading { cursor: progress; pointer-events: none; }
-.sui-btn.disabled { pointer-events: none; }
+/* A blocked control keeps its pointer events. Without them a click passes through to the element
+   itself, where a framework's click handler hears it; on the control, the click handler swallows it
+   first. The hover and press rules above leave a blocked control alone instead. */
+.sui-btn:disabled, .sui-btn.disabled { cursor: not-allowed; }
+.sui-btn.loading { cursor: progress; }
 .sui-btn:disabled:not(.loading), .sui-btn.disabled:not(.loading) { color: var(--disabled-ink); border-color: transparent; }
 .sui-btn.accent:disabled:not(.loading), .sui-btn.brand:disabled:not(.loading), .sui-btn.danger:disabled:not(.loading),
 .sui-btn.accent.disabled, .sui-btn.brand.disabled, .sui-btn.danger.disabled { background: var(--disabled-bg); box-shadow: none; }

package/dist/collection/components/sui-button/sui-button.js

@@ -1,10 +1,10 @@
 import { h, Host } from "@stencil/core";
-import { inheritAriaLabel } from "../../utils/aria";
+import { inheritAriaDescribedby, inheritAriaDisabled, inheritAriaLabel } from "../../utils/aria";
 import { delegateFocus } from "../../utils/form-control";
 import { Glyph } from "../_shared/glyph";
 import { circleNotch } from "../_shared/glyphs";
 const VARIANTS = ['accent', 'brand', 'outline', 'ghost', 'danger', 'link'];
-const SIZES = ['sm', 'md', 'lg'];
+const SIZES = ['sm', 'md', 'lg', 'xl'];
 /**
  * The action button. Six roles cover every click: `accent` is the one primary action per view,
  * `brand` submits forms, `outline` is the default, `ghost` is quiet, `danger` confirms a
@@ -34,10 +34,12 @@ export class SuiButton {
      * `inverse` is for a quiet button sitting on dark chrome, an app bar or a side rail, where the
      * default ink would read against the panel rather than on it. It paints `--ink-inverse-muted` and
      * brightens to `--ink-inverse` on hover, matching `sui-icon-button`'s tone of the same name so a
-     * labelled button and an icon button agree on a brand bar.
+     * labeled button and an icon button agree on a brand bar.
      */
     tone;
-    /** Control height: sm 28px, md 34px (toolbars), lg 42px (forms). Reflected. */
+    /** Control height: sm 28px (packed rows), md 34px (forms and toolbars), lg 42px (beside the
+     *  42px fields of a sign-in or marketing page), xl 44px (that page's call to action, and the
+     *  smallest touch target). Reflected. */
     size = 'md';
     /** Button text. Prefer this over the slot. */
     label;
@@ -52,13 +54,18 @@ export class SuiButton {
     iconPos = 'start';
     /** Blocks clicks. Filled roles take the disabled well, an outline keeps its surface, and ghost
      *  and link stay bare; on navy (`tone="inverse"`) the ink fades instead. A disabled link keeps
-     *  the look, drops its `href`, reads `aria-disabled="true"` and takes no pointer events, since an
-     *  anchor has no `disabled` attribute of its own. */
+     *  the look, drops its `href`, reads `aria-disabled="true"` and swallows a click, since an anchor
+     *  has no `disabled` attribute of its own. A disabled button leaves the tab order; to keep it
+     *  there, so a keyboard or screen reader user reaches it and the reason beside it, set
+     *  `aria-disabled="true"` on the element instead. The button then reads as disabled, takes the
+     *  same look and ignores a click, Enter and Space; a link drops its `href` and stays a tab stop.
+     *  An `aria-describedby` on the element reaches the button too, so the reason is read with it. */
     disabled = false;
     /** Shows a spinner in place of the icon and blocks clicks. The button stays focusable while busy,
      *  `aria-disabled` rather than disabled, so a keyboard user keeps their place and a modal trap
      *  around it holds; a click, Enter or Space does nothing until it clears. A link behaves the
-     *  same and keeps its `href`. Reflected. */
+     *  same: it drops its `href` until the work is done and stays a tab stop, so nothing opens
+     *  it, a new tab included. Reflected. */
     loading = false;
     /** Full width: the host becomes a block and the button fills it. */
     block = false;
@@ -95,24 +102,44 @@ export class SuiButton {
     rel;
     /** Accessible name, read from the element's own `aria-label` attribute and forwarded to the button. */
     hostLabel;
+    /** The element's own `aria-disabled="true"`: the focusable disabled button. */
+    hostDisabled = false;
+    /** The element's own `aria-describedby`, forwarded to the button: the reason a held button gives. */
+    hostDescribedby;
     stopAria;
+    stopAriaDisabled;
+    stopAriaDescribedby;
     /** Armed on every connect, not once at load: a button moved in the document, as a framework moves
      *  a keyed row or a dragged card, is disconnected on the way and would stop following its
      *  `aria-label`. */
     connectedCallback() {
         delegateFocus(this.host, () => this.btn);
         this.stopAria = inheritAriaLabel(this.host, (v) => { this.hostLabel = v; });
+        this.stopAriaDisabled = inheritAriaDisabled(this.host, (v) => { this.hostDisabled = v; });
+        this.stopAriaDescribedby = inheritAriaDescribedby(this.host, (v) => { this.hostDescribedby = v; });
+    }
+    disconnectedCallback() {
+        this.stopAria?.();
+        this.stopAria = undefined;
+        this.stopAriaDisabled?.();
+        this.stopAriaDisabled = undefined;
+        this.stopAriaDescribedby?.();
+        this.stopAriaDescribedby = undefined;
     }
-    disconnectedCallback() { this.stopAria?.(); this.stopAria = undefined; }
     btn;
     /** Moves keyboard focus to the button, or to the link when `href` is set. */
     async setFocus() {
         this.btn?.focus();
     }
-    /** True while the control swallows its activation: a busy button, or a link that is busy or
-     *  disabled. A disabled button dispatches no click of its own, so it needs nothing. */
+    /** Disabled by the element's `aria-disabled`, and not by `disabled`, which wins. */
+    get held() {
+        return this.hostDisabled && !this.disabled;
+    }
+    /** True while the control swallows its activation: a busy button, a link that is busy or
+     *  disabled, or a button held by `aria-disabled`. A disabled button dispatches no click of its
+     *  own, so it needs nothing. */
     get blocked() {
-        return this.href ? this.loading || this.disabled : this.loading && !this.disabled;
+        return this.held || (this.href ? this.loading || this.disabled : this.loading && !this.disabled);
     }
     /** The `rel` a link carries: the prop as given, else `noopener` for a `_blank` target. */
     get linkRel() {
@@ -125,10 +152,21 @@ export class SuiButton {
         e.preventDefault();
         e.stopImmediatePropagation();
     };
+    /** A script's `element.click()` lands on the element, not on the control inside, so the
+     *  control's handler never sees it. A native disabled button dispatches nothing for `click()`,
+     *  and this element swallows it the same way while it is disabled or blocked. */
+    onHostClick(e) {
+        if (e.target !== this.host || !(this.disabled || this.blocked))
+            return;
+        e.preventDefault();
+        e.stopImmediatePropagation();
+    }
     render() {
         const busy = this.loading;
         const off = this.disabled;
+        const held = this.held;
         const link = !!this.href;
+        const followable = link && !off && !this.blocked;
         const variant = VARIANTS.includes(this.variant) ? this.variant : 'outline';
         const size = SIZES.includes(this.size) ? this.size : 'md';
         const quiet = variant === 'outline' || variant === 'ghost' || variant === 'link';
@@ -138,7 +176,7 @@ export class SuiButton {
             ? h(Glyph, { glyph: circleNotch, class: "sui-btn-spin sui-btn-icon" })
             : this.icon ? h("i", { class: `${this.icon} sui-btn-icon`, "aria-hidden": "true" }) : null;
         const Control = (link ? 'a' : 'button');
-        return (h(Host, { key: 'f553cf85c901de52c44e9d09000a0b6dff2cfbf4' }, h(Control, { key: 'f55fc3360ebc60e83f2be672e5468258184d24d7', ref: (el) => (this.btn = el), class: { 'sui-btn': true, [variant]: true, [size]: true, 'tone-danger': danger, inverse, block: this.block, pill: this.pill, loading: busy && !off, disabled: link && off }, type: link ? undefined : this.type, form: link ? undefined : this.form, name: link ? undefined : this.name, value: link ? undefined : this.value, disabled: link ? undefined : off, href: link && !off ? this.href : undefined, target: link && !off ? this.target : undefined, rel: link && !off ? this.linkRel : undefined, "aria-disabled": this.blocked ? 'true' : undefined, "aria-label": this.hostLabel, "aria-busy": busy ? 'true' : 'false', onClick: this.onClick }, this.iconPos === 'end' ? null : iconEl, this.label ? h("span", { class: "sui-btn-label" }, this.label) : null, h("slot", { key: '7b386e247c64abe095155e16d7cb997f16fe6ba2' }), this.iconPos === 'end' ? iconEl : null)));
+        return (h(Host, { key: 'ecfa207238c205b83e79b0d012cba904a27b60b9' }, h(Control, { key: 'bfd2a6fb1e08f8c34f32d421965bab1135778d8f', ref: (el) => (this.btn = el), class: { 'sui-btn': true, [variant]: true, [size]: true, 'tone-danger': danger, inverse, block: this.block, pill: this.pill, loading: busy && !off && !held, disabled: (link && off) || held }, type: link ? undefined : this.type, form: link ? undefined : this.form, name: link ? undefined : this.name, value: link ? undefined : this.value, disabled: link ? undefined : off, href: followable ? this.href : undefined, target: followable ? this.target : undefined, rel: followable ? this.linkRel : undefined, role: link && !followable ? 'link' : undefined, tabIndex: link && !followable && !off ? 0 : undefined, "aria-disabled": this.blocked ? 'true' : undefined, "aria-label": this.hostLabel, "aria-describedby": this.hostDescribedby, "aria-busy": busy ? 'true' : 'false', onClick: this.onClick }, this.iconPos === 'end' ? null : iconEl, this.label ? h("span", { class: "sui-btn-label" }, this.label) : null, h("slot", { key: 'eeb7ea82feaca996f3e01bf845468e430ffa6176' }), this.iconPos === 'end' ? iconEl : null)));
     }
     static get is() { return "sui-button"; }
     static get encapsulation() { return "scoped"; }
@@ -186,7 +224,7 @@ export class SuiButton {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Re-inks the quiet roles, outline, ghost and link. Filled roles ignore it.\n\n`danger` is destructive ink for a button that deletes, removes or voids, so a row or toolbar\ncarries a destructive action without a second solid fill beside the accent; the filled `danger`\nvariant is the confirmation step's.\n\n`inverse` is for a quiet button sitting on dark chrome, an app bar or a side rail, where the\ndefault ink would read against the panel rather than on it. It paints `--ink-inverse-muted` and\nbrightens to `--ink-inverse` on hover, matching `sui-icon-button`'s tone of the same name so a\nlabelled button and an icon button agree on a brand bar."
+                    "text": "Re-inks the quiet roles, outline, ghost and link. Filled roles ignore it.\n\n`danger` is destructive ink for a button that deletes, removes or voids, so a row or toolbar\ncarries a destructive action without a second solid fill beside the accent; the filled `danger`\nvariant is the confirmation step's.\n\n`inverse` is for a quiet button sitting on dark chrome, an app bar or a side rail, where the\ndefault ink would read against the panel rather than on it. It paints `--ink-inverse-muted` and\nbrightens to `--ink-inverse` on hover, matching `sui-icon-button`'s tone of the same name so a\nlabeled button and an icon button agree on a brand bar."
                 },
                 "getter": false,
                 "setter": false,
@@ -197,15 +235,15 @@ export class SuiButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'sm' | 'md' | 'lg'",
-                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "original": "'sm' | 'md' | 'lg' | 'xl'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Control height: sm 28px, md 34px (toolbars), lg 42px (forms). Reflected."
+                    "text": "Control height: sm 28px (packed rows), md 34px (forms and toolbars), lg 42px (beside the\n42px fields of a sign-in or marketing page), xl 44px (that page's call to action, and the\nsmallest touch target). Reflected."
                 },
                 "getter": false,
                 "setter": false,
@@ -283,7 +321,7 @@ export class SuiButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Blocks clicks. Filled roles take the disabled well, an outline keeps its surface, and ghost\nand link stay bare; on navy (`tone=\"inverse\"`) the ink fades instead. A disabled link keeps\nthe look, drops its `href`, reads `aria-disabled=\"true\"` and takes no pointer events, since an\nanchor has no `disabled` attribute of its own."
+                    "text": "Blocks clicks. Filled roles take the disabled well, an outline keeps its surface, and ghost\nand link stay bare; on navy (`tone=\"inverse\"`) the ink fades instead. A disabled link keeps\nthe look, drops its `href`, reads `aria-disabled=\"true\"` and swallows a click, since an anchor\nhas no `disabled` attribute of its own. A disabled button leaves the tab order; to keep it\nthere, so a keyboard or screen reader user reaches it and the reason beside it, set\n`aria-disabled=\"true\"` on the element instead. The button then reads as disabled, takes the\nsame look and ignores a click, Enter and Space; a link drops its `href` and stays a tab stop.\nAn `aria-describedby` on the element reaches the button too, so the reason is read with it."
                 },
                 "getter": false,
                 "setter": false,
@@ -303,7 +341,7 @@ export class SuiButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Shows a spinner in place of the icon and blocks clicks. The button stays focusable while busy,\n`aria-disabled` rather than disabled, so a keyboard user keeps their place and a modal trap\naround it holds; a click, Enter or Space does nothing until it clears. A link behaves the\nsame and keeps its `href`. Reflected."
+                    "text": "Shows a spinner in place of the icon and blocks clicks. The button stays focusable while busy,\n`aria-disabled` rather than disabled, so a keyboard user keeps their place and a modal trap\naround it holds; a click, Enter or Space does nothing until it clears. A link behaves the\nsame: it drops its `href` until the work is done and stays a tab stop, so nothing opens\nit, a new tab included. Reflected."
                 },
                 "getter": false,
                 "setter": false,
@@ -489,7 +527,9 @@ export class SuiButton {
     }
     static get states() {
         return {
-            "hostLabel": {}
+            "hostLabel": {},
+            "hostDisabled": {},
+            "hostDescribedby": {}
         };
     }
     static get methods() {
@@ -514,4 +554,13 @@ export class SuiButton {
         };
     }
     static get elementRef() { return "host"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "onHostClick",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }];
+    }
 }

package/dist/collection/components/sui-button-group/sui-button-group.js

@@ -176,7 +176,7 @@ export class SuiButtonGroup {
                     "references": {
                         "SuiButtonGroupItem": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-button-group/sui-button-group.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-button-group/sui-button-group.tsx",
                             "id": "src/components/sui-button-group/sui-button-group.tsx::SuiButtonGroupItem"
                         }
                     }
@@ -330,7 +330,7 @@ export class SuiButtonGroup {
                     "references": {
                         "SuiButtonGroupItem": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-button-group/sui-button-group.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-button-group/sui-button-group.tsx",
                             "id": "src/components/sui-button-group/sui-button-group.tsx::SuiButtonGroupItem"
                         }
                     }

package/dist/collection/components/sui-calendar/sui-calendar.js

@@ -510,7 +510,7 @@ export class SuiCalendar {
         }));
         return own ? isoDate(own) : days[0] || '';
     }
-    /** The stop as the grid can honour it: a cell, chip or link that is drawn, else the anchor's cell. */
+    /** The stop as the grid can honor it: a cell, chip or link that is drawn, else the anchor's cell. */
     effectiveStop() {
         const s = this.stop;
         const days = this.visibleDates();
@@ -1307,10 +1307,10 @@ export class SuiCalendar {
         this.moreEls = {};
         this.panelChipEls = [];
         this.agendaEls = new Map();
-        return (h(Host, { key: '08394835cb52c1fc45e28668cab07e6b3c9086a2' }, h("div", { key: 'd4264eaca921bbfaa5a57c7c7f7365759ac188de', class: { cal: true, week, loading: this.loading } }, !this.hideToolbar ? this.toolbarRow(period) : h("div", { class: "sr-only", "aria-live": "polite" }, period), !this.loading && !hasAny ? h("div", { class: "empty" }, localeText(undefined, 'calendar.empty', this.emptyMessage, 'Nothing here yet.')) : null, agenda ? this.agenda(days, this.ariaName || period) : (h("div", { class: { grid: true, week, tight: this.tight() }, role: "grid", ref: (el) => (this.gridEl = el), "aria-label": this.ariaName || period, "aria-busy": this.loading ? 'true' : null, style: { gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` } }, h("div", { class: "row", role: "row" }, (rows[0] || []).map((d) => {
+        return (h(Host, { key: '4531868f76de93ba84aac61b9dc7490f07a458e9' }, h("div", { key: '6746ed268045a4612d00436d0264b2cdbac2657f', class: { cal: true, week, loading: this.loading } }, !this.hideToolbar ? this.toolbarRow(period) : h("div", { class: "sr-only", "aria-live": "polite" }, period), !this.loading && !hasAny ? h("div", { class: "empty" }, localeText(undefined, 'calendar.empty', this.emptyMessage, 'Nothing here yet.')) : null, agenda ? this.agenda(days, this.ariaName || period) : (h("div", { class: { grid: true, week, tight: this.tight() }, role: "grid", ref: (el) => (this.gridEl = el), "aria-label": this.ariaName || period, "aria-busy": this.loading ? 'true' : null, style: { gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` } }, h("div", { class: "row", role: "row" }, (rows[0] || []).map((d) => {
             const isToday = week && isoDate(d) === todayIso;
             return (h("div", { key: `h${d.getDay()}`, class: { dow: true, today: isToday, weekend: this.isWeekend(d) }, role: "columnheader", "aria-label": week ? this.dayName(isoDate(d)) : longNames[d.getDay()] }, h("span", { class: "dow-name" }, heads[d.getDay()]), week ? h("span", { class: "dow-num" }, d.getDate()) : null));
-        })), rows.map((r, ri) => (h("div", { key: `r${ri}`, class: "row", role: "row" }, r.map((d, ci) => this.cell(d, ci, days)))))))), this.moreOpen || this.moreClosing ? this.panel(days) : null, h("div", { key: '82a55312e4b8738bb5e851ed09dc550294de7e59', class: "sr-only", id: `${this.fieldId}-hint` }, this.text('calendar.hint', 'Press Space to lift an item, the arrow keys to move it to another day, Space to drop it and Escape to cancel.')), h("div", { key: 'c2d0e54538ca3b0a72dc750cb35a63d9c9d7df59', class: "sr-only", "aria-live": "assertive", "aria-atomic": "true" }, this.live)));
+        })), rows.map((r, ri) => (h("div", { key: `r${ri}`, class: "row", role: "row" }, r.map((d, ci) => this.cell(d, ci, days)))))))), this.moreOpen || this.moreClosing ? this.panel(days) : null, h("div", { key: '540e0dbed1cf9a91e6dcfc4aeb693dc16a045099', class: "sr-only", id: `${this.fieldId}-hint` }, this.text('calendar.hint', 'Press Space to lift an item, the arrow keys to move it to another day, Space to drop it and Escape to cancel.')), h("div", { key: '1fb4352d79624432ea939f297fc4f85e6349defe', class: "sr-only", "aria-live": "assertive", "aria-atomic": "true" }, this.live)));
     }
     static get is() { return "sui-calendar"; }
     static get encapsulation() { return "scoped"; }
@@ -1335,7 +1335,7 @@ export class SuiCalendar {
                     "references": {
                         "SuiCalendarView": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-calendar/sui-calendar.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-calendar/sui-calendar.tsx",
                             "id": "src/components/sui-calendar/sui-calendar.tsx::SuiCalendarView"
                         }
                     }
@@ -1380,7 +1380,7 @@ export class SuiCalendar {
                     "references": {
                         "SuiCalendarEvent": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-calendar/sui-calendar.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-calendar/sui-calendar.tsx",
                             "id": "src/components/sui-calendar/sui-calendar.tsx::SuiCalendarEvent"
                         }
                     }
@@ -1423,7 +1423,7 @@ export class SuiCalendar {
                     "references": {
                         "SuiCalendarChipCap": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-calendar/sui-calendar.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-calendar/sui-calendar.tsx",
                             "id": "src/components/sui-calendar/sui-calendar.tsx::SuiCalendarChipCap"
                         }
                     }
@@ -1548,12 +1548,12 @@ export class SuiCalendar {
                     "references": {
                         "SuiCalendarEvent": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-calendar/sui-calendar.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-calendar/sui-calendar.tsx",
                             "id": "src/components/sui-calendar/sui-calendar.tsx::SuiCalendarEvent"
                         },
                         "SuiCalendarChipContext": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-calendar/sui-calendar.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-calendar/sui-calendar.tsx",
                             "id": "src/components/sui-calendar/sui-calendar.tsx::SuiCalendarChipContext"
                         },
                         "SuiRenderResult": {
@@ -1582,17 +1582,17 @@ export class SuiCalendar {
                     "references": {
                         "SuiCalendarEvent": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-calendar/sui-calendar.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-calendar/sui-calendar.tsx",
                             "id": "src/components/sui-calendar/sui-calendar.tsx::SuiCalendarEvent"
                         },
                         "SuiCalendarAgendaContext": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-calendar/sui-calendar.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-calendar/sui-calendar.tsx",
                             "id": "src/components/sui-calendar/sui-calendar.tsx::SuiCalendarAgendaContext"
                         },
                         "SuiCalendarAgendaParts": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-calendar/sui-calendar.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-calendar/sui-calendar.tsx",
                             "id": "src/components/sui-calendar/sui-calendar.tsx::SuiCalendarAgendaParts"
                         },
                         "SuiRenderResult": {
@@ -1725,7 +1725,7 @@ export class SuiCalendar {
                     "references": {
                         "SuiCalendarMoveDetail": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-calendar/sui-calendar.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-calendar/sui-calendar.tsx",
                             "id": "src/components/sui-calendar/sui-calendar.tsx::SuiCalendarMoveDetail"
                         }
                     }
@@ -1746,7 +1746,7 @@ export class SuiCalendar {
                     "references": {
                         "SuiCalendarDayDetail": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-calendar/sui-calendar.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-calendar/sui-calendar.tsx",
                             "id": "src/components/sui-calendar/sui-calendar.tsx::SuiCalendarDayDetail"
                         }
                     }
@@ -1767,7 +1767,7 @@ export class SuiCalendar {
                     "references": {
                         "SuiCalendarEventClickDetail": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-calendar/sui-calendar.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-calendar/sui-calendar.tsx",
                             "id": "src/components/sui-calendar/sui-calendar.tsx::SuiCalendarEventClickDetail"
                         }
                     }
@@ -1803,7 +1803,7 @@ export class SuiCalendar {
                     "references": {
                         "SuiCalendarView": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-calendar/sui-calendar.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-calendar/sui-calendar.tsx",
                             "id": "src/components/sui-calendar/sui-calendar.tsx::SuiCalendarView"
                         }
                     }
@@ -1824,7 +1824,7 @@ export class SuiCalendar {
                     "references": {
                         "SuiCalendarOverflowDetail": {
                             "location": "local",
-                            "path": "/workspace/packages/core/src/components/sui-calendar/sui-calendar.tsx",
+                            "path": "/agent/repos/shineui/packages/core/src/components/sui-calendar/sui-calendar.tsx",
                             "id": "src/components/sui-calendar/sui-calendar.tsx::SuiCalendarOverflowDetail"
                         }
                     }

package/dist/collection/components/sui-card/sui-card.js

@@ -59,7 +59,7 @@ export class SuiCard {
     }
     render() {
         const hasHead = !!this.heading || this.hasHeaderEnd;
-        return (h(Host, { key: '333fcb2892e38bd7a4f612b687f1b2ebd526e5cc', class: { hoverable: this.hoverable } }, hasHead ? (h("div", { class: "head" }, h("div", { class: "titles" }, this.heading ? h("div", { class: "heading" }, this.heading) : null, this.subtitle ? h("div", { class: "subtitle" }, this.subtitle) : null), h("slot", { name: "header-end" }))) : null, h("div", { key: 'e1423efe230ca005c2b0d78e4dec7a9bc4bd8ae1', class: { body: true, padded: !this.flush, 'under-head': hasHead } }, h("slot", { key: '0ca6ace6ef256e704661f7ddb3a7de2b76d1d290' })), h("div", { key: '74172038cb2ce81ea8313dc1fd6b2bbcbcc297c6', class: { foot: true, has: this.hasFooter } }, h("slot", { key: 'f83f33f0cb88f878f4fa6238bf26023d34cd5b44', name: "footer" }))));
+        return (h(Host, { key: '62fa41d2e3f0f92242a878aa7d3bcc9deac44a6a', class: { hoverable: this.hoverable } }, hasHead ? (h("div", { class: "head" }, h("div", { class: "titles" }, this.heading ? h("div", { class: "heading" }, this.heading) : null, this.subtitle ? h("div", { class: "subtitle" }, this.subtitle) : null), h("slot", { name: "header-end" }))) : null, h("div", { key: 'b4ffc3e772106e9d2099ac6b3c5606d9669610e4', class: { body: true, padded: !this.flush, 'under-head': hasHead } }, h("slot", { key: '0604224a6e6f891dde843b0c0e108de13c36f71a' })), h("div", { key: '38d4b8936434777349b15727bd45e259d426cef8', class: { foot: true, has: this.hasFooter } }, h("slot", { key: 'c64fb4bb411b49ea46b8c466cfe1b704340c4a30', name: "footer" }))));
     }
     static get is() { return "sui-card"; }
     static get encapsulation() { return "scoped"; }