@easemate/web-kit 0.1.5 → 0.2.0

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

@@ -18,27 +18,45 @@ export interface StateChangeEventDetail {
     event: Event;
 }
 /**
- * Event detail for tab change events
+ * 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>
+ * ```
  */
-export interface TabChangeEventDetail {
-    /** The index of the active tab */
-    index: number;
-    /** The tab id */
-    id: string;
-    /** The original event */
-    event: Event;
-}
 export declare class State extends HTMLElement {
     #private;
     requestRender: () => void;
     accessor value: string | null;
-    accessor activeTab: number;
-    /** @internal */
-    handleActiveTabChange(previous: number, next: number): void;
-    accessor entrySlot: HTMLSlotElement | null;
-    accessor outputElement: HTMLOutputElement | null;
-    accessor contentElement: HTMLElement | null;
-    accessor formElement: HTMLElement | null;
+    accessor defaultSlot: HTMLSlotElement | null;
     /**
      * Get the current state object with all control values
      */
@@ -67,20 +85,11 @@ export declare class State extends HTMLElement {
      * Reset all controls to their initial values
      */
     reset(): void;
-    /**
-     * Switch to a specific tab by index
-     * @param index - The tab index (0-based)
-     */
-    setTab(index: number): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    afterRender(): void;
     render(): TemplateResult;
-    performTabAnimation(fromIndex: number, toIndex: number): Promise<void>;
     handleInternalInput(event: CustomEvent<ControlEventDetail>): void;
     handleInternalChange(event: CustomEvent<ControlEventDetail>): void;
     handleControlChange(event: CustomEvent<ControlEventDetail>): void;
-    onFooterSlotChange(): void;
-    private updateFooterAttribute;
 }
 export {};

package/build/elements/state/index.js

@@ -1,5 +1,5 @@
-import { html, nothing } from 'lit-html';
-import { CONTROL_CHANGE_EVENT, dispatchControlEvent, setBooleanAttribute } from "../shared.js";
+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';
@@ -25,195 +25,52 @@ const getControlName = (element) => {
     }
     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 {
-      --ease-state-transition-duration: 120ms;
-      --ease-state-transition-easing: cubic-bezier(.25, 0, .5, 1);
+      display: contents;
     }
 
-    [part="section"] {
-      display: block;
-      width: 100%;
-      max-width: var(--ease-panel-max-width, 332px);
-      border-radius: var(--ease-panel-radius, 12px);
-      border: 1px solid var(--ease-panel-border-color, var(--color-white-6));
-      background-clip: padding-box;
-      background: var(--ease-panel-background, var(--color-gray-1000));
-      box-shadow: var(--ease-panel-shadow, 0 0 40px 0 var(--color-white-2) inset);
-      box-sizing: border-box;
-      padding: var(--ease-panel-padding, 12px);
-      margin: auto;
-    }
-
-    [part="header"] {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      width: 100%;
-      margin-bottom: 12px;
-    }
-
-    [part="headline"] {
-      font-size: var(--ease-panel-title-font-size, 14px);
-      font-weight: var(--ease-panel-title-font-weight, 500);
-      line-height: var(--ease-panel-title-line-height, 24px);
-      font-family: var(--ease-font-family, "Instrument Sans", sans-serif);
-      color: var(--ease-panel-title-color, var(--color-blue-100));
-      margin: 0 0 0 4px;
-      flex-grow: 1;
-      text-ellipsis: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-
-    [part="headline"]:has(+ [part="tabs"]:not(:empty)) {
-      display: none;
-    }
-
-    [part="tabs"] {
-      display: flex;
-      align-items: center;
-      gap: 2px;
-      flex-grow: 1;
-      margin: 0 0 0 4px;
-    }
-
-    [part="tabs"]:empty {
-      display: none;
-    }
-
-    [part="tab"] {
-      appearance: none;
-      font-size: var(--ease-panel-tab-font-size, 13px);
-      font-weight: var(--ease-panel-tab-font-weight, 500);
-      line-height: var(--ease-panel-tab-line-height, 24px);
-      font-family: var(--ease-font-family, "Instrument Sans", sans-serif);
-      color: var(--ease-panel-tab-color, var(--color-gray-600));
-      background: transparent;
-      border: none;
-      padding: 4px 8px;
-      margin: 0;
-      cursor: pointer;
-      border-radius: var(--ease-panel-tab-radius, 6px);
-      transition: color 0.2s, background-color 0.2s;
-    }
-
-    [part="tab"]:hover {
-      color: var(--ease-panel-tab-color-hover, var(--color-blue-100));
-    }
-
-    [part="tab"][aria-selected="true"] {
-      color: var(--ease-panel-tab-color-active, var(--color-blue-100));
-      background: var(--ease-panel-tab-background-active, var(--color-white-4));
-    }
-
-    [part="actions"] {
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      margin-left: auto;
-    }
-
-    slot[name="actions"]::slotted(button),
-    slot[name="actions"]::slotted(a) {
-      --ease-icon-size: var(--ease-panel-action-icon-size, 16px);
-
-      appearance: none;
-      flex: 0 0 24px;
-      border: none;
-      outline: none;
-      background-color: transparent;
-      padding: 4px;
-      margin: 0;
-      cursor: pointer;
-      color: var(--color-gray-600);
-      transition: color 0.2s;
-      text-decoration: none;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    slot[name="actions"]::slotted(button:hover),
-    slot[name="actions"]::slotted(button:focus-visible),
-    slot[name="actions"]::slotted(a:hover),
-    slot[name="actions"]::slotted(a:focus-visible) {
-      color: var(--color-blue-100);
-    }
-
-    slot[name="actions"]::slotted(ease-dropdown) {
-      flex: 0 0 auto;
-      width: auto;
-
-      --ease-icon-size: var(--ease-panel-action-icon-size, 16px);
-      --ease-dropdown-trigger-padding: 4px;
-      --ease-dropdown-radius: 6px;
-      --ease-dropdown-background: transparent;
-      --ease-dropdown-background-hover: transparent;
-      --ease-dropdown-shadow: none;
-      --ease-dropdown-color: var(--color-gray-600);
-      --ease-popover-placement: bottom-end;
-    }
-
-    slot[name="actions"]::slotted(ease-dropdown:hover),
-    slot[name="actions"]::slotted(ease-dropdown:focus-within) {
-      --ease-dropdown-color: var(--color-blue-100);
-    }
-
-    [part="content"] {
-      display: block;
-      width: 100%;
-      box-sizing: border-box;
-      margin: auto;
-      overflow: hidden;
-    }
-
-    [part="content"][data-animating="true"] {
-      transition: height var(--ease-state-transition-duration) var(--ease-state-transition-easing);
-    }
-
-    [part="form"] {
-      width: 100%;
-      position: relative;
-    }
-
-    [part="tab-panel"] {
-      width: 100%;
-      pointer-events: none;
-      display: none;
-    }
-
-    [part="tab-panel"][data-state="active"] {
-      display: block;
-      pointer-events: auto;
-    }
-
-    [part="tab-panel"][data-state="hidden"] {
-      display: none;
-      pointer-events: none;
-    }
-
-    [part="footer"] {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      width: 100%;
-      padding: var(--ease-panel-footer-padding, 12px);
-      box-sizing: border-box;
-      border-top: 1px solid var(--color-white-4);
-
-      &:not(:has([data-has-content="true"])) {
-        display: none;
-      }
-    }
-
-    ::slotted([slot="entry"]),
-    ::slotted([slot^="tab-"]) {
+    [part="container"] {
       display: grid;
-      gap: 12px;
+      gap: var(--ease-state-gap, 12px);
       box-sizing: border-box;
       width: 100%;
     }
@@ -224,35 +81,10 @@ export class State extends HTMLElement {
     #state = {};
     #initialState = {};
     #subscribers = new Map();
-    #tabs = [];
-    #isAnimating = false;
     @Prop({ reflect: true })
     accessor value;
-    @Prop({
-        type: Number,
-        reflect: true,
-        attribute: 'active-tab',
-        defaultValue: 0,
-        onChange(next, previous) {
-            const self = this;
-            if (next !== previous && previous !== undefined) {
-                self.handleActiveTabChange(previous, next);
-            }
-        }
-    })
-    accessor activeTab = 0;
-    /** @internal */
-    handleActiveTabChange(previous, next) {
-        this.performTabAnimation(previous, next);
-    }
-    @Query('slot[name="entry"]')
-    accessor entrySlot;
-    @Query('output')
-    accessor outputElement;
-    @Query('[part="content"]')
-    accessor contentElement;
-    @Query('[part="form"]')
-    accessor formElement;
+    @Query('slot')
+    accessor defaultSlot;
     /**
      * Get the current state object with all control values
      */
@@ -317,233 +149,21 @@ export class State extends HTMLElement {
             this.set(name, value);
         }
     }
-    /**
-     * Switch to a specific tab by index
-     * @param index - The tab index (0-based)
-     */
-    setTab(index) {
-        if (index >= 0 && index < this.#tabs.length && index !== this.activeTab) {
-            this.activeTab = index;
-        }
-    }
     connectedCallback() {
-        this.#syncTabs();
         this.#attach();
-        this.entrySlot?.addEventListener('slotchange', this.#handleSlotChange);
+        this.defaultSlot?.addEventListener('slotchange', this.#handleSlotChange);
     }
     disconnectedCallback() {
         this.#detach();
-        this.entrySlot?.removeEventListener('slotchange', this.#handleSlotChange);
-    }
-    afterRender() {
-        if (this.outputElement) {
-            this.outputElement.value = this.value ?? '';
-        }
-        this.#syncTabs();
+        this.defaultSlot?.removeEventListener('slotchange', this.#handleSlotChange);
     }
     render() {
-        const hasTabs = this.#tabs.length > 0;
         return html `
-      <section part="section">
-        <div part="header">
-          <h3 part="headline"><slot name="headline"></slot></h3>
-          ${this.#renderTabs()}
-          <div part="actions">
-            <slot name="actions"></slot>
-          </div>
-        </div>
-        <div part="content">
-          <div part="form">
-            ${hasTabs ? this.#renderTabPanels() : html `<slot name="entry"></slot>`}
-          </div>
-        </div>
-        <div part="footer">
-          <slot name="footer"></slot>
-        </div>
-      </section>
-    `;
-    }
-    #renderTabs() {
-        if (this.#tabs.length === 0) {
-            return nothing;
-        }
-        return html `
-      <div part="tabs" role="tablist">
-        ${this.#tabs.map((tab, index) => html `
-            <button
-              part="tab"
-              role="tab"
-              aria-selected=${index === this.activeTab ? 'true' : 'false'}
-              aria-controls=${`panel-${tab.id}`}
-              tabindex=${index === this.activeTab ? 0 : -1}
-              @click=${(e) => this.#handleTabClick(index, tab.id, e)}
-              @keydown=${(e) => this.#handleTabKeydown(e, index)}
-            >
-              ${tab.label}
-            </button>
-          `)}
+      <div part="container">
+        <slot></slot>
       </div>
     `;
     }
-    #renderTabPanels() {
-        return html `
-      ${this.#tabs.map((tab, index) => html `
-          <div
-            part="tab-panel"
-            role="tabpanel"
-            id=${`panel-${tab.id}`}
-            aria-labelledby=${`tab-${tab.id}`}
-            data-state=${index === this.activeTab ? 'active' : 'hidden'}
-            data-index=${index}
-          >
-            <slot name=${`tab-${tab.id}`}></slot>
-          </div>
-        `)}
-    `;
-    }
-    #handleTabClick(index, id, event) {
-        if (index === this.activeTab) {
-            return;
-        }
-        this.activeTab = index;
-        dispatchControlEvent(this, 'tab-change', {
-            index,
-            id,
-            event
-        });
-    }
-    #handleTabKeydown(event, currentIndex) {
-        let newIndex = currentIndex;
-        switch (event.key) {
-            case 'ArrowLeft':
-                event.preventDefault();
-                newIndex = currentIndex > 0 ? currentIndex - 1 : this.#tabs.length - 1;
-                break;
-            case 'ArrowRight':
-                event.preventDefault();
-                newIndex = currentIndex < this.#tabs.length - 1 ? currentIndex + 1 : 0;
-                break;
-            case 'Home':
-                event.preventDefault();
-                newIndex = 0;
-                break;
-            case 'End':
-                event.preventDefault();
-                newIndex = this.#tabs.length - 1;
-                break;
-            default:
-                return;
-        }
-        if (newIndex !== currentIndex) {
-            this.activeTab = newIndex;
-            // Focus the new tab button
-            queueMicrotask(() => {
-                const tabButtons = this.shadowRoot?.querySelectorAll('[part="tab"]');
-                const newTabButton = tabButtons?.[newIndex];
-                newTabButton?.focus();
-            });
-        }
-    }
-    async performTabAnimation(fromIndex, toIndex) {
-        if (this.#isAnimating) {
-            return;
-        }
-        this.#isAnimating = true;
-        const duration = 120;
-        const easing = 'cubic-bezier(.25, 0, .5, 1)';
-        const content = this.contentElement;
-        if (!content) {
-            this.#isAnimating = false;
-            this.requestRender();
-            return;
-        }
-        // Get the panels by data-index attribute for reliability
-        const fromPanel = this.shadowRoot?.querySelector(`[part="tab-panel"][data-index="${fromIndex}"]`);
-        const toPanel = this.shadowRoot?.querySelector(`[part="tab-panel"][data-index="${toIndex}"]`);
-        if (!fromPanel || !toPanel) {
-            this.#isAnimating = false;
-            this.requestRender();
-            return;
-        }
-        // Lock the current height
-        const startHeight = content.getBoundingClientRect().height;
-        content.style.height = `${startHeight}px`;
-        // FIX: Ensure the new panel is hidden immediately.
-        // Changing activeTab triggers a render which sets data-state="active" (display: block).
-        // We must override this with inline styles to prevent the content from showing during the fade-out.
-        toPanel.style.display = 'none';
-        toPanel.style.opacity = '0';
-        // Fade out old content via WAAPI (avoids any "one-frame" flashes)
-        try {
-            const fadeOut = fromPanel.animate([{ opacity: 1 }, { opacity: 0 }], { duration, easing, fill: 'forwards' });
-            await fadeOut.finished;
-            fadeOut.cancel();
-        }
-        catch {
-            // ignore
-        }
-        fromPanel.setAttribute('data-state', 'hidden');
-        // Prepare and measure new panel while completely invisible
-        const previousToState = toPanel.getAttribute('data-state');
-        // Reset display to block (overriding our 'none' above) but keep invisible for measuring
-        toPanel.style.display = 'block';
-        toPanel.style.visibility = 'hidden';
-        toPanel.style.opacity = '0';
-        // Force layout, then measure
-        void toPanel.offsetHeight;
-        const endHeight = toPanel.getBoundingClientRect().height;
-        // Animate height
-        if (startHeight !== endHeight) {
-            content.setAttribute('data-animating', 'true');
-            void content.offsetHeight;
-            content.style.height = `${endHeight}px`;
-            await this.#wait(duration);
-        }
-        // Show panel but keep opacity at 0, then fade in
-        toPanel.style.visibility = 'visible';
-        toPanel.style.opacity = '0';
-        // Ensure the 0-opacity state is committed
-        void toPanel.offsetHeight;
-        try {
-            const fadeIn = toPanel.animate([{ opacity: 0 }, { opacity: 1 }], { duration, easing, fill: 'forwards' });
-            await fadeIn.finished;
-            fadeIn.cancel();
-        }
-        catch {
-            // ignore
-        }
-        // Finalize new tab state and cleanup
-        toPanel.style.display = '';
-        toPanel.style.visibility = '';
-        toPanel.style.opacity = '';
-        // Restore state attribute (we only want one active)
-        if (previousToState !== 'active') {
-            toPanel.setAttribute('data-state', 'active');
-        }
-        content.style.height = '';
-        content.removeAttribute('data-animating');
-        this.#isAnimating = false;
-        this.#detach();
-        this.#attach();
-    }
-    #wait(ms) {
-        return new Promise((resolve) => setTimeout(resolve, ms));
-    }
-    #syncTabs() {
-        const tabs = [];
-        for (const child of Array.from(this.children)) {
-            const slot = child.getAttribute('slot');
-            if (slot?.startsWith('tab-')) {
-                const id = slot.replace('tab-', '');
-                const label = child.getAttribute('data-tab-label') || id;
-                tabs.push({ id, label });
-            }
-        }
-        this.#tabs = tabs.slice(0, 3);
-        if (this.activeTab >= this.#tabs.length && this.#tabs.length > 0) {
-            this.activeTab = 0;
-        }
-    }
     @Listen('input', { target: (host) => host })
     handleInternalInput(event) {
         this.#handleControlEvent(event);
@@ -556,10 +176,6 @@ export class State extends HTMLElement {
     handleControlChange(event) {
         this.#handleControlEvent(event);
     }
-    @Listen('slotchange', { selector: 'slot[name="footer"]' })
-    onFooterSlotChange() {
-        this.updateFooterAttribute();
-    }
     #handleControlEvent(event) {
         if ('detail' in event && event.detail?.name) {
             this.#updateState(event.detail.name, event.detail.value, event);
@@ -577,25 +193,13 @@ export class State extends HTMLElement {
         this.#updateState(name, value, event);
     }
     #handleSlotChange = () => {
-        this.#syncTabs();
         this.#detach();
         this.#attach();
     };
     #attach() {
-        const slots = [];
-        if (this.#tabs.length === 0) {
-            if (this.entrySlot) {
-                slots.push(this.entrySlot);
-            }
-        }
-        else {
-            const activeTab = this.#tabs[this.activeTab];
-            if (activeTab) {
-                const tabSlot = this.shadowRoot?.querySelector(`slot[name="tab-${activeTab.id}"]`);
-                if (tabSlot) {
-                    slots.push(tabSlot);
-                }
-            }
+        const slot = this.defaultSlot;
+        if (!slot) {
+            return;
         }
         const findControls = (el) => {
             const controls = [];
@@ -621,18 +225,16 @@ export class State extends HTMLElement {
         };
         this.#controls.clear();
         this.#state = {};
-        for (const slot of slots) {
-            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 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;
                 }
             }
         }
@@ -665,13 +267,4 @@ export class State extends HTMLElement {
             event
         });
     }
-    updateFooterAttribute() {
-        const footer = this.shadowRoot?.querySelector('[part="footer"]');
-        if (!footer) {
-            return;
-        }
-        const footerSlot = this.shadowRoot?.querySelector('slot[name="footer"]');
-        const hasFooter = Boolean(footerSlot?.assignedNodes({ flatten: true }).length > 0);
-        setBooleanAttribute(footer, 'data-has-content', hasFooter);
-    }
 }

package/build/internal/component-loaders.cjs

@@ -60,6 +60,7 @@ exports.WEB_KIT_ELEMENT_TAGS = [
     'ease-toggle',
     // Layout
     'ease-field',
+    'ease-panel',
     'ease-popover',
     'ease-state',
     'ease-tooltip',
@@ -132,6 +133,7 @@ exports.COMPONENT_LOADERS = {
     'ease-toggle': () => Promise.resolve().then(() => __importStar(require("../elements/toggle/index.cjs"))),
     // Layout
     'ease-field': () => Promise.resolve().then(() => __importStar(require("../elements/field/index.cjs"))),
+    'ease-panel': () => Promise.resolve().then(() => __importStar(require("../elements/panel/index.cjs"))),
     'ease-popover': () => Promise.resolve().then(() => __importStar(require("../elements/popover/index.cjs"))),
     'ease-state': () => Promise.resolve().then(() => __importStar(require("../elements/state/index.cjs"))),
     'ease-tooltip': () => Promise.resolve().then(() => __importStar(require("../elements/tooltip/index.cjs"))),