@easemate/web-kit 0.1.5 → 0.3.0

package/build/elements/radio/option.js

@@ -1,11 +0,0 @@
-export class RadioOption extends HTMLElement {
-    connectedCallback() {
-        this.hidden = true;
-        if (!this.hasAttribute('slot')) {
-            this.setAttribute('slot', 'option');
-        }
-    }
-}
-if (!customElements.get('radio-option')) {
-    customElements.define('radio-option', RadioOption);
-}

package/build/elements/shared.cjs

@@ -1,66 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.readControlValue = exports.coerceNumber = exports.setBooleanAttribute = exports.dispatchControlEvent = exports.CONTROL_CHANGE_EVENT = void 0;
-/** The standard event type for control value changes */
-exports.CONTROL_CHANGE_EVENT = 'control-change';
-/**
- * Dispatch a control change event with standard shape.
- * Events bubble and are composed (cross shadow DOM boundaries).
- *
- * @param host - The element dispatching the event
- * @param type - Event type (prefer CONTROL_CHANGE_EVENT for standard controls)
- * @param detail - Event detail with value and optional name
- *
- * @example
- * ```ts
- * dispatchControlEvent(this, CONTROL_CHANGE_EVENT, {
- *   name: this.name,
- *   value: this.value,
- *   event: e
- * });
- * ```
- */
-const dispatchControlEvent = (host, type, detail) => {
-    host.dispatchEvent(new CustomEvent(type, {
-        detail,
-        bubbles: true,
-        composed: true
-    }));
-};
-exports.dispatchControlEvent = dispatchControlEvent;
-const setBooleanAttribute = (element, name, value) => {
-    if (!element) {
-        return;
-    }
-    if (value) {
-        element.setAttribute(name, '');
-    }
-    else {
-        element.removeAttribute(name);
-    }
-};
-exports.setBooleanAttribute = setBooleanAttribute;
-const coerceNumber = (value) => {
-    if (value === '') {
-        return null;
-    }
-    const parsed = Number(value);
-    return Number.isNaN(parsed) ? null : parsed;
-};
-exports.coerceNumber = coerceNumber;
-const readControlValue = (element) => {
-    if (typeof element.value === 'string' || typeof element.value === 'number') {
-        return String(element.value);
-    }
-    if (typeof element.checked === 'boolean') {
-        return element.checked ? 'true' : 'false';
-    }
-    if ('getAttribute' in element) {
-        const attr = element.getAttribute('value');
-        if (attr !== null) {
-            return attr;
-        }
-    }
-    return element.textContent?.trim() ?? null;
-};
-exports.readControlValue = readControlValue;

package/build/elements/shared.d.cts

@@ -1,40 +0,0 @@
-/**
- * Standard control event detail interface for Leva/lil-gui style state aggregation.
- * All control components should dispatch events with this shape.
- */
-export interface ControlEventDetail<TValue = unknown> {
-    /** The control's name/identifier for state aggregation */
-    name?: string;
-    /** The current value of the control */
-    value: TValue;
-    /** The original DOM event that triggered this change */
-    event: Event;
-}
-/** The standard event type for control value changes */
-export declare const CONTROL_CHANGE_EVENT = "control-change";
-/**
- * Dispatch a control change event with standard shape.
- * Events bubble and are composed (cross shadow DOM boundaries).
- *
- * @param host - The element dispatching the event
- * @param type - Event type (prefer CONTROL_CHANGE_EVENT for standard controls)
- * @param detail - Event detail with value and optional name
- *
- * @example
- * ```ts
- * dispatchControlEvent(this, CONTROL_CHANGE_EVENT, {
- *   name: this.name,
- *   value: this.value,
- *   event: e
- * });
- * ```
- */
-export declare const dispatchControlEvent: <THost extends HTMLElement, TValue>(host: THost, type: string, detail: ControlEventDetail<TValue>) => void;
-export declare const setBooleanAttribute: (element: Element | null | undefined, name: string, value: boolean) => void;
-export declare const coerceNumber: (value: string) => number | null;
-type ControlElement = Element & {
-    value?: unknown;
-    checked?: unknown;
-};
-export declare const readControlValue: (element: ControlElement) => string | null;
-export {};

package/build/elements/shared.d.ts

