@haiyue/ui 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -0,0 +1,29 @@
+# Changelog
+
+## Unreleased
+
+## 0.1.2 - 2026-09-03
+
+- 修复 `<hy-virtual-list>` 快速滚动时 light DOM slot 异步分发旧行的问题；虚拟窗口现在完全在 Shadow DOM 内同步替换，避免上一范围的条目再次闪现。
+- 新增 `HYExpandable` / `<hy-expandable>`：保持内容挂载的非模态展开容器，提供独立子入口、尺寸与按钮位置配置、自定义图标、事件和主题变量。
+- 修复展开容器位于嵌套 Shadow DOM 时 Escape 无法恢复的问题；内部菜单可优先消费 Escape，嵌套展开容器每次只关闭内层。
+- Tabs 支持横向溢出滚动，并保持标签文字不换行。
+- 补充展开容器示例和浏览器交互回归，覆盖键盘、焦点、事件、内容保留及断开重连。
+- API 基线、包体积与消费者验证由 UI 仓库独立维护，不再由 Engine 发布门禁管理。
+
+## 0.1.1 - 2026-08-22
+
+- 新增可按需导入的 `HYRange` / `<hy-range>` 数值滑块，支持单值和双拖拽点区间、步进与键盘操作、实时/提交事件，以及拖拽点和轨道样式定制。
+- 新增可按需导入的 `HYBorderBeam` / `<hy-border-beam>` 响应式边框流光组件，支持粗细、速度倍率、颜色和多流光错相配置。
+- 新增可按需导入的 `HYNotification` / `<hy-notification>` 通知中心，提供 success/info/warning/error 语义配色和图标、六向 placement、自动关闭、Z 轴堆叠及可选倒计时进度条。
+- 新增可按需导入的 `HYDrawer` / `<hy-drawer>` 抽屉组件，支持四向 placement、可选蒙层、Esc/蒙层关闭、焦点管理及 `destroyOnHidden` 内容卸载。
+- 新增可按需导入的 `HYVirtualList` / `<hy-virtual-list>` 固定行高虚拟列表，仅渲染可视区与 overscan 缓冲项，并提供内部滚动条、范围事件、点击事件和 `scrollToIndex()`。
+- 组件品牌前缀从 `GE/ge` 统一迁移为 `HY/hy`，不保留旧标签、类名或 CSS token alias；新增可独立导入的 Moonlight 淡蓝亮色和 Nightfall 深蓝紫暗色皮肤。
+- 独立 UI 仓库移除重复的 `ui/` workspace 层级，并为全部组件新增 `@haiyue/ui/<component>` 独立、无副作用的公开入口；根入口继续提供显式全量注册。
+
+## 0.1.0 - 2026-07-13
+
+- 建立海月 3D 优先的稳定包边界、生命周期、编辑器工作流、可观测性、资产管线和脚本 runtime。
+- 用 `simple` / `batched` / `gpu-driven` / `diagnostic` RenderProfile 替换公开渲染布尔开关，并加入显式设备降级报告。
+- 加入原生 glTF metallic-roughness PBR、directional shadow map、environment IBL、material variants 和可扩展材质 shader contract。
+- examples/games 改为 manifest 驱动，统一 build policy、能力覆盖矩阵、真实 WebGPU 像素基线和 release gate。

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,233 @@
 # @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.
+
+**Online component gallery:** <https://haiyuestudio.github.io/UI/>
+
+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.
+
+## Tabs
+
+`@haiyue/ui/tabs` retains its existing `HYTabs`, `HYTabOption`, `HYTabChangeDetail`, and
+`defineTabsComponents` exports; the 0.1.3 fix adds no new public exports. Assign `options`
+and `value`, provide children with matching `slot` names, and listen for `tab-change`.
+Property-assigned options and the selected value survive reconnection. Set `aria-label`
+to name the tablist. Arrow keys, Home and End both move focus and activate the next
+enabled tab with roving focus; the active tab labels its panel within the component's
+shadow tree. The generated `aria-controls` and tabpanel ids are per-instance opaque
+values and should not be treated as stable application selectors.
+
+The existing `@haiyue/ui/border-beam` exports are also unchanged. Its constructor only
+builds shadow content; host appearance is applied after creation, avoiding browser
+custom-element construction errors during repeated `document.createElement` calls.
+
+## 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
+
+Browse the published gallery at <https://haiyuestudio.github.io/UI/>.
+
+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.
+
+## Expandable container
+
+Explicit export: `@haiyue/ui/expandable` → `HYExpandable`, `defineExpandableComponents`,
+`HYExpandableButtonPosition`, `HYExpandableChangeDetail`. Also included in `defineHaiyueUI()`.
+
+```html
+<hy-expandable expanded-width="1200px" expanded-height="90dvh"
+  button-position="top-right" expand-label="放大" restore-label="还原">
+  <div>Your graph, editor, or other stateful content</div>
+  <!-- Optional SVG elements: slot="expand-icon" / slot="restore-icon" -->
+</hy-expandable>
+```
+
+`expanded` is a reflected boolean attribute/property; `toggle()` switches it.
+`expandedWidth` / `expandedHeight` accept CSS lengths (defaults `90vw` / `90dvh`).
+Sizes are clamped to the viewport with a margin; the normal size belongs to the host's layout/CSS.
+`buttonPosition` supports `top-right`, `top-left`, `bottom-right`, `bottom-left`.
+`expanded-change` bubbles with `{ expanded: boolean }`. `expand-icon` / `restore-icon` slots
+replace the built-in SVG icons without accepting HTML strings. Labels also become tooltips.
+Style through inherited `--hy-surface-color`, `--hy-border-color`, `--hy-text-color`,
+`--hy-accent-color` and `--hy-expandable-{margin,padding,radius,shadow,button-size,button-offset}`;
+`panel` and `toggle` are CSS parts.
+
+Requires a browser supporting the Popover API. Expansion is non-modal and uses a fixed top-layer
+panel so transformed/overflow ancestors cannot clip it. The same slotted DOM stays mounted;
+normal-flow height is preserved while expanded. Keyboard activation uses the native button;
+Escape restores the focused container. Disconnect closes the panel and releases event listeners.
+
+## Independent release checks
+
+UI releases independently of Engine.
+
+```bash
+npm ci
+npx playwright install chromium
+npm run release:check
+```
+
+Candidates: `.artifacts/packages/`. Review API changes before `npm run api:update`.
+See [release review](review/release-0.1.2.md).

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,174 @@
+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;
+        this._updateAppearance();
+        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);
+        // 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;
+        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;