@haiyue/ui 0.1.0 → 0.1.1

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 HaiyueStudio Contributors
+Copyright (c) 2026 Haiyue Engine contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,9 +1,173 @@
 # @haiyue/ui
 
-Dependency-free Web Components used by HaiyueStudio tools and products.
+Dependency-free Web Components for HaiyueStudio products. Components own presentation and local interaction;
+they do not depend on Engine, Editor, Games, or AIStudio state.
+
+Public classes use the `HY` prefix and custom-element tags use `hy-`:
+
+```html
+<hy-button label="Publish"></hy-button>
+<hy-tree allow-drag></hy-tree>
+```
 
 ```bash
 npm install @haiyue/ui
 ```
 
-The package owns presentation and local interaction only. It does not depend on Engine, Editor, or AIStudio.
+## Import only what a product uses
+
+Each component has an isolated package subpath. Importing a subpath loads only that component and its direct
+helpers, and registration stays explicit:
+
+```ts
+import { defineButtonComponents } from '@haiyue/ui/button';
+import { defineTreeComponents } from '@haiyue/ui/tree';
+import { defineVirtualListComponents } from '@haiyue/ui/virtual-list';
+
+defineButtonComponents();
+defineTreeComponents();
+defineVirtualListComponents();
+```
+
+Component JavaScript does not register custom elements during module evaluation, and every component subpath
+publishes matching JavaScript and type declarations. Only `themes/*.css` is marked as a package side effect so
+bundlers retain an imported skin while excluding component JavaScript that is not reachable from selected imports.
+
+The root entry remains available when an application intentionally wants every component:
+
+```ts
+import { defineHaiyueUI } from '@haiyue/ui';
+
+defineHaiyueUI();
+```
+
+Because `defineHaiyueUI()` references the complete component set, prefer focused subpaths in bundle-sensitive
+product entry points.
+
+## Virtual list
+
+`<hy-virtual-list>` renders only the visible fixed-height rows plus a configurable overscan buffer. The full
+collection stays in the `items` property, while `renderItem` is called only for rows that currently need DOM:
+
+```ts
+import { defineVirtualListComponents } from '@haiyue/ui/virtual-list';
+
+defineVirtualListComponents();
+const list = document.querySelector('hy-virtual-list');
+list.items = records;
+list.itemHeight = 40;
+list.overscan = 3;
+list.renderItem = (record, index) => `${index + 1}. ${record.name}`;
+list.scrollToIndex(50_000, 'center');
+```
+
+Use the `height` property (or `height` attribute) for the internal viewport. `visible-range-change` reports
+exclusive `endIndex` / `visibleEndIndex` values, and `item-click` reports the source item and absolute index.
+The scrollbar can be themed with inherited semantic tokens and `--hy-virtual-list-scrollbar-size`.
+
+## Drawer
+
+Import and register the drawer independently when a product needs an off-canvas panel:
+
+```ts
+import { defineDrawerComponents } from '@haiyue/ui/drawer';
+
+defineDrawerComponents();
+```
+
+`<hy-drawer>` supports `top`, `right`, `bottom`, and `left` placement. The mask defaults to enabled; set
+`mask="false"` or `drawer.mask = false` to keep the underlying page visible and interactive. Escape, the close
+button, and mask clicks close the drawer and emit `drawer-close` with an `action`, `mask`, `escape`, or
+`programmatic` reason. With `destroy-on-hidden`, slotted children are unmounted after the exit transition and
+restored when the drawer opens again, allowing nested custom elements to run their disconnect/connect cleanup.
+
+## Notification
+
+`<hy-notification>` is an imperative notification center with isolated package entry `@haiyue/ui/notification`:
+
+```ts
+import { defineNotificationComponents } from '@haiyue/ui/notification';
+
+defineNotificationComponents();
+const center = document.querySelector('hy-notification');
+center.success({
+  message: 'Export complete',
+  description: 'The project package is ready.',
+  placement: 'topRight',
+  duration: 4,
+  showProgress: true,
+});
+```
+
+Types are `success`, `info`, `warning`, and `error`. Placements are `topLeft`, `top`, `topRight`, `bottomLeft`,
+`bottom`, and `bottomRight`. Each notice may override the host defaults for placement, duration in seconds, and
+progress visibility; duration `0` disables automatic closing. Notices at the same placement form a perspective
+stack and expand on hover or keyboard focus. Use `close(key)` for one notice or `destroy()` for all notices.
+
+## Border beam
+
+`<hy-border-beam>` wraps arbitrary content with an animated SVG beam that stays aligned to the element's live
+rounded border. Import it from `@haiyue/ui/border-beam` and register it explicitly:
+
+```ts
+import { defineBorderBeamComponents } from '@haiyue/ui/border-beam';
+
+defineBorderBeamComponents();
+```
+
+Use `thickness` for stroke width, `color` for any valid CSS color, and `count` for 1–12 evenly phased beams.
+`speed` is a multiplier: `1` completes the default loop in six seconds, while `2` runs twice as fast. The
+component observes its own size and keeps the SVG view box and corner radius synchronized automatically.
+Consumers may override `--hy-border-beam-radius` and `--hy-border-beam-track-color`.
+
+## Range
+
+Import the slider independently and opt into two-handle interval mode with the `range` attribute:
+
+```ts
+import { defineRangeComponents } from '@haiyue/ui/range';
+
+defineRangeComponents();
+const interval = document.querySelector('hy-range[range]');
+interval.values = [20, 80];
+interval.addEventListener('value-change', event => console.log(event.detail.value));
+```
+
+Single-value mode uses `value`; interval mode exposes `lowerValue`, `upperValue`, and `values`. Both modes honor
+`min`, `max`, and `step`, and support pointer dragging, track clicks, arrows, Page Up/Down, Home, and End. Use
+`--hy-range-handle-*`, `--hy-range-rail-*`, and `--hy-range-track-*` tokens for styling, or target the exported
+`rail`, `track`, `handle`, `handle-lower`, and `handle-upper` shadow parts. `value-input` reports live movement and
+`value-change` reports a committed pointer or keyboard change.
+
+## Themes
+
+Two optional CSS theme entries are provided. Import only the skin a product needs, or import both when the
+product offers runtime switching:
+
+```ts
+import '@haiyue/ui/themes/light.css';
+import '@haiyue/ui/themes/dark.css';
+```
+
+Apply a theme to the document or to a component subtree. Tokens inherit through component shadow roots:
+
+```html
+<html data-hy-theme="light">…</html>
+<section data-hy-theme="dark">…</section>
+```
+
+- `light` / Haiyue Moonlight: moon white, pale ice blue, cyan and a soft violet highlight.
+- `dark` / Haiyue Nightfall: deep navy, blue violet, cool white and a restrained gold highlight.
+
+All theme tokens use the `--hy-` prefix and may be overridden by consuming products.
+
+## Component examples
+
+Run the interactive component gallery locally:
+
+```bash
+npm run examples
+```
+
+Then open <http://localhost:4173/>. The gallery provides a left-side component index and live examples for
+every exported component, including editable parameters and event output.

