@taprootio/espalier 2.0.0

package/dist/switch/esp-switch.d.ts

@@ -0,0 +1,172 @@
+import { EspalierElementBase } from "../shared/esp-element-base.js";
+import { type EspalierFormField } from "../form-item/esp-form-item.js";
+/**
+ * A toggle switch for boolean on/off values. Uses a CSS-only
+ * track-and-thumb design with a smooth sliding transition.
+ * Functionally equivalent to a checkbox but visually communicates
+ * an immediate state change rather than a deferred selection.
+ *
+ * ```html
+ * <esp-box>
+ *   <esp-form-item label="Notifications">
+ *     <esp-switch value="notifications">
+ *       Enable notifications
+ *     </esp-switch>
+ *   </esp-form-item>
+ * </esp-box>
+ * ```
+ *
+ * ```html
+ * <esp-box>
+ *   <esp-switch checked value="dark-mode">
+ *     Dark mode
+ *   </esp-switch>
+ *   <esp-switch disabled value="disabled-opt">
+ *     Disabled option
+ *   </esp-switch>
+ * </esp-box>
+ * ```
+ *
+ * ### Text mode
+ *
+ * Set `mode="text"` with `off-label` and `on-label` to render a
+ * two-option text toggle instead of a track and thumb. This is
+ * ideal for binary choices like a billing-period selector:
+ *
+ * ```html
+ * <esp-box>
+ *   <esp-switch
+ *     mode="text"
+ *     off-label="Monthly"
+ *     on-label="Annual"
+ *     value="annual"
+ *   >Billing period</esp-switch>
+ * </esp-box>
+ * ```
+ *
+ * The slotted text is visually hidden in text mode and folded
+ * into the control's accessible label together with the current
+ * selected option. Screen readers will announce both the label
+ * and the active choice while the `off-label` / `on-label`
+ * text is presented visually.
+ *
+ * @slot - The label text for the switch. In default mode this
+ * renders beside the track; in text mode it is visually hidden
+ * and included in the control's accessible label.
+ *
+ * @event {CustomEvent<{ checked: boolean; value: string }>} value-changed -
+ * Fired when the switch is toggled. The detail contains the new
+ * `checked` state and the switch `value`.
+ *
+ * @cssprop --esp-switch-width - The width of the switch track.
+ * Defaults to `calc(var(--esp-size-normal-to-medium) * 1.75)`.
+ * @cssprop --esp-switch-height - The height of the switch track.
+ * Defaults to `var(--esp-size-normal-to-medium)`.
+ * @cssprop --esp-switch-thumb-size - The diameter of the thumb.
+ * Defaults to `calc(var(--esp-switch-height) - 4px)`.
+ * @cssprop --esp-switch-track-color - The track background color
+ * when the switch is off. Defaults to `var(--esp-color-border)`.
+ * @cssprop --esp-switch-track-color-on - The track background color
+ * when the switch is on. Defaults to `var(--esp-color-action-background)`.
+ * @cssprop --esp-switch-thumb-color - The thumb color.
+ * Defaults to `var(--esp-color-layer-1)`.
+ * @cssprop --esp-switch-focus-shadow - The color of the focus
+ * ring shadow. Defaults to `var(--esp-color-shadow)`.
+ * @cssprop --esp-switch-text-padding - Padding inside each text-mode
+ * label cell. Defaults to `var(--esp-size-tiny) var(--esp-size-small)`.
+ * @cssprop --esp-switch-text-font-size - Font size for text-mode labels.
+ * Defaults to `var(--esp-size-font)`.
+ * @cssprop --esp-switch-text-active-color - Text color of the active
+ * label in text mode. Defaults to `var(--esp-color-action-text)`.
+ * @cssprop --esp-switch-text-inactive-color - Text color of the inactive
+ * label in text mode. Defaults to `var(--esp-color-layer-1)`.
+ * @cssprop --esp-switch-text-highlight-color - Background color of the
+ * sliding highlight in text mode. Defaults to `var(--esp-color-action-background)`.
+ *
+ * @docPageTitle Switch
+ * @docUrl /components/switch
+ * @menuGroup Form Controls
+ * @menuLabel Switch
+ * @menuIcon button
+ */
+export declare class EspalierSwitch extends EspalierElementBase implements EspalierFormField {
+    static formAssociated: boolean;
+    /**
+     * The visual presentation of the switch.
+     * - `"switch"` (default) renders a track-and-thumb toggle.
+     * - `"text"` renders two side-by-side text labels with a
+     *   sliding highlight behind the active one.
+     */
+    mode: "switch" | "text";
+    /**
+     * Label shown for the unchecked (off) state when
+     * `mode="text"`.
+     */
+    offLabel: string;
+    /**
+     * Label shown for the checked (on) state when
+     * `mode="text"`.
+     */
+    onLabel: string;
+    /**
+     * Whether the switch is in the on state.
+     */
+    checked: boolean;
+    /**
+     * The value associated with this switch. Submitted with the
+     * form when the switch is on.
+     */
+    value: string;
+    /**
+     * The name used when the switch participates in a `<form>`.
+     *
+     * @type {string}
+     */
+    name: string;
+    /**
+     * When true, the switch must be on before the form can
+     * be submitted.
+     *
+     * @type {boolean}
+     */
+    required: boolean;
+    /**
+     * A custom message to display when the switch is required but
+     * not on. Defaults to `"Please toggle this switch to continue."`
+     * when not set.
+     *
+     * ```html
+     * <esp-switch required required-message="You must accept the terms.">
+     *   I accept
+     * </esp-switch>
+     * ```
+     *
+     * @type {string}
+     */
+    requiredMessage: string;
+    /**
+     * Controls whether the switch is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Focus the switch control.
+     */
+    focus(options?: FocusOptions): void;
+    /** Re-run constraint validation and dispatch `validity-changed`. */
+    validate(): void;
+    /** Check whether the current state is valid (delegates to ElementInternals). */
+    checkValidity(): boolean;
+    /** Called by the browser when the owning `<form>` is reset. */
+    formResetCallback(): void;
+    /** Called by the browser to restore form state (bfcache, etc.). */
+    formStateRestoreCallback(state: string): void;
+    /** Called by the browser when a parent `<fieldset>` is enabled or disabled. */
+    formDisabledCallback(isDisabled: boolean): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "esp-switch": EspalierSwitch;
+    }
+}

