@easemate/web-kit 0.2.0 → 0.3.0

package/build/elements/state/index.cjs

@@ -1,274 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.State = void 0;
-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");
-const readControlValue = (element) => {
-    if (typeof element.value === 'string' || typeof element.value === 'number') {
-        return element.value;
-    }
-    if (typeof element.checked === 'boolean') {
-        return element.checked;
-    }
-    if ('getAttribute' in element) {
-        const attr = element.getAttribute('value');
-        if (attr !== null) {
-            return attr;
-        }
-    }
-    return element.textContent?.trim() ?? null;
-};
-const getControlName = (element) => {
-    if (typeof element.name === 'string' && element.name) {
-        return element.name;
-    }
-    return element.getAttribute?.('name') ?? null;
-};
-/**
- * State aggregator component - collects and manages state from child controls.
- *
- * This component provides state management without any visual styling.
- * Use it standalone or wrap it with `<ease-panel>` for a styled container.
- *
- * @tag ease-state
- *
- * @slot - Default slot for controls
- *
- * @fires state-change - Fired when any control value changes
- *
- * @example
- * ```html
- * <!-- Standalone usage (no panel) -->
- * <ease-state>
- *   <ease-field label="Duration">
- *     <ease-slider name="duration" value="1" min="0" max="5"></ease-slider>
- *   </ease-field>
- *   <ease-field label="Loop">
- *     <ease-toggle name="loop"></ease-toggle>
- *   </ease-field>
- * </ease-state>
- *
- * <!-- With panel wrapper -->
- * <ease-panel>
- *   <span slot="headline">Animation Controls</span>
- *   <ease-state>
- *     <ease-field label="Duration">
- *       <ease-slider name="duration" value="1" min="0" max="5"></ease-slider>
- *     </ease-field>
- *   </ease-state>
- * </ease-panel>
- * ```
- */
-@(0, Component_1.Component)({
-    tag: 'ease-state',
-    shadowMode: 'open',
-    styles: `
-    :host {
-      display: contents;
-    }
-
-    [part="container"] {
-      display: grid;
-      gap: var(--ease-state-gap, 12px);
-      box-sizing: border-box;
-      width: 100%;
-    }
-  `
-})
-class State extends HTMLElement {
-    #controls = new Map();
-    #state = {};
-    #initialState = {};
-    #subscribers = new Map();
-    @(0, Prop_1.Prop)({ reflect: true })
-    accessor value;
-    @(0, Query_1.Query)('slot')
-    accessor defaultSlot;
-    /**
-     * Get the current state object with all control values
-     */
-    get state() {
-        return { ...this.#state };
-    }
-    /**
-     * Get a specific control value by name
-     * @param name - The control name
-     * @returns The control value or undefined
-     */
-    get(name) {
-        return this.#state[name];
-    }
-    /**
-     * Set a control value programmatically
-     * @param name - The control name
-     * @param value - The new value
-     */
-    set(name, value) {
-        const control = this.#controls.get(name);
-        if (control) {
-            // Update the control element
-            if ('value' in control) {
-                control.value = value;
-            }
-            else if (typeof value === 'boolean' && 'checked' in control) {
-                control.checked = value;
-            }
-        }
-        this.#updateState(name, value, new Event('programmatic'));
-    }
-    subscribe(nameOrCallback, callback) {
-        let name;
-        let cb;
-        if (typeof nameOrCallback === 'function') {
-            name = '*';
-            cb = nameOrCallback;
-        }
-        else {
-            name = nameOrCallback;
-            if (!callback) {
-                throw new Error('[ease-state] subscribe(name, callback) requires a callback');
-            }
-            cb = callback;
-        }
-        if (!this.#subscribers.has(name)) {
-            this.#subscribers.set(name, new Set());
-        }
-        this.#subscribers.get(name)?.add(cb);
-        return {
-            unsubscribe: () => {
-                this.#subscribers.get(name)?.delete(cb);
-            }
-        };
-    }
-    /**
-     * Reset all controls to their initial values
-     */
-    reset() {
-        for (const [name, value] of Object.entries(this.#initialState)) {
-            this.set(name, value);
-        }
-    }
-    connectedCallback() {
-        this.#attach();
-        this.defaultSlot?.addEventListener('slotchange', this.#handleSlotChange);
-    }
-    disconnectedCallback() {
-        this.#detach();
-        this.defaultSlot?.removeEventListener('slotchange', this.#handleSlotChange);
-    }
-    render() {
-        return (0, lit_html_1.html) `
-      <div part="container">
-        <slot></slot>
-      </div>
-    `;
-    }
-    @(0, Listen_1.Listen)('input', { target: (host) => host })
-    handleInternalInput(event) {
-        this.#handleControlEvent(event);
-    }
-    @(0, Listen_1.Listen)('change', { target: (host) => host })
-    handleInternalChange(event) {
-        this.#handleControlEvent(event);
-    }
-    @(0, Listen_1.Listen)(shared_1.CONTROL_CHANGE_EVENT, { target: (host) => host })
-    handleControlChange(event) {
-        this.#handleControlEvent(event);
-    }
-    #handleControlEvent(event) {
-        if ('detail' in event && event.detail?.name) {
-            this.#updateState(event.detail.name, event.detail.value, event);
-            return;
-        }
-        if (!(event.target instanceof Element)) {
-            return;
-        }
-        const control = event.target;
-        const name = getControlName(control);
-        if (!name || !this.#controls.has(name)) {
-            return;
-        }
-        const value = readControlValue(control);
-        this.#updateState(name, value, event);
-    }
-    #handleSlotChange = () => {
-        this.#detach();
-        this.#attach();
-    };
-    #attach() {
-        const slot = this.defaultSlot;
-        if (!slot) {
-            return;
-        }
-        const findControls = (el) => {
-            const controls = [];
-            const name = getControlName(el);
-            if (name) {
-                controls.push(el);
-            }
-            if (el.shadowRoot) {
-                for (const child of el.shadowRoot.querySelectorAll('[name]')) {
-                    const childName = getControlName(child);
-                    if (childName) {
-                        controls.push(child);
-                    }
-                }
-            }
-            for (const child of el.querySelectorAll('[name]')) {
-                const childName = getControlName(child);
-                if (childName) {
-                    controls.push(child);
-                }
-            }
-            return controls;
-        };
-        this.#controls.clear();
-        this.#state = {};
-        const elements = slot.assignedElements({ flatten: true });
-        for (const element of elements) {
-            const controls = findControls(element);
-            for (const control of controls) {
-                const name = getControlName(control);
-                if (name) {
-                    this.#controls.set(name, control);
-                    const value = readControlValue(control);
-                    this.#state[name] = value;
-                    this.#initialState[name] = value;
-                }
-            }
-        }
-        const first = this.#controls.values().next().value;
-        if (first) {
-            const name = getControlName(first);
-            this.value = name && this.#state[name] != null ? String(this.#state[name]) : null;
-        }
-    }
-    #detach() {
-        this.#controls.clear();
-    }
-    #updateState(name, value, event) {
-        const prevValue = this.#state[name];
-        if (prevValue === value) {
-            return;
-        }
-        this.#state[name] = value;
-        this.value = String(value);
-        for (const cb of this.#subscribers.get(name) ?? []) {
-            cb(value, name);
-        }
-        for (const cb of this.#subscribers.get('*') ?? []) {
-            cb(value, name);
-        }
-        (0, shared_1.dispatchControlEvent)(this, 'state-change', {
-            name,
-            value,
-            state: this.state,
-            event
-        });
-    }
-}
-exports.State = State;

