@shineuix/core 1.0.0 → 1.0.1

package/dist/cjs/sui-auto-complete.cjs.entry.js

@@ -1,23 +1,23 @@
 'use strict';
 
 var index = require('./index-BtWzlhN3.js');
-var fieldShell = require('./field-shell-XLDTgSCW.js');
-var popupRows = require('./popup-rows-Cssh7aI9.js');
-var glyphs = require('./glyphs-8uuUhG6s.js');
-var aria = require('./aria-DXFt0vvU.js');
+var fieldShell = require('./field-shell-BJ_XxyIs.js');
+var popupRows = require('./popup-rows--Tt1lQhB.js');
+var glyphs = require('./glyphs-BNG4Wolq.js');
+var aria = require('./aria-DsLSiGlA.js');
 var id = require('./id-Ca7UTKW6.js');
 var formControl = require('./form-control-CvMyyCaa.js');
 var formDisabled = require('./form-disabled-wss8T3bH.js');
 var formMulti = require('./form-multi-BGykpOcS.js');
 var options = require('./options-BN7er6uK.js');
-var overlay = require('./overlay-DcMtiB1L.js');
-var popupSurface = require('./popup-surface-BOH2mgOi.js');
+var overlay = require('./overlay-CsoWlGY8.js');
+var popupSurface = require('./popup-surface-Db-7bDoA.js');
 var virtual = require('./virtual-Dk8q_Rrq.js');
 var locale = require('./locale-EVD23NSt.js');
 var keyNav = require('./key-nav-D1FeUqKe.js');
 require('./direction-BaE_rqNY.js');
 require('./focus-trap-CcyiWkvv.js');
-require('./motion-BaUBY31j.js');
+require('./motion-D8mcyZVH.js');
 
 const suiAutoCompleteCss = () => `.sc-sui-auto-complete-h{display:block;font-family:var(--font-sans)}.wrap.sc-sui-auto-complete{position:relative}.wrap.inline.sc-sui-auto-complete{display:flex;align-items:flex-start}.wrap.open.sc-sui-auto-complete .sui-inline.sc-sui-auto-complete .chev.sc-sui-auto-complete .sui-glyph.sc-sui-auto-complete{transform:rotate(180deg)}.sui-popup-panel.sc-sui-auto-complete .empty.sc-sui-auto-complete{padding:9px 10px}.sui-popup-option.sc-sui-auto-complete strong.sc-sui-auto-complete{font-weight:700}.side.sc-sui-auto-complete{position:absolute;top:0;bottom:0;inset-inline-end:6px;display:flex;align-items:center;gap:2px}.side-btn.sc-sui-auto-complete{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:none;border-radius:4px;background:transparent;color:var(--ink-faint);font-size:11px;cursor:pointer;transition:color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out)}.side-btn.sc-sui-auto-complete:hover{color:var(--ink);background:var(--surface-hover)}.side-btn.sc-sui-auto-complete:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px;box-shadow:var(--focus-shadow)}.side-btn.sc-sui-auto-complete:disabled{color:var(--ink-placeholder);background:transparent;cursor:not-allowed}.side-btn.drop.sc-sui-auto-complete .chev.sc-sui-auto-complete{font-size:10px;transition:transform var(--duration-fast) var(--ease-out)}.side-btn.drop.open.sc-sui-auto-complete .chev.sc-sui-auto-complete{transform:rotate(180deg)}.side-spin.sc-sui-auto-complete{width:22px;text-align:center;font-size:11px;color:var(--ink-faint)}.wrap.sc-sui-auto-complete .sui-input.side-1.sc-sui-auto-complete{padding-inline-end:34px}.wrap.sc-sui-auto-complete .sui-input.side-2.sc-sui-auto-complete{padding-inline-end:58px}.wrap.sc-sui-auto-complete .sui-input.sui-chip-box.side-1.sc-sui-auto-complete{padding-inline-end:34px}.wrap.sc-sui-auto-complete .sui-input.sui-chip-box.side-2.sc-sui-auto-complete{padding-inline-end:58px}.sui-inline.multi.sc-sui-auto-complete .flow.sc-sui-auto-complete{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px}.sui-inline.multi.sc-sui-auto-complete .fit.sc-sui-auto-complete{flex:1 0 auto;min-width:2ch}.sr-status.sc-sui-auto-complete{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}`;
 