package/dist/switch/esp-switch.js

@@ -0,0 +1,150 @@
+var s=function(a,e,i,l){var c=arguments.length,o=c<3?e:l===null?l=Object.getOwnPropertyDescriptor(e,i):l,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(a,e,i,l);else for(var h=a.length-1;h>=0;h--)(n=a[h])&&(o=(c<3?n(o):c>3?n(e,i,o):n(e,i))||o);return c>3&&o&&Object.defineProperty(e,i,o),o};import{css as f,html as d}from"lit";import{customElement as v,property as r}from"lit/decorators.js";import{classMap as p}from"lit/directives/class-map.js";import{EspalierElementBase as u}from"../shared/esp-element-base.js";import{FormFieldController as b}from"../shared/form-field-controller.js";import{disabledControl as g,focusRing as m,srOnly as w}from"../shared/style-fragments.js";let t=class extends u{constructor(){super(...arguments),this.internals=this.attachInternals(),this.formCtrl=new b({host:this,internals:this.internals,getFormValue:()=>this.checked?this.value||"on":null,getValidity:()=>this.required&&!this.checked?{flags:{valueMissing:!0},message:this.requiredMessage||"Please toggle this switch to continue."}:null,onReset:()=>{this.checked=!1},onRestore:e=>{this.checked=e==="on"||e===this.value},onDisabled:e=>{this.disabled=e}}),this.mode="switch",this.offLabel="",this.onLabel="",this.checked=!1,this.value="",this.name="",this.required=!1,this.requiredMessage="",this.disabled=!1}focus(e){this.focusShadowElementAfterUpdate(".switch-control",e)}validate(){this.formCtrl.validate()}checkValidity(){return this.formCtrl.checkValidity()}toggle(){this.disabled||(this.checked=!this.checked,this.formCtrl.syncValue(),this.emitValueChanged({checked:this.checked,value:this.value}))}handleKeyDown(e){(e.key===" "||e.key==="Enter")&&(e.preventDefault(),this.toggle())}handleLabelSlotChange(){this.requestUpdate()}getCurrentTextModeLabel(){return(this.checked?this.onLabel:this.offLabel).trim()}getTextModeAriaLabel(){const e=this.textContent?.replace(/\s+/g," ").trim()??"",i=this.getCurrentTextModeLabel();return e&&i?`${e}: ${i}`:e||i}formResetCallback(){this.formCtrl.handleFormReset()}formStateRestoreCallback(e){this.formCtrl.handleFormStateRestore(e)}formDisabledCallback(e){this.formCtrl.handleFormDisabled(e)}render(){return this.mode==="text"?d`
+        <div
+          class="switch-control text-control"
+          role="switch"
+          aria-checked=${String(this.checked)}
+          aria-disabled=${String(this.disabled)}
+          aria-label=${this.getTextModeAriaLabel()}
+          tabindex=${this.disabled?-1:0}
+          @click=${this.toggle}
+          @keydown=${this.handleKeyDown}
+        >
+          <span class=${p({"text-option":!0,active:!this.checked})} aria-hidden="true"
+            >${this.offLabel}</span
+          >
+          <span class=${p({"text-option":!0,active:this.checked})} aria-hidden="true"
+            >${this.onLabel}</span
+          >
+          <span class="sr-only" aria-hidden="true">
+            <slot @slotchange=${this.handleLabelSlotChange}></slot>
+          </span>
+        </div>
+      `:d`
+      <div
+        class="switch-control"
+        role="switch"
+        aria-checked=${String(this.checked)}
+        aria-disabled=${String(this.disabled)}
+        tabindex=${this.disabled?-1:0}
+        @click=${this.toggle}
+        @keydown=${this.handleKeyDown}
+      >
+        <div class="track">
+          <div class="thumb"></div>
+        </div>
+        <span class="label"><slot></slot></span>
+      </div>
+    `}};t.formAssociated=!0,t.styles=[...u.styles,w,m(".switch-control:focus-visible","--esp-switch-focus-shadow"),m(".text-control:focus-visible","--esp-switch-focus-shadow"),g(".switch-control"),f`
+      :host {
+        display: block;
+      }
+
+      .switch-control {
+        display: inline-grid;
+        grid-template-columns: min-content auto;
+        align-items: center;
+        gap: var(--esp-size-tiny);
+        cursor: pointer;
+        font-family: var(--esp-font-body);
+        font-size: var(--esp-size-font);
+        color: var(--esp-color-text);
+        outline: none;
+        user-select: none;
+        border-radius: var(--esp-size-border-radius);
+        padding: calc(var(--esp-size-tiny) / 2);
+        > .label {
+          line-height: 1.3;
+        }
+      }
+
+      .track {
+        position: relative;
+        width: var(--esp-switch-width, calc(var(--esp-size-normal-to-medium) * 1.75));
+        height: var(--esp-switch-height, var(--esp-size-normal-to-medium));
+        background: var(--esp-switch-track-color, var(--esp-color-border));
+        border-radius: calc(var(--esp-switch-height, var(--esp-size-normal-to-medium)) / 2);
+        transition: background-color 0.2s ease;
+      }
+
+      :host([checked]) .track {
+        background: var(--esp-switch-track-color-on, var(--esp-color-action-background));
+      }
+
+      .thumb {
+        position: absolute;
+        top: 2px;
+        left: 2px;
+        width: var(
+          --esp-switch-thumb-size,
+          calc(var(--esp-switch-height, var(--esp-size-normal-to-medium)) - 4px)
+        );
+        height: var(
+          --esp-switch-thumb-size,
+          calc(var(--esp-switch-height, var(--esp-size-normal-to-medium)) - 4px)
+        );
+        background: var(--esp-switch-thumb-color, var(--esp-color-layer-1));
+        border-radius: 50%;
+        transition: transform 0.2s ease;
+        box-shadow: 0 1px 3px oklch(0 0 0 / 0.2);
+      }
+
+      :host([checked]) .thumb {
+        transform: translateX(
+          calc(
+            var(--esp-switch-width, calc(var(--esp-size-normal-to-medium) * 1.75)) - var(
+                --esp-switch-thumb-size,
+                calc(var(--esp-switch-height, var(--esp-size-normal-to-medium)) - 4px)
+              ) -
+              4px
+          )
+        );
+      }
+
+      
+
+      .text-control {
+        display: inline-grid;
+        grid-template-columns: 1fr 1fr;
+        position: relative;
+        background: var(--esp-switch-track-color, var(--esp-color-border));
+        border-radius: calc(var(--esp-size-border-radius) + 2px);
+        padding: 2px;
+        gap: 0;
+        font-family: var(--esp-font-body);
+        font-size: var(--esp-switch-text-font-size, var(--esp-size-font));
+        user-select: none;
+        cursor: pointer;
+        outline: none;
+
+        &::before {
+          content: "";
+          position: absolute;
+          top: 2px;
+          left: 2px;
+          width: calc(50% - 2px);
+          height: calc(100% - 4px);
+          background: var(--esp-switch-text-highlight-color, var(--esp-color-action-background));
+          border-radius: var(--esp-size-border-radius);
+          transition: transform 0.2s ease;
+        }
+      }
+
+      :host([checked]) .text-control::before {
+        transform: translateX(100%);
+      }
+
+      .text-option {
+        position: relative;
+        z-index: 1;
+        padding: var(--esp-switch-text-padding, var(--esp-size-tiny) var(--esp-size-small));
+        text-align: center;
+        line-height: 1.3;
+        color: var(--esp-switch-text-inactive-color, var(--esp-color-layer-1));
+        transition: color 0.2s ease;
+        white-space: nowrap;
+      }
+
+      .text-option.active {
+        color: var(--esp-switch-text-active-color, var(--esp-color-action-text));
+      }
+    `],s([r({type:String,reflect:!0})],t.prototype,"mode",void 0),s([r({attribute:"off-label"})],t.prototype,"offLabel",void 0),s([r({attribute:"on-label"})],t.prototype,"onLabel",void 0),s([r({type:Boolean,reflect:!0})],t.prototype,"checked",void 0),s([r({type:String})],t.prototype,"value",void 0),s([r({type:String,reflect:!0})],t.prototype,"name",void 0),s([r({type:Boolean,reflect:!0})],t.prototype,"required",void 0),s([r({attribute:"required-message"})],t.prototype,"requiredMessage",void 0),s([r({type:Boolean,reflect:!0})],t.prototype,"disabled",void 0),t=s([v("esp-switch")],t);export{t as EspalierSwitch};

