@haiyue/ui 0.1.1 → 0.2.1

package/dist/time-picker.js

@@ -0,0 +1,298 @@
+function parseTime(value) {
+    const match = /^(\d{2}):(\d{2})(?::(\d{2}))?$/u.exec(String(value ?? ''));
+    if (!match)
+        return null;
+    const hour = Number(match[1]);
+    const minute = Number(match[2]);
+    const second = Number(match[3] ?? 0);
+    return hour < 24 && minute < 60 && second < 60 ? { hour, minute, second } : null;
+}
+function pad(value) { return String(value).padStart(2, '0'); }
+function formatTime(parts, showSeconds) {
+    return `${pad(parts.hour)}:${pad(parts.minute)}${showSeconds ? `:${pad(parts.second)}` : ''}`;
+}
+function timeNumber(parts) { return parts.hour * 3600 + parts.minute * 60 + parts.second; }
+function normalizeStep(value) {
+    const number = Math.floor(Number(value));
+    return Number.isFinite(number) && number > 0 && number < 60 ? number : 1;
+}
+/** Accessible column-based time picker with stable 24-hour values. */
+export class HYTimePicker extends HTMLElement {
+    _control = document.createElement('div');
+    _trigger = document.createElement('button');
+    _label = document.createElement('span');
+    _arrow = document.createElement('span');
+    _clear = document.createElement('button');
+    _panel = document.createElement('div');
+    _panelId = `hy-time-picker-${globalThis.crypto?.randomUUID?.() ?? Math.random().toString(36).slice(2)}`;
+    _value = '';
+    _draft = { hour: 0, minute: 0, second: 0 };
+    _reflecting = false;
+    _outsideAbort = null;
+    static get observedAttributes() {
+        return ['value', 'min', 'max', 'placeholder', 'disabled', 'clearable', 'open', 'show-seconds', 'minute-step', 'second-step', 'aria-label'];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = `
+      :host { position: relative; display: inline-block; min-width: 150px; color: var(--hy-text-color, #eef3ff); font: 12px/1.4 system-ui, sans-serif; }
+      .control { display: grid; grid-template-columns: minmax(0, 1fr) auto; height: var(--hy-time-picker-height, 34px); box-sizing: border-box; border: 1px solid var(--hy-border-color, #3d4654); border-radius: var(--hy-time-picker-radius, 6px); background: var(--hy-input-bg-color, #111722); }
+      :host(:not([disabled])) .control:hover { border-color: var(--hy-hover-border-color, #596779); }
+      :host(:focus-within) .control, :host([open]) .control { border-color: var(--hy-focus-border-color, #79a8ff); box-shadow: 0 0 0 2px var(--hy-focus-ring-color, rgba(121, 168, 255, .22)); }
+      .trigger { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 0 8px 0 10px; overflow: hidden; border: 0; color: inherit; background: transparent; cursor: pointer; font: inherit; text-align: left; }
+      .label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .label.placeholder { color: var(--hy-muted-color, #788697); }
+      .arrow { color: var(--hy-muted-color, #788697); font-size: 14px; }
+      .clear { width: 28px; padding: 0; border: 0; color: var(--hy-muted-color, #788697); background: transparent; cursor: pointer; font: 15px/1 system-ui, sans-serif; }
+      .clear:hover { color: var(--hy-text-color, #eef3ff); } .clear[hidden], .panel[hidden] { display: none; }
+      .trigger:focus-visible, .clear:focus-visible { outline: none; }
+      :host([disabled]) { opacity: .52; } :host([disabled]) .trigger, :host([disabled]) .clear { cursor: not-allowed; }
+      .panel { position: absolute; z-index: var(--hy-time-picker-z-index, 50); top: calc(100% + 6px); left: 0; width: max-content; min-width: 100%; box-sizing: border-box; border: 1px solid var(--hy-border-color, #3d4654); border-radius: var(--hy-time-picker-panel-radius, 8px); background: var(--hy-menu-bg-color, var(--hy-surface-elevated-color, #171d27)); box-shadow: 0 12px 32px var(--hy-menu-shadow-color, rgba(0, 0, 0, .36)); }
+      .columns { display: flex; height: var(--hy-time-picker-panel-height, 196px); overflow: hidden; }
+      .column { width: var(--hy-time-picker-column-width, 58px); margin: 0; padding: 4px; overflow-y: auto; list-style: none; scrollbar-color: var(--hy-border-strong-color, #596779) transparent; scrollbar-width: thin; }
+      .column + .column { border-left: 1px solid var(--hy-border-color, #3d4654); }
+      .option { width: 100%; height: 30px; padding: 0; border: 0; border-radius: 4px; color: var(--hy-secondary-text-color, #aebbd0); background: transparent; cursor: pointer; font: inherit; }
+      .option:hover, .option:focus-visible { outline: none; color: var(--hy-text-color, #eef3ff); background: var(--hy-hover-bg-color, #273241); }
+      .option[aria-selected="true"] { color: var(--hy-selected-text-color, #fff); background: var(--hy-selected-bg-color, #554cc6); }
+      .footer { display: flex; justify-content: space-between; gap: 8px; padding: 7px 8px; border-top: 1px solid var(--hy-border-color, #3d4654); }
+      .footer button { min-width: 42px; height: 27px; padding: 0 8px; border: 1px solid transparent; border-radius: 4px; color: var(--hy-accent-color, #79a8ff); background: transparent; cursor: pointer; font: inherit; }
+      .footer button:hover:not(:disabled) { background: var(--hy-hover-bg-color, #273241); }
+      .footer .confirm { color: var(--hy-selected-text-color, #fff); background: var(--hy-selected-bg-color, #554cc6); }
+      .footer button:focus-visible { outline: 2px solid var(--hy-focus-border-color, #79a8ff); outline-offset: 1px; }
+      .footer button:disabled { cursor: not-allowed; opacity: .35; }
+    `;
+        this._control.className = 'control';
+        this._control.part.add('control');
+        this._trigger.type = 'button';
+        this._trigger.className = 'trigger';
+        this._trigger.part.add('trigger');
+        this._trigger.setAttribute('aria-haspopup', 'dialog');
+        this._trigger.setAttribute('aria-controls', this._panelId);
+        this._label.className = 'label';
+        this._label.part.add('label');
+        this._arrow.className = 'arrow';
+        this._arrow.part.add('arrow');
+        this._arrow.setAttribute('aria-hidden', 'true');
+        this._arrow.textContent = '◷';
+        this._trigger.append(this._label, this._arrow);
+        this._clear.type = 'button';
+        this._clear.className = 'clear';
+        this._clear.part.add('clear');
+        this._clear.setAttribute('aria-label', 'Clear time');
+        this._clear.textContent = '×';
+        this._panel.id = this._panelId;
+        this._panel.className = 'panel';
+        this._panel.part.add('panel');
+        this._panel.setAttribute('role', 'dialog');
+        this._control.append(this._trigger, this._clear);
+        root.append(style, this._control, this._panel);
+        this._trigger.addEventListener('click', () => { if (!this.disabled)
+            this.open = !this.open; });
+        this._trigger.addEventListener('keydown', event => { if (event.key === 'ArrowDown' && !this.disabled) {
+            event.preventDefault();
+            this.open = true;
+            queueMicrotask(() => this._focusSelected(0));
+        }
+        else if (event.key === 'Escape' && this.open) {
+            event.preventDefault();
+            this.open = false;
+        } });
+        this._clear.addEventListener('click', event => { event.stopPropagation(); if (!this.disabled)
+            this._commit(''); });
+    }
+    connectedCallback() { this._syncAttributes(); this._render(); this._syncOutsideListener(); }
+    disconnectedCallback() { this._outsideAbort?.abort(); this._outsideAbort = null; }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue || this._reflecting)
+            return;
+        if (['value', 'min', 'max', 'show-seconds', 'minute-step', 'second-step'].includes(name)) {
+            this._value = this._normalizeValue(this.getAttribute('value') ?? '');
+            this._reflectValue();
+        }
+        if (name === 'open' && this.open)
+            this._setDraft();
+        this._render();
+        if (name === 'open') {
+            this._syncOutsideListener();
+            this._dispatchOpenChange();
+        }
+    }
+    get value() { return this._value; }
+    set value(value) { this._value = this._normalizeValue(value); this._reflectValue(); this._render(); }
+    get open() { return this.hasAttribute('open'); }
+    set open(value) { this.toggleAttribute('open', Boolean(value)); }
+    get disabled() { return this.hasAttribute('disabled'); }
+    set disabled(value) { this.toggleAttribute('disabled', Boolean(value)); }
+    get clearable() { return this.getAttribute('clearable') !== 'false'; }
+    set clearable(value) { this.setAttribute('clearable', String(Boolean(value))); }
+    get placeholder() { return this.getAttribute('placeholder') ?? 'Select time'; }
+    set placeholder(value) { this.setAttribute('placeholder', String(value)); }
+    get showSeconds() { return this.hasAttribute('show-seconds'); }
+    set showSeconds(value) { this.toggleAttribute('show-seconds', Boolean(value)); }
+    get minuteStep() { return normalizeStep(this.getAttribute('minute-step')); }
+    set minuteStep(value) { this.setAttribute('minute-step', String(normalizeStep(value))); }
+    get secondStep() { return normalizeStep(this.getAttribute('second-step')); }
+    set secondStep(value) { this.setAttribute('second-step', String(normalizeStep(value))); }
+    get min() { return parseTime(this.getAttribute('min')) ? this.getAttribute('min') : ''; }
+    set min(value) { if (parseTime(value))
+        this.setAttribute('min', value);
+    else
+        this.removeAttribute('min'); }
+    get max() { return parseTime(this.getAttribute('max')) ? this.getAttribute('max') : ''; }
+    set max(value) { if (parseTime(value))
+        this.setAttribute('max', value);
+    else
+        this.removeAttribute('max'); }
+    _syncAttributes() { this._value = this._normalizeValue(this.getAttribute('value') ?? ''); this._reflectValue(); this._setDraft(); }
+    _normalizeValue(value) {
+        const parts = parseTime(value);
+        if (!parts)
+            return '';
+        const normalized = formatTime(parts, this.showSeconds);
+        return this._isAllowed(parts) ? normalized : '';
+    }
+    _reflectValue() { if (this.getAttribute('value') === this._value)
+        return; this._reflecting = true; if (this._value)
+        this.setAttribute('value', this._value);
+    else
+        this.removeAttribute('value'); this._reflecting = false; }
+    _isAllowed(parts) { const value = timeNumber(parts); const min = parseTime(this.min); const max = parseTime(this.max); return (!min || value >= timeNumber(min)) && (!max || value <= timeNumber(max)); }
+    _setDraft() {
+        const selected = parseTime(this._value);
+        if (selected) {
+            this._draft = selected;
+            return;
+        }
+        const now = new Date();
+        this._draft = { hour: now.getHours(), minute: Math.floor(now.getMinutes() / this.minuteStep) * this.minuteStep, second: Math.floor(now.getSeconds() / this.secondStep) * this.secondStep };
+    }
+    _render() {
+        this._label.textContent = this._value || this.placeholder;
+        this._label.classList.toggle('placeholder', !this._value);
+        this._trigger.disabled = this.disabled;
+        this._trigger.setAttribute('aria-expanded', String(this.open));
+        const name = this.getAttribute('aria-label');
+        if (name)
+            this._trigger.setAttribute('aria-label', name);
+        else
+            this._trigger.removeAttribute('aria-label');
+        this._clear.hidden = !this.clearable || !this._value;
+        this._clear.disabled = this.disabled;
+        this._panel.hidden = !this.open;
+        if (this.open)
+            this._renderPanel();
+        else
+            this._panel.replaceChildren();
+    }
+    _renderPanel() {
+        const columns = document.createElement('div');
+        columns.className = 'columns';
+        columns.part.add('columns');
+        columns.append(this._createColumn('hour', 24, 1, this._draft.hour, 0), this._createColumn('minute', 60, this.minuteStep, this._draft.minute, 1));
+        if (this.showSeconds)
+            columns.append(this._createColumn('second', 60, this.secondStep, this._draft.second, 2));
+        const footer = document.createElement('div');
+        footer.className = 'footer';
+        footer.part.add('footer');
+        const now = document.createElement('button');
+        const confirm = document.createElement('button');
+        now.type = confirm.type = 'button';
+        now.textContent = 'Now';
+        confirm.textContent = 'OK';
+        confirm.className = 'confirm';
+        confirm.part.add('confirm');
+        confirm.disabled = !this._isAllowed(this._draft);
+        now.addEventListener('click', () => { const date = new Date(); const parts = { hour: date.getHours(), minute: Math.floor(date.getMinutes() / this.minuteStep) * this.minuteStep, second: Math.floor(date.getSeconds() / this.secondStep) * this.secondStep }; if (this._isAllowed(parts))
+            this._commit(formatTime(parts, this.showSeconds)); });
+        now.disabled = !this._isAllowed({ hour: new Date().getHours(), minute: new Date().getMinutes(), second: new Date().getSeconds() });
+        confirm.addEventListener('click', () => this._commit(formatTime(this._draft, this.showSeconds)));
+        footer.append(now, confirm);
+        this._panel.replaceChildren(columns, footer);
+    }
+    _createColumn(part, limit, step, selected, columnIndex) {
+        const list = document.createElement('ul');
+        list.className = 'column';
+        list.part.add('column');
+        list.setAttribute('role', 'listbox');
+        list.setAttribute('aria-label', part);
+        for (let value = 0; value < limit; value += step) {
+            const item = document.createElement('li');
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.className = 'option';
+            button.part.add('option');
+            button.textContent = pad(value);
+            button.dataset.column = String(columnIndex);
+            button.dataset.value = String(value);
+            button.setAttribute('role', 'option');
+            button.setAttribute('aria-selected', String(value === selected));
+            button.tabIndex = value === selected ? 0 : -1;
+            button.addEventListener('click', () => { this._draft = { ...this._draft, [part]: value }; this._renderPanel(); queueMicrotask(() => this._focusSelected(columnIndex)); });
+            button.addEventListener('keydown', event => this._handleOptionKeydown(event, columnIndex));
+            item.append(button);
+            list.append(item);
+        }
+        queueMicrotask(() => list.querySelector('[aria-selected="true"]')?.scrollIntoView({ block: 'center' }));
+        return list;
+    }
+    _handleOptionKeydown(event, columnIndex) {
+        const columns = [...this._panel.querySelectorAll('.column')];
+        const column = columns[columnIndex];
+        if (!column)
+            return;
+        const options = [...column.querySelectorAll('.option')];
+        const current = options.indexOf(event.currentTarget);
+        let target;
+        if (event.key === 'ArrowDown')
+            target = options[(current + 1) % options.length];
+        else if (event.key === 'ArrowUp')
+            target = options[(current - 1 + options.length) % options.length];
+        else if (event.key === 'Home')
+            target = options[0];
+        else if (event.key === 'End')
+            target = options.at(-1);
+        else if (event.key === 'ArrowRight') {
+            event.preventDefault();
+            this._focusSelected(Math.min(columnIndex + 1, columns.length - 1));
+            return;
+        }
+        else if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            this._focusSelected(Math.max(columnIndex - 1, 0));
+            return;
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            this.open = false;
+            this._trigger.focus();
+            return;
+        }
+        if (target) {
+            event.preventDefault();
+            target.focus();
+        }
+    }
+    _focusSelected(columnIndex) { this._panel.querySelectorAll('.column')[columnIndex]?.querySelector('[aria-selected="true"]')?.focus(); }
+    _commit(value) {
+        this._value = this._normalizeValue(value);
+        this._reflectValue();
+        if (this.open)
+            this.open = false;
+        else
+            this._render();
+        const parts = parseTime(this._value);
+        this.dispatchEvent(new CustomEvent('value-change', { bubbles: true, composed: true, detail: { value: this._value, hour: parts?.hour ?? null, minute: parts?.minute ?? null, second: parts && this.showSeconds ? parts.second : null } }));
+    }
+    _syncOutsideListener() { this._outsideAbort?.abort(); this._outsideAbort = null; if (!this.open || !this.isConnected)
+        return; const abort = new AbortController(); this._outsideAbort = abort; queueMicrotask(() => { if (!abort.signal.aborted)
+        document.addEventListener('pointerdown', event => { if (!event.composedPath().includes(this))
+            this.open = false; }, { capture: true, signal: abort.signal }); }); }
+    _dispatchOpenChange() { this.dispatchEvent(new CustomEvent('open-change', { bubbles: true, composed: true, detail: { open: this.open } })); }
+}
+export function defineTimePickerComponents() {
+    if (!customElements.get('hy-time-picker'))
+        customElements.define('hy-time-picker', HYTimePicker);
+}
+//# sourceMappingURL=time-picker.js.map

