@easemate/web-kit 0.1.5 → 0.2.0

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

@@ -0,0 +1,67 @@
+import { type TemplateResult } from 'lit-html';
+/**
+ * Event detail for tab change events
+ */
+export interface TabChangeEventDetail {
+    /** The index of the active tab */
+    index: number;
+    /** The tab id */
+    id: string;
+    /** The original event */
+    event: Event;
+}
+/**
+ * Panel component - visual container with optional tabs and header actions.
+ *
+ * Use this component when you want the panel UI without state management,
+ * or wrap it around `<ease-state>` for full functionality.
+ *
+ * @tag ease-panel
+ *
+ * @slot headline - Panel title text (hidden when tabs are present)
+ * @slot actions - Header action buttons, links, or dropdowns
+ * @slot - Default slot for main content
+ * @slot tab-{id} - Tab panel content (use `data-tab-label` for display name)
+ * @slot footer - Footer content below all panels
+ *
+ * @csspart section - Outer container
+ * @csspart header - Header row containing headline/tabs and actions
+ * @csspart headline - Title element
+ * @csspart tabs - Tab button container
+ * @csspart tab - Individual tab button
+ * @csspart actions - Actions container
+ * @csspart content - Content wrapper (handles height animations)
+ * @csspart body - Inner body container
+ * @csspart tab-panel - Individual tab panel
+ * @csspart footer - Footer container
+ *
+ * @fires tab-change - Fired when the active tab changes
+ */
+export declare class Panel extends HTMLElement {
+    #private;
+    requestRender: () => void;
+    accessor activeTab: number;
+    /** @internal */
+    handleActiveTabChange(previous: number, next: number): void;
+    accessor contentElement: HTMLElement | null;
+    accessor bodyElement: HTMLElement | null;
+    /**
+     * Get the tab configuration
+     */
+    get tabs(): ReadonlyArray<{
+        id: string;
+        label: string;
+    }>;
+    /**
+     * Switch to a specific tab by index
+     * @param index - The tab index (0-based)
+     */
+    setTab(index: number): void;
+    connectedCallback(): void;
+    afterRender(): void;
+    render(): TemplateResult;
+    performTabAnimation(fromIndex: number, toIndex: number): Promise<void>;
+    onFooterSlotChange(): void;
+    onDefaultSlotChange(): void;
+    private updateFooterAttribute;
+}

package/build/elements/panel/index.js

@@ -0,0 +1,492 @@
+import { html, nothing } from 'lit-html';
+import { setBooleanAttribute } from "../shared.js";
+import { Component } from '../../decorators/Component';
+import { Listen } from '../../decorators/Listen';
+import { Prop } from '../../decorators/Prop';
+import { Query } from '../../decorators/Query';
+/**
+ * Panel component - visual container with optional tabs and header actions.
+ *
+ * Use this component when you want the panel UI without state management,
+ * or wrap it around `<ease-state>` for full functionality.
+ *
+ * @tag ease-panel
+ *
+ * @slot headline - Panel title text (hidden when tabs are present)
+ * @slot actions - Header action buttons, links, or dropdowns
+ * @slot - Default slot for main content
+ * @slot tab-{id} - Tab panel content (use `data-tab-label` for display name)
+ * @slot footer - Footer content below all panels
+ *
+ * @csspart section - Outer container
+ * @csspart header - Header row containing headline/tabs and actions
+ * @csspart headline - Title element
+ * @csspart tabs - Tab button container
+ * @csspart tab - Individual tab button
+ * @csspart actions - Actions container
+ * @csspart content - Content wrapper (handles height animations)
+ * @csspart body - Inner body container
+ * @csspart tab-panel - Individual tab panel
+ * @csspart footer - Footer container
+ *
+ * @fires tab-change - Fired when the active tab changes
+ */
+@Component({
+    tag: 'ease-panel',
+    shadowMode: 'open',
+    styles: `
+    :host {
+      --ease-panel-transition-duration: 120ms;
+      --ease-panel-transition-easing: cubic-bezier(.25, 0, .5, 1);
+    }
+
+    [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="header"]:not(:has([part="headline"] slot[name="headline"]::slotted(*))):not(:has([part="tabs"]:not(:empty))):not(:has([part="actions"] slot[name="actions"]::slotted(*))) {
+      display: none;
+      margin-bottom: 0;
+    }
+
+    [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-panel-transition-duration) var(--ease-panel-transition-easing);
+    }
+
+    [part="body"] {
+      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(:not([slot])),
+    ::slotted([slot^="tab-"]) {
+      display: grid;
+      gap: 12px;
+      box-sizing: border-box;
+      width: 100%;
+    }
+  `
+})
+export class Panel extends HTMLElement {
+    #tabs = [];
+    #isAnimating = false;
+    @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('[part="content"]')
+    accessor contentElement;
+    @Query('[part="body"]')
+    accessor bodyElement;
+    /**
+     * Get the tab configuration
+     */
+    get tabs() {
+        return this.#tabs;
+    }
+    /**
+     * 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();
+    }
+    afterRender() {
+        this.#syncTabs();
+    }
+    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="body">
+            ${hasTabs ? this.#renderTabPanels() : html `<slot></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>
+    `;
+    }
+    #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;
+        this.dispatchEvent(new CustomEvent('tab-change', {
+            detail: { index, id, event },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    #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.
+        toPanel.style.display = 'none';
+        toPanel.style.opacity = '0';
+        // Fade out old content via WAAPI
+        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');
+        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';
+        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 = '';
+        if (previousToState !== 'active') {
+            toPanel.setAttribute('data-state', 'active');
+        }
+        content.style.height = '';
+        content.removeAttribute('data-animating');
+        this.#isAnimating = false;
+    }
+    #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('slotchange', { selector: 'slot[name="footer"]' })
+    onFooterSlotChange() {
+        this.updateFooterAttribute();
+    }
+    @Listen('slotchange', { selector: 'slot:not([name])' })
+    onDefaultSlotChange() {
+        this.#syncTabs();
+        this.requestRender();
+    }
+    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);
+    }
+}