@haiyue/ui 0.1.0 → 0.1.2

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;

package/dist/dialog.js

@@ -1,5 +1,5 @@
 /** Accessible modal surface with slotted body/footer content and reflected open state. */
-export class GEDialog extends HTMLElement {
+export class HYDialog extends HTMLElement {
     _dialog = document.createElement('dialog');
     _title = document.createElement('h2');
     _closeButton = document.createElement('button');
@@ -14,31 +14,31 @@ export class GEDialog extends HTMLElement {
         const style = document.createElement('style');
         style.textContent = `
       :host {
-        color: var(--ge-text-color, #e6edf7);
+        color: var(--hy-text-color, #e6edf7);
         font: 13px system-ui, sans-serif;
       }
       dialog {
-        width: min(var(--ge-dialog-width, 460px), calc(100vw - 32px));
+        width: min(var(--hy-dialog-width, 460px), calc(100vw - 32px));
         max-height: calc(100vh - 32px);
         margin: auto;
         padding: 0;
         overflow: hidden;
-        border: 1px solid var(--ge-border-color, #303746);
-        border-radius: var(--ge-dialog-radius, 8px);
+        border: 1px solid var(--hy-border-color, #303746);
+        border-radius: var(--hy-dialog-radius, 8px);
         color: inherit;
-        background: var(--ge-dialog-bg-color, var(--ge-surface-elevated-color, #171e2a));
-        box-shadow: 0 22px 70px var(--ge-dialog-shadow-color, rgba(0, 0, 0, 0.52));
+        background: var(--hy-dialog-bg-color, var(--hy-surface-elevated-color, #171e2a));
+        box-shadow: 0 22px 70px var(--hy-dialog-shadow-color, rgba(0, 0, 0, 0.52));
       }
       dialog::backdrop {
-        background: var(--ge-dialog-backdrop-color, rgba(3, 7, 12, 0.66));
-        backdrop-filter: blur(var(--ge-dialog-backdrop-blur, 2px));
+        background: var(--hy-dialog-backdrop-color, rgba(3, 7, 12, 0.66));
+        backdrop-filter: blur(var(--hy-dialog-backdrop-blur, 2px));
       }
       .header {
         display: flex;
         align-items: center;
         min-height: 49px;
         padding: 0 12px 0 16px;
-        border-bottom: 1px solid var(--ge-border-color, #303746);
+        border-bottom: 1px solid var(--hy-border-color, #303746);
       }
       h2 {
         flex: 1;
@@ -56,18 +56,18 @@ export class GEDialog extends HTMLElement {
         height: 28px;
         border: 0;
         border-radius: 5px;
-        color: var(--ge-secondary-text-color, #8b99ad);
+        color: var(--hy-secondary-text-color, #8b99ad);
         background: transparent;
         cursor: pointer;
         font: 20px/1 system-ui, sans-serif;
       }
       :host([dismissible]) .close { display: grid; place-items: center; }
-      .close:hover { color: inherit; background: var(--ge-hover-bg-color, #242d3b); }
+      .close:hover { color: inherit; background: var(--hy-hover-bg-color, #242d3b); }
       .body {
         max-height: calc(100vh - 160px);
         overflow: auto;
-        padding: var(--ge-dialog-body-padding, 16px);
-        color: var(--ge-dialog-body-color, var(--ge-secondary-text-color, #a8b4c5));
+        padding: var(--hy-dialog-body-padding, 16px);
+        color: var(--hy-dialog-body-color, var(--hy-secondary-text-color, #a8b4c5));
         line-height: 1.55;
       }
       .footer {
@@ -76,8 +76,8 @@ export class GEDialog extends HTMLElement {
         gap: 8px;
         min-height: 54px;
         padding: 10px 14px;
-        border-top: 1px solid var(--ge-border-color, #303746);
-        background: var(--ge-dialog-footer-bg-color, rgba(9, 13, 19, 0.22));
+        border-top: 1px solid var(--hy-border-color, #303746);
+        background: var(--hy-dialog-footer-bg-color, rgba(9, 13, 19, 0.22));
       }
       slot[name="footer"]::slotted(*) { margin: 0; }
     `;
@@ -177,7 +177,7 @@ export class GEDialog extends HTMLElement {
     };
 }
 export function defineDialogComponents() {
-    if (!customElements.get('ge-dialog'))
-        customElements.define('ge-dialog', GEDialog);
+    if (!customElements.get('hy-dialog'))
+        customElements.define('hy-dialog', HYDialog);
 }
 //# sourceMappingURL=dialog.js.map

package/dist/drawer.d.ts

@@ -0,0 +1,49 @@
+export type HYDrawerPlacement = 'top' | 'right' | 'bottom' | 'left';
+export type HYDrawerCloseReason = 'action' | 'mask' | 'escape' | 'programmatic';
+export interface HYDrawerCloseDetail {
+    readonly reason: HYDrawerCloseReason | string;
+}
+/** Sliding dialog surface with optional mask and hidden-content unmounting. */
+export declare class HYDrawer extends HTMLElement {
+    private readonly _panel;
+    private readonly _title;
+    private readonly _closeButton;
+    private readonly _footer;
+    private readonly _footerSlot;
+    private readonly _detachedContent;
+    private _documentListenerAbort;
+    private _destroyTimer;
+    private _returnFocus;
+    private _closeReason;
+    private _wasOpen;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    get open(): boolean;
+    set open(value: boolean);
+    get heading(): string;
+    set heading(value: string);
+    get placement(): HYDrawerPlacement;
+    set placement(value: HYDrawerPlacement);
+    /** The mask defaults to true; use mask="false" or set the property to false to disable it. */
+    get mask(): boolean;
+    set mask(value: boolean);
+    get destroyOnHidden(): boolean;
+    set destroyOnHidden(value: boolean);
+    show(): void;
+    close(reason?: HYDrawerCloseDetail['reason']): void;
+    private _syncHeading;
+    private _syncPlacement;
+    private _syncFooter;
+    private _syncPanelSemantics;
+    private _syncOpen;
+    private _attachDocumentListener;
+    private _detachDocumentListener;
+    private _onDocumentKeyDown;
+    private _scheduleContentDestroy;
+    private _cancelContentDestroy;
+    private _restoreContent;
+}
+export declare function defineDrawerComponents(): void;

package/dist/drawer.js

@@ -0,0 +1,377 @@
+const CONTENT_DESTROY_DELAY = 220;
+const FOCUSABLE_SELECTOR = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+].join(',');
+const DRAWER_STYLES = `
+      :host {
+        position: fixed;
+        z-index: var(--hy-drawer-z-index, 1000);
+        inset: 0;
+        display: block;
+        pointer-events: none;
+        color: var(--hy-text-color, #e6edf7);
+        font: 13px/1.5 system-ui, sans-serif;
+        --_duration: var(--hy-drawer-duration, 200ms);
+      }
+      .root {
+        position: absolute;
+        inset: 0;
+        visibility: hidden;
+        transition: visibility 0s linear var(--_duration);
+      }
+      :host([open]) .root {
+        visibility: visible;
+        transition-delay: 0s;
+      }
+      .mask {
+        position: absolute;
+        inset: 0;
+        opacity: 0;
+        pointer-events: none;
+        background: var(--hy-drawer-mask-color, rgba(3, 7, 18, 0.58));
+        backdrop-filter: blur(var(--hy-drawer-mask-blur, 1px));
+        transition: opacity var(--_duration) ease;
+      }
+      :host([open]) .mask { opacity: 1; pointer-events: auto; }
+      :host([mask="false"]) .mask { display: none; }
+      .panel {
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+        width: min(var(--hy-drawer-width, 378px), calc(100vw - 24px));
+        height: 100%;
+        max-width: 100vw;
+        max-height: 100vh;
+        overflow: hidden;
+        pointer-events: auto;
+        outline: none;
+        color: inherit;
+        background: var(--hy-drawer-bg-color, var(--hy-surface-elevated-color, #171e2a));
+        box-shadow: 0 0 54px var(--hy-drawer-shadow-color, rgba(0, 0, 0, 0.42));
+        transition: transform var(--_duration) cubic-bezier(0.22, 1, 0.36, 1);
+        box-sizing: border-box;
+      }
+      :host(:not([placement])) .panel, :host([placement="right"]) .panel {
+        inset: 0 0 0 auto;
+        border-left: 1px solid var(--hy-border-color, #303746);
+        transform: translateX(100%);
+      }
+      :host([placement="left"]) .panel {
+        inset: 0 auto 0 0;
+        border-right: 1px solid var(--hy-border-color, #303746);
+        transform: translateX(-100%);
+      }
+      :host([placement="top"]) .panel,
+      :host([placement="bottom"]) .panel {
+        width: 100%;
+        height: min(var(--hy-drawer-height, 320px), calc(100vh - 24px));
+      }
+      :host([placement="top"]) .panel {
+        inset: 0 0 auto;
+        border-bottom: 1px solid var(--hy-border-color, #303746);
+        transform: translateY(-100%);
+      }
+      :host([placement="bottom"]) .panel {
+        inset: auto 0 0;
+        border-top: 1px solid var(--hy-border-color, #303746);
+        transform: translateY(100%);
+      }
+      :host([open]) .panel { transform: translate(0); }
+      .header {
+        display: flex;
+        flex: 0 0 auto;
+        align-items: center;
+        min-height: 52px;
+        padding: 0 12px 0 18px;
+        border-bottom: 1px solid var(--hy-border-color, #303746);
+      }
+      h2 {
+        flex: 1;
+        min-width: 0;
+        margin: 0;
+        overflow: hidden;
+        font-size: 14px;
+        font-weight: 650;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .close {
+        display: grid;
+        width: 30px;
+        height: 30px;
+        padding: 0;
+        border: 0;
+        border-radius: 5px;
+        place-items: center;
+        color: var(--hy-secondary-text-color, #8b99ad);
+        background: transparent;
+        cursor: pointer;
+        font: 20px/1 system-ui, sans-serif;
+      }
+      .close:hover { color: inherit; background: var(--hy-hover-bg-color, #242d3b); }
+      .close:focus-visible, .panel:focus-visible {
+        outline: 2px solid var(--hy-focus-border-color, #79a8ff);
+        outline-offset: -2px;
+      }
+      .body {
+        flex: 1 1 auto;
+        min-height: 0;
+        overflow: auto;
+        padding: var(--hy-drawer-body-padding, 18px);
+        color: var(--hy-secondary-text-color, #a8b4c5);
+      }
+      .footer {
+        display: flex;
+        flex: 0 0 auto;
+        justify-content: flex-end;
+        gap: 8px;
+        min-height: 56px;
+        padding: 10px 16px;
+        border-top: 1px solid var(--hy-border-color, #303746);
+        background: var(--hy-drawer-footer-bg-color, rgba(9, 13, 19, 0.22));
+        box-sizing: border-box;
+      }
+      .footer[hidden] { display: none; }
+      slot[name="footer"]::slotted(*) { margin: 0; }
+      @media (prefers-reduced-motion: reduce) {
+        :host { --_duration: 1ms; }
+      }
+    `;
+/** Sliding dialog surface with optional mask and hidden-content unmounting. */
+export class HYDrawer extends HTMLElement {
+    _panel = document.createElement('section');
+    _title = document.createElement('h2');
+    _closeButton = document.createElement('button');
+    _footer = document.createElement('footer');
+    _footerSlot = document.createElement('slot');
+    _detachedContent = document.createDocumentFragment();
+    _documentListenerAbort = null;
+    _destroyTimer = null;
+    _returnFocus = null;
+    _closeReason = 'programmatic';
+    _wasOpen = false;
+    static get observedAttributes() {
+        return ['open', 'heading', 'placement', 'mask', 'destroy-on-hidden'];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = DRAWER_STYLES;
+        const container = document.createElement('div');
+        container.className = 'root';
+        const mask = document.createElement('div');
+        mask.className = 'mask';
+        mask.part.add('mask');
+        mask.setAttribute('aria-hidden', 'true');
+        this._panel.className = 'panel';
+        this._panel.part.add('panel');
+        this._panel.setAttribute('role', 'dialog');
+        this._panel.setAttribute('aria-labelledby', 'drawer-title');
+        this._panel.setAttribute('aria-hidden', 'true');
+        this._panel.tabIndex = -1;
+        const header = document.createElement('header');
+        header.className = 'header';
+        header.part.add('header');
+        this._title.id = 'drawer-title';
+        this._closeButton.className = 'close';
+        this._closeButton.part.add('close-button');
+        this._closeButton.type = 'button';
+        this._closeButton.setAttribute('aria-label', 'Close drawer');
+        this._closeButton.textContent = '×';
+        header.append(this._title, this._closeButton);
+        const body = document.createElement('div');
+        body.className = 'body';
+        body.part.add('body');
+        body.append(document.createElement('slot'));
+        this._footer.className = 'footer';
+        this._footer.part.add('footer');
+        this._footerSlot.name = 'footer';
+        this._footer.append(this._footerSlot);
+        this._panel.append(header, body, this._footer);
+        container.append(mask, this._panel);
+        root.append(style, container);
+        mask.addEventListener('click', () => this.close('mask'));
+        this._closeButton.addEventListener('click', () => this.close('action'));
+        this._footerSlot.addEventListener('slotchange', () => this._syncFooter());
+    }
+    connectedCallback() {
+        this._syncPlacement();
+        this._syncHeading();
+        this._syncFooter();
+        this._syncOpen();
+    }
+    disconnectedCallback() {
+        this._detachDocumentListener();
+        this._cancelContentDestroy();
+        this._returnFocus = null;
+        this._wasOpen = false;
+    }
+    attributeChangedCallback(name) {
+        if (name === 'heading')
+            this._syncHeading();
+        if (name === 'placement')
+            this._syncPlacement();
+        if (name === 'mask')
+            this._syncPanelSemantics();
+        if (name === 'open' && this.isConnected)
+            this._syncOpen();
+        if (name === 'destroy-on-hidden' && this.isConnected && !this.open) {
+            if (this.destroyOnHidden)
+                this._scheduleContentDestroy(0);
+            else
+                this._restoreContent();
+        }
+    }
+    get open() { return this.hasAttribute('open'); }
+    set open(value) { this.toggleAttribute('open', Boolean(value)); }
+    get heading() { return this.getAttribute('heading') ?? ''; }
+    set heading(value) { this.setAttribute('heading', String(value)); }
+    get placement() {
+        const value = this.getAttribute('placement');
+        return value === 'top' || value === 'bottom' || value === 'left' ? value : 'right';
+    }
+    set placement(value) {
+        this.setAttribute('placement', value === 'top' || value === 'bottom' || value === 'left' ? value : 'right');
+    }
+    /** The mask defaults to true; use mask="false" or set the property to false to disable it. */
+    get mask() { return this.getAttribute('mask') !== 'false'; }
+    set mask(value) { this.setAttribute('mask', String(Boolean(value))); }
+    get destroyOnHidden() { return this.hasAttribute('destroy-on-hidden'); }
+    set destroyOnHidden(value) { this.toggleAttribute('destroy-on-hidden', Boolean(value)); }
+    show() {
+        if (this.open)
+            return;
+        this._closeReason = 'programmatic';
+        this.open = true;
+    }
+    close(reason = 'programmatic') {
+        if (!this.open)
+            return;
+        this._closeReason = reason;
+        this.open = false;
+    }
+    _syncHeading() {
+        this._title.textContent = this.heading || 'Drawer';
+    }
+    _syncPlacement() {
+        const value = this.getAttribute('placement');
+        if (value !== null && value !== 'top' && value !== 'right' && value !== 'bottom' && value !== 'left') {
+            this.setAttribute('placement', 'right');
+        }
+    }
+    _syncFooter() {
+        this._footer.hidden = this._footerSlot.assignedElements().length === 0;
+    }
+    _syncPanelSemantics() {
+        if (this.open && this.mask)
+            this._panel.setAttribute('aria-modal', 'true');
+        else
+            this._panel.removeAttribute('aria-modal');
+    }
+    _syncOpen() {
+        if (this.open) {
+            this._cancelContentDestroy();
+            this._restoreContent();
+            this._returnFocus ??= document.activeElement instanceof HTMLElement ? document.activeElement : null;
+            this._panel.setAttribute('aria-hidden', 'false');
+            this._syncPanelSemantics();
+            this._attachDocumentListener();
+            this._wasOpen = true;
+            queueMicrotask(() => {
+                if (this.open && this.isConnected)
+                    this._closeButton.focus();
+            });
+            return;
+        }
+        this._panel.setAttribute('aria-hidden', 'true');
+        this._syncPanelSemantics();
+        this._detachDocumentListener();
+        this._scheduleContentDestroy(this._wasOpen ? CONTENT_DESTROY_DELAY : 0);
+        if (!this._wasOpen)
+            return;
+        this._wasOpen = false;
+        const reason = this._closeReason;
+        this._closeReason = 'programmatic';
+        this.dispatchEvent(new CustomEvent('drawer-close', {
+            detail: { reason },
+            bubbles: true,
+            composed: true,
+        }));
+        this._returnFocus?.focus();
+        this._returnFocus = null;
+    }
+    _attachDocumentListener() {
+        if (this._documentListenerAbort)
+            return;
+        this._documentListenerAbort = new AbortController();
+        document.addEventListener('keydown', this._onDocumentKeyDown, {
+            capture: true,
+            signal: this._documentListenerAbort.signal,
+        });
+    }
+    _detachDocumentListener() {
+        this._documentListenerAbort?.abort();
+        this._documentListenerAbort = null;
+    }
+    _onDocumentKeyDown = (event) => {
+        if (!this.open)
+            return;
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.close('escape');
+            return;
+        }
+        if (event.key !== 'Tab' || !this.mask)
+            return;
+        const focusable = [this._closeButton, ...this.querySelectorAll(FOCUSABLE_SELECTOR)]
+            .filter(element => !element.hidden && element.getAttribute('aria-hidden') !== 'true');
+        if (focusable.length === 0) {
+            event.preventDefault();
+            this._panel.focus();
+            return;
+        }
+        const active = this.shadowRoot?.activeElement ?? document.activeElement;
+        const index = focusable.indexOf(active);
+        if (event.shiftKey && index <= 0) {
+            event.preventDefault();
+            focusable[focusable.length - 1]?.focus();
+        }
+        else if (!event.shiftKey && (index < 0 || index === focusable.length - 1)) {
+            event.preventDefault();
+            focusable[0]?.focus();
+        }
+    };
+    _scheduleContentDestroy(delay) {
+        this._cancelContentDestroy();
+        if (!this.destroyOnHidden || this.open)
+            return;
+        this._destroyTimer = window.setTimeout(() => {
+            this._destroyTimer = null;
+            if (!this.open && this.destroyOnHidden)
+                this._detachedContent.append(...Array.from(this.childNodes));
+        }, delay);
+    }
+    _cancelContentDestroy() {
+        if (this._destroyTimer === null)
+            return;
+        window.clearTimeout(this._destroyTimer);
+        this._destroyTimer = null;
+    }
+    _restoreContent() {
+        if (!this._detachedContent.hasChildNodes())
+            return;
+        this.insertBefore(this._detachedContent, this.firstChild);
+        this._syncFooter();
+    }
+}
+export function defineDrawerComponents() {
+    if (!customElements.get('hy-drawer'))
+        customElements.define('hy-drawer', HYDrawer);
+}
+//# sourceMappingURL=drawer.js.map

