@easemate/web-kit 0.2.0 → 0.3.0

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

@@ -1,19 +0,0 @@
-import { type TemplateResult } from 'lit-html';
-export type Placement = 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end' | 'left-start' | 'left-center' | 'left-end' | 'right-start' | 'right-center' | 'right-end';
-export declare class Popover extends HTMLElement {
-    #private;
-    requestRender: () => void;
-    get contentElement(): HTMLElement | null;
-    accessor placement: Placement;
-    accessor offset: number;
-    accessor open: boolean;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    render(): TemplateResult;
-    handlePlacementChange(): void;
-    handleOffsetChange(): void;
-}
-declare const _default: {
-    Popover: typeof Popover;
-};
-export default _default;

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

@@ -1,19 +0,0 @@
-import { type TemplateResult } from 'lit-html';
-export type Placement = 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end' | 'left-start' | 'left-center' | 'left-end' | 'right-start' | 'right-center' | 'right-end';
-export declare class Popover extends HTMLElement {
-    #private;
-    requestRender: () => void;
-    get contentElement(): HTMLElement | null;
-    accessor placement: Placement;
-    accessor offset: number;
-    accessor open: boolean;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    render(): TemplateResult;
-    handlePlacementChange(): void;
-    handleOffsetChange(): void;
-}
-declare const _default: {
-    Popover: typeof Popover;
-};
-export default _default;

package/build/elements/popover/index.js

@@ -1,205 +0,0 @@
-import { html } from 'lit-html';
-import { Component } from '../../decorators/Component';
-import { Prop } from '../../decorators/Prop';
-const nextAnchorName = () => `--ease-popover-anchor-${crypto.randomUUID()}`;
-@Component({
-    tag: 'ease-popover',
-    autoSlot: false,
-    shadowMode: 'open',
-    styles: `
-    :host {
-      display: contents;
-      --ease-popover-offset: 8px;
-      --ease-popover-anchor-name: --ease-popover-anchor;
-      --ease-popover-transform-origin: center center;
-      --ease-popover-duration: 200ms;
-      --ease-popover-content-min-width: auto;
-      --ease-popover-content-max-width: none;
-      --ease-popover-content-width: max-content;
-    }
-
-    ::slotted([slot="trigger"]) {
-      anchor-name: var(--ease-popover-anchor-name);
-    }
-
-    [part="content"] {
-      position-anchor: var(--ease-popover-anchor-name);
-      position: fixed;
-      margin: 0;
-      transform-origin: var(--ease-popover-transform-origin);
-      width: var(--ease-popover-content-width);
-      min-width: var(--ease-popover-content-min-width);
-      max-width: var(--ease-popover-content-max-width);
-      box-sizing: border-box;
-      overscroll-behavior: contain;
-      z-index: 100;
-      display: none;
-    }
-
-    :host([open]) [part="content"] {
-      display: block;
-    }
-
-    :host([placement="top-start"]) [part="content"] {
-      position-area: top right;
-      top: anchor(bottom);
-      left: anchor(left);
-      translate: 0 calc(var(--ease-popover-offset) * -1);
-    }
-
-    :host([placement="top-center"]) [part="content"] {
-      position-area: top center;
-      top: anchor(top);
-      left: anchor(center);
-      translate: 0 calc(var(--ease-popover-offset) * -1);
-    }
-
-    :host([placement="top-end"]) [part="content"] {
-      position-area: top right;
-      top: anchor(bottom);
-      right: anchor(right);
-      translate: 0 calc(var(--ease-popover-offset) * -1);
-    }
-
-    :host([placement="bottom-start"]) [part="content"] {
-      position-area: bottom right;
-      top: anchor(bottom);
-      left: anchor(left);
-      translate: 0 var(--ease-popover-offset);
-    }
-
-    :host([placement="bottom-center"]) [part="content"] {
-      position-area: bottom center;
-      top: anchor(bottom);
-      left: anchor(left);
-      translate: 0 var(--ease-popover-offset);
-    }
-
-    :host([placement="bottom-end"]) [part="content"] {
-      position-area: bottom left;
-      top: anchor(bottom);
-      right: anchor(right);
-      translate: 0 var(--ease-popover-offset);
-    }
-
-    :host([placement="left-start"]) [part="content"] {
-      position-area: left bottom;
-      top: anchor(top);
-      left: anchor(left);
-      translate: calc(var(--ease-popover-offset) * -1) 0;
-    }
-
-    :host([placement="left-center"]) [part="content"] {
-      position-area: left center;
-      top: anchor(top);
-      left: anchor(left);
-      translate: calc(var(--ease-popover-offset) * -1) 0;
-    }
-
-    :host([placement="left-end"]) [part="content"] {
-      position-area: left top;
-      top: anchor(top);
-      left: anchor(left);
-      translate: calc(var(--ease-popover-offset) * -1) 0;
-    }
-
-    :host([placement="right-start"]) [part="content"] {
-      position-area: right end;
-      top: anchor(top);
-      left: anchor(right);
-      translate: var(--ease-popover-offset) 0;
-    }
-
-    :host([placement="right-center"]) [part="content"] {
-      position-area: right center;
-      top: anchor(top);
-      left: anchor(right);
-      translate: var(--ease-popover-offset) 0;
-    }
-
-    :host([placement="right-end"]) [part="content"] {
-      position-area: right start;
-      top: anchor(top);
-      left: anchor(right);
-      translate: var(--ease-popover-offset) 0;
-    }
-  `
-})
-export class Popover extends HTMLElement {
-    #anchorName = nextAnchorName();
-    #contentElement = null;
-    #initialized = false;
-    get contentElement() {
-        return this.#contentElement;
-    }
-    @Prop({
-        reflect: true,
-        defaultValue: 'bottom-start',
-        onChange() {
-            this.handlePlacementChange();
-        }
-    })
-    accessor placement;
-    @Prop({
-        type: Number,
-        reflect: true,
-        defaultValue: 8,
-        onChange() {
-            this.handleOffsetChange();
-        }
-    })
-    accessor offset = 8;
-    @Prop({ type: Boolean, reflect: true })
-    accessor open = false;
-    connectedCallback() {
-        this.#syncAnchorName();
-        this.#syncOffset();
-    }
-    disconnectedCallback() {
-        this.#contentElement = null;
-        this.#initialized = false;
-    }
-    render() {
-        return html `
-      <slot slot="trigger" name="trigger"></slot>
-      <div
-        part="content"
-        data-popover-content
-        role="region"
-        data-placement=${this.placement}
-      >
-        <slot></slot>
-      </div>
-    `;
-    }
-    handlePlacementChange() {
-        if (!this.#initialized) {
-            this.requestRender();
-            return;
-        }
-        this.#syncPlacement();
-    }
-    handleOffsetChange() {
-        if (!this.#initialized) {
-            this.requestRender();
-            return;
-        }
-        this.#syncOffset();
-    }
-    #syncPlacement() {
-        this.dataset.placement = this.placement;
-        if (this.#contentElement) {
-            this.#contentElement.dataset.placement = this.placement;
-        }
-    }
-    #syncOffset() {
-        const offset = Number.isFinite(this.offset) ? this.offset : 0;
-        this.style.setProperty('--ease-popover-offset', `${offset}px`);
-    }
-    #syncAnchorName() {
-        this.style.setProperty('--ease-popover-anchor-name', this.#anchorName);
-    }
-}
-export default {
-    Popover
-};

package/build/elements/radio/index.cjs

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

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

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