@helixui/library 1.0.1 → 1.1.2-next.1

package/dist/shared/hx-style-scope-BroUu83L.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-style-scope-BroUu83L.js","sources":["../../src/components/hx-style-scope/hx-style-scope.styles.ts","../../src/utilities/lightStyleRegistry.ts","../../src/utilities/generateScopedSelectors.ts","../../src/utilities/injectLightStyles.ts","../../src/components/hx-style-scope/hx-style-scope.ts"],"sourcesContent":["import { css } from 'lit';\n\n/**\n * Styles for hx-style-scope.\n *\n * The element acts as a transparent wrapper — `display: contents` removes it\n * from the layout box model so slotted children lay out as if the wrapper\n * were absent. This prevents hx-style-scope from introducing unexpected\n * layout shifts or block-formatting-context changes.\n */\nexport const hxStyleScopeStyles = css`\n  :host {\n    display: contents;\n  }\n`;\n","/**\n * @module lightStyleRegistry\n *\n * A Map-based registry that tracks which component stylesheets have been\n * injected into the document's light DOM. Used by injectLightStyles to\n * deduplicate style injection — each component type is injected at most once\n * per page load.\n *\n * @example\n * ```ts\n * import { isStyleRegistered, registerStyle } from './lightStyleRegistry.js';\n *\n * if (!isStyleRegistered('hx-card')) {\n *   const el = document.createElement('style');\n *   el.textContent = css;\n *   document.head.appendChild(el);\n *   registerStyle('hx-card', el);\n * }\n * ```\n */\n\n/**\n * Primary registry mapping component names to their injected HTMLStyleElement.\n * Keyed by component tag name (e.g. `'hx-card'`).\n */\nexport const lightStyleRegistry: Map<string, HTMLStyleElement> = new Map();\n\n/**\n * Returns true if a stylesheet for the given component has already been\n * injected into the document.\n *\n * @param componentName - The component tag name (e.g. `'hx-card'`).\n */\nexport function isStyleRegistered(componentName: string): boolean {\n  return lightStyleRegistry.has(componentName);\n}\n\n/**\n * Records a stylesheet element in the registry for the given component.\n * Called after the element has been appended to the document.\n *\n * @param componentName - The component tag name (e.g. `'hx-card'`).\n * @param el - The HTMLStyleElement that was injected.\n */\nexport function registerStyle(componentName: string, el: HTMLStyleElement): void {\n  lightStyleRegistry.set(componentName, el);\n}\n","/**\n * @module generateScopedSelectors\n *\n * Generates CSS with all selectors scoped under a `[data-hx-styled=\"componentName\"]`\n * attribute selector. This ensures injected light DOM styles only apply to content\n * wrapped in `<hx-style-scope component=\"...\">` and do not leak to the rest of the page.\n *\n * @example\n * ```ts\n * import { generateScopedSelectors } from './generateScopedSelectors.js';\n *\n * const scoped = generateScopedSelectors('hx-card', 'p { color: red; }');\n * // '[data-hx-styled=\"hx-card\"] p { color: red; }'\n * ```\n */\n\n/**\n * Wraps all CSS selectors to be scoped under `[data-hx-styled=\"componentName\"]`.\n *\n * Handles:\n * - Standard selectors: `p { ... }` → `[data-hx-styled=\"hx-card\"] p { ... }`\n * - `::slotted(*)` patterns: `::slotted(p) { ... }` → `[data-hx-styled=\"hx-card\"] p { ... }`\n * - At-rules (`@media`, `@supports`, etc.) are preserved with their inner rules scoped\n * - `:host` selectors are replaced with the scope attribute selector\n *\n * @param componentName - The component tag name used as the scope identifier.\n * @param css - The CSS string to transform.\n * @returns The transformed CSS with all selectors scoped.\n */\nexport function generateScopedSelectors(componentName: string, css: string): string {\n  const scopeAttr = `[data-hx-styled=\"${componentName}\"]`;\n  return transformCss(css, scopeAttr);\n}\n\n/**\n * Returns the character at position `i` in `str`, or an empty string if out of bounds.\n * Avoids the `string | undefined` issue from `noUncheckedIndexedAccess`.\n */\nfunction charAt(str: string, i: number): string {\n  return str[i] ?? '';\n}\n\n/**\n * Recursively transforms CSS text, scoping all selectors under the given\n * attribute selector prefix.\n *\n * @param css - The CSS text to transform.\n * @param scopeAttr - The attribute selector to prepend (e.g. `[data-hx-styled=\"hx-card\"]`).\n * @returns The scoped CSS string.\n */\nfunction transformCss(css: string, scopeAttr: string): string {\n  const result: string[] = [];\n  let i = 0;\n  const len = css.length;\n\n  while (i < len) {\n    // Skip whitespace\n    while (i < len && /\\s/.test(charAt(css, i))) {\n      result.push(charAt(css, i));\n      i++;\n    }\n\n    if (i >= len) break;\n\n    // Check for at-rule (e.g. @media, @supports, @keyframes)\n    if (charAt(css, i) === '@') {\n      const atBlock = extractAtRule(css, i);\n      result.push(transformAtRule(atBlock.text, scopeAttr));\n      i = atBlock.end;\n      continue;\n    }\n\n    // Extract a selector block up to the opening brace\n    const selectorEnd = css.indexOf('{', i);\n    if (selectorEnd === -1) break;\n\n    const selectorRaw = css.slice(i, selectorEnd);\n    const bodyStart = selectorEnd + 1;\n    const bodyEnd = findMatchingBrace(css, selectorEnd);\n\n    if (bodyEnd === -1) break;\n\n    const body = css.slice(bodyStart, bodyEnd);\n    const scopedSelector = scopeSelector(selectorRaw, scopeAttr);\n    result.push(`${scopedSelector}{${body}}`);\n    i = bodyEnd + 1;\n  }\n\n  return result.join('');\n}\n\n/**\n * Scopes a raw selector string under the given attribute selector.\n * Handles comma-separated selectors, `::slotted()`, and `:host`.\n *\n * @param selectorRaw - The raw selector string (may be comma-separated).\n * @param scopeAttr - The attribute selector prefix.\n * @returns The scoped selector string.\n */\nfunction scopeSelector(selectorRaw: string, scopeAttr: string): string {\n  return selectorRaw\n    .split(',')\n    .map((part) => {\n      const trimmed = part.trim();\n\n      // Replace ::slotted(*) with a direct descendant selector\n      if (trimmed.startsWith('::slotted(') && trimmed.endsWith(')')) {\n        const inner = trimmed.slice('::slotted('.length, -1).trim();\n        return `${scopeAttr} ${inner}`;\n      }\n\n      // Replace :host with the scope attribute selector\n      if (trimmed === ':host' || trimmed.startsWith(':host(') || trimmed.startsWith(':host ')) {\n        return trimmed.replace(/^:host(\\([^)]*\\))?/, scopeAttr);\n      }\n\n      // Standard selector — prepend scope\n      return `${scopeAttr} ${trimmed}`;\n    })\n    .join(', ');\n}\n\n/**\n * Handles transformation of an at-rule block. For container at-rules\n * (`@media`, `@supports`, `@layer`, `@container`) the inner rules are scoped.\n * Non-container at-rules (e.g. `@keyframes`, `@charset`) are passed through unchanged.\n *\n * @param atRuleText - The full at-rule text including its block.\n * @param scopeAttr - The attribute selector prefix.\n * @returns The transformed at-rule text.\n */\nfunction transformAtRule(atRuleText: string, scopeAttr: string): string {\n  const containerAtRules = /^@(media|supports|layer|container|document)\\b/;\n  const braceIndex = atRuleText.indexOf('{');\n\n  if (braceIndex === -1 || !containerAtRules.test(atRuleText.trim())) {\n    return atRuleText;\n  }\n\n  const head = atRuleText.slice(0, braceIndex + 1);\n  const innerEnd = atRuleText.lastIndexOf('}');\n  const inner = atRuleText.slice(braceIndex + 1, innerEnd);\n  const tail = atRuleText.slice(innerEnd);\n\n  return `${head}${transformCss(inner, scopeAttr)}${tail}`;\n}\n\n/**\n * Extracts a complete at-rule (potentially with a block) starting at index `start`.\n * Returns the text and the end index.\n */\nfunction extractAtRule(css: string, start: number): { text: string; end: number } {\n  // Find either ';' (simple at-rule) or the matching '{...}' (block at-rule)\n  let i = start;\n  while (i < css.length && charAt(css, i) !== '{' && charAt(css, i) !== ';') {\n    i++;\n  }\n\n  if (i >= css.length) {\n    return { text: css.slice(start), end: css.length };\n  }\n\n  if (charAt(css, i) === ';') {\n    return { text: css.slice(start, i + 1), end: i + 1 };\n  }\n\n  // Block at-rule — find matching closing brace\n  const end = findMatchingBrace(css, i);\n  if (end === -1) {\n    return { text: css.slice(start), end: css.length };\n  }\n\n  return { text: css.slice(start, end + 1), end: end + 1 };\n}\n\n/**\n * Finds the index of the closing `}` that matches the `{` at `openIndex`.\n * Returns -1 if no matching brace is found.\n */\nfunction findMatchingBrace(css: string, openIndex: number): number {\n  let depth = 0;\n  for (let i = openIndex; i < css.length; i++) {\n    const ch = charAt(css, i);\n    if (ch === '{') depth++;\n    else if (ch === '}') {\n      depth--;\n      if (depth === 0) return i;\n    }\n  }\n  return -1;\n}\n","/**\n * @module injectLightStyles\n *\n * Core utility for injecting scoped `<style>` elements into `document.head`\n * to style light DOM slotted content in HELiX components. Uses the\n * `lightStyleRegistry` to deduplicate — each component type is injected at\n * most once per page lifetime.\n *\n * This is the primary mechanism for ensuring Drupal-slotted content inherits\n * proper typography and spacing when rendered into HELiX components.\n *\n * @example\n * ```ts\n * import { injectLightStyles } from '../../utilities/injectLightStyles.js';\n *\n * // In connectedCallback:\n * injectLightStyles('hx-card', 'p { font-size: var(--hx-font-size-md); }');\n * ```\n */\n\nimport { isStyleRegistered, registerStyle } from './lightStyleRegistry.js';\nimport { generateScopedSelectors } from './generateScopedSelectors.js';\n\n/**\n * Injects a scoped `<style>` element into `document.head` for light DOM content\n * belonging to `componentName`. The CSS is automatically scoped via\n * `generateScopedSelectors` so styles only apply inside\n * `[data-hx-styled=\"componentName\"]` wrappers.\n *\n * Safe to call multiple times — subsequent calls for the same `componentName`\n * are no-ops (deduplication via `lightStyleRegistry`).\n *\n * No-op in SSR environments where `document` is not defined.\n *\n * @param componentName - The component tag name used as the scope identifier\n *   (e.g. `'hx-card'`). Must be unique per component type.\n * @param css - The raw CSS to scope and inject. Selectors will be prefixed with\n *   `[data-hx-styled=\"componentName\"]`.\n */\nexport function injectLightStyles(componentName: string, css: string): void {\n  if (typeof document === 'undefined') return;\n\n  if (isStyleRegistered(componentName)) return;\n\n  const scopedCss = generateScopedSelectors(componentName, css);\n\n  const styleEl = document.createElement('style');\n  styleEl.setAttribute('data-hx-light-styles', componentName);\n  styleEl.textContent = scopedCss;\n\n  document.head.appendChild(styleEl);\n  registerStyle(componentName, styleEl);\n}\n","import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hxStyleScopeStyles } from './hx-style-scope.styles.js';\nimport { injectLightStyles } from '../../utilities/injectLightStyles.js';\n\n/**\n * A transparent wrapper component that injects scoped light DOM styles for its\n * slotted children. Designed for use in Drupal Twig templates where slotted\n * content lives in the light DOM and cannot inherit Shadow DOM styles.\n *\n * On connection, the component:\n * 1. Sets `data-hx-styled` on itself so scoped CSS selectors resolve correctly.\n * 2. Calls `injectLightStyles` to inject a `<style>` into `document.head` — once\n *    per component type, deduplicated via `lightStyleRegistry`.\n *\n * The element renders as `display: contents` so it does not affect layout.\n *\n * @summary Scoped light DOM style injection wrapper for Drupal-slotted content.\n *\n * @tag hx-style-scope\n *\n * @slot - Default slot for any light DOM content that should receive scoped styles.\n *\n * @example\n * ```html\n * <hx-style-scope component=\"hx-card\">\n *   <p>This paragraph will receive hx-card light DOM styles.</p>\n * </hx-style-scope>\n * ```\n *\n * @example Drupal Twig usage via macro\n * ```twig\n * {% import '@helix/hx-style-scope.macro.twig' as hx %}\n * {{ hx.scope('hx-card', content) }}\n * ```\n */\n@customElement('hx-style-scope')\nexport class HxStyleScope extends LitElement {\n  static override styles = [hxStyleScopeStyles];\n\n  /**\n   * The component tag name whose light DOM styles should be injected.\n   * Must match a registered component name (e.g. `'hx-card'`).\n   *\n   * When set, the element also applies `data-hx-styled` to itself so that\n   * scoped CSS selectors generated by `generateScopedSelectors` resolve\n   * correctly against slotted child elements.\n   *\n   * @attr component\n   */\n  @property({ type: String, reflect: true })\n  component: string = '';\n\n  /**\n   * The CSS to inject as scoped light DOM styles. When provided alongside\n   * `component`, this CSS will be scoped under `[data-hx-styled=\"component\"]`\n   * and injected into `document.head` (once per component type).\n   *\n   * If omitted, `injectLightStyles` is still called but with an empty string,\n   * which is a no-op for actual style injection.\n   *\n   * @attr light-css\n   */\n  @property({ type: String, attribute: 'light-css' })\n  lightCss: string = '';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._applyScope();\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('component') || changed.has('lightCss')) {\n      this._applyScope();\n    }\n  }\n\n  /**\n   * Applies the `data-hx-styled` attribute and triggers style injection.\n   * Called on connect and whenever `component` or `lightCss` changes.\n   */\n  private _applyScope(): void {\n    if (!this.component) return;\n\n    // Set the scoping attribute so CSS selectors from generateScopedSelectors work.\n    this.setAttribute('data-hx-styled', this.component);\n\n    if (this.lightCss) {\n      injectLightStyles(this.component, this.lightCss);\n    }\n  }\n\n  override render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-style-scope': HxStyleScope;\n  }\n}\n"],"names":["hxStyleScopeStyles","css","lightStyleRegistry","isStyleRegistered","componentName","registerStyle","el","generateScopedSelectors","scopeAttr","transformCss","charAt","str","i","result","len","atBlock","extractAtRule","transformAtRule","selectorEnd","selectorRaw","bodyStart","bodyEnd","findMatchingBrace","body","scopedSelector","scopeSelector","part","trimmed","inner","atRuleText","containerAtRules","braceIndex","head","innerEnd","tail","start","end","openIndex","depth","ch","injectLightStyles","scopedCss","styleEl","HxStyleScope","LitElement","changed","html","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/shared/{hx-switch-DkKchcuP.js → hx-switch-C0Lp5RGy.js}

@@ -52,7 +52,10 @@ const b = p`
 
   .switch__track:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-switch-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
+      var(
+        --hx-switch-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+      );
     outline-offset: var(--hx-focus-ring-offset, 2px);
   }
 
@@ -177,7 +180,7 @@ var g = Object.defineProperty, k = Object.getOwnPropertyDescriptor, i = (t, r, l
 };
 let e = class extends x {
   constructor() {
-    super(), this.checked = !1, this.disabled = !1, this.required = !1, this.name = "", this.value = "on", this.label = "", this.size = "md", this.error = "", this.helpText = "", this._hasErrorSlot = !1, this._hasDefaultSlot = !1, this._switchId = `hx-switch-${++e._instanceCounter}`, this._labelId = `${this._switchId}-label`, this._helpTextId = `${this._switchId}-help`, this._errorId = `${this._switchId}-error`, this._internals = this.attachInternals();
+    super(), this.checked = !1, this.disabled = !1, this.required = !1, this.name = "", this.value = "on", this.label = "", this.size = "md", this.error = "", this.helpText = "", this.requiredMessage = "This field is required.", this._hasErrorSlot = !1, this._hasDefaultSlot = !1, this._switchId = `hx-switch-${++e._instanceCounter}`, this._labelId = `${this._switchId}-label`, this._helpTextId = `${this._switchId}-help`, this._errorId = `${this._switchId}-error`, this._internals = this.attachInternals();
   }
   // ─── Lifecycle ───
   updated(t) {
@@ -205,38 +208,42 @@ let e = class extends x {
     return this._internals.reportValidity();
   }
   /** Recalculates and sets the validity state based on required and checked. */
+  /** @internal */
   _updateValidity() {
     this.required && !this.checked ? this._internals.setValidity(
       { valueMissing: !0 },
-      this.error || "This field is required.",
+      this.error || this.requiredMessage,
       this._trackEl ?? void 0
     ) : this._internals.setValidity({});
   }
-  /** Called by the form when it resets. */
+  /** @internal */
   formResetCallback() {
     this.checked = !1, this._internals.setFormValue(null);
   }
-  /** Called when the form restores state (e.g., back/forward navigation). */
+  /** @internal */
   formStateRestoreCallback(t, r) {
     typeof t == "string" && (this.checked = t === this.value);
   }
-  /** Called when a parent fieldset is disabled/enabled. */
+  /** @internal */
   formDisabledCallback(t) {
     this.disabled = t;
   }
   // ─── Slot Handlers ───
   /** Updates _hasErrorSlot when error slot content changes. */
+  /** @internal */
   _handleErrorSlotChange(t) {
     const r = t.target;
     this._hasErrorSlot = r.assignedNodes({ flatten: !0 }).length > 0;
   }
   /** Updates _hasDefaultSlot when default slot content changes. */
+  /** @internal */
   _handleDefaultSlotChange(t) {
     const r = t.target;
     this._hasDefaultSlot = r.assignedNodes({ flatten: !0 }).length > 0;
   }
   // ─── Event Handling ───
   /** Toggles checked state and dispatches hx-change event. */
+  /** @internal */
   _toggle() {
     this.disabled || (this.checked = !this.checked, this.dispatchEvent(
       new CustomEvent("hx-change", {
@@ -247,10 +254,12 @@ let e = class extends x {
     ));
   }
   /** Handles click events on the track. */
+  /** @internal */
   _handleClick() {
     this._toggle();
   }
   /** Handles keydown events — Space toggles the switch per ARIA APG. */
+  /** @internal */
   _handleKeyDown(t) {
     t.key === " " && (t.preventDefault(), this._toggle());
   }
@@ -343,6 +352,9 @@ i([
 i([
   s({ type: String, attribute: "help-text" })
 ], e.prototype, "helpText", 2);
+i([
+  s({ attribute: "required-message" })
+], e.prototype, "requiredMessage", 2);
 i([
   _(".switch__track")
 ], e.prototype, "_trackEl", 2);
@@ -358,4 +370,4 @@ e = i([
 export {
   e as H
 };
-//# sourceMappingURL=hx-switch-DkKchcuP.js.map
+//# sourceMappingURL=hx-switch-C0Lp5RGy.js.map

package/dist/shared/hx-switch-C0Lp5RGy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hx-switch-C0Lp5RGy.js","sources":["../../src/components/hx-switch/hx-switch.styles.ts","../../src/components/hx-switch/hx-switch.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const helixSwitchStyles = css`\n  :host {\n    display: block;\n  }\n\n  :host([disabled]) {\n    opacity: var(--hx-opacity-disabled, 0.5);\n    pointer-events: none;\n  }\n\n  * {\n    box-sizing: border-box;\n  }\n\n  /* --- Layout --- */\n\n  .switch {\n    display: flex;\n    flex-direction: column;\n    gap: var(--hx-space-1, 0.25rem);\n    font-family: var(--hx-font-family-sans, sans-serif);\n  }\n\n  .switch__control-row {\n    display: flex;\n    align-items: center;\n    gap: var(--hx-space-2, 0.5rem);\n  }\n\n  /* --- Track --- */\n\n  .switch__track {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n    border: none;\n    padding: 0;\n    border-radius: var(--hx-border-radius-full, 9999px);\n    background-color: var(--hx-switch-track-bg, var(--hx-color-neutral-300, #ced4da));\n    cursor: pointer;\n    transition: background-color var(--hx-transition-fast, 150ms ease);\n    outline: none;\n    -webkit-appearance: none;\n    appearance: none;\n  }\n\n  .switch__track:focus-visible {\n    outline: var(--hx-focus-ring-width, 2px) solid\n      var(\n        --hx-switch-focus-ring-color,\n        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))\n      );\n    outline-offset: var(--hx-focus-ring-offset, 2px);\n  }\n\n  .switch--checked .switch__track {\n    background-color: var(--hx-switch-track-checked-bg, var(--hx-color-primary-500, #2563eb));\n  }\n\n  /* --- Thumb --- */\n\n  .switch__thumb {\n    position: absolute;\n    border-radius: var(--hx-border-radius-full, 9999px);\n    background-color: var(--hx-switch-thumb-bg, var(--hx-color-neutral-0, #ffffff));\n    box-shadow: var(--hx-switch-thumb-shadow, var(--hx-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)));\n    transition: transform var(--hx-transition-fast, 150ms ease);\n  }\n\n  /* --- Size: sm (track 32x18, thumb 14px) --- */\n\n  .switch--sm .switch__track {\n    width: var(--hx-switch-track-width-sm, var(--hx-size-8, 2rem));\n    height: var(--hx-switch-track-height-sm, var(--hx-size-4-5, 1.125rem));\n  }\n\n  .switch--sm .switch__thumb {\n    width: var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, 0.875rem));\n    height: var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, 0.875rem));\n    top: 50%;\n    left: var(--hx-switch-thumb-offset, var(--hx-space-0-5, 0.125rem));\n    transform: translateY(-50%);\n  }\n\n  .switch--sm.switch--checked .switch__thumb {\n    transform: translateY(-50%)\n      translateX(var(--hx-switch-thumb-size-sm, var(--hx-size-3-5, 0.875rem)));\n  }\n\n  /* --- Size: md (track 40x22, thumb 18px) --- */\n\n  .switch--md .switch__track {\n    width: var(--hx-switch-track-width-md, var(--hx-size-10, 2.5rem));\n    height: var(--hx-switch-track-height-md, var(--hx-size-5-5, 1.375rem));\n  }\n\n  .switch--md .switch__thumb {\n    width: var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem));\n    height: var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem));\n    top: 50%;\n    left: var(--hx-switch-thumb-offset, var(--hx-space-0-5, 0.125rem));\n    transform: translateY(-50%);\n  }\n\n  .switch--md.switch--checked .switch__thumb {\n    transform: translateY(-50%)\n      translateX(var(--hx-switch-thumb-size-md, var(--hx-size-4-5, 1.125rem)));\n  }\n\n  /* --- Size: lg (track 48x26, thumb 22px) --- */\n\n  .switch--lg .switch__track {\n    width: var(--hx-switch-track-width-lg, var(--hx-size-12, 3rem));\n    height: var(--hx-switch-track-height-lg, var(--hx-size-6-5, 1.625rem));\n  }\n\n  .switch--lg .switch__thumb {\n    width: var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem));\n    height: var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem));\n    top: 50%;\n    left: var(--hx-switch-thumb-offset, var(--hx-space-0-5, 0.125rem));\n    transform: translateY(-50%);\n  }\n\n  .switch--lg.switch--checked .switch__thumb {\n    transform: translateY(-50%)\n      translateX(var(--hx-switch-thumb-size-lg, var(--hx-size-5-5, 1.375rem)));\n  }\n\n  /* --- Label --- */\n\n  .switch__label {\n    font-size: var(--hx-font-size-sm, 0.875rem);\n    font-weight: var(--hx-font-weight-medium, 500);\n    color: var(--hx-switch-label-color, var(--hx-color-neutral-700, #343a40));\n    line-height: var(--hx-line-height-normal, 1.5);\n    cursor: pointer;\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  .switch__required-marker {\n    color: var(--hx-switch-error-color, var(--hx-color-error-text, #b91c1c));\n    font-weight: var(--hx-font-weight-bold, 700);\n  }\n\n  /* --- Help Text & Error --- */\n\n  .switch__help-text {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-switch-help-text-color, var(--hx-color-neutral-500, #6c757d));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  .switch__error {\n    font-size: var(--hx-font-size-xs, 0.75rem);\n    color: var(--hx-switch-error-color, var(--hx-color-error-text, #b91c1c));\n    line-height: var(--hx-line-height-normal, 1.5);\n  }\n\n  /* --- Reduced Motion --- */\n\n  @media (prefers-reduced-motion: reduce) {\n    .switch__track,\n    .switch__thumb {\n      transition: none;\n    }\n  }\n`;\n","import { LitElement, html, nothing, type PropertyValues } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { tokenStyles } from '@helixui/tokens/lit';\nimport { helixSwitchStyles } from './hx-switch.styles.js';\n\n/**\n * A toggle switch component for on/off states.\n *\n * Uses `role=\"switch\"` with `aria-checked` to convey toggle state.\n * Supports keyboard activation via Space key (per ARIA APG switch pattern).\n * Label association is handled through `aria-labelledby`, and\n * error/help text are linked via `aria-describedby`.\n *\n * @summary Form-associated toggle switch with label, error, and help text.\n *\n * @tag hx-switch\n *\n * @slot - Custom label content (overrides the label property).\n * @slot error - Custom error content (overrides the error property).\n * @slot help-text - Custom help text content (overrides the helpText property).\n *\n * @fires {CustomEvent<{checked: boolean, value: string}>} hx-change - Dispatched when the switch is toggled.\n *\n * @csspart switch - The switch container (track + thumb wrapper).\n * @csspart track - The track background element.\n * @csspart thumb - The sliding thumb element.\n * @csspart label - The label text element.\n * @csspart help-text - The help text container.\n * @csspart error - The error message container.\n *\n * @cssprop [--hx-switch-track-bg=var(--hx-color-neutral-300)] - Track background color.\n * @cssprop [--hx-switch-track-checked-bg=var(--hx-color-primary-500)] - Track background when checked.\n * @cssprop [--hx-switch-thumb-bg=var(--hx-color-neutral-0)] - Thumb background color.\n * @cssprop [--hx-switch-thumb-shadow=var(--hx-shadow-sm)] - Thumb box shadow.\n * @cssprop [--hx-switch-focus-ring-color=var(--hx-focus-ring-color)] - Focus ring color.\n * @cssprop [--hx-switch-label-color=var(--hx-color-neutral-700)] - Label text color.\n * @cssprop [--hx-switch-error-color=var(--hx-color-error-500)] - Error message color.\n * @cssprop [--hx-switch-help-text-color=var(--hx-color-neutral-500)] - Help text color.\n */\n@customElement('hx-switch')\nexport class HelixSwitch extends LitElement {\n  static override styles = [tokenStyles, helixSwitchStyles];\n\n  /** Monotonic counter for deterministic, unique IDs across instances. */\n  /** @internal */\n  private static _instanceCounter = 0;\n\n  // ─── Form Association ───\n\n  /** @internal */\n  static formAssociated = true;\n\n  /** ElementInternals instance for form association, validation, and ARIA. */\n  /** @internal */\n  private _internals: ElementInternals;\n\n  constructor() {\n    super();\n    /** @internal */\n    this._internals = this.attachInternals();\n  }\n\n  // ─── Properties ───\n\n  /**\n   * Whether the switch is toggled on.\n   * @attr checked\n   */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /**\n   * Whether the switch is disabled.\n   * @attr disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Whether the switch is required for form submission.\n   * @attr required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * The name of the switch, used for form submission.\n   * @attr name\n   */\n  @property({ type: String })\n  name = '';\n\n  /**\n   * The value submitted when the switch is checked.\n   * @attr value\n   */\n  @property({ type: String })\n  value = 'on';\n\n  /**\n   * The visible label text for the switch.\n   * @attr label\n   */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Size variant of the switch.\n   * @attr hx-size\n   */\n  @property({ type: String, reflect: true, attribute: 'hx-size' })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Error message to display. When set, the switch enters an error state.\n   * @attr error\n   */\n  @property({ type: String })\n  error = '';\n\n  /**\n   * Help text displayed below the switch for guidance.\n   * @attr help-text\n   */\n  @property({ type: String, attribute: 'help-text' })\n  helpText = '';\n\n  /**\n   * Validation message shown when the field is required but empty.\n   * @attr required-message\n   */\n  @property({ attribute: 'required-message' })\n  requiredMessage = 'This field is required.';\n\n  // ─── Lifecycle ───\n\n  override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('checked') || changedProperties.has('value')) {\n      this._internals.setFormValue(this.checked ? this.value : null);\n      this._updateValidity();\n    }\n    if (changedProperties.has('required')) {\n      this._updateValidity();\n    }\n  }\n\n  // ─── Form Integration ───\n\n  /** Returns the associated form element, if any. */\n  get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  /** Returns the validation message. */\n  get validationMessage(): string {\n    return this._internals.validationMessage;\n  }\n\n  /** Returns the ValidityState object. */\n  get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  /** Checks whether the switch satisfies its constraints. */\n  checkValidity(): boolean {\n    return this._internals.checkValidity();\n  }\n\n  /** Reports validity and shows the browser's constraint validation UI. */\n  reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n\n  /** Recalculates and sets the validity state based on required and checked. */\n  /** @internal */\n  private _updateValidity(): void {\n    if (this.required && !this.checked) {\n      this._internals.setValidity(\n        { valueMissing: true },\n        this.error || this.requiredMessage,\n        this._trackEl ?? undefined,\n      );\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n\n  /** @internal */\n  formResetCallback(): void {\n    this.checked = false;\n    this._internals.setFormValue(null);\n  }\n\n  /** @internal */\n  formStateRestoreCallback(state: File | string | null, _mode: 'restore' | 'autocomplete'): void {\n    if (typeof state === 'string') {\n      this.checked = state === this.value;\n    }\n  }\n\n  /** @internal */\n  formDisabledCallback(disabled: boolean): void {\n    this.disabled = disabled;\n  }\n\n  /** Reference to the native button element acting as the switch track.  * @internal\n   */\n  @query('.switch__track')\n  private _trackEl: HTMLButtonElement | null | undefined;\n\n  /** Whether the error slot has assigned content. */\n  /** @internal */\n  @state() private _hasErrorSlot = false;\n\n  /** Whether the default slot has assigned content (slotted label). */\n  /** @internal */\n  @state() private _hasDefaultSlot = false;\n\n  // ─── Slot Handlers ───\n\n  /** Updates _hasErrorSlot when error slot content changes. */\n  /** @internal */\n  private _handleErrorSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasErrorSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  /** Updates _hasDefaultSlot when default slot content changes. */\n  /** @internal */\n  private _handleDefaultSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasDefaultSlot = slot.assignedNodes({ flatten: true }).length > 0;\n  }\n\n  // ─── Event Handling ───\n\n  /** Toggles checked state and dispatches hx-change event. */\n  /** @internal */\n  private _toggle(): void {\n    if (this.disabled) return;\n    this.checked = !this.checked;\n\n    this.dispatchEvent(\n      new CustomEvent<{ checked: boolean; value: string }>('hx-change', {\n        bubbles: true,\n        composed: true,\n        detail: { checked: this.checked, value: this.value },\n      }),\n    );\n  }\n\n  /** Handles click events on the track. */\n  /** @internal */\n  private _handleClick(): void {\n    this._toggle();\n  }\n\n  /** Handles keydown events — Space toggles the switch per ARIA APG. */\n  /** @internal */\n  private _handleKeyDown(e: KeyboardEvent): void {\n    if (e.key === ' ') {\n      e.preventDefault();\n      this._toggle();\n    }\n  }\n\n  // ─── Public Methods ───\n\n  /** Moves focus to the switch track element. */\n  override focus(options?: FocusOptions): void {\n    this._trackEl?.focus(options);\n  }\n\n  // ─── Render ───\n\n  /** Unique ID for this switch instance, used for ARIA associations. */\n  /** @internal */\n  private _switchId = `hx-switch-${++HelixSwitch._instanceCounter}`;\n  /** ID for the label element, referenced by aria-labelledby. */\n  /** @internal */\n  private _labelId = `${this._switchId}-label`;\n  /** ID for the help text element, referenced by aria-describedby. */\n  /** @internal */\n  private _helpTextId = `${this._switchId}-help`;\n  /** ID for the error element, referenced by aria-describedby. */\n  /** @internal */\n  private _errorId = `${this._switchId}-error`;\n\n  override render() {\n    const hasError = !!this.error;\n    const hasLabel = !!this.label || this._hasDefaultSlot;\n\n    const containerClasses = {\n      switch: true,\n      'switch--checked': this.checked,\n      'switch--disabled': this.disabled,\n      'switch--required': this.required,\n      'switch--error': hasError,\n      [`switch--${this.size}`]: true,\n    };\n\n    const describedBy =\n      [\n        hasError || this._hasErrorSlot ? this._errorId : null,\n        this.helpText && !hasError ? this._helpTextId : null,\n      ]\n        .filter(Boolean)\n        .join(' ') || undefined;\n\n    return html`\n      <div part=\"switch\" class=${classMap(containerClasses)}>\n        <div class=\"switch__control-row\">\n          <button\n            part=\"track\"\n            class=\"switch__track\"\n            id=${this._switchId}\n            type=\"button\"\n            role=\"switch\"\n            aria-checked=${this.checked ? 'true' : 'false'}\n            aria-labelledby=${ifDefined(hasLabel ? this._labelId : undefined)}\n            aria-describedby=${ifDefined(describedBy)}\n            aria-invalid=${hasError ? 'true' : nothing}\n            aria-required=${this.required ? 'true' : nothing}\n            ?disabled=${this.disabled}\n            @click=${this._handleClick}\n            @keydown=${this._handleKeyDown}\n          >\n            <span part=\"thumb\" class=\"switch__thumb\"></span>\n          </button>\n\n          <label part=\"label\" class=\"switch__label\" id=${this._labelId} for=${this._switchId}>\n            <slot @slotchange=${this._handleDefaultSlotChange}>${this.label}</slot>${this.required\n              ? html`<span class=\"switch__required-marker\" aria-hidden=\"true\">*</span>`\n              : nothing}\n          </label>\n        </div>\n\n        <slot name=\"error\" @slotchange=${this._handleErrorSlotChange}>\n          ${hasError\n            ? html`<div part=\"error\" class=\"switch__error\" id=${this._errorId} role=\"alert\">\n                ${this.error}\n              </div>`\n            : nothing}\n        </slot>\n\n        ${this.helpText && !hasError\n          ? html`\n              <div part=\"help-text\" class=\"switch__help-text\" id=${this._helpTextId}>\n                <slot name=\"help-text\">${this.helpText}</slot>\n              </div>\n            `\n          : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'hx-switch': HelixSwitch;\n  }\n}\n\n/** @deprecated Use HxSwitch instead. */\nexport type WcSwitch = HelixSwitch;\nexport type HxSwitch = HelixSwitch;\n"],"names":["helixSwitchStyles","css","HelixSwitch","LitElement","changedProperties","state","_mode","disabled","e","slot","options","_a","hasError","hasLabel","containerClasses","describedBy","html","classMap","ifDefined","nothing","tokenStyles","__decorateClass","property","query","customElement"],"mappings":"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"}

package/dist/shared/{hx-tab-panel-BRNcLICw.js → hx-tab-panel-GGjk6Qg4.js}

@@ -1,8 +1,8 @@
-import { css as x, LitElement as _, nothing as $, html as m } from "lit";
-import { property as h, state as g, customElement as y } from "lit/decorators.js";
+import { css as x, LitElement as _, html as m, nothing as O } from "lit";
+import { property as d, state as g, customElement as y } from "lit/decorators.js";
 import { tokenStyles as w } from "@helixui/tokens/lit";
 import { d as E } from "./dev-warn-YlwPHjtX.js";
-const L = x`
+const N = x`
   :host {
     display: block;
     font-family: var(--hx-font-family-sans, sans-serif);
@@ -79,46 +79,46 @@ const L = x`
     }
   }
 `;
-var k = Object.defineProperty, z = Object.getOwnPropertyDescriptor, p = (t, e, a, i) => {
-  for (var s = i > 1 ? void 0 : i ? z(e, a) : e, o = t.length - 1, r; o >= 0; o--)
-    (r = t[o]) && (s = (i ? r(e, a, s) : r(s)) || s);
-  return i && s && k(e, a, s), s;
+var k = Object.defineProperty, L = Object.getOwnPropertyDescriptor, p = (e, t, a, i) => {
+  for (var s = i > 1 ? void 0 : i ? L(t, a) : t, o = e.length - 1, r; o >= 0; o--)
+    (r = e[o]) && (s = (i ? r(t, a, s) : r(s)) || s);
+  return i && s && k(t, a, s), s;
 };
-let I = 0, d = class extends _ {
+let z = 0, b = class extends _ {
   constructor() {
-    super(...arguments), this._id = `hx-tabs-${++I}`, this.orientation = "horizontal", this.activation = "automatic", this.label = "", this._activePanel = "", this._cachedTabs = null, this._cachedPanels = null, this._observer = null, this._handleTabSelect = (t) => {
-      if (!(t instanceof CustomEvent)) return;
-      t.stopPropagation();
-      const e = t.composedPath().find((a) => a instanceof Element && a.tagName.toLowerCase() === "hx-tab");
-      e && this._activateTab(e);
+    super(...arguments), this._id = `hx-tabs-${++z}`, this.orientation = "horizontal", this.activation = "automatic", this.label = "", this._activePanel = "", this._cachedTabs = null, this._cachedPanels = null, this._observer = null, this._handleTabSelect = (e) => {
+      if (!(e instanceof CustomEvent)) return;
+      e.stopPropagation();
+      const t = e.composedPath().find((a) => a instanceof Element && a.tagName.toLowerCase() === "hx-tab");
+      t && this._activateTab(t);
     }, this._handleSlotChange = () => {
       if (this._warnInvalidSlotContent(), this._cachedTabs = null, this._cachedPanels = null, this._syncTabsAndPanels(), !this._getPanels().some((a) => a.name === this._activePanel)) {
         const a = this._getEnabledTabs()[0];
         a ? this._activateTab(a, !1) : this._activePanel = "";
       }
-    }, this._handleKeydown = (t) => {
+    }, this._handleKeydown = (e) => {
       var P, S, T, C;
-      const e = this._getEnabledTabs();
-      if (e.length === 0)
+      const t = this._getEnabledTabs();
+      if (t.length === 0)
         return;
       const a = this.orientation === "horizontal", i = a ? "ArrowLeft" : "ArrowUp", s = a ? "ArrowRight" : "ArrowDown";
-      if (![i, s, "Home", "End", " ", "Enter"].includes(t.key))
+      if (![i, s, "Home", "End", " ", "Enter"].includes(e.key))
         return;
-      const r = e.find((u) => u === document.activeElement);
-      if (t.key === " " || t.key === "Enter") {
-        r && (t.preventDefault(), this._activateTab(r), (S = (P = r.shadowRoot) == null ? void 0 : P.querySelector("button")) == null || S.focus());
+      const r = t.find((u) => u === document.activeElement);
+      if (e.key === " " || e.key === "Enter") {
+        r && (e.preventDefault(), this._activateTab(r), (S = (P = r.shadowRoot) == null ? void 0 : P.querySelector("button")) == null || S.focus());
         return;
       }
-      t.preventDefault();
-      let c = r ? e.indexOf(r) : -1;
-      if (c === -1) {
-        const u = e.find((O) => O.panel === this._activePanel);
-        c = u ? e.indexOf(u) : 0;
+      e.preventDefault();
+      let n = r ? t.indexOf(r) : -1;
+      if (n === -1) {
+        const u = t.find((A) => A.panel === this._activePanel);
+        n = u ? t.indexOf(u) : 0;
       }
-      let n;
-      t.key === "Home" ? n = 0 : t.key === "End" ? n = e.length - 1 : t.key === s ? n = (c + 1) % e.length : n = c <= 0 ? e.length - 1 : c - 1;
-      const f = e[n];
-      f && ((C = (T = f.shadowRoot) == null ? void 0 : T.querySelector("button")) == null || C.focus(), this.activation === "automatic" && this._activateTab(f));
+      let h;
+      e.key === "Home" ? h = 0 : e.key === "End" ? h = t.length - 1 : e.key === s ? h = (n + 1) % t.length : h = n <= 0 ? t.length - 1 : n - 1;
+      const l = t[h];
+      l && ((C = (T = l.shadowRoot) == null ? void 0 : T.querySelector("button")) == null || C.focus(), this.activation === "automatic" && this._activateTab(l));
     };
   }
   // ─── Public API ───
@@ -127,84 +127,91 @@ let I = 0, d = class extends _ {
    * Setting this programmatically activates the tab at the given index.
    */
   get selectedIndex() {
-    return this._getTabs().findIndex((t) => t.panel === this._activePanel);
+    return this._getTabs().findIndex((e) => e.panel === this._activePanel);
   }
-  set selectedIndex(t) {
-    const e = this._getTabs()[t];
-    e && !e.disabled && this._activateTab(e, !0);
+  set selectedIndex(e) {
+    const t = this._getTabs()[e];
+    t && !t.disabled && this._activateTab(t, !0);
   }
+  /** @internal */
   _getTabs() {
     return this._cachedTabs || (this._cachedTabs = Array.from(this.querySelectorAll(":scope > hx-tab")).filter(
-      (t) => t.tagName.toLowerCase() === "hx-tab"
+      (e) => e.tagName.toLowerCase() === "hx-tab"
     )), this._cachedTabs;
   }
+  /** @internal */
   _getPanels() {
     return this._cachedPanels || (this._cachedPanels = Array.from(this.querySelectorAll(":scope > hx-tab-panel")).filter(
-      (t) => t.tagName.toLowerCase() === "hx-tab-panel"
+      (e) => e.tagName.toLowerCase() === "hx-tab-panel"
     )), this._cachedPanels;
   }
+  /** @internal */
   _getEnabledTabs() {
-    return this._getTabs().filter((t) => !t.disabled);
+    return this._getTabs().filter((e) => !e.disabled);
   }
   // ─── Lifecycle ───
   connectedCallback() {
-    super.connectedCallback(), this.addEventListener("hx-tab-select", this._handleTabSelect), this.addEventListener("keydown", this._handleKeydown), this._observer = new MutationObserver(() => {
+    super.connectedCallback(), this.addEventListener("hx-tab-select", this._handleTabSelect), this.addEventListener("keydown", this._handleKeydown), typeof MutationObserver < "u" && (this._observer = new MutationObserver(() => {
       this._cachedTabs = null, this._cachedPanels = null, this._syncTabsAndPanels();
     }), this._observer.observe(this, {
-      subtree: !0,
+      subtree: !1,
       attributeFilter: ["panel", "name"]
-    });
+    }));
   }
   disconnectedCallback() {
-    var t;
-    super.disconnectedCallback(), this.removeEventListener("hx-tab-select", this._handleTabSelect), this.removeEventListener("keydown", this._handleKeydown), (t = this._observer) == null || t.disconnect(), this._observer = null;
+    var e;
+    super.disconnectedCallback(), this.removeEventListener("hx-tab-select", this._handleTabSelect), this.removeEventListener("keydown", this._handleKeydown), (e = this._observer) == null || e.disconnect(), this._observer = null;
   }
   firstUpdated() {
     if (this.label, this._syncTabsAndPanels(), !this._activePanel) {
-      const t = this._getEnabledTabs()[0];
-      t && this._activateTab(t, !1);
+      const e = this._getEnabledTabs()[0];
+      e && this._activateTab(e, !1);
     }
   }
-  updated(t) {
-    super.updated(t), t.has("_activePanel") && this._updateTabsAndPanels();
+  updated(e) {
+    super.updated(e), e.has("_activePanel") && this._updateTabsAndPanels();
   }
   // ─── Tab / Panel Sync ───
+  /** @internal */
   _syncTabsAndPanels() {
-    const t = this._getTabs(), e = this._getPanels();
-    t.forEach((a, i) => {
-      var c;
+    const e = this._getTabs(), t = this._getPanels();
+    e.forEach((a, i) => {
       const s = a.id || `hx-tab-${this._id}-${i}`;
       a.id = s;
-      const o = a.panel, r = e.find((n) => n.name === o) ?? e[i];
+      const o = a.panel, r = t.find((n) => n.name === o) ?? t[i];
       if (r) {
         const n = r.id || `hx-panel-${this._id}-${i}`;
         r.id = n, a.controls = n;
-        const f = ((c = a.textContent) == null ? void 0 : c.trim()) ?? "";
-        f ? (r.setAttribute("aria-label", f), r.removeAttribute("aria-labelledby")) : r.setAttribute("aria-labelledby", s);
+        const h = Array.from(a.childNodes).filter(
+          (l) => l.nodeType === Node.TEXT_NODE || l.nodeType === Node.ELEMENT_NODE && !l.hasAttribute("slot")
+        ).map((l) => l.textContent ?? "").join("").trim();
+        h ? (r.setAttribute("aria-label", h), r.removeAttribute("aria-labelledby")) : r.setAttribute("aria-labelledby", s);
       }
     }), this._updateTabsAndPanels();
   }
+  /** @internal */
   _updateTabsAndPanels() {
-    const t = this._getTabs(), e = this._getPanels();
-    t.forEach((a) => {
+    const e = this._getTabs(), t = this._getPanels();
+    e.forEach((a) => {
       const i = a.panel === this._activePanel;
       a.selected = i, a.tabIndex = i ? 0 : -1;
-    }), e.forEach((a) => {
+    }), t.forEach((a) => {
       a.name === this._activePanel ? (a.removeAttribute("hidden"), a.setAttribute("tabindex", "0")) : (a.setAttribute("hidden", ""), a.setAttribute("tabindex", "-1"));
     });
   }
   // ─── Tab Activation ───
-  _activateTab(t, e = !0) {
-    if (t.disabled)
+  /** @internal */
+  _activateTab(e, t = !0) {
+    if (e.disabled)
       return;
     const a = this._getTabs(), i = this._activePanel;
-    if (this._activePanel = t.panel, e && i !== this._activePanel) {
-      const s = a.indexOf(t);
+    if (this._activePanel = e.panel, t && i !== this._activePanel) {
+      const s = a.indexOf(e);
       this.dispatchEvent(
         new CustomEvent("hx-tab-change", {
           bubbles: !0,
           composed: !0,
-          detail: { tabId: t.id, index: s }
+          detail: { tabId: e.id, index: s }
         })
       );
     }
@@ -212,16 +219,16 @@ let I = 0, d = class extends _ {
   /** @internal */
   _warnInvalidSlotContent() {
     var a, i;
-    const t = (a = this.shadowRoot) == null ? void 0 : a.querySelector('slot[name="tab"]'), e = (i = this.shadowRoot) == null ? void 0 : i.querySelector("slot:not([name])");
-    if (t) {
-      const s = t.assignedElements().filter((o) => o.tagName.toLowerCase() !== "hx-tab");
+    const e = (a = this.shadowRoot) == null ? void 0 : a.querySelector('slot[name="tab"]'), t = (i = this.shadowRoot) == null ? void 0 : i.querySelector("slot:not([name])");
+    if (e) {
+      const s = e.assignedElements().filter((o) => o.tagName.toLowerCase() !== "hx-tab");
       s.length > 0 && E(
         "hx-tabs",
         `Slot "tab" expects <hx-tab> elements. Found unexpected: ${s.map((o) => `<${o.tagName.toLowerCase()}>`).join(", ")}`
       );
     }
-    if (e) {
-      const s = e.assignedElements().filter((o) => o.tagName.toLowerCase() !== "hx-tab-panel");
+    if (t) {
+      const s = t.assignedElements().filter((o) => o.tagName.toLowerCase() !== "hx-tab-panel");
       s.length > 0 && E(
         "hx-tabs",
         `Default slot expects <hx-tab-panel> elements. Found unexpected: ${s.map((o) => `<${o.tagName.toLowerCase()}>`).join(", ")}`
@@ -237,7 +244,7 @@ let I = 0, d = class extends _ {
           class="tablist"
           role="tablist"
           aria-orientation=${this.orientation}
-          aria-label=${this.label || $}
+          aria-label=${this.label || "Tabs"}
         >
           <slot name="tab" @slotchange=${this._handleSlotChange}></slot>
         </div>
@@ -248,23 +255,23 @@ let I = 0, d = class extends _ {
     `;
   }
 };
-d.styles = [w, L];
+b.styles = [w, N];
 p([
-  h({ type: String, reflect: !0 })
-], d.prototype, "orientation", 2);
+  d({ type: String, reflect: !0 })
+], b.prototype, "orientation", 2);
 p([
-  h({ type: String, attribute: "activation", reflect: !0 })
-], d.prototype, "activation", 2);
+  d({ type: String, attribute: "activation", reflect: !0 })
+], b.prototype, "activation", 2);
 p([
-  h({ type: String, reflect: !0 })
-], d.prototype, "label", 2);
+  d({ type: String, reflect: !0 })
+], b.prototype, "label", 2);
 p([
   g()
-], d.prototype, "_activePanel", 2);
-d = p([
+], b.prototype, "_activePanel", 2);
+b = p([
   y("hx-tabs")
-], d);
-const N = x`
+], b);
+const D = x`
   :host {
     display: inline-block;
   }
@@ -328,7 +335,10 @@ const N = x`
 
   .tab:focus-visible {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-tabs-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
+      var(
+        --hx-tabs-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+      );
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.125rem);
   }
@@ -357,16 +367,21 @@ const N = x`
     }
   }
 `;
-var D = Object.defineProperty, j = Object.getOwnPropertyDescriptor, b = (t, e, a, i) => {
-  for (var s = i > 1 ? void 0 : i ? j(e, a) : e, o = t.length - 1, r; o >= 0; o--)
-    (r = t[o]) && (s = (i ? r(e, a, s) : r(s)) || s);
-  return i && s && D(e, a, s), s;
+var I = Object.defineProperty, j = Object.getOwnPropertyDescriptor, f = (e, t, a, i) => {
+  for (var s = i > 1 ? void 0 : i ? j(t, a) : t, o = e.length - 1, r; o >= 0; o--)
+    (r = e[o]) && (s = (i ? r(t, a, s) : r(s)) || s);
+  return i && s && I(t, a, s), s;
 };
-let l = class extends _ {
+let c = class extends _ {
   constructor() {
     super(...arguments), this.panel = "", this.selected = !1, this.disabled = !1, this.controls = "", this._hasPrefixSlot = !1, this._hasSuffixSlot = !1;
   }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback(), this.closest("hx-tabs");
+  }
   // ─── Event Handling ───
+  /** @internal */
   _handleClick() {
     this.disabled || this.dispatchEvent(
       new CustomEvent("hx-tab-select", {
@@ -376,13 +391,15 @@ let l = class extends _ {
       })
     );
   }
-  _handlePrefixSlotChange(t) {
-    const e = t.target;
-    this._hasPrefixSlot = e.assignedNodes({ flatten: !0 }).length > 0;
+  /** @internal */
+  _handlePrefixSlotChange(e) {
+    const t = e.target;
+    this._hasPrefixSlot = t.assignedNodes({ flatten: !0 }).length > 0;
   }
-  _handleSuffixSlotChange(t) {
-    const e = t.target;
-    this._hasSuffixSlot = e.assignedNodes({ flatten: !0 }).length > 0;
+  /** @internal */
+  _handleSuffixSlotChange(e) {
+    const t = e.target;
+    this._hasSuffixSlot = t.assignedNodes({ flatten: !0 }).length > 0;
   }
   // ─── Render ───
   render() {
@@ -393,7 +410,7 @@ let l = class extends _ {
         role="tab"
         aria-selected=${this.selected ? "true" : "false"}
         aria-disabled=${this.disabled ? "true" : "false"}
-        aria-controls=${this.controls || $}
+        aria-controls=${this.controls || O}
         tabindex=${this.selected ? "0" : "-1"}
         @click=${this._handleClick}
       >
@@ -408,28 +425,28 @@ let l = class extends _ {
     `;
   }
 };
-l.styles = [w, N];
-b([
-  h({ type: String, reflect: !0 })
-], l.prototype, "panel", 2);
-b([
-  h({ type: Boolean, reflect: !0 })
-], l.prototype, "selected", 2);
-b([
-  h({ type: Boolean, reflect: !0 })
-], l.prototype, "disabled", 2);
-b([
-  h({ type: String, attribute: !1 })
-], l.prototype, "controls", 2);
-b([
+c.styles = [w, D];
+f([
+  d({ type: String, reflect: !0 })
+], c.prototype, "panel", 2);
+f([
+  d({ type: Boolean, reflect: !0 })
+], c.prototype, "selected", 2);
+f([
+  d({ type: Boolean, reflect: !0 })
+], c.prototype, "disabled", 2);
+f([
+  d({ type: String, attribute: !1 })
+], c.prototype, "controls", 2);
+f([
   g()
-], l.prototype, "_hasPrefixSlot", 2);
-b([
+], c.prototype, "_hasPrefixSlot", 2);
+f([
   g()
-], l.prototype, "_hasSuffixSlot", 2);
-l = b([
+], c.prototype, "_hasSuffixSlot", 2);
+c = f([
   y("hx-tab")
-], l);
+], c);
 const H = x`
   :host {
     display: block;
@@ -445,7 +462,10 @@ const H = x`
 
   :host(:focus-visible) {
     outline: var(--hx-focus-ring-width, 2px) solid
-      var(--hx-tabs-focus-ring-color, var(--hx-focus-ring-color, #2563eb));
+      var(
+        --hx-tabs-focus-ring-color,
+        var(--hx-focus-ring-color, var(--hx-color-primary-400, #60a5fa))
+      );
     outline-offset: var(--hx-focus-ring-offset, 2px);
     border-radius: var(--hx-border-radius-sm, 0.125rem);
   }
@@ -459,10 +479,10 @@ const H = x`
     outline: none;
   }
 `;
-var K = Object.defineProperty, R = Object.getOwnPropertyDescriptor, A = (t, e, a, i) => {
-  for (var s = i > 1 ? void 0 : i ? R(e, a) : e, o = t.length - 1, r; o >= 0; o--)
-    (r = t[o]) && (s = (i ? r(e, a, s) : r(s)) || s);
-  return i && s && K(e, a, s), s;
+var K = Object.defineProperty, R = Object.getOwnPropertyDescriptor, $ = (e, t, a, i) => {
+  for (var s = i > 1 ? void 0 : i ? R(t, a) : t, o = e.length - 1, r; o >= 0; o--)
+    (r = e[o]) && (s = (i ? r(t, a, s) : r(s)) || s);
+  return i && s && K(t, a, s), s;
 };
 let v = class extends _ {
   constructor() {
@@ -482,15 +502,15 @@ let v = class extends _ {
   }
 };
 v.styles = [w, H];
-A([
-  h({ type: String, reflect: !0 })
+$([
+  d({ type: String, reflect: !0 })
 ], v.prototype, "name", 2);
-v = A([
+v = $([
   y("hx-tab-panel")
 ], v);
 export {
-  l as H,
+  c as H,
   v as a,
-  d as b
+  b
 };
-//# sourceMappingURL=hx-tab-panel-BRNcLICw.js.map
+//# sourceMappingURL=hx-tab-panel-GGjk6Qg4.js.map