@easemate/web-kit 0.2.0 → 0.3.1

package/build/elements/radio/index.js

@@ -1,283 +0,0 @@
-import { html } from 'lit-html';
-import { Component } from '../../decorators/Component';
-import { Prop } from '../../decorators/Prop';
-import { Query } from '../../decorators/Query';
-import "../button/index.js";
-import { dispatchControlEvent } from "../shared.js";
-export * from "./option.js";
-const nextOptionId = (() => {
-    let counter = 0;
-    return () => {
-        counter += 1;
-        return `ease-radio-option-${counter}`;
-    };
-})();
-const nextPanelId = (() => {
-    let counter = 0;
-    return () => {
-        counter += 1;
-        return `ease-radio-content-${counter}`;
-    };
-})();
-@Component({
-    tag: 'ease-radio-group',
-    shadowMode: 'open',
-    styles: `
-    :host {
-      display: flex;
-    }
-
-    [part="option"] {
-      flex: 0 0 50%;
-      display: block;
-    }
-
-    [part="group"] {
-      display: flex;
-      position: relative;
-      z-index: 0;
-      box-sizing: border-box;
-      width: 100%;
-      min-width: 0;
-      padding: var(--ease-radio-padding, 3px);
-      border-radius: var(--ease-radio-radius, var(--radii-md));
-      background-color: var(--ease-radio-background, var(--color-gray-875));
-      box-shadow: var(
-        --ease-radio-shadow,
-        inset 0 1px 0.25px 0 var(--color-white-4),
-        0 1px 2.5px 0 var(--color-black-8)
-      );
-
-      ::slotted(button) {
-        padding: var(--ease-radio-option-padding, 4px 0);
-        line-height: var(--ease-radio-option-line-height, 16px);
-        margin: 0;
-        border: none;
-        outline: none;
-        background: none;
-        cursor: pointer;
-        font-family: var(--ease-font-family, inherit);
-        font-optical-sizing: auto;
-        font-size: var(--ease-radio-option-font-size, var(--ease-font-size-sm, 12px));
-        font-weight: var(--ease-radio-option-font-weight, 500);
-        color: var(--ease-radio-option-color, var(--color-gray-600));
-        transition: color 0.2s;
-        flex-grow: 1;
-      }
-
-      ::slotted(button:hover),
-      ::slotted(button:focus-visible) {
-        color: var(--color-blue-100);
-      }
-
-      ::slotted(button[data-active="true"]) {
-        color: var(--color-blue-100);
-      }
-    }
-  `,
-    template() {
-        return html `
-      <div part="group">
-        <slot name="content"></slot>
-      </div>
-    `;
-    }
-})
-export class RadioGroup extends HTMLElement {
-    @Prop({
-        reflect: true,
-        defaultValue: null,
-        onChange(next, previous) {
-            if (next === previous) {
-                return;
-            }
-            this.updateOptionSelectionState();
-        }
-    })
-    accessor value = null;
-    @Query('[part="group"]')
-    accessor groupElement;
-    @Query('slot[name="content"]')
-    accessor contentSlot;
-    #options = [];
-    #currentSlot = null;
-    #optionsInitialized = false;
-    #handleSlotChange = () => {
-        this.#syncOptions();
-    };
-    connectedCallback() {
-        this.#ensureSlotListener();
-    }
-    disconnectedCallback() {
-        this.#removeSlotListener();
-        this.#teardownOptions();
-    }
-    afterRender() {
-        const panel = this.groupElement;
-        if (panel) {
-            if (!panel.id) {
-                panel.id = nextPanelId();
-            }
-            panel.tabIndex = -1;
-            panel.setAttribute('role', 'radiogroup');
-        }
-        this.#ensureSlotListener();
-        if (!this.#optionsInitialized) {
-            queueMicrotask(() => {
-                this.#syncOptions();
-            });
-        }
-        else {
-            this.updateOptionSelectionState();
-        }
-    }
-    #ensureSlotListener() {
-        const slot = this.contentSlot;
-        if (slot === this.#currentSlot) {
-            return;
-        }
-        if (this.#currentSlot) {
-            this.#currentSlot.removeEventListener('slotchange', this.#handleSlotChange);
-        }
-        if (slot) {
-            slot.addEventListener('slotchange', this.#handleSlotChange);
-        }
-        this.#currentSlot = slot ?? null;
-    }
-    #removeSlotListener() {
-        if (!this.#currentSlot) {
-            return;
-        }
-        this.#currentSlot.removeEventListener('slotchange', this.#handleSlotChange);
-        this.#currentSlot = null;
-    }
-    #syncOptions() {
-        const assigned = this.contentSlot?.assignedElements({ flatten: true }) ?? [];
-        const elements = assigned.filter((node) => node instanceof HTMLElement);
-        this.#removeOptionListeners(this.#options);
-        const options = [];
-        elements.forEach((element) => {
-            if (element.hasAttribute('data-select-ignore') || element.getAttribute('role') === 'separator') {
-                return;
-            }
-            const value = this.#resolveOptionValue(element);
-            const label = this.#resolveOptionLabel(element, value);
-            const id = element.id && element.id.trim().length > 0 ? element.id : nextOptionId();
-            if (!element.id) {
-                element.id = id;
-            }
-            element.setAttribute('role', 'option');
-            element.setAttribute('aria-selected', 'false');
-            element.setAttribute('variant', this.value === value ? 'default' : 'link');
-            element.dataset.active = 'false';
-            element.tabIndex = -1;
-            const handlers = {
-                click: (event) => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    this.#selectOption(value, label, event);
-                },
-                keydown: (event) => {
-                    if (event.key === 'Enter' || event.key === ' ') {
-                        event.preventDefault();
-                        this.#selectOption(value, label, event);
-                    }
-                }
-            };
-            element.addEventListener('click', handlers.click, { passive: false });
-            element.addEventListener('keydown', handlers.keydown);
-            options.push({ element, value, label, id, handlers });
-        });
-        this.#options = options;
-        this.#optionsInitialized = options.length > 0;
-        if (this.value === null && options.length > 0) {
-            const preselected = options.find((option) => option.element.hasAttribute('selected') ||
-                option.element.dataset.selected === 'true' ||
-                option.element.getAttribute('aria-selected') === 'true');
-            if (preselected) {
-                this.value = preselected.value;
-            }
-        }
-        this.updateOptionSelectionState();
-    }
-    #teardownOptions() {
-        this.#removeOptionListeners(this.#options);
-        this.#options = [];
-        this.#optionsInitialized = false;
-    }
-    #removeOptionListeners(options) {
-        options.forEach((option) => {
-            option.element.removeEventListener('click', option.handlers.click);
-            option.element.removeEventListener('keydown', option.handlers.keydown);
-            option.element.dataset.active = 'false';
-            option.element.setAttribute('aria-selected', 'false');
-            option.element.tabIndex = -1;
-        });
-    }
-    updateOptionSelectionState() {
-        if (!this.#optionsInitialized) {
-            return;
-        }
-        let selectedLabel = null;
-        const options = this.#options;
-        options.forEach((option) => {
-            const isSelected = this.value !== null && option.value === this.value;
-            option.element.setAttribute('aria-selected', isSelected ? 'true' : 'false');
-            option.element.dataset.active = isSelected ? 'true' : 'false';
-            option.element.tabIndex = isSelected ? 0 : -1;
-            option.element.setAttribute('variant', isSelected ? 'default' : 'link');
-            if (isSelected) {
-                selectedLabel = option.label;
-            }
-        });
-        if (!selectedLabel) {
-            const fallback = options[0];
-            if (fallback) {
-                fallback.element.tabIndex = 0;
-            }
-        }
-        const hasValue = Boolean(this.value && selectedLabel);
-        this.toggleAttribute('data-has-value', hasValue);
-    }
-    #selectOption(value, label, originEvent) {
-        originEvent.preventDefault();
-        originEvent.stopPropagation();
-        const previousValue = this.value;
-        this.value = value;
-        if (previousValue !== value) {
-            this.#dispatchValueChange(value, label, originEvent);
-        }
-    }
-    #resolveOptionValue(element) {
-        const explicitValue = element.getAttribute('value') ?? element.getAttribute('data-value') ?? element.dataset.value;
-        if (explicitValue && explicitValue.trim().length > 0) {
-            return explicitValue.trim();
-        }
-        const text = element.textContent?.trim();
-        if (text && text.length > 0) {
-            return text;
-        }
-        const fallback = nextOptionId();
-        element.dataset.value = fallback;
-        return fallback;
-    }
-    #resolveOptionLabel(element, fallback) {
-        const explicitLabel = element.getAttribute('data-label') ?? element.getAttribute('aria-label');
-        if (explicitLabel && explicitLabel.trim().length > 0) {
-            return explicitLabel.trim();
-        }
-        const text = element.textContent?.trim();
-        if (text && text.length > 0) {
-            return text;
-        }
-        return fallback;
-    }
-    #dispatchValueChange(value, label, event) {
-        dispatchControlEvent(this, 'change', { value, event });
-        this.dispatchEvent(new CustomEvent('value-change', {
-            detail: { value, label, event },
-            bubbles: true,
-            composed: true
-        }));
-    }
-}

