@easemate/web-kit 0.1.0

package/build/elements/radio/index.cjs

@@ -0,0 +1,301 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroup = void 0;
+const lit_html_1 = require("lit-html");
+const Component_1 = require("~/decorators/Component");
+const Prop_1 = require("~/decorators/Prop");
+const Query_1 = require("~/decorators/Query");
+require("../button/index.cjs");
+const shared_1 = require("../shared.cjs");
+__exportStar(require("./option.cjs"), exports);
+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}`;
+    };
+})();
+@(0, Component_1.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 (0, lit_html_1.html) `
+      <div part="group">
+        <slot name="content"></slot>
+      </div>
+    `;
+    }
+})
+class RadioGroup extends HTMLElement {
+    @(0, Prop_1.Prop)({
+        reflect: true,
+        defaultValue: null,
+        onChange(next, previous) {
+            if (next === previous) {
+                return;
+            }
+            this.updateOptionSelectionState();
+        }
+    })
+    accessor value = null;
+    @(0, Query_1.Query)('[part="group"]')
+    accessor groupElement;
+    @(0, Query_1.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) {
+        (0, shared_1.dispatchControlEvent)(this, 'change', { value, event });
+        this.dispatchEvent(new CustomEvent('value-change', {
+            detail: { value, label, event },
+            bubbles: true,
+            composed: true
+        }));
+    }
+}
+exports.RadioGroup = RadioGroup;

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

@@ -0,0 +1,13 @@
+import "../button/index.cjs";
+export * from "./option.cjs";
+export declare class RadioGroup extends HTMLElement {
+    #private;
+    requestRender: () => void;
+    accessor value: string | null;
+    accessor groupElement: HTMLElement | null;
+    accessor contentSlot: HTMLSlotElement | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    afterRender(): void;
+    updateOptionSelectionState(): void;
+}

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

@@ -0,0 +1,13 @@
+import "../button/index.js";
+export * from "./option.js";
+export declare class RadioGroup extends HTMLElement {
+    #private;
+    requestRender: () => void;
+    accessor value: string | null;
+    accessor groupElement: HTMLElement | null;
+    accessor contentSlot: HTMLSlotElement | null;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    afterRender(): void;
+    updateOptionSelectionState(): void;
+}

package/build/elements/radio/index.js

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