@haiyue/ui 0.2.1 → 0.2.2

package/dist/masonry.d.ts

@@ -0,0 +1,36 @@
+export interface HYMasonryLayoutChangeDetail {
+    columns: number;
+    itemCount: number;
+    height: number;
+}
+/** Places default-slot HTML elements into the shortest column without changing DOM/focus order. */
+export declare class HYMasonry extends HTMLElement {
+    private readonly _layout;
+    private readonly _slot;
+    private readonly _resizeObserver;
+    private readonly _mutationObserver;
+    private readonly _items;
+    private _frame;
+    private _connected;
+    private _lastLayout;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    /** Zero (the default) selects as many columns as fit minColumnWidth. */
+    get columns(): number;
+    set columns(value: number);
+    /** Preferred minimum column width in CSS pixels; narrow containers still fit one column. */
+    get minColumnWidth(): number;
+    set minColumnWidth(value: number);
+    /** Horizontal and vertical spacing in CSS pixels. */
+    get gap(): number;
+    set gap(value: number);
+    /** Coalesces layout requests into the next animation frame. Safe while disconnected. */
+    refresh: () => void;
+    private _releaseItem;
+    private _setItemProperty;
+    private _updateLayout;
+}
+export declare function defineMasonryComponents(): void;

package/dist/masonry.js

