@haiyue/ui 0.1.0 → 0.1.1

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,35 @@
-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 { 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,5 @@
+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 +9,34 @@ 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);
-    }
+    defineBorderBeamComponents();
+    defineButtonComponents();
     defineTreeComponents();
     defineSplitComponents();
     defineSelectComponents();
@@ -104,7 +46,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;

package/dist/input.js

@@ -1,4 +1,4 @@
-export class GEInput extends HTMLElement {
+export class HYInput extends HTMLElement {
     _input = document.createElement('input');
     static get observedAttributes() {
         return [
@@ -19,26 +19,26 @@ export class GEInput extends HTMLElement {
       input {
         box-sizing: border-box;
         width: 100%;
-        height: var(--ge-input-height, 28px);
+        height: var(--hy-input-height, 28px);
         min-width: 0;
         padding: 0 8px;
-        border: 1px solid var(--ge-border-color, #303746);
+        border: 1px solid var(--hy-border-color, #303746);
         border-radius: 4px;
         outline: none;
-        color: var(--ge-text-color, #d8e2f2);
-        background: var(--ge-input-bg-color, var(--ge-surface-color, #121822));
-        font: var(--ge-input-font, 12px system-ui, sans-serif);
-        color-scheme: dark;
+        color: var(--hy-text-color, #d8e2f2);
+        background: var(--hy-input-bg-color, var(--hy-surface-color, #121822));
+        font: var(--hy-input-font, 12px system-ui, sans-serif);
+        color-scheme: inherit;
       }
       input:hover:not(:disabled):not(:read-only) {
-        border-color: var(--ge-hover-border-color, #435268);
+        border-color: var(--hy-hover-border-color, #435268);
       }
       input:focus {
-        border-color: var(--ge-focus-border-color, #3d6fa8);
-        box-shadow: 0 0 0 2px var(--ge-focus-ring-color, rgba(61, 111, 168, 0.24));
+        border-color: var(--hy-focus-border-color, #3d6fa8);
+        box-shadow: 0 0 0 2px var(--hy-focus-ring-color, rgba(61, 111, 168, 0.24));
       }
       input:invalid {
-        border-color: var(--ge-invalid-border-color, #b64f62);
+        border-color: var(--hy-invalid-border-color, #b64f62);
       }
       input:disabled,
       input:read-only {
@@ -122,8 +122,8 @@ export class GEInput extends HTMLElement {
     };
 }
 export function defineInputComponents() {
-    if (!customElements.get('ge-input'))
-        customElements.define('ge-input', GEInput);
+    if (!customElements.get('hy-input'))
+        customElements.define('hy-input', HYInput);
 }
 function normalizedType(value) {
     return value === 'number' || value === 'color' ? value : 'text';

package/dist/menu-shared.d.ts

@@ -1,14 +1,14 @@
-export interface GEMenuItemLike {
+export interface HYMenuItemLike {
     label?: string;
     value?: string;
     disabled?: boolean;
     separator?: boolean;
 }
-export interface GEMenuButtonOptions {
+export interface HYMenuButtonOptions {
     index?: number;
     role?: string;
     tabIndex?: number;
 }
-export declare const GE_MENU_ITEM_STYLES = "\n      button {\n        box-sizing: border-box;\n        width: 100%;\n        height: 26px;\n        display: flex;\n        align-items: center;\n        padding: 0 8px;\n        border: 0;\n        border-radius: 3px;\n        color: var(--ge-text-color, #d8e2f2);\n        background: transparent;\n        font: inherit;\n        text-align: left;\n        cursor: pointer;\n      }\n      button:hover,\n      button:focus,\n      button.active {\n        background: var(--ge-menu-item-hover-bg-color, var(--ge-accent-strong-color, #255a91));\n        outline: none;\n      }\n      button:disabled {\n        color: var(--ge-muted-color, #66758b);\n        cursor: default;\n      }\n      button:disabled:hover {\n        background: transparent;\n      }\n      .separator {\n        height: 1px;\n        margin: 4px 2px;\n        background: var(--ge-border-color, #303746);\n      }\n";
+export declare const GE_MENU_ITEM_STYLES = "\n      button {\n        box-sizing: border-box;\n        width: 100%;\n        height: 26px;\n        display: flex;\n        align-items: center;\n        padding: 0 8px;\n        border: 0;\n        border-radius: 3px;\n        color: var(--hy-text-color, #d8e2f2);\n        background: transparent;\n        font: inherit;\n        text-align: left;\n        cursor: pointer;\n      }\n      button:hover,\n      button:focus,\n      button.active {\n        background: var(--hy-menu-item-hover-bg-color, var(--hy-accent-strong-color, #255a91));\n        outline: none;\n      }\n      button:disabled {\n        color: var(--hy-muted-color, #66758b);\n        cursor: default;\n      }\n      button:disabled:hover {\n        background: transparent;\n      }\n      .separator {\n        height: 1px;\n        margin: 4px 2px;\n        background: var(--hy-border-color, #303746);\n      }\n";
 export declare function createMenuSeparator(): HTMLDivElement;
-export declare function createMenuItemButton(item: GEMenuItemLike, options?: GEMenuButtonOptions): HTMLButtonElement;
+export declare function createMenuItemButton(item: HYMenuItemLike, options?: HYMenuButtonOptions): HTMLButtonElement;

package/dist/menu-shared.js

@@ -8,7 +8,7 @@ export const GE_MENU_ITEM_STYLES = `
         padding: 0 8px;
         border: 0;
         border-radius: 3px;
-        color: var(--ge-text-color, #d8e2f2);
+        color: var(--hy-text-color, #d8e2f2);
         background: transparent;
         font: inherit;
         text-align: left;
@@ -17,11 +17,11 @@ export const GE_MENU_ITEM_STYLES = `
       button:hover,
       button:focus,
       button.active {
-        background: var(--ge-menu-item-hover-bg-color, var(--ge-accent-strong-color, #255a91));
+        background: var(--hy-menu-item-hover-bg-color, var(--hy-accent-strong-color, #255a91));
         outline: none;
       }
       button:disabled {
-        color: var(--ge-muted-color, #66758b);
+        color: var(--hy-muted-color, #66758b);
         cursor: default;
       }
       button:disabled:hover {
@@ -30,7 +30,7 @@ export const GE_MENU_ITEM_STYLES = `
       .separator {
         height: 1px;
         margin: 4px 2px;
-        background: var(--ge-border-color, #303746);
+        background: var(--hy-border-color, #303746);
       }
 `;
 export function createMenuSeparator() {

package/dist/notification.d.ts

@@ -0,0 +1,55 @@
+export type HYNotificationType = 'success' | 'info' | 'warning' | 'error';
+export type HYNotificationPlacement = 'topLeft' | 'top' | 'topRight' | 'bottomLeft' | 'bottom' | 'bottomRight';
+export type HYNotificationCloseReason = 'action' | 'timeout' | 'programmatic';
+export interface HYNotificationOptions {
+    readonly key?: string;
+    readonly type?: HYNotificationType;
+    readonly message: string;
+    readonly description?: string;
+    /** Auto-close delay in seconds. Use 0 to keep the notification open. */
+    readonly duration?: number;
+    readonly placement?: HYNotificationPlacement;
+    readonly showProgress?: boolean;
+}
+export type HYNotificationMethodOptions = Omit<HYNotificationOptions, 'type'>;
+export interface HYNotificationOpenDetail {
+    readonly key: string;
+    readonly type: HYNotificationType;
+    readonly placement: HYNotificationPlacement;
+}
+export interface HYNotificationCloseDetail extends HYNotificationOpenDetail {
+    readonly reason: HYNotificationCloseReason;
+}
+/** Imperative notification center with independently timed, stacked notices. */
+export declare class HYNotification extends HTMLElement {
+    private readonly _containers;
+    private readonly _notices;
+    private _sequence;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    get placement(): HYNotificationPlacement;
+    set placement(value: HYNotificationPlacement);
+    get duration(): number;
+    set duration(value: number);
+    get showProgress(): boolean;
+    set showProgress(value: boolean);
+    get size(): number;
+    open(options: HYNotificationOptions): string;
+    success(options: string | HYNotificationMethodOptions): string;
+    info(options: string | HYNotificationMethodOptions): string;
+    warning(options: string | HYNotificationMethodOptions): string;
+    error(options: string | HYNotificationMethodOptions): string;
+    close(key: string): void;
+    destroy(): void;
+    private _openTyped;
+    private _createNotice;
+    private _createIcon;
+    private _closeNotice;
+    private _removeNotice;
+    private _updateStack;
+    private _syncPlacementAttribute;
+}
+export declare function defineNotificationComponents(): void;