@haiyue/ui 0.1.0 → 0.1.2

package/dist/range.js

@@ -0,0 +1,393 @@
+const DEFAULT_MIN = 0;
+const DEFAULT_MAX = 100;
+const DEFAULT_STEP = 1;
+/** Accessible single-value or two-handle numeric range control. */
+export class HYRange extends HTMLElement {
+    _stage = document.createElement('div');
+    _track = document.createElement('div');
+    _lowerHandle = document.createElement('button');
+    _upperHandle = document.createElement('button');
+    _lowerBubble = document.createElement('span');
+    _upperBubble = document.createElement('span');
+    _activeHandle = 'single';
+    _dragStartValue = '';
+    _pointerId = -1;
+    _dragAbort = null;
+    _connected = false;
+    static get observedAttributes() {
+        return [
+            'min', 'max', 'step', 'value', 'range', 'lower-value', 'upper-value',
+            'disabled', 'show-value', 'aria-label',
+        ];
+    }
+    constructor() {
+        super();
+        const root = this.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = `
+      :host {
+        display: inline-block;
+        width: var(--hy-range-width, 280px);
+        min-width: 120px;
+        color: var(--hy-text-color, #e8effa);
+        font: 11px/1.3 system-ui, sans-serif;
+        --_handle-size: var(--hy-range-handle-size, 18px);
+        --_rail-height: var(--hy-range-rail-height, 5px);
+      }
+      :host([disabled]) { opacity: 0.5; }
+      .stage {
+        position: relative;
+        height: max(var(--_handle-size), 22px);
+        margin-inline: calc(var(--_handle-size) / 2);
+        touch-action: none;
+        user-select: none;
+      }
+      .rail,
+      .track {
+        position: absolute;
+        top: 50%;
+        right: 0;
+        left: 0;
+        height: var(--_rail-height);
+        border-radius: var(--hy-range-rail-radius, 999px);
+        transform: translateY(-50%);
+      }
+      .rail {
+        border: var(--hy-range-rail-border, 0);
+        background: var(--hy-range-rail-color, var(--hy-border-strong-color, #354154));
+        box-shadow: var(--hy-range-rail-shadow, none);
+      }
+      .track {
+        right: auto;
+        background: var(--hy-range-track-color, var(--hy-accent-color, #69bff4));
+        box-shadow: var(--hy-range-track-shadow, 0 0 9px color-mix(in srgb, var(--hy-range-track-color, var(--hy-accent-color, #69bff4)) 24%, transparent));
+      }
+      .handle {
+        position: absolute;
+        z-index: 2;
+        top: 50%;
+        display: grid;
+        width: var(--_handle-size);
+        height: var(--_handle-size);
+        padding: 0;
+        border: var(--hy-range-handle-border-width, 2px) solid var(--hy-range-handle-border-color, var(--hy-accent-color, #69bff4));
+        border-radius: var(--hy-range-handle-radius, 50%);
+        place-items: center;
+        outline: none;
+        color: var(--hy-text-color, #e8effa);
+        background: var(--hy-range-handle-color, var(--hy-surface-elevated-color, #171e2a));
+        box-shadow: var(--hy-range-handle-shadow, 0 2px 8px rgba(0, 0, 0, 0.28));
+        cursor: grab;
+        transform: translate(-50%, -50%);
+        transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
+        box-sizing: border-box;
+      }
+      .handle:hover:not(:disabled) {
+        border-color: var(--hy-range-handle-hover-border-color, var(--hy-accent-strong-color, #88d8ff));
+        transform: translate(-50%, -50%) scale(1.08);
+      }
+      .handle:focus-visible {
+        box-shadow: var(--hy-range-handle-focus-shadow, 0 0 0 4px var(--hy-focus-ring-color, rgba(105, 191, 244, 0.24)));
+      }
+      .handle[data-active="true"] { z-index: 3; cursor: grabbing; }
+      .handle:disabled { cursor: default; }
+      :host(:not([range])) .lower { display: none; }
+      .bubble {
+        position: absolute;
+        bottom: calc(100% + 8px);
+        display: none;
+        min-width: 24px;
+        padding: 3px 6px;
+        border: 1px solid var(--hy-border-color, #303746);
+        border-radius: 4px;
+        pointer-events: none;
+        color: var(--hy-text-color, #e8effa);
+        background: var(--hy-surface-elevated-color, #171e2a);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
+        font: 10px/1.2 ui-monospace, monospace;
+        white-space: nowrap;
+      }
+      :host([show-value]) .bubble { display: block; }
+    `;
+        this._stage.className = 'stage';
+        this._stage.part.add('stage');
+        const rail = document.createElement('div');
+        rail.className = 'rail';
+        rail.part.add('rail');
+        this._track.className = 'track';
+        this._track.part.add('track');
+        this._configureHandle(this._lowerHandle, this._lowerBubble, 'lower');
+        this._configureHandle(this._upperHandle, this._upperBubble, 'upper');
+        this._stage.append(rail, this._track, this._lowerHandle, this._upperHandle);
+        root.append(style, this._stage);
+    }
+    connectedCallback() {
+        if (this._connected)
+            return;
+        this._connected = true;
+        this._stage.addEventListener('pointerdown', this._onPointerDown);
+        this._stage.addEventListener('keydown', this._onKeyDown);
+        this._render();
+    }
+    disconnectedCallback() {
+        if (!this._connected)
+            return;
+        this._connected = false;
+        this._stage.removeEventListener('pointerdown', this._onPointerDown);
+        this._stage.removeEventListener('keydown', this._onKeyDown);
+        this._stopDrag();
+    }
+    attributeChangedCallback() {
+        this._render();
+    }
+    get min() {
+        const value = Number(this.getAttribute('min'));
+        return Number.isFinite(value) ? value : DEFAULT_MIN;
+    }
+    set min(value) { this.setAttribute('min', String(finiteOr(value, DEFAULT_MIN))); }
+    get max() {
+        const value = Number(this.getAttribute('max'));
+        return Number.isFinite(value) && value > this.min ? value : Math.max(DEFAULT_MAX, this.min + DEFAULT_MAX);
+    }
+    set max(value) {
+        const next = finiteOr(value, DEFAULT_MAX);
+        this.setAttribute('max', String(next > this.min ? next : this.min + DEFAULT_MAX));
+    }
+    get step() {
+        const value = Number(this.getAttribute('step'));
+        return Number.isFinite(value) && value > 0 ? value : DEFAULT_STEP;
+    }
+    set step(value) {
+        const next = finiteOr(value, DEFAULT_STEP);
+        this.setAttribute('step', String(next > 0 ? next : DEFAULT_STEP));
+    }
+    get value() { return this._normalize(Number(this.getAttribute('value') ?? this.min)); }
+    set value(value) { this.setAttribute('value', String(this._normalize(value))); }
+    get range() { return this.hasAttribute('range'); }
+    set range(value) { this.toggleAttribute('range', Boolean(value)); }
+    get lowerValue() {
+        return Math.min(this._normalize(Number(this.getAttribute('lower-value') ?? this.min)), this.upperValue);
+    }
+    set lowerValue(value) {
+        this.setAttribute('lower-value', String(Math.min(this._normalize(value), this.upperValue)));
+    }
+    get upperValue() {
+        return Math.max(this._normalize(Number(this.getAttribute('upper-value') ?? this.max)), this._rawLowerValue());
+    }
+    set upperValue(value) {
+        this.setAttribute('upper-value', String(Math.max(this._normalize(value), this.lowerValue)));
+    }
+    get values() { return [this.lowerValue, this.upperValue]; }
+    set values(value) {
+        const lower = this._normalize(Number(value[0]));
+        const upper = this._normalize(Number(value[1]));
+        this.setAttribute('lower-value', String(Math.min(lower, upper)));
+        this.setAttribute('upper-value', String(Math.max(lower, upper)));
+    }
+    get disabled() { return this.hasAttribute('disabled'); }
+    set disabled(value) { this.toggleAttribute('disabled', Boolean(value)); }
+    get showValue() { return this.hasAttribute('show-value'); }
+    set showValue(value) { this.toggleAttribute('show-value', Boolean(value)); }
+    focus(options) {
+        this._upperHandle.focus(options);
+    }
+    _configureHandle(button, bubble, handle) {
+        button.className = `handle ${handle}`;
+        button.type = 'button';
+        button.dataset.handle = handle;
+        button.part.add('handle', `handle-${handle}`);
+        button.setAttribute('role', 'slider');
+        bubble.className = 'bubble';
+        bubble.setAttribute('aria-hidden', 'true');
+        button.append(bubble);
+    }
+    _render() {
+        const lower = this.range ? this.lowerValue : this.min;
+        const upper = this.range ? this.upperValue : this.value;
+        const lowerPercent = this._toPercent(lower);
+        const upperPercent = this._toPercent(upper);
+        this._lowerHandle.style.left = `${lowerPercent}%`;
+        this._upperHandle.style.left = `${upperPercent}%`;
+        this._track.style.left = `${lowerPercent}%`;
+        this._track.style.width = `${Math.max(0, upperPercent - lowerPercent)}%`;
+        this._lowerBubble.textContent = this._formatValue(lower);
+        this._upperBubble.textContent = this._formatValue(upper);
+        const label = this.getAttribute('aria-label');
+        this._syncHandle(this._lowerHandle, lower, label ? `${label} minimum` : 'Lower value');
+        this._syncHandle(this._upperHandle, upper, this._upperHandleLabel(label));
+    }
+    _upperHandleLabel(label) {
+        if (!this.range)
+            return label ?? 'Range value';
+        return label ? `${label} maximum` : 'Upper value';
+    }
+    _syncHandle(handle, value, fallbackLabel) {
+        handle.disabled = this.disabled;
+        handle.setAttribute('aria-orientation', 'horizontal');
+        handle.setAttribute('aria-valuemin', String(handle === this._upperHandle && this.range ? this.lowerValue : this.min));
+        handle.setAttribute('aria-valuemax', String(handle === this._lowerHandle && this.range ? this.upperValue : this.max));
+        handle.setAttribute('aria-valuenow', String(value));
+        handle.setAttribute('aria-valuetext', this._formatValue(value));
+        handle.setAttribute('aria-label', fallbackLabel);
+    }
+    _onPointerDown = (event) => {
+        if (this.disabled || event.button !== 0)
+            return;
+        event.preventDefault();
+        const target = event.target instanceof Element ? event.target.closest('.handle') : null;
+        const pointerValue = this._valueFromClientX(event.clientX);
+        const handle = this._resolvePointerHandle(target?.dataset.handle, pointerValue);
+        this._activeHandle = handle;
+        this._pointerId = event.pointerId;
+        this._dragStartValue = this._serializedValue();
+        this._setActiveHandle(handle, true);
+        (handle === 'lower' ? this._lowerHandle : this._upperHandle).focus();
+        this._setFromPointer(event.clientX, true);
+        this._dragAbort?.abort();
+        this._dragAbort = new AbortController();
+        const { signal } = this._dragAbort;
+        document.addEventListener('pointermove', this._onPointerMove, { signal });
+        document.addEventListener('pointerup', this._onPointerUp, { signal });
+        document.addEventListener('pointercancel', this._onPointerUp, { signal });
+    };
+    _onPointerMove = (event) => {
+        if (event.pointerId !== this._pointerId)
+            return;
+        event.preventDefault();
+        this._setFromPointer(event.clientX, true);
+    };
+    _onPointerUp = (event) => {
+        if (event.pointerId !== this._pointerId)
+            return;
+        const changed = this._dragStartValue !== this._serializedValue();
+        const handle = this._activeHandle;
+        this._stopDrag();
+        if (changed)
+            this._dispatchValueEvent('value-change', handle);
+    };
+    _onKeyDown = (event) => {
+        if (this.disabled || !(event.target instanceof HTMLButtonElement))
+            return;
+        const handle = this._resolveKeyboardHandle(event.target.dataset.handle);
+        const next = this._keyboardValue(event.key, this._valueForHandle(handle));
+        if (next === null)
+            return;
+        event.preventDefault();
+        this._commitValue(next, handle, true);
+        this._dispatchValueEvent('value-change', handle);
+    };
+    _resolvePointerHandle(rawHandle, pointerValue) {
+        if (rawHandle === 'lower')
+            return 'lower';
+        if (rawHandle === 'upper')
+            return this.range ? 'upper' : 'single';
+        return this._nearestHandle(pointerValue);
+    }
+    _resolveKeyboardHandle(rawHandle) {
+        if (rawHandle === 'lower')
+            return 'lower';
+        return this.range ? 'upper' : 'single';
+    }
+    _valueForHandle(handle) {
+        if (handle === 'lower')
+            return this.lowerValue;
+        return this.range ? this.upperValue : this.value;
+    }
+    _keyboardValue(key, current) {
+        if (key === 'ArrowLeft' || key === 'ArrowDown')
+            return current - this.step;
+        if (key === 'ArrowRight' || key === 'ArrowUp')
+            return current + this.step;
+        if (key === 'PageDown')
+            return current - this.step * 10;
+        if (key === 'PageUp')
+            return current + this.step * 10;
+        if (key === 'Home')
+            return this.min;
+        if (key === 'End')
+            return this.max;
+        return null;
+    }
+    _setFromPointer(clientX, emit) {
+        this._commitValue(this._valueFromClientX(clientX), this._activeHandle, emit);
+    }
+    _commitValue(value, handle, emit) {
+        const normalized = this._normalize(value);
+        if (handle === 'lower')
+            this.setAttribute('lower-value', String(Math.min(normalized, this.upperValue)));
+        else if (handle === 'upper')
+            this.setAttribute('upper-value', String(Math.max(normalized, this.lowerValue)));
+        else
+            this.setAttribute('value', String(normalized));
+        if (emit)
+            this._dispatchValueEvent('value-input', handle);
+    }
+    _dispatchValueEvent(type, handle) {
+        const lowerValue = this.range ? this.lowerValue : this.min;
+        const upperValue = this.range ? this.upperValue : this.value;
+        this.dispatchEvent(new CustomEvent(type, {
+            detail: {
+                value: this.range ? [lowerValue, upperValue] : upperValue,
+                lowerValue,
+                upperValue,
+                handle,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _nearestHandle(value) {
+        if (!this.range)
+            return 'single';
+        return Math.abs(value - this.lowerValue) < Math.abs(value - this.upperValue) ? 'lower' : 'upper';
+    }
+    _valueFromClientX(clientX) {
+        const rect = this._stage.getBoundingClientRect();
+        const percent = rect.width > 0 ? (clientX - rect.left) / rect.width : 0;
+        return this._normalize(this.min + Math.max(0, Math.min(1, percent)) * (this.max - this.min));
+    }
+    _normalize(value) {
+        const finite = finiteOr(value, this.min);
+        const clamped = Math.max(this.min, Math.min(this.max, finite));
+        const stepped = this.min + Math.round((clamped - this.min) / this.step) * this.step;
+        return Number(Math.max(this.min, Math.min(this.max, stepped)).toFixed(this._precision()));
+    }
+    _precision() {
+        return Math.min(12, Math.max(numberPrecision(this.min), numberPrecision(this.max), numberPrecision(this.step)));
+    }
+    _rawLowerValue() {
+        return this._normalize(Number(this.getAttribute('lower-value') ?? this.min));
+    }
+    _toPercent(value) {
+        return (value - this.min) / (this.max - this.min) * 100;
+    }
+    _formatValue(value) {
+        return value.toFixed(this._precision());
+    }
+    _serializedValue() {
+        return this.range ? `${this.lowerValue}:${this.upperValue}` : String(this.value);
+    }
+    _setActiveHandle(handle, active) {
+        this._lowerHandle.dataset.active = String(active && handle === 'lower');
+        this._upperHandle.dataset.active = String(active && handle !== 'lower');
+    }
+    _stopDrag() {
+        this._dragAbort?.abort();
+        this._dragAbort = null;
+        this._pointerId = -1;
+        this._setActiveHandle(this._activeHandle, false);
+    }
+}
+function finiteOr(value, fallback) {
+    return Number.isFinite(Number(value)) ? Number(value) : fallback;
+}
+function numberPrecision(value) {
+    const [coefficient = '', exponentText = '0'] = String(value).toLowerCase().split('e');
+    const decimals = coefficient.includes('.') ? coefficient.length - coefficient.indexOf('.') - 1 : 0;
+    return Math.max(0, decimals - Number(exponentText));
+}
+export function defineRangeComponents() {
+    if (!customElements.get('hy-range'))
+        customElements.define('hy-range', HYRange);
+}
+//# sourceMappingURL=range.js.map

package/dist/select.d.ts

@@ -1,13 +1,13 @@
-export interface GESelectOption {
+export interface HYSelectOption {
     label: string;
     value: string;
     disabled?: boolean;
 }
-export interface GESelectChangeDetail {
+export interface HYSelectChangeDetail {
     value: string;
-    option: GESelectOption | null;
+    option: HYSelectOption | null;
 }
-export declare class GESelect extends HTMLElement {
+export declare class HYSelect extends HTMLElement {
     private readonly _wrap;
     private readonly _search;
     private readonly _select;
@@ -18,8 +18,8 @@ export declare class GESelect extends HTMLElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
-    get options(): GESelectOption[];
-    set options(value: GESelectOption[]);
+    get options(): HYSelectOption[];
+    set options(value: HYSelectOption[]);
     get value(): string;
     set value(value: string);
     get disabled(): boolean;

package/dist/select.js

@@ -1,4 +1,4 @@
-export class GESelect extends HTMLElement {
+export class HYSelect extends HTMLElement {
     _wrap = document.createElement('div');
     _search = document.createElement('input');
     _select = document.createElement('select');
@@ -30,20 +30,20 @@ export class GESelect extends HTMLElement {
         height: 28px;
         min-width: 0;
         padding: 0 28px 0 8px;
-        border: 1px solid var(--ge-border-color, #303746);
+        border: 1px solid var(--hy-border-color, #303746);
         border-radius: 4px;
-        color: var(--ge-text-color, #d8e2f2);
-        background-color: var(--ge-input-bg-color, var(--ge-surface-color, #121822));
+        color: var(--hy-text-color, #d8e2f2);
+        background-color: var(--hy-input-bg-color, var(--hy-surface-color, #121822));
         font: 12px system-ui, sans-serif;
         outline: none;
-        color-scheme: dark;
+        color-scheme: inherit;
       }
       select {
         appearance: none;
         cursor: pointer;
         background-image:
-          linear-gradient(45deg, transparent 50%, var(--ge-select-arrow-color, var(--ge-secondary-text-color, #8fa7c8)) 50%),
-          linear-gradient(135deg, var(--ge-select-arrow-color, var(--ge-secondary-text-color, #8fa7c8)) 50%, transparent 50%);
+          linear-gradient(45deg, transparent 50%, var(--hy-select-arrow-color, var(--hy-secondary-text-color, #8fa7c8)) 50%),
+          linear-gradient(135deg, var(--hy-select-arrow-color, var(--hy-secondary-text-color, #8fa7c8)) 50%, transparent 50%);
         background-position:
           calc(100% - 15px) 11px,
           calc(100% - 10px) 11px;
@@ -51,23 +51,23 @@ export class GESelect extends HTMLElement {
         background-repeat: no-repeat;
       }
       select:hover:not(:disabled) {
-        border-color: var(--ge-hover-border-color, #435268);
-        background-color: var(--ge-select-hover-bg-color, var(--ge-input-bg-color, #151d2a));
+        border-color: var(--hy-hover-border-color, #435268);
+        background-color: var(--hy-select-hover-bg-color, var(--hy-input-bg-color, #151d2a));
       }
       option {
         min-height: 28px;
         padding: 6px 8px;
-        color: var(--ge-select-option-text-color, var(--ge-text-color, #d8e2f2));
-        background: var(--ge-select-option-bg-color, var(--ge-menu-bg-color, #1b2230));
+        color: var(--hy-select-option-text-color, var(--hy-text-color, #d8e2f2));
+        background: var(--hy-select-option-bg-color, var(--hy-menu-bg-color, #1b2230));
         font: 12px system-ui, sans-serif;
       }
       option:checked {
-        color: var(--ge-select-option-selected-text-color, var(--ge-selected-text-color, #ffffff));
-        background: var(--ge-select-option-selected-bg-color, var(--ge-selected-bg-color, #255a91));
+        color: var(--hy-select-option-selected-text-color, var(--hy-selected-text-color, #ffffff));
+        background: var(--hy-select-option-selected-bg-color, var(--hy-selected-bg-color, #255a91));
       }
       option:disabled {
-        color: var(--ge-disabled-text-color, #65738a);
-        background: var(--ge-select-option-bg-color, var(--ge-menu-bg-color, #1b2230));
+        color: var(--hy-disabled-text-color, #65738a);
+        background: var(--hy-select-option-bg-color, var(--hy-menu-bg-color, #1b2230));
       }
       input {
         display: none;
@@ -77,8 +77,8 @@ export class GESelect extends HTMLElement {
       }
       input:focus,
       select: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:disabled,
       select:disabled {
@@ -184,7 +184,7 @@ export class GESelect extends HTMLElement {
                 : [];
         }
         catch (error) {
-            console.warn('Invalid ge-select options attribute.', error);
+            console.warn('Invalid hy-select options attribute.', error);
         }
     }
     _render() {
@@ -246,8 +246,8 @@ export class GESelect extends HTMLElement {
     };
 }
 export function defineSelectComponents() {
-    if (!customElements.get('ge-select')) {
-        customElements.define('ge-select', GESelect);
+    if (!customElements.get('hy-select')) {
+        customElements.define('hy-select', HYSelect);
     }
 }
 //# sourceMappingURL=select.js.map

package/dist/split.d.ts

@@ -1,9 +1,9 @@
-export type GESplitDirection = 'horizontal' | 'vertical';
-export interface GESplitRatioChangeDetail {
+export type HYSplitDirection = 'horizontal' | 'vertical';
+export interface HYSplitRatioChangeDetail {
     ratio: number;
-    direction: GESplitDirection;
+    direction: HYSplitDirection;
 }
-export declare class GESplit extends HTMLElement {
+export declare class HYSplit extends HTMLElement {
     private readonly _style;
     private readonly _first;
     private readonly _second;
@@ -17,8 +17,8 @@ export declare class GESplit extends HTMLElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(): void;
-    get direction(): GESplitDirection;
-    set direction(value: GESplitDirection);
+    get direction(): HYSplitDirection;
+    set direction(value: HYSplitDirection);
     get ratio(): number;
     set ratio(value: number);
     get minFirst(): number;

package/dist/split.js

@@ -1,5 +1,5 @@
 const DEFAULT_BAR_SIZE = 6;
-export class GESplit extends HTMLElement {
+export class HYSplit extends HTMLElement {
     _style = document.createElement('style');
     _first = document.createElement('div');
     _second = document.createElement('div');
@@ -23,28 +23,28 @@ export class GESplit extends HTMLElement {
         min-width: 0;
         min-height: 0;
         overflow: hidden;
-        color: var(--ge-split-text-color, var(--ge-text-color, #d8e2f2));
-        background: var(--ge-split-bg-color, var(--ge-surface-color, #121822));
+        color: var(--hy-split-text-color, var(--hy-text-color, #d8e2f2));
+        background: var(--hy-split-bg-color, var(--hy-surface-color, #121822));
       }
       .pane {
         min-width: 0;
         min-height: 0;
         overflow: auto;
-        background: var(--ge-split-pane-bg-color, transparent);
+        background: var(--hy-split-pane-bg-color, transparent);
       }
       .bar {
-        background: var(--ge-split-bar-color, var(--ge-border-strong-color, #273142));
+        background: var(--hy-split-bar-color, var(--hy-border-strong-color, #273142));
         position: relative;
         z-index: 1;
-        transition: background var(--ge-split-bar-transition-duration, 0.12s) ease;
+        transition: background var(--hy-split-bar-transition-duration, 0.12s) ease;
       }
       .bar:focus {
-        outline: var(--ge-split-focus-ring-width, 1px) solid var(--ge-split-focus-ring-color, var(--ge-focus-border-color, var(--ge-accent-color, #3d6fa8)));
+        outline: var(--hy-split-focus-ring-width, 1px) solid var(--hy-split-focus-ring-color, var(--hy-focus-border-color, var(--hy-accent-color, #3d6fa8)));
         outline-offset: -1px;
       }
       .bar:hover,
       .bar.dragging {
-        background: var(--ge-split-bar-active-color, var(--ge-accent-color, #3d6fa8));
+        background: var(--hy-split-bar-active-color, var(--hy-accent-color, #3d6fa8));
       }
       :host([direction="vertical"]) .bar {
         cursor: row-resize;
@@ -57,16 +57,16 @@ export class GESplit extends HTMLElement {
         position: absolute;
         left: 0;
         right: 0;
-        top: calc(var(--ge-split-bar-hit-outset, 3px) * -1);
-        bottom: calc(var(--ge-split-bar-hit-outset, 3px) * -1);
+        top: calc(var(--hy-split-bar-hit-outset, 3px) * -1);
+        bottom: calc(var(--hy-split-bar-hit-outset, 3px) * -1);
       }
       :host(:not([direction="vertical"])) .bar::before {
         content: "";
         position: absolute;
         top: 0;
         bottom: 0;
-        left: calc(var(--ge-split-bar-hit-outset, 3px) * -1);
-        right: calc(var(--ge-split-bar-hit-outset, 3px) * -1);
+        left: calc(var(--hy-split-bar-hit-outset, 3px) * -1);
+        right: calc(var(--hy-split-bar-hit-outset, 3px) * -1);
       }
     `;
         this._first.className = 'pane first';
@@ -270,8 +270,8 @@ export class GESplit extends HTMLElement {
     }
 }
 export function defineSplitComponents() {
-    if (!customElements.get('ge-split')) {
-        customElements.define('ge-split', GESplit);
+    if (!customElements.get('hy-split')) {
+        customElements.define('hy-split', HYSplit);
     }
 }
 //# sourceMappingURL=split.js.map

package/dist/tabs.d.ts

@@ -1,28 +1,32 @@
-export interface GETabOption {
+export interface HYTabOption {
     label: string;
     value: string;
     disabled?: boolean;
 }
-export interface GETabChangeDetail {
+export interface HYTabChangeDetail {
     value: string;
-    option: GETabOption | null;
+    option: HYTabOption | null;
 }
-export declare class GETabs extends HTMLElement {
+export declare class HYTabs extends HTMLElement {
     private readonly _style;
     private readonly _tabs;
     private readonly _panels;
+    private readonly _instanceId;
     private _options;
+    private _pendingFocusValue;
     static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;
     attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null): void;
-    get options(): GETabOption[];
-    set options(value: GETabOption[]);
+    get options(): HYTabOption[];
+    set options(value: HYTabOption[]);
     get value(): string;
     set value(value: string);
     private _syncFromAttributes;
     private _readOptionsAttribute;
     private _render;
+    private _focusTab;
+    private _resolveValue;
     private _select;
 }
 export declare function defineTabsComponents(): void;