@haiyue/ui 0.1.1 → 0.2.1

package/dist/adapters/web/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/affix.d.ts

@@ -0,0 +1,35 @@
+export interface HYAffixChangeDetail {
+    readonly affixed: boolean;
+}
+/** Keeps slotted content pinned to a viewport or scrolling target without collapsing layout. */
+export declare class HYAffix extends HTMLElement {
+    private readonly _placeholder;
+    private readonly _content;
+    private _target;
+    private _affixed;
+    private _listeners;
+    private _resizeObserver;
+    private _frame;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    get topOffset(): number | null;
+    set topOffset(value: number | null);
+    get bottomOffset(): number | null;
+    set bottomOffset(value: number | null);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get zIndex(): number;
+    set zIndex(value: number);
+    get affixed(): boolean;
+    get target(): HTMLElement | Window | null;
+    set target(value: HTMLElement | Window | null);
+    refresh(): void;
+    private _connect;
+    private _disconnect;
+    private _measure;
+    private _setAffixed;
+}
+export declare function defineAffixComponents(): void;

package/dist/affix.js

@@ -0,0 +1,137 @@
+function finiteNumber(value, fallback, min, max) {
+    if (value == null || value === '')
+        return fallback;
+    const number = Number(value);
+    return Number.isFinite(number) ? Math.min(max, Math.max(min, number)) : fallback;
+}
+/** Keeps slotted content pinned to a viewport or scrolling target without collapsing layout. */
+export class HYAffix extends HTMLElement {
+    _placeholder = document.createElement('div');
+    _content = document.createElement('div');
+    _target = null;
+    _affixed = false;
+    _listeners = null;
+    _resizeObserver = null;
+    _frame = 0;
+    static get observedAttributes() { return ['offset-top', 'offset-bottom', 'disabled', 'z-index']; }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        const slot = document.createElement('slot');
+        style.textContent = `
+      :host { display: block; min-width: 0; }
+      .placeholder { min-width: 0; }
+      .content { min-width: 0; }
+      .content.fixed { position: fixed; z-index: var(--_hy-affix-z-index, 100); box-sizing: border-box; }
+    `;
+        this._placeholder.className = 'placeholder';
+        this._placeholder.part.add('placeholder');
+        this._content.className = 'content';
+        this._content.part.add('content');
+        this._content.append(slot);
+        this._placeholder.append(this._content);
+        root.append(style, this._placeholder);
+    }
+    connectedCallback() { this._connect(); queueMicrotask(() => this.refresh()); }
+    disconnectedCallback() { this._disconnect(); this._setAffixed(false); }
+    attributeChangedCallback() { if (this.isConnected) {
+        this._connect();
+        this.refresh();
+    } }
+    get topOffset() { return this.hasAttribute('offset-top') ? finiteNumber(this.getAttribute('offset-top'), 0, 0, 10000) : null; }
+    set topOffset(value) { if (value == null)
+        this.removeAttribute('offset-top');
+    else
+        this.setAttribute('offset-top', String(finiteNumber(value, 0, 0, 10000))); }
+    get bottomOffset() { return this.hasAttribute('offset-bottom') ? finiteNumber(this.getAttribute('offset-bottom'), 0, 0, 10000) : null; }
+    set bottomOffset(value) { if (value == null)
+        this.removeAttribute('offset-bottom');
+    else
+        this.setAttribute('offset-bottom', String(finiteNumber(value, 0, 0, 10000))); }
+    get disabled() { return this.hasAttribute('disabled'); }
+    set disabled(value) { this.toggleAttribute('disabled', Boolean(value)); }
+    get zIndex() { return Math.round(finiteNumber(this.getAttribute('z-index'), 100, -1000, 100000)); }
+    set zIndex(value) { this.setAttribute('z-index', String(Math.round(finiteNumber(value, 100, -1000, 100000)))); }
+    get affixed() { return this._affixed; }
+    get target() { return this._target; }
+    set target(value) { this._target = value instanceof HTMLElement || value === window ? value : null; if (this.isConnected) {
+        this._connect();
+        this.refresh();
+    } }
+    refresh() {
+        cancelAnimationFrame(this._frame);
+        this._frame = requestAnimationFrame(() => this._measure());
+    }
+    _connect() {
+        this._disconnect();
+        const target = this._target ?? window;
+        const abort = new AbortController();
+        this._listeners = abort;
+        target.addEventListener('scroll', () => this.refresh(), { passive: true, signal: abort.signal });
+        if (target !== window)
+            window.addEventListener('scroll', () => this.refresh(), { passive: true, signal: abort.signal });
+        window.addEventListener('resize', () => this.refresh(), { passive: true, signal: abort.signal });
+        if (typeof ResizeObserver !== 'undefined') {
+            this._resizeObserver = new ResizeObserver(() => this.refresh());
+            this._resizeObserver.observe(this);
+            this._resizeObserver.observe(this._content);
+            if (target instanceof HTMLElement)
+                this._resizeObserver.observe(target);
+        }
+    }
+    _disconnect() { this._listeners?.abort(); this._listeners = null; this._resizeObserver?.disconnect(); this._resizeObserver = null; cancelAnimationFrame(this._frame); this._frame = 0; }
+    _measure() {
+        if (!this.isConnected || this.disabled) {
+            this._setAffixed(false);
+            return;
+        }
+        const target = this._target ?? window;
+        const targetRect = target instanceof HTMLElement ? target.getBoundingClientRect() : { top: 0, bottom: window.innerHeight };
+        const placeholderRect = this._placeholder.getBoundingClientRect();
+        const contentRect = this._affixed ? placeholderRect : this._content.getBoundingClientRect();
+        const useBottom = this.topOffset == null && this.bottomOffset != null;
+        const shouldAffix = useBottom ? contentRect.bottom >= targetRect.bottom - (this.bottomOffset ?? 0) : contentRect.top <= targetRect.top + (this.topOffset ?? 0);
+        if (!shouldAffix) {
+            this._setAffixed(false);
+            return;
+        }
+        this._placeholder.style.width = `${contentRect.width}px`;
+        this._placeholder.style.height = `${contentRect.height}px`;
+        this._content.style.left = `${placeholderRect.left}px`;
+        this._content.style.width = `${placeholderRect.width}px`;
+        this._content.style.setProperty('--_hy-affix-z-index', String(this.zIndex));
+        if (useBottom) {
+            this._content.style.removeProperty('top');
+            this._content.style.bottom = `${Math.max(0, window.innerHeight - targetRect.bottom) + (this.bottomOffset ?? 0)}px`;
+        }
+        else {
+            this._content.style.removeProperty('bottom');
+            this._content.style.top = `${Math.max(0, targetRect.top) + (this.topOffset ?? 0)}px`;
+        }
+        this._setAffixed(true);
+    }
+    _setAffixed(value) {
+        if (!value) {
+            this._content.classList.remove('fixed');
+            this._placeholder.style.removeProperty('width');
+            this._placeholder.style.removeProperty('height');
+            this._content.style.removeProperty('left');
+            this._content.style.removeProperty('width');
+            this._content.style.removeProperty('top');
+            this._content.style.removeProperty('bottom');
+        }
+        else
+            this._content.classList.add('fixed');
+        if (value === this._affixed)
+            return;
+        this._affixed = value;
+        this.toggleAttribute('affixed', value);
+        this.dispatchEvent(new CustomEvent('affix-change', { bubbles: true, composed: true, detail: { affixed: value } }));
+    }
+}
+export function defineAffixComponents() {
+    if (!customElements.get('hy-affix'))
+        customElements.define('hy-affix', HYAffix);
+}
+//# sourceMappingURL=affix.js.map

