@haiyue/ui 0.1.1 → 0.2.1

package/dist/resizable.js

@@ -0,0 +1,426 @@
+const HANDLES = ['n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw'];
+const DEFAULT_CANCEL = 'input, textarea, select, button, a, [contenteditable="true"], [data-no-move]';
+function finiteNumber(value, fallback) {
+    if (value === null || value === undefined || value === '')
+        return fallback;
+    const number = Number(value);
+    return Number.isFinite(number) ? number : fallback;
+}
+function positiveNumber(value, fallback) {
+    return Math.max(0, finiteNumber(value, fallback));
+}
+function safeMatches(element, selector) {
+    try {
+        return element.matches(selector);
+    }
+    catch {
+        return false;
+    }
+}
+/** Eight-handle resize frame that can also move its slotted content. */
+export class HYResizable extends HTMLElement {
+    _frame = document.createElement('div');
+    _content = document.createElement('div');
+    _handles = new Map();
+    _x = 0;
+    _y = 0;
+    _width = 200;
+    _height = 120;
+    _initialRect = null;
+    _boundsTarget = null;
+    _reflecting = false;
+    _pointerId = null;
+    _activeHandle = 'move';
+    _origin = { x: 0, y: 0, width: 200, height: 120 };
+    _pointerX = 0;
+    _pointerY = 0;
+    _dragAbort = null;
+    static get observedAttributes() {
+        return [
+            'x', 'y', 'width', 'height', 'min-width', 'min-height', 'max-width', 'max-height',
+            'grid', 'aspect-ratio', 'bounds', 'disabled', 'movable', 'keyboard', 'cancel', 'aria-label',
+        ];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        const slot = document.createElement('slot');
+        style.textContent = `
+      :host {
+        position: absolute;
+        display: block;
+        left: 0;
+        top: 0;
+        width: var(--_hy-resizable-width, 200px);
+        height: var(--_hy-resizable-height, 120px);
+        min-width: 0;
+        min-height: 0;
+        box-sizing: border-box;
+        translate: var(--_hy-resizable-x, 0px) var(--_hy-resizable-y, 0px);
+      }
+      .frame { position: relative; width: 100%; height: 100%; box-sizing: border-box; outline: none; }
+      .frame::after {
+        position: absolute;
+        z-index: 2;
+        inset: 0;
+        border: var(--hy-resizable-border-width, 1px) var(--hy-resizable-border-style, solid) var(--hy-resizable-border-color, var(--hy-accent-color, #79a8ff));
+        border-radius: var(--hy-resizable-radius, 5px);
+        pointer-events: none;
+        content: '';
+      }
+      .frame:focus-visible { outline: 2px solid var(--hy-focus-border-color, #79a8ff); outline-offset: 3px; }
+      .content { width: 100%; height: 100%; overflow: var(--hy-resizable-content-overflow, hidden); border-radius: var(--hy-resizable-radius, 5px); }
+      :host(:not([disabled])) .content { cursor: var(--hy-resizable-move-cursor, move); }
+      :host([movable="false"]) .content, :host([disabled]) .content { cursor: default; }
+      .handle { position: absolute; z-index: 3; box-sizing: border-box; touch-action: none; outline: none; }
+      .handle:focus-visible { filter: drop-shadow(0 0 3px var(--hy-focus-border-color, #79a8ff)); }
+      .handle.n, .handle.s { left: var(--hy-resizable-corner-size, 10px); right: var(--hy-resizable-corner-size, 10px); height: var(--hy-resizable-edge-size, 8px); cursor: ns-resize; }
+      .handle.e, .handle.w { top: var(--hy-resizable-corner-size, 10px); bottom: var(--hy-resizable-corner-size, 10px); width: var(--hy-resizable-edge-size, 8px); cursor: ew-resize; }
+      .handle.n { top: calc(var(--hy-resizable-edge-size, 8px) / -2); }
+      .handle.s { bottom: calc(var(--hy-resizable-edge-size, 8px) / -2); }
+      .handle.e { right: calc(var(--hy-resizable-edge-size, 8px) / -2); }
+      .handle.w { left: calc(var(--hy-resizable-edge-size, 8px) / -2); }
+      .handle.ne, .handle.se, .handle.sw, .handle.nw {
+        width: var(--hy-resizable-corner-hit-size, 18px);
+        height: var(--hy-resizable-corner-hit-size, 18px);
+      }
+      .handle.ne, .handle.sw { cursor: nesw-resize; }
+      .handle.se, .handle.nw { cursor: nwse-resize; }
+      .handle.ne { top: -9px; right: -9px; }
+      .handle.se { right: -9px; bottom: -9px; }
+      .handle.sw { bottom: -9px; left: -9px; }
+      .handle.nw { top: -9px; left: -9px; }
+      .handle::after {
+        position: absolute;
+        width: var(--hy-resizable-corner-size, 10px);
+        height: var(--hy-resizable-corner-size, 10px);
+        box-sizing: border-box;
+        border: 1px solid var(--hy-resizable-handle-border-color, #dbeeff);
+        border-radius: var(--hy-resizable-handle-radius, 2px);
+        background: var(--hy-resizable-handle-color, var(--hy-accent-color, #79a8ff));
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
+        content: '';
+      }
+      .handle.n::after, .handle.s::after { left: 50%; top: 50%; translate: -50% -50%; }
+      .handle.e::after, .handle.w::after { left: 50%; top: 50%; translate: -50% -50%; }
+      .handle.ne::after, .handle.se::after, .handle.sw::after, .handle.nw::after { inset: 50% auto auto 50%; translate: -50% -50%; }
+      :host([disabled]) .handle { display: none; }
+      :host([resizing]) { z-index: var(--hy-resizable-active-z-index, 20); user-select: none; }
+      ::slotted(*) { box-sizing: border-box; }
+    `;
+        this._frame.className = 'frame';
+        this._frame.part.add('frame');
+        this._content.className = 'content';
+        this._content.part.add('content');
+        this._content.append(slot);
+        this._frame.append(this._content);
+        for (const handle of HANDLES) {
+            const element = document.createElement('span');
+            element.className = `handle ${handle}`;
+            element.dataset.resizeHandle = handle;
+            element.part.add('handle', `handle-${handle}`);
+            element.setAttribute('role', 'separator');
+            element.setAttribute('aria-label', `${handle.toUpperCase()} resize handle`);
+            this._handles.set(handle, element);
+            this._frame.append(element);
+        }
+        root.append(style, this._frame);
+        this._frame.addEventListener('pointerdown', event => this._startPointer(event));
+        this._frame.addEventListener('keydown', event => this._handleKeydown(event));
+    }
+    connectedCallback() {
+        this._readRectAttributes();
+        this._initialRect ??= this.rect;
+        this._sync();
+        this._syncAccessibility();
+    }
+    disconnectedCallback() { this._cancelDrag(true); }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue)
+            return;
+        if (!this._reflecting && ['x', 'y', 'width', 'height'].includes(name)) {
+            this._readRectAttributes();
+            this._sync();
+        }
+        if (name === 'disabled' && this.disabled)
+            this._cancelDrag(true);
+        if (name === 'disabled' || name === 'keyboard' || name === 'aria-label')
+            this._syncAccessibility();
+    }
+    get x() { return this._x; }
+    set x(value) { this.setRect({ ...this.rect, x: finiteNumber(value, this._x) }); }
+    get y() { return this._y; }
+    set y(value) { this.setRect({ ...this.rect, y: finiteNumber(value, this._y) }); }
+    get width() { return this._width; }
+    set width(value) { this.setRect({ ...this.rect, width: positiveNumber(value, this._width) }); }
+    get height() { return this._height; }
+    set height(value) { this.setRect({ ...this.rect, height: positiveNumber(value, this._height) }); }
+    get rect() { return { x: this._x, y: this._y, width: this._width, height: this._height }; }
+    get minWidth() { return positiveNumber(this.getAttribute('min-width'), 32); }
+    set minWidth(value) { this.setAttribute('min-width', String(positiveNumber(value, 32))); }
+    get minHeight() { return positiveNumber(this.getAttribute('min-height'), 32); }
+    set minHeight(value) { this.setAttribute('min-height', String(positiveNumber(value, 32))); }
+    get maxWidth() { return positiveNumber(this.getAttribute('max-width'), Number.POSITIVE_INFINITY); }
+    set maxWidth(value) { this._setFiniteLimit('max-width', value); }
+    get maxHeight() { return positiveNumber(this.getAttribute('max-height'), Number.POSITIVE_INFINITY); }
+    set maxHeight(value) { this._setFiniteLimit('max-height', value); }
+    get grid() { return Math.max(1, positiveNumber(this.getAttribute('grid'), 1)); }
+    set grid(value) { this.setAttribute('grid', String(Math.max(1, positiveNumber(value, 1)))); }
+    get aspectRatio() { const value = positiveNumber(this.getAttribute('aspect-ratio'), 0); return value > 0 ? value : null; }
+    set aspectRatio(value) { if (value && value > 0)
+        this.setAttribute('aspect-ratio', String(value));
+    else
+        this.removeAttribute('aspect-ratio'); }
+    get bounds() { return this._boundsTarget ?? this.boundsMode; }
+    set bounds(value) {
+        if (value instanceof HTMLElement) {
+            this._boundsTarget = value;
+            this.setAttribute('bounds', 'parent');
+        }
+        else {
+            this._boundsTarget = null;
+            this.setAttribute('bounds', value === 'parent' || value === 'viewport' ? value : 'none');
+        }
+        this.refresh();
+    }
+    get boundsMode() { const value = this.getAttribute('bounds'); return value === 'parent' || value === 'viewport' ? value : 'none'; }
+    get disabled() { return this.hasAttribute('disabled'); }
+    set disabled(value) { this.toggleAttribute('disabled', Boolean(value)); }
+    get movable() { return this.getAttribute('movable') !== 'false'; }
+    set movable(value) { this.setAttribute('movable', String(Boolean(value))); }
+    get keyboard() { return this.getAttribute('keyboard') !== 'false'; }
+    set keyboard(value) { this.setAttribute('keyboard', String(Boolean(value))); }
+    get cancel() { return this.getAttribute('cancel')?.trim() || DEFAULT_CANCEL; }
+    set cancel(value) { const normalized = String(value).trim(); if (normalized)
+        this.setAttribute('cancel', normalized);
+    else
+        this.removeAttribute('cancel'); }
+    get resizing() { return this._pointerId !== null; }
+    setRect(rect) { return this._applyRect(rect, 'move', 'api'); }
+    moveTo(x, y) { return this._applyRect({ ...this.rect, x, y }, 'move', 'api'); }
+    moveBy(deltaX, deltaY) { return this.moveTo(this._x + finiteNumber(deltaX, 0), this._y + finiteNumber(deltaY, 0)); }
+    resizeTo(width, height) { return this._applyRect({ ...this.rect, width, height }, 'se', 'api'); }
+    reset() { return this._applyRect(this._initialRect ?? { x: 0, y: 0, width: 200, height: 120 }, 'move', 'api'); }
+    refresh() { return this._applyRect(this.rect, 'move', 'api'); }
+    _startPointer(event) {
+        if (this.disabled || event.button !== 0 || this._pointerId !== null)
+            return;
+        const handle = this._resolveHandle(event);
+        if (handle === 'move' && (!this.movable || this._isCancelledTarget(event)))
+            return;
+        const start = new CustomEvent('resize-start', {
+            detail: { ...this.rect, handle, source: 'pointer' }, bubbles: true, composed: true, cancelable: true,
+        });
+        if (!this.dispatchEvent(start))
+            return;
+        event.preventDefault();
+        this._frame.focus({ preventScroll: true });
+        this._frame.setPointerCapture(event.pointerId);
+        this._pointerId = event.pointerId;
+        this._activeHandle = handle;
+        this._origin = this.rect;
+        this._pointerX = event.clientX;
+        this._pointerY = event.clientY;
+        this.toggleAttribute('resizing', true);
+        const abort = new AbortController();
+        this._dragAbort = abort;
+        this._frame.addEventListener('pointermove', move => this._handlePointerMove(move), { signal: abort.signal });
+        this._frame.addEventListener('pointerup', up => this._finishPointer(up.pointerId, false), { signal: abort.signal });
+        this._frame.addEventListener('pointercancel', cancel => this._finishPointer(cancel.pointerId, true), { signal: abort.signal });
+        this._frame.addEventListener('lostpointercapture', () => this._cancelDrag(true), { signal: abort.signal });
+    }
+    _handlePointerMove(event) {
+        if (event.pointerId !== this._pointerId)
+            return;
+        event.preventDefault();
+        const deltaX = event.clientX - this._pointerX;
+        const deltaY = event.clientY - this._pointerY;
+        this._applyRect(this._rectFromDelta(this._origin, this._activeHandle, deltaX, deltaY), this._activeHandle, 'pointer');
+    }
+    _finishPointer(pointerId, cancelled) {
+        if (pointerId !== this._pointerId)
+            return;
+        const handle = this._activeHandle;
+        this._dragAbort?.abort();
+        this._dragAbort = null;
+        this._pointerId = null;
+        this.toggleAttribute('resizing', false);
+        if (this._frame.hasPointerCapture(pointerId))
+            this._frame.releasePointerCapture(pointerId);
+        this.dispatchEvent(new CustomEvent('resize-end', {
+            detail: { ...this.rect, handle, source: 'pointer', cancelled }, bubbles: true, composed: true,
+        }));
+    }
+    _cancelDrag(cancelled) {
+        if (this._pointerId !== null)
+            this._finishPointer(this._pointerId, cancelled);
+    }
+    _handleKeydown(event) {
+        if (this.disabled || !this.keyboard)
+            return;
+        const handle = event.composedPath().find((node) => node instanceof HTMLElement && Boolean(node.dataset.resizeHandle))?.dataset.resizeHandle ?? 'move';
+        const step = this.grid * (event.shiftKey ? 10 : 1);
+        let deltaX = 0;
+        let deltaY = 0;
+        if (event.key === 'ArrowLeft')
+            deltaX = -step;
+        else if (event.key === 'ArrowRight')
+            deltaX = step;
+        else if (event.key === 'ArrowUp')
+            deltaY = -step;
+        else if (event.key === 'ArrowDown')
+            deltaY = step;
+        else if (event.key === 'Home' && handle === 'move') {
+            event.preventDefault();
+            this.reset();
+            return;
+        }
+        else
+            return;
+        if (handle !== 'move') {
+            if (!handle.includes('e') && !handle.includes('w'))
+                deltaX = 0;
+            if (!handle.includes('n') && !handle.includes('s'))
+                deltaY = 0;
+        }
+        if (deltaX === 0 && deltaY === 0)
+            return;
+        event.preventDefault();
+        this._applyRect(this._rectFromDelta(this.rect, handle, deltaX, deltaY), handle, 'keyboard');
+    }
+    _rectFromDelta(origin, handle, deltaX, deltaY) {
+        if (handle === 'move')
+            return { ...origin, x: origin.x + deltaX, y: origin.y + deltaY };
+        let left = origin.x;
+        let top = origin.y;
+        let right = origin.x + origin.width;
+        let bottom = origin.y + origin.height;
+        if (handle.includes('w'))
+            left += deltaX;
+        if (handle.includes('e'))
+            right += deltaX;
+        if (handle.includes('n'))
+            top += deltaY;
+        if (handle.includes('s'))
+            bottom += deltaY;
+        return { x: left, y: top, width: right - left, height: bottom - top };
+    }
+    _applyRect(candidate, handle, source) {
+        const old = this.rect;
+        const next = this._normalizeRect(candidate, handle);
+        if (next.x === old.x && next.y === old.y && next.width === old.width && next.height === old.height)
+            return old;
+        this._x = next.x;
+        this._y = next.y;
+        this._width = next.width;
+        this._height = next.height;
+        this._sync();
+        this._reflectRect();
+        this.dispatchEvent(new CustomEvent('resize', {
+            detail: { ...next, handle, source }, bubbles: true, composed: true,
+        }));
+        return this.rect;
+    }
+    _normalizeRect(candidate, handle) {
+        const snap = (value) => Math.round(finiteNumber(value, 0) / this.grid) * this.grid;
+        const originRight = candidate.x + candidate.width;
+        const originBottom = candidate.y + candidate.height;
+        let x = handle === 'move' ? snap(candidate.x) : finiteNumber(candidate.x, this._x);
+        let y = handle === 'move' ? snap(candidate.y) : finiteNumber(candidate.y, this._y);
+        let width = Math.max(this.minWidth, Math.min(this.maxWidth, snap(candidate.width)));
+        let height = Math.max(this.minHeight, Math.min(this.maxHeight, snap(candidate.height)));
+        if (handle.includes('w'))
+            x = originRight - width;
+        if (handle.includes('n'))
+            y = originBottom - height;
+        const ratio = this.aspectRatio;
+        if (ratio && handle !== 'move') {
+            if (handle === 'n' || handle === 's')
+                width = Math.max(this.minWidth, Math.min(this.maxWidth, snap(height * ratio)));
+            else
+                height = Math.max(this.minHeight, Math.min(this.maxHeight, snap(width / ratio)));
+            if (handle.includes('w'))
+                x = originRight - width;
+            if (handle.includes('n'))
+                y = originBottom - height;
+        }
+        const bounds = this._relativeBounds();
+        if (bounds) {
+            width = Math.min(width, bounds.right - bounds.left);
+            height = Math.min(height, bounds.bottom - bounds.top);
+            x = Math.min(bounds.right - width, Math.max(bounds.left, x));
+            y = Math.min(bounds.bottom - height, Math.max(bounds.top, y));
+        }
+        return { x, y, width, height };
+    }
+    _relativeBounds() {
+        if (!this.isConnected)
+            return null;
+        const target = this._boundsTarget ?? (this.boundsMode === 'parent' ? this.parentElement : null);
+        const targetRect = target?.getBoundingClientRect();
+        const viewport = this.boundsMode === 'viewport' && !this._boundsTarget;
+        const bounds = target && targetRect
+            ? { left: targetRect.left + target.clientLeft, top: targetRect.top + target.clientTop, right: targetRect.left + target.clientLeft + target.clientWidth, bottom: targetRect.top + target.clientTop + target.clientHeight }
+            : viewport ? { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight } : null;
+        if (!bounds)
+            return null;
+        const rect = this.getBoundingClientRect();
+        const baseLeft = rect.left - this._x;
+        const baseTop = rect.top - this._y;
+        return { left: bounds.left - baseLeft, top: bounds.top - baseTop, right: bounds.right - baseLeft, bottom: bounds.bottom - baseTop };
+    }
+    _resolveHandle(event) {
+        const element = event.composedPath().find((node) => node instanceof HTMLElement && Boolean(node.dataset.resizeHandle));
+        return element?.dataset.resizeHandle ?? 'move';
+    }
+    _isCancelledTarget(event) {
+        return event.composedPath().some(node => node instanceof Element && node !== this._frame && node !== this && safeMatches(node, this.cancel));
+    }
+    _readRectAttributes() {
+        this._x = finiteNumber(this.getAttribute('x'), this._x);
+        this._y = finiteNumber(this.getAttribute('y'), this._y);
+        this._width = positiveNumber(this.getAttribute('width'), this._width);
+        this._height = positiveNumber(this.getAttribute('height'), this._height);
+    }
+    _sync() {
+        this.style.setProperty('--_hy-resizable-x', `${this._x}px`);
+        this.style.setProperty('--_hy-resizable-y', `${this._y}px`);
+        this.style.setProperty('--_hy-resizable-width', `${this._width}px`);
+        this.style.setProperty('--_hy-resizable-height', `${this._height}px`);
+        for (const [handle, element] of this._handles) {
+            const horizontal = handle.includes('e') || handle.includes('w');
+            element.setAttribute('aria-orientation', horizontal ? 'vertical' : 'horizontal');
+            element.setAttribute('aria-valuenow', String(horizontal ? Math.round(this._width) : Math.round(this._height)));
+        }
+    }
+    _reflectRect() {
+        this._reflecting = true;
+        for (const [name, value] of Object.entries(this.rect)) {
+            const normalized = String(Math.round(value * 1000) / 1000);
+            if (this.getAttribute(name) !== normalized)
+                this.setAttribute(name, normalized);
+        }
+        this._reflecting = false;
+    }
+    _syncAccessibility() {
+        this._frame.tabIndex = this.keyboard && !this.disabled ? 0 : -1;
+        this._frame.setAttribute('role', 'group');
+        this._frame.setAttribute('aria-label', this.getAttribute('aria-label') || 'Resizable container');
+        this._frame.setAttribute('aria-disabled', String(this.disabled));
+        for (const element of this._handles.values())
+            element.tabIndex = this.keyboard && !this.disabled ? 0 : -1;
+    }
+    _setFiniteLimit(name, value) {
+        const normalized = Number(value);
+        if (Number.isFinite(normalized) && normalized >= 0)
+            this.setAttribute(name, String(normalized));
+        else
+            this.removeAttribute(name);
+    }
+}
+export function defineResizableComponents() {
+    if (!customElements.get('hy-resizable'))
+        customElements.define('hy-resizable', HYResizable);
+}
+//# sourceMappingURL=resizable.js.map