@@ -0,0 +1,171 @@
+const itemProperties = ['--_hy-masonry-width', '--_hy-masonry-x', '--_hy-masonry-y'];
+function numberOption(value, fallback, min, max) {
+    if (value === null || value === '')
+        return fallback;
+    const number = Number(value);
+    return Number.isFinite(number) ? Math.min(max, Math.max(min, number)) : fallback;
+}
+/** Places default-slot HTML elements into the shortest column without changing DOM/focus order. */
+export class HYMasonry extends HTMLElement {
+    _layout = document.createElement('div');
+    _slot = document.createElement('slot');
+    _resizeObserver = new ResizeObserver(() => this.refresh());
+    _mutationObserver = new MutationObserver(() => this.refresh());
+    _items = new Map();
+    _frame = 0;
+    _connected = false;
+    _lastLayout = '';
+    static get observedAttributes() { return ['columns', 'min-column-width', 'gap']; }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = `
+      :host { display: block; min-width: 0; }
+      :host([hidden]) { display: none; }
+      .layout { position: relative; min-width: 0; }
+      slot { display: contents; }
+      ::slotted(*) {
+        position: absolute;
+        box-sizing: border-box;
+        min-width: 0;
+        max-width: none;
+        width: var(--_hy-masonry-width);
+        inset-inline-start: var(--_hy-masonry-x);
+        top: var(--_hy-masonry-y);
+        margin: 0;
+      }
+      ::slotted([hidden]) { display: none !important; }
+    `;
+        this._layout.className = 'layout';
+        this._layout.part.add('layout');
+        this._layout.append(this._slot);
+        root.append(style, this._layout);
+    }
+    connectedCallback() {
+        if (this._connected)
+            return;
+        this._connected = true;
+        this._slot.addEventListener('slotchange', this.refresh);
+        this._resizeObserver.observe(this._layout);
+        this._mutationObserver.observe(this, {
+            childList: true, subtree: true, attributes: true,
+            attributeFilter: ['hidden', 'class', 'style', 'slot'],
+        });
+        this.refresh();
+    }
+    disconnectedCallback() {
+        this._connected = false;
+        this._slot.removeEventListener('slotchange', this.refresh);
+        this._resizeObserver.disconnect();
+        this._mutationObserver.disconnect();
+        if (this._frame)
+            cancelAnimationFrame(this._frame);
+        this._frame = 0;
+        for (const item of this._items.keys())
+            this._releaseItem(item);
+        this._layout.style.removeProperty('height');
+        this._lastLayout = '';
+    }
+    attributeChangedCallback() { this.refresh(); }
+    /** Zero (the default) selects as many columns as fit minColumnWidth. */
+    get columns() { return Math.floor(numberOption(this.getAttribute('columns'), 0, 0, 128)); }
+    set columns(value) { this.setAttribute('columns', String(Math.floor(numberOption(value, 0, 0, 128)))); }
+    /** Preferred minimum column width in CSS pixels; narrow containers still fit one column. */
+    get minColumnWidth() { return numberOption(this.getAttribute('min-column-width'), 240, 1, 100_000); }
+    set minColumnWidth(value) { this.setAttribute('min-column-width', String(numberOption(value, 240, 1, 100_000))); }
+    /** Horizontal and vertical spacing in CSS pixels. */
+    get gap() { return numberOption(this.getAttribute('gap'), 16, 0, 10_000); }
+    set gap(value) { this.setAttribute('gap', String(numberOption(value, 16, 0, 10_000))); }
+    /** Coalesces layout requests into the next animation frame. Safe while disconnected. */
+    refresh = () => {
+        if (!this._connected || this._frame)
+            return;
+        this._frame = requestAnimationFrame(() => {
+            this._frame = 0;
+            this._updateLayout();
+        });
+    };
+    _releaseItem(item) {
+        const saved = this._items.get(item);
+        if (!saved)
+            return;
+        itemProperties.forEach((property, index) => {
+            const { value, priority } = saved[index];
+            if (value)
+                item.style.setProperty(property, value, priority);
+            else
+                item.style.removeProperty(property);
+        });
+        this._resizeObserver.unobserve(item);
+        this._items.delete(item);
+    }
+    _setItemProperty(item, property, value) {
+        const text = `${value}px`;
+        if (item.style.getPropertyValue(property) !== text)
+            item.style.setProperty(property, text);
+    }
+    _updateLayout() {
+        const items = this._slot.assignedElements({ flatten: true }).filter((item) => item instanceof HTMLElement);
+        const current = new Set(items);
+        for (const item of this._items.keys())
+            if (!current.has(item))
+                this._releaseItem(item);
+        for (const item of items) {
+            if (this._items.has(item))
+                continue;
+            this._items.set(item, itemProperties.map(property => ({
+                value: item.style.getPropertyValue(property), priority: item.style.getPropertyPriority(property),
+            })));
+            this._resizeObserver.observe(item, { box: 'border-box' });
+        }
+        const width = this._layout.clientWidth;
+        if (width <= 0)
+            return; // A hidden container is measured again when ResizeObserver sees it.
+        const gap = this.gap;
+        const requested = this.columns || Math.max(1, Math.floor((width + gap) / (this.minColumnWidth + gap)));
+        const columns = Math.min(128, requested, Math.max(1, Math.floor((width + gap) / (1 + gap))));
+        const itemWidth = (width - gap * (columns - 1)) / columns;
+        const visible = items.filter(item => !item.hidden && getComputedStyle(item).display !== 'none');
+        for (const item of visible)
+            this._setItemProperty(item, itemProperties[0], itemWidth);
+        // Read used CSS sizes before writing positions. Unlike DOMRect, these are
+        // unaffected by transforms, and unlike offsetHeight they retain fractions.
+        const itemHeights = visible.map(item => {
+            const style = getComputedStyle(item);
+            const contentHeight = Number.parseFloat(style.height);
+            if (!Number.isFinite(contentHeight))
+                return item.offsetHeight;
+            return contentHeight + (style.boxSizing === 'border-box' ? 0 :
+                Number.parseFloat(style.paddingTop) + Number.parseFloat(style.paddingBottom) +
+                    Number.parseFloat(style.borderTopWidth) + Number.parseFloat(style.borderBottomWidth));
+        });
+        const heights = Array(columns).fill(0);
+        const positions = [];
+        visible.forEach((item, index) => {
+            const column = heights.indexOf(Math.min(...heights));
+            const x = column * (itemWidth + gap);
+            const y = heights[column];
+            this._setItemProperty(item, itemProperties[1], x);
+            this._setItemProperty(item, itemProperties[2], y);
+            const height = itemHeights[index];
+            heights[column] = y + height + gap;
+            positions.push(x, y, height);
+        });
+        const height = visible.length ? Math.max(...heights) - gap : 0;
+        if (this._layout.style.height !== `${height}px`)
+            this._layout.style.height = `${height}px`;
+        const signature = JSON.stringify([columns, itemWidth, height, positions]);
+        if (signature === this._lastLayout)
+            return;
+        this._lastLayout = signature;
+        this.dispatchEvent(new CustomEvent('layout-change', {
+            detail: { columns, itemCount: visible.length, height }, bubbles: true, composed: true,
+        }));
+    }
+}
+export function defineMasonryComponents() {
+    if (!customElements.get('hy-masonry'))
+        customElements.define('hy-masonry', HYMasonry);
+}
+//# sourceMappingURL=masonry.js.map