package/dist/badge.d.ts

@@ -0,0 +1,45 @@
+export type HYBadgeStatus = 'default' | 'success' | 'processing' | 'warning' | 'error';
+export type HYBadgeSize = 'default' | 'small';
+export type HYBadgeCount = number | string | null;
+/** Count, dot, or semantic status badge that can decorate slotted content. */
+export declare class HYBadge extends HTMLElement {
+    private readonly _wrapper;
+    private readonly _slot;
+    private readonly _badge;
+    private readonly _badgeContent;
+    private readonly _status;
+    private readonly _statusDot;
+    private readonly _statusText;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    /** Opt-in literal label; preserve zeros and bypass numeric overflow formatting. */
+    get literal(): boolean;
+    set literal(value: boolean);
+    get count(): HYBadgeCount;
+    set count(value: HYBadgeCount);
+    get overflowCount(): number;
+    set overflowCount(value: number);
+    get showZero(): boolean;
+    set showZero(value: boolean);
+    get dot(): boolean;
+    set dot(value: boolean);
+    get status(): HYBadgeStatus | null;
+    set status(value: HYBadgeStatus | null);
+    get color(): string;
+    set color(value: string);
+    get text(): string;
+    set text(value: string);
+    get offset(): readonly [number, number];
+    set offset(value: readonly [number, number]);
+    get offsetX(): number;
+    set offsetX(value: number);
+    get offsetY(): number;
+    set offsetY(value: number);
+    get size(): HYBadgeSize;
+    set size(value: HYBadgeSize);
+    private _render;
+    private _statusColor;
+}
+export declare function defineBadgeComponents(): void;