package/dist/timeline.d.ts

@@ -0,0 +1,48 @@
+export type HYTimelineMode = 'left' | 'right' | 'alternate';
+export type HYTimelineStatus = 'default' | 'success' | 'info' | 'warning' | 'error';
+export type HYTimelineItemPosition = 'left' | 'right';
+export interface HYTimelineItem {
+    readonly key?: string | number;
+    readonly label?: string;
+    readonly title: string;
+    readonly description?: string;
+    readonly status?: HYTimelineStatus;
+    readonly color?: string;
+    readonly dot?: string;
+    readonly position?: HYTimelineItemPosition;
+}
+export type HYTimelineItemRenderer = (item: HYTimelineItem, index: number) => Node | string;
+export type HYTimelineDotRenderer = (item: HYTimelineItem, index: number) => Node | string;
+/** Semantic, responsive timeline for ordered events and process history. */
+export declare class HYTimeline extends HTMLElement {
+    private readonly _list;
+    private _items;
+    private _itemsAssigned;
+    private _renderItem;
+    private _renderDot;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    get items(): readonly HYTimelineItem[];
+    set items(value: readonly HYTimelineItem[]);
+    get mode(): HYTimelineMode;
+    set mode(value: HYTimelineMode);
+    get reverse(): boolean;
+    set reverse(value: boolean);
+    get pending(): string;
+    set pending(value: string);
+    get pendingDot(): string;
+    set pendingDot(value: string);
+    get renderItem(): HYTimelineItemRenderer | null;
+    set renderItem(value: HYTimelineItemRenderer | null);
+    get renderDot(): HYTimelineDotRenderer | null;
+    set renderDot(value: HYTimelineDotRenderer | null);
+    private _readItemsAttribute;
+    private _render;
+    private _createItem;
+    private _createPending;
+    private _positionFor;
+    private _toNode;
+}
+export declare function defineTimelineComponents(): void;