@@ -1,40 +0,0 @@
-/**
- * Standard control event detail interface for Leva/lil-gui style state aggregation.
- * All control components should dispatch events with this shape.
- */
-export interface ControlEventDetail<TValue = unknown> {
-    /** The control's name/identifier for state aggregation */
-    name?: string;
-    /** The current value of the control */
-    value: TValue;
-    /** The original DOM event that triggered this change */
-    event: Event;
-}
-/** The standard event type for control value changes */
-export declare const CONTROL_CHANGE_EVENT = "control-change";
-/**
- * Dispatch a control change event with standard shape.
- * Events bubble and are composed (cross shadow DOM boundaries).
- *
- * @param host - The element dispatching the event
- * @param type - Event type (prefer CONTROL_CHANGE_EVENT for standard controls)
- * @param detail - Event detail with value and optional name
- *
- * @example
- * ```ts
- * dispatchControlEvent(this, CONTROL_CHANGE_EVENT, {
- *   name: this.name,
- *   value: this.value,
- *   event: e
- * });
- * ```
- */
-export declare const dispatchControlEvent: <THost extends HTMLElement, TValue>(host: THost, type: string, detail: ControlEventDetail<TValue>) => void;
-export declare const setBooleanAttribute: (element: Element | null | undefined, name: string, value: boolean) => void;
-export declare const coerceNumber: (value: string) => number | null;
-type ControlElement = Element & {
-    value?: unknown;
-    checked?: unknown;
-};
-export declare const readControlValue: (element: ControlElement) => string | null;
-export {};

package/build/elements/shared.js

@@ -1,59 +0,0 @@
-/** The standard event type for control value changes */
-export const CONTROL_CHANGE_EVENT = 'control-change';
-/**
- * Dispatch a control change event with standard shape.
- * Events bubble and are composed (cross shadow DOM boundaries).
- *
- * @param host - The element dispatching the event
- * @param type - Event type (prefer CONTROL_CHANGE_EVENT for standard controls)
- * @param detail - Event detail with value and optional name
- *
- * @example
- * ```ts
- * dispatchControlEvent(this, CONTROL_CHANGE_EVENT, {
- *   name: this.name,
- *   value: this.value,
- *   event: e
- * });
- * ```
- */
-export const dispatchControlEvent = (host, type, detail) => {
-    host.dispatchEvent(new CustomEvent(type, {
-        detail,
-        bubbles: true,
-        composed: true
-    }));
-};
-export const setBooleanAttribute = (element, name, value) => {
-    if (!element) {
-        return;
-    }
-    if (value) {
-        element.setAttribute(name, '');
-    }
-    else {
-        element.removeAttribute(name);
-    }
-};
-export const coerceNumber = (value) => {
-    if (value === '') {
-        return null;
-    }
-    const parsed = Number(value);
-    return Number.isNaN(parsed) ? null : parsed;
-};
-export const readControlValue = (element) => {
-    if (typeof element.value === 'string' || typeof element.value === 'number') {
-        return String(element.value);
-    }
-    if (typeof element.checked === 'boolean') {
-        return element.checked ? 'true' : 'false';
-    }
-    if ('getAttribute' in element) {
-        const attr = element.getAttribute('value');
-        if (attr !== null) {
-            return attr;
-        }
-    }
-    return element.textContent?.trim() ?? null;
-};

package/build/elements/slider/index.cjs

