@haiyue/ui 0.1.2 → 0.2.2

package/dist/breadcrumb.js

@@ -0,0 +1,210 @@
+function itemTitle(item) {
+    return String(item.title ?? item.label ?? '');
+}
+/** Accessible breadcrumb navigation with links, actions, and a configurable separator. */
+export class HYBreadcrumb extends HTMLElement {
+    _nav = document.createElement('nav');
+    _list = document.createElement('ol');
+    _items = [];
+    _renderItem = null;
+    static get observedAttributes() {
+        return ['items', 'separator', '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-secondary-text-color, #aebbd0);
+        font: 12px/1.4 system-ui, sans-serif;
+      }
+      nav { min-width: 0; }
+      ol {
+        display: flex;
+        align-items: center;
+        min-width: 0;
+        margin: 0;
+        padding: 0;
+        overflow-x: auto;
+        overflow-y: hidden;
+        list-style: none;
+        scrollbar-width: none;
+      }
+      ol::-webkit-scrollbar { display: none; }
+      li {
+        display: inline-flex;
+        flex: 0 0 auto;
+        align-items: center;
+        min-width: 0;
+      }
+      a, button, .current, .disabled {
+        display: inline-flex;
+        align-items: center;
+        min-width: 0;
+        max-width: var(--hy-breadcrumb-item-max-width, 240px);
+        box-sizing: border-box;
+        padding: var(--hy-breadcrumb-item-padding, 3px 5px);
+        overflow: hidden;
+        border: 0;
+        border-radius: var(--hy-breadcrumb-radius, 4px);
+        color: inherit;
+        background: transparent;
+        font: inherit;
+        text-decoration: none;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      a, button { cursor: pointer; }
+      a:hover, button:hover {
+        color: var(--hy-text-color, #eef3ff);
+        background: var(--hy-hover-bg-color, #273241);
+      }
+      a:focus-visible, button:focus-visible {
+        outline: 2px solid var(--hy-focus-border-color, #79a8ff);
+        outline-offset: 1px;
+      }
+      .current {
+        color: var(--hy-text-color, #eef3ff);
+        font-weight: 600;
+      }
+      .disabled { color: var(--hy-disabled-text-color, #657185); cursor: not-allowed; }
+      .separator {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 14px;
+        padding: 0 var(--hy-breadcrumb-separator-gap, 3px);
+        color: var(--hy-muted-color, #657185);
+        user-select: none;
+      }
+    `;
+        this._nav.part.add('nav');
+        this._list.part.add('list');
+        this._nav.append(this._list);
+        root.append(style, this._nav);
+    }
+    connectedCallback() {
+        if (this.hasAttribute('items'))
+            this._readItemsAttribute();
+        this._render();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue)
+            return;
+        if (name === 'items')
+            this._readItemsAttribute();
+        this._render();
+    }
+    get items() { return this._items; }
+    set items(value) {
+        this._items = Array.isArray(value) ? value.map(item => ({ ...item, title: itemTitle(item) })) : [];
+        this._render();
+    }
+    get separator() { return this.getAttribute('separator') ?? '/'; }
+    set separator(value) { this.setAttribute('separator', String(value)); }
+    get renderItem() { return this._renderItem; }
+    set renderItem(value) {
+        this._renderItem = typeof value === 'function' ? value : null;
+        this._render();
+    }
+    _readItemsAttribute() {
+        const raw = this.getAttribute('items');
+        if (!raw) {
+            this._items = [];
+            return;
+        }
+        try {
+            const parsed = JSON.parse(raw);
+            this._items = Array.isArray(parsed) ? parsed.map((item) => {
+                const record = item && typeof item === 'object' ? item : {};
+                return {
+                    ...(record.key == null ? {} : { key: String(record.key) }),
+                    title: String(record.title ?? record.label ?? ''),
+                    ...(record.label == null ? {} : { label: String(record.label) }),
+                    ...(record.href == null ? {} : { href: String(record.href) }),
+                    ...(record.target == null ? {} : { target: String(record.target) }),
+                    disabled: Boolean(record.disabled),
+                    ...(record.ariaLabel == null ? {} : { ariaLabel: String(record.ariaLabel) }),
+                };
+            }) : [];
+        }
+        catch (error) {
+            console.warn('Invalid hy-breadcrumb items attribute.', error);
+        }
+    }
+    _render() {
+        this._nav.setAttribute('aria-label', this.getAttribute('aria-label') ?? 'Breadcrumb');
+        const lastIndex = this._items.length - 1;
+        const rows = this._items.map((item, index) => {
+            const row = document.createElement('li');
+            row.part.add('item');
+            if (index > 0) {
+                const separator = document.createElement('span');
+                separator.className = 'separator';
+                separator.part.add('separator');
+                separator.setAttribute('aria-hidden', 'true');
+                separator.textContent = this.separator;
+                row.append(separator);
+            }
+            const current = index === lastIndex;
+            const content = this._renderItem?.(item, index, current) ?? itemTitle(item);
+            let element;
+            if (current) {
+                element = document.createElement('span');
+                element.className = 'current';
+                element.part.add('current');
+                element.setAttribute('aria-current', 'page');
+            }
+            else if (item.disabled) {
+                element = document.createElement('span');
+                element.className = 'disabled';
+                element.part.add('disabled');
+                element.setAttribute('aria-disabled', 'true');
+            }
+            else if (item.href) {
+                const anchor = document.createElement('a');
+                anchor.href = item.href;
+                if (item.target)
+                    anchor.target = item.target;
+                anchor.part.add('link');
+                anchor.addEventListener('click', event => {
+                    if (!this._dispatchItemClick(item, index))
+                        event.preventDefault();
+                });
+                element = anchor;
+            }
+            else {
+                const button = document.createElement('button');
+                button.type = 'button';
+                button.part.add('button');
+                button.addEventListener('click', () => this._dispatchItemClick(item, index));
+                element = button;
+            }
+            if (item.ariaLabel)
+                element.setAttribute('aria-label', item.ariaLabel);
+            if (content instanceof Node)
+                element.append(content);
+            else
+                element.textContent = content == null ? '' : String(content);
+            row.append(element);
+            return row;
+        });
+        this._list.replaceChildren(...rows);
+    }
+    _dispatchItemClick(item, index) {
+        return this.dispatchEvent(new CustomEvent('breadcrumb-click', {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+            detail: { item, index },
+        }));
+    }
+}
+export function defineBreadcrumbComponents() {
+    if (!customElements.get('hy-breadcrumb'))
+        customElements.define('hy-breadcrumb', HYBreadcrumb);
+}
+//# sourceMappingURL=breadcrumb.js.map

package/dist/button-group.d.ts

@@ -0,0 +1,12 @@
+export type HYButtonGroupOrientation = 'horizontal' | 'vertical';
+export declare class HYButtonGroup extends HTMLElement {
+    private readonly _group;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    get orientation(): HYButtonGroupOrientation;
+    set orientation(value: HYButtonGroupOrientation);
+    private _sync;
+}
+export declare function defineButtonGroupComponents(): void;

package/dist/button-group.js

@@ -0,0 +1,72 @@
+export class HYButtonGroup extends HTMLElement {
+    _group = document.createElement('div');
+    static get observedAttributes() {
+        return ['orientation', 'aria-label'];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = `
+      :host { display: inline-flex; max-width: 100%; }
+      .group { display: inline-flex; align-items: stretch; max-width: 100%; }
+      :host([orientation="vertical"]) .group { flex-direction: column; }
+      ::slotted(hy-button) {
+        position: relative;
+        display: block;
+        --hy-button-radius: 0;
+      }
+      :host(:not([orientation="vertical"])) ::slotted(hy-button:not(:first-child)) { margin-left: -1px; }
+      :host(:not([orientation="vertical"])) ::slotted(hy-button:first-child) {
+        --hy-button-radius-top-left: var(--hy-button-group-radius, 4px);
+        --hy-button-radius-bottom-left: var(--hy-button-group-radius, 4px);
+      }
+      :host(:not([orientation="vertical"])) ::slotted(hy-button:last-child) {
+        --hy-button-radius-top-right: var(--hy-button-group-radius, 4px);
+        --hy-button-radius-bottom-right: var(--hy-button-group-radius, 4px);
+      }
+      :host([orientation="vertical"]) ::slotted(hy-button:not(:first-child)) { margin-top: -1px; }
+      :host([orientation="vertical"]) ::slotted(hy-button:first-child) {
+        --hy-button-radius-top-left: var(--hy-button-group-radius, 4px);
+        --hy-button-radius-top-right: var(--hy-button-group-radius, 4px);
+      }
+      :host([orientation="vertical"]) ::slotted(hy-button:last-child) {
+        --hy-button-radius-bottom-left: var(--hy-button-group-radius, 4px);
+        --hy-button-radius-bottom-right: var(--hy-button-group-radius, 4px);
+      }
+      ::slotted(hy-button:hover), ::slotted(hy-button:focus-within) { z-index: 1; }
+    `;
+        this._group.className = 'group';
+        this._group.part.add('group');
+        this._group.setAttribute('role', 'group');
+        this._group.append(document.createElement('slot'));
+        root.append(style, this._group);
+    }
+    connectedCallback() {
+        if (!this.hasAttribute('orientation'))
+            this.setAttribute('orientation', 'horizontal');
+        this._sync();
+    }
+    attributeChangedCallback() {
+        this._sync();
+    }
+    get orientation() {
+        return this.getAttribute('orientation') === 'vertical' ? 'vertical' : 'horizontal';
+    }
+    set orientation(value) {
+        this.setAttribute('orientation', value === 'vertical' ? 'vertical' : 'horizontal');
+    }
+    _sync() {
+        const label = this.getAttribute('aria-label');
+        if (label)
+            this._group.setAttribute('aria-label', label);
+        else
+            this._group.removeAttribute('aria-label');
+    }
+}
+export function defineButtonGroupComponents() {
+    if (!customElements.get('hy-button-group')) {
+        customElements.define('hy-button-group', HYButtonGroup);
+    }
+}
+//# sourceMappingURL=button-group.js.map

package/dist/button.d.ts

@@ -1,10 +1,24 @@
+export type HYButtonIconPosition = 'start' | 'end';
 export declare class HYButton extends HTMLElement {
     private readonly _button;
-    private readonly _slot;
+    private readonly _content;
+    private readonly _contentSlot;
+    private readonly _icon;
+    private readonly _iconSlot;
+    private readonly _iconFallback;
+    private readonly _spinner;
     static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;
     attributeChangedCallback(): void;
+    get loading(): boolean;
+    set loading(value: boolean);
+    get icon(): string;
+    set icon(value: string);
+    get iconPosition(): HYButtonIconPosition;
+    set iconPosition(value: HYButtonIconPosition);
+    click(): void;
     private _sync;
+    private _syncIcon;
 }
 export declare function defineButtonComponents(): void;

package/dist/button.js

@@ -1,20 +1,34 @@
 export class HYButton extends HTMLElement {
     _button = document.createElement('button');
-    _slot = document.createElement('slot');
+    _content = document.createElement('span');
+    _contentSlot = document.createElement('slot');
+    _icon = document.createElement('span');
+    _iconSlot = document.createElement('slot');
+    _iconFallback = document.createElement('span');
+    _spinner = document.createElement('span');
     static get observedAttributes() {
-        return ['label', 'disabled', 'aria-label', 'title', 'icon-only'];
+        return ['label', 'disabled', 'aria-label', 'aria-pressed', 'title', 'icon-only', 'icon', 'icon-position', 'loading'];
     }
     constructor() {
         super();
         const root = this.attachShadow({ mode: 'open' });
         const style = document.createElement('style');
         style.textContent = `
-      :host { display: inline-block; }
+      :host { display: inline-block; min-width: 0; }
       button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: var(--hy-button-icon-gap, 7px);
+        width: 100%;
         min-height: 28px;
         padding: 0 10px;
         border: 1px solid var(--hy-border-color, #3d4654);
-        border-radius: 4px;
+        border-radius:
+          var(--hy-button-radius-top-left, var(--hy-button-radius, 4px))
+          var(--hy-button-radius-top-right, var(--hy-button-radius, 4px))
+          var(--hy-button-radius-bottom-right, var(--hy-button-radius, 4px))
+          var(--hy-button-radius-bottom-left, var(--hy-button-radius, 4px));
         background: var(--hy-surface-elevated-color, #202733);
         color: var(--hy-text-color, #eef3ff);
         font: 12px system-ui, sans-serif;
@@ -31,9 +45,21 @@ export class HYButton extends HTMLElement {
       button.icon-only {
         width: 28px;
         padding: 0;
-        display: inline-grid;
-        place-items: center;
+        gap: 0;
       }
+      .icon { display: inline-grid; flex: 0 0 auto; place-items: center; line-height: 1; }
+      button.icon-end .icon { order: 2; }
+      .icon[hidden], .spinner[hidden] { display: none; }
+      .spinner {
+        width: var(--hy-button-loading-size, 14px);
+        height: var(--hy-button-loading-size, 14px);
+        box-sizing: border-box;
+        border: var(--hy-button-loading-stroke, 2px) solid color-mix(in srgb, currentColor 28%, transparent);
+        border-top-color: currentColor;
+        border-radius: 50%;
+        animation: hy-button-spin var(--hy-button-loading-duration, 0.72s) linear infinite;
+      }
+      @keyframes hy-button-spin { to { transform: rotate(360deg); } }
       ::slotted(svg) {
         width: 16px;
         height: 16px;
@@ -48,7 +74,26 @@ export class HYButton extends HTMLElement {
         opacity: 0.5;
         cursor: default;
       }
+      @media (prefers-reduced-motion: reduce) {
+        .spinner { animation-duration: 1.5s; }
+      }
     `;
+        this._button.type = 'button';
+        this._button.part.add('button');
+        this._content.className = 'content';
+        this._content.part.add('content');
+        this._icon.className = 'icon';
+        this._icon.part.add('icon');
+        this._iconSlot.name = 'icon';
+        this._iconFallback.className = 'icon-fallback';
+        this._spinner.className = 'spinner';
+        this._spinner.part.add('spinner');
+        this._spinner.setAttribute('aria-hidden', 'true');
+        this._iconSlot.append(this._iconFallback);
+        this._icon.append(this._iconSlot, this._spinner);
+        this._content.append(this._contentSlot);
+        this._button.append(this._icon, this._content);
+        this._iconSlot.addEventListener('slotchange', () => this._syncIcon());
         root.append(style, this._button);
     }
     connectedCallback() {
@@ -57,24 +102,68 @@ export class HYButton extends HTMLElement {
     attributeChangedCallback() {
         this._sync();
     }
+    get loading() {
+        return this.hasAttribute('loading');
+    }
+    set loading(value) {
+        this.toggleAttribute('loading', Boolean(value));
+    }
+    get icon() {
+        return this.getAttribute('icon') ?? '';
+    }
+    set icon(value) {
+        if (value)
+            this.setAttribute('icon', value);
+        else
+            this.removeAttribute('icon');
+    }
+    get iconPosition() {
+        return this.getAttribute('icon-position') === 'end' ? 'end' : 'start';
+    }
+    set iconPosition(value) {
+        this.setAttribute('icon-position', value === 'end' ? 'end' : 'start');
+    }
+    click() {
+        this._button.click();
+    }
     _sync() {
         const label = this.getAttribute('label');
         if (label !== null) {
-            this._button.textContent = label;
-            this._button.classList.remove('icon-only');
+            if (this._content.textContent !== label || this._content.firstChild === this._contentSlot)
+                this._content.textContent = label;
             this._button.removeAttribute('aria-label');
         }
         else {
-            if (this._button.firstChild !== this._slot)
-                this._button.replaceChildren(this._slot);
-            this._button.classList.toggle('icon-only', this.hasAttribute('icon-only'));
+            if (this._content.firstChild !== this._contentSlot)
+                this._content.replaceChildren(this._contentSlot);
             const accessibleLabel = this.getAttribute('aria-label') ?? this.getAttribute('title') ?? '';
             if (accessibleLabel)
                 this._button.setAttribute('aria-label', accessibleLabel);
             else
                 this._button.removeAttribute('aria-label');
         }
-        this._button.disabled = this.hasAttribute('disabled');
+        const loading = this.loading;
+        this._button.classList.toggle('icon-only', label === null && this.hasAttribute('icon-only'));
+        this._button.classList.toggle('icon-end', this.iconPosition === 'end');
+        this._button.disabled = this.hasAttribute('disabled') || loading;
+        if (loading)
+            this._button.setAttribute('aria-busy', 'true');
+        else
+            this._button.removeAttribute('aria-busy');
+        const pressed = this.getAttribute('aria-pressed');
+        if (pressed === 'true' || pressed === 'false' || pressed === 'mixed')
+            this._button.setAttribute('aria-pressed', pressed);
+        else
+            this._button.removeAttribute('aria-pressed');
+        this._syncIcon();
+    }
+    _syncIcon() {
+        const loading = this.loading;
+        const assignedIcon = this._iconSlot.assignedNodes({ flatten: true }).some(node => node.nodeType !== Node.TEXT_NODE || Boolean(node.textContent?.trim()));
+        this._iconFallback.textContent = this.icon;
+        this._iconSlot.hidden = loading;
+        this._spinner.hidden = !loading;
+        this._icon.hidden = !loading && !this.icon && !assignedIcon;
     }
 }
 export function defineButtonComponents() {

package/dist/carousel.d.ts

@@ -0,0 +1,92 @@
+export type HYCarouselDirection = 'horizontal' | 'vertical';
+export type HYCarouselIndicatorPosition = 'top' | 'right' | 'bottom' | 'left';
+export type HYCarouselIndicatorStyle = 'dot' | 'line' | 'number';
+export type HYCarouselChangeSource = 'api' | 'indicator' | 'arrow' | 'keyboard' | 'drag' | 'autoplay' | 'content';
+export interface HYCarouselChangeDetail {
+    index: number;
+    previousIndex: number;
+    source: HYCarouselChangeSource;
+}
+export type HYCarouselIndicatorRenderer = (index: number, active: boolean) => Node | string | null;
+/** A slotted, accessible carousel. Panels stay mounted and inactive panels are inert. */
+export declare class HYCarousel extends HTMLElement {
+    private readonly _viewport;
+    private readonly _slot;
+    private readonly _indicators;
+    private readonly _previous;
+    private readonly _next;
+    private readonly _playback;
+    private readonly _motion;
+    private readonly _saved;
+    private readonly _animations;
+    private readonly _hostAttributes;
+    private _slides;
+    private _index;
+    private _reflecting;
+    private _connected;
+    private _timer;
+    private _paused;
+    private _hovered;
+    private _motionOverride;
+    private _drag;
+    private _blockClickUntil;
+    private _playbackPointerAction;
+    private _indicatorRenderer;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, value: string | null): void;
+    get index(): number;
+    set index(value: number);
+    get direction(): HYCarouselDirection;
+    set direction(value: HYCarouselDirection);
+    get indicatorPosition(): HYCarouselIndicatorPosition;
+    set indicatorPosition(value: HYCarouselIndicatorPosition);
+    get indicatorStyle(): HYCarouselIndicatorStyle;
+    set indicatorStyle(value: HYCarouselIndicatorStyle);
+    get indicatorRenderer(): HYCarouselIndicatorRenderer | null;
+    set indicatorRenderer(value: HYCarouselIndicatorRenderer | null);
+    get showIndicators(): boolean;
+    set showIndicators(value: boolean);
+    get showArrows(): boolean;
+    set showArrows(value: boolean);
+    get autoplay(): boolean;
+    set autoplay(value: boolean);
+    get interval(): number;
+    set interval(value: number);
+    get draggable(): boolean;
+    set draggable(value: boolean);
+    get loop(): boolean;
+    set loop(value: boolean);
+    next(): void;
+    previous(): void;
+    goTo(index: number): void;
+    play(): void;
+    pause(): void;
+    private _syncSlides;
+    private _releaseSlide;
+    private _resolve;
+    private _select;
+    private _transform;
+    private _position;
+    private _paint;
+    private _render;
+    private _animate;
+    private _cancelAnimations;
+    private _clearTimer;
+    private _schedule;
+    private _onEnter;
+    private _onLeave;
+    private _onMotionChange;
+    private _onFocus;
+    private _onKeyDown;
+    private _onNativeDrag;
+    private _onClick;
+    private _onPointerDown;
+    private _onPointerMove;
+    private _onPointerUp;
+    private _onPointerCancel;
+    private _cancelDrag;
+}
+export declare function defineCarouselComponents(): void;