package/dist/modal.d.ts

@@ -0,0 +1,73 @@
+export type HYModalCloseReason = 'ok' | 'cancel' | 'close-button' | 'mask' | 'escape' | 'programmatic';
+export interface HYModalActionDetail {
+    readonly reason: Exclude<HYModalCloseReason, 'programmatic'>;
+}
+export interface HYModalCloseDetail {
+    readonly reason: HYModalCloseReason | string;
+}
+/** A native modal with default actions, async confirmation support and slotted content. */
+export declare class HYModal extends HTMLElement {
+    private readonly _dialog;
+    private readonly _headingSlot;
+    private readonly _titleText;
+    private readonly _closeButton;
+    private readonly _footer;
+    private readonly _cancelButton;
+    private readonly _okButton;
+    private readonly _okLabel;
+    private readonly _spinner;
+    private readonly _detachedContent;
+    private readonly _contentObserver;
+    private _returnFocus;
+    private _shown;
+    private _scrollDocument;
+    private _session;
+    private _closeReason;
+    private _pointerDownOutside;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, value: string | null): void;
+    get open(): boolean;
+    set open(value: boolean);
+    get heading(): string;
+    set heading(value: string);
+    get width(): number;
+    set width(value: number);
+    get centered(): boolean;
+    set centered(value: boolean);
+    get closable(): boolean;
+    set closable(value: boolean);
+    get maskClosable(): boolean;
+    set maskClosable(value: boolean);
+    get keyboard(): boolean;
+    set keyboard(value: boolean);
+    get confirmLoading(): boolean;
+    set confirmLoading(value: boolean);
+    get confirmDisabled(): boolean;
+    set confirmDisabled(value: boolean);
+    get okText(): string;
+    set okText(value: string);
+    get cancelText(): string;
+    set cancelText(value: string);
+    get showFooter(): boolean;
+    set showFooter(value: boolean);
+    get controlled(): boolean;
+    set controlled(value: boolean);
+    get destroyOnHidden(): boolean;
+    set destroyOnHidden(value: boolean);
+    showModal(): void;
+    close(reason?: HYModalCloseDetail['reason']): void;
+    private _syncView;
+    private _syncOpen;
+    private _finalizeClose;
+    private _requestAction;
+    private _outside;
+    private _stashContent;
+    private _restoreContent;
+    private _restoreFocus;
+    private _lockScroll;
+    private _unlockScroll;
+}
+export declare function defineModalComponents(): void;

package/dist/modal.js