@@ -1,232 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Slider = void 0;
-require("../input/index.cjs");
-const lit_html_1 = require("lit-html");
-const shared_1 = require("../shared.cjs");
-const Component_1 = require("../../decorators/Component");
-const Listen_1 = require("../../decorators/Listen");
-const Prop_1 = require("../../decorators/Prop");
-const Query_1 = require("../../decorators/Query");
-@(0, Component_1.Component)({
-    tag: 'ease-slider',
-    styles: `
-    :host {
-      display: contents;
-      --track-color: var(--ease-slider-track-color, var(--color-gray-825));
-      --active-track-color: var(--ease-slider-active-track-color, var(--color-blue-1100));
-      --thumb-color: var(--ease-slider-thumb-color, var(--color-blue-900));
-      --thumb-size: var(--ease-slider-thumb-size, 18px);
-      --track-height: var(--ease-slider-track-height, 4px);
-    }
-
-    [part="container"] {
-      flex: 1;
-      display: grid;
-      grid-template-columns: auto var(--ease-slider-value-width, 36px);
-      grid-gap: var(--ease-slider-gap, 12px);
-    }
-
-    ease-input[part="value"] {
-      --ease-input-padding: 8px 0;
-      min-width: 0;
-      text-align: center;
-      width: var(--ease-slider-value-width, 36px);
-      font-variant-numeric: tabular-nums;
-      font-feature-settings: "tnum";
-      font-family: var(--ease-font-mono, 'Geist Mono', monospace);
-    }
-
-    input[part="control"][type="range"] {
-      height: var(--ease-slider-height, 30px);
-      margin: 0;
-      padding: 0;
-      appearance: none;
-      background-color: transparent;
-      width: 100%;
-      cursor: pointer;
-    }
-
-    input[part="control"][type="range"]::-webkit-slider-runnable-track {
-      width: 100%;
-      height: var(--track-height);
-      background: linear-gradient(to right, var(--active-track-color) var(--progress, 0%), var(--track-color) var(--progress, 0%));
-      border-radius: calc(var(--track-height) / 2);
-      border: none;
-    }
-
-    input[part="control"][type="range"]::-moz-range-track {
-      width: 100%;
-      height: var(--track-height);
-      background: var(--track-color);
-      border-radius: calc(var(--track-height) / 2);
-      border: none;
-    }
-
-    input[part="control"][type="range"]::-moz-range-progress {
-      background-color: var(--active-track-color);
-      height: var(--track-height);
-      border-radius: calc(var(--track-height) / 2);
-    }
-
-    input[part="control"][type="range"]::-webkit-slider-thumb {
-      appearance: none;
-      height: var(--thumb-size);
-      width: var(--thumb-size);
-      border-radius: 50%;
-      margin-top: calc((var(--track-height) - var(--thumb-size)) / 2);
-      box-shadow: inset 0 0 0 .75px var(--color-white-15), inset 0 0 5px var(--color-white-20);
-      transition: transform 0.2s;
-      position: relative;
-      background: radial-gradient(circle at center, var(--color-blue-100-50) 4.5px, var(--color-white-0) 4.5px),  var(--thumb-color) no-repeat center center;
-    }
-    
-    input[part="control"][type="range"]:hover::-webkit-slider-thumb {
-        transform: scale(1.075);
-    }
-    
-    input[part="control"][type="range"]:active::-webkit-slider-thumb {
-        transform: scale(.975);
-    }
-
-    input[part="control"][type="range"]::-moz-range-thumb {
-      height: var(--thumb-size);
-      width: var(--thumb-size);
-      border-radius: 50%;
-      background: radial-gradient(circle at center, var(--color-blue-100-50) 4.5px, var(--color-white-0) 4.5px),  var(--thumb-color) no-repeat center center;
-      border: none;
-      box-shadow: inset 0 0 0 .75px var(--color-white-15), inset 0 0 5px var(--color-white-20);
-      transition: transform 0.2s;
-      position: relative;
-    }
-
-    input[part="control"][type="range"]:hover::-moz-range-thumb {
-        transform: scale(1.075);
-    }
-
-    input[part="control"][type="range"]:active::-moz-range-thumb {
-        transform: scale(.975);
-    }
-  `,
-    template() {
-        return (0, lit_html_1.html) `
-      <div part="container">
-        <input
-          part="control"
-          type="range"
-          .min=${this.min ?? 0}
-          .max=${this.max ?? 100}
-          .step=${this.step ?? 1}
-          .value=${String(this.value ?? 0)}
-          ?disabled=${this.disabled}
-          ?aria-disabled=${this.disabled}
-        />
-        
-        <ease-input
-          part="value"
-          type="number"
-          placeholder="-"
-          .disabled=${Boolean(this.disabled)}
-          .value=${this.value === null || this.value === undefined ? '' : String(this.value)}
-        />
-      </div>
-    `;
-    }
-})
-class Slider extends HTMLElement {
-    @(0, Prop_1.Prop)({ type: Number, reflect: true })
-    accessor value;
-    @(0, Prop_1.Prop)({ type: Number, reflect: true })
-    accessor min;
-    @(0, Prop_1.Prop)({ type: Number, reflect: true })
-    accessor max;
-    @(0, Prop_1.Prop)({ type: Number, reflect: true })
-    accessor step;
-    @(0, Prop_1.Prop)({ type: Boolean, reflect: true })
-    accessor disabled;
-    @(0, Query_1.Query)('input')
-    accessor control;
-    @(0, Query_1.Query)('ease-input')
-    accessor valueControl;
-    afterRender() {
-        if (!this.control) {
-            return;
-        }
-        const control = this.control;
-        const value = this.value ?? 0;
-        control.value = String(value);
-        control.min = this.min === null || this.min === undefined ? '' : String(this.min);
-        control.max = this.max === null || this.max === undefined ? '' : String(this.max);
-        control.step = this.step === null || this.step === undefined ? '' : String(this.step);
-        control.type = 'range';
-        control.setAttribute('part', 'control');
-        control.disabled = Boolean(this.disabled);
-        (0, shared_1.setBooleanAttribute)(this, 'disabled', Boolean(this.disabled));
-        this.updateProgress();
-    }
-    @(0, Listen_1.Listen)('input', { selector: 'input[type="range"]' })
-    handleRangeInput(event, target) {
-        if (!target) {
-            return;
-        }
-        const numericValue = (0, shared_1.coerceNumber)(target.value);
-        this.value = numericValue;
-        this.updateProgress();
-        if (this.valueControl) {
-            this.valueControl.value = numericValue === null ? '' : String(numericValue);
-        }
-        (0, shared_1.dispatchControlEvent)(this, 'input', { value: this.value, event });
-    }
-    @(0, Listen_1.Listen)('change', { selector: 'input[type="range"]' })
-    handleRangeChange(event, target) {
-        if (target) {
-            const numericValue = (0, shared_1.coerceNumber)(target.value);
-            this.value = numericValue;
-            this.updateProgress();
-            if (this.valueControl) {
-                this.valueControl.value = numericValue === null ? '' : String(numericValue);
-            }
-        }
-        (0, shared_1.dispatchControlEvent)(this, 'change', { value: this.value, event });
-    }
-    @(0, Listen_1.Listen)('input', {
-        selector: 'ease-input',
-        when: (event) => event instanceof CustomEvent && typeof event.detail?.value === 'string'
-    })
-    handleValueInput(event) {
-        const rawValue = event.detail?.value ?? '';
-        const numericValue = (0, shared_1.coerceNumber)(rawValue);
-        this.value = numericValue;
-        this.updateProgress();
-        if (this.control) {
-            this.control.value = String(numericValue ?? 0);
-        }
-        (0, shared_1.dispatchControlEvent)(this, 'input', { value: this.value, event: event.detail?.event ?? event });
-    }
-    @(0, Listen_1.Listen)('change', {
-        selector: 'ease-input',
-        when: (event) => event instanceof CustomEvent && typeof event.detail?.value === 'string'
-    })
-    handleValueChange(event) {
-        const rawValue = event.detail?.value ?? '';
-        const numericValue = (0, shared_1.coerceNumber)(rawValue);
-        this.value = numericValue;
-        this.updateProgress();
-        if (this.control) {
-            this.control.value = String(numericValue ?? 0);
-        }
-        (0, shared_1.dispatchControlEvent)(this, 'change', { value: this.value, event: event.detail?.event ?? event });
-    }
-    updateProgress() {
-        if (!this.control) {
-            return;
-        }
-        // Ensure numeric coercion for proper calculation
-        const value = Number(this.value) || 0;
-        const min = Number(this.min) || 0;
-        const max = Number(this.max) || 100;
-        const percent = max === min ? 0 : ((value - min) / (max - min)) * 100;
-        this.control.style.setProperty('--progress', `${Math.max(0, Math.min(100, percent))}%`);
-    }
-}
-exports.Slider = Slider;