package/build/elements/radio/input.cjs

@@ -1,329 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioInput = 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-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 (0, lit_html_1.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>
-    `;
-    }
-})
-class RadioInput extends HTMLElement {
-    @(0, Prop_1.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;
-    @(0, Prop_1.Prop)({ reflect: true })
-    accessor name;
-    @(0, Prop_1.Prop)({ reflect: true })
-    accessor value;
-    @(0, Prop_1.Prop)({ type: Boolean, reflect: true })
-    accessor disabled;
-    @(0, Query_1.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);
-        (0, shared_1.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);
-    }
-    @(0, Listen_1.Listen)('click', { selector: 'button' })
-    handleClick(event) {
-        if (this.disabled || this.checked) {
-            event.preventDefault();
-            event.stopPropagation();
-            return;
-        }
-        this.checked = true;
-        (0, shared_1.dispatchControlEvent)(this, 'radio', { value: this.checked, event });
-    }
-}
-exports.RadioInput = RadioInput;

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

@@ -1,15 +0,0 @@
-export declare class RadioInput extends HTMLElement {
-    requestRender: () => void;
-    accessor checked: boolean;
-    accessor name: string | null;
-    accessor value: string | null;
-    accessor disabled: boolean;
-    accessor control: HTMLButtonElement | null;
-    private _prevChecked?;
-    private _firstRender;
-    filterId: string;
-    connectedCallback(): void;
-    afterRender(): void;
-    private _triggerAnimation;
-    handleClick(event: MouseEvent): void;
-}

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

@@ -1,15 +0,0 @@
-export declare class RadioInput extends HTMLElement {
-    requestRender: () => void;
-    accessor checked: boolean;
-    accessor name: string | null;
-    accessor value: string | null;
-    accessor disabled: boolean;
-    accessor control: HTMLButtonElement | null;
-    private _prevChecked?;
-    private _firstRender;
-    filterId: string;
-    connectedCallback(): void;
-    afterRender(): void;
-    private _triggerAnimation;
-    handleClick(event: MouseEvent): void;
-}