@easemate/web-kit 0.2.0 → 0.3.0

package/build/elements/radio/input.js

@@ -1,325 +0,0 @@
-import { html } from 'lit-html';
-import { dispatchControlEvent, setBooleanAttribute } from "../shared.js";
-import { Component } from '../../decorators/Component';
-import { Listen } from '../../decorators/Listen';
-import { Prop } from '../../decorators/Prop';
-import { Query } from '../../decorators/Query';
-@Component({
-    tag: 'ease-radio-input',
-    shadowMode: 'open',
-    styles: `
-    .radio {
-      display: table;
-      border-radius: var(--ease-radio-input-radius, 12px);
-      position: relative;
-    }
-
-    [part="radio"] {
-      display: table;
-      appearance: none;
-      outline: none;
-      border: none;
-      background: none;
-      margin: 0;
-      padding: 0;
-      border-radius: inherit;
-    }
-
-    [part="control"] {
-      appearance: none;
-      outline: none;
-      border: none;
-      background: none;
-      display: block;
-      cursor: pointer;
-      margin: 0;
-      padding: 0;
-      border-radius: inherit;
-      width: var(--ease-radio-input-size, 24px);
-      height: var(--ease-radio-input-size, 24px);
-    }
-
-    .radio svg {
-      display: block;
-      position: absolute;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      top: 0;
-      pointer-events: none;
-      fill: var(--ease-radio-input-dot-color, var(--color-blue-100));
-      transform: scale(1.01) translateZ(0);
-    }
-
-    [part="control"] {
-      box-shadow: inset 0 0 0 var(--ease-radio-input-border-width, 2px) var(--ease-radio-input-border-color, var(--color-gray-700));
-    }
-
-    .radio svg .top {
-      transform-origin: 12px -12px;
-      transform: translateY(0) scale(1.75, 1) translateZ(0);
-      opacity: 0;
-    }
-
-    .radio svg .dot {
-      transform: translateY(-17px) translateZ(0);
-      opacity: 0;
-    }
-
-    .radio svg .drop {
-      transform: translateY(-14px) translateZ(0);
-      opacity: 0;
-    }
-
-    [part="control"]:checked {
-      box-shadow: inset 0 0 0 var(--ease-radio-input-checked-fill-size, 6.75px) var(--ease-radio-input-checked-fill, var(--color-blue-800));
-    }
-
-    [part="control"]:checked + svg .top {
-      transform: translateY(0px) scale(1.75, 1) translateZ(0);
-      opacity: 1;
-    }
-
-    [part="control"]:checked + svg .dot {
-      transform: translateY(0px) translateZ(0);
-      opacity: 1;
-    }
-
-    [part="control"]:checked + svg .drop {
-      transform: translateY(0px) translateZ(0);
-      opacity: 1;
-    }
-
-    [part="control"].anim-checked {
-      animation: radio-border-expand 0.8s ease-out forwards;
-    }
-
-    [part="control"].anim-checked + svg .top {
-      animation: radio-top 0.8s ease-out 0.2s forwards;
-    }
-
-    [part="control"].anim-checked + svg .dot {
-      animation: radio-dot 0.6s ease-out 0.2s forwards;
-    }
-
-    [part="control"].anim-checked + svg .drop {
-      animation: radio-drop 0.6s ease-out 0.4s forwards;
-    }
-
-    [part="control"].anim-unchecked {
-      animation: radio-border-contract 0.8s ease-out forwards;
-    }
-
-    [part="control"].anim-unchecked + svg .top {
-      animation: radio-top-reverse 0.8s ease-out forwards;
-    }
-
-    [part="control"].anim-unchecked + svg .dot {
-      animation: radio-dot-reverse 0.6s ease-out forwards;
-    }
-
-    [part="control"].anim-unchecked + svg .drop {
-      animation: radio-drop-reverse 0.6s ease-out forwards;
-    }
-
-    @keyframes radio-border-expand {
-      0% {
-        box-shadow: inset 0 0 0 var(--ease-radio-input-border-width, 2px) var(--ease-radio-input-border-color, var(--color-gray-700));
-      }
-      25% {
-        box-shadow: inset 0 0 0 var(--ease-radio-input-checked-fill-max, 12px) var(--ease-radio-input-checked-fill, var(--color-blue-800));
-      }
-      100% {
-        box-shadow: inset 0 0 0 var(--ease-radio-input-checked-fill-size, 6.75px) var(--ease-radio-input-checked-fill, var(--color-blue-800));
-      }
-    }
-
-    @keyframes radio-top {
-      0% {
-        transform: translateY(0) scale(1.75, 1) translateZ(0);
-      }
-      25% {
-        transform: translateY(6px) scale(1, 1.25) translateZ(0);
-      }
-      100% {
-        transform: translateY(0px) scale(1.75, 1) translateZ(0);
-      }
-    }
-
-    @keyframes radio-dot {
-      0% {
-        transform: translateY(-17px) translateZ(0);
-      }
-      50% {
-        transform: translateY(2px) translateZ(0);
-      }
-      100% {
-        transform: translateY(0px) translateZ(0);
-      }
-    }
-
-    @keyframes radio-drop {
-      0% {
-        transform: translateY(-14px) translateZ(0);
-      }
-      100% {
-        transform: translateY(0px) translateZ(0);
-      }
-    }
-
-    @keyframes radio-border-contract {
-      0% {
-        box-shadow: inset 0 0 0 var(--ease-radio-input-checked-fill-size, 6.75px) var(--ease-radio-input-checked-fill, var(--color-blue-800));
-      }
-      75% {
-        box-shadow: inset 0 0 0 var(--ease-radio-input-checked-fill-max, 12px) var(--ease-radio-input-checked-fill, var(--color-blue-800));
-      }
-      100% {
-        box-shadow: inset 0 0 0 var(--ease-radio-input-border-width, 2px) var(--ease-radio-input-border-color, var(--color-gray-700));
-      }
-    }
-
-    @keyframes radio-top-reverse {
-      0% {
-        transform: translateY(0px) scale(1.75, 1) translateZ(0);
-        opacity: 1;
-      }
-      75% {
-        transform: translateY(6px) scale(1, 1.25) translateZ(0);
-        opacity: 1;
-      }
-      100% {
-        transform: translateY(0) scale(1.75, 1) translateZ(0);
-        opacity: 0;
-      }
-    }
-
-    @keyframes radio-dot-reverse {
-      0% {
-        transform: translateY(0px) translateZ(0);
-        opacity: 1;
-      }
-      50% {
-        transform: translateY(2px) translateZ(0);
-        opacity: 1;
-      }
-      100% {
-        transform: translateY(-17px) translateZ(0);
-        opacity: 0;
-      }
-    }
-
-    @keyframes radio-drop-reverse {
-      0% {
-        transform: translateY(0px) translateZ(0);
-        opacity: 1;
-      }
-      100% {
-        transform: translateY(-14px) translateZ(0);
-        opacity: 0;
-      }
-    }
-  `,
-    template() {
-        return html `
-      <button part="radio" type="button" role="radio" aria-checked=${this.checked} ?disabled=${this.disabled}>
-        <div class="radio">
-          <input part="control" name=${this.name} value=${this.value} ?checked=${this.checked} ?disabled=${this.disabled} type="radio" />
-          <svg viewBox="0 0 24 24" filter="url(#${this.filterId})">
-              <circle class="top" cx="12" cy="-12" r="8" />
-              <circle class="dot" cx="12" cy="12" r="5" />
-              <circle class="drop" cx="12" cy="12" r="2" />
-          </svg>
-        </div>
-
-        <svg style="display: none;">
-          <defs>
-            <filter id="${this.filterId}">
-              <feGaussianBlur in="SourceGraphic" stdDeviation="1.25" 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>
-    `;
-    }
-})
-export class RadioInput extends HTMLElement {
-    @Prop({
-        type: Boolean,
-        reflect: true,
-        onChange(next) {
-            if (next && this.name) {
-                const form = this.closest('form');
-                const root = form ?? this.getRootNode();
-                const others = Array.from(root.querySelectorAll(`ease-radio-input[name="${this.name}"]`));
-                others.forEach((other) => {
-                    if (other !== this && other.checked) {
-                        other.checked = false;
-                    }
-                });
-            }
-        }
-    })
-    accessor checked;
-    @Prop({ reflect: true })
-    accessor name;
-    @Prop({ reflect: true })
-    accessor value;
-    @Prop({ type: Boolean, reflect: true })
-    accessor disabled;
-    @Query('button')
-    accessor control;
-    _prevChecked;
-    _firstRender = true;
-    filterId = `goo-${crypto.randomUUID()}`;
-    connectedCallback() {
-        this._prevChecked = this.checked;
-    }
-    afterRender() {
-        if (!this.control) {
-            return;
-        }
-        if (this._firstRender) {
-            this._firstRender = false;
-            this._prevChecked = this.checked;
-        }
-        const changed = typeof this._prevChecked !== 'undefined' && this.checked !== this._prevChecked;
-        if (changed) {
-            this._triggerAnimation(this.checked);
-            this._prevChecked = this.checked;
-        }
-        const control = this.control;
-        control.setAttribute('aria-checked', this.checked ? 'true' : 'false');
-        control.disabled = Boolean(this.disabled);
-        setBooleanAttribute(this, 'disabled', Boolean(this.disabled));
-    }
-    _triggerAnimation(checked) {
-        const input = this.shadowRoot?.querySelector('[part="control"]');
-        const svg = this.shadowRoot?.querySelector('svg[viewBox="0 0 24 24"]');
-        if (!input || !svg) {
-            return;
-        }
-        input.classList.remove('anim-checked', 'anim-unchecked');
-        svg.classList.remove('anim-checked', 'anim-unchecked');
-        const animClass = checked ? 'anim-checked' : 'anim-unchecked';
-        input.classList.add(animClass);
-        svg.classList.add(animClass);
-        const duration = 800; // Longest animation duration in ms
-        setTimeout(() => {
-            input.classList.remove(animClass);
-            svg.classList.remove(animClass);
-        }, duration);
-    }
-    @Listen('click', { selector: 'button' })
-    handleClick(event) {
-        if (this.disabled || this.checked) {
-            event.preventDefault();
-            event.stopPropagation();
-            return;
-        }
-        this.checked = true;
-        dispatchControlEvent(this, 'radio', { value: this.checked, event });
-    }
-}

package/build/elements/radio/option.cjs

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioOption = void 0;
-class RadioOption extends HTMLElement {
-    connectedCallback() {
-        this.hidden = true;
-        if (!this.hasAttribute('slot')) {
-            this.setAttribute('slot', 'option');
-        }
-    }
-}
-exports.RadioOption = RadioOption;
-if (!customElements.get('radio-option')) {
-    customElements.define('radio-option', RadioOption);
-}

package/build/elements/radio/option.d.cts

@@ -1,3 +0,0 @@
-export declare class RadioOption extends HTMLElement {
-    connectedCallback(): void;
-}

package/build/elements/radio/option.d.ts

@@ -1,3 +0,0 @@
-export declare class RadioOption extends HTMLElement {
-    connectedCallback(): void;
-}

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;
-};