package/dist/tabs/esp-tab-group.d.ts

@@ -0,0 +1,153 @@
+import { type PropertyValues } from "lit";
+import { EspalierElementBase } from "../shared/esp-element-base.js";
+/**
+ * A tabbed interface that groups multiple
+ * [esp-tab](/components/tabs) elements. The tab strip is
+ * generated automatically from each child's `label` attribute.
+ * Only one tab panel is visible at a time.
+ *
+ * ```html
+ * <esp-tab-group>
+ *   <esp-tab label="Overview">
+ *     <p>Overview content goes here.</p>
+ *   </esp-tab>
+ *   <esp-tab label="Details">
+ *     <p>Detailed information lives here.</p>
+ *   </esp-tab>
+ *   <esp-tab label="Settings">
+ *     <p>Configuration options.</p>
+ *   </esp-tab>
+ * </esp-tab-group>
+ * ```
+ *
+ * ### Pre-selected tab
+ *
+ * Set `active` on a child `esp-tab` to make it the initially
+ * visible panel:
+ *
+ * ```html
+ * <esp-tab-group>
+ *   <esp-tab label="Alpha">
+ *     <p>Alpha panel.</p>
+ *   </esp-tab>
+ *   <esp-tab label="Beta" active>
+ *     <p>Beta starts active.</p>
+ *   </esp-tab>
+ * </esp-tab-group>
+ * ```
+ *
+ * ### Disabled tab
+ *
+ * Individual tabs can be disabled:
+ *
+ * ```html
+ * <esp-tab-group>
+ *   <esp-tab label="Available">
+ *     <p>You can select this tab.</p>
+ *   </esp-tab>
+ *   <esp-tab label="Locked" disabled>
+ *     <p>This tab cannot be reached.</p>
+ *   </esp-tab>
+ *   <esp-tab label="Also available">
+ *     <p>This tab works too.</p>
+ *   </esp-tab>
+ * </esp-tab-group>
+ * ```
+ *
+ * ### Disabled group
+ *
+ * Set `disabled` on the group to disable all tabs at once:
+ *
+ * ```html
+ * <esp-tab-group disabled>
+ *   <esp-tab label="One">
+ *     <p>All tabs are disabled.</p>
+ *   </esp-tab>
+ *   <esp-tab label="Two">
+ *     <p>Cannot switch to this.</p>
+ *   </esp-tab>
+ * </esp-tab-group>
+ * ```
+ *
+ * ### Color variants
+ *
+ * ```html
+ * <esp-tab-group variant="complementary">
+ *   <esp-tab label="Complementary A">
+ *     <p>Complementary variant content.</p>
+ *   </esp-tab>
+ *   <esp-tab label="Complementary B">
+ *     <p>More complementary content.</p>
+ *   </esp-tab>
+ * </esp-tab-group>
+ * ```
+ *
+ * ### Listening for tab changes
+ *
+ * ```html
+ * <esp-tab-group>
+ *   <esp-tab label="Tab 1">
+ *     <p>First panel.</p>
+ *   </esp-tab>
+ *   <esp-tab label="Tab 2">
+ *     <p>Second panel.</p>
+ *   </esp-tab>
+ * </esp-tab-group>
+ * <script>
+ *   const tabs = findByTagName("esp-tab-group")[0];
+ *   tabs.addEventListener("esp-tab-changed", (ev) => {
+ *     console.log("Switched to:", ev.detail.label, "at index", ev.detail.index);
+ *   });
+ * </script>
+ * ```
+ *
+ * @customElement esp-tab-group
+ * @slot - Place `esp-tab` elements in the default slot.
+ *
+ * @csspart tab-list - The tab strip container.
+ * @csspart tab-button - Each individual tab button in the strip.
+ * @csspart panels - The panel area below the tab strip.
+ *
+ * @cssprop --esp-tab-color-border - Border color of the tab
+ * group container.
+ * @cssprop --esp-tab-color-background - Background color of the
+ * overall component.
+ * @cssprop --esp-tab-color-strip-background - Background color
+ * of the tab strip.
+ * @cssprop --esp-tab-color-button-hover - Tab button hover
+ * background.
+ * @cssprop --esp-tab-color-button-active - Active tab button
+ * background.
+ * @cssprop --esp-tab-color-text - Text color for tab buttons.
+ * @cssprop --esp-tab-size-padding - Padding inside the panel
+ * area and tab buttons.
+ *
+ * @event {CustomEvent<{ index: number; label: string }>} esp-tab-changed -
+ * Fired when the active tab changes. The detail contains
+ * the `index` and `label` of the newly active tab.
+ *
+ * @docPageTitle Tab Group
+ * @docUrl /components/tabs
+ * @menuGroup Navigation
+ * @menuLabel Tab Group
+ * @menuIcon layout-navbar
+ *
+ */
+export declare class EspalierTabGroup extends EspalierElementBase {
+    /**
+     * Disables all tabs in the group, preventing any tab from
+     * being selected.
+     *
+     * @type {boolean}
+     */
+    disabled: boolean;
+    connectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "esp-tab-group": EspalierTabGroup;
+    }
+}