package/build/elements/state/index.js

@@ -1,270 +0,0 @@
-import { html } from 'lit-html';
-import { CONTROL_CHANGE_EVENT, dispatchControlEvent } from "../shared.js";
-import { Component } from '../../decorators/Component';
-import { Listen } from '../../decorators/Listen';
-import { Prop } from '../../decorators/Prop';
-import { Query } from '../../decorators/Query';
-const readControlValue = (element) => {
-    if (typeof element.value === 'string' || typeof element.value === 'number') {
-        return element.value;
-    }
-    if (typeof element.checked === 'boolean') {
-        return element.checked;
-    }
-    if ('getAttribute' in element) {
-        const attr = element.getAttribute('value');
-        if (attr !== null) {
-            return attr;
-        }
-    }
-    return element.textContent?.trim() ?? null;
-};
-const getControlName = (element) => {
-    if (typeof element.name === 'string' && element.name) {
-        return element.name;
-    }
-    return element.getAttribute?.('name') ?? null;
-};
-/**
- * State aggregator component - collects and manages state from child controls.
- *
- * This component provides state management without any visual styling.
- * Use it standalone or wrap it with `<ease-panel>` for a styled container.
- *
- * @tag ease-state
- *
- * @slot - Default slot for controls
- *
- * @fires state-change - Fired when any control value changes
- *
- * @example
- * ```html
- * <!-- Standalone usage (no panel) -->
- * <ease-state>
- *   <ease-field label="Duration">
- *     <ease-slider name="duration" value="1" min="0" max="5"></ease-slider>
- *   </ease-field>
- *   <ease-field label="Loop">
- *     <ease-toggle name="loop"></ease-toggle>
- *   </ease-field>
- * </ease-state>
- *
- * <!-- With panel wrapper -->
- * <ease-panel>
- *   <span slot="headline">Animation Controls</span>
- *   <ease-state>
- *     <ease-field label="Duration">
- *       <ease-slider name="duration" value="1" min="0" max="5"></ease-slider>
- *     </ease-field>
- *   </ease-state>
- * </ease-panel>
- * ```
- */
-@Component({
-    tag: 'ease-state',
-    shadowMode: 'open',
-    styles: `
-    :host {
-      display: contents;
-    }
-
-    [part="container"] {
-      display: grid;
-      gap: var(--ease-state-gap, 12px);
-      box-sizing: border-box;
-      width: 100%;
-    }
-  `
-})
-export class State extends HTMLElement {
-    #controls = new Map();
-    #state = {};
-    #initialState = {};
-    #subscribers = new Map();
-    @Prop({ reflect: true })
-    accessor value;
-    @Query('slot')
-    accessor defaultSlot;
-    /**
-     * Get the current state object with all control values
-     */
-    get state() {
-        return { ...this.#state };
-    }
-    /**
-     * Get a specific control value by name
-     * @param name - The control name
-     * @returns The control value or undefined
-     */
-    get(name) {
-        return this.#state[name];
-    }
-    /**
-     * Set a control value programmatically
-     * @param name - The control name
-     * @param value - The new value
-     */
-    set(name, value) {
-        const control = this.#controls.get(name);
-        if (control) {
-            // Update the control element
-            if ('value' in control) {
-                control.value = value;
-            }
-            else if (typeof value === 'boolean' && 'checked' in control) {
-                control.checked = value;
-            }
-        }
-        this.#updateState(name, value, new Event('programmatic'));
-    }
-    subscribe(nameOrCallback, callback) {
-        let name;
-        let cb;
-        if (typeof nameOrCallback === 'function') {
-            name = '*';
-            cb = nameOrCallback;
-        }
-        else {
-            name = nameOrCallback;
-            if (!callback) {
-                throw new Error('[ease-state] subscribe(name, callback) requires a callback');
-            }
-            cb = callback;
-        }
-        if (!this.#subscribers.has(name)) {
-            this.#subscribers.set(name, new Set());
-        }
-        this.#subscribers.get(name)?.add(cb);
-        return {
-            unsubscribe: () => {
-                this.#subscribers.get(name)?.delete(cb);
-            }
-        };
-    }
-    /**
-     * Reset all controls to their initial values
-     */
-    reset() {
-        for (const [name, value] of Object.entries(this.#initialState)) {
-            this.set(name, value);
-        }
-    }
-    connectedCallback() {
-        this.#attach();
-        this.defaultSlot?.addEventListener('slotchange', this.#handleSlotChange);
-    }
-    disconnectedCallback() {
-        this.#detach();
-        this.defaultSlot?.removeEventListener('slotchange', this.#handleSlotChange);
-    }
-    render() {
-        return html `
-      <div part="container">
-        <slot></slot>
-      </div>
-    `;
-    }
-    @Listen('input', { target: (host) => host })
-    handleInternalInput(event) {
-        this.#handleControlEvent(event);
-    }
-    @Listen('change', { target: (host) => host })
-    handleInternalChange(event) {
-        this.#handleControlEvent(event);
-    }
-    @Listen(CONTROL_CHANGE_EVENT, { target: (host) => host })
-    handleControlChange(event) {
-        this.#handleControlEvent(event);
-    }
-    #handleControlEvent(event) {
-        if ('detail' in event && event.detail?.name) {
-            this.#updateState(event.detail.name, event.detail.value, event);
-            return;
-        }
-        if (!(event.target instanceof Element)) {
-            return;
-        }
-        const control = event.target;
-        const name = getControlName(control);
-        if (!name || !this.#controls.has(name)) {
-            return;
-        }
-        const value = readControlValue(control);
-        this.#updateState(name, value, event);
-    }
-    #handleSlotChange = () => {
-        this.#detach();
-        this.#attach();
-    };
-    #attach() {
-        const slot = this.defaultSlot;
-        if (!slot) {
-            return;
-        }
-        const findControls = (el) => {
-            const controls = [];
-            const name = getControlName(el);
-            if (name) {
-                controls.push(el);
-            }
-            if (el.shadowRoot) {
-                for (const child of el.shadowRoot.querySelectorAll('[name]')) {
-                    const childName = getControlName(child);
-                    if (childName) {
-                        controls.push(child);
-                    }
-                }
-            }
-            for (const child of el.querySelectorAll('[name]')) {
-                const childName = getControlName(child);
-                if (childName) {
-                    controls.push(child);
-                }
-            }
-            return controls;
-        };
-        this.#controls.clear();
-        this.#state = {};
-        const elements = slot.assignedElements({ flatten: true });
-        for (const element of elements) {
-            const controls = findControls(element);
-            for (const control of controls) {
-                const name = getControlName(control);
-                if (name) {
-                    this.#controls.set(name, control);
-                    const value = readControlValue(control);
-                    this.#state[name] = value;
-                    this.#initialState[name] = value;
-                }
-            }
-        }
-        const first = this.#controls.values().next().value;
-        if (first) {
-            const name = getControlName(first);
-            this.value = name && this.#state[name] != null ? String(this.#state[name]) : null;
-        }
-    }
-    #detach() {
-        this.#controls.clear();
-    }
-    #updateState(name, value, event) {
-        const prevValue = this.#state[name];
-        if (prevValue === value) {
-            return;
-        }
-        this.#state[name] = value;
-        this.value = String(value);
-        for (const cb of this.#subscribers.get(name) ?? []) {
-            cb(value, name);
-        }
-        for (const cb of this.#subscribers.get('*') ?? []) {
-            cb(value, name);
-        }
-        dispatchControlEvent(this, 'state-change', {
-            name,
-            value,
-            state: this.state,
-            event
-        });
-    }
-}