package/dist/skeleton.d.ts

@@ -0,0 +1,41 @@
+export type HYSkeletonAvatarShape = 'circle' | 'square';
+export type HYSkeletonSize = 'small' | 'medium' | 'large';
+/** Theme-aware loading placeholder that swaps to slotted content when ready. */
+export declare class HYSkeleton extends HTMLElement {
+    private readonly _placeholder;
+    private readonly _content;
+    private readonly _slot;
+    private _paragraphWidths;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    /** Defaults to true. Set to false to reveal the default slot. */
+    get loading(): boolean;
+    set loading(value: boolean);
+    get active(): boolean;
+    set active(value: boolean);
+    get avatar(): boolean;
+    set avatar(value: boolean);
+    get avatarShape(): HYSkeletonAvatarShape;
+    set avatarShape(value: HYSkeletonAvatarShape);
+    get avatarSize(): number;
+    set avatarSize(value: number);
+    get showTitle(): boolean;
+    set showTitle(value: boolean);
+    get titleWidth(): string;
+    set titleWidth(value: string);
+    get showParagraph(): boolean;
+    set showParagraph(value: boolean);
+    get rows(): number;
+    set rows(value: number);
+    get round(): boolean;
+    set round(value: boolean);
+    get size(): HYSkeletonSize;
+    set size(value: HYSkeletonSize);
+    get paragraphWidths(): readonly string[];
+    set paragraphWidths(value: readonly string[]);
+    private _render;
+    private _rowWidth;
+}
+export declare function defineSkeletonComponents(): void;

