@shineuix/core 1.0.0 → 1.0.1

package/dist/cjs/sui-icon-button-BdZu1pr0.js

@@ -0,0 +1,180 @@
+'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 suiIconButtonCss = () => `.sc-sui-icon-button-h{display:inline-block;vertical-align:middle;flex-shrink:0;font-family:var(--font-sans)}.sui-ib.sc-sui-icon-button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;flex-shrink:0;padding:0;margin:0;border:1px solid transparent;border-radius:var(--sui-button-radius, var(--radius-md));font-family:var(--font-sans);line-height:1;cursor:pointer;user-select:none;transition:background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out)}.sui-ib.pill.sc-sui-icon-button{border-radius:var(--radius-pill)}.sui-ib.sc-sui-icon-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-ib.sm.sc-sui-icon-button{width:var(--control-sm);height:var(--sui-button-height, var(--control-sm))}.sui-ib.md.sc-sui-icon-button{width:var(--control-md);height:var(--sui-button-height, var(--control-md))}.sui-ib.lg.sc-sui-icon-button{width:var(--control-lg);height:var(--sui-button-height, var(--control-lg))}.sui-ib.sm.sc-sui-icon-button .sui-ib-icon.sc-sui-icon-button{font-size:var(--icon-size-sm)}.sui-ib.md.sc-sui-icon-button .sui-ib-icon.sc-sui-icon-button{font-size:var(--icon-size-md)}.sui-ib.lg.sc-sui-icon-button .sui-ib-icon.sc-sui-icon-button{font-size:var(--icon-size-lg)}.sui-ib.ghost.sc-sui-icon-button{background:transparent;color:var(--ink-muted);border-color:transparent}.sui-ib.ghost.sc-sui-icon-button:hover:not(:disabled,.loading.sc-sui-icon-button,.disabled).sc-sui-icon-button{background:var(--brand-soft);color:var(--ink)}.sui-ib.ghost.sc-sui-icon-button:active:not(:disabled,.loading.sc-sui-icon-button,.disabled).sc-sui-icon-button{background:color-mix(in srgb, var(--brand-soft) 92%, var(--ink));color:var(--ink)}.sui-ib.outline.sc-sui-icon-button{background:var(--surface);color:var(--ink-muted);border-color:var(--sui-button-border, var(--control-border))}.sui-ib.outline.sc-sui-icon-button:hover:not(:disabled,.loading.sc-sui-icon-button,.disabled).sc-sui-icon-button{background:var(--brand-soft);color:var(--ink)}.sui-ib.outline.sc-sui-icon-button:active:not(:disabled,.loading.sc-sui-icon-button,.disabled).sc-sui-icon-button{background:color-mix(in srgb, var(--brand-soft) 92%, var(--ink));color:var(--ink)}.sui-ib.brand.sc-sui-icon-button{background:var(--brand);color:var(--brand-contrast)}.sui-ib.brand.sc-sui-icon-button:hover:not(:disabled,.loading.sc-sui-icon-button,.disabled).sc-sui-icon-button{background:var(--brand-hover)}.sui-ib.brand.sc-sui-icon-button:focus-visible{outline-color:var(--sui-button-focus-brand, var(--focus-ring))}.sui-ib.brand.sc-sui-icon-button:active:not(:disabled,.loading.sc-sui-icon-button,.disabled).sc-sui-icon-button{background:var(--brand-active)}.sui-ib.accent.sc-sui-icon-button{background:var(--accent);color:var(--accent-contrast)}.sui-ib.accent.sc-sui-icon-button:hover:not(:disabled,.loading.sc-sui-icon-button,.disabled).sc-sui-icon-button{background:var(--accent-hover)}.sui-ib.accent.sc-sui-icon-button:focus-visible{outline-color:var(--sui-button-focus-accent, var(--focus-ring))}.sui-ib.accent.sc-sui-icon-button:active:not(:disabled,.loading.sc-sui-icon-button,.disabled).sc-sui-icon-button{background:var(--accent-active)}.sui-ib.danger.sc-sui-icon-button{background:var(--danger-fill);color:var(--danger-contrast);box-shadow:inset 0 0 0 1.5px var(--danger-fill-edge)}.sui-ib.danger.sc-sui-icon-button:disabled:not(.loading),.sui-ib.danger.disabled.sc-sui-icon-button{box-shadow:none}.sui-ib.danger.sc-sui-icon-button:hover:not(:disabled,.loading.sc-sui-icon-button,.disabled).sc-sui-icon-button{background:var(--danger-hover)}.sui-ib.danger.sc-sui-icon-button:focus-visible{outline-color:var(--sui-button-focus-danger, var(--focus-ring))}.sui-ib.danger.sc-sui-icon-button:active:not(:disabled,.loading.sc-sui-icon-button,.disabled).sc-sui-icon-button{background:var(--danger-active)}.sui-ib.ghost.tone-danger.sc-sui-icon-button,.sui-ib.outline.tone-danger.sc-sui-icon-button{color:var(--danger)}.sui-ib.outline.tone-danger.sc-sui-icon-button{border-color:var(--danger)}.sui-ib.ghost.tone-danger.sc-sui-icon-button:hover:not(:disabled,.loading.sc-sui-icon-button,.disabled).sc-sui-icon-button,.sui-ib.outline.tone-danger.sc-sui-icon-button:hover:not(:disabled,.loading.sc-sui-icon-button,.disabled).sc-sui-icon-button{background:var(--danger-soft);color:var(--danger)}.sui-ib.ghost.tone-danger.sc-sui-icon-button:active:not(:disabled,.loading.sc-sui-icon-button,.disabled).sc-sui-icon-button,.sui-ib.outline.tone-danger.sc-sui-icon-button:active:not(:disabled,.loading.sc-sui-icon-button,.disabled).sc-sui-icon-button{background:color-mix(in srgb, var(--danger-soft) 84%, var(--danger));color:var(--danger)}.sui-ib.inverse.sc-sui-icon-button{--focus-ring:var(--ink-inverse);--focus-shadow:none}.sui-ib.ghost.inverse.sc-sui-icon-button{background:transparent;color:var(--ink-inverse-muted);border-color:transparent}.sui-ib.ghost.inverse.sc-sui-icon-button:hover:not(:disabled,.loading.sc-sui-icon-button,.disabled).sc-sui-icon-button{background:var(--border-inverse);color:var(--ink-inverse)}.sui-ib.ghost.inverse.sc-sui-icon-button:active:not(:disabled,.loading.sc-sui-icon-button,.disabled).sc-sui-icon-button{background:color-mix(in srgb, var(--ink-inverse) 22%, transparent);color:var(--ink-inverse)}.sui-ib.outline.inverse.sc-sui-icon-button{background:transparent;color:var(--ink-inverse-muted);border-color:var(--border-inverse)}.sui-ib.outline.inverse.sc-sui-icon-button:hover:not(:disabled,.loading.sc-sui-icon-button,.disabled).sc-sui-icon-button{background:var(--border-inverse);color:var(--ink-inverse)}.sui-ib.outline.inverse.sc-sui-icon-button:active:not(:disabled,.loading.sc-sui-icon-button,.disabled).sc-sui-icon-button{background:color-mix(in srgb, var(--ink-inverse) 22%, transparent);color:var(--ink-inverse)}.sui-ib.sc-sui-icon-button:disabled,.sui-ib.disabled.sc-sui-icon-button{cursor:not-allowed}.sui-ib.loading.sc-sui-icon-button{cursor:progress}.sui-ib.sc-sui-icon-button:disabled:not(.loading),.sui-ib.disabled.sc-sui-icon-button:not(.loading){color:var(--disabled-ink);border-color:transparent}.sui-ib.accent.sc-sui-icon-button:disabled:not(.loading),.sui-ib.brand.sc-sui-icon-button:disabled:not(.loading),.sui-ib.danger.sc-sui-icon-button:disabled:not(.loading),.sui-ib.accent.disabled.sc-sui-icon-button,.sui-ib.brand.disabled.sc-sui-icon-button,.sui-ib.danger.disabled.sc-sui-icon-button{background:var(--disabled-bg)}.sui-ib.outline.sc-sui-icon-button:disabled:not(.loading),.sui-ib.outline.disabled.sc-sui-icon-button{background:var(--surface);border-color:var(--border);color:var(--ink-placeholder)}.sui-ib.ghost.sc-sui-icon-button:disabled:not(.loading),.sui-ib.ghost.disabled.sc-sui-icon-button{background:transparent;color:var(--ink-placeholder)}.sui-ib.inverse.sc-sui-icon-button:disabled:not(.loading),.sui-ib.inverse.disabled.sc-sui-icon-button{background:transparent;color:var(--ink-inverse-faint)}.sui-ib.outline.inverse.sc-sui-icon-button:disabled:not(.loading),.sui-ib.outline.inverse.disabled.sc-sui-icon-button{border-color:var(--border-inverse)}.sui-ib-spin.sc-sui-icon-button{animation:sb-spin 0.8s linear infinite}@media (prefers-reduced-motion: reduce){.sui-ib-spin.sc-sui-icon-button{animation-duration:2s}}@media (forced-colors: active){.sui-ib.disabled.sc-sui-icon-button{color:GrayText;border-color:GrayText}}`;
+
+const VARIANTS = ['ghost', 'outline', 'brand', 'accent', 'danger'];
+const SIZES = ['sm', 'md', 'lg'];
+const SuiIconButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    get host() { return index.getElement(this); }
+    /**
+     * Font Awesome class, e.g. "fa-regular fa-pen-to-square". Leave it unset and slot the glyph
+     * instead. The accessible name comes from the element's own `aria-label` attribute, which is
+     * also the `sui-tooltip` text; there is no `ariaLabel` prop. Without one the button renders
+     * unnamed and gets no tooltip. An action that needs a visible label is `sui-button`.
+     */
+    icon;
+    /** Visual role: ghost (default, quiet), outline (bordered), brand (the brand fill), accent (the accent fill, the one primary action), danger (destructive). */
+    variant = 'ghost';
+    /** Square size: sm 28px, md 34px (toolbars), lg 42px. Reflected. */
+    size = 'md';
+    /**
+     * Ink for the quiet roles (ghost and outline; brand, accent and danger ignore it). `inverse` is
+     * inverse ink and border for a button on the brand chrome. `danger` is the inline destructive action,
+     * the trash on a row: danger ink with no fill, so the row does not gain a second solid beside
+     * the accent; the filled `danger` variant stays the confirmation step's. Unset keeps the
+     * canvas/surface recipe.
+     */
+    tone;
+    /** Blocks clicks. As on `sui-button`, filled roles take the disabled well, an outline keeps its
+     *  surface, a ghost stays bare, and on navy the ink fades. 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 and its tooltip with it; to keep
+     *  both, so a keyboard or screen reader user reaches it and the reason the tooltip gives, 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. An `aria-describedby` on the element reaches
+     *  the button too. */
+    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;
+    /** Leaves out the tooltip the `aria-label` would otherwise draw, for a button whose name is
+     *  already on screen beside it: a chip's remove control, a row that repeats the word. The name
+     *  stays on the button for a reader. */
+    noTooltip = false;
+    /** Round. Off by default: the button takes the control radius every other button takes, so a
+     *  toolbar of buttons, selects and icon buttons reads as one row of shapes. Set it where a round
+     *  control is the convention, an arrow over a photo say. */
+    pill = false;
+    /**
+     * Takes the button out of the tab order (`tabindex="-1"`), for a control the keyboard already
+     * reaches another way: the overflow arrows on a tab bar, which duplicate what the arrow keys do
+     * inside the bar, are the case this exists for. The button stays clickable and still takes focus
+     * from a pointer or from `setFocus()`. Do not set it on a control with no keyboard route of its
+     * own, which is how a control becomes reachable by mouse alone.
+     */
+    noTabStop = 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. Inert on a link (`href`). */
+    name;
+    /** Value submitted with the form when this button submits it. Inert on a link (`href`). */
+    value;
+    /**
+     * Renders the control as a real link, `<a class="sui-ib">` with the same variant, size, glyph,
+     * name and tooltip, 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 (REQUIRED): also the tooltip text. */
+    hostLabel;
+    stopAria;
+    hostState = {};
+    stopAriaState;
+    /** The element's own `aria-disabled="true"`: the focusable disabled button. */
+    hostDisabled = false;
+    stopAriaDisabled;
+    /** The element's own `aria-describedby`, forwarded to the button. */
+    hostDescribedby;
+    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` and state attributes. */
+    connectedCallback() {
+        formControl.delegateFocus(this.host, () => this.btn);
+        this.stopAria = aria.inheritAriaLabel(this.host, (v) => { this.hostLabel = v; });
+        this.stopAriaState = aria.inheritAriaState(this.host, (s) => { this.hostState = { ...this.hostState, ...s }; });
+        this.stopAriaDisabled = aria.inheritAriaDisabled(this.host, (v) => { this.hostDisabled = v; });
+        this.stopAriaDescribedby = aria.inheritAriaDescribedby(this.host, (v) => { this.hostDescribedby = v; });
+    }
+    disconnectedCallback() {
+        this.stopAria?.();
+        this.stopAriaState?.();
+        this.stopAriaDisabled?.();
+        this.stopAriaDescribedby?.();
+        this.stopAria = undefined;
+        this.stopAriaState = undefined;
+        this.stopAriaDisabled = undefined;
+        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 : 'ghost';
+        const size = SIZES.includes(this.size) ? this.size : 'md';
+        const quiet = variant === 'ghost' || variant === 'outline';
+        const inverse = this.tone === 'inverse' && quiet;
+        const danger = this.tone === 'danger' && quiet;
+        const Control = (link ? 'a' : 'button');
+        const btn = (index.h(Control, { key: 'eb3532f8407d82a54276642424185de1033c1127', ref: (el) => (this.btn = el), class: { 'sui-ib': true, [variant]: true, [size]: true, pill: this.pill, inverse, 'tone-danger': danger, 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, "aria-disabled": this.blocked ? 'true' : undefined, tabIndex: this.noTabStop ? -1 : link && !followable && !off ? 0 : undefined, "aria-label": this.hostLabel, "aria-describedby": this.hostDescribedby, "aria-busy": busy ? 'true' : 'false', onClick: this.onClick, ...this.hostState }, busy
+            ? index.h(glyphs.Glyph, { glyph: glyphs.circleNotch, class: "sui-ib-spin sui-ib-icon" })
+            : [this.icon ? index.h("i", { class: `${this.icon} sui-ib-icon`, "aria-hidden": "true" }) : null, index.h("slot", null)]));
+        return (index.h(index.Host, { key: '17babe5bf496bfb338d7197a87df6a6daecdbe55' }, this.hostLabel && !this.noTooltip ? (index.h("sui-tooltip", { content: this.hostLabel, position: "top" }, btn)) : (btn)));
+    }
+};
+SuiIconButton.style = suiIconButtonCss();
+
+exports.SuiIconButton = SuiIconButton;

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

@@ -1,11 +1,11 @@
 'use strict';
 
-var suiIconButton_entry = require('./sui-icon-button-B4av7rL0.js');
+var suiIconButton_entry = require('./sui-icon-button-BdZu1pr0.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-icon-field.cjs.entry.js

@@ -1,12 +1,12 @@
 'use strict';
 
 var index = require('./index-BtWzlhN3.js');
-var aria = require('./aria-DXFt0vvU.js');
+var aria = require('./aria-DsLSiGlA.js');
 var inputHints = require('./input-hints-Bsq-zavl.js');
 var id = require('./id-Ca7UTKW6.js');
 var formControl = require('./form-control-CvMyyCaa.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 locale = require('./locale-EVD23NSt.js');
 var slots = require('./slots-rhqoeAqs.js');
 var formDisabled = require('./form-disabled-wss8T3bH.js');
@@ -228,7 +228,7 @@ const SuiIconField = class {
         const width = w == null || w === '' ? undefined : typeof w === 'number' || /^\d+(\.\d+)?$/.test(String(w)) ? `${w}px` : String(w);
         const bad = this.invalid || !!this.error;
         const size = SIZES.includes(this.size) ? this.size : 'md';
-        return (index.h(fieldShell.FieldShell, { key: '0d83da24002605f3a7c444df759a1f849d64af3a', label: this.label, required: this.required, help: this.help, error: this.error, htmlFor: this.fieldId, descId: this.fieldId }, index.h("div", { key: 'f40863a9cd0d800071861b0048cb4f7e19b86c4a', class: { 'sui-input': true, 'sui-frame': true, 'sui-icon-field': true, [size]: true, invalid: bad, focus: this.focused, disabled: this.isDisabled, readonly: this.readOnly, 'has-icon': !!this.icon, 'has-end': this.hasEnd }, style: width ? { width } : undefined }, this.icon ? index.h("i", { class: `${this.icon} icon lead`, "aria-hidden": "true" }) : null, index.h("input", { key: 'bc71fb40288c6fd83cb43fc73b2f7e9f1880755f', ref: (el) => (this.input = el), id: this.fieldId, class: "field", type: this.type, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.isDisabled, readOnly: this.readOnly, autocomplete: this.autocomplete, pattern: this.pattern, minLength: this.minLength, inputMode: this.hints.inputmode, enterKeyHint: this.hints.enterkeyhint, "aria-label": this.label ? null : this.hostLabel || (this.hostLabelledby ? null : this.placeholder), "aria-labelledby": this.label ? null : this.hostLabelledby, "aria-invalid": bad ? 'true' : null, "aria-describedby": fieldShell.describedBy(this.fieldId, this.help, this.error), onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, onChange: this.onChange }), this.clearable && this.value && !this.isDisabled && !this.readOnly ? (index.h("button", { type: "button", class: { clear: true, 'before-icon': !!this.endIcon || this.hasEnd }, "aria-label": locale.localeText(undefined, 'icon-field.clear', undefined, 'Clear'), onClick: this.clear }, index.h(glyphs.Glyph, { glyph: glyphs.circleXmark }))) : null, this.endIcon ? index.h("i", { class: `${this.endIcon} icon trail`, "aria-hidden": "true" }) : null, index.h("span", { key: '71600da279926be20c7aaefd023ffb80184ad07d', class: "end", ref: (el) => (this.endEl = el), onMouseDown: this.onEndPress }, index.h("slot", { key: '2cb1e0ff98f9c612d2ca37521613bfcccb6d0de8', name: "end" })))));
+        return (index.h(fieldShell.FieldShell, { key: '46bcb9e4374efdb4984950ca3a18712702c3eef7', label: this.label, required: this.required, help: this.help, error: this.error, htmlFor: this.fieldId, descId: this.fieldId }, index.h("div", { key: '0cd91cac8d3dfc28553a3aea01fe7b1cfde2ab2b', class: { 'sui-input': true, 'sui-frame': true, 'sui-icon-field': true, [size]: true, invalid: bad, focus: this.focused, disabled: this.isDisabled, readonly: this.readOnly, 'has-icon': !!this.icon, 'has-end': this.hasEnd }, style: width ? { width } : undefined }, this.icon ? index.h("i", { class: `${this.icon} icon lead`, "aria-hidden": "true" }) : null, index.h("input", { key: 'f8c3d05db3545a8177964c5602eead474557bdc9', ref: (el) => (this.input = el), id: this.fieldId, class: "field", type: this.type, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.isDisabled, readOnly: this.readOnly, autocomplete: this.autocomplete, pattern: this.pattern, minLength: this.minLength, inputMode: this.hints.inputmode, enterKeyHint: this.hints.enterkeyhint, "aria-label": this.label ? null : this.hostLabel || (this.hostLabelledby ? null : this.placeholder), "aria-labelledby": this.label ? null : this.hostLabelledby, "aria-invalid": bad ? 'true' : null, "aria-describedby": fieldShell.describedBy(this.fieldId, this.help, this.error), onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, onChange: this.onChange }), this.clearable && this.value && !this.isDisabled && !this.readOnly ? (index.h("button", { type: "button", class: { clear: true, 'before-icon': !!this.endIcon || this.hasEnd }, "aria-label": locale.localeText(undefined, 'icon-field.clear', undefined, 'Clear'), onClick: this.clear }, index.h(glyphs.Glyph, { glyph: glyphs.circleXmark }))) : null, this.endIcon ? index.h("i", { class: `${this.endIcon} icon trail`, "aria-hidden": "true" }) : null, index.h("span", { key: '3183488e505eb7e3701f0713716e760c058f0d6a', class: "end", ref: (el) => (this.endEl = el), onMouseDown: this.onEndPress }, index.h("slot", { key: 'e84d332f1340f4fea741d09d7c57927b0e9fa3ce', name: "end" })))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

package/dist/cjs/sui-ifta-label.cjs.entry.js

@@ -1,13 +1,13 @@
 'use strict';
 
 var index = require('./index-BtWzlhN3.js');
-var fieldShell = require('./field-shell-XLDTgSCW.js');
+var fieldShell = require('./field-shell-BJ_XxyIs.js');
 var id = require('./id-Ca7UTKW6.js');
 var formControl = require('./form-control-CvMyyCaa.js');
-var aria = require('./aria-DXFt0vvU.js');
+var aria = require('./aria-DsLSiGlA.js');
 var inputHints = require('./input-hints-Bsq-zavl.js');
 var formDisabled = require('./form-disabled-wss8T3bH.js');
-require('./glyphs-8uuUhG6s.js');
+require('./glyphs-BNG4Wolq.js');
 require('./locale-EVD23NSt.js');
 
 const suiIftaLabelCss = () => `.sc-sui-ifta-label-h{display:block;font-family:var(--font-sans)}.sui-input.sui-ifta.sc-sui-ifta-label{padding:7px 12px 8px;cursor:text}.sui-input.sui-ifta.readonly.sc-sui-ifta-label:not(.disabled){background:var(--surface-sunken)}.ifta-label.sc-sui-ifta-label{display:block;margin-bottom:2px;font-size:10.5px;font-weight:650;letter-spacing:0.05em;text-transform:uppercase;color:var(--ink-faint);cursor:inherit;transition:color var(--duration-fast) var(--ease-out)}.sui-ifta.focus.sc-sui-ifta-label .ifta-label.sc-sui-ifta-label{color:var(--focus-ring)}.sui-ifta.invalid.sc-sui-ifta-label .ifta-label.sc-sui-ifta-label{color:var(--danger)}.sui-ifta.sc-sui-ifta-label .field.sc-sui-ifta-label{display:block;width:100%;box-sizing:border-box;padding:0;margin:0;border:none;outline:none;background:transparent;color:var(--ink);font-size:14px;font-weight:550;font-family:var(--font-sans);line-height:1.3}.sui-ifta.sc-sui-ifta-label .field.sc-sui-ifta-label::placeholder{color:var(--ink-placeholder)}.sui-ifta.sc-sui-ifta-label .field.sc-sui-ifta-label:disabled{color:var(--disabled-ink);cursor:not-allowed}`;
@@ -152,7 +152,7 @@ const SuiIftaLabel = class {
     };
     render() {
         const invalid = this.invalid || !!this.error;
-        return (index.h(fieldShell.FieldShell, { key: '49d90864339ca67ccad6f89fba05100ac8250b01', help: this.help, error: this.error, descId: this.fieldId }, index.h("div", { key: 'c9177ac5eed4e8bc60d420fae0a7b4adf309cec2', class: { 'sui-input': true, 'sui-frame': true, 'sui-ifta': true, focus: this.focused, invalid, disabled: this.isDisabled, readonly: this.readOnly }, onClick: () => this.input?.focus() }, index.h("label", { key: 'b84e98a4a3120eec090c8c1c1d225dd8d15e9633', class: "ifta-label", htmlFor: this.fieldId }, this.label, this.required ? index.h("span", { class: "sui-field-req", "aria-hidden": "true" }, "*") : null), index.h("input", { key: 'e62f8a8ae5052a01a3cc83bb9eea3a85597934e4', ref: (el) => (this.input = el), id: this.fieldId, class: "field", type: this.type, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.isDisabled, readOnly: this.readOnly, maxLength: this.maxLength, pattern: this.pattern, minLength: this.minLength, inputMode: this.hints.inputmode, enterKeyHint: this.hints.enterkeyhint, "aria-label": this.label ? undefined : this.hostLabel, "aria-labelledby": this.label ? undefined : this.hostLabelledby, "aria-invalid": invalid ? 'true' : null, "aria-describedby": fieldShell.describedBy(this.fieldId, this.help, this.error), onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, onChange: this.onChange }))));
+        return (index.h(fieldShell.FieldShell, { key: '04b3343b7f84f09bfd9c4632b36f0bcabf131dd7', help: this.help, error: this.error, descId: this.fieldId }, index.h("div", { key: '4f3370c99d6676072d0ef67c2fbdd05fd2d1f768', class: { 'sui-input': true, 'sui-frame': true, 'sui-ifta': true, focus: this.focused, invalid, disabled: this.isDisabled, readonly: this.readOnly }, onClick: () => this.input?.focus() }, index.h("label", { key: 'c5867efb75ce1bcc47000742345accd4289abd2c', class: "ifta-label", htmlFor: this.fieldId }, this.label, this.required ? index.h("span", { class: "sui-field-req", "aria-hidden": "true" }, "*") : null), index.h("input", { key: 'c759ac1aec1f281afbaae105c0b1f34d7f69e7b3', ref: (el) => (this.input = el), id: this.fieldId, class: "field", type: this.type, value: this.value, placeholder: this.placeholder, required: this.required, disabled: this.isDisabled, readOnly: this.readOnly, maxLength: this.maxLength, pattern: this.pattern, minLength: this.minLength, inputMode: this.hints.inputmode, enterKeyHint: this.hints.enterkeyhint, "aria-label": this.label ? undefined : this.hostLabel, "aria-labelledby": this.label ? undefined : this.hostLabelledby, "aria-invalid": invalid ? 'true' : null, "aria-describedby": fieldShell.describedBy(this.fieldId, this.help, this.error), onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, onChange: this.onChange }))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {

package/dist/cjs/sui-image-compare.cjs.entry.js

@@ -3,9 +3,9 @@
 var index = require('./index-BtWzlhN3.js');
 var formControl = require('./form-control-CvMyyCaa.js');
 var locale = require('./locale-EVD23NSt.js');
-var format = require('./format-BOushIZn.js');
-var glyphs = require('./glyphs-8uuUhG6s.js');
-var mediaFallback = require('./media-fallback-D8a7yPGc.js');
+var format = require('./format-C_36FFqb.js');
+var glyphs = require('./glyphs-BNG4Wolq.js');
+var mediaFallback = require('./media-fallback-CzSdNufY.js');
 
 const suiImageCompareCss = () => `.sc-sui-image-compare-h{display:block;font-family:var(--font-sans)}.frame.sc-sui-image-compare{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);box-sizing:border-box;user-select:none;touch-action:none;background:var(--surface-sunken)}.after.sc-sui-image-compare,.before.sc-sui-image-compare{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}.tag.sc-sui-image-compare{position:absolute;top:10px;padding:4px 9px;border-radius:var(--radius-pill);font-size:10.5px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;line-height:1.3;background:color-mix(in srgb, var(--brand-active) 72%, transparent);color:var(--brand-contrast);font-family:var(--font-sans);pointer-events:none}.tag.left.sc-sui-image-compare{left:10px}.tag.right.sc-sui-image-compare{right:10px}.divider.sc-sui-image-compare{position:absolute;top:0;bottom:0;width:2px;background:var(--ink-on-dark);cursor:ew-resize;box-shadow:0 0 6px color-mix(in srgb, var(--brand-active) 50%, transparent)}.divider.sc-sui-image-compare:focus{outline:none}.handle.sc-sui-image-compare{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--accent-contrast);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-pop);transition:background var(--duration-fast) var(--ease-out)}.handle.sc-sui-image-compare .sui-glyph.sc-sui-image-compare{font-size:12px}.divider.sc-sui-image-compare:hover .handle.sc-sui-image-compare{background:var(--accent-hover)}.frame.dragging.sc-sui-image-compare .handle.sc-sui-image-compare{background:var(--accent-active)}.divider.sc-sui-image-compare:focus-visible .handle.sc-sui-image-compare{outline:2px solid var(--focus-ring);outline-offset:1px;box-shadow:var(--focus-shadow)}@media (forced-colors: active){.divider.sc-sui-image-compare{background:CanvasText;outline:1px solid Canvas}.handle.sc-sui-image-compare{background:Canvas;color:CanvasText;border:1px solid CanvasText;box-sizing:border-box}}`;
 

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

@@ -2,20 +2,20 @@
 
 var index = require('./index-BtWzlhN3.js');
 var formControl = require('./form-control-CvMyyCaa.js');
-var modal = require('./modal-1S8X9Mu6.js');
-var layer = require('./layer-BkCcJvyt.js');
+var modal = require('./modal-BqGRqHln.js');
+var layer = require('./layer-31199iWw.js');
 var id = require('./id-Ca7UTKW6.js');
 var locale = require('./locale-EVD23NSt.js');
-var glyphs = require('./glyphs-8uuUhG6s.js');
-var mediaFallback = require('./media-fallback-D8a7yPGc.js');
+var glyphs = require('./glyphs-BNG4Wolq.js');
+var mediaFallback = require('./media-fallback-CzSdNufY.js');
 var slots = require('./slots-rhqoeAqs.js');
 require('./anchor-BjGUozqb.js');
 require('./focus-trap-CcyiWkvv.js');
-require('./overlay-DcMtiB1L.js');
+require('./overlay-CsoWlGY8.js');
 require('./direction-BaE_rqNY.js');
-require('./motion-BaUBY31j.js');
+require('./motion-D8mcyZVH.js');
 
-const suiImageCss = () => `.sc-sui-image-h{display:inline-block;font-family:var(--font-sans)}.figure.sc-sui-image{margin:0;display:inline-block}.frame.sc-sui-image{position:relative;display:block;overflow:hidden;box-sizing:border-box;padding:0;margin:0;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-sunken);cursor:default;font:inherit;color:inherit;text-align:start}.frame.preview.sc-sui-image{cursor:zoom-in}.frame.preview.sc-sui-image:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px;box-shadow:var(--focus-shadow)}.pic.sc-sui-image{display:block;width:100%;height:100%}.pic.cover.sc-sui-image{object-fit:cover}.pic.contain.sc-sui-image{object-fit:contain}.fallback.sc-sui-image{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.fallback[hidden].sc-sui-image{display:none}.frame.failed.sc-sui-image{min-width:128px;min-height:96px}.veil.sc-sui-image{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--scrim);color:var(--ink-on-dark);opacity:0;transition:opacity var(--duration-fast) var(--ease-out)}.veil.sc-sui-image .sui-glyph.sc-sui-image{font-size:18px}.frame.preview.sc-sui-image:hover .veil.sc-sui-image,.frame.preview.sc-sui-image:focus-visible .veil.sc-sui-image{opacity:1}.caption.sc-sui-image{font-size:11.5px;color:var(--ink-faint);margin-top:6px}.layer.sc-sui-image{position:fixed;inset:0;z-index:var(--z-dialog);background:color-mix(in srgb, var(--media-dark) 90%, transparent);display:flex;flex-direction:column;animation:sui-image-fade var(--duration-slow) var(--ease-out)}.layer.sc-sui-image:focus{outline:none}.bar.sc-sui-image{flex:none;display:flex;align-items:center;gap:16px;height:64px;box-sizing:border-box;padding-inline:24px 14px;background:var(--media-dark)}.big-caption.sc-sui-image{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:color-mix(in srgb, var(--ink-on-dark) 85%, transparent);font-size:13px;font-weight:600;font-family:var(--font-sans)}.tools.sc-sui-image{display:flex;align-items:center;gap:4px;margin-inline-start:auto}.sep.sc-sui-image{width:1px;height:20px;margin-inline:4px;background:color-mix(in srgb, var(--ink-on-dark) 22%, transparent)}.tool.sc-sui-image{width:40px;height:40px;padding:0;margin:0;border:0;border-radius:var(--radius-md);background:transparent;color:var(--ink-on-dark);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--duration-fast) var(--ease-out)}.tool.sc-sui-image .sui-glyph.sc-sui-image{font-size:16px}.tool.sc-sui-image:hover{background:color-mix(in srgb, var(--ink-on-dark) 14%, transparent)}.tool.sc-sui-image:focus-visible{outline:2px solid var(--ink-on-dark);outline-offset:1px;box-shadow:none}.stage.sc-sui-image{position:relative;flex:1;min-height:0;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:16px 24px}@media (max-width: 480px){.bar.sc-sui-image{flex-wrap:wrap;height:auto;min-height:64px;padding-block:12px;row-gap:6px}.big-caption.sc-sui-image{order:1;flex-basis:100%;white-space:normal;overflow-wrap:break-word}}.big.sc-sui-image{position:relative;max-width:100%;max-height:100%;border-radius:var(--radius-md);display:block;transition:transform var(--duration-base) var(--ease-out);animation:sui-image-in var(--duration-slow) var(--ease-out)}.big.pannable.sc-sui-image{cursor:grab}.big.pannable.sc-sui-image:active{cursor:grabbing}.big.panning.sc-sui-image{transition:none}.layer.closing.sc-sui-image{pointer-events:none;animation:sui-image-out var(--duration-fast) var(--ease-out) forwards}@keyframes sui-image-fade{from{opacity:0}}@keyframes sui-image-in{from{opacity:0;top:4px}}@keyframes sui-image-out{to{opacity:0}}@media (forced-colors: active){.layer.sc-sui-image{background:Canvas}.bar.sc-sui-image{background:Canvas}.big.sc-sui-image{border:1px solid CanvasText;box-sizing:border-box}.big-caption.sc-sui-image{color:CanvasText}.tool.sc-sui-image{color:ButtonText;border:1px solid ButtonText}.tool.sc-sui-image:focus-visible{outline-color:Highlight}.sep.sc-sui-image{background:CanvasText}}`;
+const suiImageCss = () => `.sc-sui-image-h{display:inline-block;font-family:var(--font-sans)}.figure.sc-sui-image{margin:0;display:block}.frame.sc-sui-image{position:relative;display:block;width:100%;overflow:hidden;box-sizing:border-box;padding:0;margin:0;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-sunken);cursor:default;font:inherit;color:inherit;text-align:start}.frame.preview.sc-sui-image{cursor:zoom-in}.frame.preview.sc-sui-image:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px;box-shadow:var(--focus-shadow)}.pic.sc-sui-image{display:block;width:100%;height:100%}.pic.cover.sc-sui-image{object-fit:cover}.pic.contain.sc-sui-image{object-fit:contain}.fallback.sc-sui-image{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.fallback[hidden].sc-sui-image{display:none}.frame.failed.sc-sui-image{min-width:128px;min-height:96px}.veil.sc-sui-image{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--scrim);color:var(--ink-on-dark);opacity:0;transition:opacity var(--duration-fast) var(--ease-out)}.veil.sc-sui-image .sui-glyph.sc-sui-image{font-size:18px}.frame.preview.sc-sui-image:hover .veil.sc-sui-image,.frame.preview.sc-sui-image:focus-visible .veil.sc-sui-image{opacity:1}.caption.sc-sui-image{font-size:11.5px;color:var(--ink-faint);margin-top:6px}.layer.sc-sui-image{position:fixed;inset:0;z-index:var(--z-dialog);background:color-mix(in srgb, var(--media-dark) 90%, transparent);display:flex;flex-direction:column;animation:sui-image-fade var(--duration-slow) var(--ease-out)}.layer.sc-sui-image:focus{outline:none}.bar.sc-sui-image{flex:none;display:flex;align-items:center;gap:16px;height:64px;box-sizing:border-box;padding-inline:24px 14px;background:var(--media-dark)}.big-caption.sc-sui-image{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:color-mix(in srgb, var(--ink-on-dark) 85%, transparent);font-size:13px;font-weight:600;font-family:var(--font-sans)}.tools.sc-sui-image{display:flex;align-items:center;gap:4px;margin-inline-start:auto}.sep.sc-sui-image{width:1px;height:20px;margin-inline:4px;background:color-mix(in srgb, var(--ink-on-dark) 22%, transparent)}.tool.sc-sui-image{width:40px;height:40px;padding:0;margin:0;border:0;border-radius:var(--radius-md);background:transparent;color:var(--ink-on-dark);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--duration-fast) var(--ease-out)}.tool.sc-sui-image .sui-glyph.sc-sui-image{font-size:16px}.tool.sc-sui-image:hover{background:color-mix(in srgb, var(--ink-on-dark) 14%, transparent)}.tool.sc-sui-image:focus-visible{outline:2px solid var(--ink-on-dark);outline-offset:1px;box-shadow:none}.stage.sc-sui-image{position:relative;flex:1;min-height:0;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:16px 24px}@media (max-width: 480px){.bar.sc-sui-image{flex-wrap:wrap;height:auto;min-height:64px;padding-block:12px;row-gap:6px}.big-caption.sc-sui-image{order:1;flex-basis:100%;white-space:normal;overflow-wrap:break-word}}.big.sc-sui-image{position:relative;max-width:100%;max-height:100%;border-radius:var(--radius-md);display:block;transition:transform var(--duration-base) var(--ease-out);animation:sui-image-in var(--duration-slow) var(--ease-out)}.big.pannable.sc-sui-image{cursor:grab}.big.pannable.sc-sui-image:active{cursor:grabbing}.big.panning.sc-sui-image{transition:none}.layer.closing.sc-sui-image{pointer-events:none;animation:sui-image-out var(--duration-fast) var(--ease-out) forwards}@keyframes sui-image-fade{from{opacity:0}}@keyframes sui-image-in{from{opacity:0;top:4px}}@keyframes sui-image-out{to{opacity:0}}@media (forced-colors: active){.layer.sc-sui-image{background:Canvas}.bar.sc-sui-image{background:Canvas}.big.sc-sui-image{border:1px solid CanvasText;box-sizing:border-box}.big-caption.sc-sui-image{color:CanvasText}.tool.sc-sui-image{color:ButtonText;border:1px solid ButtonText}.tool.sc-sui-image:focus-visible{outline-color:Highlight}.sep.sc-sui-image{background:CanvasText}}`;
 
 const mediaFallbackCss = () => `.sui-media-fallback.sc-sui-image{position:absolute;inset:0;box-sizing:border-box;padding:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--surface-sunken);color:var(--ink-faint);font:460 12.5px/1.4 var(--font-sans);text-align:center}.sui-media-fallback.sc-sui-image .sui-glyph.sc-sui-image{font-size:22px}.sui-media-fallback.sc-sui-image .sui-mf-text.sc-sui-image{color:var(--ink-muted)}.sui-media-fallback.compact.sc-sui-image{gap:0;padding:0}.sui-media-fallback.compact.sc-sui-image .sui-glyph.sc-sui-image{font-size:14px}.sui-media-fallback.inverse.sc-sui-image{background:transparent;color:color-mix(in srgb, var(--ink-on-dark) 70%, transparent)}.sui-media-fallback.inverse.sc-sui-image .sui-mf-text.sc-sui-image{color:var(--ink-on-dark)}@media (forced-colors: active){.sui-media-fallback.sc-sui-image,.sui-media-fallback.sc-sui-image .sui-mf-text.sc-sui-image{color:GrayText}}`;
 
@@ -42,7 +42,8 @@ const SuiImage = class {
     alt = '';
     /** Caption under the image (11.5px faint ink) and under the lightbox preview. */
     caption;
-    /** Frame width: a number of px or any CSS length. */
+    /** Width: a number of px or any CSS length, a percentage of the container included. The element
+     *  takes it, the frame fills it and the caption wraps to it. */
     width;
     /** Frame height: a number of px or any CSS length. */
     height;
@@ -69,7 +70,7 @@ const SuiImage = class {
     /**
      * Shows the lightbox. Mutable; the element opens it on click and closes it on Escape, the scrim
      * and the close control. Focus is trapped inside while it is open and returns to the frame
-     * afterwards. Zoomed past 1x, the picture drags to pan and the arrow keys pan it too. While open,
+     * afterward. Zoomed past 1x, the picture drags to pan and the arrow keys pan it too. While open,
      * and while it fades out, the lightbox paints in the browser's top layer, so a transformed or
      * clipping ancestor cannot trap it; everything outside it is inert and the page does not scroll,
      * and a node the page adds outside it while it is open goes inert too. The lightbox is
@@ -359,8 +360,9 @@ const SuiImage = class {
         return (index.h("button", { type: "button", class: "tool", "aria-label": label, onClick: onClick }, index.h(glyphs.Glyph, { glyph: glyph })));
     }
     render() {
+        // The width is the element's, not the frame's: a percentage on the frame resolved against a
+        // figure that shrinks to its content, so width="100%" drew the picture's own width.
         const frameStyle = {
-            width: SuiImage.len(this.width),
             height: SuiImage.len(this.height),
             borderRadius: this.radius || undefined,
         };
@@ -368,10 +370,10 @@ const SuiImage = class {
         const fit = SuiImage.one(FITS, this.fit, 'cover');
         const picture = [
             this.failed ? null : (index.h("img", { class: { pic: true, [fit]: true }, src: this.src, alt: this.alt, loading: SuiImage.one(LOADINGS, this.loading, 'lazy'), onError: this.onImageError })),
-            index.h("span", { key: 'a26973d182b104f7a4bdc114bdd3bfe5697fbbb1', class: "fallback", hidden: !this.failed }, index.h("slot", { key: '02e2716a07d9d3fef1c016da68ff83604dcafdc2', name: "error" })),
+            index.h("span", { key: '8c7b09836fbd132e42ada35d52ab7f00546e9677', class: "fallback", hidden: !this.failed }, index.h("slot", { key: 'b971b0b60c1b9088563ef84b0c5d5eb433d2af9d', name: "error" })),
             this.failed && !slots.hasSlotted(this.host, 'error') ? index.h(mediaFallback.MediaFallback, { text: locale.localeText(undefined, 'image.unavailable', undefined, 'Image unavailable') }) : null,
         ];
-        return (index.h(index.Host, { key: 'f02baa9ae7c9a0b775607cda11d8dffb56a74583' }, index.h("figure", { key: 'd9b8a137ff65c6083abecf8f5ed89c95567cfde4', class: "figure" }, this.interactive ? (index.h("button", { type: "button", class: "frame preview", style: frameStyle, "aria-label": locale.localeFormat(undefined, 'image.preview', undefined, 'Preview: {name}', { name: name }), "aria-haspopup": "dialog", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": this.open ? this.layerId : undefined, onClick: this.openPreview }, picture, index.h("span", { class: "veil", "aria-hidden": "true" }, index.h(glyphs.Glyph, { glyph: glyphs.magnifyingGlassPlus })))) : (index.h("div", { class: { frame: true, failed: this.failed }, style: frameStyle }, picture)), this.caption ? index.h("figcaption", { class: "caption" }, this.caption) : null), this.open || this.closing ? (index.h("div", { id: this.layerId, class: { layer: true, closing: this.closing }, inert: this.closing, ref: (el) => (this.layer = el), role: "dialog", "aria-label": name, onClick: this.onLayerClick, onKeyDown: this.onLayerKeyDown }, index.h("div", { class: "bar" }, this.caption ? index.h("div", { class: "big-caption" }, this.caption) : null, index.h("div", { class: "tools" }, this.tool(locale.localeText(undefined, 'image.zoomIn', undefined, 'Zoom in'), glyphs.magnifyingGlassPlus, () => this.setZoom(Math.min(2.5, +(this.zoom + 0.25).toFixed(2)))), this.tool(locale.localeText(undefined, 'image.zoomOut', undefined, 'Zoom out'), glyphs.magnifyingGlassMinus, () => this.setZoom(Math.max(0.5, +(this.zoom - 0.25).toFixed(2)))), index.h("span", { class: "sep", "aria-hidden": "true" }), this.tool(locale.localeText(undefined, 'image.rotateLeft', undefined, 'Rotate left'), glyphs.rotateLeft, () => this.turn(-90)), this.tool(locale.localeText(undefined, 'image.rotateRight', undefined, 'Rotate right'), glyphs.rotateRight, () => this.turn(90)), index.h("span", { class: "sep", "aria-hidden": "true" }), this.tool(locale.localeText(undefined, 'image.close', undefined, 'Close'), glyphs.xmark, () => this.requestClose('close-button')))), index.h("div", { class: "stage", ref: (el) => (this.stage = el) }, index.h("img", { class: { big: true, pannable: this.pannable, panning: this.panning }, ref: (el) => (this.big = el), src: this.bigSrc, alt: this.alt, style: { transform: this.transform() }, onError: this.onPreviewError, onPointerDown: this.onPanDown })))) : null));
+        return (index.h(index.Host, { key: '634729e4a9db6c5aa5752f1c37e2b324b8810513', style: { width: SuiImage.len(this.width) } }, index.h("figure", { key: 'a21f0a5409a42d2ff2b46e2e6152c386664ddac8', class: "figure" }, this.interactive ? (index.h("button", { type: "button", class: "frame preview", style: frameStyle, "aria-label": locale.localeFormat(undefined, 'image.preview', undefined, 'Preview: {name}', { name: name }), "aria-haspopup": "dialog", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": this.open ? this.layerId : undefined, onClick: this.openPreview }, picture, index.h("span", { class: "veil", "aria-hidden": "true" }, index.h(glyphs.Glyph, { glyph: glyphs.magnifyingGlassPlus })))) : (index.h("div", { class: { frame: true, failed: this.failed }, style: frameStyle }, picture)), this.caption ? index.h("figcaption", { class: "caption" }, this.caption) : null), this.open || this.closing ? (index.h("div", { id: this.layerId, class: { layer: true, closing: this.closing }, inert: this.closing, ref: (el) => (this.layer = el), role: "dialog", "aria-label": name, onClick: this.onLayerClick, onKeyDown: this.onLayerKeyDown }, index.h("div", { class: "bar" }, this.caption ? index.h("div", { class: "big-caption" }, this.caption) : null, index.h("div", { class: "tools" }, this.tool(locale.localeText(undefined, 'image.zoomIn', undefined, 'Zoom in'), glyphs.magnifyingGlassPlus, () => this.setZoom(Math.min(2.5, +(this.zoom + 0.25).toFixed(2)))), this.tool(locale.localeText(undefined, 'image.zoomOut', undefined, 'Zoom out'), glyphs.magnifyingGlassMinus, () => this.setZoom(Math.max(0.5, +(this.zoom - 0.25).toFixed(2)))), index.h("span", { class: "sep", "aria-hidden": "true" }), this.tool(locale.localeText(undefined, 'image.rotateLeft', undefined, 'Rotate left'), glyphs.rotateLeft, () => this.turn(-90)), this.tool(locale.localeText(undefined, 'image.rotateRight', undefined, 'Rotate right'), glyphs.rotateRight, () => this.turn(90)), index.h("span", { class: "sep", "aria-hidden": "true" }), this.tool(locale.localeText(undefined, 'image.close', undefined, 'Close'), glyphs.xmark, () => this.requestClose('close-button')))), index.h("div", { class: "stage", ref: (el) => (this.stage = el) }, index.h("img", { class: { big: true, pannable: this.pannable, panning: this.panning }, ref: (el) => (this.big = el), src: this.bigSrc, alt: this.alt, style: { transform: this.transform() }, onError: this.onPreviewError, onPointerDown: this.onPanDown })))) : null));
     }
     static get watchers() { return {
         "open": [{

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

@@ -3,7 +3,7 @@
 var index = require('./index-BtWzlhN3.js');
 var locale = require('./locale-EVD23NSt.js');
 var formControl = require('./form-control-CvMyyCaa.js');
-var glyphs = require('./glyphs-8uuUhG6s.js');
+var glyphs = require('./glyphs-BNG4Wolq.js');
 
 const suiInplaceCss = () => `.sc-sui-inplace-h{display:inline-flex;flex-direction:column;gap:4px;max-width:100%;font-family:var(--font-sans);vertical-align:top}.sui-inplace-label.sc-sui-inplace{font-size:11px;font-weight:650;letter-spacing:0.05em;text-transform:uppercase;color:var(--ink-faint)}.sui-inplace-text.sc-sui-inplace,.sui-inplace-input.sc-sui-inplace,.sui-inplace-field.sc-sui-inplace::after{box-sizing:border-box;min-width:0;min-height:28px;padding:2px 8px;border:1px solid transparent;border-radius:var(--radius-md);font:inherit}.sui-inplace-text.sc-sui-inplace,.sui-inplace-field.sc-sui-inplace{margin:-3px -9px;max-width:calc(100% + 18px)}.sui-inplace-text.sc-sui-inplace{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--ink);cursor:text;transition:background var(--duration-fast) var(--ease-out)}.sui-inplace-text.empty.sc-sui-inplace{color:var(--ink-placeholder)}.sui-inplace-text.sc-sui-inplace .value.sc-sui-inplace{min-width:0;max-width:100%;overflow-wrap:anywhere}.sui-inplace-text.locked.sc-sui-inplace{cursor:default}.sui-inplace-text.locked.sc-sui-inplace:hover{background:transparent}[disabled].sc-sui-inplace-h .sui-inplace-text.sc-sui-inplace{color:var(--disabled-ink);cursor:not-allowed}[disabled].sc-sui-inplace-h .sui-inplace-text.empty.sc-sui-inplace{color:var(--ink-placeholder)}.sui-inplace-text.sc-sui-inplace:hover{--ink-faint:var(--ink-muted);background:var(--surface-hover)}.sui-inplace-text.empty.sc-sui-inplace:not(.locked):hover{color:var(--ink-faint)}.sui-inplace-text.sc-sui-inplace:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px;box-shadow:var(--focus-shadow)}.sui-inplace-text.sc-sui-inplace .sui-glyph.sc-sui-inplace{font-size:0.8em;color:var(--ink-faint);opacity:0.45;transition:opacity var(--duration-fast) var(--ease-out)}.sui-inplace-text.sc-sui-inplace:hover .sui-glyph.sc-sui-inplace{opacity:1}.sui-inplace-field.sc-sui-inplace{display:inline-grid;align-items:stretch}.sui-inplace-field.sc-sui-inplace::after{content:attr(data-value);grid-area:1 / 1;visibility:hidden;white-space:pre;padding-inline-end:calc(16px + 0.8em)}.sui-inplace-input.sc-sui-inplace{grid-area:1 / 1;width:100%;margin:0;color:var(--ink)}.sui-inplace-input.sc-sui-inplace::placeholder{color:var(--ink-placeholder)}@media (forced-colors: active){.sui-inplace-text.sc-sui-inplace{border-style:none;padding:3px 9px}.sui-inplace-text.sc-sui-inplace .sui-glyph.sc-sui-inplace{opacity:1}}`;
 
@@ -166,7 +166,7 @@ const SuiInplace = class {
     render() {
         const placeholder = locale.localeText(undefined, 'inplace.placeholder', this.placeholder, 'Click to edit');
         const locked = this.disabled || this.readOnly;
-        return (index.h(index.Host, { key: 'b3bdad0742ec1f24e5d4fffe2a6afee1b1f8584a' }, this.label ? index.h("span", { class: "sui-inplace-label" }, this.label) : null, this.editing ? (index.h("span", { class: "sui-inplace-field", "data-value": this.value || placeholder }, index.h("input", { ref: (el) => (this.input = el), class: "sui-inplace-input sui-frame", type: "text", size: 1, name: this.name, value: this.value, placeholder: this.placeholder, "aria-label": this.label || placeholder, onInput: this.onInput, onBlur: this.onBlur, onKeyDown: this.onInputKey }))) : (index.h("span", { ref: (el) => (this.text = el), class: { 'sui-inplace-text': true, empty: !this.value, locked }, role: this.disabled ? undefined : 'button', tabIndex: this.disabled ? undefined : 0, "aria-disabled": this.disabled ? 'true' : undefined, "aria-readonly": this.readOnly && !this.disabled ? 'true' : undefined, "aria-label": this.disabled ? undefined : this.label || undefined, onClick: locked ? undefined : () => this.begin(), onKeyDown: locked ? undefined : this.onTextKey }, index.h("span", { class: "value" }, this.value || placeholder), locked ? null : index.h(glyphs.Glyph, { glyph: glyphs.penToSquareRegular }))), !this.editing && this.name ? index.h("input", { type: "hidden", name: this.name, value: this.value }) : null));
+        return (index.h(index.Host, { key: '44759a46406ae15c593d34c486b979813121ca7e' }, this.label ? index.h("span", { class: "sui-inplace-label" }, this.label) : null, this.editing ? (index.h("span", { class: "sui-inplace-field", "data-value": this.value || placeholder }, index.h("input", { ref: (el) => (this.input = el), class: "sui-inplace-input sui-frame", type: "text", size: 1, name: this.name, value: this.value, placeholder: this.placeholder, "aria-label": this.label || placeholder, onInput: this.onInput, onBlur: this.onBlur, onKeyDown: this.onInputKey }))) : (index.h("span", { ref: (el) => (this.text = el), class: { 'sui-inplace-text': true, empty: !this.value, locked }, role: this.disabled ? undefined : 'button', tabIndex: this.disabled ? undefined : 0, "aria-disabled": this.disabled ? 'true' : undefined, "aria-readonly": this.readOnly && !this.disabled ? 'true' : undefined, "aria-label": this.disabled ? undefined : this.label || undefined, onClick: locked ? undefined : () => this.begin(), onKeyDown: locked ? undefined : this.onTextKey }, index.h("span", { class: "value" }, this.value || placeholder), locked ? null : index.h(glyphs.Glyph, { glyph: glyphs.penToSquareRegular }))), !this.editing && this.name ? index.h("input", { type: "hidden", name: this.name, value: this.value }) : null));
     }
     static get watchers() { return {
         "editing": [{

package/dist/cjs/{sui-input-group-CafB_Wek.js → sui-input-group-DL65F67E.js}

@@ -1,16 +1,16 @@
 'use strict';
 
 var index = require('./index-BtWzlhN3.js');
-var fieldShell = require('./field-shell-XLDTgSCW.js');
+var fieldShell = require('./field-shell-BJ_XxyIs.js');
 var id = require('./id-Ca7UTKW6.js');
 var slots = require('./slots-rhqoeAqs.js');
-var aria = require('./aria-DXFt0vvU.js');
-var heldFocus = require('./held-focus-DeQVYDkc.js');
-require('./glyphs-8uuUhG6s.js');
-require('./overlay-DcMtiB1L.js');
+var aria = require('./aria-DsLSiGlA.js');
+var heldFocus = require('./held-focus-ikz5F6kW.js');
+require('./glyphs-BNG4Wolq.js');
+require('./overlay-CsoWlGY8.js');
 require('./direction-BaE_rqNY.js');
 require('./focus-trap-CcyiWkvv.js');
-require('./motion-BaUBY31j.js');
+require('./motion-D8mcyZVH.js');
 
 const suiInputGroupCss = () => `.sc-sui-input-group-h{display:block;font-family:var(--font-sans)}.sui-input.sui-group.sc-sui-input-group{display:flex;align-items:stretch;padding:0;overflow:hidden}.sui-input.sui-group.sm.sc-sui-input-group,.sui-input.sui-group.md.sc-sui-input-group,.sui-input.sui-group.lg.sc-sui-input-group{padding:0}.sui-frame.focus-own.sc-sui-input-group:focus-within:not(.focus){border-color:var(--control-border);outline:none;box-shadow:none}.sui-frame.focus-own.invalid.sc-sui-input-group:focus-within:not(.focus){border-color:var(--danger);outline:1px solid var(--danger);outline-offset:-2px;box-shadow:none}.sui-group.disabled.sc-sui-input-group{--sui-addon-bg:transparent}.sui-group.sm.sc-sui-input-group{height:var(--control-sm);--sui-group-height:var(--control-sm)}.sui-group.md.sc-sui-input-group{height:var(--control-md);--sui-group-height:var(--control-md)}.sui-group.lg.sc-sui-input-group{height:var(--control-lg);--sui-group-height:var(--control-lg)}.sc-sui-input-group-s>*{display:flex;align-items:stretch;flex:none;min-width:0;box-sizing:border-box;border-inline-start:1px solid var(--control-border);--sui-field-border:transparent;--sui-field-edge:none;--sui-field-halo:none;--sui-field-radius:0;--sui-field-bg:transparent;--sui-field-height:calc(var(--sui-group-height, var(--control-md)) - 2px)}.sc-sui-input-group-s>:first-child{border-inline-start:none}.sc-sui-input-group-s>input,.sc-sui-input-group-s>[data-grow]{flex:1 1 0;width:0}.sc-sui-input-group-s>[data-grow]:not(input){flex-direction:column;justify-content:center}.sc-sui-input-group-s>sui-input-group-addon{align-items:center}.sc-sui-input-group-s>input{border-top:none;border-inline-end:none;border-bottom:none;outline:none;background:transparent;color:var(--ink);padding:0 12px;font-size:13px;font-family:var(--font-sans);font-weight:460;min-width:0;margin:0;height:auto}.sc-sui-input-group-s>input:disabled{color:var(--disabled-ink);cursor:not-allowed}.sc-sui-input-group-s>input:focus-visible{outline:none}.sc-sui-input-group-s>sui-button{align-items:stretch}.sc-sui-input-group-s>sui-button,.sc-sui-input-group-s>sui-icon-button{--sui-button-radius:0;--sui-button-height:calc(var(--sui-group-height, var(--control-md)) - 2px);--sui-button-border:transparent;--sui-button-hover-border:transparent;--sui-button-focus-offset:-3px;--sui-button-focus-shadow:none;--sui-button-focus-brand:var(--brand-contrast);--sui-button-focus-accent:var(--accent-contrast);--sui-button-focus-danger:var(--danger-contrast)}.sc-sui-input-group-s>select{display:block;appearance:none;-webkit-appearance:none;border-top:none;border-inline-end:none;border-bottom:none;border-radius:0;outline:none;color:var(--ink);padding-block:0;padding-inline:12px 28px;font-size:13px;font-family:var(--font-sans);font-weight:460;min-width:0;margin:0;height:auto;line-height:calc(var(--sui-group-height, var(--control-md)) - 2px);cursor:pointer;background-color:transparent;background-image:linear-gradient(45deg, transparent 38%, var(--ink-faint) 38%, var(--ink-faint) 62%, transparent 62%),     linear-gradient(135deg, transparent 38%, var(--ink-faint) 38%, var(--ink-faint) 62%, transparent 62%);background-position:calc(100% - 17px) 50%, calc(100% - 12px) 50%;background-size:6px 6px, 6px 6px;background-repeat:no-repeat}.sc-sui-input-group-s>select:dir(rtl){background-position:12px 50%, 17px 50%}.sc-sui-input-group-s>select:hover:not(:disabled){background-image:linear-gradient(45deg, transparent 38%, var(--ink) 38%, var(--ink) 62%, transparent 62%),     linear-gradient(135deg, transparent 38%, var(--ink) 38%, var(--ink) 62%, transparent 62%)}.sc-sui-input-group-s>select:disabled{color:var(--disabled-ink);cursor:not-allowed}.sc-sui-input-group-s>select:focus-visible{outline:none}@media (forced-colors: active){.sui-input.sui-group.sc-sui-input-group{color:CanvasText}.sc-sui-input-group-s>select,.sc-sui-input-group-s>select:hover:not(:disabled){forced-color-adjust:none;color:inherit;border-color:currentColor;background-image:linear-gradient(45deg, transparent 38%, currentColor 38%, currentColor 62%, transparent 62%),       linear-gradient(135deg, transparent 38%, currentColor 38%, currentColor 62%, transparent 62%)}.sc-sui-input-group-s>select:disabled{color:GrayText}}`;
 

package/dist/cjs/sui-input-group-addon.cjs.entry.js

@@ -9,7 +9,7 @@ const SuiInputGroupAddon = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '9c6c955aa8f342625371e845303b877a3c883a07' }, index.h("slot", { key: '74c95fa3b70f163443293d424e285950b4a7988a' })));
+        return (index.h(index.Host, { key: '342c69b3bb6d66a2eb1888a3eb7309eb4cc38847' }, index.h("slot", { key: '73d4dc32aeb4f8c4c01eaee44a5ec63f470adc94' })));
     }
 };
 SuiInputGroupAddon.style = suiInputGroupAddonCss();

package/dist/cjs/sui-input-group.cjs.entry.js

@@ -1,17 +1,17 @@
 'use strict';
 
-var suiInputGroup_entry = require('./sui-input-group-CafB_Wek.js');
+var suiInputGroup_entry = require('./sui-input-group-DL65F67E.js');
 require('./index-BtWzlhN3.js');
-require('./field-shell-XLDTgSCW.js');
-require('./glyphs-8uuUhG6s.js');
+require('./field-shell-BJ_XxyIs.js');
+require('./glyphs-BNG4Wolq.js');
 require('./id-Ca7UTKW6.js');
 require('./slots-rhqoeAqs.js');
-require('./aria-DXFt0vvU.js');
-require('./held-focus-DeQVYDkc.js');
-require('./overlay-DcMtiB1L.js');
+require('./aria-DsLSiGlA.js');
+require('./held-focus-ikz5F6kW.js');
+require('./overlay-CsoWlGY8.js');
 require('./direction-BaE_rqNY.js');
 require('./focus-trap-CcyiWkvv.js');
-require('./motion-BaUBY31j.js');
+require('./motion-D8mcyZVH.js');
 
 
 

package/dist/cjs/sui-input-mask.cjs.entry.js

@@ -1,14 +1,14 @@
 'use strict';
 
 var index = require('./index-BtWzlhN3.js');
-var fieldShell = require('./field-shell-XLDTgSCW.js');
+var fieldShell = require('./field-shell-BJ_XxyIs.js');
 var id = require('./id-Ca7UTKW6.js');
 var formControl = require('./form-control-CvMyyCaa.js');
 var keyFilter = require('./key-filter-CanQqyjK.js');
-var aria = require('./aria-DXFt0vvU.js');
+var aria = require('./aria-DsLSiGlA.js');
 var locale = require('./locale-EVD23NSt.js');
 var formDisabled = require('./form-disabled-wss8T3bH.js');
-require('./glyphs-8uuUhG6s.js');
+require('./glyphs-BNG4Wolq.js');
 
 const MASK_SLOTS = { '9': /^[0-9]$/, a: /^[a-zA-Z]$/, '*': /^[a-zA-Z0-9]$/ };
 /** PrimeVue's marker: slots and literals after it need not be filled for the value to be complete. */
@@ -303,7 +303,7 @@ const SuiInputMask = class {
         const optional = this.mask.includes('?');
         const requiredPart = optional ? this.mask.slice(0, this.mask.indexOf('?')) : '';
         const size = SIZES.includes(this.size) ? this.size : 'md';
-        return (index.h(fieldShell.FieldShell, { key: '634471bc71366453ed3e4e2f9bfcf3c0ba8f730c', label: this.label, required: this.required, help: this.help, error: this.error, htmlFor: this.fieldId, descId: this.fieldId }, index.h("input", { key: '5b74078d0252d5effe929593cf04f1464d00e301', ref: (el) => (this.input = el), id: this.fieldId, class: { 'sui-input': true, 'sui-frame': true, 'sui-mask': true, [size]: true, invalid }, type: "text", value: this.value, placeholder: placeholder, maxLength: pattern.length, required: this.required, disabled: this.isDisabled, readOnly: this.readOnly, autocomplete: this.autocomplete ?? 'off', "aria-label": this.label ? undefined : this.hostLabel, "aria-labelledby": this.label ? undefined : this.hostLabelledby, "aria-invalid": invalid ? 'true' : null, "aria-describedby": [fieldShell.describedBy(this.fieldId, this.help, this.error), `${this.fieldId}-fmt`].filter(Boolean).join(' ') || null, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, onInput: this.onInput, onChange: this.onChange }), index.h("span", { key: '4bb157280e88de2a4c6355e05f37ca93862e1949', class: "sui-mask-fmt", id: `${this.fieldId}-fmt` }, optional && requiredPart
+        return (index.h(fieldShell.FieldShell, { key: '7ae81732110f63e53c55f5d25f2b7d6be76071ea', label: this.label, required: this.required, help: this.help, error: this.error, htmlFor: this.fieldId, descId: this.fieldId }, index.h("input", { key: 'd3ed14244f1eba2e4590a039876f91488b023a5f', ref: (el) => (this.input = el), id: this.fieldId, class: { 'sui-input': true, 'sui-frame': true, 'sui-mask': true, [size]: true, invalid }, type: "text", value: this.value, placeholder: placeholder, maxLength: pattern.length, required: this.required, disabled: this.isDisabled, readOnly: this.readOnly, autocomplete: this.autocomplete ?? 'off', "aria-label": this.label ? undefined : this.hostLabel, "aria-labelledby": this.label ? undefined : this.hostLabelledby, "aria-invalid": invalid ? 'true' : null, "aria-describedby": [fieldShell.describedBy(this.fieldId, this.help, this.error), `${this.fieldId}-fmt`].filter(Boolean).join(' ') || null, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, onInput: this.onInput, onChange: this.onChange }), index.h("span", { key: 'bd610e4b2b15ac2e366ca1817a2f1b91dfb50e86', class: "sui-mask-fmt", id: `${this.fieldId}-fmt` }, optional && requiredPart
             ? locale.localeFormat(undefined, 'input-mask.formatPartial', undefined, 'Format: {pattern} ({part} required)', { pattern, part: requiredPart })
             : locale.localeFormat(undefined, 'input-mask.format', undefined, 'Format: {pattern}', { pattern }))));
     }