@@ -165,7 +165,7 @@ const SuiAutoComplete = class {
     variant = 'default';
     /**
      * Ink for the quiet variant on the brand chrome. `inverse` takes the inverse inks, the inverse hover
-     * wash and the inverse focus colour, as `sui-button`'s tone of the same name does, so the value
+     * wash and the inverse focus color, as `sui-button`'s tone of the same name does, so the value
      * reads on a `tone="brand"` toolbar. Opening the field shows its shell in the card's own inks. The
      * default variant ignores it.
      */
@@ -913,7 +913,7 @@ const SuiAutoComplete = class {
                 ? { entry: true }
                 : { 'sui-input': true, 'sui-frame': true, [size]: true, invalid, [`side-${side}`]: side > 0 };
         const placeholder = multi && vals.length ? undefined : this.placeholder;
-        const field = (index.h("input", { key: '3a24794a6e9bd84af5f91ae76deef1c6f954fe9c', ref: (el) => (this.input = el), id: this.fieldId, class: fieldClass, type: "text", size: inline ? 1 : undefined, role: "combobox", autocomplete: "off", value: q, placeholder: placeholder, disabled: this.isDisabled, readOnly: this.readOnly, required: !multi && this.required, "aria-required": multi && this.required ? 'true' : null, "aria-label": inline ? this.label || this.hostLabel : this.label ? undefined : this.hostLabel, "aria-labelledby": this.label ? undefined : this.hostLabelledby, "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `${this.fieldId}-list`, "aria-activedescendant": activeId, "aria-invalid": invalid ? 'true' : null, "aria-busy": this.loading ? 'true' : null, "aria-describedby": fieldShell.describedBy(this.fieldId, this.help, this.error), onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, onChange: () => {
+        const field = (index.h("input", { key: 'af9072e76d9503fc4db22b2bad1942e1a7bfffb7', ref: (el) => (this.input = el), id: this.fieldId, class: fieldClass, type: "text", size: inline ? 1 : undefined, role: "combobox", autocomplete: "off", value: q, placeholder: placeholder, disabled: this.isDisabled, readOnly: this.readOnly, required: !multi && this.required, "aria-required": multi && this.required ? 'true' : null, "aria-label": inline ? this.label || this.hostLabel : this.label ? undefined : this.hostLabel, "aria-labelledby": this.label ? undefined : this.hostLabelledby, "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `${this.fieldId}-list`, "aria-activedescendant": activeId, "aria-invalid": invalid ? 'true' : null, "aria-busy": this.loading ? 'true' : null, "aria-describedby": fieldShell.describedBy(this.fieldId, this.help, this.error), onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, onChange: () => {
                 if (!multi)
                     this.commit();
             }, onKeyDown: this.onKeyDown }));
@@ -943,7 +943,7 @@ const SuiAutoComplete = class {
             panel,
             sideButtons,
         ] : [field, panel, sideButtons];
-        return (index.h(fieldShell.FieldShell, { key: '2ee44b829b6a23ad1df3a935bad104a8981dc4a4', label: inline ? undefined : this.label, required: this.required, help: this.help, error: this.error, htmlFor: this.fieldId, descId: this.fieldId }, index.h("div", { key: '47978a0f3f487ed0c9ae007ae0e11b28c3b9025b', class: { wrap: true, inline, multiple: multi, open: this.open } }, body, multi ? index.h("span", { class: "sr-status", role: "status", "aria-live": "polite" }, this.announce) : null, index.h(popupRows.PopupStatus, { key: '39f74c834bf8ec93d093926ca352892082e184db', message: !this.open ? '' : this.loading ? loadingText : list.length === 0 ? emptyText : '' }))));
+        return (index.h(fieldShell.FieldShell, { key: '8a6a9faa1b534654a6bf887115e193d774b37ba6', label: inline ? undefined : this.label, required: this.required, help: this.help, error: this.error, htmlFor: this.fieldId, descId: this.fieldId }, index.h("div", { key: '11b9fda4a7af2ef5a407740b260b0b1b7de10971', class: { wrap: true, inline, multiple: multi, open: this.open } }, body, multi ? index.h("span", { class: "sr-status", role: "status", "aria-live": "polite" }, this.announce) : null, index.h(popupRows.PopupStatus, { key: '6d615fb28138f2711f34d3636efebba6c2ba01d1', message: !this.open ? '' : this.loading ? loadingText : list.length === 0 ? emptyText : '' }))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

package/dist/cjs/sui-avatar.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-BtWzlhN3.js');
-var format = require('./format-BOushIZn.js');
+var format = require('./format-C_36FFqb.js');
 require('./locale-EVD23NSt.js');
 
 const suiAvatarCss = () => `.sc-sui-avatar-h{position:relative;display:inline-flex;flex-shrink:0;vertical-align:middle;font-family:var(--font-sans);line-height:0}.sui-avatar.sc-sui-avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;overflow:hidden;border-radius:50%;background:var(--sui-avatar-bg, var(--brand));color:var(--sui-avatar-ink, var(--brand-contrast));font-family:var(--font-sans);font-weight:720;line-height:1;user-select:none}.sui-avatar.square.sc-sui-avatar{border-radius:var(--radius-md)}.sui-avatar.accent.sc-sui-avatar{background:var(--accent);color:var(--accent-contrast)}.sui-avatar.img.sc-sui-avatar{background:var(--surface-sunken)}.sui-avatar.xs.sc-sui-avatar{width:22px;height:22px;font-size:8px}.sui-avatar.sm.sc-sui-avatar{width:26px;height:26px;font-size:9px}.sui-avatar.md.sc-sui-avatar{width:32px;height:32px;font-size:12px}.sui-avatar.lg.sc-sui-avatar{width:40px;height:40px;font-size:14px}.sui-avatar.xl.sc-sui-avatar{width:56px;height:56px;font-size:20px}.sui-avatar.sc-sui-avatar img.sc-sui-avatar{width:100%;height:100%;object-fit:cover;display:block}.badge.sc-sui-avatar{position:absolute;inset-inline-end:-2px;bottom:-2px;box-sizing:border-box;width:14px;height:14px;border-radius:50%;font-size:8px;line-height:1;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--surface)}.badge.xs.sc-sui-avatar,.badge.sm.sc-sui-avatar,.badge.md.sc-sui-avatar{inset-inline-end:-3px;bottom:-3px}.badge.xs.sc-sui-avatar{width:8px;height:8px;font-size:5px}.badge.sm.sc-sui-avatar{width:10px;height:10px;font-size:6px}.badge.md.sc-sui-avatar{width:12px;height:12px;font-size:7px}.badge.neutral.sc-sui-avatar{background:var(--status-neutral-bg);color:var(--status-neutral-ink);box-shadow:inset 0 0 0 1px var(--status-neutral-border), 0 0 0 2px var(--surface)}.badge.brand.sc-sui-avatar{background:var(--brand);color:var(--brand-contrast)}.badge.accent.sc-sui-avatar{background:var(--accent);color:var(--accent-contrast)}.badge.positive.sc-sui-avatar{background:var(--status-positive-bg);color:var(--status-positive-ink)}.badge.info.sc-sui-avatar{background:var(--status-info-bg);color:var(--status-info-ink)}.badge.attention.sc-sui-avatar{background:var(--status-attention-bg);color:var(--status-attention-ink)}.badge.critical.sc-sui-avatar{background:var(--status-critical-bg);color:var(--status-critical-ink);box-shadow:inset 0 0 0 1px var(--danger-fill-edge), 0 0 0 2px var(--surface)}.badge.xs.sc-sui-avatar i.sc-sui-avatar,.badge.sm.sc-sui-avatar i.sc-sui-avatar{display:none}.badge.xs.neutral.sc-sui-avatar,.badge.sm.neutral.sc-sui-avatar{background:var(--status-neutral-ink);box-shadow:0 0 0 2px var(--surface)}.badge.xs.positive.sc-sui-avatar,.badge.sm.positive.sc-sui-avatar{background:var(--status-positive-accent)}.badge.xs.info.sc-sui-avatar,.badge.sm.info.sc-sui-avatar{background:var(--status-info-accent)}.badge.xs.attention.sc-sui-avatar,.badge.sm.attention.sc-sui-avatar{background:var(--status-attention-accent)}@media (forced-colors: active){.sui-avatar.sc-sui-avatar{border:1px solid CanvasText}.badge.sc-sui-avatar{border:1px solid CanvasText}.badge.xs.sc-sui-avatar,.badge.sm.sc-sui-avatar{forced-color-adjust:none;background:CanvasText;border-color:Canvas}}`;

package/dist/cjs/sui-block-ui.cjs.entry.js

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

package/dist/cjs/sui-board.cjs.entry.js

@@ -2,13 +2,13 @@
 
 var index = require('./index-BtWzlhN3.js');
 var id = require('./id-Ca7UTKW6.js');
-var format = require('./format-BOushIZn.js');
+var format = require('./format-C_36FFqb.js');
 var direction = require('./direction-BaE_rqNY.js');
 var locale = require('./locale-EVD23NSt.js');
-var aria = require('./aria-DXFt0vvU.js');
+var aria = require('./aria-DsLSiGlA.js');
 var renderContent = require('./render-content-Bij4diic.js');
 var formControl = require('./form-control-CvMyyCaa.js');
-var glyphs = require('./glyphs-8uuUhG6s.js');
+var glyphs = require('./glyphs-BNG4Wolq.js');
 
 const suiBoardCss = () => `.sc-sui-board-h{display:block;min-width:0;box-sizing:border-box;position:relative;font-family:var(--font-sans);color:var(--ink)}.board.sc-sui-board{display:grid;grid-auto-flow:column;gap:12px;align-items:stretch;height:100%;box-sizing:border-box;overflow-x:auto;overflow-y:hidden;padding-bottom:2px}.col.sc-sui-board{display:flex;flex-direction:column;min-width:0;min-height:0;box-sizing:border-box;background:var(--surface-sunken);border:1px solid var(--border);border-radius:var(--radius-lg);transition:border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out)}.col.collapsed.sc-sui-board{align-items:center;gap:8px;padding:6px 0 10px;overflow:hidden}.col.collapsed.over.sc-sui-board{border-color:var(--accent);border-style:dashed;background:var(--accent-soft)}.col-head.sc-sui-board{display:flex;align-items:center;gap:8px;padding:9px 6px 5px;padding-inline-start:12px;flex-shrink:0}.col-head.sc-sui-board sui-badge.sc-sui-board{flex-shrink:0;display:inline-flex}.col-title.sc-sui-board{flex:1;min-width:0;font-size:12.5px;font-weight:650;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strip-title.sc-sui-board{writing-mode:vertical-rl;font-size:12.5px;font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:0}.col-count.sc-sui-board{position:relative;display:inline-flex;align-items:center;gap:4px;height:18px;padding:0 7px;box-sizing:border-box;border-radius:var(--radius-pill);background:var(--surface);border:1px solid var(--border);font-size:11px;font-weight:550;color:var(--ink-muted);font-feature-settings:'tnum';white-space:nowrap;flex-shrink:0}.col-count.over.sc-sui-board{background:var(--status-attention-bg);border-color:transparent;color:var(--status-attention-ink)}.col-count.sc-sui-board .sui-glyph.sc-sui-board{font-size:10px}.sc-sui-board-h:dir(rtl) .col-toggle.sc-sui-board .sui-glyph.sc-sui-board{transform:scaleX(-1)}.col-toggle.sc-sui-board{box-sizing:border-box;width:24px;height:24px;padding:0;margin:0;flex-shrink:0;border:none;border-radius:var(--radius-md);background:transparent;color:var(--ink-muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-sans);transition:background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out)}.col-toggle.sc-sui-board .sui-glyph.sc-sui-board{font-size:11px}.col-toggle.sc-sui-board:hover{background:var(--surface-hover);color:var(--ink)}.col-toggle.sc-sui-board:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px;box-shadow:var(--focus-shadow)}.col-body.sc-sui-board{display:flex;flex-direction:column;padding:3px 8px 8px;box-sizing:border-box;overflow-y:auto;min-height:56px;flex:1}.col-list.sc-sui-board{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;flex-shrink:0}.card.sc-sui-board{box-sizing:border-box;display:flex;flex-direction:column;gap:4px;padding:10px 12px;flex-shrink:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);cursor:grab;user-select:none;-webkit-user-select:none;opacity:1;box-shadow:none;transition:border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out)}.card.static.sc-sui-board{cursor:default}.card.sc-sui-board:hover{border-color:var(--border-strong)}.card.sc-sui-board:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px;box-shadow:var(--focus-shadow)}.card.lifted.sc-sui-board{border-color:var(--accent);box-shadow:var(--shadow-raised);position:relative;z-index:1}.card.lifted.sc-sui-board:focus-visible{box-shadow:var(--shadow-raised), var(--focus-shadow)}.card.dragging.sc-sui-board{opacity:0.5;border-style:dashed;border-color:var(--ink-muted);box-shadow:none}.card.ghost.sc-sui-board{cursor:default;gap:8px}.card-title.sc-sui-board{font-size:13px;font-weight:550;line-height:1.35;color:var(--ink);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-sub.sc-sui-board{font-size:12px;line-height:1.4;color:var(--ink-muted)}.card-foot.sc-sui-board{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px;min-width:0}.card-meta.sc-sui-board{font-size:11.5px;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.custom.sc-sui-board{min-width:0}.dropline.sc-sui-board{height:2px;border-radius:1px;background:var(--accent-ink);margin:-5px 4px;flex-shrink:0;box-shadow:0 0 0 1px color-mix(in srgb, var(--accent-ink) 25%, transparent)}[variant='plain'].sc-sui-board-h .col.sc-sui-board{background:transparent;border-color:transparent}[variant='plain'].sc-sui-board-h .col.collapsed.over.sc-sui-board{border-color:var(--accent);background:var(--accent-soft)}[variant='plain'].sc-sui-board-h .col-head.sc-sui-board{padding-inline-start:8px;padding-bottom:8px;box-shadow:inset 0 -1px 0 var(--border)}[variant='plain'].sc-sui-board-h .col-body.sc-sui-board{padding:8px 4px}[variant='plain'].sc-sui-board-h .col-toggle.sc-sui-board{opacity:0;transition:opacity var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out)}[variant='plain'].sc-sui-board-h .col-head.sc-sui-board:hover .col-toggle.sc-sui-board,[variant='plain'].sc-sui-board-h .col-toggle.sc-sui-board:focus-visible,[variant='plain'].sc-sui-board-h .col.collapsed.sc-sui-board .col-toggle.sc-sui-board{opacity:1}[variant='plain'].sc-sui-board-h .col-count.sc-sui-board{background:transparent;border-color:transparent;padding:0 2px}[variant='plain'].sc-sui-board-h .col-count.over.sc-sui-board{background:var(--status-attention-bg)}[density='compact'].sc-sui-board-h .col-list.sc-sui-board{gap:6px}[density='compact'].sc-sui-board-h .card.sc-sui-board{padding:8px 10px;gap:2px}[density='compact'].sc-sui-board-h .card-foot.sc-sui-board{margin-top:0}[density='comfortable'].sc-sui-board-h .col-list.sc-sui-board{gap:10px}[density='comfortable'].sc-sui-board-h .card.sc-sui-board{padding:14px;gap:6px}[density='compact'].sc-sui-board-h .dropline.sc-sui-board{margin-block:-4px}[density='comfortable'].sc-sui-board-h .dropline.sc-sui-board{margin-block:-6px}.empty.sc-sui-board,.drop-here.sc-sui-board{box-sizing:border-box;padding:14px 10px;font-size:12px;text-align:center;border-radius:var(--radius-md);flex-shrink:0}.empty.sc-sui-board{min-height:calc(1lh + 30px);color:var(--ink-muted);border:1px dashed var(--border-strong)}.drop-here.sc-sui-board{color:var(--accent-ink);background:var(--surface);border:1.5px dashed var(--accent);transition:background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out)}.drop-here.over.sc-sui-board{background:var(--accent-soft);color:var(--accent-soft-ink)}.sr-only.sc-sui-board{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}@media (forced-colors: active){.card.lifted.sc-sui-board{border-style:dashed;border-color:Highlight}.dropline.sc-sui-board{background:Highlight}[variant='plain'].sc-sui-board-h .col.sc-sui-board{border-color:Canvas}[variant='plain'].sc-sui-board-h .col-head.sc-sui-board{border-bottom:1px solid CanvasText}[variant='plain'].sc-sui-board-h .col-count.sc-sui-board{border-color:Canvas}[variant='plain'].sc-sui-board-h .col-count.over.sc-sui-board{border-color:CanvasText}.drop-here.sc-sui-board{border-color:Highlight}.drop-here.over.sc-sui-board{forced-color-adjust:none;background:Highlight;color:HighlightText}.col.collapsed.over.sc-sui-board,[variant='plain'].sc-sui-board-h .col.collapsed.over.sc-sui-board{border:2px solid Highlight}}`;
 

package/dist/cjs/sui-bottom-nav.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-BtWzlhN3.js');
 var formControl = require('./form-control-CvMyyCaa.js');
-var aria = require('./aria-DXFt0vvU.js');
+var aria = require('./aria-DsLSiGlA.js');
 var locale = require('./locale-EVD23NSt.js');
 
 const suiBottomNavCss = () => `.sc-sui-bottom-nav-h{display:block;font-family:var(--font-sans)}.bar.sc-sui-bottom-nav{display:flex;background:var(--surface-navy);border-radius:var(--radius-lg);overflow:hidden;--focus-ring:var(--ink-inverse);--focus-shadow:none}.bar.fixed.sc-sui-bottom-nav{position:fixed;bottom:0;inset-inline:0;z-index:var(--z-overlay);border-radius:var(--radius-lg) var(--radius-lg) 0 0}.tab.sc-sui-bottom-nav{position:relative;flex:1;min-height:56px;padding:8px 4px 7px;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:none;background:transparent;color:var(--ink-inverse-muted);font-family:var(--font-sans);cursor:pointer;text-decoration:none;line-height:normal;transition:background var(--duration-fast) var(--ease-out)}a.tab.sc-sui-bottom-nav,a.tab.sc-sui-bottom-nav:hover,a.tab.sc-sui-bottom-nav:visited{color:var(--ink-inverse-muted);text-decoration:none}a.tab.on.sc-sui-bottom-nav,a.tab.on.sc-sui-bottom-nav:hover,a.tab.on.sc-sui-bottom-nav:visited{color:var(--ink-inverse)}.tab.sc-sui-bottom-nav:hover{background:color-mix(in srgb, var(--ink-inverse) 8%, transparent)}.tab.on.sc-sui-bottom-nav{background:color-mix(in srgb, var(--ink-inverse) 14%, transparent);color:var(--ink-inverse)}.tab.sc-sui-bottom-nav:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}.tab[disabled].sc-sui-bottom-nav{color:var(--ink-inverse-faint);cursor:not-allowed}.tab[disabled].sc-sui-bottom-nav:hover{background:transparent}.indicator.sc-sui-bottom-nav{position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:3px;border-radius:0 0 3px 3px;background:transparent;transition:background var(--duration-fast) var(--ease-out)}.tab.on.sc-sui-bottom-nav .indicator.sc-sui-bottom-nav{background:var(--accent)}.glyph.sc-sui-bottom-nav{position:relative;display:inline-flex}.icon.sc-sui-bottom-nav{font-size:16px;color:inherit}.tab.on.sc-sui-bottom-nav .icon.sc-sui-bottom-nav{color:var(--accent)}.badge.sc-sui-bottom-nav{position:absolute;top:-6px;inset-inline-end:-10px;min-width:15px;height:15px;padding:0 4px;box-sizing:border-box;border-radius:8px;background:var(--accent);color:var(--accent-contrast);font-size:9px;font-weight:720;font-feature-settings:'tnum';display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--surface-navy)}.label.sc-sui-bottom-nav{font-size:10.5px;font-weight:550;letter-spacing:0.01em}.tab.on.sc-sui-bottom-nav .label.sc-sui-bottom-nav{font-weight:650}@media (forced-colors: active){.bar.sc-sui-bottom-nav{border:1px solid CanvasText}.tab.on.sc-sui-bottom-nav{forced-color-adjust:none;background:Highlight;color:HighlightText}a.tab.on.sc-sui-bottom-nav,a.tab.on.sc-sui-bottom-nav:hover,a.tab.on.sc-sui-bottom-nav:visited{color:HighlightText}.tab.sc-sui-bottom-nav:focus-visible{outline-color:CanvasText;box-shadow:none}.tab.on.sc-sui-bottom-nav .indicator.sc-sui-bottom-nav{background:HighlightText}.tab.on.sc-sui-bottom-nav .icon.sc-sui-bottom-nav{color:HighlightText}.badge.sc-sui-bottom-nav{background:Canvas;color:CanvasText;border:1px solid CanvasText;box-shadow:none}}`;

package/dist/cjs/sui-breadcrumb.cjs.entry.js

@@ -2,9 +2,9 @@
 
 var index = require('./index-BtWzlhN3.js');
 var formControl = require('./form-control-CvMyyCaa.js');
-var aria = require('./aria-DXFt0vvU.js');
+var aria = require('./aria-DsLSiGlA.js');
 var locale = require('./locale-EVD23NSt.js');
-var glyphs = require('./glyphs-8uuUhG6s.js');
+var glyphs = require('./glyphs-BNG4Wolq.js');
 
 const suiBreadcrumbCss = () => `.sc-sui-breadcrumb-h{display:block;font-family:var(--font-sans)}.trail.sc-sui-breadcrumb{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0;padding:0;list-style:none}.step.sc-sui-breadcrumb{display:inline-flex;align-items:center;gap:7px}.sep.sc-sui-breadcrumb{font-size:8px;color:var(--border-strong)}.sc-sui-breadcrumb-h:dir(rtl) .sep.sc-sui-breadcrumb{transform:scaleX(-1)}.crumb.sc-sui-breadcrumb{display:inline-flex;align-items:center;gap:6px;padding:2px 4px;margin:-2px -4px;border:none;background:transparent;font-family:var(--font-sans);font-size:12.5px;font-weight:550;line-height:normal;color:var(--ink-muted);cursor:pointer;text-decoration:none;border-radius:var(--radius-xs);transition:color var(--duration-fast) var(--ease-out)}a.crumb.sc-sui-breadcrumb:visited{color:var(--ink-muted)}.crumb.sc-sui-breadcrumb:hover:not(.last){color:var(--link);text-decoration:underline}.crumb.sc-sui-breadcrumb:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px;box-shadow:var(--focus-shadow)}.crumb.last.sc-sui-breadcrumb{font-weight:700;color:var(--ink);cursor:default;text-decoration:none}.crumb-icon.sc-sui-breadcrumb{font-size:11px}.crumb.ellipsis.sc-sui-breadcrumb{padding:2px 7px;margin-inline:0}.crumb.ellipsis.sc-sui-breadcrumb:hover{text-decoration:none;background:var(--surface-hover)}.crumb.ellipsis.sc-sui-breadcrumb:active{background:var(--surface-pressed)}.crumb.ellipsis.sc-sui-breadcrumb .sui-glyph.sc-sui-breadcrumb{font-size:12px}`;
 

package/dist/cjs/sui-button-group_3.cjs.entry.js

@@ -2,14 +2,14 @@
 
 var index = require('./index-BtWzlhN3.js');
 var behaviors = require('./behaviors-BtpAo1yJ.js');
-var aria = require('./aria-DXFt0vvU.js');
+var aria = require('./aria-DsLSiGlA.js');
 var formControl = require('./form-control-CvMyyCaa.js');
 var anchor = require('./anchor-BjGUozqb.js');
-var fieldShell = require('./field-shell-XLDTgSCW.js');
-var glyphs = require('./glyphs-8uuUhG6s.js');
+var fieldShell = require('./field-shell-BJ_XxyIs.js');
+var glyphs = require('./glyphs-BNG4Wolq.js');
 var id = require('./id-Ca7UTKW6.js');
 var locale = require('./locale-EVD23NSt.js');
-var format = require('./format-BOushIZn.js');
+var format = require('./format-C_36FFqb.js');
 var formDisabled = require('./form-disabled-wss8T3bH.js');
 var clipboard = require('./clipboard-DHY6LL_N.js');
 require('./direction-BaE_rqNY.js');
@@ -896,7 +896,7 @@ const SuiCopyButton = class {
         const name = this.hostLabel || (named
             ? locale.localeFormat(undefined, 'copy-button.copyName', undefined, 'Copy {name}', { name: named })
             : locale.localeText(undefined, 'copy-button.copy', undefined, 'Copy'));
-        return (index.h(index.Host, { key: 'f3cee4f168a2164fe8d7291bc270b48300134a66' }, index.h("button", { key: 'afcd213668c9334c762997402213c84c22179736', ref: (el) => (this.btn = el), type: "button", class: { 'sui-copy': true, [size]: true, [variant]: true, done, failed, 'icon-only': feedback === 'icon' }, disabled: this.disabled, "aria-label": name, onClick: this.copy }, this.label ? index.h("span", { class: "lbl" }, this.label) : null, index.h(glyphs.Glyph, { key: '1da1a805f4060b850dc70cb9501f2772dcf7db63', glyph: done ? glyphs.check : failed ? glyphs.triangleExclamation : glyphs.copyRegular }), showCopiedText ? index.h("span", { class: "done-lbl" }, copiedWord) : null, failed && feedback === 'text' ? index.h("span", { class: "done-lbl" }, errorWord) : null), index.h("span", { key: '72006aefd4bb4d98154613dddd2ed0a08feb6c9e', class: "sr-status", role: "status", "aria-live": "polite" }, status)));
+        return (index.h(index.Host, { key: 'fa2bbffd8cce23bafda63141dc6c5bdcacacec6f' }, index.h("button", { key: '34ac4e396419435f3dc5bc4fbe2318626a2d2993', ref: (el) => (this.btn = el), type: "button", class: { 'sui-copy': true, [size]: true, [variant]: true, done, failed, 'icon-only': feedback === 'icon' }, disabled: this.disabled, "aria-label": name, onClick: this.copy }, this.label ? index.h("span", { class: "lbl" }, this.label) : null, index.h(glyphs.Glyph, { key: '322588da6728487995e985cf5a2eab4f8d355965', glyph: done ? glyphs.check : failed ? glyphs.triangleExclamation : glyphs.copyRegular }), showCopiedText ? index.h("span", { class: "done-lbl" }, copiedWord) : null, failed && feedback === 'text' ? index.h("span", { class: "done-lbl" }, errorWord) : null), index.h("span", { key: '521e9825331e5d454bb0e8734ca5632dbb600baa', class: "sr-status", role: "status", "aria-live": "polite" }, status)));
     }
     static get watchers() { return {
         "value": [{

package/dist/cjs/sui-button-m46CqDut.js

@@ -0,0 +1,183 @@
+'use strict';
+
+var index = require('./index-BtWzlhN3.js');
+var aria = require('./aria-DsLSiGlA.js');
+var formControl = require('./form-control-CvMyyCaa.js');
+var glyphs = require('./glyphs-BNG4Wolq.js');
+require('./locale-EVD23NSt.js');
+
+const suiButtonCss = () => `.sc-sui-button-h{display:inline-block;vertical-align:middle;font-family:var(--font-sans)}[block].sc-sui-button-h{display:block}.sui-btn.sc-sui-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;box-sizing:border-box;border:1px solid transparent;border-radius:var(--sui-button-radius, var(--radius-md));font-family:var(--font-sans);line-height:1;white-space:nowrap;user-select:none;cursor:pointer;text-decoration:none;margin:0;transition:background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out)}.sui-btn.block.sc-sui-button{display:flex;width:100%}.sui-btn.pill.sc-sui-button{border-radius:var(--radius-pill)}.sui-btn.sc-sui-button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:var(--sui-button-focus-offset, 1px);box-shadow:var(--sui-button-focus-shadow, var(--focus-shadow))}.sui-btn.sm.sc-sui-button{height:var(--sui-button-height, var(--control-sm));padding:0 10px;font-size:12.5px}.sui-btn.md.sc-sui-button{height:var(--sui-button-height, var(--control-md));padding:0 var(--button-pad-x);font-size:13px}.sui-btn.lg.sc-sui-button{height:var(--sui-button-height, var(--control-lg));padding:0 var(--button-pad-x-lg);font-size:14px}.sui-btn.xl.sc-sui-button{height:var(--sui-button-height, var(--control-xl));padding:0 var(--button-pad-x-lg);font-size:14px}.sui-btn.sm.sc-sui-button .sui-btn-icon.sc-sui-button{font-size:11px}.sui-btn.md.sc-sui-button .sui-btn-icon.sc-sui-button{font-size:12px}.sui-btn.lg.sc-sui-button .sui-btn-icon.sc-sui-button,.sui-btn.xl.sc-sui-button .sui-btn-icon.sc-sui-button{font-size:14px}.sui-btn.accent.sc-sui-button{background:var(--accent);color:var(--accent-contrast);font-weight:var(--w-heavy)}.sui-btn.accent.sc-sui-button:hover:not(:disabled,.loading.sc-sui-button,.disabled).sc-sui-button{background:var(--accent-hover)}.sui-btn.accent.sc-sui-button:focus-visible{outline-color:var(--sui-button-focus-accent, var(--focus-ring))}.sui-btn.accent.sc-sui-button:active:not(:disabled,.loading.sc-sui-button,.disabled).sc-sui-button{background:var(--accent-active)}.sui-btn.brand.sc-sui-button{background:var(--brand);color:var(--brand-contrast);font-weight:var(--w-bold)}.sui-btn.brand.sc-sui-button:hover:not(:disabled,.loading.sc-sui-button,.disabled).sc-sui-button{background:var(--brand-hover)}.sui-btn.brand.sc-sui-button:focus-visible{outline-color:var(--sui-button-focus-brand, var(--focus-ring))}.sui-btn.brand.sc-sui-button:active:not(:disabled,.loading.sc-sui-button,.disabled).sc-sui-button{background:var(--brand-active)}.sui-btn.outline.sc-sui-button{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.sc-sui-button:hover:not(:disabled,.loading.sc-sui-button,.disabled).sc-sui-button{border-color:var(--sui-button-hover-border, color-mix(in srgb, var(--ink) 30%, var(--control-border)));background:var(--brand-soft)}.sui-btn.outline.sc-sui-button:active:not(:disabled,.loading.sc-sui-button,.disabled).sc-sui-button{background:color-mix(in srgb, var(--brand-soft) 92%, var(--ink))}.sui-btn.ghost.sc-sui-button{background:transparent;color:var(--ink);font-weight:var(--w-semibold)}.sui-btn.ghost.sc-sui-button:hover:not(:disabled,.loading.sc-sui-button,.disabled).sc-sui-button{background:var(--brand-soft)}.sui-btn.ghost.sc-sui-button:active:not(:disabled,.loading.sc-sui-button,.disabled).sc-sui-button{background:color-mix(in srgb, var(--brand-soft) 92%, var(--ink))}.sui-btn.danger.sc-sui-button{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.sc-sui-button:hover:not(:disabled,.loading.sc-sui-button,.disabled).sc-sui-button{background:var(--danger-hover)}.sui-btn.danger.sc-sui-button:focus-visible{outline-color:var(--sui-button-focus-danger, var(--focus-ring))}.sui-btn.danger.sc-sui-button:active:not(:disabled,.loading.sc-sui-button,.disabled).sc-sui-button{background:var(--danger-active)}.sui-btn.link.sc-sui-button{background:transparent;color:var(--link);font-weight:var(--w-semibold);position:relative}.sui-btn.link.sm.sc-sui-button,.sui-btn.link.md.sc-sui-button,.sui-btn.link.lg.sc-sui-button,.sui-btn.link.xl.sc-sui-button{padding-inline:0;border-inline-width:0}.sui-btn.link.sc-sui-button::after{content:'';position:absolute;inset:0 -6px;border-radius:var(--sui-button-radius, var(--radius-md))}.sui-btn.link.sc-sui-button:focus-visible{outline:none;box-shadow:none}.sui-btn.link.sc-sui-button:focus-visible::after{outline:2px solid var(--focus-ring);outline-offset:-2px}.sui-btn.link.sc-sui-button:hover:not(:disabled,.loading.sc-sui-button,.disabled).sc-sui-button{text-decoration:underline}.sui-btn.link.sc-sui-button:active:not(:disabled,.loading.sc-sui-button,.disabled).sc-sui-button{text-decoration:underline}.sui-btn.link.sc-sui-button:not(.inverse):not(.tone-danger):active:not(:disabled,.loading.sc-sui-button,.disabled).sc-sui-button{color:color-mix(in srgb, var(--link) 70%, var(--ink))}.sui-btn.inverse.sc-sui-button{--focus-ring:var(--ink-inverse);--focus-shadow:none}.sui-btn.outline.inverse.sc-sui-button{background:transparent;color:var(--ink-inverse-muted);border-color:var(--border-inverse)}.sui-btn.ghost.inverse.sc-sui-button,.sui-btn.link.inverse.sc-sui-button{background:transparent;color:var(--ink-inverse-muted)}.sui-btn.outline.inverse.sc-sui-button:hover:not(:disabled,.loading.sc-sui-button,.disabled).sc-sui-button,.sui-btn.ghost.inverse.sc-sui-button:hover:not(:disabled,.loading.sc-sui-button,.disabled).sc-sui-button{background:var(--border-inverse);color:var(--ink-inverse)}.sui-btn.outline.inverse.sc-sui-button:active:not(:disabled,.loading.sc-sui-button,.disabled).sc-sui-button,.sui-btn.ghost.inverse.sc-sui-button:active:not(:disabled,.loading.sc-sui-button,.disabled).sc-sui-button{background:color-mix(in srgb, var(--ink-inverse) 22%, transparent);color:var(--ink-inverse)}.sui-btn.link.inverse.sc-sui-button:hover:not(:disabled,.loading.sc-sui-button,.disabled).sc-sui-button{color:var(--ink-inverse)}.sui-btn.outline.tone-danger.sc-sui-button{color:var(--danger);border-color:var(--danger)}.sui-btn.ghost.tone-danger.sc-sui-button,.sui-btn.link.tone-danger.sc-sui-button{color:var(--danger);font-weight:var(--w-bold)}.sui-btn.outline.tone-danger.sc-sui-button:hover:not(:disabled,.loading.sc-sui-button,.disabled).sc-sui-button,.sui-btn.ghost.tone-danger.sc-sui-button:hover:not(:disabled,.loading.sc-sui-button,.disabled).sc-sui-button{background:var(--danger-soft);color:var(--danger-soft-ink)}.sui-btn.outline.tone-danger.sc-sui-button:active:not(:disabled,.loading.sc-sui-button,.disabled).sc-sui-button,.sui-btn.ghost.tone-danger.sc-sui-button:active:not(:disabled,.loading.sc-sui-button,.disabled).sc-sui-button{background:color-mix(in srgb, var(--danger-soft) 84%, var(--danger));color:var(--danger-soft-ink)}.sui-btn.outline.tone-danger.sc-sui-button:hover:not(:disabled,.loading.sc-sui-button,.disabled).sc-sui-button,.sui-btn.outline.tone-danger.sc-sui-button:active:not(:disabled,.loading.sc-sui-button,.disabled).sc-sui-button{border-color:var(--danger)}.sui-btn.sc-sui-button:disabled,.sui-btn.disabled.sc-sui-button{cursor:not-allowed}.sui-btn.loading.sc-sui-button{cursor:progress}.sui-btn.sc-sui-button:disabled:not(.loading),.sui-btn.disabled.sc-sui-button:not(.loading){color:var(--disabled-ink);border-color:transparent}.sui-btn.accent.sc-sui-button:disabled:not(.loading),.sui-btn.brand.sc-sui-button:disabled:not(.loading),.sui-btn.danger.sc-sui-button:disabled:not(.loading),.sui-btn.accent.disabled.sc-sui-button,.sui-btn.brand.disabled.sc-sui-button,.sui-btn.danger.disabled.sc-sui-button{background:var(--disabled-bg);box-shadow:none}.sui-btn.outline.sc-sui-button:disabled:not(.loading),.sui-btn.outline.disabled.sc-sui-button{background:var(--surface);border-color:var(--border)}.sui-btn.ghost.sc-sui-button:disabled:not(.loading),.sui-btn.link.sc-sui-button:disabled:not(.loading),.sui-btn.ghost.disabled.sc-sui-button,.sui-btn.link.disabled.sc-sui-button{background:transparent}.sui-btn.inverse.sc-sui-button:disabled:not(.loading),.sui-btn.inverse.disabled.sc-sui-button{background:transparent;color:var(--ink-inverse-faint)}.sui-btn.outline.inverse.sc-sui-button:disabled:not(.loading),.sui-btn.outline.inverse.disabled.sc-sui-button{border-color:var(--border-inverse)}.sui-btn-spin.sc-sui-button{animation:sb-spin 0.8s linear infinite}@media (prefers-reduced-motion: reduce){.sui-btn-spin.sc-sui-button{animation-duration:2s}}@media (forced-colors: active){.sui-btn.disabled.sc-sui-button{color:GrayText;border-color:GrayText}}`;
+
+const VARIANTS = ['accent', 'brand', 'outline', 'ghost', 'danger', 'link'];
+const SIZES = ['sm', 'md', 'lg', 'xl'];
+const SuiButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get host() { return index.getElement(this); }
+    /**
+     * Visual role, not behavior: a `brand` button still needs `type="submit"`. accent = the one
+     * primary action per view; brand = form submit; outline = default; ghost = quiet; danger = the
+     * filled confirmation of a destructive action (the dialog footer), not the row action. `link` is
+     * a button dressed as a link; give it `href` and it is a real one, so middle-click, open in new
+     * tab and the URL in the status bar work. Any role takes `href`.
+     */
+    variant = 'outline';
+    /**
+     * Re-inks the quiet roles, outline, ghost and link. Filled roles ignore it.
+     *
+     * `danger` is destructive ink for a button that deletes, removes or voids, so a row or toolbar
+     * carries a destructive action without a second solid fill beside the accent; the filled `danger`
+     * variant is the confirmation step's.
+     *
+     * `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
+     * labeled button and an icon button agree on a brand bar.
+     */
+    tone;
+    /** 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;
+    /**
+     * Font Awesome class, e.g. "fa-regular fa-paper-plane". An icon with no `label` and no slot
+     * content has no accessible name: give the element an `aria-label`, which is forwarded to the
+     * button, or reach for `sui-icon-button`. An `aria-label` should contain the visible label.
+     */
+    icon;
+    /** Where the icon sits in reading order: `start` puts it before the label and `end` after it, so
+     *  it swaps sides under `dir="rtl"`. Any other value reads as `start`. */
+    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 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: 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;
+    /** Pill radius instead of the 8px control radius. */
+    pill = false;
+    /** Native button type. `submit` participates in the surrounding form; `reset` clears it. Inert
+     *  on a link (`href`): an anchor takes no part in a form. */
+    type = 'button';
+    /**
+     * Associates the button with a form by id, for a submitter that sits outside the form it
+     * submits: a dialog footer, or a sticky action bar. Inert on a link (`href`).
+     */
+    form;
+    /**
+     * Form control name, forwarded to the native button. This element is not form-associated: the
+     * inner `<button>` is the surrounding form's submitter, so `name` and `value` post one entry,
+     * and only when this button is the one that submitted. Inert on a link (`href`).
+     */
+    name;
+    /** Value submitted with the form when this button submits it. Inert on a link (`href`). */
+    value;
+    /**
+     * Renders the button as a real link, `<a class="sui-btn">` in the same variant, size, glyph and
+     * label, so middle-click, open in new tab, "Copy link address" and the URL in the status bar
+     * all work. `type`, `name`, `value` and `form` do nothing on a link, since an anchor takes no
+     * part in a form; `disabled` keeps the look, drops the `href` and reads `aria-disabled`;
+     * `loading` is the same contract as on the button. Clicks are still the native `click`.
+     */
+    href;
+    /** Where the link opens, e.g. `_blank`. Nothing without `href`. */
+    target;
+    /** Link relationship, written as given. Unset, a `_blank` target gets `noopener`. Nothing
+     *  without `href`. */
+    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() {
+        formControl.delegateFocus(this.host, () => this.btn);
+        this.stopAria = aria.inheritAriaLabel(this.host, (v) => { this.hostLabel = v; });
+        this.stopAriaDisabled = aria.inheritAriaDisabled(this.host, (v) => { this.hostDisabled = v; });
+        this.stopAriaDescribedby = aria.inheritAriaDescribedby(this.host, (v) => { this.hostDescribedby = v; });
+    }
+    disconnectedCallback() {
+        this.stopAria?.();
+        this.stopAria = undefined;
+        this.stopAriaDisabled?.();
+        this.stopAriaDisabled = undefined;
+        this.stopAriaDescribedby?.();
+        this.stopAriaDescribedby = undefined;
+    }
+    btn;
+    /** Moves keyboard focus to the button, or to the link when `href` is set. */
+    async setFocus() {
+        this.btn?.focus();
+    }
+    /** 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.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() {
+        return this.rel ?? (this.target === '_blank' ? 'noopener' : undefined);
+    }
+    /** A blocked control swallows its activation before the host, the form or a router hears it. */
+    onClick = (e) => {
+        if (!this.blocked)
+            return;
+        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';
+        const danger = this.tone === 'danger' && quiet;
+        const inverse = this.tone === 'inverse' && quiet;
+        const iconEl = busy
+            ? index.h(glyphs.Glyph, { glyph: glyphs.circleNotch, class: "sui-btn-spin sui-btn-icon" })
+            : this.icon ? index.h("i", { class: `${this.icon} sui-btn-icon`, "aria-hidden": "true" }) : null;
+        const Control = (link ? 'a' : 'button');
+        return (index.h(index.Host, { key: 'ecfa207238c205b83e79b0d012cba904a27b60b9' }, index.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 ? index.h("span", { class: "sui-btn-label" }, this.label) : null, index.h("slot", { key: 'eeb7ea82feaca996f3e01bf845468e430ffa6176' }), this.iconPos === 'end' ? iconEl : null)));
+    }
+};
+SuiButton.style = suiButtonCss();
+
+exports.SuiButton = SuiButton;

package/dist/cjs/sui-button.cjs.entry.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var suiButton_entry = require('./sui-button-4UtCUHAp.js');
+var suiButton_entry = require('./sui-button-m46CqDut.js');
 require('./index-BtWzlhN3.js');
-require('./aria-DXFt0vvU.js');
+require('./aria-DsLSiGlA.js');
 require('./form-control-CvMyyCaa.js');
 require('./locale-EVD23NSt.js');
-require('./glyphs-8uuUhG6s.js');
+require('./glyphs-BNG4Wolq.js');
 
 
 

package/dist/cjs/sui-calendar.cjs.entry.js

@@ -3,19 +3,19 @@
 var index = require('./index-BtWzlhN3.js');
 var id = require('./id-Ca7UTKW6.js');
 var locale = require('./locale-EVD23NSt.js');
-var aria = require('./aria-DXFt0vvU.js');
+var aria = require('./aria-DsLSiGlA.js');
 var direction = require('./direction-BaE_rqNY.js');
 var renderContent = require('./render-content-Bij4diic.js');
 var severity = require('./severity-NUjSTnjn.js');
-var datetime = require('./datetime-BJ2__762.js');
-var calendarGrid = require('./calendar-grid-CAdH3n4O.js');
-var overlay = require('./overlay-DcMtiB1L.js');
+var datetime = require('./datetime-BjnA3NLP.js');
+var calendarGrid = require('./calendar-grid-D2wlbr0R.js');
+var overlay = require('./overlay-CsoWlGY8.js');
 var formControl = require('./form-control-CvMyyCaa.js');
-var glyphs = require('./glyphs-8uuUhG6s.js');
-var severityGlyph = require('./severity-glyph-Bp6wivYM.js');
-require('./format-BOushIZn.js');
+var glyphs = require('./glyphs-BNG4Wolq.js');
+var severityGlyph = require('./severity-glyph-FP0P95RB.js');
+require('./format-C_36FFqb.js');
 require('./focus-trap-CcyiWkvv.js');
-require('./motion-BaUBY31j.js');
+require('./motion-D8mcyZVH.js');
 
 const listRowCss = () => `.sev.sc-sui-calendar{width:26px;height:26px;border-radius:50%;flex-shrink:0;margin-top:1px;display:inline-flex;align-items:center;justify-content:center}.sev.sc-sui-calendar i.sc-sui-calendar,.sev.sc-sui-calendar .sui-glyph.sc-sui-calendar{font-size:11px}.sev.positive.sc-sui-calendar{background:var(--status-positive-bg);color:var(--status-positive-ink)}.sev.attention.sc-sui-calendar{background:var(--status-attention-bg);color:var(--status-attention-ink)}.sev.critical.sc-sui-calendar{background:var(--danger-soft);color:var(--danger)}.sev.info.sc-sui-calendar{background:var(--surface-sunken);color:var(--ink-muted)}.sev.neutral.sc-sui-calendar{background:var(--status-neutral-bg);color:var(--status-neutral-ink)}.sev.icon.sc-sui-calendar{background:var(--surface-sunken);color:var(--ink-muted)}.sui-list-avatar.sc-sui-calendar{flex-shrink:0;margin-top:1px}.text.sc-sui-calendar{flex:1;min-width:0}.title-row.sc-sui-calendar{display:flex;align-items:center;gap:6px;min-width:0}.title.sc-sui-calendar{font-size:12.5px;font-weight:620;min-width:0}.unread.sc-sui-calendar .title.sc-sui-calendar{font-weight:700}.dot.sc-sui-calendar{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-inline-start:auto}.meta.sc-sui-calendar{flex-shrink:0;margin-inline-start:auto;font-size:11px;color:var(--ink-muted);font-feature-settings:'tnum';white-space:nowrap}.dot.sc-sui-calendar+.sr-only.sc-sui-calendar+.meta.sc-sui-calendar,.dot.sc-sui-calendar+.meta.sc-sui-calendar{margin-inline-start:0}.detail.sc-sui-calendar{display:block;font-size:11.5px;color:var(--ink-muted);line-height:1.45;margin-top:1px}.time.sc-sui-calendar{display:block;font-size:10.5px;color:var(--ink-faint);margin-top:3px;font-feature-settings:'tnum'}.sr-only.sc-sui-calendar{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}@media (forced-colors: active){.sev.sc-sui-calendar{box-sizing:border-box;border:1px solid CanvasText}.dot.sc-sui-calendar{background:CanvasText}}`;
 
@@ -521,7 +521,7 @@ const SuiCalendar = class {
         }));
         return own ? datetime.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();
@@ -1318,10 +1318,10 @@ const SuiCalendar = class {
         this.moreEls = {};
         this.panelChipEls = [];
         this.agendaEls = new Map();
-        return (index.h(index.Host, { key: '08394835cb52c1fc45e28668cab07e6b3c9086a2' }, index.h("div", { key: 'd4264eaca921bbfaa5a57c7c7f7365759ac188de', class: { cal: true, week, loading: this.loading } }, !this.hideToolbar ? this.toolbarRow(period) : index.h("div", { class: "sr-only", "aria-live": "polite" }, period), !this.loading && !hasAny ? index.h("div", { class: "empty" }, locale.localeText(undefined, 'calendar.empty', this.emptyMessage, 'Nothing here yet.')) : null, agenda ? this.agenda(days, this.ariaName || period) : (index.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))` } }, index.h("div", { class: "row", role: "row" }, (rows[0] || []).map((d) => {
+        return (index.h(index.Host, { key: '4531868f76de93ba84aac61b9dc7490f07a458e9' }, index.h("div", { key: '6746ed268045a4612d00436d0264b2cdbac2657f', class: { cal: true, week, loading: this.loading } }, !this.hideToolbar ? this.toolbarRow(period) : index.h("div", { class: "sr-only", "aria-live": "polite" }, period), !this.loading && !hasAny ? index.h("div", { class: "empty" }, locale.localeText(undefined, 'calendar.empty', this.emptyMessage, 'Nothing here yet.')) : null, agenda ? this.agenda(days, this.ariaName || period) : (index.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))` } }, index.h("div", { class: "row", role: "row" }, (rows[0] || []).map((d) => {
             const isToday = week && datetime.isoDate(d) === todayIso;
             return (index.h("div", { key: `h${d.getDay()}`, class: { dow: true, today: isToday, weekend: this.isWeekend(d) }, role: "columnheader", "aria-label": week ? this.dayName(datetime.isoDate(d)) : longNames[d.getDay()] }, index.h("span", { class: "dow-name" }, heads[d.getDay()]), week ? index.h("span", { class: "dow-num" }, d.getDate()) : null));
-        })), rows.map((r, ri) => (index.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, index.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.')), index.h("div", { key: 'c2d0e54538ca3b0a72dc750cb35a63d9c9d7df59', class: "sr-only", "aria-live": "assertive", "aria-atomic": "true" }, this.live)));
+        })), rows.map((r, ri) => (index.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, index.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.')), index.h("div", { key: '1fb4352d79624432ea939f297fc4f85e6349defe', class: "sr-only", "aria-live": "assertive", "aria-atomic": "true" }, this.live)));
     }
     static get watchers() { return {
         "view": [{

package/dist/cjs/sui-card.cjs.entry.js

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

package/dist/cjs/sui-carousel.cjs.entry.js

@@ -3,13 +3,13 @@
 var index = require('./index-BtWzlhN3.js');
 var formControl = require('./form-control-CvMyyCaa.js');
 var slots = require('./slots-rhqoeAqs.js');
-var autoplay = require('./autoplay-pXVaA5sd.js');
+var autoplay = require('./autoplay-BAzQ2uf0.js');
 var direction = require('./direction-BaE_rqNY.js');
 var locale = require('./locale-EVD23NSt.js');
-var glyphs = require('./glyphs-8uuUhG6s.js');
-var motion = require('./motion-BaUBY31j.js');
-require('./held-focus-DeQVYDkc.js');
-require('./overlay-DcMtiB1L.js');
+var glyphs = require('./glyphs-BNG4Wolq.js');
+var motion = require('./motion-D8mcyZVH.js');
+require('./held-focus-ikz5F6kW.js');
+require('./overlay-CsoWlGY8.js');
 require('./focus-trap-CcyiWkvv.js');
 
 const suiCarouselCss = () => `.sc-sui-carousel-h{display:block;font-family:var(--font-sans)}.row.sc-sui-carousel{display:flex;align-items:center;gap:12px}.bar.sc-sui-carousel{display:flex;justify-content:flex-end;margin-bottom:8px}.arrow.sc-sui-carousel{width:34px;height:34px;flex-shrink:0;padding:0;margin:0;border-radius:50%;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out)}.arrow.sc-sui-carousel .sui-glyph.sc-sui-carousel{font-size:12px}.arrow.sc-sui-carousel:hover:not(:disabled){background:linear-gradient(var(--surface-hover) 0 0) var(--surface)}.arrow.sc-sui-carousel:active:not(:disabled){background:linear-gradient(var(--surface-pressed) 0 0) var(--surface)}.arrow.sc-sui-carousel:disabled{color:var(--ink-placeholder);cursor:not-allowed}.arrow.sc-sui-carousel:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px;box-shadow:var(--focus-shadow)}.sc-sui-carousel-h:dir(rtl):not(.vertical) .row.sc-sui-carousel .arrow.sc-sui-carousel .sui-glyph.sc-sui-carousel{transform:scaleX(-1)}.viewport.sc-sui-carousel{flex:1;min-width:0;overflow:hidden;border-radius:var(--radius-lg);padding:2px;box-sizing:border-box;touch-action:pan-y}.track.sc-sui-carousel{position:relative;display:flex;gap:12px;align-items:stretch;transition:inset-inline-start var(--duration-slow) var(--ease-out), top var(--duration-slow) var(--ease-out)}.vertical.sc-sui-carousel-h .row.sc-sui-carousel{flex-direction:column;align-items:stretch}.vertical.sc-sui-carousel-h .arrow.sc-sui-carousel{align-self:center}.vertical.sc-sui-carousel-h .viewport.sc-sui-carousel{flex:none;min-height:0;touch-action:pan-x}.vertical.sc-sui-carousel-h .track.sc-sui-carousel{flex-direction:column;height:100%}.dots.sc-sui-carousel{display:flex;justify-content:center;gap:7px;margin-top:12px}.dot.sc-sui-carousel{width:7px;height:7px;padding:0;margin:0;border:none;border-radius:var(--radius-xs);background:var(--control-border);cursor:pointer;transition:width var(--duration-base) var(--ease-out), background var(--duration-base) var(--ease-out)}.dot.active.sc-sui-carousel{width:20px;background:var(--accent)}.dot.sc-sui-carousel:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px;box-shadow:var(--focus-shadow)}@media (forced-colors: active){.dot.sc-sui-carousel{border:1px solid ButtonText;box-sizing:border-box}.dot.active.sc-sui-carousel{background:Highlight;border-color:Highlight}}`;
@@ -41,7 +41,7 @@ const SuiCarousel = class {
     circular = false;
     /**
      * `horizontal` (default) runs the pages sideways with the arrows either side. `vertical` stacks
-     * them and pages downwards: the arrows sit above and below, ArrowUp and ArrowDown page, the
+     * them and pages downward: the arrows sit above and below, ArrowUp and ArrowDown page, the
      * swipe runs up and down, and the viewport takes `height`. Unknown values fall back to
      * `horizontal`.
      */
@@ -83,7 +83,7 @@ const SuiCarousel = class {
     synced = [];
     syncedCell = '';
     loaded = false;
-    /** Gap between pages, in px. Shared by the flex gap in the stylesheet and the offset maths here. */
+    /** Gap between pages, in px. Shared by the flex gap in the stylesheet and the offset math here. */
     static GAP = 12;
     /** Viewport height of a vertical rail with no `height`, PrimeVue's `verticalViewPortHeight`. */
     static VERTICAL_HEIGHT = '300px';
@@ -210,7 +210,7 @@ const SuiCarousel = class {
         this.playing = this.player.active;
     };
     /**
-     * The pages, in order. Before the first render they sit under the host; afterwards Stencil has
+     * The pages, in order. Before the first render they sit under the host; afterward Stencil has
      * relocated them into the track, and the slot patches (`extras` in stencil.config.ts) put a page
      * the page adds later straight there, in its place. The host's own child list is read too, as
      * the DOM holds it (`domChildren`): a page that reaches the host past those patches counts at
@@ -380,8 +380,8 @@ const SuiCarousel = class {
         const atStart = !this.circular && this.index <= 0;
         const atEnd = !this.circular && this.index >= pages - 1;
         const offset = this.offset();
-        const arrow = (dir) => (index.h("button", { key: '468d9ad189a942e62ecbfca32c21261afe8999b6', type: "button", class: "arrow", "aria-label": dir < 0 ? locale.localeText(undefined, 'carousel.previous', undefined, 'Previous') : locale.localeText(undefined, 'carousel.next', undefined, 'Next'), disabled: dir < 0 ? atStart : atEnd, onClick: () => this.go(this.index + dir) }, index.h(glyphs.Glyph, { key: '018b4e0286a702eb9abf1ede69d447424af87020', glyph: vertical ? (dir < 0 ? glyphs.chevronUp : glyphs.chevronDown) : dir < 0 ? glyphs.chevronLeft : glyphs.chevronRight })));
-        return (index.h(index.Host, { key: 'bcf54e345949a2208146faee3c1ec75d9fd93eb9', role: "region", "aria-roledescription": "carousel", class: { vertical }, onKeyDown: this.onKeyDown }, Number(this.autoplay) > 0 && !this.reduced ? (index.h("div", { class: "bar", "data-sui-ui": "" }, index.h("button", { type: "button", class: "arrow play", "aria-label": this.playing ? locale.localeText(undefined, 'carousel.pauseAutoplay', undefined, 'Pause autoplay') : locale.localeText(undefined, 'carousel.startAutoplay', undefined, 'Start autoplay'), onClick: this.togglePlay }, index.h(glyphs.Glyph, { glyph: this.playing ? glyphs.pause : glyphs.play })))) : null, index.h("div", { key: '57e7e81d10401d55046af1d95981a7fecc2706d3', class: "row", "data-sui-ui": "" }, !this.hideArrows ? arrow(-1) : null, index.h("div", { key: 'ba2455c9424b7f2e387dfc6a2edafb473d24e293', class: "viewport", style: { height: vertical ? SuiCarousel.len(this.height) || SuiCarousel.VERTICAL_HEIGHT : undefined }, onPointerDown: this.onPointerDown }, index.h("div", { key: '87253ac40ecc154154dae75790d45fcfea5b5a56', class: "track", ref: (el) => (this.track = el), style: vertical ? { top: offset } : { insetInlineStart: offset } }, index.h("slot", { key: 'e8e2fcc57086b18e9b4ef6f495d1ea2553b77120' }))), !this.hideArrows ? arrow(1) : null), !this.hideDots ? (index.h("div", { class: "dots", role: "tablist", "aria-label": locale.localeText(undefined, 'carousel.pages', undefined, 'Pages'), "data-sui-ui": "", ref: (el) => (this.dots = el) }, Array.from({ length: pages }, (_, i) => (index.h("button", { key: i, type: "button", role: "tab", class: { dot: true, active: i === this.index }, "aria-label": locale.localeFormat(undefined, 'carousel.page', undefined, 'Page {n}', { n: String(i + 1) }), "aria-selected": i === this.index ? 'true' : 'false', tabIndex: i === this.index ? 0 : -1, onClick: () => this.go(i) }))))) : null));
+        const arrow = (dir) => (index.h("button", { key: '68f82967b95e058ba04a8630c63ef17efc263100', type: "button", class: "arrow", "aria-label": dir < 0 ? locale.localeText(undefined, 'carousel.previous', undefined, 'Previous') : locale.localeText(undefined, 'carousel.next', undefined, 'Next'), disabled: dir < 0 ? atStart : atEnd, onClick: () => this.go(this.index + dir) }, index.h(glyphs.Glyph, { key: '09197f3200654786860efa8111ccb23dbd993f91', glyph: vertical ? (dir < 0 ? glyphs.chevronUp : glyphs.chevronDown) : dir < 0 ? glyphs.chevronLeft : glyphs.chevronRight })));
+        return (index.h(index.Host, { key: '10dffd5c18255b1ac2b315e608f6657ca17cfe68', role: "region", "aria-roledescription": "carousel", class: { vertical }, onKeyDown: this.onKeyDown }, Number(this.autoplay) > 0 && !this.reduced ? (index.h("div", { class: "bar", "data-sui-ui": "" }, index.h("button", { type: "button", class: "arrow play", "aria-label": this.playing ? locale.localeText(undefined, 'carousel.pauseAutoplay', undefined, 'Pause autoplay') : locale.localeText(undefined, 'carousel.startAutoplay', undefined, 'Start autoplay'), onClick: this.togglePlay }, index.h(glyphs.Glyph, { glyph: this.playing ? glyphs.pause : glyphs.play })))) : null, index.h("div", { key: '5ded1cc701ec196953fff9b71990972a4dc79c79', class: "row", "data-sui-ui": "" }, !this.hideArrows ? arrow(-1) : null, index.h("div", { key: 'bd923574eca18278dc5d604d9fb0e54b6b6467f3', class: "viewport", style: { height: vertical ? SuiCarousel.len(this.height) || SuiCarousel.VERTICAL_HEIGHT : undefined }, onPointerDown: this.onPointerDown }, index.h("div", { key: 'ce931c7815845d5cca2882d0d0199b94395f4b17', class: "track", ref: (el) => (this.track = el), style: vertical ? { top: offset } : { insetInlineStart: offset } }, index.h("slot", { key: '932de286d37f9b8aa9ec80812461211a9d8e3848' }))), !this.hideArrows ? arrow(1) : null), !this.hideDots ? (index.h("div", { class: "dots", role: "tablist", "aria-label": locale.localeText(undefined, 'carousel.pages', undefined, 'Pages'), "data-sui-ui": "", ref: (el) => (this.dots = el) }, Array.from({ length: pages }, (_, i) => (index.h("button", { key: i, type: "button", role: "tab", class: { dot: true, active: i === this.index }, "aria-label": locale.localeFormat(undefined, 'carousel.page', undefined, 'Page {n}', { n: String(i + 1) }), "aria-selected": i === this.index ? 'true' : 'false', tabIndex: i === this.index ? 0 : -1, onClick: () => this.go(i) }))))) : null));
     }
     static get watchers() { return {
         "perPage": [{