package/dist/skeleton.js

@@ -0,0 +1,141 @@
+function clampInteger(value, fallback, min, max) {
+    const number = Math.floor(Number(value));
+    return Number.isFinite(number) ? Math.min(max, Math.max(min, number)) : fallback;
+}
+function normalizeWidth(value, fallback) {
+    const text = String(value ?? '').trim();
+    return /^\d+(?:\.\d+)?(?:%|px|rem|em|ch|vw)$/u.test(text) ? text : fallback;
+}
+/** Theme-aware loading placeholder that swaps to slotted content when ready. */
+export class HYSkeleton extends HTMLElement {
+    _placeholder = document.createElement('div');
+    _content = document.createElement('div');
+    _slot = document.createElement('slot');
+    _paragraphWidths = [];
+    static get observedAttributes() {
+        return ['loading', 'active', 'avatar', 'avatar-shape', 'avatar-size', 'show-title', 'title-width', 'show-paragraph', 'rows', 'round', 'size', 'aria-label'];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = `
+      :host { display: block; min-width: 0; font: 12px/1.4 system-ui, sans-serif; }
+      .placeholder { display: flex; min-width: 0; align-items: flex-start; gap: var(--hy-skeleton-gap, 14px); }
+      .placeholder[hidden], .content[hidden] { display: none; }
+      .body { flex: 1; min-width: 0; padding-top: var(--hy-skeleton-body-offset, 2px); }
+      .block { position: relative; overflow: hidden; background: var(--hy-skeleton-color, color-mix(in srgb, var(--hy-text-color, #eef3ff) 11%, transparent)); }
+      .avatar { flex: 0 0 auto; width: var(--_avatar-size); height: var(--_avatar-size); border-radius: 50%; }
+      :host([avatar-shape="square"]) .avatar { border-radius: var(--hy-skeleton-avatar-radius, 7px); }
+      .title { height: var(--hy-skeleton-title-height, 15px); margin-bottom: var(--hy-skeleton-title-gap, 17px); border-radius: var(--hy-skeleton-radius, 5px); }
+      .paragraph { display: grid; gap: var(--hy-skeleton-row-gap, 11px); }
+      .row { height: var(--hy-skeleton-row-height, 11px); border-radius: var(--hy-skeleton-radius, 5px); }
+      :host([round]) .title, :host([round]) .row { border-radius: 999px; }
+      :host([size="small"]) { --hy-skeleton-title-height: 12px; --hy-skeleton-row-height: 8px; --hy-skeleton-row-gap: 9px; --hy-skeleton-gap: 11px; }
+      :host([size="large"]) { --hy-skeleton-title-height: 18px; --hy-skeleton-row-height: 14px; --hy-skeleton-row-gap: 13px; --hy-skeleton-gap: 17px; }
+      :host([active]) .block::after { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, var(--hy-skeleton-highlight-color, color-mix(in srgb, var(--hy-text-color, #eef3ff) 12%, transparent)) 45%, transparent 85%); content: ''; transform: translateX(-100%); animation: hy-skeleton-wave var(--hy-skeleton-duration, 1.5s) ease-in-out infinite; }
+      @keyframes hy-skeleton-wave { to { transform: translateX(100%); } }
+      @media (prefers-reduced-motion: reduce) { :host([active]) .block::after { animation: none; } }
+    `;
+        this._placeholder.className = 'placeholder';
+        this._placeholder.part.add('placeholder');
+        this._placeholder.setAttribute('aria-hidden', 'true');
+        this._content.className = 'content';
+        this._content.part.add('content');
+        this._content.append(this._slot);
+        root.append(style, this._placeholder, this._content);
+    }
+    connectedCallback() { this._render(); }
+    attributeChangedCallback() { this._render(); }
+    /** Defaults to true. Set to false to reveal the default slot. */
+    get loading() { return this.getAttribute('loading') !== 'false'; }
+    set loading(value) { this.setAttribute('loading', String(Boolean(value))); }
+    get active() { return this.hasAttribute('active'); }
+    set active(value) { this.toggleAttribute('active', Boolean(value)); }
+    get avatar() { return this.hasAttribute('avatar'); }
+    set avatar(value) { this.toggleAttribute('avatar', Boolean(value)); }
+    get avatarShape() { return this.getAttribute('avatar-shape') === 'square' ? 'square' : 'circle'; }
+    set avatarShape(value) { this.setAttribute('avatar-shape', value === 'square' ? 'square' : 'circle'); }
+    get avatarSize() { return clampInteger(this.getAttribute('avatar-size'), 44, 16, 160); }
+    set avatarSize(value) { this.setAttribute('avatar-size', String(clampInteger(value, 44, 16, 160))); }
+    get showTitle() { return this.getAttribute('show-title') !== 'false'; }
+    set showTitle(value) { this.setAttribute('show-title', String(Boolean(value))); }
+    get titleWidth() { return normalizeWidth(this.getAttribute('title-width'), '38%'); }
+    set titleWidth(value) { this.setAttribute('title-width', normalizeWidth(value, '38%')); }
+    get showParagraph() { return this.getAttribute('show-paragraph') !== 'false'; }
+    set showParagraph(value) { this.setAttribute('show-paragraph', String(Boolean(value))); }
+    get rows() { return clampInteger(this.getAttribute('rows'), 3, 0, 20); }
+    set rows(value) { this.setAttribute('rows', String(clampInteger(value, 3, 0, 20))); }
+    get round() { return this.hasAttribute('round'); }
+    set round(value) { this.toggleAttribute('round', Boolean(value)); }
+    get size() {
+        const value = this.getAttribute('size');
+        return value === 'small' || value === 'large' ? value : 'medium';
+    }
+    set size(value) { this.setAttribute('size', value === 'small' || value === 'large' ? value : 'medium'); }
+    get paragraphWidths() { return this._paragraphWidths; }
+    set paragraphWidths(value) {
+        this._paragraphWidths = Array.isArray(value) ? value.map(width => normalizeWidth(width, '100%')) : [];
+        this._render();
+    }
+    _render() {
+        const loading = this.loading;
+        this.setAttribute('aria-busy', String(loading));
+        this.setAttribute('role', 'status');
+        if (!this.hasAttribute('aria-live'))
+            this.setAttribute('aria-live', 'polite');
+        if (!this.hasAttribute('aria-label'))
+            this.setAttribute('aria-label', 'Loading');
+        this._placeholder.hidden = !loading;
+        this._content.hidden = loading;
+        if (!loading) {
+            this._placeholder.replaceChildren();
+            return;
+        }
+        const body = document.createElement('div');
+        body.className = 'body';
+        body.part.add('body');
+        if (this.showTitle) {
+            const title = document.createElement('div');
+            title.className = 'block title';
+            title.part.add('title');
+            title.style.width = this.titleWidth;
+            body.append(title);
+        }
+        if (this.showParagraph && this.rows > 0) {
+            const paragraph = document.createElement('div');
+            paragraph.className = 'paragraph';
+            paragraph.part.add('paragraph');
+            for (let index = 0; index < this.rows; index += 1) {
+                const row = document.createElement('div');
+                row.className = 'block row';
+                row.part.add('row');
+                row.style.width = this._rowWidth(index);
+                paragraph.append(row);
+            }
+            body.append(paragraph);
+        }
+        const children = [];
+        if (this.avatar) {
+            const avatar = document.createElement('div');
+            avatar.className = 'block avatar';
+            avatar.part.add('avatar');
+            avatar.style.setProperty('--_avatar-size', `${this.avatarSize}px`);
+            children.push(avatar);
+        }
+        if (body.childElementCount)
+            children.push(body);
+        this._placeholder.replaceChildren(...children);
+    }
+    _rowWidth(index) {
+        const configured = this._paragraphWidths[index];
+        if (configured)
+            return configured;
+        return index === this.rows - 1 && this.rows > 1 ? '68%' : '100%';
+    }
+}
+export function defineSkeletonComponents() {
+    if (!customElements.get('hy-skeleton'))
+        customElements.define('hy-skeleton', HYSkeleton);
+}
+//# sourceMappingURL=skeleton.js.map