package/dist/border-beam.d.ts

@@ -0,0 +1,26 @@
+/** Decorative animated border that follows the host's live rounded rectangle. */
+export declare class HYBorderBeam extends HTMLElement {
+    private readonly _svg;
+    private readonly _track;
+    private readonly _beamLayer;
+    private _resizeObserver;
+    private _connected;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    get thickness(): number;
+    set thickness(value: number);
+    /** Animation speed multiplier. 1 is normal speed and 2 is twice as fast. */
+    get speed(): number;
+    set speed(value: number);
+    get color(): string;
+    set color(value: string);
+    get count(): number;
+    set count(value: number);
+    refresh(): void;
+    private _renderBeams;
+    private _updateAppearance;
+}
+export declare function defineBorderBeamComponents(): void;

package/dist/border-beam.js

@@ -0,0 +1,172 @@
+const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
+const DEFAULT_THICKNESS = 2;
+const DEFAULT_SPEED = 1;
+const DEFAULT_COUNT = 1;
+const BASE_DURATION_SECONDS = 6;
+function finiteNumber(value, fallback) {
+    const number = Number(value);
+    return Number.isFinite(number) ? number : fallback;
+}
+/** Decorative animated border that follows the host's live rounded rectangle. */
+export class HYBorderBeam extends HTMLElement {
+    _svg = document.createElementNS(SVG_NAMESPACE, 'svg');
+    _track = document.createElementNS(SVG_NAMESPACE, 'rect');
+    _beamLayer = document.createElementNS(SVG_NAMESPACE, 'g');
+    _resizeObserver = null;
+    _connected = false;
+    static get observedAttributes() {
+        return ['thickness', 'speed', 'color', 'count'];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = `
+      :host {
+        position: relative;
+        display: block;
+        min-width: 0;
+        border-radius: var(--hy-border-beam-radius, 10px);
+        isolation: isolate;
+        --_beam-color: var(--hy-accent-color, #7dd3fc);
+      }
+      svg {
+        position: absolute;
+        z-index: 1;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+        pointer-events: none;
+      }
+      .track {
+        fill: none;
+        stroke: var(--hy-border-beam-track-color, var(--hy-border-color, rgba(125, 211, 252, 0.2)));
+        vector-effect: non-scaling-stroke;
+      }
+      .beam {
+        fill: none;
+        stroke: var(--_beam-color);
+        stroke-linecap: round;
+        vector-effect: non-scaling-stroke;
+        filter: drop-shadow(0 0 var(--_beam-glow, 5px) var(--_beam-color));
+        animation: hy-border-beam-flow linear infinite;
+      }
+      @keyframes hy-border-beam-flow {
+        to { stroke-dashoffset: -100; }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .beam { animation-play-state: paused; }
+      }
+    `;
+        const slot = document.createElement('slot');
+        this._svg.setAttribute('aria-hidden', 'true');
+        this._svg.setAttribute('preserveAspectRatio', 'none');
+        this._track.classList.add('track');
+        this._track.part.add('track');
+        this._track.setAttribute('pathLength', '100');
+        this._svg.append(this._track, this._beamLayer);
+        root.append(style, slot, this._svg);
+        this._renderBeams();
+    }
+    connectedCallback() {
+        if (this._connected)
+            return;
+        this._connected = true;
+        if (typeof ResizeObserver !== 'undefined') {
+            this._resizeObserver = new ResizeObserver(() => this.refresh());
+            this._resizeObserver.observe(this);
+        }
+        this.refresh();
+    }
+    disconnectedCallback() {
+        if (!this._connected)
+            return;
+        this._connected = false;
+        this._resizeObserver?.disconnect();
+        this._resizeObserver = null;
+    }
+    attributeChangedCallback(name) {
+        if (name === 'count')
+            this._renderBeams();
+        this._updateAppearance();
+        this.refresh();
+    }
+    get thickness() {
+        return Math.min(20, Math.max(0.5, finiteNumber(this.getAttribute('thickness'), DEFAULT_THICKNESS)));
+    }
+    set thickness(value) {
+        this.setAttribute('thickness', String(Math.min(20, Math.max(0.5, finiteNumber(value, DEFAULT_THICKNESS)))));
+    }
+    /** Animation speed multiplier. 1 is normal speed and 2 is twice as fast. */
+    get speed() {
+        return Math.min(10, Math.max(0.1, finiteNumber(this.getAttribute('speed'), DEFAULT_SPEED)));
+    }
+    set speed(value) {
+        this.setAttribute('speed', String(Math.min(10, Math.max(0.1, finiteNumber(value, DEFAULT_SPEED)))));
+    }
+    get color() { return this.getAttribute('color') ?? ''; }
+    set color(value) {
+        const normalized = String(value).trim();
+        if (normalized)
+            this.setAttribute('color', normalized);
+        else
+            this.removeAttribute('color');
+    }
+    get count() {
+        return Math.min(12, Math.max(1, Math.floor(finiteNumber(this.getAttribute('count'), DEFAULT_COUNT))));
+    }
+    set count(value) {
+        this.setAttribute('count', String(Math.min(12, Math.max(1, Math.floor(finiteNumber(value, DEFAULT_COUNT))))));
+    }
+    refresh() {
+        const rect = this.getBoundingClientRect();
+        const width = Math.max(1, rect.width);
+        const height = Math.max(1, rect.height);
+        const inset = this.thickness / 2;
+        const radius = Math.min(Math.max(0, Number.parseFloat(getComputedStyle(this).borderTopLeftRadius) || 10), width / 2, height / 2);
+        this._svg.setAttribute('viewBox', `0 0 ${width} ${height}`);
+        for (const element of [this._track, ...this._beamLayer.querySelectorAll('.beam')]) {
+            element.setAttribute('x', String(inset));
+            element.setAttribute('y', String(inset));
+            element.setAttribute('width', String(Math.max(0, width - this.thickness)));
+            element.setAttribute('height', String(Math.max(0, height - this.thickness)));
+            element.setAttribute('rx', String(Math.max(0, radius - inset)));
+            element.setAttribute('ry', String(Math.max(0, radius - inset)));
+        }
+    }
+    _renderBeams() {
+        const beams = [];
+        for (let index = 0; index < this.count; index += 1) {
+            const beam = document.createElementNS(SVG_NAMESPACE, 'rect');
+            beam.classList.add('beam');
+            beam.part.add('beam');
+            beam.setAttribute('pathLength', '100');
+            beams.push(beam);
+        }
+        this._beamLayer.replaceChildren(...beams);
+        this._updateAppearance();
+    }
+    _updateAppearance() {
+        const duration = BASE_DURATION_SECONDS / this.speed;
+        const beamLength = Math.min(14, 60 / this.count);
+        this.style.setProperty('--_beam-glow', `${Math.max(3, this.thickness * 2.5)}px`);
+        if (this.color)
+            this.style.setProperty('--_beam-color', this.color);
+        else
+            this.style.removeProperty('--_beam-color');
+        this._track.setAttribute('stroke-width', String(Math.max(1, this.thickness * 0.5)));
+        const beams = [...this._beamLayer.querySelectorAll('.beam')];
+        beams.forEach((beam, index) => {
+            beam.setAttribute('stroke-width', String(this.thickness));
+            beam.setAttribute('stroke-dasharray', `${beamLength} ${100 - beamLength}`);
+            beam.style.animationDuration = `${duration}s`;
+            beam.style.animationDelay = `${-(duration * index) / Math.max(1, beams.length)}s`;
+        });
+    }
+}
+export function defineBorderBeamComponents() {
+    if (!customElements.get('hy-border-beam'))
+        customElements.define('hy-border-beam', HYBorderBeam);
+}
+//# sourceMappingURL=border-beam.js.map