package/dist/tabs/esp-tab-group.js

@@ -0,0 +1,109 @@
+var b=function(i,t,a,e){var s=arguments.length,o=s<3?t:e===null?e=Object.getOwnPropertyDescriptor(t,a):e,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")o=Reflect.decorate(i,t,a,e);else for(var l=i.length-1;l>=0;l--)(r=i[l])&&(o=(s<3?r(o):s>3?r(t,a,o):r(t,a))||o);return s>3&&o&&Object.defineProperty(t,a,o),o};import{css as u,html as d,nothing as v}from"lit";import{customElement as f,property as g,state as m}from"lit/decorators.js";import{createRef as y,ref as w}from"lit/directives/ref.js";import{EspalierElementBase as c}from"../shared/esp-element-base.js";import{EspalierTab as p}from"./esp-tab.js";import{disabledControl as k}from"../shared/style-fragments.js";let n=class extends c{constructor(){super(...arguments),this.panelsSlot=y(),this.disabled=!1,this.tabData=[]}getTabs(){const t=this.panelsSlot.value?Array.from(this.panelsSlot.value.assignedElements()).filter(a=>a instanceof p):[];return t.length>0?t:Array.from(this.children).filter(a=>a instanceof p)}syncTabData(){const t=this.getTabs();if(t.length===0){this.tabData=[];return}const a=t.find(e=>e.active&&!e.disabled);if(a)for(const e of t)e!==a&&(e.active=!1);else{const e=t.find(s=>!s.disabled);e?e.active=!0:t[0].active=!0}this.tabData=t.map((e,s)=>{const o=`esp-tab-btn-${this.correlationId}-${s}`,r=`esp-tab-panel-${this.correlationId}-${s}`;return e.panelId=r,e.ariaLabelledBy=o,{label:e.label,active:e.active,disabled:this.disabled||e.disabled,buttonId:o,panelId:r}})}activateTab(t){const a=this.getTabs(),e=a[t];if(!(!e||e.disabled||this.disabled)){for(const s of a)s.active=s===e;this.syncTabData(),this.dispatchEvent(new CustomEvent("esp-tab-changed",{detail:{index:t,label:e.label},bubbles:!0,composed:!0}))}}handleTabClick(t){this.activateTab(t),this.updateComplete.then(()=>{this.shadowRoot?.getElementById(this.tabData[t]?.buttonId)?.focus()})}handleKeyDown(t){if(!["ArrowLeft","ArrowRight","Home","End"].includes(t.key))return;t.preventDefault();const e=this.tabData.map((l,h)=>({td:l,i:h})).filter(({td:l})=>!l.disabled).map(({i:l})=>l);if(e.length===0)return;const s=this.tabData.findIndex(l=>l.active),o=e.indexOf(s);let r;switch(t.key){case"ArrowRight":o===-1?r=e[0]:r=e[(o+1)%e.length];break;case"ArrowLeft":o===-1?r=e[e.length-1]:r=e[(o-1+e.length)%e.length];break;case"Home":r=e[0];break;case"End":r=e[e.length-1];break;default:return}this.activateTab(r),this.updateComplete.then(()=>{this.shadowRoot?.getElementById(this.tabData[r]?.buttonId)?.focus()})}handleChildUpdated(){this.syncTabData()}handleSlotChange(){this.syncTabData()}connectedCallback(){super.connectedCallback(),this.syncTabData()}willUpdate(t){super.willUpdate(t),t.has("disabled")&&this.syncTabData()}render(){return d`
+      <div class="tab-container">
+        <div class="tab-list" role="tablist" part="tab-list" @keydown=${this.handleKeyDown}>
+          ${this.tabData.map((t,a)=>d`
+              <button
+                id=${t.buttonId}
+                class="tab-button"
+                role="tab"
+                part="tab-button"
+                aria-selected=${t.active?"true":"false"}
+                aria-controls=${t.panelId}
+                aria-disabled=${t.disabled?"true":v}
+                tabindex=${t.active?"0":"-1"}
+                ?disabled=${t.disabled}
+                @click=${()=>this.handleTabClick(a)}
+              >
+                ${t.label}
+              </button>
+            `)}
+        </div>
+        <div class="panels" part="panels">
+          <slot
+            ${w(this.panelsSlot)}
+            @slotchange=${this.handleSlotChange}
+            @esp-tab-updated=${this.handleChildUpdated}
+          ></slot>
+        </div>
+      </div>
+    `}};n.styles=[...c.styles,k(".tab-button[disabled]"),u`
+      :host {
+        display: block;
+        --_esp-tab-resolved-button-hover: var(
+          --esp-tab-color-button-hover,
+          oklch(from var(--esp-color-layer-1) calc(l * 0.92) c h)
+        );
+      }
+
+      :host([scheme="light"]) {
+        --_esp-tab-resolved-button-hover: var(
+          --esp-tab-color-button-hover,
+          oklch(from var(--esp-color-layer-1) calc(l + (1 - l) * 0.4) c h)
+        );
+      }
+
+      .tab-container {
+        background-color: var(--esp-tab-color-background, var(--esp-color-layer-1));
+        border-radius: var(--esp-size-border-radius);
+        box-shadow: 1px 1px 4px var(--esp-color-shadow);
+        border: 1px solid var(--esp-tab-color-border, var(--esp-color-border));
+        overflow: hidden;
+      }
+
+      .tab-list {
+        display: flex;
+        overflow-x: auto;
+        background-color: var(--esp-tab-color-strip-background, var(--esp-color-layer-1));
+        border-bottom: 1px solid var(--esp-tab-color-border, var(--esp-color-border));
+      }
+
+      .tab-button {
+        font-family: var(--esp-font-body);
+        font-size: var(--esp-size-font);
+        font-weight: 600;
+        color: var(--esp-tab-color-text, var(--esp-color-headings));
+        background: transparent;
+        border: none;
+        border-bottom: 2px solid transparent;
+        padding: var(--esp-tab-size-padding, var(--esp-size-padding));
+        cursor: pointer;
+        user-select: none;
+        white-space: nowrap;
+        transition:
+          background-color cubic-bezier(0.075, 0.82, 0.165, 1) 0.5s,
+          border-color cubic-bezier(0.075, 0.82, 0.165, 1) 0.3s;
+        outline: none;
+      }
+
+      .tab-button:hover:not([disabled]):not([aria-selected="true"]) {
+        background-color: var(--_esp-tab-resolved-button-hover);
+      }
+
+      .tab-button[aria-selected="true"] {
+        background-color: var(--esp-tab-color-button-active, var(--esp-color-layer-2));
+        border-bottom-color: var(--esp-tab-color-text, var(--esp-color-headings));
+        border-left: 1px solid var(--esp-tab-color-border, var(--esp-color-border));
+        border-right: 1px solid var(--esp-tab-color-border, var(--esp-color-border));
+        cursor: default;
+      }
+
+      .tab-button:first-child[aria-selected="true"] {
+        border-left: none;
+      }
+
+      .tab-button:focus-visible {
+        box-shadow: inset 0 0 0 2px var(--esp-tab-color-text, var(--esp-color-headings));
+      }
+
+      :host([disabled]) .tab-list {
+        opacity: 0.5;
+      }
+
+      :host([disabled]) .tab-button {
+        cursor: not-allowed;
+      }
+
+      .panels {
+        
+      }
+    `],b([g({type:Boolean,reflect:!0})],n.prototype,"disabled",void 0),b([m()],n.prototype,"tabData",void 0),n=b([f("esp-tab-group")],n);export{n as EspalierTabGroup};

package/dist/tabs/esp-tab.d.ts

@@ -0,0 +1,90 @@
+import { type PropertyValues } from "lit";
+import { EspalierElementBase } from "../shared/esp-element-base.js";
+/**
+ * A single tab panel used inside
+ * [esp-tab-group](/components/tabs). Each tab provides a
+ * `label` that appears in the generated tab strip and a default
+ * slot for the panel content.
+ *
+ * ```html
+ * <esp-tab-group>
+ *   <esp-tab label="First">
+ *     <p>Content for the first tab.</p>
+ *   </esp-tab>
+ *   <esp-tab label="Second">
+ *     <p>Content for the second tab.</p>
+ *   </esp-tab>
+ * </esp-tab-group>
+ * ```
+ *
+ * ### Pre-selected tab
+ *
+ * Set the `active` attribute to make a tab active on load:
+ *
+ * ```html
+ * <esp-tab-group>
+ *   <esp-tab label="One">
+ *     <p>Not active by default.</p>
+ *   </esp-tab>
+ *   <esp-tab label="Two" active>
+ *     <p>This tab starts active.</p>
+ *   </esp-tab>
+ * </esp-tab-group>
+ * ```
+ *
+ * ### Disabled tab
+ *
+ * ```html
+ * <esp-tab-group>
+ *   <esp-tab label="Enabled">
+ *     <p>This tab works normally.</p>
+ *   </esp-tab>
+ *   <esp-tab label="Disabled" disabled>
+ *     <p>Cannot reach this panel.</p>
+ *   </esp-tab>
+ * </esp-tab-group>
+ * ```
+ *
+ * @customElement esp-tab
+ * @slot - The default slot holds the panel content displayed
+ * when this tab is active.
+ * @event {CustomEvent} esp-tab-updated - Fired when the tab's label, active state, or disabled state changes so the parent tab group can refresh its derived metadata.
+ *
+ * @csspart panel - The panel wrapper element.
+ *
+ * @cssprop --esp-tab-size-padding - Padding inside the panel
+ * area.
+ *
+ * @docPageTitle Tab
+ * @docUrl /components/tabs/tab
+ * @menuGroup Navigation
+ *
+ */
+export declare class EspalierTab extends EspalierElementBase {
+    /**
+     * The text displayed in the tab button within the tab strip.
+     *
+     * @type {string}
+     */
+    label: string;
+    /**
+     * Whether this tab is currently active (its panel is visible).
+     *
+     * @type {boolean}
+     */
+    active: boolean;
+    /**
+     * Whether this tab is disabled (cannot be selected).
+     *
+     * @type {boolean}
+     */
+    disabled: boolean;
+    protected updated(changedProperties: PropertyValues): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "esp-tab": EspalierTab;
+    }
+}