package/dist/timeline.js

@@ -0,0 +1,201 @@
+function normalizeItems(value) {
+    if (!Array.isArray(value))
+        return [];
+    return value.flatMap(item => {
+        if (!item || typeof item !== 'object')
+            return [];
+        const record = item;
+        if (record.title == null)
+            return [];
+        const status = ['success', 'info', 'warning', 'error'].includes(String(record.status)) ? String(record.status) : 'default';
+        const position = record.position === 'left' || record.position === 'right' ? record.position : undefined;
+        return [{
+                title: String(record.title),
+                ...(record.key != null && (typeof record.key === 'string' || typeof record.key === 'number') ? { key: record.key } : {}),
+                ...(record.label != null ? { label: String(record.label) } : {}),
+                ...(record.description != null ? { description: String(record.description) } : {}),
+                ...(record.color != null ? { color: String(record.color) } : {}),
+                ...(record.dot != null ? { dot: String(record.dot) } : {}),
+                ...(position ? { position } : {}),
+                status,
+            }];
+    });
+}
+/** Semantic, responsive timeline for ordered events and process history. */
+export class HYTimeline extends HTMLElement {
+    _list = document.createElement('ol');
+    _items = [];
+    _itemsAssigned = false;
+    _renderItem = null;
+    _renderDot = null;
+    static get observedAttributes() { return ['items', 'mode', 'reverse', 'pending', 'pending-dot', 'aria-label']; }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = `
+      :host { display: block; min-width: 0; color: var(--hy-text-color, #eef3ff); font: 12px/1.5 system-ui, sans-serif; }
+      .timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
+      .item { display: grid; grid-template-columns: minmax(0, 1fr) var(--hy-timeline-axis-width, 30px) minmax(0, 1fr); min-height: var(--hy-timeline-item-min-height, 72px); margin: 0; padding: 0; }
+      .label { grid-column: 1; padding: 1px 14px 22px 0; color: var(--hy-muted-color, #788697); text-align: right; }
+      .axis { position: relative; grid-column: 2; grid-row: 1; display: flex; justify-content: center; }
+      .axis::after { position: absolute; top: 16px; bottom: 0; width: var(--hy-timeline-line-width, 1px); background: var(--hy-timeline-line-color, var(--hy-border-color, #3d4654)); content: ''; }
+      .item:last-child .axis::after { display: none; }
+      .dot { position: relative; z-index: 1; display: grid; width: var(--hy-timeline-dot-size, 10px); height: var(--hy-timeline-dot-size, 10px); box-sizing: border-box; place-items: center; margin-top: 4px; border: 2px solid var(--_dot-color, var(--hy-muted-color, #788697)); border-radius: 50%; color: var(--_dot-color, var(--hy-muted-color, #788697)); background: var(--hy-surface-color, #111722); font-size: 9px; line-height: 1; }
+      .dot.custom { width: var(--hy-timeline-custom-dot-size, 22px); height: var(--hy-timeline-custom-dot-size, 22px); margin-top: -2px; border-width: 1px; background: var(--hy-surface-elevated-color, #171d27); }
+      .status-success { --_dot-color: var(--hy-success-color, #4ade80); }
+      .status-info { --_dot-color: var(--hy-info-color, var(--hy-accent-color, #79a8ff)); }
+      .status-warning { --_dot-color: var(--hy-warning-color, #fbbf24); }
+      .status-error { --_dot-color: var(--hy-error-color, #fb7185); }
+      .card { grid-column: 3; min-width: 0; padding: 0 0 22px 14px; }
+      .title { color: var(--hy-text-color, #eef3ff); font-weight: 650; }
+      .description { margin-top: 4px; color: var(--hy-secondary-text-color, #aebbd0); }
+      .content-left .card { grid-column: 1; padding: 0 14px 22px 0; text-align: right; }
+      .content-left .label { grid-column: 3; padding: 1px 0 22px 14px; text-align: left; }
+      .pending .dot { border-style: dashed; animation: hy-timeline-spin 1.2s linear infinite; }
+      .pending .dot.custom { animation: none; }
+      @keyframes hy-timeline-spin { to { transform: rotate(360deg); } }
+      @media (prefers-reduced-motion: reduce) { .pending .dot { animation: none; } }
+      @media (max-width: 560px) {
+        .item, .item.content-left { grid-template-columns: var(--hy-timeline-axis-width, 30px) minmax(0, 1fr); }
+        .axis, .item.content-left .axis { grid-column: 1; }
+        .card, .item.content-left .card { grid-column: 2; padding: 0 0 22px 12px; text-align: left; }
+        .label, .item.content-left .label { grid-column: 2; grid-row: 1; justify-self: end; padding: 1px 0 0 12px; text-align: right; }
+        .label + .axis + .card { padding-top: 22px; }
+      }
+    `;
+        this._list.className = 'timeline';
+        this._list.part.add('list');
+        root.append(style, this._list);
+    }
+    connectedCallback() {
+        if (!this._itemsAssigned && this.hasAttribute('items'))
+            this._readItemsAttribute();
+        this._render();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue)
+            return;
+        if (name === 'items' && !this._itemsAssigned)
+            this._readItemsAttribute();
+        this._render();
+    }
+    get items() { return this._items; }
+    set items(value) { this._itemsAssigned = true; this._items = normalizeItems(value); this._render(); }
+    get mode() { const value = this.getAttribute('mode'); return value === 'right' || value === 'alternate' ? value : 'left'; }
+    set mode(value) { this.setAttribute('mode', value === 'right' || value === 'alternate' ? value : 'left'); }
+    get reverse() { return this.hasAttribute('reverse'); }
+    set reverse(value) { this.toggleAttribute('reverse', Boolean(value)); }
+    get pending() { return this.getAttribute('pending') ?? ''; }
+    set pending(value) { const normalized = String(value); if (normalized)
+        this.setAttribute('pending', normalized);
+    else
+        this.removeAttribute('pending'); }
+    get pendingDot() { return this.getAttribute('pending-dot') ?? ''; }
+    set pendingDot(value) { const normalized = String(value); if (normalized)
+        this.setAttribute('pending-dot', normalized);
+    else
+        this.removeAttribute('pending-dot'); }
+    get renderItem() { return this._renderItem; }
+    set renderItem(value) { this._renderItem = typeof value === 'function' ? value : null; this._render(); }
+    get renderDot() { return this._renderDot; }
+    set renderDot(value) { this._renderDot = typeof value === 'function' ? value : null; this._render(); }
+    _readItemsAttribute() {
+        try {
+            this._items = normalizeItems(JSON.parse(this.getAttribute('items') ?? '[]'));
+        }
+        catch {
+            this._items = [];
+        }
+    }
+    _render() {
+        if (!this.isConnected)
+            return;
+        const name = this.getAttribute('aria-label');
+        if (name)
+            this._list.setAttribute('aria-label', name);
+        else
+            this._list.removeAttribute('aria-label');
+        const source = this.reverse ? [...this._items].reverse() : [...this._items];
+        const nodes = source.map((item, index) => this._createItem(item, index, false));
+        if (this.pending) {
+            const pending = this._createPending();
+            if (this.reverse)
+                nodes.unshift(pending);
+            else
+                nodes.push(pending);
+        }
+        this._list.replaceChildren(...nodes);
+    }
+    _createItem(item, index, pending) {
+        const element = document.createElement('li');
+        element.className = `item status-${item.status ?? 'default'}`;
+        element.part.add('item');
+        const position = item.position ?? this._positionFor(index);
+        element.classList.toggle('content-left', position === 'left');
+        if (pending) {
+            element.classList.add('pending');
+            element.part.add('pending');
+        }
+        if (item.color)
+            element.style.setProperty('--_dot-color', item.color);
+        const label = document.createElement('div');
+        label.className = 'label';
+        label.part.add('label');
+        label.textContent = item.label ?? '';
+        const axis = document.createElement('div');
+        axis.className = 'axis';
+        axis.part.add('axis');
+        const dot = document.createElement('span');
+        dot.className = 'dot';
+        dot.part.add('dot');
+        const customDot = pending ? this.pendingDot : this._renderDot?.(item, index) ?? item.dot;
+        if (customDot) {
+            dot.classList.add('custom');
+            dot.append(this._toNode(customDot));
+        }
+        axis.append(dot);
+        const card = document.createElement('div');
+        card.className = 'card';
+        card.part.add('content');
+        if (pending) {
+            const title = document.createElement('div');
+            title.className = 'title';
+            title.part.add('title');
+            title.textContent = this.pending;
+            card.append(title);
+        }
+        else if (this._renderItem)
+            card.append(this._toNode(this._renderItem(item, index)));
+        else {
+            const title = document.createElement('div');
+            title.className = 'title';
+            title.part.add('title');
+            title.textContent = item.title;
+            card.append(title);
+            if (item.description) {
+                const description = document.createElement('div');
+                description.className = 'description';
+                description.part.add('description');
+                description.textContent = item.description;
+                card.append(description);
+            }
+        }
+        element.append(label, axis, card);
+        return element;
+    }
+    _createPending() { return this._createItem({ title: this.pending, status: 'info' }, this._items.length, true); }
+    _positionFor(index) {
+        if (this.mode === 'right')
+            return 'left';
+        if (this.mode === 'alternate')
+            return index % 2 === 0 ? 'right' : 'left';
+        return 'right';
+    }
+    _toNode(value) { return value instanceof Node ? value : document.createTextNode(String(value)); }
+}
+export function defineTimelineComponents() {
+    if (!customElements.get('hy-timeline'))
+        customElements.define('hy-timeline', HYTimeline);
+}
+//# sourceMappingURL=timeline.js.map