package/build/elements/slider/index.d.cts

@@ -1,20 +0,0 @@
-import "../input/index.cjs";
-import { type ControlEventDetail } from "../shared.cjs";
-export declare class Slider extends HTMLElement {
-    requestRender: () => void;
-    accessor value: number | null;
-    accessor min: number | null;
-    accessor max: number | null;
-    accessor step: number | null;
-    accessor disabled: boolean;
-    accessor control: HTMLInputElement | null;
-    accessor valueControl: (HTMLElement & {
-        value?: string | null;
-    }) | null;
-    afterRender(): void;
-    handleRangeInput(event: Event, target?: HTMLInputElement | null): void;
-    handleRangeChange(event: Event, target?: HTMLInputElement | null): void;
-    handleValueInput(event: CustomEvent<ControlEventDetail<string>>): void;
-    handleValueChange(event: CustomEvent<ControlEventDetail<string>>): void;
-    updateProgress(): void;
-}

package/build/elements/slider/index.d.ts

@@ -1,20 +0,0 @@
-import "../input/index.js";
-import { type ControlEventDetail } from "../shared.js";
-export declare class Slider extends HTMLElement {
-    requestRender: () => void;
-    accessor value: number | null;
-    accessor min: number | null;
-    accessor max: number | null;
-    accessor step: number | null;
-    accessor disabled: boolean;
-    accessor control: HTMLInputElement | null;
-    accessor valueControl: (HTMLElement & {
-        value?: string | null;
-    }) | null;
-    afterRender(): void;
-    handleRangeInput(event: Event, target?: HTMLInputElement | null): void;
-    handleRangeChange(event: Event, target?: HTMLInputElement | null): void;
-    handleValueInput(event: CustomEvent<ControlEventDetail<string>>): void;
-    handleValueChange(event: CustomEvent<ControlEventDetail<string>>): void;
-    updateProgress(): void;
-}