package/dist/button.d.ts

@@ -0,0 +1,10 @@
+export declare class HYButton extends HTMLElement {
+    private readonly _button;
+    private readonly _slot;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    private _sync;
+}
+export declare function defineButtonComponents(): void;

package/dist/button.js

@@ -0,0 +1,85 @@
+export class HYButton 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 var(--hy-border-color, #3d4654);
+        border-radius: 4px;
+        background: var(--hy-surface-elevated-color, #202733);
+        color: var(--hy-text-color, #eef3ff);
+        font: 12px system-ui, sans-serif;
+        cursor: pointer;
+      }
+      button:hover:not(:disabled) {
+        border-color: var(--hy-hover-border-color, #536477);
+        background: var(--hy-hover-bg-color, #273241);
+      }
+      button:focus-visible {
+        outline: 2px solid var(--hy-focus-border-color, #79a8ff);
+        outline-offset: 1px;
+      }
+      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');
+    }
+}
+export function defineButtonComponents() {
+    if (!customElements.get('hy-button')) {
+        customElements.define('hy-button', HYButton);
+    }
+}
+//# sourceMappingURL=button.js.map

package/dist/checkbox.d.ts

@@ -1,8 +1,8 @@
-export interface GECheckboxChangeDetail {
+export interface HYCheckboxChangeDetail {
     checked: boolean;
     value: string;
 }
-export declare class GECheckbox extends HTMLElement {
+export declare class HYCheckbox extends HTMLElement {
     private readonly _input;
     private readonly _box;
     private readonly _label;

package/dist/checkbox.js

@@ -1,4 +1,4 @@
-export class GECheckbox extends HTMLElement {
+export class HYCheckbox extends HTMLElement {
     _input = document.createElement('input');
     _box = document.createElement('span');
     _label = document.createElement('span');
@@ -15,7 +15,7 @@ export class GECheckbox extends HTMLElement {
         display: inline-block;
         width: max-content;
         min-width: 0;
-        color: var(--ge-checkbox-text-color, var(--ge-text-color, #d8e2f2));
+        color: var(--hy-checkbox-text-color, var(--hy-text-color, #d8e2f2));
         font: 12px system-ui, sans-serif;
       }
       :host([disabled]) {
@@ -51,20 +51,20 @@ export class GECheckbox extends HTMLElement {
         flex: 0 0 14px;
         display: inline-grid;
         place-items: center;
-        border: 1px solid var(--ge-checkbox-border-color, var(--ge-border-color, #303746));
+        border: 1px solid var(--hy-checkbox-border-color, var(--hy-border-color, #303746));
         border-radius: 3px;
-        background: var(--ge-checkbox-bg-color, var(--ge-input-bg-color, #121822));
-        color: var(--ge-checkbox-mark-color, var(--ge-selected-text-color, #ffffff));
+        background: var(--hy-checkbox-bg-color, var(--hy-input-bg-color, #121822));
+        color: var(--hy-checkbox-mark-color, var(--hy-selected-text-color, #ffffff));
         transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
       }
       input:focus-visible + .box {
-        border-color: var(--ge-focus-border-color, #3d6fa8);
-        box-shadow: 0 0 0 2px var(--ge-focus-ring-color, rgba(61, 111, 168, 0.28));
+        border-color: var(--hy-focus-border-color, #3d6fa8);
+        box-shadow: 0 0 0 2px var(--hy-focus-ring-color, rgba(61, 111, 168, 0.28));
       }
       input:checked + .box,
       input:indeterminate + .box {
-        border-color: var(--ge-checkbox-checked-border-color, var(--ge-accent-color, #3d6fa8));
-        background: var(--ge-checkbox-checked-bg-color, var(--ge-accent-strong-color, #255a91));
+        border-color: var(--hy-checkbox-checked-border-color, var(--hy-accent-color, #3d6fa8));
+        background: var(--hy-checkbox-checked-bg-color, var(--hy-accent-strong-color, #255a91));
       }
       input:disabled + .box {
         cursor: default;
@@ -197,8 +197,8 @@ export class GECheckbox extends HTMLElement {
     };
 }
 export function defineCheckboxComponents() {
-    if (!customElements.get('ge-checkbox')) {
-        customElements.define('ge-checkbox', GECheckbox);
+    if (!customElements.get('hy-checkbox')) {
+        customElements.define('hy-checkbox', HYCheckbox);
     }
 }
 //# sourceMappingURL=checkbox.js.map

package/dist/context-menu.d.ts

@@ -1,14 +1,14 @@
-export interface GEContextMenuItem {
+export interface HYContextMenuItem {
     label?: string;
     value?: string;
     disabled?: boolean;
     separator?: boolean;
 }
-export interface GEContextMenuSelectDetail {
+export interface HYContextMenuSelectDetail {
     value: string;
-    item: GEContextMenuItem;
+    item: HYContextMenuItem;
 }
-export declare class GEContextMenu extends HTMLElement {
+export declare class HYContextMenu extends HTMLElement {
     private readonly _root;
     private readonly _style;
     private readonly _menu;
@@ -20,8 +20,8 @@ export declare class GEContextMenu extends HTMLElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string): void;
-    get items(): GEContextMenuItem[];
-    set items(value: GEContextMenuItem[]);
+    get items(): HYContextMenuItem[];
+    set items(value: HYContextMenuItem[]);
     openAt(x: number, y: number): void;
     close(): void;
     private _syncDocumentListeners;

package/dist/context-menu.js

@@ -1,5 +1,5 @@
 import { GE_MENU_ITEM_STYLES, createMenuItemButton, createMenuSeparator } from './menu-shared.js';
-export class GEContextMenu extends HTMLElement {
+export class HYContextMenu extends HTMLElement {
     _root;
     _style = document.createElement('style');
     _menu = document.createElement('div');
@@ -18,7 +18,7 @@ export class GEContextMenu extends HTMLElement {
         z-index: 10000;
         display: none;
         min-width: 132px;
-        color: var(--ge-text-color, #d8e2f2);
+        color: var(--hy-text-color, #d8e2f2);
         font: 12px system-ui, sans-serif;
       }
       :host([open]) {
@@ -28,10 +28,10 @@ export class GEContextMenu extends HTMLElement {
         box-sizing: border-box;
         min-width: 132px;
         padding: 4px;
-        border: 1px solid var(--ge-border-color, #303746);
+        border: 1px solid var(--hy-border-color, #303746);
         border-radius: 4px;
-        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));
+        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));
       }
 ${GE_MENU_ITEM_STYLES}
     `;
@@ -107,7 +107,7 @@ ${GE_MENU_ITEM_STYLES}
             this._items = Array.isArray(parsed) ? parsed : [];
         }
         catch (error) {
-            console.warn('Invalid ge-context-menu items attribute.', error);
+            console.warn('Invalid hy-context-menu items attribute.', error);
         }
     }
     _render() {
@@ -188,7 +188,9 @@ ${GE_MENU_ITEM_STYLES}
     _nextEnabledIndex(direction) {
         if (!this._items.length)
             return -1;
-        const start = this._activeIndex >= 0 ? this._activeIndex : direction > 0 ? -1 : this._items.length;
+        let start = this._activeIndex;
+        if (start < 0)
+            start = direction > 0 ? -1 : this._items.length;
         for (let step = 1; step <= this._items.length; step++) {
             const index = (start + direction * step + this._items.length) % this._items.length;
             if (this._isEnabledItem(index))
@@ -218,8 +220,8 @@ function getVisualViewportRect() {
         : { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight };
 }
 export function defineContextMenuComponents() {
-    if (!customElements.get('ge-context-menu')) {
-        customElements.define('ge-context-menu', GEContextMenu);
+    if (!customElements.get('hy-context-menu')) {
+        customElements.define('hy-context-menu', HYContextMenu);
     }
 }
 //# sourceMappingURL=context-menu.js.map

package/dist/dialog.d.ts

@@ -1,9 +1,9 @@
-export type GEDialogCloseReason = 'action' | 'backdrop' | 'escape' | 'programmatic';
-export interface GEDialogCloseDetail {
-    readonly reason: GEDialogCloseReason | string;
+export type HYDialogCloseReason = 'action' | 'backdrop' | 'escape' | 'programmatic';
+export interface HYDialogCloseDetail {
+    readonly reason: HYDialogCloseReason | string;
 }
 /** Accessible modal surface with slotted body/footer content and reflected open state. */
-export declare class GEDialog extends HTMLElement {
+export declare class HYDialog extends HTMLElement {
     private readonly _dialog;
     private readonly _title;
     private readonly _closeButton;
@@ -20,7 +20,7 @@ export declare class GEDialog extends HTMLElement {
     get heading(): string;
     set heading(value: string);
     showModal(): void;
-    close(reason?: GEDialogCloseDetail['reason']): void;
+    close(reason?: HYDialogCloseDetail['reason']): void;
     private _syncHeading;
     private _syncOpen;
     private _onCancel;