package/dist/badge.js

@@ -0,0 +1,168 @@
+function boundedInteger(value, fallback, min, max) {
+    if (value == null || value === '')
+        return fallback;
+    const number = Number(value);
+    return Number.isFinite(number) ? Math.min(max, Math.max(min, Math.floor(number))) : fallback;
+}
+/** Count, dot, or semantic status badge that can decorate slotted content. */
+export class HYBadge extends HTMLElement {
+    _wrapper = document.createElement('span');
+    _slot = document.createElement('slot');
+    _badge = document.createElement('sup');
+    _badgeContent = document.createElement('span');
+    _status = document.createElement('span');
+    _statusDot = document.createElement('span');
+    _statusText = document.createElement('span');
+    static get observedAttributes() {
+        return ['literal', 'count', 'overflow-count', 'show-zero', 'dot', 'status', 'color', 'text', 'offset-x', 'offset-y', 'size', 'title', 'aria-label'];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = `
+      :host { display: inline-block; max-width: 100%; color: var(--hy-text-color, #eef3ff); font: 12px/1.4 system-ui, sans-serif; vertical-align: middle; }
+      .wrapper { position: relative; display: inline-flex; max-width: 100%; align-items: center; }
+      .badge { display: inline-flex; min-width: var(--hy-badge-height, 20px); height: var(--hy-badge-height, 20px); align-items: center; justify-content: center; box-sizing: border-box; margin: 0; padding: 0 var(--hy-badge-padding, 6px); border: var(--hy-badge-border-width, 2px) solid var(--hy-surface-color, #111722); border-radius: 999px; color: var(--hy-badge-text-color, #fff); background: var(--_badge-color, var(--hy-error-color, #ef5b72)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--_badge-color, var(--hy-error-color, #ef5b72)) 12%, transparent); font: 650 var(--hy-badge-font-size, 11px)/1 system-ui, sans-serif; white-space: nowrap; }
+      .wrapper.has-content .badge { position: absolute; z-index: 1; inset-block-start: 0; inset-inline-end: 0; transform: translate(calc(50% + var(--_offset-x, 0px)), calc(-50% + var(--_offset-y, 0px))); transform-origin: 100% 0; }
+      .badge.dot { min-width: var(--hy-badge-dot-size, 8px); width: var(--hy-badge-dot-size, 8px); height: var(--hy-badge-dot-size, 8px); padding: 0; border-width: var(--hy-badge-dot-border-width, 1px); }
+      .badge[hidden], .status[hidden] { display: none; }
+      .status { display: inline-flex; align-items: center; gap: var(--hy-badge-status-gap, 7px); color: var(--hy-secondary-text-color, #aebbd0); }
+      .wrapper.has-content .status { margin-inline-start: 10px; }
+      .status-dot { position: relative; width: var(--hy-badge-status-size, 8px); height: var(--hy-badge-status-size, 8px); flex: 0 0 auto; border-radius: 50%; background: var(--_badge-color, var(--hy-muted-color, #788697)); }
+      .status.processing .status-dot::after { content: ''; position: absolute; inset: -3px; border: 1px solid var(--_badge-color, var(--hy-accent-color, #79a8ff)); border-radius: inherit; animation: hy-badge-pulse 1.5s ease-out infinite; }
+      :host([size="small"]) .badge { --hy-badge-height: 16px; --hy-badge-padding: 4px; --hy-badge-font-size: 9px; }
+      @keyframes hy-badge-pulse { 0% { opacity: .75; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.35); } }
+      @media (prefers-reduced-motion: reduce) { .status.processing .status-dot::after { animation: none; } }
+    `;
+        this._wrapper.className = 'wrapper';
+        this._wrapper.part.add('wrapper');
+        this._badge.className = 'badge';
+        this._badge.part.add('badge');
+        this._badge.setAttribute('role', 'status');
+        this._badge.setAttribute('aria-live', 'polite');
+        this._badgeContent.part.add('badge-content');
+        this._badge.append(this._badgeContent);
+        this._status.className = 'status';
+        this._status.part.add('status');
+        this._status.setAttribute('role', 'status');
+        this._statusDot.className = 'status-dot';
+        this._statusDot.part.add('status-dot');
+        this._statusText.className = 'status-text';
+        this._statusText.part.add('status-text');
+        this._status.append(this._statusDot, this._statusText);
+        this._wrapper.append(this._slot, this._badge, this._status);
+        root.append(style, this._wrapper);
+        this._slot.addEventListener('slotchange', () => this._render());
+    }
+    connectedCallback() { this._render(); }
+    attributeChangedCallback() { this._render(); }
+    /** Opt-in literal label; preserve zeros and bypass numeric overflow formatting. */
+    get literal() { return this.hasAttribute('literal'); }
+    set literal(value) { this.toggleAttribute('literal', Boolean(value)); }
+    get count() {
+        const value = this.getAttribute('count');
+        if (value == null)
+            return null;
+        if (this.literal)
+            return value;
+        if (/^-?\d+(?:\.\d+)?$/u.test(value.trim()))
+            return Number(value);
+        return value;
+    }
+    set count(value) { if (value == null)
+        this.removeAttribute('count');
+    else
+        this.setAttribute('count', String(value)); }
+    get overflowCount() { return boundedInteger(this.getAttribute('overflow-count'), 99, 0, 999999); }
+    set overflowCount(value) { this.setAttribute('overflow-count', String(boundedInteger(value, 99, 0, 999999))); }
+    get showZero() { return this.hasAttribute('show-zero'); }
+    set showZero(value) { this.toggleAttribute('show-zero', Boolean(value)); }
+    get dot() { return this.hasAttribute('dot'); }
+    set dot(value) { this.toggleAttribute('dot', Boolean(value)); }
+    get status() {
+        const value = this.getAttribute('status');
+        return value === 'default' || value === 'success' || value === 'processing' || value === 'warning' || value === 'error' ? value : null;
+    }
+    set status(value) { if (value == null)
+        this.removeAttribute('status');
+    else
+        this.setAttribute('status', value); }
+    get color() { return this.getAttribute('color')?.trim() ?? ''; }
+    set color(value) { const normalized = String(value).trim(); if (normalized)
+        this.setAttribute('color', normalized);
+    else
+        this.removeAttribute('color'); }
+    get text() { return this.getAttribute('text') ?? ''; }
+    set text(value) { const normalized = String(value); if (normalized)
+        this.setAttribute('text', normalized);
+    else
+        this.removeAttribute('text'); }
+    get offset() { return [this.offsetX, this.offsetY]; }
+    set offset(value) { this.offsetX = value?.[0] ?? 0; this.offsetY = value?.[1] ?? 0; }
+    get offsetX() { return boundedInteger(this.getAttribute('offset-x'), 0, -1000, 1000); }
+    set offsetX(value) { this.setAttribute('offset-x', String(boundedInteger(value, 0, -1000, 1000))); }
+    get offsetY() { return boundedInteger(this.getAttribute('offset-y'), 0, -1000, 1000); }
+    set offsetY(value) { this.setAttribute('offset-y', String(boundedInteger(value, 0, -1000, 1000))); }
+    get size() { return this.getAttribute('size') === 'small' ? 'small' : 'default'; }
+    set size(value) { if (value === 'small')
+        this.setAttribute('size', 'small');
+    else
+        this.removeAttribute('size'); }
+    _render() {
+        if (!this.isConnected)
+            return;
+        const hasContent = this._slot.assignedNodes().some(node => node.nodeType === Node.ELEMENT_NODE || Boolean(node.textContent?.trim()));
+        this._wrapper.classList.toggle('has-content', hasContent);
+        this.style.setProperty('--_offset-x', `${this.offsetX}px`);
+        this.style.setProperty('--_offset-y', `${this.offsetY}px`);
+        const status = this.status;
+        const color = this.color || this._statusColor(status);
+        if (color)
+            this.style.setProperty('--_badge-color', color);
+        else
+            this.style.removeProperty('--_badge-color');
+        const showStatus = status != null;
+        this._status.hidden = !showStatus;
+        this._status.className = `status${status ? ` ${status}` : ''}`;
+        this._statusText.textContent = this.text;
+        const statusLabel = this.getAttribute('aria-label') || this.text || status || '';
+        if (statusLabel)
+            this._status.setAttribute('aria-label', statusLabel);
+        else
+            this._status.removeAttribute('aria-label');
+        const value = this.count;
+        const numeric = typeof value === 'number';
+        const hiddenByZero = numeric && value === 0 && !this.showZero;
+        const showBadge = !showStatus && (this.dot || (value != null && value !== '')) && !hiddenByZero;
+        const display = this.dot ? '' : numeric && value > this.overflowCount ? `${this.overflowCount}+` : String(value ?? '');
+        this._badge.hidden = !showBadge;
+        this._badge.classList.toggle('dot', this.dot);
+        this._badgeContent.textContent = display;
+        const badgeLabel = this.getAttribute('aria-label') || (this.dot ? 'Notification' : display);
+        if (badgeLabel) {
+            this._badge.setAttribute('aria-label', badgeLabel);
+            this._badge.title = this.getAttribute('title') || (this.dot ? '' : String(value ?? ''));
+        }
+        else {
+            this._badge.removeAttribute('aria-label');
+            this._badge.removeAttribute('title');
+        }
+    }
+    _statusColor(status) {
+        if (status === 'success')
+            return 'var(--hy-success-color, #45c795)';
+        if (status === 'processing')
+            return 'var(--hy-accent-color, #79a8ff)';
+        if (status === 'warning')
+            return 'var(--hy-warning-color, #f2b84b)';
+        if (status === 'error')
+            return 'var(--hy-error-color, #ef5b72)';
+        return status === 'default' ? 'var(--hy-muted-color, #788697)' : '';
+    }
+}
+export function defineBadgeComponents() {
+    if (!customElements.get('hy-badge'))
+        customElements.define('hy-badge', HYBadge);
+}
+//# sourceMappingURL=badge.js.map