package/dist/dropdown.d.ts

@@ -1,15 +1,15 @@
-export interface GEDropdownItem {
+export interface HYDropdownItem {
     label?: string;
     value?: string;
     disabled?: boolean;
     separator?: boolean;
 }
-export interface GEDropdownSelectDetail {
+export interface HYDropdownSelectDetail {
     value: string;
-    item: GEDropdownItem;
+    item: HYDropdownItem;
 }
-export type GEDropdownPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
-export declare class GEDropdown extends HTMLElement {
+export type HYDropdownPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+export declare class HYDropdown extends HTMLElement {
     private readonly _root;
     private readonly _style;
     private readonly _triggerSlot;
@@ -21,14 +21,14 @@ export declare class GEDropdown extends HTMLElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
-    get items(): GEDropdownItem[];
-    set items(value: GEDropdownItem[]);
+    get items(): HYDropdownItem[];
+    set items(value: HYDropdownItem[]);
     get open(): boolean;
     set open(value: boolean);
     get disabled(): boolean;
     set disabled(value: boolean);
-    get placement(): GEDropdownPlacement;
-    set placement(value: GEDropdownPlacement);
+    get placement(): HYDropdownPlacement;
+    set placement(value: HYDropdownPlacement);
     show(): void;
     close(): void;
     toggle(): void;