@@ -0,0 +1,361 @@
+const scrollLocks = new WeakMap();
+function focusedElement(document) {
+    let element = document.activeElement;
+    while (element?.shadowRoot?.activeElement)
+        element = element.shadowRoot.activeElement;
+    return element instanceof HTMLElement ? element : null;
+}
+function focusableElements(root) {
+    const result = [];
+    const visit = (element) => {
+        if (element instanceof HTMLElement && (element.hidden || element.inert || element.matches(':disabled')))
+            return;
+        const style = getComputedStyle(element);
+        if (style.display === 'none' || style.visibility === 'hidden')
+            return;
+        if (element instanceof HTMLSlotElement) {
+            const assigned = element.assignedElements({ flatten: true });
+            for (const child of assigned.length ? assigned : element.children)
+                visit(child);
+            return;
+        }
+        if (element instanceof HTMLElement && element.getClientRects().length &&
+            (element.tabIndex >= 0 || (element.isContentEditable && !element.hasAttribute('tabindex'))))
+            result.push(element);
+        for (const child of element.shadowRoot?.children ?? element.children)
+            visit(child);
+    };
+    for (const child of root.children)
+        visit(child);
+    return result.sort((a, b) => (a.tabIndex > 0 ? a.tabIndex : Infinity) - (b.tabIndex > 0 ? b.tabIndex : Infinity));
+}
+/** A native modal with default actions, async confirmation support and slotted content. */
+export class HYModal extends HTMLElement {
+    _dialog = document.createElement('dialog');
+    _headingSlot = document.createElement('slot');
+    _titleText = document.createElement('span');
+    _closeButton = document.createElement('button');
+    _footer = document.createElement('footer');
+    _cancelButton = document.createElement('button');
+    _okButton = document.createElement('button');
+    _okLabel = document.createElement('span');
+    _spinner = document.createElement('span');
+    _detachedContent = document.createDocumentFragment();
+    _contentObserver = new MutationObserver(() => {
+        if (this.isConnected && !this._shown && this.destroyOnHidden)
+            this._stashContent();
+    });
+    _returnFocus = null;
+    _shown = false;
+    _scrollDocument = null;
+    _session = 0;
+    _closeReason = 'programmatic';
+    _pointerDownOutside = false;
+    static get observedAttributes() {
+        return ['open', 'heading', 'width', 'centered', 'closable', 'mask-closable', 'keyboard', 'confirm-loading', 'confirm-disabled', 'ok-text', 'cancel-text', 'show-footer', 'controlled', 'destroy-on-hidden', 'aria-label'];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = `
+      :host { color: var(--hy-text-color, #eef0ff); font: 13px/1.5 system-ui, sans-serif; }
+      dialog { box-sizing: border-box; flex-direction: column; width: min(var(--_hy-modal-width, var(--hy-modal-width, 520px)), calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--hy-border-color, #343765); border-radius: var(--hy-modal-radius, 12px); color: inherit; background: var(--hy-modal-bg-color, var(--hy-surface-elevated-color, #181a40)); box-shadow: 0 24px 80px var(--hy-modal-shadow-color, rgba(0,0,0,.45)); }
+      dialog:not([open]), [hidden] { display: none !important; }
+      dialog[open] { display: flex; animation: hy-modal-enter var(--hy-modal-duration, 160ms) ease-out; }
+      dialog::backdrop { background: var(--hy-modal-mask-color, var(--hy-dialog-backdrop-color, rgba(3,7,12,.66))); backdrop-filter: blur(var(--hy-modal-mask-blur, 2px)); }
+      :host([centered="false"]) dialog { margin: min(64px, 10vh) auto auto; max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); }
+      .header { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px 12px 20px; box-sizing: border-box; border-bottom: 1px solid var(--hy-border-color, #343765); }
+      h2 { flex: 1; min-width: 0; margin: 0; font-size: 16px; font-weight: 650; overflow-wrap: anywhere; }
+      .body { flex: 1 1 auto; min-height: 0; padding: var(--hy-modal-body-padding, 20px); overflow: auto; color: var(--hy-secondary-text-color, #a9add4); }
+      .footer { flex: 0 0 auto; padding: 12px 20px; border-top: 1px solid var(--hy-border-color, #343765); background: var(--hy-modal-footer-bg-color, var(--hy-surface-color, #10132f)); }
+      .actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
+      button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 32px; padding: 6px 14px; border: 1px solid var(--hy-border-strong-color, #484b84); border-radius: var(--hy-modal-button-radius, 6px); color: var(--hy-text-color, #eef0ff); background: var(--hy-surface-elevated-color, #181a40); font: inherit; cursor: pointer; }
+      button:hover:not(:disabled) { background: var(--hy-hover-bg-color, #242752); }
+      button:disabled { opacity: .5; cursor: default; }
+      button:focus-visible, dialog:focus-visible { outline: 2px solid var(--hy-focus-border-color, #9c8fff); outline-offset: -3px; }
+      .close { flex: 0 0 auto; width: 30px; height: 30px; min-height: 0; padding: 0; border: 0; background: transparent; color: var(--hy-secondary-text-color, #a9add4); font-size: 22px; }
+      .ok { border-color: transparent; color: var(--hy-selected-text-color, #fff); background: var(--hy-accent-strong-color, #554cc6); }
+      .ok:hover:not(:disabled) { background: var(--hy-accent-color, #8177f2); }
+      .spinner { width: 12px; height: 12px; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: hy-modal-spin .7s linear infinite; }
+      ::slotted([slot="footer"]) { margin: 0; }
+      @keyframes hy-modal-enter { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
+      @keyframes hy-modal-spin { to { transform: rotate(360deg); } }
+      @media (prefers-reduced-motion: reduce) { dialog[open], .spinner { animation: none; } }
+    `;
+        this._dialog.part.add('panel');
+        this._dialog.tabIndex = -1;
+        this._dialog.setAttribute('aria-modal', 'true');
+        const header = document.createElement('header');
+        header.className = 'header';
+        header.part.add('header');
+        const title = document.createElement('h2');
+        title.id = 'modal-heading';
+        title.part.add('heading');
+        this._headingSlot.name = 'heading';
+        this._headingSlot.append(this._titleText);
+        title.append(this._headingSlot);
+        this._closeButton.className = 'close';
+        this._closeButton.type = 'button';
+        this._closeButton.part.add('close-button');
+        this._closeButton.setAttribute('aria-label', 'Close modal');
+        this._closeButton.textContent = '×';
+        header.append(title, this._closeButton);
+        const body = document.createElement('div');
+        body.className = 'body';
+        body.part.add('body');
+        body.append(document.createElement('slot'));
+        this._footer.className = 'footer';
+        this._footer.part.add('footer');
+        const footerSlot = document.createElement('slot');
+        footerSlot.name = 'footer';
+        const actions = document.createElement('div');
+        actions.className = 'actions';
+        actions.part.add('actions');
+        this._cancelButton.type = this._okButton.type = 'button';
+        this._cancelButton.part.add('cancel-button');
+        this._okButton.part.add('ok-button');
+        this._okButton.className = 'ok';
+        this._spinner.className = 'spinner';
+        this._spinner.part.add('spinner');
+        this._spinner.setAttribute('aria-hidden', 'true');
+        this._okButton.append(this._spinner, this._okLabel);
+        actions.append(this._cancelButton, this._okButton);
+        footerSlot.append(actions);
+        this._footer.append(footerSlot);
+        this._dialog.append(header, body, this._footer);
+        root.append(style, this._dialog);
+        this._closeButton.addEventListener('click', () => this._requestAction('close-button'));
+        this._cancelButton.addEventListener('click', () => this._requestAction('cancel'));
+        this._okButton.addEventListener('click', () => this._requestAction('ok'));
+        this._dialog.addEventListener('cancel', event => { event.preventDefault(); if (this.keyboard)
+            this._requestAction('escape'); });
+        this._dialog.addEventListener('keydown', event => {
+            if (event.key !== 'Tab' || event.defaultPrevented || event.composedPath().find(node => node instanceof HTMLDialogElement) !== this._dialog)
+                return;
+            const elements = focusableElements(this._dialog);
+            const active = focusedElement(this.ownerDocument);
+            const first = elements[0];
+            const last = elements.at(-1);
+            if (!first || !active || !elements.includes(active) || (event.shiftKey ? active === first : active === last)) {
+                event.preventDefault();
+                (event.shiftKey ? last ?? this._dialog : first ?? this._dialog).focus();
+            }
+        });
+        this._dialog.addEventListener('pointerdown', event => { this._pointerDownOutside = event.target === this._dialog && this._outside(event); });
+        this._dialog.addEventListener('pointercancel', () => { this._pointerDownOutside = false; });
+        this._dialog.addEventListener('click', event => {
+            const outside = this._pointerDownOutside && event.target === this._dialog && this._outside(event);
+            this._pointerDownOutside = false;
+            if (outside && this.maskClosable)
+                this._requestAction('mask');
+        });
+        this._dialog.addEventListener('close', () => {
+            // Native close is queued; an old event must not close a newly opened session.
+            if (!this.isConnected || this._dialog.open || !this._shown)
+                return;
+            this._finalizeClose(this._dialog.returnValue || 'programmatic');
+        });
+    }
+    connectedCallback() {
+        this._contentObserver.observe(this, { childList: true });
+        this._syncView();
+        this._syncOpen();
+        if (!this._shown && this.destroyOnHidden)
+            this._stashContent();
+    }
+    disconnectedCallback() {
+        this._contentObserver.disconnect();
+        this._shown = false;
+        this._session++;
+        this._pointerDownOutside = false;
+        if (this._dialog.open)
+            this._dialog.close();
+        this._unlockScroll();
+        this._restoreFocus();
+    }
+    attributeChangedCallback(name, oldValue, value) {
+        if (oldValue === value || !this.isConnected)
+            return;
+        this._syncView();
+        if (name === 'open')
+            this._syncOpen();
+        if (name === 'destroy-on-hidden' && !this._shown) {
+            if (this.destroyOnHidden)
+                this._stashContent();
+            else
+                this._restoreContent();
+        }
+    }
+    get open() { return this.hasAttribute('open'); }
+    set open(value) { this.toggleAttribute('open', Boolean(value)); }
+    get heading() { return this.getAttribute('heading') ?? ''; }
+    set heading(value) { this.setAttribute('heading', value); }
+    get width() { const number = Number(this.getAttribute('width') ?? 520); return Number.isFinite(number) ? Math.max(240, Math.min(2000, number)) : 520; }
+    set width(value) { this.setAttribute('width', String(Number.isFinite(value) ? Math.max(240, Math.min(2000, value)) : 520)); }
+    get centered() { return this.getAttribute('centered') !== 'false'; }
+    set centered(value) { this.setAttribute('centered', String(Boolean(value))); }
+    get closable() { return this.getAttribute('closable') !== 'false'; }
+    set closable(value) { this.setAttribute('closable', String(Boolean(value))); }
+    get maskClosable() { return this.getAttribute('mask-closable') !== 'false'; }
+    set maskClosable(value) { this.setAttribute('mask-closable', String(Boolean(value))); }
+    get keyboard() { return this.getAttribute('keyboard') !== 'false'; }
+    set keyboard(value) { this.setAttribute('keyboard', String(Boolean(value))); }
+    get confirmLoading() { return this.hasAttribute('confirm-loading') && this.getAttribute('confirm-loading') !== 'false'; }
+    set confirmLoading(value) { if (value)
+        this.setAttribute('confirm-loading', '');
+    else
+        this.removeAttribute('confirm-loading'); }
+    get confirmDisabled() { return this.hasAttribute('confirm-disabled') && this.getAttribute('confirm-disabled') !== 'false'; }
+    set confirmDisabled(value) { if (value)
+        this.setAttribute('confirm-disabled', '');
+    else
+        this.removeAttribute('confirm-disabled'); }
+    get okText() { return this.getAttribute('ok-text') ?? 'OK'; }
+    set okText(value) { this.setAttribute('ok-text', value); }
+    get cancelText() { return this.getAttribute('cancel-text') ?? 'Cancel'; }
+    set cancelText(value) { this.setAttribute('cancel-text', value); }
+    get showFooter() { return this.getAttribute('show-footer') !== 'false'; }
+    set showFooter(value) { this.setAttribute('show-footer', String(Boolean(value))); }
+    get controlled() { return this.hasAttribute('controlled'); }
+    set controlled(value) { this.toggleAttribute('controlled', Boolean(value)); }
+    get destroyOnHidden() { return this.hasAttribute('destroy-on-hidden'); }
+    set destroyOnHidden(value) { this.toggleAttribute('destroy-on-hidden', Boolean(value)); }
+    showModal() { this.open = true; if (this.isConnected)
+        this._syncOpen(); }
+    close(reason = 'programmatic') {
+        this._closeReason = reason;
+        this.open = false;
+        if (this.isConnected)
+            this._syncOpen();
+    }
+    _syncView() {
+        this._titleText.textContent = this.heading || 'Modal';
+        const label = this.getAttribute('aria-label');
+        if (label) {
+            this._dialog.setAttribute('aria-label', label);
+            this._dialog.removeAttribute('aria-labelledby');
+        }
+        else {
+            this._dialog.removeAttribute('aria-label');
+            this._dialog.setAttribute('aria-labelledby', 'modal-heading');
+        }
+        if (this.hasAttribute('width'))
+            this._dialog.style.setProperty('--_hy-modal-width', `${this.width}px`);
+        else
+            this._dialog.style.removeProperty('--_hy-modal-width');
+        this._closeButton.hidden = !this.closable;
+        this._closeButton.disabled = this.confirmLoading;
+        this._footer.hidden = !this.showFooter;
+        this._cancelButton.textContent = this.cancelText;
+        this._okLabel.textContent = this.okText;
+        this._okButton.disabled = this.confirmLoading || this.confirmDisabled;
+        this._cancelButton.disabled = this.confirmLoading;
+        this._okButton.setAttribute('aria-busy', String(this.confirmLoading));
+        this._dialog.setAttribute('aria-busy', String(this.confirmLoading));
+        this._spinner.hidden = !this.confirmLoading;
+    }
+    _syncOpen() {
+        if (this.open && !this._shown) {
+            this._restoreContent();
+            this._syncView();
+            this._returnFocus = focusedElement(this.ownerDocument);
+            this._dialog.returnValue = '';
+            this._shown = true;
+            const session = ++this._session;
+            this._closeReason = 'programmatic';
+            this._lockScroll();
+            try {
+                this._dialog.showModal();
+            }
+            catch (error) {
+                this._shown = false;
+                this._unlockScroll();
+                throw error;
+            }
+            if (this._shown && session === this._session)
+                this.dispatchEvent(new CustomEvent('modal-open', { bubbles: true, composed: true }));
+        }
+        else if (!this.open && this._shown) {
+            const reason = this._closeReason;
+            const session = this._session;
+            this._shown = false;
+            if (this._dialog.open)
+                this._dialog.close();
+            if (session === this._session)
+                this._finalizeClose(reason);
+            else
+                this.dispatchEvent(new CustomEvent('modal-close', { detail: { reason }, bubbles: true, composed: true }));
+        }
+    }
+    _finalizeClose(reason) {
+        this._shown = false;
+        this._closeReason = 'programmatic';
+        this._pointerDownOutside = false;
+        this.removeAttribute('open');
+        this._unlockScroll();
+        if (this.destroyOnHidden)
+            this._stashContent();
+        this._restoreFocus();
+        this.dispatchEvent(new CustomEvent('modal-close', { detail: { reason }, bubbles: true, composed: true }));
+    }
+    _requestAction(reason) {
+        if (!this._shown || this.confirmLoading || (reason === 'ok' && this.confirmDisabled))
+            return;
+        const session = this._session;
+        const accepted = this.dispatchEvent(new CustomEvent(reason === 'ok' ? 'modal-ok' : 'modal-cancel', {
+            detail: { reason }, bubbles: true, composed: true, cancelable: true,
+        }));
+        if (accepted && !this.controlled && !this.confirmLoading && this._shown && session === this._session)
+            this.close(reason);
+    }
+    _outside(event) {
+        const rect = this._dialog.getBoundingClientRect();
+        return event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom;
+    }
+    _stashContent() { if (this.childNodes.length)
+        this._detachedContent.append(...this.childNodes); }
+    _restoreContent() { if (this._detachedContent.childNodes.length)
+        this.prepend(this._detachedContent); }
+    _restoreFocus() {
+        const element = this._returnFocus;
+        this._returnFocus = null;
+        if (element?.isConnected)
+            element.focus({ preventScroll: true });
+    }
+    _lockScroll() {
+        if (this._scrollDocument)
+            return;
+        const document = this.ownerDocument;
+        const style = document.documentElement.style;
+        const state = scrollLocks.get(document) ?? { count: 0, value: style.getPropertyValue('overflow'), priority: style.getPropertyPriority('overflow') };
+        state.count++;
+        scrollLocks.set(document, state);
+        style.setProperty('overflow', 'hidden');
+        this._scrollDocument = document;
+    }
+    _unlockScroll() {
+        const document = this._scrollDocument;
+        if (!document)
+            return;
+        this._scrollDocument = null;
+        const state = scrollLocks.get(document);
+        if (!state)
+            return;
+        if (--state.count > 0)
+            return;
+        scrollLocks.delete(document);
+        const style = document.documentElement.style;
+        if (style.getPropertyValue('overflow') !== 'hidden' || style.getPropertyPriority('overflow'))
+            return;
+        if (state.value)
+            style.setProperty('overflow', state.value, state.priority);
+        else
+            style.removeProperty('overflow');
+    }
+}
+export function defineModalComponents() {
+    if (!customElements.get('hy-modal'))
+        customElements.define('hy-modal', HYModal);
+}
+//# sourceMappingURL=modal.js.map

package/dist/portable/icons.d.ts

@@ -0,0 +1,5 @@
+import type { HYIconName } from '../core/types.js';
+/** Public vector geometry. 24 × 24, 1.8 unit round strokes, no font or platform assets. */
+export declare const HY_ICONS: Readonly<Record<HYIconName, readonly (readonly (readonly [number, number])[])[]>>;
+/** Safe SVG built only from the library's numeric paths. Color inherits from its host. */
+export declare function hyIconSvg(name: HYIconName): string;