package/build/elements/toggle/index.cjs

@@ -1,151 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Toggle = void 0;
-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-toggle',
-    styles: `
-    :host {
-      display: contents;
-    }
-
-    [part="control"] {
-      display: block;
-      border-radius: var(--ease-toggle-radius, 10px);
-      padding: var(--ease-toggle-padding, 4px);
-      margin: 0;
-      border: none;
-      outline: none;
-      appearance: none;
-      cursor: pointer;
-      background-color: var(--ease-toggle-on-background, var(--color-blue-900));
-      transition: box-shadow 0.2s, background-color 0.2s;
-    }
-
-    [part="control"] svg {
-      width: var(--ease-toggle-width, 26px);
-      height: var(--ease-toggle-height, 12px);
-      display: block;
-      fill: none;
-      overflow: visible;
-
-      path {
-        transition: scale 0.2s, translate 0.2s, opacity 0.2s;
-        stroke: var(--color-white);
-        fill: var(--color-white-80);
-        stroke-width: 1.5;
-      }
-
-      [part="default"] {
-        transform-origin: 6px 6px;
-      }
-
-      [part="active"] {
-        transform-origin: 23px 6px;
-      }
-
-    }
-
-    :host([disabled]) [part="control"] {
-      cursor: default;
-      opacity: 0.75;
-    }
-
-    :host([checked]) [part="control"] {
-      box-shadow: inset 0 0 0 1px var(--color-white-15), inset 0 1px 0 0 var(--color-white-20), inset 0 4px 6px 0 var(--ease-toggle-shadow, var(--color-white-12));
-
-      &:hover {
-        --ease-toggle-shadow: var(--color-white-30);
-      }
-
-      svg {
-        [part="default"] {
-          scale: .25;
-          translate: 10px 0;
-          opacity: 0;
-        }
-
-        [part="active"] {
-          scale: 1;
-          translate: 0 0;
-        }
-      }
-    }
-
-    :host(:not([checked])) [part="control"] {
-      background-color: var(--ease-toggle-off-background, var(--color-gray-800));
-      box-shadow: inset 0 0 0 1px var(--color-white-10), inset 0 1px 0 0 var(--color-white-10), inset 0 4px 6px 0 var(--ease-toggle-shadow, var(--color-white-6));
-
-      &:hover {
-        --ease-toggle-shadow: var(--color-white-12);
-      }
-
-       svg {
-        [part="default"] {
-          scale: 1;
-          translate: 0 0;
-        }
-
-        [part="active"] {
-          scale: .25;
-          translate: -10px 0;
-          opacity: 0;
-        }
-      }
-    }
-  `,
-    template() {
-        return (0, lit_html_1.html) `
-      <button part="control" type="button" aria-pressed="false">
-        <svg viewBox="0 0 26 12" fill="none" xmlns="http://www.w3.org/2000/svg" filter="url(#${this.filterId})">
-          <path part="default" d="M0 6C0 2.68629 2.68629 0 6 0V0C9.31371 0 12 2.68629 12 6V6C12 9.31371 9.31371 12 6 12V12C2.68629 12 0 9.31371 0 6V6Z" />
-          <path part="active" d="M14 6C14 2.68629 16.6863 0 20 0V0C23.3137 0 26 2.68629 26 6V6C26 9.31371 23.3137 12 20 12V12C16.6863 12 14 9.31371 14 6V6Z" />
-        </svg>
-
-        <svg style="display: none;">
-          <defs>
-            <filter id="${this.filterId}">
-              <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
-              <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -9" result="gooey" />
-              <feBlend in="SourceGraphic" in2="gooey" />
-            </filter>
-          </defs>
-        </svg>
-      </button>
-    `;
-    }
-})
-class Toggle extends HTMLElement {
-    @(0, Prop_1.Prop)({ type: Boolean, reflect: true })
-    accessor checked;
-    @(0, Prop_1.Prop)({ type: Boolean, reflect: true })
-    accessor disabled;
-    @(0, Query_1.Query)('button')
-    accessor control;
-    filterId = `filter-${crypto.randomUUID()}`;
-    afterRender() {
-        if (!this.control) {
-            return;
-        }
-        const control = this.control;
-        control.setAttribute('aria-pressed', this.checked ? 'true' : 'false');
-        control.disabled = Boolean(this.disabled);
-        (0, shared_1.setBooleanAttribute)(this, 'disabled', Boolean(this.disabled));
-    }
-    @(0, Listen_1.Listen)('click', { selector: 'button' })
-    handleClick(event) {
-        if (this.disabled) {
-            event.preventDefault();
-            event.stopPropagation();
-            return;
-        }
-        this.checked = !this.checked;
-        (0, shared_1.dispatchControlEvent)(this, 'toggle', { value: this.checked, event });
-    }
-}
-exports.Toggle = Toggle;

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

@@ -1,9 +0,0 @@
-export declare class Toggle extends HTMLElement {
-    requestRender: () => void;
-    accessor checked: boolean;
-    accessor disabled: boolean;
-    accessor control: HTMLButtonElement | null;
-    filterId: string;
-    afterRender(): void;
-    handleClick(event: MouseEvent): void;
-}