@haiyue/ui 0.1.2 → 0.2.2

package/dist/tabs.d.ts

@@ -22,6 +22,9 @@ 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;

package/dist/tabs.js

@@ -6,7 +6,7 @@ export class HYTabs extends HTMLElement {
     _options = [];
     _pendingFocusValue = null;
     static get observedAttributes() {
-        return ['options', 'value', 'aria-label'];
+        return ['options', 'value', 'aria-label', 'controlled'];
     }
     constructor() {
         super();
@@ -68,6 +68,11 @@ 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;
       }
@@ -111,6 +116,9 @@ export class HYTabs extends HTMLElement {
     set value(value) {
         this.setAttribute('value', value);
     }
+    /** Opt-in application ownership, including a disabled authoritative selection. */
+    get controlled() { return this.hasAttribute('controlled'); }
+    set controlled(value) { this.toggleAttribute('controlled', value); }
     _syncFromAttributes() {
         if (this.hasAttribute('options'))
             this._readOptionsAttribute();
@@ -197,6 +205,8 @@ export class HYTabs extends HTMLElement {
         [...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])

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;