@easemate/web-kit 0.1.0

package/build/elements/radio/option.js

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,66 @@
+"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

@@ -0,0 +1,40 @@
+/**
+ * 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

@@ -0,0 +1,40 @@
+/**
+ * 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

@@ -0,0 +1,59 @@
+/** 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

@@ -0,0 +1,232 @@
+"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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,20 @@
+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;
+}