@haiyue/ui 0.1.2 → 0.2.1

package/dist/dialog.d.ts

@@ -17,6 +17,9 @@ export declare class HYDialog extends HTMLElement {
     set open(value: boolean);
     get dismissible(): boolean;
     set dismissible(value: boolean);
+    /** Opt-in: user dismissal requests leave open controlled by the application. */
+    get controlled(): boolean;
+    set controlled(value: boolean);
     get heading(): string;
     set heading(value: string);
     showModal(): void;
@@ -25,6 +28,7 @@ export declare class HYDialog extends HTMLElement {
     private _syncOpen;
     private _onCancel;
     private _onDialogClick;
+    private _requestClose;
     private _onNativeClose;
 }
 export declare function defineDialogComponents(): void;

package/dist/dialog.js

@@ -6,7 +6,7 @@ export class HYDialog extends HTMLElement {
     _returnFocus = null;
     _closeReason = 'programmatic';
     static get observedAttributes() {
-        return ['open', 'heading', 'dismissible'];
+        return ['open', 'heading', 'dismissible', 'controlled'];
     }
     constructor() {
         super();
@@ -100,7 +100,7 @@ export class HYDialog extends HTMLElement {
         this._dialog.setAttribute('aria-labelledby', this._title.id);
         this._dialog.append(header, body, footer);
         root.append(style, this._dialog);
-        this._closeButton.addEventListener('click', () => this.close('action'));
+        this._closeButton.addEventListener('click', () => this.controlled ? this._requestClose('action') : this.close('action'));
         this._dialog.addEventListener('cancel', this._onCancel);
         this._dialog.addEventListener('click', this._onDialogClick);
         this._dialog.addEventListener('close', this._onNativeClose);
@@ -119,6 +119,9 @@ export class HYDialog extends HTMLElement {
     set open(value) { this.toggleAttribute('open', value); }
     get dismissible() { return this.hasAttribute('dismissible'); }
     set dismissible(value) { this.toggleAttribute('dismissible', value); }
+    /** Opt-in: user dismissal requests leave open controlled by the application. */
+    get controlled() { return this.hasAttribute('controlled'); }
+    set controlled(value) { this.toggleAttribute('controlled', value); }
     get heading() { return this.getAttribute('heading') ?? ''; }
     set heading(value) { this.setAttribute('heading', value); }
     showModal() {
@@ -150,6 +153,10 @@ export class HYDialog extends HTMLElement {
         event.preventDefault();
         if (!this.dismissible)
             return;
+        if (this.controlled) {
+            this._requestClose('escape');
+            return;
+        }
         const forwarded = new CustomEvent('dialog-cancel', { bubbles: true, composed: true, cancelable: true });
         if (this.dispatchEvent(forwarded))
             this.close('escape');
@@ -160,10 +167,20 @@ export class HYDialog extends HTMLElement {
         const rect = this._dialog.getBoundingClientRect();
         const inside = event.clientX >= rect.left && event.clientX <= rect.right
             && event.clientY >= rect.top && event.clientY <= rect.bottom;
-        if (!inside)
-            this.close('backdrop');
+        if (!inside) {
+            if (this.controlled)
+                this._requestClose('backdrop');
+            else
+                this.close('backdrop');
+        }
     };
+    _requestClose(reason) {
+        this.dispatchEvent(new CustomEvent('dialog-cancel', { detail: { reason }, bubbles: true, composed: true, cancelable: true }));
+    }
     _onNativeClose = () => {
+        // Native close is queued. A subsequent showModal must not be undone by that old event.
+        if (this._dialog.open)
+            return;
         this.removeAttribute('open');
         const reason = this._closeReason;
         this._closeReason = 'programmatic';
@@ -172,7 +189,8 @@ export class HYDialog extends HTMLElement {
             bubbles: true,
             composed: true,
         }));
-        this._returnFocus?.focus();
+        if (!this.controlled)
+            this._returnFocus?.focus();
         this._returnFocus = null;
     };
 }

package/dist/divider.d.ts

@@ -0,0 +1,33 @@
+export type HYDividerOrientation = 'horizontal' | 'vertical';
+export type HYDividerLineStyle = 'solid' | 'dashed' | 'dotted' | 'double';
+export type HYDividerTextPlacement = 'start' | 'center' | 'end';
+/** Theme-aware horizontal or vertical separator with optional slotted text. */
+export declare class HYDivider extends HTMLElement {
+    private readonly _divider;
+    private readonly _before;
+    private readonly _label;
+    private readonly _slot;
+    private readonly _fallback;
+    private readonly _after;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    get orientation(): HYDividerOrientation;
+    set orientation(value: HYDividerOrientation);
+    get lineStyle(): HYDividerLineStyle;
+    set lineStyle(value: HYDividerLineStyle);
+    get textPlacement(): HYDividerTextPlacement;
+    set textPlacement(value: HYDividerTextPlacement);
+    get label(): string;
+    set label(value: string);
+    get thickness(): number;
+    set thickness(value: number);
+    get color(): string;
+    set color(value: string);
+    get spacing(): number;
+    set spacing(value: number);
+    private _render;
+    private _syncLabel;
+}
+export declare function defineDividerComponents(): void;

package/dist/divider.js

@@ -0,0 +1,113 @@
+function boundedNumber(value, fallback, min, max) {
+    if (value == null || value === '')
+        return fallback;
+    const number = Number(value);
+    return Number.isFinite(number) ? Math.min(max, Math.max(min, number)) : fallback;
+}
+/** Theme-aware horizontal or vertical separator with optional slotted text. */
+export class HYDivider extends HTMLElement {
+    _divider = document.createElement('div');
+    _before = document.createElement('span');
+    _label = document.createElement('span');
+    _slot = document.createElement('slot');
+    _fallback = document.createElement('span');
+    _after = document.createElement('span');
+    static get observedAttributes() {
+        return ['orientation', 'line-style', 'text-placement', 'label', 'thickness', 'color', 'spacing', 'aria-label'];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = `
+      :host { display: block; min-width: 0; color: var(--hy-secondary-text-color, #aebbd0); font: 12px/1.4 system-ui, sans-serif; }
+      .divider { display: flex; width: 100%; align-items: center; gap: var(--_spacing, var(--hy-divider-text-gap, 12px)); box-sizing: border-box; }
+      .line { flex: 1 1 auto; min-width: 0; height: 0; border-top: var(--_thickness, 1px) var(--_line-style, solid) var(--_color, var(--hy-divider-color, var(--hy-border-color, #3d4654))); }
+      .label { flex: 0 0 auto; max-width: min(70%, 64ch); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+      .label[hidden] { display: none; }
+      :host([text-placement="start"]) .before { flex: 0 0 var(--hy-divider-edge-length, 24px); }
+      :host([text-placement="end"]) .after { flex: 0 0 var(--hy-divider-edge-length, 24px); }
+      :host([orientation="vertical"]) { display: inline-block; width: max-content; height: var(--hy-divider-vertical-height, 1.4em); vertical-align: middle; }
+      :host([orientation="vertical"]) .divider { width: auto; height: 100%; flex-direction: column; }
+      :host([orientation="vertical"]) .line { width: 0; height: auto; min-height: 0; border-top: 0; border-left: var(--_thickness, 1px) var(--_line-style, solid) var(--_color, var(--hy-divider-color, var(--hy-border-color, #3d4654))); }
+      :host([orientation="vertical"]) .label { max-width: none; max-height: 70%; writing-mode: vertical-rl; }
+      :host([orientation="vertical"][text-placement="start"]) .before { flex-basis: var(--hy-divider-edge-length, 10px); }
+      :host([orientation="vertical"][text-placement="end"]) .after { flex-basis: var(--hy-divider-edge-length, 10px); }
+    `;
+        this._divider.className = 'divider';
+        this._divider.part.add('divider');
+        this._divider.setAttribute('role', 'separator');
+        this._before.className = 'line before';
+        this._before.part.add('line', 'line-before');
+        this._before.setAttribute('aria-hidden', 'true');
+        this._label.className = 'label';
+        this._label.part.add('text');
+        this._fallback.className = 'fallback';
+        this._fallback.part.add('fallback');
+        this._slot.append(this._fallback);
+        this._label.append(this._slot);
+        this._after.className = 'line after';
+        this._after.part.add('line', 'line-after');
+        this._after.setAttribute('aria-hidden', 'true');
+        this._divider.append(this._before, this._label, this._after);
+        root.append(style, this._divider);
+        this._slot.addEventListener('slotchange', () => this._syncLabel());
+    }
+    connectedCallback() { this._render(); }
+    attributeChangedCallback() { this._render(); }
+    get orientation() { return this.getAttribute('orientation') === 'vertical' ? 'vertical' : 'horizontal'; }
+    set orientation(value) { this.setAttribute('orientation', value === 'vertical' ? 'vertical' : 'horizontal'); }
+    get lineStyle() {
+        const value = this.getAttribute('line-style');
+        return value === 'dashed' || value === 'dotted' || value === 'double' ? value : 'solid';
+    }
+    set lineStyle(value) { this.setAttribute('line-style', value === 'dashed' || value === 'dotted' || value === 'double' ? value : 'solid'); }
+    get textPlacement() {
+        const value = this.getAttribute('text-placement');
+        return value === 'start' || value === 'end' ? value : 'center';
+    }
+    set textPlacement(value) { this.setAttribute('text-placement', value === 'start' || value === 'end' ? value : 'center'); }
+    get label() { return this.getAttribute('label') ?? ''; }
+    set label(value) { const normalized = String(value); if (normalized)
+        this.setAttribute('label', normalized);
+    else
+        this.removeAttribute('label'); }
+    get thickness() { return boundedNumber(this.getAttribute('thickness'), 1, 1, 12); }
+    set thickness(value) { this.setAttribute('thickness', String(boundedNumber(value, 1, 1, 12))); }
+    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 spacing() { return boundedNumber(this.getAttribute('spacing'), 12, 0, 80); }
+    set spacing(value) { this.setAttribute('spacing', String(boundedNumber(value, 12, 0, 80))); }
+    _render() {
+        if (!this.isConnected)
+            return;
+        this._divider.setAttribute('aria-orientation', this.orientation);
+        const name = this.getAttribute('aria-label');
+        if (name)
+            this._divider.setAttribute('aria-label', name);
+        else
+            this._divider.removeAttribute('aria-label');
+        const effectiveThickness = this.lineStyle === 'double' ? Math.max(3, this.thickness) : this.thickness;
+        this.style.setProperty('--_line-style', this.lineStyle);
+        this.style.setProperty('--_thickness', `${effectiveThickness}px`);
+        this.style.setProperty('--_spacing', `${this.spacing}px`);
+        if (this.color)
+            this.style.setProperty('--_color', this.color);
+        else
+            this.style.removeProperty('--_color');
+        this._fallback.textContent = this.label;
+        this._syncLabel();
+    }
+    _syncLabel() {
+        const hasSlottedText = this._slot.assignedNodes().some(node => node.nodeType === Node.ELEMENT_NODE || Boolean(node.textContent?.trim()));
+        this._label.hidden = !hasSlottedText && !this.label;
+    }
+}
+export function defineDividerComponents() {
+    if (!customElements.get('hy-divider'))
+        customElements.define('hy-divider', HYDivider);
+}
+//# sourceMappingURL=divider.js.map

package/dist/draggable.d.ts

@@ -0,0 +1,78 @@
+export type HYDraggableAxis = 'both' | 'x' | 'y';
+export type HYDraggableBoundsMode = 'none' | 'parent' | 'viewport';
+export type HYDraggableBounds = HYDraggableBoundsMode | HTMLElement;
+export type HYDraggableMoveSource = 'pointer' | 'keyboard' | 'api';
+export interface HYDraggablePosition {
+    readonly x: number;
+    readonly y: number;
+}
+export interface HYDraggableMoveDetail extends HYDraggablePosition {
+    readonly deltaX: number;
+    readonly deltaY: number;
+    readonly source: HYDraggableMoveSource;
+}
+export interface HYDraggableStartDetail extends HYDraggablePosition {
+    readonly pointerId: number;
+}
+export interface HYDraggableEndDetail extends HYDraggableMoveDetail {
+    readonly cancelled: boolean;
+}
+/** Transform-based draggable container with optional handles, constraints, snapping, and keyboard movement. */
+export declare class HYDraggable extends HTMLElement {
+    private readonly _surface;
+    private _x;
+    private _y;
+    private _reflecting;
+    private _boundsTarget;
+    private _dragAbort;
+    private _pointerId;
+    private _originX;
+    private _originY;
+    private _pointerX;
+    private _pointerY;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    get x(): number;
+    set x(value: number);
+    get y(): number;
+    set y(value: number);
+    get position(): HYDraggablePosition;
+    set position(value: HYDraggablePosition);
+    get axis(): HYDraggableAxis;
+    set axis(value: HYDraggableAxis);
+    get bounds(): HYDraggableBounds;
+    set bounds(value: HYDraggableBounds);
+    get boundsMode(): HYDraggableBoundsMode;
+    get grid(): number;
+    set grid(value: number);
+    get handle(): string;
+    set handle(value: string);
+    get cancel(): string;
+    set cancel(value: string);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get keyboard(): boolean;
+    set keyboard(value: boolean);
+    get dragging(): boolean;
+    moveTo(x: number, y: number): HYDraggablePosition;
+    moveBy(deltaX: number, deltaY: number): HYDraggablePosition;
+    reset(): HYDraggablePosition;
+    refresh(): HYDraggablePosition;
+    private _startPointerDrag;
+    private _handlePointerMove;
+    private _finishPointerDrag;
+    private _completePointerDrag;
+    private _cancelDrag;
+    private _handleKeydown;
+    private _allowsTarget;
+    private _moveTo;
+    private _constrain;
+    private _setPosition;
+    private _syncPosition;
+    private _reflectPosition;
+    private _syncAccessibility;
+}
+export declare function defineDraggableComponents(): void;

package/dist/draggable.js

@@ -0,0 +1,255 @@
+const DEFAULT_CANCEL = 'input, textarea, select, button, a, [contenteditable="true"], [data-no-drag]';
+function finiteNumber(value, fallback = 0) {
+    const number = Number(value);
+    return Number.isFinite(number) ? number : fallback;
+}
+function safeMatches(element, selector) {
+    try {
+        return element.matches(selector);
+    }
+    catch {
+        return false;
+    }
+}
+/** Transform-based draggable container with optional handles, constraints, snapping, and keyboard movement. */
+export class HYDraggable extends HTMLElement {
+    _surface = document.createElement('div');
+    _x = 0;
+    _y = 0;
+    _reflecting = false;
+    _boundsTarget = null;
+    _dragAbort = null;
+    _pointerId = null;
+    _originX = 0;
+    _originY = 0;
+    _pointerX = 0;
+    _pointerY = 0;
+    static get observedAttributes() {
+        return ['x', 'y', 'axis', 'bounds', 'grid', 'handle', 'cancel', 'disabled', 'keyboard', 'aria-label'];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        const slot = document.createElement('slot');
+        style.textContent = `
+      :host { display: inline-block; max-width: 100%; min-width: 0; translate: var(--_hy-draggable-x, 0px) var(--_hy-draggable-y, 0px); will-change: translate; }
+      .surface { min-width: 0; outline: none; cursor: var(--hy-draggable-cursor, grab); touch-action: var(--hy-draggable-touch-action, none); user-select: none; }
+      :host([dragging]) { z-index: var(--hy-draggable-active-z-index, 10); }
+      :host([dragging]) .surface { cursor: var(--hy-draggable-active-cursor, grabbing); }
+      :host([disabled]) .surface { cursor: default; }
+      .surface:focus-visible { outline: 2px solid var(--hy-focus-border-color, #79a8ff); outline-offset: var(--hy-draggable-focus-offset, 2px); border-radius: var(--hy-draggable-focus-radius, 6px); }
+      ::slotted([data-drag-handle]) { cursor: var(--hy-draggable-cursor, grab); }
+      @media (prefers-reduced-motion: reduce) { :host { scroll-behavior: auto; } }
+    `;
+        this._surface.className = 'surface';
+        this._surface.part.add('surface');
+        this._surface.setAttribute('role', 'group');
+        this._surface.append(slot);
+        root.append(style, this._surface);
+        this._surface.addEventListener('pointerdown', event => this._startPointerDrag(event));
+        this._surface.addEventListener('keydown', event => this._handleKeydown(event));
+    }
+    connectedCallback() {
+        this._x = finiteNumber(this.getAttribute('x'), this._x);
+        this._y = finiteNumber(this.getAttribute('y'), this._y);
+        this._syncPosition();
+        this._syncAccessibility();
+    }
+    disconnectedCallback() { this._cancelDrag(true); }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue)
+            return;
+        if ((name === 'x' || name === 'y') && !this._reflecting) {
+            this._x = finiteNumber(this.getAttribute('x'), this._x);
+            this._y = finiteNumber(this.getAttribute('y'), this._y);
+            this._syncPosition();
+        }
+        else if (name === 'disabled' && this.disabled)
+            this._cancelDrag(true);
+        if (name === 'keyboard' || name === 'disabled' || name === 'aria-label')
+            this._syncAccessibility();
+    }
+    get x() { return this._x; }
+    set x(value) { this._setPosition(finiteNumber(value, this._x), this._y); }
+    get y() { return this._y; }
+    set y(value) { this._setPosition(this._x, finiteNumber(value, this._y)); }
+    get position() { return { x: this._x, y: this._y }; }
+    set position(value) { this._setPosition(finiteNumber(value?.x, this._x), finiteNumber(value?.y, this._y)); }
+    get axis() { const value = this.getAttribute('axis'); return value === 'x' || value === 'y' ? value : 'both'; }
+    set axis(value) { this.setAttribute('axis', value === 'x' || value === 'y' ? value : 'both'); }
+    get bounds() { return this._boundsTarget ?? this.boundsMode; }
+    set bounds(value) {
+        if (value instanceof HTMLElement) {
+            this._boundsTarget = value;
+            this.setAttribute('bounds', 'parent');
+        }
+        else {
+            this._boundsTarget = null;
+            this.setAttribute('bounds', value === 'parent' || value === 'viewport' ? value : 'none');
+        }
+        this.refresh();
+    }
+    get boundsMode() { const value = this.getAttribute('bounds'); return value === 'parent' || value === 'viewport' ? value : 'none'; }
+    get grid() { return Math.max(1, Math.min(1000, finiteNumber(this.getAttribute('grid'), 1))); }
+    set grid(value) { this.setAttribute('grid', String(Math.max(1, Math.min(1000, finiteNumber(value, 1))))); }
+    get handle() { return this.getAttribute('handle')?.trim() ?? ''; }
+    set handle(value) { const normalized = String(value).trim(); if (normalized)
+        this.setAttribute('handle', normalized);
+    else
+        this.removeAttribute('handle'); }
+    get cancel() { return this.getAttribute('cancel')?.trim() || DEFAULT_CANCEL; }
+    set cancel(value) { const normalized = String(value).trim(); if (normalized)
+        this.setAttribute('cancel', normalized);
+    else
+        this.removeAttribute('cancel'); }
+    get disabled() { return this.hasAttribute('disabled'); }
+    set disabled(value) { this.toggleAttribute('disabled', Boolean(value)); }
+    get keyboard() { return this.getAttribute('keyboard') !== 'false'; }
+    set keyboard(value) { this.setAttribute('keyboard', String(Boolean(value))); }
+    get dragging() { return this._pointerId != null; }
+    moveTo(x, y) { return this._moveTo(x, y, 'api'); }
+    moveBy(deltaX, deltaY) { return this._moveTo(this._x + finiteNumber(deltaX), this._y + finiteNumber(deltaY), 'api'); }
+    reset() { return this._moveTo(0, 0, 'api'); }
+    refresh() { const constrained = this._constrain(this._x, this._y); this._setPosition(constrained.x, constrained.y); return this.position; }
+    _startPointerDrag(event) {
+        if (this.disabled || event.button !== 0 || this._pointerId != null || !this._allowsTarget(event))
+            return;
+        const start = new CustomEvent('drag-start', { bubbles: true, composed: true, cancelable: true, detail: { x: this._x, y: this._y, pointerId: event.pointerId } });
+        if (!this.dispatchEvent(start))
+            return;
+        event.preventDefault();
+        this._surface.focus({ preventScroll: true });
+        this._surface.setPointerCapture(event.pointerId);
+        this._pointerId = event.pointerId;
+        this._originX = this._x;
+        this._originY = this._y;
+        this._pointerX = event.clientX;
+        this._pointerY = event.clientY;
+        this.toggleAttribute('dragging', true);
+        const abort = new AbortController();
+        this._dragAbort = abort;
+        this._surface.addEventListener('pointermove', move => this._handlePointerMove(move), { signal: abort.signal });
+        this._surface.addEventListener('pointerup', up => this._finishPointerDrag(up, false), { signal: abort.signal });
+        this._surface.addEventListener('pointercancel', cancel => this._finishPointerDrag(cancel, true), { signal: abort.signal });
+        this._surface.addEventListener('lostpointercapture', () => this._cancelDrag(true), { signal: abort.signal });
+    }
+    _handlePointerMove(event) {
+        if (event.pointerId !== this._pointerId)
+            return;
+        event.preventDefault();
+        const x = this.axis === 'y' ? this._originX : this._originX + event.clientX - this._pointerX;
+        const y = this.axis === 'x' ? this._originY : this._originY + event.clientY - this._pointerY;
+        this._moveTo(x, y, 'pointer');
+    }
+    _finishPointerDrag(event, cancelled) {
+        this._completePointerDrag(event.pointerId, cancelled);
+    }
+    _completePointerDrag(pointerId, cancelled) {
+        if (pointerId !== this._pointerId)
+            return;
+        const originX = this._originX;
+        const originY = this._originY;
+        this._dragAbort?.abort();
+        this._dragAbort = null;
+        this._pointerId = null;
+        this.toggleAttribute('dragging', false);
+        if (this._surface.hasPointerCapture(pointerId))
+            this._surface.releasePointerCapture(pointerId);
+        this.dispatchEvent(new CustomEvent('drag-end', { bubbles: true, composed: true, detail: { x: this._x, y: this._y, deltaX: this._x - originX, deltaY: this._y - originY, source: 'pointer', cancelled } }));
+    }
+    _cancelDrag(cancelled) {
+        if (this._pointerId == null)
+            return;
+        this._completePointerDrag(this._pointerId, cancelled);
+    }
+    _handleKeydown(event) {
+        if (this.disabled || !this.keyboard)
+            return;
+        const multiplier = event.shiftKey ? 10 : 1;
+        const step = this.grid * multiplier;
+        let x = this._x;
+        let y = this._y;
+        if (event.key === 'ArrowLeft' && this.axis !== 'y')
+            x -= step;
+        else if (event.key === 'ArrowRight' && this.axis !== 'y')
+            x += step;
+        else if (event.key === 'ArrowUp' && this.axis !== 'x')
+            y -= step;
+        else if (event.key === 'ArrowDown' && this.axis !== 'x')
+            y += step;
+        else if (event.key === 'Home') {
+            x = 0;
+            y = 0;
+        }
+        else
+            return;
+        event.preventDefault();
+        this._moveTo(x, y, 'keyboard');
+    }
+    _allowsTarget(event) {
+        const elements = event.composedPath().filter((node) => node instanceof Element && node !== this._surface && node !== this);
+        if (elements.some(element => safeMatches(element, this.cancel)))
+            return false;
+        if (!this.handle)
+            return true;
+        return elements.some(element => safeMatches(element, this.handle));
+    }
+    _moveTo(x, y, source) {
+        const oldX = this._x;
+        const oldY = this._y;
+        const restrictAxis = source !== 'api';
+        const snappedX = restrictAxis && this.axis === 'y' ? oldX : Math.round(finiteNumber(x, oldX) / this.grid) * this.grid;
+        const snappedY = restrictAxis && this.axis === 'x' ? oldY : Math.round(finiteNumber(y, oldY) / this.grid) * this.grid;
+        const next = this._constrain(snappedX, snappedY);
+        if (next.x === oldX && next.y === oldY)
+            return this.position;
+        this._setPosition(next.x, next.y);
+        this.dispatchEvent(new CustomEvent('drag-move', { bubbles: true, composed: true, detail: { x: next.x, y: next.y, deltaX: next.x - oldX, deltaY: next.y - oldY, source } }));
+        return this.position;
+    }
+    _constrain(x, y) {
+        const target = this._boundsTarget ?? (this.boundsMode === 'parent' ? this.parentElement : null);
+        const targetRect = target?.getBoundingClientRect();
+        const bounds = target && targetRect ? { left: targetRect.left + target.clientLeft, top: targetRect.top + target.clientTop, right: targetRect.left + target.clientLeft + target.clientWidth, bottom: targetRect.top + target.clientTop + target.clientHeight } : this.boundsMode === 'viewport' ? { left: 0, top: 0, right: window.innerWidth, bottom: window.innerHeight } : null;
+        if (!bounds || !this.isConnected)
+            return { x, y };
+        const rect = this.getBoundingClientRect();
+        const baseLeft = rect.left - this._x;
+        const baseTop = rect.top - this._y;
+        const width = rect.width;
+        const height = rect.height;
+        const minX = bounds.left - baseLeft;
+        const maxX = bounds.right - baseLeft - width;
+        const minY = bounds.top - baseTop;
+        const maxY = bounds.bottom - baseTop - height;
+        return { x: minX <= maxX ? Math.min(maxX, Math.max(minX, x)) : minX, y: minY <= maxY ? Math.min(maxY, Math.max(minY, y)) : minY };
+    }
+    _setPosition(x, y) {
+        this._x = x;
+        this._y = y;
+        this._syncPosition();
+        this._reflectPosition();
+    }
+    _syncPosition() { this.style.setProperty('--_hy-draggable-x', `${this._x}px`); this.style.setProperty('--_hy-draggable-y', `${this._y}px`); }
+    _reflectPosition() {
+        const x = String(Math.round(this._x * 1000) / 1000);
+        const y = String(Math.round(this._y * 1000) / 1000);
+        this._reflecting = true;
+        if (this.getAttribute('x') !== x)
+            this.setAttribute('x', x);
+        if (this.getAttribute('y') !== y)
+            this.setAttribute('y', y);
+        this._reflecting = false;
+    }
+    _syncAccessibility() {
+        this._surface.tabIndex = this.keyboard && !this.disabled ? 0 : -1;
+        this._surface.setAttribute('aria-disabled', String(this.disabled));
+        this._surface.setAttribute('aria-label', this.getAttribute('aria-label') || 'Draggable container');
+    }
+}
+export function defineDraggableComponents() {
+    if (!customElements.get('hy-draggable'))
+        customElements.define('hy-draggable', HYDraggable);
+}
+//# sourceMappingURL=draggable.js.map

package/dist/index.d.ts

@@ -1,6 +1,9 @@
 export { defineExpandableComponents, HYExpandable } from './expandable.js';
 export type { HYExpandableButtonPosition, HYExpandableChangeDetail } from './expandable.js';
 export { defineButtonComponents, HYButton, } from './button.js';
+export type { HYButtonIconPosition } from './button.js';
+export { defineButtonGroupComponents, HYButtonGroup, } from './button-group.js';
+export type { HYButtonGroupOrientation } from './button-group.js';
 export { defineBorderBeamComponents, HYBorderBeam, } from './border-beam.js';
 export { defineTreeComponents, HYTree, HYTreeNode, } from './tree.js';
 export { defineSplitComponents, HYSplit, } from './split.js';
@@ -12,14 +15,52 @@ 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 { defineResizableComponents, HYResizable, } from './resizable.js';
 export { defineDialogComponents, HYDialog, } from './dialog.js';
 export { defineDrawerComponents, HYDrawer, } from './drawer.js';
+export { defineDraggableComponents, HYDraggable, } from './draggable.js';
 export { defineInputComponents, HYInput, } from './input.js';
 export { defineNotificationComponents, HYNotification, } from './notification.js';
+export { defineToastComponents, HYToast, } from './toast.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 { defineVirtualMouseComponents, HYVirtualMouse, } from './virtual-mouse.js';
+export { defineVirtualKeyboardComponents, HYVirtualKeyboard, HY_VIRTUAL_KEYBOARD_NUMERIC_LAYOUT, HY_VIRTUAL_KEYBOARD_QWERTY_LAYOUT, } from './virtual-keyboard.js';
+export { defineTableComponents, HYTable, } from './table.js';
+export { defineBreadcrumbComponents, HYBreadcrumb, } from './breadcrumb.js';
+export { defineCascaderComponents, HYCascader, } from './cascader.js';
+export type { HYCascaderChangeDetail, HYCascaderOpenChangeDetail, HYCascaderOption, HYCascaderValue, } from './cascader.js';
+export { defineDatePickerComponents, HYDatePicker, } from './date-picker.js';
+export type { HYDatePickerChangeDetail, HYDatePickerOpenChangeDetail, } from './date-picker.js';
+export { defineTimePickerComponents, HYTimePicker, } from './time-picker.js';
+export type { HYTimePickerChangeDetail, HYTimePickerOpenChangeDetail, } from './time-picker.js';
+export { defineSkeletonComponents, HYSkeleton, } from './skeleton.js';
+export type { HYSkeletonAvatarShape, HYSkeletonSize, } from './skeleton.js';
+export { defineWatermarkComponents, HYWatermark, } from './watermark.js';
+export { defineTimelineComponents, HYTimeline, } from './timeline.js';
+export { defineRateComponents, HYRate, } from './rate.js';
+export type { HYRateChangeDetail, HYRateHoverChangeDetail, } from './rate.js';
+export { defineDividerComponents, HYDivider, } from './divider.js';
+export type { HYDividerLineStyle, HYDividerOrientation, HYDividerTextPlacement, } from './divider.js';
+export { defineStepsComponents, HYSteps, } from './steps.js';
+export { defineAffixComponents, HYAffix, } from './affix.js';
+export type { HYAffixChangeDetail } from './affix.js';
+export { defineTourComponents, HYTour, } from './tour.js';
+export { defineBadgeComponents, HYBadge, } from './badge.js';
+export type { HYBadgeCount, HYBadgeSize, HYBadgeStatus, } from './badge.js';
+export { defineTagComponents, HYTag, } from './tag.js';
+export type { HYTagCheckedChangeDetail, HYTagCloseDetail, HYTagSize, HYTagVariant, } from './tag.js';
+export { defineCollapseComponents, HYCollapse, } from './collapse.js';
+export type { HYCollapseChangeDetail, HYCollapseContent, HYCollapseIconPosition, HYCollapseItem, HYCollapseKey, HYCollapseTrigger, } from './collapse.js';
+export type { HYTourChangeDetail, HYTourCloseDetail, HYTourCloseReason, HYTourFinishDetail, HYTourOpenChangeDetail, HYTourPlacement, HYTourStep, HYTourTarget, } from './tour.js';
+export type { HYStepItem, HYStepsChangeDetail, HYStepsDirection, HYStepsSize, HYStepStatus, } from './steps.js';
+export type { HYTimelineDotRenderer, HYTimelineItem, HYTimelineItemPosition, HYTimelineItemRenderer, HYTimelineMode, HYTimelineStatus, } from './timeline.js';
+export type { HYBreadcrumbClickDetail, HYBreadcrumbItem, HYBreadcrumbItemRenderer, } from './breadcrumb.js';
+export type { HYTableAlign, HYTableChangeDetail, HYTableChangeReason, HYTableColumn, HYTableFilterOption, HYTableFilterState, HYTableRowClickDetail, HYTableSortDirection, HYTableSortState, } from './table.js';
+export type { HYVirtualMouseButton, HYVirtualMouseButtonDetail, HYVirtualMouseClickOptions, HYVirtualMouseImages, HYVirtualMouseMoveDetail, HYVirtualMouseMoveOptions, HYVirtualMousePosition, HYVirtualMouseState, } from './virtual-mouse.js';
+export type { HYVirtualKeyboardAction, HYVirtualKeyboardInputDetail, HYVirtualKeyboardKey, HYVirtualKeyboardKeyDetail, HYVirtualKeyboardLayout, HYVirtualKeyboardMode, HYVirtualKeyboardSource, HYVirtualKeyboardTapOptions, HYVirtualKeyboardTypeOptions, } from './virtual-keyboard.js';
 export type { HYSplitDirection, HYSplitRatioChangeDetail, } from './split.js';
 export type { HYSelectChangeDetail, HYSelectOption, } from './select.js';
 export type { HYTabChangeDetail, HYTabOption, } from './tabs.js';
@@ -29,9 +70,12 @@ 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 { HYResizableBounds, HYResizableBoundsMode, HYResizableChangeDetail, HYResizableEndDetail, HYResizableHandle, HYResizableRect, HYResizableSource, } from './resizable.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 { HYDraggableAxis, HYDraggableBounds, HYDraggableBoundsMode, HYDraggableEndDetail, HYDraggableMoveDetail, HYDraggableMoveSource, HYDraggablePosition, HYDraggableStartDetail, } from './draggable.js';
+export type { HYInputChangeDetail, HYInputSearchDetail, HYInputSearchSource, HYInputType, } from './input.js';
 export type { HYNotificationCloseDetail, HYNotificationCloseReason, HYNotificationMethodOptions, HYNotificationOpenDetail, HYNotificationOptions, HYNotificationPlacement, HYNotificationType, } from './notification.js';
+export type { HYToastCloseDetail, HYToastCloseReason, HYToastMethodOptions, HYToastOpenDetail, HYToastOptions, HYToastPlacement, HYToastType, } from './toast.js';
 export type { HYTreeDataChangeDetail, HYTreeDropPosition, HYTreeNodeContextMenuDetail, HYTreeNodeData, HYTreeSelectionChangeDetail, } from './tree.js';
 export declare function defineHaiyueUI(): void;