@haiyue/ui 0.1.0 → 0.1.2

package/dist/dropdown.js

@@ -1,5 +1,5 @@
 import { GE_MENU_ITEM_STYLES, createMenuItemButton, createMenuSeparator } from './menu-shared.js';
-export class GEDropdown extends HTMLElement {
+export class HYDropdown extends HTMLElement {
     _root;
     _style = document.createElement('style');
     _triggerSlot = document.createElement('slot');
@@ -17,7 +17,7 @@ export class GEDropdown extends HTMLElement {
         display: inline-block;
         width: max-content;
         min-width: 0;
-        color: var(--ge-text-color, #d8e2f2);
+        color: var(--hy-text-color, #d8e2f2);
         font: 12px system-ui, sans-serif;
       }
       :host([disabled]) {
@@ -33,11 +33,11 @@ export class GEDropdown extends HTMLElement {
         overflow: auto;
         display: none;
         padding: 4px;
-        border: 1px solid var(--ge-border-color, #303746);
+        border: 1px solid var(--hy-border-color, #303746);
         border-radius: 4px;
-        color: var(--ge-text-color, #d8e2f2);
-        background: var(--ge-menu-bg-color, var(--ge-surface-elevated-color, #1b2230));
-        box-shadow: 0 10px 26px var(--ge-menu-shadow-color, rgba(0, 0, 0, 0.36));
+        color: var(--hy-text-color, #d8e2f2);
+        background: var(--hy-menu-bg-color, var(--hy-surface-elevated-color, #1b2230));
+        box-shadow: 0 10px 26px var(--hy-menu-shadow-color, rgba(0, 0, 0, 0.36));
       }
       :host([open]) .menu {
         display: block;
@@ -137,7 +137,7 @@ ${GE_MENU_ITEM_STYLES}
                 : [];
         }
         catch (error) {
-            console.warn('Invalid ge-dropdown items attribute.', error);
+            console.warn('Invalid hy-dropdown items attribute.', error);
         }
     }
     _render() {
@@ -221,8 +221,8 @@ function getVisualViewportRect() {
         : { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight };
 }
 export function defineDropdownComponents() {
-    if (!customElements.get('ge-dropdown')) {
-        customElements.define('ge-dropdown', GEDropdown);
+    if (!customElements.get('hy-dropdown')) {
+        customElements.define('hy-dropdown', HYDropdown);
     }
 }
 //# sourceMappingURL=dropdown.js.map

package/dist/expandable.d.ts

@@ -0,0 +1,32 @@
+export type HYExpandableButtonPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+export interface HYExpandableChangeDetail {
+    expanded: boolean;
+}
+/** A non-modal, top-layer expansion of the same slotted content; no cloning or reparenting. */
+export declare class HYExpandable extends HTMLElement {
+    static get observedAttributes(): string[];
+    private readonly panel;
+    private readonly placeholder;
+    private readonly button;
+    private readonly expandIcon;
+    private readonly restoreIcon;
+    private lifetime;
+    private active;
+    constructor();
+    get expanded(): boolean;
+    set expanded(value: boolean);
+    get expandedWidth(): string;
+    set expandedWidth(value: string);
+    get expandedHeight(): string;
+    set expandedHeight(value: string);
+    get buttonPosition(): HYExpandableButtonPosition;
+    set buttonPosition(value: HYExpandableButtonPosition);
+    toggle(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    private render;
+    private sync;
+    private closePanel;
+}
+export declare function defineExpandableComponents(): void;

package/dist/expandable.js

@@ -0,0 +1,136 @@
+/** A non-modal, top-layer expansion of the same slotted content; no cloning or reparenting. */
+export class HYExpandable extends HTMLElement {
+    static get observedAttributes() { return ['expanded', 'expanded-width', 'expanded-height', 'button-position', 'expand-label', 'restore-label']; }
+    panel;
+    placeholder;
+    button;
+    expandIcon;
+    restoreIcon;
+    lifetime;
+    active = false;
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = `
+      :host { display:block; position:relative; min-width:0; min-height:0; }
+      .placeholder { display:none; pointer-events:none; }
+      .panel { position:relative; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); width:100%; height:100%; min-width:0; min-height:0; box-sizing:border-box; color:inherit; font:inherit; }
+      .panel:popover-open { position:fixed; inset:0; margin:auto; width:var(--_width,90vw); height:var(--_height,90dvh); max-width:calc(100vw - 2 * var(--hy-expandable-margin,16px)); max-height:calc(100dvh - 2 * var(--hy-expandable-margin,16px)); padding:var(--hy-expandable-padding,16px); border:1px solid var(--hy-border-color,#536074); border-radius:var(--hy-expandable-radius,10px); background:var(--hy-surface-color,#18202e); box-shadow:var(--hy-expandable-shadow,0 16px 64px #0006); }
+      .panel::backdrop { background:transparent; pointer-events:none; }
+      button { position:absolute; z-index:2; top:var(--hy-expandable-button-offset,8px); right:var(--hy-expandable-button-offset,8px); display:grid; place-items:center; width:var(--hy-expandable-button-size,32px); height:var(--hy-expandable-button-size,32px); padding:6px; border:1px solid var(--hy-border-color,#536074); border-radius:6px; color:var(--hy-text-color,inherit); background:var(--hy-surface-color,#18202e); cursor:pointer; }
+      button:hover { color:var(--hy-accent-color,#7dd3fc); }
+      button:focus-visible { outline:2px solid var(--hy-accent-color,#7dd3fc); outline-offset:2px; }
+      button[data-position$="left"] { left:var(--hy-expandable-button-offset,8px); right:auto; }
+      button[data-position^="bottom"] { bottom:var(--hy-expandable-button-offset,8px); top:auto; }
+      svg, ::slotted([slot="expand-icon"]), ::slotted([slot="restore-icon"]) { width:100%; height:100%; pointer-events:none; }
+      slot[hidden] { display:none; }
+    `;
+        this.placeholder = document.createElement('div');
+        this.placeholder.className = 'placeholder';
+        this.panel = document.createElement('div');
+        this.panel.className = 'panel';
+        this.panel.id = 'panel';
+        this.panel.part.add('panel');
+        this.button = document.createElement('button');
+        this.button.type = 'button';
+        this.button.part.add('toggle');
+        this.button.setAttribute('aria-controls', 'panel');
+        const icon = (name, path) => {
+            const slot = document.createElement('slot');
+            slot.name = name;
+            slot.setAttribute('aria-hidden', 'true');
+            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+            svg.setAttribute('viewBox', '0 0 24 24');
+            svg.setAttribute('fill', 'none');
+            svg.setAttribute('stroke', 'currentColor');
+            svg.setAttribute('stroke-width', '1.8');
+            const shape = document.createElementNS(svg.namespaceURI, 'path');
+            shape.setAttribute('d', path);
+            svg.append(shape);
+            slot.append(svg);
+            return slot;
+        };
+        this.expandIcon = icon('expand-icon', 'M8 3H3v5m13-5h5v5M3 16v5h5m13-5v5h-5M3 3l6 6m12-6-6 6M3 21l6-6m12 6-6-6');
+        this.restoreIcon = icon('restore-icon', 'M3 9h6V3m6 0v6h6M9 21v-6H3m18 0h-6v6M3 3l6 6m12-6-6 6M3 21l6-6m12 6-6-6');
+        this.button.append(this.expandIcon, this.restoreIcon);
+        this.panel.append(document.createElement('slot'), this.button);
+        root.append(style, this.placeholder, this.panel);
+        this.button.addEventListener('click', () => this.toggle());
+        this.render();
+    }
+    get expanded() { return this.hasAttribute('expanded'); }
+    set expanded(value) { this.toggleAttribute('expanded', Boolean(value)); }
+    get expandedWidth() { return this.getAttribute('expanded-width') ?? '90vw'; }
+    set expandedWidth(value) { this.setAttribute('expanded-width', value); }
+    get expandedHeight() { return this.getAttribute('expanded-height') ?? '90dvh'; }
+    set expandedHeight(value) { this.setAttribute('expanded-height', value); }
+    get buttonPosition() {
+        const value = this.getAttribute('button-position');
+        return (['top-left', 'bottom-right', 'bottom-left'].includes(value ?? '') ? value : 'top-right');
+    }
+    set buttonPosition(value) { this.setAttribute('button-position', value); }
+    toggle() { this.expanded = !this.expanded; }
+    connectedCallback() {
+        this.lifetime?.abort();
+        this.lifetime = new AbortController();
+        this.addEventListener('keydown', event => {
+            // Bubbling follows the composed tree across shadow roots. Child menus and
+            // expanded containers consume Escape before it reaches their ancestors.
+            if (event.key === 'Escape' && !event.defaultPrevented && this.active) {
+                event.preventDefault();
+                this.expanded = false;
+                this.button.focus({ preventScroll: true });
+            }
+        }, { signal: this.lifetime.signal });
+        queueMicrotask(() => { if (this.isConnected)
+            this.sync(); });
+    }
+    disconnectedCallback() {
+        this.lifetime?.abort();
+        this.lifetime = undefined;
+        this.closePanel(); // Attribute remains available if the owner reconnects this element.
+    }
+    attributeChangedCallback() { this.render(); if (this.isConnected)
+        this.sync(); }
+    render() {
+        for (const [name, value] of [['width', this.expandedWidth], ['height', this.expandedHeight]]) {
+            this.panel.style.removeProperty(`--_${name}`);
+            if (CSS.supports(name, value))
+                this.panel.style.setProperty(`--_${name}`, value);
+        }
+        this.button.dataset.position = this.buttonPosition;
+        this.button.setAttribute('aria-expanded', String(this.expanded));
+        const label = this.getAttribute(this.expanded ? 'restore-label' : 'expand-label') ?? (this.expanded ? 'Restore size' : 'Expand');
+        this.button.setAttribute('aria-label', label);
+        this.button.title = label;
+        this.expandIcon.hidden = this.expanded;
+        this.restoreIcon.hidden = !this.expanded;
+    }
+    sync() {
+        if (this.expanded === this.active)
+            return;
+        if (this.expanded) {
+            this.placeholder.style.height = `${this.getBoundingClientRect().height}px`;
+            this.placeholder.style.display = 'block';
+            this.panel.setAttribute('popover', 'manual');
+            this.panel.showPopover();
+            this.active = true;
+        }
+        else
+            this.closePanel();
+        this.dispatchEvent(new CustomEvent('expanded-change', { detail: { expanded: this.active }, bubbles: true, composed: true }));
+    }
+    closePanel() {
+        if (this.panel.matches(':popover-open'))
+            this.panel.hidePopover();
+        this.panel.removeAttribute('popover');
+        this.placeholder.style.display = 'none';
+        this.active = false;
+    }
+}
+export function defineExpandableComponents() {
+    if (!customElements.get('hy-expandable'))
+        customElements.define('hy-expandable', HYExpandable);
+}
+//# sourceMappingURL=expandable.js.map

package/dist/history-controls.d.ts

@@ -0,0 +1,40 @@
+export interface HYHistoryEntry {
+    readonly id: number;
+    readonly label: string;
+}
+export declare class HYHistoryControls extends HTMLElement {
+    private readonly _undo;
+    private readonly _redo;
+    private _canUndo;
+    private _canRedo;
+    private _undoLabel;
+    private _redoLabel;
+    private _busy;
+    private _entries;
+    private _connected;
+    private readonly _requestUndo;
+    private readonly _requestRedo;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(): void;
+    get canUndo(): boolean;
+    set canUndo(value: boolean);
+    get canRedo(): boolean;
+    set canRedo(value: boolean);
+    get undoLabel(): string;
+    set undoLabel(value: string);
+    get redoLabel(): string;
+    set redoLabel(value: string);
+    get busy(): boolean;
+    set busy(value: boolean);
+    get entries(): readonly HYHistoryEntry[];
+    set entries(value: readonly HYHistoryEntry[]);
+    private _syncAttributes;
+    private _render;
+    private _request;
+    private _reflectBoolean;
+    private _reflectString;
+}
+export declare function defineHistoryControlsComponents(): void;

package/dist/history-controls.js

@@ -0,0 +1,123 @@
+export class HYHistoryControls extends HTMLElement {
+    _undo = document.createElement('button');
+    _redo = document.createElement('button');
+    _canUndo = false;
+    _canRedo = false;
+    _undoLabel = '';
+    _redoLabel = '';
+    _busy = false;
+    _entries = Object.freeze([]);
+    _connected = false;
+    _requestUndo = () => this._request('undo-request');
+    _requestRedo = () => this._request('redo-request');
+    static get observedAttributes() {
+        return ['can-undo', 'can-redo', 'undo-label', 'redo-label', 'busy', 'locale'];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = `
+      :host { display: inline-flex; }
+      [role="toolbar"] { display: inline-flex; gap: 2px; }
+      button {
+        width: 30px;
+        min-height: 28px;
+        border: 1px solid var(--hy-border-color, #3d4654);
+        background: var(--hy-surface-elevated-color, #202733);
+        color: var(--hy-text-color, #eef3ff);
+        font: 600 15px system-ui, sans-serif;
+        cursor: pointer;
+      }
+      button:first-child { border-radius: 4px 0 0 4px; }
+      button:last-child { border-radius: 0 4px 4px 0; }
+      button:hover:not(:disabled) { background: var(--hy-hover-bg-color, #273241); }
+      button:focus-visible { outline: 2px solid var(--hy-focus-border-color, #79a8ff); outline-offset: 1px; }
+      button:disabled { opacity: 0.45; cursor: default; }
+    `;
+        const toolbar = document.createElement('div');
+        toolbar.setAttribute('role', 'toolbar');
+        this._undo.type = 'button';
+        this._redo.type = 'button';
+        this._undo.textContent = '↶';
+        this._redo.textContent = '↷';
+        toolbar.append(this._undo, this._redo);
+        root.append(style, toolbar);
+        this._render();
+    }
+    connectedCallback() {
+        if (this._connected)
+            return;
+        this._connected = true;
+        this._undo.addEventListener('click', this._requestUndo);
+        this._redo.addEventListener('click', this._requestRedo);
+        this._syncAttributes();
+    }
+    disconnectedCallback() {
+        if (!this._connected)
+            return;
+        this._connected = false;
+        this._undo.removeEventListener('click', this._requestUndo);
+        this._redo.removeEventListener('click', this._requestRedo);
+    }
+    attributeChangedCallback() { this._syncAttributes(); }
+    get canUndo() { return this._canUndo; }
+    set canUndo(value) { this._canUndo = Boolean(value); this._reflectBoolean('can-undo', this._canUndo); this._render(); }
+    get canRedo() { return this._canRedo; }
+    set canRedo(value) { this._canRedo = Boolean(value); this._reflectBoolean('can-redo', this._canRedo); this._render(); }
+    get undoLabel() { return this._undoLabel; }
+    set undoLabel(value) { this._undoLabel = String(value); this._reflectString('undo-label', this._undoLabel); this._render(); }
+    get redoLabel() { return this._redoLabel; }
+    set redoLabel(value) { this._redoLabel = String(value); this._reflectString('redo-label', this._redoLabel); this._render(); }
+    get busy() { return this._busy; }
+    set busy(value) { this._busy = Boolean(value); this._reflectBoolean('busy', this._busy); this._render(); }
+    get entries() { return this._entries; }
+    set entries(value) {
+        this._entries = Object.freeze(value.map(entry => Object.freeze({ id: entry.id, label: entry.label })));
+    }
+    _syncAttributes() {
+        this._canUndo = this.hasAttribute('can-undo');
+        this._canRedo = this.hasAttribute('can-redo');
+        this._busy = this.hasAttribute('busy');
+        this._undoLabel = this.getAttribute('undo-label') ?? '';
+        this._redoLabel = this.getAttribute('redo-label') ?? '';
+        this._render();
+    }
+    _render() {
+        const chinese = (this.getAttribute('locale') ?? '').toLowerCase().startsWith('zh');
+        const undo = chinese ? '撤销' : 'Undo';
+        const redo = chinese ? '重做' : 'Redo';
+        const undoTitle = this._undoLabel ? `${undo}: ${this._undoLabel}` : undo;
+        const redoTitle = this._redoLabel ? `${redo}: ${this._redoLabel}` : redo;
+        this._undo.disabled = this._busy || !this._canUndo;
+        this._redo.disabled = this._busy || !this._canRedo;
+        this._undo.title = undoTitle;
+        this._redo.title = redoTitle;
+        this._undo.setAttribute('aria-label', undoTitle);
+        this._redo.setAttribute('aria-label', redoTitle);
+        this.setAttribute('aria-busy', String(this._busy));
+    }
+    _request(type) {
+        if (this._busy || (type === 'undo-request' ? !this._canUndo : !this._canRedo))
+            return;
+        this.dispatchEvent(new CustomEvent(type, { bubbles: true, composed: true }));
+    }
+    _reflectBoolean(name, value) {
+        if (value === this.hasAttribute(name))
+            return;
+        this.toggleAttribute(name, value);
+    }
+    _reflectString(name, value) {
+        if (this.getAttribute(name) === value)
+            return;
+        if (value)
+            this.setAttribute(name, value);
+        else
+            this.removeAttribute(name);
+    }
+}
+export function defineHistoryControlsComponents() {
+    if (!customElements.get('hy-history-controls'))
+        customElements.define('hy-history-controls', HYHistoryControls);
+}
+//# sourceMappingURL=history-controls.js.map

package/dist/index.d.ts

@@ -1,32 +1,37 @@
-export { defineTreeComponents, GETree, GETreeNode, } from './tree.js';
-export { defineSplitComponents, GESplit, } from './split.js';
-export { defineSelectComponents, GESelect, } from './select.js';
-export { defineTabsComponents, GETabs, } from './tabs.js';
-export { defineContextMenuComponents, GEContextMenu, } from './context-menu.js';
-export { defineDropdownComponents, GEDropdown, } from './dropdown.js';
-export { defineTooltipComponents, GETooltip, } from './tooltip.js';
-export { defineCheckboxComponents, GECheckbox, } from './checkbox.js';
-export { defineRadioComponents, GERadio, } from './radio.js';
-export { defineDialogComponents, GEDialog, } from './dialog.js';
-export { defineInputComponents, GEInput, } from './input.js';
-export type { GESplitDirection, GESplitRatioChangeDetail, } from './split.js';
-export type { GESelectChangeDetail, GESelectOption, } from './select.js';
-export type { GETabChangeDetail, GETabOption, } from './tabs.js';
-export type { GEContextMenuItem, GEContextMenuSelectDetail, } from './context-menu.js';
-export type { GEDropdownItem, GEDropdownPlacement, GEDropdownSelectDetail, } from './dropdown.js';
-export type { GETooltipPlacement, } from './tooltip.js';
-export type { GECheckboxChangeDetail, } from './checkbox.js';
-export type { GERadioChangeDetail, } from './radio.js';
-export type { GEDialogCloseDetail, GEDialogCloseReason, } from './dialog.js';
-export type { GEInputChangeDetail, GEInputType, } from './input.js';
-export type { GETreeDataChangeDetail, GETreeDropPosition, GETreeNodeContextMenuDetail, GETreeNodeData, GETreeSelectionChangeDetail, } from './tree.js';
-export declare class GEButton extends HTMLElement {
-    private readonly _button;
-    private readonly _slot;
-    static get observedAttributes(): string[];
-    constructor();
-    connectedCallback(): void;
-    attributeChangedCallback(): void;
-    private _sync;
-}
+export { defineExpandableComponents, HYExpandable } from './expandable.js';
+export type { HYExpandableButtonPosition, HYExpandableChangeDetail } from './expandable.js';
+export { defineButtonComponents, HYButton, } from './button.js';
+export { defineBorderBeamComponents, HYBorderBeam, } from './border-beam.js';
+export { defineTreeComponents, HYTree, HYTreeNode, } from './tree.js';
+export { defineSplitComponents, HYSplit, } from './split.js';
+export { defineSelectComponents, HYSelect, } from './select.js';
+export { defineTabsComponents, HYTabs, } from './tabs.js';
+export { defineContextMenuComponents, HYContextMenu, } from './context-menu.js';
+export { defineDropdownComponents, HYDropdown, } from './dropdown.js';
+export { defineTooltipComponents, HYTooltip, } from './tooltip.js';
+export { defineCheckboxComponents, HYCheckbox, } from './checkbox.js';
+export { defineRadioComponents, HYRadio, } from './radio.js';
+export { defineRangeComponents, HYRange, } from './range.js';
+export { defineDialogComponents, HYDialog, } from './dialog.js';
+export { defineDrawerComponents, HYDrawer, } from './drawer.js';
+export { defineInputComponents, HYInput, } from './input.js';
+export { defineNotificationComponents, HYNotification, } from './notification.js';
+export { defineHistoryControlsComponents, HYHistoryControls, } from './history-controls.js';
+export type { HYHistoryEntry, } from './history-controls.js';
+export { calculateVirtualListRange, defineVirtualListComponents, HYVirtualList, } from './virtual-list.js';
+export type { HYVirtualListAlign, HYVirtualListItemClickDetail, HYVirtualListItemRenderer, HYVirtualListRange, HYVirtualListRangeChangeDetail, } from './virtual-list.js';
+export type { HYSplitDirection, HYSplitRatioChangeDetail, } from './split.js';
+export type { HYSelectChangeDetail, HYSelectOption, } from './select.js';
+export type { HYTabChangeDetail, HYTabOption, } from './tabs.js';
+export type { HYContextMenuItem, HYContextMenuSelectDetail, } from './context-menu.js';
+export type { HYDropdownItem, HYDropdownPlacement, HYDropdownSelectDetail, } from './dropdown.js';
+export type { HYTooltipPlacement, } from './tooltip.js';
+export type { HYCheckboxChangeDetail, } from './checkbox.js';
+export type { HYRadioChangeDetail, } from './radio.js';
+export type { HYRangeChangeDetail, HYRangeHandle, HYRangeValue, } from './range.js';
+export type { HYDialogCloseDetail, HYDialogCloseReason, } from './dialog.js';
+export type { HYDrawerCloseDetail, HYDrawerCloseReason, HYDrawerPlacement, } from './drawer.js';
+export type { HYInputChangeDetail, HYInputType, } from './input.js';
+export type { HYNotificationCloseDetail, HYNotificationCloseReason, HYNotificationMethodOptions, HYNotificationOpenDetail, HYNotificationOptions, HYNotificationPlacement, HYNotificationType, } from './notification.js';
+export type { HYTreeDataChangeDetail, HYTreeDropPosition, HYTreeNodeContextMenuDetail, HYTreeNodeData, HYTreeSelectionChangeDetail, } from './tree.js';
 export declare function defineHaiyueUI(): void;

package/dist/index.js

@@ -1,3 +1,7 @@
+import { defineExpandableComponents } from './expandable.js';
+export { defineExpandableComponents, HYExpandable } from './expandable.js';
+import { defineButtonComponents } from './button.js';
+import { defineBorderBeamComponents } from './border-beam.js';
 import { defineTreeComponents } from './tree.js';
 import { defineSplitComponents } from './split.js';
 import { defineSelectComponents } from './select.js';
@@ -7,94 +11,35 @@ import { defineDropdownComponents } from './dropdown.js';
 import { defineTooltipComponents } from './tooltip.js';
 import { defineCheckboxComponents } from './checkbox.js';
 import { defineRadioComponents } from './radio.js';
+import { defineRangeComponents } from './range.js';
 import { defineDialogComponents } from './dialog.js';
+import { defineDrawerComponents } from './drawer.js';
 import { defineInputComponents } from './input.js';
-export { defineTreeComponents, GETree, GETreeNode, } from './tree.js';
-export { defineSplitComponents, GESplit, } from './split.js';
-export { defineSelectComponents, GESelect, } from './select.js';
-export { defineTabsComponents, GETabs, } from './tabs.js';
-export { defineContextMenuComponents, GEContextMenu, } from './context-menu.js';
-export { defineDropdownComponents, GEDropdown, } from './dropdown.js';
-export { defineTooltipComponents, GETooltip, } from './tooltip.js';
-export { defineCheckboxComponents, GECheckbox, } from './checkbox.js';
-export { defineRadioComponents, GERadio, } from './radio.js';
-export { defineDialogComponents, GEDialog, } from './dialog.js';
-export { defineInputComponents, GEInput, } from './input.js';
-export class GEButton extends HTMLElement {
-    _button = document.createElement('button');
-    _slot = document.createElement('slot');
-    static get observedAttributes() {
-        return ['label', 'disabled', 'aria-label', 'title', 'icon-only'];
-    }
-    constructor() {
-        super();
-        const root = this.attachShadow({ mode: 'open' });
-        const style = document.createElement('style');
-        style.textContent = `
-      :host { display: inline-block; }
-      button {
-        min-height: 28px;
-        padding: 0 10px;
-        border: 1px solid #3d4654;
-        border-radius: 4px;
-        background: #202733;
-        color: #eef3ff;
-        font: 12px system-ui, sans-serif;
-        cursor: pointer;
-      }
-      button.icon-only {
-        width: 28px;
-        padding: 0;
-        display: inline-grid;
-        place-items: center;
-      }
-      ::slotted(svg) {
-        width: 16px;
-        height: 16px;
-        display: block;
-        fill: none;
-        stroke: currentColor;
-        stroke-width: 2;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-      }
-      button:disabled {
-        opacity: 0.5;
-        cursor: default;
-      }
-    `;
-        root.append(style, this._button);
-    }
-    connectedCallback() {
-        this._sync();
-    }
-    attributeChangedCallback() {
-        this._sync();
-    }
-    _sync() {
-        const label = this.getAttribute('label');
-        if (label !== null) {
-            this._button.textContent = label;
-            this._button.classList.remove('icon-only');
-            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'));
-            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');
-    }
-}
+import { defineNotificationComponents } from './notification.js';
+import { defineHistoryControlsComponents } from './history-controls.js';
+import { defineVirtualListComponents } from './virtual-list.js';
+export { defineButtonComponents, HYButton, } from './button.js';
+export { defineBorderBeamComponents, HYBorderBeam, } from './border-beam.js';
+export { defineTreeComponents, HYTree, HYTreeNode, } from './tree.js';
+export { defineSplitComponents, HYSplit, } from './split.js';
+export { defineSelectComponents, HYSelect, } from './select.js';
+export { defineTabsComponents, HYTabs, } from './tabs.js';
+export { defineContextMenuComponents, HYContextMenu, } from './context-menu.js';
+export { defineDropdownComponents, HYDropdown, } from './dropdown.js';
+export { defineTooltipComponents, HYTooltip, } from './tooltip.js';
+export { defineCheckboxComponents, HYCheckbox, } from './checkbox.js';
+export { defineRadioComponents, HYRadio, } from './radio.js';
+export { defineRangeComponents, HYRange, } from './range.js';
+export { defineDialogComponents, HYDialog, } from './dialog.js';
+export { defineDrawerComponents, HYDrawer, } from './drawer.js';
+export { defineInputComponents, HYInput, } from './input.js';
+export { defineNotificationComponents, HYNotification, } from './notification.js';
+export { defineHistoryControlsComponents, HYHistoryControls, } from './history-controls.js';
+export { calculateVirtualListRange, defineVirtualListComponents, HYVirtualList, } from './virtual-list.js';
 export function defineHaiyueUI() {
-    if (!customElements.get('ge-button')) {
-        customElements.define('ge-button', GEButton);
-    }
+    defineExpandableComponents();
+    defineBorderBeamComponents();
+    defineButtonComponents();
     defineTreeComponents();
     defineSplitComponents();
     defineSelectComponents();
@@ -104,7 +49,12 @@ export function defineHaiyueUI() {
     defineTooltipComponents();
     defineCheckboxComponents();
     defineRadioComponents();
+    defineRangeComponents();
     defineDialogComponents();
+    defineDrawerComponents();
     defineInputComponents();
+    defineNotificationComponents();
+    defineHistoryControlsComponents();
+    defineVirtualListComponents();
 }
 //# sourceMappingURL=index.js.map

package/dist/input.d.ts

@@ -1,18 +1,18 @@
-export type GEInputType = 'text' | 'number' | 'color';
-export interface GEInputChangeDetail {
+export type HYInputType = 'text' | 'number' | 'color';
+export interface HYInputChangeDetail {
     value: string;
     valueAsNumber: number | null;
     valid: boolean;
 }
-export declare class GEInput extends HTMLElement {
+export declare class HYInput extends HTMLElement {
     private readonly _input;
     static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(): void;
-    get type(): GEInputType;
-    set type(value: GEInputType);
+    get type(): HYInputType;
+    set type(value: HYInputType);
     get value(): string;
     set value(value: string);
     get valueAsNumber(): number;