package/dist/toast.d.ts

@@ -0,0 +1,55 @@
+export type HYToastType = 'success' | 'info' | 'warning' | 'error' | 'loading';
+export type HYToastPlacement = 'top' | 'center' | 'bottom';
+export type HYToastCloseReason = 'action' | 'timeout' | 'programmatic' | 'overflow';
+export interface HYToastOptions {
+    readonly key?: string;
+    readonly type?: HYToastType;
+    readonly message: string;
+    /** Auto-close delay in seconds. Use 0 for a persistent toast. */
+    readonly duration?: number;
+    readonly placement?: HYToastPlacement;
+    readonly closable?: boolean;
+}
+export type HYToastMethodOptions = Omit<HYToastOptions, 'type'>;
+export interface HYToastOpenDetail {
+    readonly key: string;
+    readonly type: HYToastType;
+    readonly placement: HYToastPlacement;
+}
+export interface HYToastCloseDetail extends HYToastOpenDetail {
+    readonly reason: HYToastCloseReason;
+}
+/** Lightweight imperative feedback center for short, transient messages. */
+export declare class HYToast extends HTMLElement {
+    private readonly _containers;
+    private readonly _toasts;
+    private _sequence;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    get placement(): HYToastPlacement;
+    set placement(value: HYToastPlacement);
+    get duration(): number;
+    set duration(value: number);
+    get maxCount(): number;
+    set maxCount(value: number);
+    get closable(): boolean;
+    set closable(value: boolean);
+    get size(): number;
+    open(options: string | HYToastOptions): string;
+    success(options: string | HYToastMethodOptions): string;
+    info(options: string | HYToastMethodOptions): string;
+    warning(options: string | HYToastMethodOptions): string;
+    error(options: string | HYToastMethodOptions): string;
+    loading(options: string | HYToastMethodOptions): string;
+    close(key: string): void;
+    clear(): void;
+    private _openTyped;
+    private _createToast;
+    private _closeToast;
+    private _removeToast;
+    private _syncAttributes;
+}
+export declare function defineToastComponents(): void;