package/dist/steps.d.ts

@@ -0,0 +1,45 @@
+export type HYStepsDirection = 'horizontal' | 'vertical';
+export type HYStepsSize = 'medium' | 'small';
+export type HYStepStatus = 'wait' | 'process' | 'finish' | 'error';
+export interface HYStepItem {
+    readonly key?: string | number;
+    readonly title: string;
+    readonly description?: string;
+    readonly subtitle?: string;
+    readonly status?: HYStepStatus;
+    readonly icon?: string;
+    readonly disabled?: boolean;
+}
+export interface HYStepsChangeDetail {
+    readonly current: number;
+    readonly previous: number;
+    readonly item: HYStepItem;
+}
+/** Responsive horizontal or vertical progress steps with optional navigation. */
+export declare class HYSteps extends HTMLElement {
+    private readonly _list;
+    private _items;
+    private _itemsAssigned;
+    private _current;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    get items(): readonly HYStepItem[];
+    set items(value: readonly HYStepItem[]);
+    get current(): number;
+    set current(value: number);
+    get direction(): HYStepsDirection;
+    set direction(value: HYStepsDirection);
+    get size(): HYStepsSize;
+    set size(value: HYStepsSize);
+    get clickable(): boolean;
+    set clickable(value: boolean);
+    private _readItemsAttribute;
+    private _resolvedCurrent;
+    private _status;
+    private _render;
+    private _createStep;
+    private _select;
+}
+export declare function defineStepsComponents(): void;