@haiyue/ui 0.1.1 → 0.2.1

package/dist/tabs.d.ts

@@ -11,7 +11,9 @@ export declare class HYTabs extends HTMLElement {
     private readonly _style;
     private readonly _tabs;
     private readonly _panels;
+    private readonly _instanceId;
     private _options;
+    private _pendingFocusValue;
     static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;
@@ -20,9 +22,14 @@ export declare class HYTabs extends HTMLElement {
     set options(value: HYTabOption[]);
     get value(): string;
     set value(value: string);
+    /** Opt-in application ownership, including a disabled authoritative selection. */
+    get controlled(): boolean;
+    set controlled(value: boolean);
     private _syncFromAttributes;
     private _readOptionsAttribute;
     private _render;
+    private _focusTab;
+    private _resolveValue;
     private _select;
 }
 export declare function defineTabsComponents(): void;

package/dist/tabs.js

@@ -2,9 +2,11 @@ export class HYTabs extends HTMLElement {
     _style = document.createElement('style');
     _tabs = document.createElement('div');
     _panels = document.createElement('div');
+    _instanceId = `hy-tabs-${globalThis.crypto?.randomUUID?.() ?? Math.random().toString(36).slice(2)}`;
     _options = [];
+    _pendingFocusValue = null;
     static get observedAttributes() {
-        return ['options', 'value'];
+        return ['options', 'value', 'aria-label', 'controlled'];
     }
     constructor() {
         super();
@@ -27,6 +29,9 @@ export class HYTabs extends HTMLElement {
         align-items: end;
         gap: 2px;
         min-width: 0;
+        overflow-x: auto;
+        overflow-y: hidden;
+        scrollbar-width: none;
         padding: 4px 6px 0;
         border-bottom: 1px solid var(--hy-border-color, #303746);
         background: var(--hy-tabs-bar-bg-color, var(--hy-menu-bg-color, var(--hy-surface-elevated-color, #1b2230)));
@@ -34,6 +39,8 @@ export class HYTabs extends HTMLElement {
       button {
         height: 28px;
         min-width: 0;
+        flex-shrink: 0;
+        white-space: nowrap;
         padding: 0 10px;
         border: 1px solid transparent;
         border-bottom: 0;
@@ -61,11 +68,17 @@ export class HYTabs extends HTMLElement {
         min-height: 0;
         overflow: auto;
       }
+      .panels > [role="tabpanel"] {
+        height: 100%;
+        min-width: 0;
+        min-height: 0;
+      }
       ::slotted(*) {
         box-sizing: border-box;
       }
     `;
         this._tabs.className = 'tabs';
+        this._tabs.setAttribute('role', 'tablist');
         this._panels.className = 'panels';
         root.append(this._style, this._tabs, this._panels);
     }
@@ -74,11 +87,16 @@ export class HYTabs extends HTMLElement {
         this._render();
     }
     attributeChangedCallback(name, _oldValue, newValue) {
+        if (_oldValue === newValue)
+            return;
         if (name === 'options')
             this._readOptionsAttribute();
-        if (name === 'value' && newValue === null && this._options[0]) {
-            this.setAttribute('value', this._options[0].value);
-            return;
+        if (name === 'value' && newValue === null) {
+            const value = this._resolveValue();
+            if (value) {
+                this.setAttribute('value', value);
+                return;
+            }
         }
         this._render();
     }
@@ -87,9 +105,9 @@ export class HYTabs extends HTMLElement {
     }
     set options(value) {
         this._options = Array.isArray(value) ? value : [];
-        if (!this._options.some(item => item.value === this.value)) {
-            this.value = this._options[0]?.value ?? '';
-        }
+        const resolved = this._resolveValue();
+        if (resolved !== this.value)
+            this.value = resolved;
         this._render();
     }
     get value() {
@@ -97,12 +115,16 @@ export class HYTabs extends HTMLElement {
     }
     set value(value) {
         this.setAttribute('value', value);
-        this._render();
     }
+    /** Opt-in application ownership, including a disabled authoritative selection. */
+    get controlled() { return this.hasAttribute('controlled'); }
+    set controlled(value) { this.toggleAttribute('controlled', value); }
     _syncFromAttributes() {
-        this._readOptionsAttribute();
-        if (!this.value && this._options[0])
-            this.setAttribute('value', this._options[0].value);
+        if (this.hasAttribute('options'))
+            this._readOptionsAttribute();
+        const value = this._resolveValue();
+        if (value !== this.value)
+            this.setAttribute('value', value);
     }
     _readOptionsAttribute() {
         const raw = this.getAttribute('options');
@@ -125,25 +147,77 @@ export class HYTabs extends HTMLElement {
         }
     }
     _render() {
+        const focusedValue = this._pendingFocusValue
+            ?? [...this._tabs.querySelectorAll('button')].find(button => button === this.shadowRoot?.activeElement)?.dataset.value
+            ?? null;
+        this._pendingFocusValue = null;
         this._tabs.replaceChildren();
         this._panels.replaceChildren();
-        const value = this.value || this._options[0]?.value || '';
-        for (const option of this._options) {
+        this._tabs.setAttribute('aria-label', this.getAttribute('aria-label') ?? 'Tabs');
+        const enabled = this._options.filter(option => !option.disabled);
+        const value = this._resolveValue(enabled);
+        if (value !== this.value) {
+            this.setAttribute('value', value);
+            return;
+        }
+        const focusValue = enabled.some(option => option.value === value) ? value : enabled[0]?.value;
+        this._options.forEach((option, index) => {
             const button = document.createElement('button');
+            const panel = document.createElement('div');
             button.type = 'button';
+            button.id = `${this._instanceId}-tab-${index}`;
+            button.dataset.value = option.value;
+            button.setAttribute('role', 'tab');
+            button.setAttribute('aria-selected', String(option.value === value));
+            panel.id = `${this._instanceId}-panel-${index}`;
+            panel.hidden = option.value !== value;
+            panel.setAttribute('role', 'tabpanel');
+            panel.setAttribute('aria-labelledby', button.id);
+            button.setAttribute('aria-controls', panel.id);
+            button.tabIndex = option.value === focusValue && !option.disabled ? 0 : -1;
             button.textContent = option.label;
             button.disabled = Boolean(option.disabled);
             button.classList.toggle('active', option.value === value);
             button.addEventListener('click', () => this._select(option.value));
+            button.addEventListener('keydown', event => {
+                if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key) || !enabled.length)
+                    return;
+                event.preventDefault();
+                const position = enabled.findIndex(item => item.value === option.value);
+                const next = event.key === 'Home' ? 0 : event.key === 'End' ? enabled.length - 1
+                    : (position + (event.key === 'ArrowLeft' ? -1 : 1) + enabled.length) % enabled.length;
+                this._pendingFocusValue = enabled[next].value;
+                this._select(enabled[next].value);
+            });
+            const slot = document.createElement('slot');
+            slot.name = option.value;
+            panel.append(slot);
             this._tabs.append(button);
+            this._panels.append(panel);
+        });
+        if (focusedValue) {
+            const restoreValue = enabled.some(option => option.value === focusedValue) ? focusedValue : focusValue;
+            if (restoreValue)
+                this._focusTab(restoreValue);
         }
-        const slot = document.createElement('slot');
-        slot.name = value;
-        this._panels.append(slot);
+    }
+    _focusTab(value) {
+        [...this._tabs.querySelectorAll('button')].find(button => button.dataset.value === value)?.focus();
+    }
+    _resolveValue(enabled = this._options.filter(option => !option.disabled)) {
+        if (this.controlled && this._options.some(option => option.value === this.value))
+            return this.value;
+        if (enabled.some(option => option.value === this.value))
+            return this.value;
+        if (enabled[0])
+            return enabled[0].value;
+        return '';
     }
     _select(value) {
         if (value === this.value)
             return;
+        if (!this._options.some(option => option.value === value && !option.disabled))
+            return;
         this.setAttribute('value', value);
         const option = this._options.find(item => item.value === value) ?? null;
         this.dispatchEvent(new CustomEvent('tab-change', {

package/dist/tag.d.ts

@@ -0,0 +1,55 @@
+export type HYTagVariant = 'default' | 'primary' | 'success' | 'warning' | 'error';
+export type HYTagSize = 'small' | 'medium' | 'large';
+export interface HYTagCloseDetail {
+    readonly value: string;
+}
+export interface HYTagCheckedChangeDetail {
+    readonly checked: boolean;
+    readonly value: string;
+}
+/** Compact semantic label with optional close and checked interactions. */
+export declare class HYTag extends HTMLElement {
+    private readonly _tag;
+    private readonly _icon;
+    private readonly _iconSlot;
+    private readonly _iconText;
+    private readonly _labelSlot;
+    private readonly _labelText;
+    private readonly _label;
+    private readonly _close;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    get variant(): HYTagVariant;
+    set variant(value: HYTagVariant);
+    get color(): string;
+    set color(value: string);
+    get size(): HYTagSize;
+    set size(value: HYTagSize);
+    get label(): string;
+    set label(value: string);
+    get icon(): string;
+    set icon(value: string);
+    get value(): string;
+    set value(value: string);
+    get closable(): boolean;
+    set closable(value: boolean);
+    get checkable(): boolean;
+    set checkable(value: boolean);
+    get checked(): boolean;
+    set checked(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    close(): boolean;
+    private _toggleChecked;
+    private _sync;
+    private _syncIcon;
+    private _syncLabel;
+    private _setOptionalAttribute;
+    private _onTagClick;
+    private _onCloseClick;
+    private _onKeydown;
+}
+export declare function defineTagComponents(): void;

package/dist/tag.js

@@ -0,0 +1,225 @@
+const VARIANTS = ['default', 'primary', 'success', 'warning', 'error'];
+const SIZES = ['small', 'medium', 'large'];
+function isVariant(value) {
+    return typeof value === 'string' && VARIANTS.includes(value);
+}
+function isSize(value) {
+    return typeof value === 'string' && SIZES.includes(value);
+}
+/** Compact semantic label with optional close and checked interactions. */
+export class HYTag extends HTMLElement {
+    _tag = document.createElement('span');
+    _icon = document.createElement('span');
+    _iconSlot = document.createElement('slot');
+    _iconText = document.createElement('span');
+    _labelSlot = document.createElement('slot');
+    _labelText = document.createElement('span');
+    _label = document.createElement('span');
+    _close = document.createElement('button');
+    static get observedAttributes() {
+        return ['variant', 'color', 'size', 'label', 'icon', 'closable', 'checkable', 'checked', 'disabled', 'value'];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = `
+      :host { display: inline-flex; max-width: 100%; vertical-align: middle; }
+      :host([hidden]) { display: none !important; }
+      .tag {
+        --_tone: var(--hy-secondary-text-color, #9aa8ba);
+        --_surface: color-mix(in srgb, var(--_tone) 12%, var(--hy-surface-color, #121822));
+        display: inline-flex;
+        max-width: 100%;
+        min-height: var(--hy-tag-height, 24px);
+        box-sizing: border-box;
+        align-items: center;
+        gap: var(--hy-tag-gap, 5px);
+        padding: 2px var(--hy-tag-padding-inline, 8px);
+        border: 1px solid color-mix(in srgb, var(--_tone) 42%, var(--hy-border-color, #303746));
+        border-radius: var(--hy-tag-radius, 5px);
+        color: var(--_tone);
+        background: var(--_surface);
+        font: 600 var(--hy-tag-font-size, 11px)/1.35 system-ui, sans-serif;
+        transition: border-color 120ms ease, box-shadow 120ms ease, color 120ms ease, background 120ms ease;
+      }
+      .tag[data-variant="primary"] { --_tone: var(--hy-accent-color, #79a8ff); }
+      .tag[data-variant="success"] { --_tone: var(--hy-success-color, #55c98a); }
+      .tag[data-variant="warning"] { --_tone: var(--hy-warning-color, #e7b75a); }
+      .tag[data-variant="error"] { --_tone: var(--hy-error-color, #ef6b78); }
+      :host([checkable]) .tag { cursor: pointer; user-select: none; }
+      :host([checkable][checked]) .tag {
+        color: var(--hy-selected-text-color, #fff);
+        background: var(--_tone);
+        border-color: var(--_tone);
+      }
+      :host(:focus-visible) { outline: none; }
+      :host(:focus-visible) .tag { box-shadow: 0 0 0 2px var(--hy-focus-ring-color, rgba(61, 111, 168, .24)); }
+      :host([disabled]) { pointer-events: none; opacity: .5; }
+      :host([size="small"]) .tag { --hy-tag-height: 20px; --hy-tag-padding-inline: 6px; --hy-tag-font-size: 10px; }
+      :host([size="large"]) .tag { --hy-tag-height: 30px; --hy-tag-padding-inline: 11px; --hy-tag-font-size: 12px; }
+      .icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; }
+      .icon[hidden] { display: none; }
+      .label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .close {
+        display: none;
+        width: 16px;
+        height: 16px;
+        margin-inline-end: -3px;
+        padding: 0;
+        border: 0;
+        border-radius: 50%;
+        place-items: center;
+        color: currentColor;
+        background: transparent;
+        cursor: pointer;
+        font: 15px/1 system-ui, sans-serif;
+      }
+      :host([closable]) .close { display: grid; }
+      .close:hover { background: color-mix(in srgb, currentColor 16%, transparent); }
+      .close:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
+      ::slotted([slot="icon"]) { width: 1em; height: 1em; }
+      @media (prefers-reduced-motion: reduce) { .tag { transition: none; } }
+    `;
+        this._tag.className = 'tag';
+        this._tag.part.add('tag');
+        this._icon.className = 'icon';
+        this._icon.part.add('icon');
+        this._iconSlot.name = 'icon';
+        this._iconText.className = 'icon-text';
+        this._icon.append(this._iconSlot, this._iconText);
+        this._label.className = 'label';
+        this._label.part.add('label');
+        this._labelText.className = 'label-text';
+        this._label.append(this._labelSlot, this._labelText);
+        this._close.className = 'close';
+        this._close.part.add('close-button');
+        this._close.type = 'button';
+        this._close.textContent = '×';
+        this._close.setAttribute('aria-label', 'Close tag');
+        this._tag.append(this._icon, this._label, this._close);
+        root.append(style, this._tag);
+    }
+    connectedCallback() {
+        this._tag.addEventListener('click', this._onTagClick);
+        this._close.addEventListener('click', this._onCloseClick);
+        this.addEventListener('keydown', this._onKeydown);
+        this._iconSlot.addEventListener('slotchange', this._syncIcon);
+        this._labelSlot.addEventListener('slotchange', this._syncLabel);
+        this._sync();
+    }
+    disconnectedCallback() {
+        this._tag.removeEventListener('click', this._onTagClick);
+        this._close.removeEventListener('click', this._onCloseClick);
+        this.removeEventListener('keydown', this._onKeydown);
+        this._iconSlot.removeEventListener('slotchange', this._syncIcon);
+        this._labelSlot.removeEventListener('slotchange', this._syncLabel);
+    }
+    attributeChangedCallback() { this._sync(); }
+    get variant() { return isVariant(this.getAttribute('variant')) ? this.getAttribute('variant') : 'default'; }
+    set variant(value) { this.setAttribute('variant', isVariant(value) ? value : 'default'); }
+    get color() { return this.getAttribute('color')?.trim() ?? ''; }
+    set color(value) { this._setOptionalAttribute('color', value); }
+    get size() { return isSize(this.getAttribute('size')) ? this.getAttribute('size') : 'medium'; }
+    set size(value) { this.setAttribute('size', isSize(value) ? value : 'medium'); }
+    get label() { return this.getAttribute('label') ?? ''; }
+    set label(value) { this._setOptionalAttribute('label', value); }
+    get icon() { return this.getAttribute('icon') ?? ''; }
+    set icon(value) { this._setOptionalAttribute('icon', value); }
+    get value() { return this.getAttribute('value') ?? ''; }
+    set value(value) { this.setAttribute('value', String(value ?? '')); }
+    get closable() { return this.hasAttribute('closable'); }
+    set closable(value) { this.toggleAttribute('closable', Boolean(value)); }
+    get checkable() { return this.hasAttribute('checkable'); }
+    set checkable(value) { this.toggleAttribute('checkable', Boolean(value)); }
+    get checked() { return this.hasAttribute('checked'); }
+    set checked(value) { this.toggleAttribute('checked', Boolean(value)); }
+    get disabled() { return this.hasAttribute('disabled'); }
+    set disabled(value) { this.toggleAttribute('disabled', Boolean(value)); }
+    close() {
+        if (!this.closable || this.disabled)
+            return false;
+        const accepted = this.dispatchEvent(new CustomEvent('tag-close', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+            cancelable: true,
+        }));
+        if (accepted)
+            this.hidden = true;
+        return accepted;
+    }
+    _toggleChecked() {
+        if (!this.checkable || this.disabled)
+            return;
+        this.checked = !this.checked;
+        this.dispatchEvent(new CustomEvent('checked-change', {
+            detail: { checked: this.checked, value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _sync() {
+        this._tag.dataset.variant = this.variant;
+        const color = this.color;
+        if (color)
+            this._tag.style.setProperty('--_tone', color);
+        else
+            this._tag.style.removeProperty('--_tone');
+        this._close.disabled = this.disabled;
+        this._close.tabIndex = this.closable ? 0 : -1;
+        if (this.checkable) {
+            this.setAttribute('role', 'checkbox');
+            this.setAttribute('aria-checked', String(this.checked));
+            this.setAttribute('aria-disabled', String(this.disabled));
+            if (!this.hasAttribute('tabindex'))
+                this.tabIndex = this.disabled ? -1 : 0;
+        }
+        else {
+            this.removeAttribute('role');
+            this.removeAttribute('aria-checked');
+            this.removeAttribute('aria-disabled');
+            if (this.getAttribute('tabindex') === '0' || this.getAttribute('tabindex') === '-1')
+                this.removeAttribute('tabindex');
+        }
+        this._syncIcon();
+        this._syncLabel();
+    }
+    _syncIcon = () => {
+        const assigned = this._iconSlot.assignedNodes({ flatten: true }).some(node => node.nodeType === Node.ELEMENT_NODE || Boolean(node.textContent?.trim()));
+        this._iconText.textContent = assigned ? '' : this.icon;
+        this._icon.hidden = !assigned && !this.icon;
+    };
+    _syncLabel = () => {
+        const assigned = this._labelSlot.assignedNodes({ flatten: true }).some(node => node.nodeType === Node.ELEMENT_NODE || Boolean(node.textContent?.trim()));
+        this._labelText.textContent = assigned ? '' : this.label;
+        this._labelText.hidden = assigned || !this.label;
+    };
+    _setOptionalAttribute(name, value) {
+        const normalized = String(value ?? '').trim();
+        if (normalized)
+            this.setAttribute(name, normalized);
+        else
+            this.removeAttribute(name);
+    }
+    _onTagClick = (event) => {
+        if (event.composedPath().includes(this._close))
+            return;
+        this._toggleChecked();
+    };
+    _onCloseClick = (event) => {
+        event.stopPropagation();
+        this.close();
+    };
+    _onKeydown = (event) => {
+        if (!this.checkable || this.disabled || (event.key !== 'Enter' && event.key !== ' '))
+            return;
+        event.preventDefault();
+        this._toggleChecked();
+    };
+}
+export function defineTagComponents() {
+    if (!customElements.get('hy-tag'))
+        customElements.define('hy-tag', HYTag);
+}
+//# sourceMappingURL=tag.js.map

package/dist/time-picker.d.ts

@@ -0,0 +1,62 @@
+export interface HYTimePickerChangeDetail {
+    readonly value: string;
+    readonly hour: number | null;
+    readonly minute: number | null;
+    readonly second: number | null;
+}
+export interface HYTimePickerOpenChangeDetail {
+    readonly open: boolean;
+}
+/** Accessible column-based time picker with stable 24-hour values. */
+export declare class HYTimePicker extends HTMLElement {
+    private readonly _control;
+    private readonly _trigger;
+    private readonly _label;
+    private readonly _arrow;
+    private readonly _clear;
+    private readonly _panel;
+    private readonly _panelId;
+    private _value;
+    private _draft;
+    private _reflecting;
+    private _outsideAbort;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    get value(): string;
+    set value(value: string);
+    get open(): boolean;
+    set open(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get clearable(): boolean;
+    set clearable(value: boolean);
+    get placeholder(): string;
+    set placeholder(value: string);
+    get showSeconds(): boolean;
+    set showSeconds(value: boolean);
+    get minuteStep(): number;
+    set minuteStep(value: number);
+    get secondStep(): number;
+    set secondStep(value: number);
+    get min(): string;
+    set min(value: string);
+    get max(): string;
+    set max(value: string);
+    private _syncAttributes;
+    private _normalizeValue;
+    private _reflectValue;
+    private _isAllowed;
+    private _setDraft;
+    private _render;
+    private _renderPanel;
+    private _createColumn;
+    private _handleOptionKeydown;
+    private _focusSelected;
+    private _commit;
+    private _syncOutsideListener;
+    private _dispatchOpenChange;
+}
+export declare function defineTimePickerComponents(): void;