package/dist/border-beam.js

@@ -73,6 +73,7 @@ export class HYBorderBeam extends HTMLElement {
         if (this._connected)
             return;
         this._connected = true;
+        this._updateAppearance();
         if (typeof ResizeObserver !== 'undefined') {
             this._resizeObserver = new ResizeObserver(() => this.refresh());
             this._resizeObserver.observe(this);
@@ -145,7 +146,8 @@ export class HYBorderBeam extends HTMLElement {
             beams.push(beam);
         }
         this._beamLayer.replaceChildren(...beams);
-        this._updateAppearance();
+        // Construction may populate the shadow tree, but must not add host attributes.
+        // Host styles are applied by the connection/attribute lifecycle instead.
     }
     _updateAppearance() {
         const duration = BASE_DURATION_SECONDS / this.speed;

package/dist/breadcrumb.d.ts

@@ -0,0 +1,37 @@
+export interface HYBreadcrumbItem {
+    readonly key?: string;
+    /** Ant Design-compatible display text. */
+    readonly title?: string;
+    /** Alias for title, retained for consistency with the other Haiyue UI data components. */
+    readonly label?: string;
+    readonly href?: string;
+    readonly target?: string;
+    readonly disabled?: boolean;
+    readonly ariaLabel?: string;
+}
+export interface HYBreadcrumbClickDetail {
+    readonly item: HYBreadcrumbItem;
+    readonly index: number;
+}
+export type HYBreadcrumbItemRenderer = (item: HYBreadcrumbItem, index: number, current: boolean) => Node | string | number | null | undefined;
+/** Accessible breadcrumb navigation with links, actions, and a configurable separator. */
+export declare class HYBreadcrumb extends HTMLElement {
+    private readonly _nav;
+    private readonly _list;
+    private _items;
+    private _renderItem;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    get items(): readonly HYBreadcrumbItem[];
+    set items(value: readonly HYBreadcrumbItem[]);
+    get separator(): string;
+    set separator(value: string);
+    get renderItem(): HYBreadcrumbItemRenderer | null;
+    set renderItem(value: HYBreadcrumbItemRenderer | null);
+    private _readItemsAttribute;
+    private _render;
+    private _dispatchItemClick;
+}
+export declare function defineBreadcrumbComponents(): void;

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;