@vielzeug/refine 1.5.4 → 1.8.0

package/dist/tabs.cjs

@@ -1,17 +1,17 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/theme.css.cjs"),t=require("./shared/prop-bundles.cjs"),n=require("./headless/keyboard.cjs"),r=require("./headless/nav.cjs"),i=require("./disclosure/tabs/tabs.css.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple");var s=(0,a.createContext)(`TabsContext`),c=`ore-tabs`;(0,a.define)(c,{props:{...t.themableBundle,...t.sizableBundle,activation:a.prop.oneOf([`auto`,`manual`],`auto`),label:a.prop.string(),orientation:a.prop.oneOf([`horizontal`,`vertical`],`horizontal`),value:a.prop.string(),variant:a.prop.string()},setup(e){let t=(0,a.getHost)(),i=(0,a.useEmit)(),c=t.shadowRoot,l=(0,a.ref)(),u=(0,a.ref)(),d=(0,o.signal)(e.value.value),f=()=>e.activation.value===`manual`,p=()=>e.orientation.value===`vertical`;(0,a.bind)({attr:{value:()=>d.value??null}});let m=()=>[...t.querySelectorAll(`:scope > ore-tab-item[slot="tabs"]`)],h=()=>m().filter(e=>!e.hasAttribute(`disabled`)),g=e=>{e&&(e.shadowRoot?.querySelector(`[role="tab"]`)??e).focus()},_=(e,t=!1)=>{d.value=e,t&&e&&i(`change`,{value:e})},v=()=>{let e=m();if(e.length===0)return;let t=d.value;if(t&&e.some(e=>e.getAttribute(`value`)===t&&!e.hasAttribute(`disabled`)))return;let n=e.find(e=>!e.hasAttribute(`disabled`))?.getAttribute(`value`)??void 0;_(n,!1)};(0,o.watch)(e.value,e=>{d.value=e,v()});let y=r.createListControl({getItems:()=>h(),loop:!0,onNavigate:(e,t)=>{let n=h()[t];if(g(n),!f()){let e=n?.getAttribute(`value`);e&&_(e,!0)}},orientation:()=>p()?`vertical`:`both`});(0,a.provide)(s,{color:e.color,orientation:(0,o.computed)(()=>e.orientation.value??`horizontal`),size:e.size,value:d,variant:e.variant});let b=e=>{let t=u.value,n=l.value;if(!t||!n||!e)return;let r=e.getBoundingClientRect(),i=n.getBoundingClientRect();if(p()){let e=r.top-i.top+n.scrollTop;t.style.transition=`none`,t.style.height=`${r.height}px`,t.style.width=``,t.style.left=`0`,t.style.top=`0`,t.offsetWidth,t.style.transition=``,t.style.transform=`translateY(${e}px)`}else{let e=r.left-i.left+n.scrollLeft;t.style.transition=`none`,t.style.width=`${r.width}px`,t.style.height=``,t.style.top=``,t.style.left=`0`,t.offsetWidth,t.style.transition=``,t.style.transform=`translateX(${e}px)`}},x=()=>{let e=d.value;if(!e)return;let t=m().find(t=>t.getAttribute(`value`)===e);b(t)};(0,o.watch)(d,()=>{requestAnimationFrame(x)});let S=e=>{let n=e.composedPath().find(e=>e instanceof HTMLElement&&e.localName===`ore-tab-item`);if(!n||n.hasAttribute(`disabled`)||n.closest(`ore-tabs`)!==t)return;let r=n.getAttribute(`value`);!r||r===d.value||_(r,!0)},C=n.createInteraction({disabled:(0,o.computed)(()=>!f()),onPress:()=>{let e=h().find(e=>e===document.activeElement||e.shadowRoot?.activeElement===document.activeElement)?.getAttribute(`value`);e&&e!==d.value&&_(e,!0)}});return(0,a.bind)({on:{click:S,keydown:e=>{let t=h();if(t.length===0)return;let n=e.composedPath().find(e=>e instanceof HTMLElement&&e.localName===`ore-tab-item`)??t.find(e=>e.getAttribute(`value`)===d.value),r=n?t.indexOf(n):-1;r>=0&&y.set(r),!y.handleKeydown(e)&&C.handleKeydown(e)}}}),(0,a.onMounted)(()=>{let e=()=>{v(),x()},t=c?.querySelector(`slot[name="tabs"]`);return t&&t.addEventListener(`slotchange`,e),e(),requestAnimationFrame(e),()=>{t&&t.removeEventListener(`slotchange`,e)}}),a.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/theme.css.cjs"),t=require("./shared/prop-bundles.cjs"),n=require("./headless/ore.cjs"),r=require("./headless/keyboard.cjs"),i=require("./headless/nav.cjs"),a=require("./headless/direction.cjs"),o=require("./disclosure/tabs/tabs.css.cjs");let s=require("@vielzeug/ore"),c=require("@vielzeug/ripple");var l=(0,s.createContext)(`TabsContext`),u=`ore-tabs`;(0,s.define)(u,{props:{...t.themableBundle,...t.sizableBundle,activation:s.prop.oneOf([`auto`,`manual`],`auto`),label:s.prop.string(),orientation:s.prop.oneOf([`horizontal`,`vertical`],`horizontal`),value:s.prop.string(),variant:s.prop.string()},setup(e){let t=(0,s.getHost)(),o=(0,s.useEmit)(),u=t.shadowRoot,d=(0,s.ref)(),f=(0,s.ref)(),p=(0,c.signal)(e.value.value),m=()=>e.activation.value===`manual`,h=()=>e.orientation.value===`vertical`;(0,s.bind)({attr:{value:()=>p.value??null}});let g=()=>[...t.querySelectorAll(`:scope > ore-tab-item[slot="tabs"]`)],_=()=>g().filter(e=>!e.hasAttribute(`disabled`)),v=e=>{e&&(e.shadowRoot?.querySelector(`[role="tab"]`)??e).focus()},y=(e,t=!1)=>{p.value=e,t&&e&&o(`change`,{value:e})},b=()=>{let e=g();if(e.length===0)return;let t=p.value;if(t&&e.some(e=>e.getAttribute(`value`)===t&&!e.hasAttribute(`disabled`)))return;let n=e.find(e=>!e.hasAttribute(`disabled`))?.getAttribute(`value`)??void 0;y(n,!1)};(0,c.watch)(e.value,e=>{p.value=e,b()});let x=i.createListControl({direction:()=>a.elementDirection(t),getItems:()=>_(),loop:!0,onNavigate:(e,t)=>{let n=_()[t];if(v(n),!m()){let e=n?.getAttribute(`value`);e&&y(e,!0)}},orientation:()=>h()?`vertical`:`both`,signal:n.lifecycleSignal(s.onCleanup)});(0,s.provide)(l,{color:e.color,orientation:(0,c.computed)(()=>e.orientation.value??`horizontal`),size:e.size,value:p,variant:e.variant});let S=e=>{let t=f.value,n=d.value;if(!t||!n||!e)return;let r=e.getBoundingClientRect(),i=n.getBoundingClientRect();if(h()){let e=r.top-i.top+n.scrollTop;t.style.transition=`none`,t.style.height=`${r.height}px`,t.style.width=``,t.style.left=`0`,t.style.top=`0`,t.offsetWidth,t.style.transition=``,t.style.transform=`translateY(${e}px)`}else{let e=r.left-i.left+n.scrollLeft;t.style.transition=`none`,t.style.width=`${r.width}px`,t.style.height=``,t.style.top=``,t.style.left=`0`,t.offsetWidth,t.style.transition=``,t.style.transform=`translateX(${e}px)`}},C=()=>{let e=p.value;if(!e)return;let t=g().find(t=>t.getAttribute(`value`)===e);S(t)};(0,c.watch)(p,()=>{requestAnimationFrame(C)});let w=e=>{let n=e.composedPath().find(e=>e instanceof HTMLElement&&e.localName===`ore-tab-item`);if(!n||n.hasAttribute(`disabled`)||n.closest(`ore-tabs`)!==t)return;let r=n.getAttribute(`value`);!r||r===p.value||y(r,!0)},T=r.createInteraction({disabled:(0,c.computed)(()=>!m()),onPress:()=>{let e=_().find(e=>e===document.activeElement||e.shadowRoot?.activeElement===document.activeElement)?.getAttribute(`value`);e&&e!==p.value&&y(e,!0)}});return(0,s.bind)({on:{click:w,keydown:e=>{let t=_();if(t.length===0)return;let n=e.composedPath().find(e=>e instanceof HTMLElement&&e.localName===`ore-tab-item`)??t.find(e=>e.getAttribute(`value`)===p.value),r=n?t.indexOf(n):-1;r>=0&&x.set(r),!x.handleKeydown(e)&&T.handleKeydown(e)}}}),(0,s.onMounted)(()=>{let e=()=>{b(),C()},t=u?.querySelector(`slot[name="tabs"]`);return t&&t.addEventListener(`slotchange`,e),e(),requestAnimationFrame(e),()=>{t&&t.removeEventListener(`slotchange`,e)}}),s.html`
       <div class="tablist-wrapper">
         <div
           role="tablist"
-          ref="${l}"
+          ref="${d}"
           part="tablist"
           aria-orientation="${e.orientation}"
           aria-label="${e.label}">
           <slot name="tabs"></slot>
         </div>
-        <div class="indicator" ref="${u}" part="indicator"></div>
+        <div class="indicator" ref="${f}" part="indicator"></div>
       </div>
       <div class="panels" part="panels">
         <slot></slot>
       </div>
-    `},styles:[e.colorThemeMixin,i.default]}),exports.TABS_CTX=s,exports.TABS_TAG=c;
+    `},styles:[e.colorThemeMixin,o.default]}),exports.TABS_CTX=l,exports.TABS_TAG=u;
 //# sourceMappingURL=tabs.cjs.map

package/dist/tabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.cjs","names":[],"sources":["../src/disclosure/tabs/tabs.ts"],"sourcesContent":["import { createContext, define, html, prop, ref, bind, getHost, onMounted, provide, useEmit } from '@vielzeug/ore';\nimport { computed, type Readable, signal, watch } from '@vielzeug/ripple';\n\nimport type { ComponentSize, SurfaceVariant, ThemeColor } from '../../types';\n\nimport { createInteraction, createListControl } from '../../headless';\nimport { sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin } from '../../styles';\nimport styles from './tabs.css?inline';\n\n/** Context provided by ore-tabs to its ore-tab-item and ore-tab-panel children. */\nexport type TabsContext = {\n  color: Readable<ThemeColor | undefined>;\n  orientation: Readable<'horizontal' | 'vertical'>;\n  size: Readable<ComponentSize | undefined>;\n  value: Readable<string | undefined>;\n  variant: Readable<SurfaceVariant | undefined>;\n};\n/** Injection key for the tabs context. */\nexport const TABS_CTX = createContext<TabsContext>('TabsContext');\n\nexport type OreTabsEvents = {\n  change: { value: string };\n};\n\nexport type OreTabsProps = {\n  /**\n   * Keyboard activation mode.\n   * - `'auto'` (default): Selecting a tab on arrow-key focus immediately activates it (ARIA recommendation for most cases).\n   * - `'manual'`: Arrow keys only move focus; the user must press Enter or Space to activate the focused tab.\n   */\n  activation?: 'auto' | 'manual';\n  /** Theme color */\n  color?: ThemeColor;\n  /** Accessible label for the tablist (passed as aria-label). Use when there is no visible heading labelling the tabs. */\n  label?: string;\n  /** Tab list orientation */\n  orientation?: 'horizontal' | 'vertical';\n  /** Component size */\n  size?: ComponentSize;\n  /** Currently selected tab value */\n  value?: string;\n  /** Visual style variant */\n  variant?: SurfaceVariant;\n};\n\n/**\n * Tabs container. Manages tab selection and syncs state to child tab items and panels.\n *\n * @element ore-tabs\n * @element ore-tab-item - Child element for tab buttons (auto-discovered)\n * @element ore-tab-panel - Child element for tab content (auto-discovered)\n *\n * @attr {string} value - The value of the currently selected tab\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'ghost' | 'glass' | 'frost'\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n *\n * @fires change - Emitted when the active tab changes with detail: { value: string }\n *\n * @slot tabs - Place `ore-tab-item` elements here\n * @slot - Place `ore-tab-panel` elements here\n *\n * @cssprop --tabs-radius - Border radius of the tablist container and panels\n * @cssprop --tabs-transition - Transition duration/easing for the active indicator\n * @cssprop --tabs-indicator-color - Color of the sliding active indicator line\n * @cssprop --tabs-bg - Background of the host element (flat variant)\n * @cssprop --tabs-tablist-bg - Tablist container background (solid/glass/frost variants)\n * @cssprop --tabs-tablist-border-color - Tablist container border color\n * @part tablist - Container that holds the slotted tab items\n * @part indicator - Active tab indicator element\n * @part panels - Container that holds tab panel content\n * @example\n * ```html\n * <ore-tabs value=\"tab1\" variant=\"bordered\">\n *   <ore-tab-item slot=\"tabs\" value=\"tab1\">Overview</ore-tab-item>\n *   <ore-tab-item slot=\"tabs\" value=\"tab2\">Settings</ore-tab-item>\n *   <ore-tab-panel value=\"tab1\"><p>Overview content</p></ore-tab-panel>\n *   <ore-tab-panel value=\"tab2\"><p>Settings content</p></ore-tab-panel>\n * </ore-tabs>\n * ```\n */\nexport const TABS_TAG = 'ore-tabs' as const;\ndefine<OreTabsProps>(TABS_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    activation: prop.oneOf(['auto', 'manual'] as const, 'auto'),\n    label: prop.string(),\n    orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'horizontal'),\n    value: prop.string(),\n    variant: prop.string<SurfaceVariant>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreTabsEvents>();\n\n    const shadowRoot = el.shadowRoot;\n    const tablistRef = ref<HTMLElement>();\n    const indicatorRef = ref<HTMLElement>();\n    const selectedValue = signal<string | undefined>(props.value.value);\n    const isManualActivation = () => props.activation.value === 'manual';\n    const isVertical = () => props.orientation.value === 'vertical';\n\n    bind({\n      attr: {\n        value: () => selectedValue.value ?? null,\n      },\n    });\n\n    const getTabs = () => [...el.querySelectorAll<HTMLElement>(':scope > ore-tab-item[slot=\"tabs\"]')];\n    const getEnabledTabs = () => getTabs().filter((t) => !t.hasAttribute('disabled'));\n    const focusTab = (tab: HTMLElement | undefined) => {\n      if (!tab) return;\n\n      const focusable = tab.shadowRoot?.querySelector<HTMLElement>('[role=\"tab\"]') ?? tab;\n\n      focusable.focus();\n    };\n\n    // ────────────────────────────────────────────────────────────────\n    // Selection State Management\n    // ────────────────────────────────────────────────────────────────\n\n    const setSelection = (value: string | undefined, shouldEmit = false) => {\n      selectedValue.value = value;\n\n      if (shouldEmit && value) emit('change', { value });\n    };\n\n    const ensureSelection = () => {\n      const tabs = getTabs();\n\n      if (tabs.length === 0) return; // No tabs yet, keep current selection\n\n      const current = selectedValue.value;\n      const hasCurrent = current\n        ? tabs.some((tab) => tab.getAttribute('value') === current && !tab.hasAttribute('disabled'))\n        : false;\n\n      if (hasCurrent) return;\n\n      const firstEnabled = tabs.find((tab) => !tab.hasAttribute('disabled'))?.getAttribute('value') ?? undefined;\n\n      setSelection(firstEnabled, false);\n    };\n\n    watch(props.value, (value) => {\n      selectedValue.value = value;\n      ensureSelection();\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // List Control for Keyboard Navigation\n    // ────────────────────────────────────────────────────────────────\n\n    const listControl = createListControl({\n      getItems: () => getEnabledTabs(),\n      loop: true,\n      onNavigate: (_action, index) => {\n        const tabs = getEnabledTabs();\n        const nextTab = tabs[index];\n\n        focusTab(nextTab);\n\n        if (!isManualActivation()) {\n          const value = nextTab?.getAttribute('value');\n\n          if (value) setSelection(value, true);\n        }\n      },\n      orientation: () => (isVertical() ? 'vertical' : 'both'),\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Context & Indicator Management\n    // ────────────────────────────────────────────────────────────────\n\n    provide(TABS_CTX, {\n      color: props.color,\n      orientation: computed(() => props.orientation.value ?? 'horizontal'),\n      size: props.size,\n      value: selectedValue,\n      variant: props.variant,\n    });\n\n    const moveIndicator = (activeTab: HTMLElement | undefined) => {\n      const indicator = indicatorRef.value;\n      const tablist = tablistRef.value;\n\n      if (!indicator || !tablist || !activeTab) return;\n\n      const tabRect = activeTab.getBoundingClientRect();\n      const listRect = tablist.getBoundingClientRect();\n\n      if (isVertical()) {\n        const y = tabRect.top - listRect.top + tablist.scrollTop;\n\n        indicator.style.transition = 'none';\n        indicator.style.height = `${tabRect.height}px`;\n        indicator.style.width = '';\n        indicator.style.left = '0';\n        indicator.style.top = '0';\n        void indicator.offsetWidth;\n        indicator.style.transition = '';\n        indicator.style.transform = `translateY(${y}px)`;\n      } else {\n        const x = tabRect.left - listRect.left + tablist.scrollLeft;\n\n        indicator.style.transition = 'none';\n        indicator.style.width = `${tabRect.width}px`;\n        indicator.style.height = '';\n        indicator.style.top = '';\n        indicator.style.left = '0';\n        void indicator.offsetWidth;\n        indicator.style.transition = '';\n        indicator.style.transform = `translateX(${x}px)`;\n      }\n    };\n\n    const updateIndicator = () => {\n      const value = selectedValue.value;\n\n      if (!value) return;\n\n      const activeTab = getTabs().find((t) => t.getAttribute('value') === value);\n\n      moveIndicator(activeTab);\n    };\n\n    watch(selectedValue, () => {\n      requestAnimationFrame(updateIndicator);\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Event Handlers\n    // ────────────────────────────────────────────────────────────────\n\n    const handleTabClick = (e: Event) => {\n      const tab = e\n        .composedPath()\n        .find((node): node is HTMLElement => node instanceof HTMLElement && node.localName === 'ore-tab-item');\n\n      if (!tab || tab.hasAttribute('disabled')) return;\n\n      // Guard: only respond to tab-items that belong to THIS tabs instance\n      if (tab.closest('ore-tabs') !== el) return;\n\n      const value = tab.getAttribute('value');\n\n      if (!value || value === selectedValue.value) return;\n\n      setSelection(value, true);\n    };\n\n    const activateFocusedTab = (): void => {\n      const tabs = getEnabledTabs();\n      const focusedTab = tabs.find(\n        (tab) => tab === document.activeElement || tab.shadowRoot?.activeElement === document.activeElement,\n      );\n      const focusedValue = focusedTab?.getAttribute('value');\n\n      if (focusedValue && focusedValue !== selectedValue.value) setSelection(focusedValue, true);\n    };\n\n    const manualActivationPress = createInteraction({\n      disabled: computed(() => !isManualActivation()),\n      onPress: activateFocusedTab,\n    });\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      const tabs = getEnabledTabs();\n\n      if (tabs.length === 0) return;\n\n      const path = e.composedPath();\n      const activeTabFromEvent = path.find(\n        (node): node is HTMLElement => node instanceof HTMLElement && node.localName === 'ore-tab-item',\n      );\n\n      const tabFromEvent = activeTabFromEvent ?? tabs.find((t) => t.getAttribute('value') === selectedValue.value);\n      const focused = tabFromEvent ? tabs.indexOf(tabFromEvent) : -1;\n\n      if (focused >= 0) listControl.set(focused);\n\n      if (listControl.handleKeydown(e)) return;\n\n      manualActivationPress.handleKeydown(e);\n    };\n\n    bind({\n      on: {\n        click: handleTabClick,\n        keydown: handleKeydown,\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Lifecycle\n    // ────────────────────────────────────────────────────────────────\n\n    onMounted(() => {\n      const syncSelection = () => {\n        ensureSelection();\n        updateIndicator();\n      };\n\n      const tabsSlot = shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"tabs\"]');\n\n      if (tabsSlot) {\n        tabsSlot.addEventListener('slotchange', syncSelection);\n      }\n\n      syncSelection();\n      requestAnimationFrame(syncSelection);\n\n      return () => {\n        if (tabsSlot) {\n          tabsSlot.removeEventListener('slotchange', syncSelection);\n        }\n      };\n    });\n\n    return html`\n      <div class=\"tablist-wrapper\">\n        <div\n          role=\"tablist\"\n          ref=\"${tablistRef}\"\n          part=\"tablist\"\n          aria-orientation=\"${props.orientation}\"\n          aria-label=\"${props.label}\">\n          <slot name=\"tabs\"></slot>\n        </div>\n        <div class=\"indicator\" ref=\"${indicatorRef}\" part=\"indicator\"></div>\n      </div>\n      <div class=\"panels\" part=\"panels\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [colorThemeMixin, styles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"tabs.cjs","names":[],"sources":["../src/disclosure/tabs/tabs.ts"],"sourcesContent":["import {\n  createContext,\n  define,\n  html,\n  prop,\n  ref,\n  bind,\n  getHost,\n  onCleanup,\n  onMounted,\n  provide,\n  useEmit,\n} from '@vielzeug/ore';\nimport { computed, type Readable, signal, watch } from '@vielzeug/ripple';\n\nimport type { ComponentSize, SurfaceVariant, ThemeColor } from '../../types';\n\nimport { createInteraction, createListControl, elementDirection, lifecycleSignal } from '../../headless';\nimport { sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin } from '../../styles';\nimport styles from './tabs.css?inline';\n\n/** Context provided by ore-tabs to its ore-tab-item and ore-tab-panel children. */\nexport type TabsContext = {\n  color: Readable<ThemeColor | undefined>;\n  orientation: Readable<'horizontal' | 'vertical'>;\n  size: Readable<ComponentSize | undefined>;\n  value: Readable<string | undefined>;\n  variant: Readable<SurfaceVariant | undefined>;\n};\n/** Injection key for the tabs context. */\nexport const TABS_CTX = createContext<TabsContext>('TabsContext');\n\nexport type OreTabsEvents = {\n  change: { value: string };\n};\n\nexport type OreTabsProps = {\n  /**\n   * Keyboard activation mode.\n   * - `'auto'` (default): Selecting a tab on arrow-key focus immediately activates it (ARIA recommendation for most cases).\n   * - `'manual'`: Arrow keys only move focus; the user must press Enter or Space to activate the focused tab.\n   */\n  activation?: 'auto' | 'manual';\n  /** Theme color */\n  color?: ThemeColor;\n  /** Accessible label for the tablist (passed as aria-label). Use when there is no visible heading labelling the tabs. */\n  label?: string;\n  /** Tab list orientation */\n  orientation?: 'horizontal' | 'vertical';\n  /** Component size */\n  size?: ComponentSize;\n  /** Currently selected tab value */\n  value?: string;\n  /** Visual style variant */\n  variant?: SurfaceVariant;\n};\n\n/**\n * Tabs container. Manages tab selection and syncs state to child tab items and panels.\n *\n * @element ore-tabs\n * @element ore-tab-item - Child element for tab buttons (auto-discovered)\n * @element ore-tab-panel - Child element for tab content (auto-discovered)\n *\n * @attr {string} value - The value of the currently selected tab\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'ghost' | 'glass' | 'frost'\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n *\n * @fires change - Emitted when the active tab changes with detail: { value: string }\n *\n * @slot tabs - Place `ore-tab-item` elements here\n * @slot - Place `ore-tab-panel` elements here\n *\n * @cssprop --tabs-radius - Border radius of the tablist container and panels\n * @cssprop --tabs-transition - Transition duration/easing for the active indicator\n * @cssprop --tabs-indicator-color - Color of the sliding active indicator line\n * @cssprop --tabs-bg - Background of the host element (flat variant)\n * @cssprop --tabs-tablist-bg - Tablist container background (solid/glass/frost variants)\n * @cssprop --tabs-tablist-border-color - Tablist container border color\n * @part tablist - Container that holds the slotted tab items\n * @part indicator - Active tab indicator element\n * @part panels - Container that holds tab panel content\n * @example\n * ```html\n * <ore-tabs value=\"tab1\" variant=\"bordered\">\n *   <ore-tab-item slot=\"tabs\" value=\"tab1\">Overview</ore-tab-item>\n *   <ore-tab-item slot=\"tabs\" value=\"tab2\">Settings</ore-tab-item>\n *   <ore-tab-panel value=\"tab1\"><p>Overview content</p></ore-tab-panel>\n *   <ore-tab-panel value=\"tab2\"><p>Settings content</p></ore-tab-panel>\n * </ore-tabs>\n * ```\n */\nexport const TABS_TAG = 'ore-tabs' as const;\ndefine<OreTabsProps>(TABS_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    activation: prop.oneOf(['auto', 'manual'] as const, 'auto'),\n    label: prop.string(),\n    orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'horizontal'),\n    value: prop.string(),\n    variant: prop.string<SurfaceVariant>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreTabsEvents>();\n\n    const shadowRoot = el.shadowRoot;\n    const tablistRef = ref<HTMLElement>();\n    const indicatorRef = ref<HTMLElement>();\n    const selectedValue = signal<string | undefined>(props.value.value);\n    const isManualActivation = () => props.activation.value === 'manual';\n    const isVertical = () => props.orientation.value === 'vertical';\n\n    bind({\n      attr: {\n        value: () => selectedValue.value ?? null,\n      },\n    });\n\n    const getTabs = () => [...el.querySelectorAll<HTMLElement>(':scope > ore-tab-item[slot=\"tabs\"]')];\n    const getEnabledTabs = () => getTabs().filter((t) => !t.hasAttribute('disabled'));\n    const focusTab = (tab: HTMLElement | undefined) => {\n      if (!tab) return;\n\n      const focusable = tab.shadowRoot?.querySelector<HTMLElement>('[role=\"tab\"]') ?? tab;\n\n      focusable.focus();\n    };\n\n    // ────────────────────────────────────────────────────────────────\n    // Selection State Management\n    // ────────────────────────────────────────────────────────────────\n\n    const setSelection = (value: string | undefined, shouldEmit = false) => {\n      selectedValue.value = value;\n\n      if (shouldEmit && value) emit('change', { value });\n    };\n\n    const ensureSelection = () => {\n      const tabs = getTabs();\n\n      if (tabs.length === 0) return; // No tabs yet, keep current selection\n\n      const current = selectedValue.value;\n      const hasCurrent = current\n        ? tabs.some((tab) => tab.getAttribute('value') === current && !tab.hasAttribute('disabled'))\n        : false;\n\n      if (hasCurrent) return;\n\n      const firstEnabled = tabs.find((tab) => !tab.hasAttribute('disabled'))?.getAttribute('value') ?? undefined;\n\n      setSelection(firstEnabled, false);\n    };\n\n    watch(props.value, (value) => {\n      selectedValue.value = value;\n      ensureSelection();\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // List Control for Keyboard Navigation\n    // ────────────────────────────────────────────────────────────────\n\n    const listControl = createListControl({\n      direction: () => elementDirection(el),\n      getItems: () => getEnabledTabs(),\n      loop: true,\n      onNavigate: (_action, index) => {\n        const tabs = getEnabledTabs();\n        const nextTab = tabs[index];\n\n        focusTab(nextTab);\n\n        if (!isManualActivation()) {\n          const value = nextTab?.getAttribute('value');\n\n          if (value) setSelection(value, true);\n        }\n      },\n      orientation: () => (isVertical() ? 'vertical' : 'both'),\n      signal: lifecycleSignal(onCleanup),\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Context & Indicator Management\n    // ────────────────────────────────────────────────────────────────\n\n    provide(TABS_CTX, {\n      color: props.color,\n      orientation: computed(() => props.orientation.value ?? 'horizontal'),\n      size: props.size,\n      value: selectedValue,\n      variant: props.variant,\n    });\n\n    const moveIndicator = (activeTab: HTMLElement | undefined) => {\n      const indicator = indicatorRef.value;\n      const tablist = tablistRef.value;\n\n      if (!indicator || !tablist || !activeTab) return;\n\n      const tabRect = activeTab.getBoundingClientRect();\n      const listRect = tablist.getBoundingClientRect();\n\n      if (isVertical()) {\n        const y = tabRect.top - listRect.top + tablist.scrollTop;\n\n        indicator.style.transition = 'none';\n        indicator.style.height = `${tabRect.height}px`;\n        indicator.style.width = '';\n        indicator.style.left = '0';\n        indicator.style.top = '0';\n        void indicator.offsetWidth;\n        indicator.style.transition = '';\n        indicator.style.transform = `translateY(${y}px)`;\n      } else {\n        const x = tabRect.left - listRect.left + tablist.scrollLeft;\n\n        indicator.style.transition = 'none';\n        indicator.style.width = `${tabRect.width}px`;\n        indicator.style.height = '';\n        indicator.style.top = '';\n        indicator.style.left = '0';\n        void indicator.offsetWidth;\n        indicator.style.transition = '';\n        indicator.style.transform = `translateX(${x}px)`;\n      }\n    };\n\n    const updateIndicator = () => {\n      const value = selectedValue.value;\n\n      if (!value) return;\n\n      const activeTab = getTabs().find((t) => t.getAttribute('value') === value);\n\n      moveIndicator(activeTab);\n    };\n\n    watch(selectedValue, () => {\n      requestAnimationFrame(updateIndicator);\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Event Handlers\n    // ────────────────────────────────────────────────────────────────\n\n    const handleTabClick = (e: Event) => {\n      const tab = e\n        .composedPath()\n        .find((node): node is HTMLElement => node instanceof HTMLElement && node.localName === 'ore-tab-item');\n\n      if (!tab || tab.hasAttribute('disabled')) return;\n\n      // Guard: only respond to tab-items that belong to THIS tabs instance\n      if (tab.closest('ore-tabs') !== el) return;\n\n      const value = tab.getAttribute('value');\n\n      if (!value || value === selectedValue.value) return;\n\n      setSelection(value, true);\n    };\n\n    const activateFocusedTab = (): void => {\n      const tabs = getEnabledTabs();\n      const focusedTab = tabs.find(\n        (tab) => tab === document.activeElement || tab.shadowRoot?.activeElement === document.activeElement,\n      );\n      const focusedValue = focusedTab?.getAttribute('value');\n\n      if (focusedValue && focusedValue !== selectedValue.value) setSelection(focusedValue, true);\n    };\n\n    const manualActivationPress = createInteraction({\n      disabled: computed(() => !isManualActivation()),\n      onPress: activateFocusedTab,\n    });\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      const tabs = getEnabledTabs();\n\n      if (tabs.length === 0) return;\n\n      const path = e.composedPath();\n      const activeTabFromEvent = path.find(\n        (node): node is HTMLElement => node instanceof HTMLElement && node.localName === 'ore-tab-item',\n      );\n\n      const tabFromEvent = activeTabFromEvent ?? tabs.find((t) => t.getAttribute('value') === selectedValue.value);\n      const focused = tabFromEvent ? tabs.indexOf(tabFromEvent) : -1;\n\n      if (focused >= 0) listControl.set(focused);\n\n      if (listControl.handleKeydown(e)) return;\n\n      manualActivationPress.handleKeydown(e);\n    };\n\n    bind({\n      on: {\n        click: handleTabClick,\n        keydown: handleKeydown,\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Lifecycle\n    // ────────────────────────────────────────────────────────────────\n\n    onMounted(() => {\n      const syncSelection = () => {\n        ensureSelection();\n        updateIndicator();\n      };\n\n      const tabsSlot = shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"tabs\"]');\n\n      if (tabsSlot) {\n        tabsSlot.addEventListener('slotchange', syncSelection);\n      }\n\n      syncSelection();\n      requestAnimationFrame(syncSelection);\n\n      return () => {\n        if (tabsSlot) {\n          tabsSlot.removeEventListener('slotchange', syncSelection);\n        }\n      };\n    });\n\n    return html`\n      <div class=\"tablist-wrapper\">\n        <div\n          role=\"tablist\"\n          ref=\"${tablistRef}\"\n          part=\"tablist\"\n          aria-orientation=\"${props.orientation}\"\n          aria-label=\"${props.label}\">\n          <slot name=\"tabs\"></slot>\n        </div>\n        <div class=\"indicator\" ref=\"${indicatorRef}\" part=\"indicator\"></div>\n      </div>\n      <div class=\"panels\" part=\"panels\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [colorThemeMixin, styles],\n});\n"],"mappings":"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"}

package/dist/tabs.js

@@ -1,126 +1,130 @@
 import { colorThemeMixin as e } from "./styles/mixins/theme.css.js";
 import { sizableBundle as t, themableBundle as n } from "./shared/prop-bundles.js";
-import { createInteraction as r } from "./headless/keyboard.js";
-import { createListControl as i } from "./headless/nav.js";
-import a from "./disclosure/tabs/tabs.css.js";
-import { bind as o, createContext as s, define as c, getHost as l, html as u, onMounted as d, prop as f, provide as p, ref as m, useEmit as h } from "@vielzeug/ore";
-import { computed as g, signal as _, watch as v } from "@vielzeug/ripple";
+import { lifecycleSignal as r } from "./headless/ore.js";
+import { createInteraction as i } from "./headless/keyboard.js";
+import { createListControl as a } from "./headless/nav.js";
+import { elementDirection as o } from "./headless/direction.js";
+import s from "./disclosure/tabs/tabs.css.js";
+import { bind as c, createContext as l, define as u, getHost as d, html as f, onCleanup as p, onMounted as m, prop as h, provide as g, ref as _, useEmit as v } from "@vielzeug/ore";
+import { computed as y, signal as b, watch as x } from "@vielzeug/ripple";
 //#region src/disclosure/tabs/tabs.ts
-var y = s("TabsContext"), b = "ore-tabs";
-c(b, {
+var S = l("TabsContext"), C = "ore-tabs";
+u(C, {
 	props: {
 		...n,
 		...t,
-		activation: f.oneOf(["auto", "manual"], "auto"),
-		label: f.string(),
-		orientation: f.oneOf(["horizontal", "vertical"], "horizontal"),
-		value: f.string(),
-		variant: f.string()
+		activation: h.oneOf(["auto", "manual"], "auto"),
+		label: h.string(),
+		orientation: h.oneOf(["horizontal", "vertical"], "horizontal"),
+		value: h.string(),
+		variant: h.string()
 	},
 	setup(e) {
-		let t = l(), n = h(), a = t.shadowRoot, s = m(), c = m(), f = _(e.value.value), b = () => e.activation.value === "manual", x = () => e.orientation.value === "vertical";
-		o({ attr: { value: () => f.value ?? null } });
-		let S = () => [...t.querySelectorAll(":scope > ore-tab-item[slot=\"tabs\"]")], C = () => S().filter((e) => !e.hasAttribute("disabled")), w = (e) => {
+		let t = d(), n = v(), s = t.shadowRoot, l = _(), u = _(), h = b(e.value.value), C = () => e.activation.value === "manual", w = () => e.orientation.value === "vertical";
+		c({ attr: { value: () => h.value ?? null } });
+		let T = () => [...t.querySelectorAll(":scope > ore-tab-item[slot=\"tabs\"]")], E = () => T().filter((e) => !e.hasAttribute("disabled")), D = (e) => {
 			e && (e.shadowRoot?.querySelector("[role=\"tab\"]") ?? e).focus();
-		}, T = (e, t = !1) => {
-			f.value = e, t && e && n("change", { value: e });
-		}, E = () => {
-			let e = S();
+		}, O = (e, t = !1) => {
+			h.value = e, t && e && n("change", { value: e });
+		}, k = () => {
+			let e = T();
 			if (e.length === 0) return;
-			let t = f.value;
+			let t = h.value;
 			if (t && e.some((e) => e.getAttribute("value") === t && !e.hasAttribute("disabled"))) return;
 			let n = e.find((e) => !e.hasAttribute("disabled"))?.getAttribute("value") ?? void 0;
-			T(n, !1);
+			O(n, !1);
 		};
-		v(e.value, (e) => {
-			f.value = e, E();
+		x(e.value, (e) => {
+			h.value = e, k();
 		});
-		let D = i({
-			getItems: () => C(),
+		let A = a({
+			direction: () => o(t),
+			getItems: () => E(),
 			loop: !0,
 			onNavigate: (e, t) => {
-				let n = C()[t];
-				if (w(n), !b()) {
+				let n = E()[t];
+				if (D(n), !C()) {
 					let e = n?.getAttribute("value");
-					e && T(e, !0);
+					e && O(e, !0);
 				}
 			},
-			orientation: () => x() ? "vertical" : "both"
+			orientation: () => w() ? "vertical" : "both",
+			signal: r(p)
 		});
-		p(y, {
+		g(S, {
 			color: e.color,
-			orientation: g(() => e.orientation.value ?? "horizontal"),
+			orientation: y(() => e.orientation.value ?? "horizontal"),
 			size: e.size,
-			value: f,
+			value: h,
 			variant: e.variant
 		});
-		let O = (e) => {
-			let t = c.value, n = s.value;
+		let j = (e) => {
+			let t = u.value, n = l.value;
 			if (!t || !n || !e) return;
 			let r = e.getBoundingClientRect(), i = n.getBoundingClientRect();
-			if (x()) {
+			if (w()) {
 				let e = r.top - i.top + n.scrollTop;
 				t.style.transition = "none", t.style.height = `${r.height}px`, t.style.width = "", t.style.left = "0", t.style.top = "0", t.offsetWidth, t.style.transition = "", t.style.transform = `translateY(${e}px)`;
 			} else {
 				let e = r.left - i.left + n.scrollLeft;
 				t.style.transition = "none", t.style.width = `${r.width}px`, t.style.height = "", t.style.top = "", t.style.left = "0", t.offsetWidth, t.style.transition = "", t.style.transform = `translateX(${e}px)`;
 			}
-		}, k = () => {
-			let e = f.value;
+		}, M = () => {
+			let e = h.value;
 			if (!e) return;
-			let t = S().find((t) => t.getAttribute("value") === e);
-			O(t);
+			let t = T().find((t) => t.getAttribute("value") === e);
+			j(t);
 		};
-		v(f, () => {
-			requestAnimationFrame(k);
+		x(h, () => {
+			requestAnimationFrame(M);
 		});
-		let A = (e) => {
+		let N = (e) => {
 			let n = e.composedPath().find((e) => e instanceof HTMLElement && e.localName === "ore-tab-item");
 			if (!n || n.hasAttribute("disabled") || n.closest("ore-tabs") !== t) return;
 			let r = n.getAttribute("value");
-			!r || r === f.value || T(r, !0);
-		}, j = r({
-			disabled: g(() => !b()),
+			!r || r === h.value || O(r, !0);
+		}, P = i({
+			disabled: y(() => !C()),
 			onPress: () => {
-				let e = C().find((e) => e === document.activeElement || e.shadowRoot?.activeElement === document.activeElement)?.getAttribute("value");
-				e && e !== f.value && T(e, !0);
+				let e = E().find((e) => e === document.activeElement || e.shadowRoot?.activeElement === document.activeElement)?.getAttribute("value");
+				e && e !== h.value && O(e, !0);
 			}
 		});
-		return o({ on: {
-			click: A,
+		return c({ on: {
+			click: N,
 			keydown: (e) => {
-				let t = C();
+				let t = E();
 				if (t.length === 0) return;
-				let n = e.composedPath().find((e) => e instanceof HTMLElement && e.localName === "ore-tab-item") ?? t.find((e) => e.getAttribute("value") === f.value), r = n ? t.indexOf(n) : -1;
-				r >= 0 && D.set(r), !D.handleKeydown(e) && j.handleKeydown(e);
+				let n = e.composedPath().find((e) => e instanceof HTMLElement && e.localName === "ore-tab-item") ?? t.find((e) => e.getAttribute("value") === h.value), r = n ? t.indexOf(n) : -1;
+				r >= 0 && A.set(r), !A.handleKeydown(e) && P.handleKeydown(e);
 			}
-		} }), d(() => {
+		} }), m(() => {
 			let e = () => {
-				E(), k();
-			}, t = a?.querySelector("slot[name=\"tabs\"]");
+				k(), M();
+			}, t = s?.querySelector("slot[name=\"tabs\"]");
 			return t && t.addEventListener("slotchange", e), e(), requestAnimationFrame(e), () => {
 				t && t.removeEventListener("slotchange", e);
 			};
-		}), u`
+		}), f`
       <div class="tablist-wrapper">
         <div
           role="tablist"
-          ref="${s}"
+          ref="${l}"
           part="tablist"
           aria-orientation="${e.orientation}"
           aria-label="${e.label}">
           <slot name="tabs"></slot>
         </div>
-        <div class="indicator" ref="${c}" part="indicator"></div>
+        <div class="indicator" ref="${u}" part="indicator"></div>
       </div>
       <div class="panels" part="panels">
         <slot></slot>
       </div>
     `;
 	},
-	styles: [e, a]
+	styles: [e, s]
 });
 //#endregion
-export { y as TABS_CTX, b as TABS_TAG };
+export { S as TABS_CTX, C as TABS_TAG };
 
 //# sourceMappingURL=tabs.js.map

package/dist/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":[],"sources":["../src/disclosure/tabs/tabs.ts"],"sourcesContent":["import { createContext, define, html, prop, ref, bind, getHost, onMounted, provide, useEmit } from '@vielzeug/ore';\nimport { computed, type Readable, signal, watch } from '@vielzeug/ripple';\n\nimport type { ComponentSize, SurfaceVariant, ThemeColor } from '../../types';\n\nimport { createInteraction, createListControl } from '../../headless';\nimport { sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin } from '../../styles';\nimport styles from './tabs.css?inline';\n\n/** Context provided by ore-tabs to its ore-tab-item and ore-tab-panel children. */\nexport type TabsContext = {\n  color: Readable<ThemeColor | undefined>;\n  orientation: Readable<'horizontal' | 'vertical'>;\n  size: Readable<ComponentSize | undefined>;\n  value: Readable<string | undefined>;\n  variant: Readable<SurfaceVariant | undefined>;\n};\n/** Injection key for the tabs context. */\nexport const TABS_CTX = createContext<TabsContext>('TabsContext');\n\nexport type OreTabsEvents = {\n  change: { value: string };\n};\n\nexport type OreTabsProps = {\n  /**\n   * Keyboard activation mode.\n   * - `'auto'` (default): Selecting a tab on arrow-key focus immediately activates it (ARIA recommendation for most cases).\n   * - `'manual'`: Arrow keys only move focus; the user must press Enter or Space to activate the focused tab.\n   */\n  activation?: 'auto' | 'manual';\n  /** Theme color */\n  color?: ThemeColor;\n  /** Accessible label for the tablist (passed as aria-label). Use when there is no visible heading labelling the tabs. */\n  label?: string;\n  /** Tab list orientation */\n  orientation?: 'horizontal' | 'vertical';\n  /** Component size */\n  size?: ComponentSize;\n  /** Currently selected tab value */\n  value?: string;\n  /** Visual style variant */\n  variant?: SurfaceVariant;\n};\n\n/**\n * Tabs container. Manages tab selection and syncs state to child tab items and panels.\n *\n * @element ore-tabs\n * @element ore-tab-item - Child element for tab buttons (auto-discovered)\n * @element ore-tab-panel - Child element for tab content (auto-discovered)\n *\n * @attr {string} value - The value of the currently selected tab\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'ghost' | 'glass' | 'frost'\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n *\n * @fires change - Emitted when the active tab changes with detail: { value: string }\n *\n * @slot tabs - Place `ore-tab-item` elements here\n * @slot - Place `ore-tab-panel` elements here\n *\n * @cssprop --tabs-radius - Border radius of the tablist container and panels\n * @cssprop --tabs-transition - Transition duration/easing for the active indicator\n * @cssprop --tabs-indicator-color - Color of the sliding active indicator line\n * @cssprop --tabs-bg - Background of the host element (flat variant)\n * @cssprop --tabs-tablist-bg - Tablist container background (solid/glass/frost variants)\n * @cssprop --tabs-tablist-border-color - Tablist container border color\n * @part tablist - Container that holds the slotted tab items\n * @part indicator - Active tab indicator element\n * @part panels - Container that holds tab panel content\n * @example\n * ```html\n * <ore-tabs value=\"tab1\" variant=\"bordered\">\n *   <ore-tab-item slot=\"tabs\" value=\"tab1\">Overview</ore-tab-item>\n *   <ore-tab-item slot=\"tabs\" value=\"tab2\">Settings</ore-tab-item>\n *   <ore-tab-panel value=\"tab1\"><p>Overview content</p></ore-tab-panel>\n *   <ore-tab-panel value=\"tab2\"><p>Settings content</p></ore-tab-panel>\n * </ore-tabs>\n * ```\n */\nexport const TABS_TAG = 'ore-tabs' as const;\ndefine<OreTabsProps>(TABS_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    activation: prop.oneOf(['auto', 'manual'] as const, 'auto'),\n    label: prop.string(),\n    orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'horizontal'),\n    value: prop.string(),\n    variant: prop.string<SurfaceVariant>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreTabsEvents>();\n\n    const shadowRoot = el.shadowRoot;\n    const tablistRef = ref<HTMLElement>();\n    const indicatorRef = ref<HTMLElement>();\n    const selectedValue = signal<string | undefined>(props.value.value);\n    const isManualActivation = () => props.activation.value === 'manual';\n    const isVertical = () => props.orientation.value === 'vertical';\n\n    bind({\n      attr: {\n        value: () => selectedValue.value ?? null,\n      },\n    });\n\n    const getTabs = () => [...el.querySelectorAll<HTMLElement>(':scope > ore-tab-item[slot=\"tabs\"]')];\n    const getEnabledTabs = () => getTabs().filter((t) => !t.hasAttribute('disabled'));\n    const focusTab = (tab: HTMLElement | undefined) => {\n      if (!tab) return;\n\n      const focusable = tab.shadowRoot?.querySelector<HTMLElement>('[role=\"tab\"]') ?? tab;\n\n      focusable.focus();\n    };\n\n    // ────────────────────────────────────────────────────────────────\n    // Selection State Management\n    // ────────────────────────────────────────────────────────────────\n\n    const setSelection = (value: string | undefined, shouldEmit = false) => {\n      selectedValue.value = value;\n\n      if (shouldEmit && value) emit('change', { value });\n    };\n\n    const ensureSelection = () => {\n      const tabs = getTabs();\n\n      if (tabs.length === 0) return; // No tabs yet, keep current selection\n\n      const current = selectedValue.value;\n      const hasCurrent = current\n        ? tabs.some((tab) => tab.getAttribute('value') === current && !tab.hasAttribute('disabled'))\n        : false;\n\n      if (hasCurrent) return;\n\n      const firstEnabled = tabs.find((tab) => !tab.hasAttribute('disabled'))?.getAttribute('value') ?? undefined;\n\n      setSelection(firstEnabled, false);\n    };\n\n    watch(props.value, (value) => {\n      selectedValue.value = value;\n      ensureSelection();\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // List Control for Keyboard Navigation\n    // ────────────────────────────────────────────────────────────────\n\n    const listControl = createListControl({\n      getItems: () => getEnabledTabs(),\n      loop: true,\n      onNavigate: (_action, index) => {\n        const tabs = getEnabledTabs();\n        const nextTab = tabs[index];\n\n        focusTab(nextTab);\n\n        if (!isManualActivation()) {\n          const value = nextTab?.getAttribute('value');\n\n          if (value) setSelection(value, true);\n        }\n      },\n      orientation: () => (isVertical() ? 'vertical' : 'both'),\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Context & Indicator Management\n    // ────────────────────────────────────────────────────────────────\n\n    provide(TABS_CTX, {\n      color: props.color,\n      orientation: computed(() => props.orientation.value ?? 'horizontal'),\n      size: props.size,\n      value: selectedValue,\n      variant: props.variant,\n    });\n\n    const moveIndicator = (activeTab: HTMLElement | undefined) => {\n      const indicator = indicatorRef.value;\n      const tablist = tablistRef.value;\n\n      if (!indicator || !tablist || !activeTab) return;\n\n      const tabRect = activeTab.getBoundingClientRect();\n      const listRect = tablist.getBoundingClientRect();\n\n      if (isVertical()) {\n        const y = tabRect.top - listRect.top + tablist.scrollTop;\n\n        indicator.style.transition = 'none';\n        indicator.style.height = `${tabRect.height}px`;\n        indicator.style.width = '';\n        indicator.style.left = '0';\n        indicator.style.top = '0';\n        void indicator.offsetWidth;\n        indicator.style.transition = '';\n        indicator.style.transform = `translateY(${y}px)`;\n      } else {\n        const x = tabRect.left - listRect.left + tablist.scrollLeft;\n\n        indicator.style.transition = 'none';\n        indicator.style.width = `${tabRect.width}px`;\n        indicator.style.height = '';\n        indicator.style.top = '';\n        indicator.style.left = '0';\n        void indicator.offsetWidth;\n        indicator.style.transition = '';\n        indicator.style.transform = `translateX(${x}px)`;\n      }\n    };\n\n    const updateIndicator = () => {\n      const value = selectedValue.value;\n\n      if (!value) return;\n\n      const activeTab = getTabs().find((t) => t.getAttribute('value') === value);\n\n      moveIndicator(activeTab);\n    };\n\n    watch(selectedValue, () => {\n      requestAnimationFrame(updateIndicator);\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Event Handlers\n    // ────────────────────────────────────────────────────────────────\n\n    const handleTabClick = (e: Event) => {\n      const tab = e\n        .composedPath()\n        .find((node): node is HTMLElement => node instanceof HTMLElement && node.localName === 'ore-tab-item');\n\n      if (!tab || tab.hasAttribute('disabled')) return;\n\n      // Guard: only respond to tab-items that belong to THIS tabs instance\n      if (tab.closest('ore-tabs') !== el) return;\n\n      const value = tab.getAttribute('value');\n\n      if (!value || value === selectedValue.value) return;\n\n      setSelection(value, true);\n    };\n\n    const activateFocusedTab = (): void => {\n      const tabs = getEnabledTabs();\n      const focusedTab = tabs.find(\n        (tab) => tab === document.activeElement || tab.shadowRoot?.activeElement === document.activeElement,\n      );\n      const focusedValue = focusedTab?.getAttribute('value');\n\n      if (focusedValue && focusedValue !== selectedValue.value) setSelection(focusedValue, true);\n    };\n\n    const manualActivationPress = createInteraction({\n      disabled: computed(() => !isManualActivation()),\n      onPress: activateFocusedTab,\n    });\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      const tabs = getEnabledTabs();\n\n      if (tabs.length === 0) return;\n\n      const path = e.composedPath();\n      const activeTabFromEvent = path.find(\n        (node): node is HTMLElement => node instanceof HTMLElement && node.localName === 'ore-tab-item',\n      );\n\n      const tabFromEvent = activeTabFromEvent ?? tabs.find((t) => t.getAttribute('value') === selectedValue.value);\n      const focused = tabFromEvent ? tabs.indexOf(tabFromEvent) : -1;\n\n      if (focused >= 0) listControl.set(focused);\n\n      if (listControl.handleKeydown(e)) return;\n\n      manualActivationPress.handleKeydown(e);\n    };\n\n    bind({\n      on: {\n        click: handleTabClick,\n        keydown: handleKeydown,\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Lifecycle\n    // ────────────────────────────────────────────────────────────────\n\n    onMounted(() => {\n      const syncSelection = () => {\n        ensureSelection();\n        updateIndicator();\n      };\n\n      const tabsSlot = shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"tabs\"]');\n\n      if (tabsSlot) {\n        tabsSlot.addEventListener('slotchange', syncSelection);\n      }\n\n      syncSelection();\n      requestAnimationFrame(syncSelection);\n\n      return () => {\n        if (tabsSlot) {\n          tabsSlot.removeEventListener('slotchange', syncSelection);\n        }\n      };\n    });\n\n    return html`\n      <div class=\"tablist-wrapper\">\n        <div\n          role=\"tablist\"\n          ref=\"${tablistRef}\"\n          part=\"tablist\"\n          aria-orientation=\"${props.orientation}\"\n          aria-label=\"${props.label}\">\n          <slot name=\"tabs\"></slot>\n        </div>\n        <div class=\"indicator\" ref=\"${indicatorRef}\" part=\"indicator\"></div>\n      </div>\n      <div class=\"panels\" part=\"panels\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [colorThemeMixin, styles],\n});\n"],"mappings":";;;;;;;;AAmBA,IAAa,IAAW,EAA2B,aAAa,GA+DnD,IAAW;AACxB,EAAqB,GAAU;CAC7B,OAAO;EACL,GAAG;EACH,GAAG;EACH,YAAY,EAAK,MAAM,CAAC,QAAQ,QAAQ,GAAY,MAAM;EAC1D,OAAO,EAAK,OAAO;EACnB,aAAa,EAAK,MAAM,CAAC,cAAc,UAAU,GAAY,YAAY;EACzE,OAAO,EAAK,OAAO;EACnB,SAAS,EAAK,OAAuB;CACvC;CACA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAO,EAAuB,GAE9B,IAAa,EAAG,YAChB,IAAa,EAAiB,GAC9B,IAAe,EAAiB,GAChC,IAAgB,EAA2B,EAAM,MAAM,KAAK,GAC5D,UAA2B,EAAM,WAAW,UAAU,UACtD,UAAmB,EAAM,YAAY,UAAU;EAErD,EAAK,EACH,MAAM,EACJ,aAAa,EAAc,SAAS,KACtC,EACF,CAAC;EAED,IAAM,UAAgB,CAAC,GAAG,EAAG,iBAA8B,sCAAoC,CAAC,GAC1F,UAAuB,EAAQ,CAAC,CAAC,QAAQ,MAAM,CAAC,EAAE,aAAa,UAAU,CAAC,GAC1E,KAAY,MAAiC;GAC5C,MAEa,EAAI,YAAY,cAA2B,gBAAc,KAAK,EAAA,CAEtE,MAAM;EAClB,GAMM,KAAgB,GAA2B,IAAa,OAAU;GAGtE,AAFA,EAAc,QAAQ,GAElB,KAAc,KAAO,EAAK,UAAU,EAAE,SAAM,CAAC;EACnD,GAEM,UAAwB;GAC5B,IAAM,IAAO,EAAQ;GAErB,IAAI,EAAK,WAAW,GAAG;GAEvB,IAAM,IAAU,EAAc;GAK9B,IAJmB,KACf,EAAK,MAAM,MAAQ,EAAI,aAAa,OAAO,MAAM,KAAW,CAAC,EAAI,aAAa,UAAU,CAAC,GAG7E;GAEhB,IAAM,IAAe,EAAK,MAAM,MAAQ,CAAC,EAAI,aAAa,UAAU,CAAC,CAAC,EAAE,aAAa,OAAO,KAAK,KAAA;GAEjG,EAAa,GAAc,EAAK;EAClC;EAEA,EAAM,EAAM,QAAQ,MAAU;GAE5B,AADA,EAAc,QAAQ,GACtB,EAAgB;EAClB,CAAC;EAMD,IAAM,IAAc,EAAkB;GACpC,gBAAgB,EAAe;GAC/B,MAAM;GACN,aAAa,GAAS,MAAU;IAE9B,IAAM,IADO,EACG,CAAA,CAAK;IAIrB,IAFA,EAAS,CAAO,GAEZ,CAAC,EAAmB,GAAG;KACzB,IAAM,IAAQ,GAAS,aAAa,OAAO;KAE3C,AAAI,KAAO,EAAa,GAAO,EAAI;IACrC;GACF;GACA,mBAAoB,EAAW,IAAI,aAAa;EAClD,CAAC;EAMD,EAAQ,GAAU;GAChB,OAAO,EAAM;GACb,aAAa,QAAe,EAAM,YAAY,SAAS,YAAY;GACnE,MAAM,EAAM;GACZ,OAAO;GACP,SAAS,EAAM;EACjB,CAAC;EAED,IAAM,KAAiB,MAAuC;GAC5D,IAAM,IAAY,EAAa,OACzB,IAAU,EAAW;GAE3B,IAAI,CAAC,KAAa,CAAC,KAAW,CAAC,GAAW;GAE1C,IAAM,IAAU,EAAU,sBAAsB,GAC1C,IAAW,EAAQ,sBAAsB;GAE/C,IAAI,EAAW,GAAG;IAChB,IAAM,IAAI,EAAQ,MAAM,EAAS,MAAM,EAAQ;IAS/C,AAPA,EAAU,MAAM,aAAa,QAC7B,EAAU,MAAM,SAAS,GAAG,EAAQ,OAAO,KAC3C,EAAU,MAAM,QAAQ,IACxB,EAAU,MAAM,OAAO,KACvB,EAAU,MAAM,MAAM,KACtB,EAAe,aACf,EAAU,MAAM,aAAa,IAC7B,EAAU,MAAM,YAAY,cAAc,EAAE;GAC9C,OAAO;IACL,IAAM,IAAI,EAAQ,OAAO,EAAS,OAAO,EAAQ;IASjD,AAPA,EAAU,MAAM,aAAa,QAC7B,EAAU,MAAM,QAAQ,GAAG,EAAQ,MAAM,KACzC,EAAU,MAAM,SAAS,IACzB,EAAU,MAAM,MAAM,IACtB,EAAU,MAAM,OAAO,KACvB,EAAe,aACf,EAAU,MAAM,aAAa,IAC7B,EAAU,MAAM,YAAY,cAAc,EAAE;GAC9C;EACF,GAEM,UAAwB;GAC5B,IAAM,IAAQ,EAAc;GAE5B,IAAI,CAAC,GAAO;GAEZ,IAAM,IAAY,EAAQ,CAAC,CAAC,MAAM,MAAM,EAAE,aAAa,OAAO,MAAM,CAAK;GAEzE,EAAc,CAAS;EACzB;EAEA,EAAM,SAAqB;GACzB,sBAAsB,CAAe;EACvC,CAAC;EAMD,IAAM,KAAkB,MAAa;GACnC,IAAM,IAAM,EACT,aAAa,CAAC,CACd,MAAM,MAA8B,aAAgB,eAAe,EAAK,cAAc,cAAc;GAKvG,IAHI,CAAC,KAAO,EAAI,aAAa,UAAU,KAGnC,EAAI,QAAQ,UAAU,MAAM,GAAI;GAEpC,IAAM,IAAQ,EAAI,aAAa,OAAO;GAElC,CAAC,KAAS,MAAU,EAAc,SAEtC,EAAa,GAAO,EAAI;EAC1B,GAYM,IAAwB,EAAkB;GAC9C,UAAU,QAAe,CAAC,EAAmB,CAAC;GAC9C,eAZqC;IAKrC,IAAM,IAJO,EACM,CAAA,CAAK,MACrB,MAAQ,MAAQ,SAAS,iBAAiB,EAAI,YAAY,kBAAkB,SAAS,aAEnE,CAAA,EAAY,aAAa,OAAO;IAErD,AAAI,KAAgB,MAAiB,EAAc,SAAO,EAAa,GAAc,EAAI;GAC3F;EAKA,CAAC;EAuDD,OAjCA,EAAK,EACH,IAAI;GACF,OAAO;GACP,UAvBmB,MAAqB;IAC1C,IAAM,IAAO,EAAe;IAE5B,IAAI,EAAK,WAAW,GAAG;IAOvB,IAAM,IALO,EAAE,aACY,CAAA,CAAK,MAC7B,MAA8B,aAAgB,eAAe,EAAK,cAAc,cAG9D,KAAsB,EAAK,MAAM,MAAM,EAAE,aAAa,OAAO,MAAM,EAAc,KAAK,GACrG,IAAU,IAAe,EAAK,QAAQ,CAAY,IAAI;IAE5D,AAAI,KAAW,KAAG,EAAY,IAAI,CAAO,GAErC,GAAY,cAAc,CAAC,KAE/B,EAAsB,cAAc,CAAC;GACvC;EAME,EACF,CAAC,GAMD,QAAgB;GACd,IAAM,UAAsB;IAE1B,AADA,EAAgB,GAChB,EAAgB;GAClB,GAEM,IAAW,GAAY,cAA+B,qBAAmB;GAS/E,OAPI,KACF,EAAS,iBAAiB,cAAc,CAAa,GAGvD,EAAc,GACd,sBAAsB,CAAa,SAEtB;IACX,AAAI,KACF,EAAS,oBAAoB,cAAc,CAAa;GAE5D;EACF,CAAC,GAEM,CAAI;;;;iBAIE,EAAW;;8BAEE,EAAM,YAAY;wBACxB,EAAM,MAAM;;;sCAGE,EAAa;;;;;;CAMjD;CACA,QAAQ,CAAC,GAAiB,CAAM;AAClC,CAAC"}
+{"version":3,"file":"tabs.js","names":[],"sources":["../src/disclosure/tabs/tabs.ts"],"sourcesContent":["import {\n  createContext,\n  define,\n  html,\n  prop,\n  ref,\n  bind,\n  getHost,\n  onCleanup,\n  onMounted,\n  provide,\n  useEmit,\n} from '@vielzeug/ore';\nimport { computed, type Readable, signal, watch } from '@vielzeug/ripple';\n\nimport type { ComponentSize, SurfaceVariant, ThemeColor } from '../../types';\n\nimport { createInteraction, createListControl, elementDirection, lifecycleSignal } from '../../headless';\nimport { sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin } from '../../styles';\nimport styles from './tabs.css?inline';\n\n/** Context provided by ore-tabs to its ore-tab-item and ore-tab-panel children. */\nexport type TabsContext = {\n  color: Readable<ThemeColor | undefined>;\n  orientation: Readable<'horizontal' | 'vertical'>;\n  size: Readable<ComponentSize | undefined>;\n  value: Readable<string | undefined>;\n  variant: Readable<SurfaceVariant | undefined>;\n};\n/** Injection key for the tabs context. */\nexport const TABS_CTX = createContext<TabsContext>('TabsContext');\n\nexport type OreTabsEvents = {\n  change: { value: string };\n};\n\nexport type OreTabsProps = {\n  /**\n   * Keyboard activation mode.\n   * - `'auto'` (default): Selecting a tab on arrow-key focus immediately activates it (ARIA recommendation for most cases).\n   * - `'manual'`: Arrow keys only move focus; the user must press Enter or Space to activate the focused tab.\n   */\n  activation?: 'auto' | 'manual';\n  /** Theme color */\n  color?: ThemeColor;\n  /** Accessible label for the tablist (passed as aria-label). Use when there is no visible heading labelling the tabs. */\n  label?: string;\n  /** Tab list orientation */\n  orientation?: 'horizontal' | 'vertical';\n  /** Component size */\n  size?: ComponentSize;\n  /** Currently selected tab value */\n  value?: string;\n  /** Visual style variant */\n  variant?: SurfaceVariant;\n};\n\n/**\n * Tabs container. Manages tab selection and syncs state to child tab items and panels.\n *\n * @element ore-tabs\n * @element ore-tab-item - Child element for tab buttons (auto-discovered)\n * @element ore-tab-panel - Child element for tab content (auto-discovered)\n *\n * @attr {string} value - The value of the currently selected tab\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'ghost' | 'glass' | 'frost'\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n *\n * @fires change - Emitted when the active tab changes with detail: { value: string }\n *\n * @slot tabs - Place `ore-tab-item` elements here\n * @slot - Place `ore-tab-panel` elements here\n *\n * @cssprop --tabs-radius - Border radius of the tablist container and panels\n * @cssprop --tabs-transition - Transition duration/easing for the active indicator\n * @cssprop --tabs-indicator-color - Color of the sliding active indicator line\n * @cssprop --tabs-bg - Background of the host element (flat variant)\n * @cssprop --tabs-tablist-bg - Tablist container background (solid/glass/frost variants)\n * @cssprop --tabs-tablist-border-color - Tablist container border color\n * @part tablist - Container that holds the slotted tab items\n * @part indicator - Active tab indicator element\n * @part panels - Container that holds tab panel content\n * @example\n * ```html\n * <ore-tabs value=\"tab1\" variant=\"bordered\">\n *   <ore-tab-item slot=\"tabs\" value=\"tab1\">Overview</ore-tab-item>\n *   <ore-tab-item slot=\"tabs\" value=\"tab2\">Settings</ore-tab-item>\n *   <ore-tab-panel value=\"tab1\"><p>Overview content</p></ore-tab-panel>\n *   <ore-tab-panel value=\"tab2\"><p>Settings content</p></ore-tab-panel>\n * </ore-tabs>\n * ```\n */\nexport const TABS_TAG = 'ore-tabs' as const;\ndefine<OreTabsProps>(TABS_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    activation: prop.oneOf(['auto', 'manual'] as const, 'auto'),\n    label: prop.string(),\n    orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'horizontal'),\n    value: prop.string(),\n    variant: prop.string<SurfaceVariant>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreTabsEvents>();\n\n    const shadowRoot = el.shadowRoot;\n    const tablistRef = ref<HTMLElement>();\n    const indicatorRef = ref<HTMLElement>();\n    const selectedValue = signal<string | undefined>(props.value.value);\n    const isManualActivation = () => props.activation.value === 'manual';\n    const isVertical = () => props.orientation.value === 'vertical';\n\n    bind({\n      attr: {\n        value: () => selectedValue.value ?? null,\n      },\n    });\n\n    const getTabs = () => [...el.querySelectorAll<HTMLElement>(':scope > ore-tab-item[slot=\"tabs\"]')];\n    const getEnabledTabs = () => getTabs().filter((t) => !t.hasAttribute('disabled'));\n    const focusTab = (tab: HTMLElement | undefined) => {\n      if (!tab) return;\n\n      const focusable = tab.shadowRoot?.querySelector<HTMLElement>('[role=\"tab\"]') ?? tab;\n\n      focusable.focus();\n    };\n\n    // ────────────────────────────────────────────────────────────────\n    // Selection State Management\n    // ────────────────────────────────────────────────────────────────\n\n    const setSelection = (value: string | undefined, shouldEmit = false) => {\n      selectedValue.value = value;\n\n      if (shouldEmit && value) emit('change', { value });\n    };\n\n    const ensureSelection = () => {\n      const tabs = getTabs();\n\n      if (tabs.length === 0) return; // No tabs yet, keep current selection\n\n      const current = selectedValue.value;\n      const hasCurrent = current\n        ? tabs.some((tab) => tab.getAttribute('value') === current && !tab.hasAttribute('disabled'))\n        : false;\n\n      if (hasCurrent) return;\n\n      const firstEnabled = tabs.find((tab) => !tab.hasAttribute('disabled'))?.getAttribute('value') ?? undefined;\n\n      setSelection(firstEnabled, false);\n    };\n\n    watch(props.value, (value) => {\n      selectedValue.value = value;\n      ensureSelection();\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // List Control for Keyboard Navigation\n    // ────────────────────────────────────────────────────────────────\n\n    const listControl = createListControl({\n      direction: () => elementDirection(el),\n      getItems: () => getEnabledTabs(),\n      loop: true,\n      onNavigate: (_action, index) => {\n        const tabs = getEnabledTabs();\n        const nextTab = tabs[index];\n\n        focusTab(nextTab);\n\n        if (!isManualActivation()) {\n          const value = nextTab?.getAttribute('value');\n\n          if (value) setSelection(value, true);\n        }\n      },\n      orientation: () => (isVertical() ? 'vertical' : 'both'),\n      signal: lifecycleSignal(onCleanup),\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Context & Indicator Management\n    // ────────────────────────────────────────────────────────────────\n\n    provide(TABS_CTX, {\n      color: props.color,\n      orientation: computed(() => props.orientation.value ?? 'horizontal'),\n      size: props.size,\n      value: selectedValue,\n      variant: props.variant,\n    });\n\n    const moveIndicator = (activeTab: HTMLElement | undefined) => {\n      const indicator = indicatorRef.value;\n      const tablist = tablistRef.value;\n\n      if (!indicator || !tablist || !activeTab) return;\n\n      const tabRect = activeTab.getBoundingClientRect();\n      const listRect = tablist.getBoundingClientRect();\n\n      if (isVertical()) {\n        const y = tabRect.top - listRect.top + tablist.scrollTop;\n\n        indicator.style.transition = 'none';\n        indicator.style.height = `${tabRect.height}px`;\n        indicator.style.width = '';\n        indicator.style.left = '0';\n        indicator.style.top = '0';\n        void indicator.offsetWidth;\n        indicator.style.transition = '';\n        indicator.style.transform = `translateY(${y}px)`;\n      } else {\n        const x = tabRect.left - listRect.left + tablist.scrollLeft;\n\n        indicator.style.transition = 'none';\n        indicator.style.width = `${tabRect.width}px`;\n        indicator.style.height = '';\n        indicator.style.top = '';\n        indicator.style.left = '0';\n        void indicator.offsetWidth;\n        indicator.style.transition = '';\n        indicator.style.transform = `translateX(${x}px)`;\n      }\n    };\n\n    const updateIndicator = () => {\n      const value = selectedValue.value;\n\n      if (!value) return;\n\n      const activeTab = getTabs().find((t) => t.getAttribute('value') === value);\n\n      moveIndicator(activeTab);\n    };\n\n    watch(selectedValue, () => {\n      requestAnimationFrame(updateIndicator);\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Event Handlers\n    // ────────────────────────────────────────────────────────────────\n\n    const handleTabClick = (e: Event) => {\n      const tab = e\n        .composedPath()\n        .find((node): node is HTMLElement => node instanceof HTMLElement && node.localName === 'ore-tab-item');\n\n      if (!tab || tab.hasAttribute('disabled')) return;\n\n      // Guard: only respond to tab-items that belong to THIS tabs instance\n      if (tab.closest('ore-tabs') !== el) return;\n\n      const value = tab.getAttribute('value');\n\n      if (!value || value === selectedValue.value) return;\n\n      setSelection(value, true);\n    };\n\n    const activateFocusedTab = (): void => {\n      const tabs = getEnabledTabs();\n      const focusedTab = tabs.find(\n        (tab) => tab === document.activeElement || tab.shadowRoot?.activeElement === document.activeElement,\n      );\n      const focusedValue = focusedTab?.getAttribute('value');\n\n      if (focusedValue && focusedValue !== selectedValue.value) setSelection(focusedValue, true);\n    };\n\n    const manualActivationPress = createInteraction({\n      disabled: computed(() => !isManualActivation()),\n      onPress: activateFocusedTab,\n    });\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      const tabs = getEnabledTabs();\n\n      if (tabs.length === 0) return;\n\n      const path = e.composedPath();\n      const activeTabFromEvent = path.find(\n        (node): node is HTMLElement => node instanceof HTMLElement && node.localName === 'ore-tab-item',\n      );\n\n      const tabFromEvent = activeTabFromEvent ?? tabs.find((t) => t.getAttribute('value') === selectedValue.value);\n      const focused = tabFromEvent ? tabs.indexOf(tabFromEvent) : -1;\n\n      if (focused >= 0) listControl.set(focused);\n\n      if (listControl.handleKeydown(e)) return;\n\n      manualActivationPress.handleKeydown(e);\n    };\n\n    bind({\n      on: {\n        click: handleTabClick,\n        keydown: handleKeydown,\n      },\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Lifecycle\n    // ────────────────────────────────────────────────────────────────\n\n    onMounted(() => {\n      const syncSelection = () => {\n        ensureSelection();\n        updateIndicator();\n      };\n\n      const tabsSlot = shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"tabs\"]');\n\n      if (tabsSlot) {\n        tabsSlot.addEventListener('slotchange', syncSelection);\n      }\n\n      syncSelection();\n      requestAnimationFrame(syncSelection);\n\n      return () => {\n        if (tabsSlot) {\n          tabsSlot.removeEventListener('slotchange', syncSelection);\n        }\n      };\n    });\n\n    return html`\n      <div class=\"tablist-wrapper\">\n        <div\n          role=\"tablist\"\n          ref=\"${tablistRef}\"\n          part=\"tablist\"\n          aria-orientation=\"${props.orientation}\"\n          aria-label=\"${props.label}\">\n          <slot name=\"tabs\"></slot>\n        </div>\n        <div class=\"indicator\" ref=\"${indicatorRef}\" part=\"indicator\"></div>\n      </div>\n      <div class=\"panels\" part=\"panels\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [colorThemeMixin, styles],\n});\n"],"mappings":"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"}

package/dist/testing/index.d.ts

@@ -41,49 +41,13 @@ export declare const getAriaControls: (el: Element) => null | string;
 /** Returns the `role` attribute value, or null. */
 export declare const getRole: (el: Element) => null | string;
 /**
- * Queries the shadow root of a custom element for a matching CSS selector.
- * Returns null if the element has no shadow root or no match is found.
+ * Generic, framework-agnostic — re-exported from `@vielzeug/assay` rather than duplicated here.
+ * `dispatchPointer(el, type, init)` from earlier versions of this module is now
+ * `fire.pointer<Type>(el, init)` (e.g. `fire.pointerEnter`/`fire.pointerLeave`), imported from
+ * `@vielzeug/ore/testing` alongside `mount()` — pass `{ composed: true }` explicitly if you need
+ * the event to cross shadow boundaries.
  */
-export declare const queryInShadow: <T extends Element = Element>(host: Element, selector: string) => null | T;
-/**
- * Queries all matching elements inside the shadow root of a custom element.
- * Returns an empty array if the element has no shadow root.
- */
-export declare const queryAllInShadow: <T extends Element = Element>(host: Element, selector: string) => T[];
-/**
- * Queries a shadow DOM element by its CSS `part` attribute.
- * Shorthand for `queryInShadow(host, '[part="name"]')`.
- *
- * @example
- * ```ts
- * const btn = queryPart(carousel, 'prev-btn');
- * expect(btn).not.toBeNull();
- * ```
- */
-export declare const queryPart: <T extends Element = Element>(host: Element, part: string) => null | T;
-/**
- * Returns an array of light-DOM children assigned to a named slot,
- * or all slotted children if no name is given.
- *
- * @example
- * ```ts
- * const slides = getSlotted(carousel);
- * expect(slides).toHaveLength(3);
- * ```
- */
-export declare const getSlotted: (host: Element, slotName?: string) => Element[];
-/**
- * Dispatches a `PointerEvent` on the given element.
- * Useful for testing hover, drag, and pointer interactions without
- * relying on the fire helper from @vielzeug/ore/testing.
- *
- * @example
- * ```ts
- * dispatchPointer(el, 'enter');
- * dispatchPointer(el, 'leave');
- * ```
- */
-export declare const dispatchPointer: (el: Element, type: "cancel" | "down" | "enter" | "leave" | "move" | "up", init?: PointerEventInit) => void;
+export { queryInShadow, queryAllInShadow, queryPart, getSlotted } from '@vielzeug/assay';
 /**
  * Returns the current form value of a form-associated custom element.
  * Uses the ElementInternals-exposed `value` if available, then falls back
@@ -100,32 +64,23 @@ export declare const isFormValid: (el: HTMLElement & {
     validity?: ValidityState;
 }) => boolean;
 /**
- * Creates a synthetic `KeyboardEvent` with the given key.
- * Useful for testing keyboard navigation in headless controls.
- */
-export declare const keyEvent: (key: string, init?: KeyboardEventInit) => KeyboardEvent;
-/**
- * Returns a Promise that resolves after a microtask tick (one `queueMicrotask`).
- * Use when you need to wait for reactivity (signal effects) to settle without
- * moving into the macrotask queue.
- */
-export declare const nextTick: () => Promise<void>;
-/**
- * Returns a Promise that resolves after `ms` milliseconds.
- * Use sparingly — prefer `nextTick()` for reactive updates.
+ * Generic, framework-agnostic — re-exported from `@vielzeug/assay` rather than duplicated here.
+ * `keyEvent(key, init)` from earlier versions of this module (construct-only, no dispatch, and
+ * unused anywhere in this package's own tests) has been removed — use `fire.keyDown`/
+ * `fire.keyboard` from `@vielzeug/ore/testing`, which construct and dispatch in one call.
  */
-export declare const wait: (ms?: number) => Promise<void>;
+export { nextTick, wait } from '@vielzeug/assay';
 /**
- * Resets the headless ID counter to 0. Use in test `beforeEach` hooks when you need
+ * Resets the headless stable-ID counter to 0. Use in test `beforeEach` hooks when you need
  * deterministic IDs across test runs.
  *
  * @example
  * ```ts
- * import { resetIdCounter } from '@vielzeug/refine/testing';
- * beforeEach(() => resetIdCounter());
+ * import { resetStableIdCounter } from '@vielzeug/refine/testing';
+ * beforeEach(() => resetStableIdCounter());
  * ```
  */
-export { resetIdCounter } from '@vielzeug/ore';
+export { resetStableIdCounter } from '@vielzeug/ore';
 /**
  * Returns a snapshot of the most commonly tested ARIA attributes on an element.
  * Useful for concise inline snapshot assertions in component tests.

package/dist/testing/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/testing/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/testing/index.ts"],"names":[],"mappings":"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"}

package/dist/testing.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("@vielzeug/ore"),t=require("@vielzeug/ore/testing");var n=e=>e.getAttribute(`aria-invalid`)===`true`,r=e=>e.getAttribute(`aria-disabled`)===`true`,i=e=>e.getAttribute(`aria-checked`)===`true`,a=e=>e.getAttribute(`aria-checked`)===`mixed`,o=e=>e.getAttribute(`aria-expanded`)===`true`,s=e=>e.getAttribute(`aria-pressed`)===`true`,c=e=>e.getAttribute(`aria-required`)===`true`,l=e=>e.getAttribute(`aria-hidden`)===`true`,u=e=>e.getAttribute(`aria-label`),d=e=>e.getAttribute(`aria-labelledby`),f=e=>e.getAttribute(`aria-describedby`),p=e=>e.getAttribute(`aria-controls`),m=e=>e.getAttribute(`role`),h=(e,t)=>e.shadowRoot?.querySelector(t)??null,g=(e,t)=>Array.from(e.shadowRoot?.querySelectorAll(t)??[]),_=(e,t)=>h(e,`[part="${t}"]`),v=(e,t)=>{let n=t?`[slot="${t}"]`:`:not([slot])`;return Array.from(e.querySelectorAll(`:scope > ${n}`))},y=(e,t,n)=>{e.dispatchEvent(new PointerEvent(`pointer${t}`,{bubbles:!0,composed:!0,...n}))},b=e=>e.value??null,x=e=>e.validity?.valid??!0,S=(e,t)=>new KeyboardEvent(`keydown`,{bubbles:!0,cancelable:!0,key:e,...t}),C=()=>new Promise(e=>{queueMicrotask(e)}),w=(e=0)=>new Promise(t=>{setTimeout(t,e)}),T=e=>({ariaLabel:e.getAttribute(`aria-label`),checked:e.getAttribute(`aria-checked`),disabled:e.getAttribute(`aria-disabled`),expanded:e.getAttribute(`aria-expanded`),invalid:e.getAttribute(`aria-invalid`),labelledby:e.getAttribute(`aria-labelledby`),required:e.getAttribute(`aria-required`),role:e.getAttribute(`role`)}),E=e=>Object.entries(e).map(([e,t])=>t===``?e:`${e}="${t.replace(/"/g,`&quot;`)}"`).join(` `),D=(e={})=>{let t={};for(let[n,r]of Object.entries(e))if(!(r===!1||r==null))if(r===!0)t[n]=``;else if(Array.isArray(r)){if(r.length>0&&typeof r[0]==`object`)continue;t[n]=r.join(`,`)}else t[n]=String(r);return t},O=(e,n)=>(0,t.mount)(`<ore-input ${E(D(e))}>${n?.innerHTML??``}</ore-input>`),k=(e,n)=>(0,t.mount)(`<ore-textarea ${E(D(e))}>${n?.innerHTML??``}</ore-textarea>`),A=(e,n)=>(0,t.mount)(`<ore-select ${E(D(e))}>${n?.innerHTML??``}</ore-select>`),j=(e,n)=>(0,t.mount)(`<ore-combobox ${E(D(e))}>${n?.innerHTML??``}</ore-combobox>`),M=(e,n)=>(0,t.mount)(`<ore-checkbox ${E(D(e))}>${n?.innerHTML??``}</ore-checkbox>`),N=(e,n)=>(0,t.mount)(`<ore-checkbox-group ${E(D(e))}>${n?.innerHTML??``}</ore-checkbox-group>`),P=(e,n)=>(0,t.mount)(`<ore-radio ${E(D(e))}>${n?.innerHTML??``}</ore-radio>`),F=(e,n)=>(0,t.mount)(`<ore-radio-group ${E(D(e))}>${n?.innerHTML??``}</ore-radio-group>`),I=(e,n)=>(0,t.mount)(`<ore-switch ${E(D(e))}>${n?.innerHTML??``}</ore-switch>`),L=(e,n)=>(0,t.mount)(`<ore-button ${E(D(e))}>${n?.innerHTML??``}</ore-button>`),R=(e,n)=>(0,t.mount)(`<ore-button-group ${E(D(e))}>${n?.innerHTML??``}</ore-button-group>`),z=(e,n)=>(0,t.mount)(`<ore-file-input ${E(D(e))}>${n?.innerHTML??``}</ore-file-input>`),B=(e,n)=>(0,t.mount)(`<ore-form ${E(D(e))}>${n?.innerHTML??``}</ore-form>`),V=(e,n)=>(0,t.mount)(`<ore-number-input ${E(D(e))}>${n?.innerHTML??``}</ore-number-input>`),H=(e,n)=>(0,t.mount)(`<ore-otp-input ${E(D(e))}>${n?.innerHTML??``}</ore-otp-input>`),U=(e,n)=>(0,t.mount)(`<ore-rating ${E(D(e))}>${n?.innerHTML??``}</ore-rating>`),W=(e,n)=>(0,t.mount)(`<ore-slider ${E(D(e))}>${n?.innerHTML??``}</ore-slider>`);exports.attrsToHtml=E,exports.dispatchPointer=y,exports.getAriaControls=p,exports.getAriaDescribedBy=f,exports.getAriaLabel=u,exports.getAriaLabelledBy=d,exports.getAriaState=T,exports.getFormValue=b,exports.getRole=m,exports.getSlotted=v,exports.isAriaChecked=i,exports.isAriaDisabled=r,exports.isAriaExpanded=o,exports.isAriaHidden=l,exports.isAriaIndeterminate=a,exports.isAriaInvalid=n,exports.isAriaPressed=s,exports.isAriaRequired=c,exports.isFormValid=x,exports.keyEvent=S,exports.mountOreButton=L,exports.mountOreButtonGroup=R,exports.mountOreCheckbox=M,exports.mountOreCheckboxGroup=N,exports.mountOreCombobox=j,exports.mountOreFileInput=z,exports.mountOreForm=B,exports.mountOreInput=O,exports.mountOreNumberInput=V,exports.mountOreOtpInput=H,exports.mountOreRadio=P,exports.mountOreRadioGroup=F,exports.mountOreRating=U,exports.mountOreSelect=A,exports.mountOreSlider=W,exports.mountOreSwitch=I,exports.mountOreTextarea=k,exports.nextTick=C,exports.propsToAttrs=D,exports.queryAllInShadow=g,exports.queryInShadow=h,exports.queryPart=_,Object.defineProperty(exports,"resetIdCounter",{enumerable:!0,get:function(){return e.resetIdCounter}}),exports.wait=w;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("@vielzeug/ore"),t=require("@vielzeug/assay"),n=require("@vielzeug/ore/testing");var r=e=>e.getAttribute(`aria-invalid`)===`true`,i=e=>e.getAttribute(`aria-disabled`)===`true`,a=e=>e.getAttribute(`aria-checked`)===`true`,o=e=>e.getAttribute(`aria-checked`)===`mixed`,s=e=>e.getAttribute(`aria-expanded`)===`true`,c=e=>e.getAttribute(`aria-pressed`)===`true`,l=e=>e.getAttribute(`aria-required`)===`true`,u=e=>e.getAttribute(`aria-hidden`)===`true`,d=e=>e.getAttribute(`aria-label`),f=e=>e.getAttribute(`aria-labelledby`),p=e=>e.getAttribute(`aria-describedby`),m=e=>e.getAttribute(`aria-controls`),h=e=>e.getAttribute(`role`),g=e=>e.value??null,_=e=>e.validity?.valid??!0,v=e=>({ariaLabel:e.getAttribute(`aria-label`),checked:e.getAttribute(`aria-checked`),disabled:e.getAttribute(`aria-disabled`),expanded:e.getAttribute(`aria-expanded`),invalid:e.getAttribute(`aria-invalid`),labelledby:e.getAttribute(`aria-labelledby`),required:e.getAttribute(`aria-required`),role:e.getAttribute(`role`)}),y=e=>Object.entries(e).map(([e,t])=>t===``?e:`${e}="${t.replace(/"/g,`&quot;`)}"`).join(` `),b=(e={})=>{let t={};for(let[n,r]of Object.entries(e))if(!(r===!1||r==null))if(r===!0)t[n]=``;else if(Array.isArray(r)){if(r.length>0&&typeof r[0]==`object`)continue;t[n]=r.join(`,`)}else t[n]=String(r);return t},x=(e,t)=>(0,n.mount)(`<ore-input ${y(b(e))}>${t?.innerHTML??``}</ore-input>`),S=(e,t)=>(0,n.mount)(`<ore-textarea ${y(b(e))}>${t?.innerHTML??``}</ore-textarea>`),C=(e,t)=>(0,n.mount)(`<ore-select ${y(b(e))}>${t?.innerHTML??``}</ore-select>`),w=(e,t)=>(0,n.mount)(`<ore-combobox ${y(b(e))}>${t?.innerHTML??``}</ore-combobox>`),T=(e,t)=>(0,n.mount)(`<ore-checkbox ${y(b(e))}>${t?.innerHTML??``}</ore-checkbox>`),E=(e,t)=>(0,n.mount)(`<ore-checkbox-group ${y(b(e))}>${t?.innerHTML??``}</ore-checkbox-group>`),D=(e,t)=>(0,n.mount)(`<ore-radio ${y(b(e))}>${t?.innerHTML??``}</ore-radio>`),O=(e,t)=>(0,n.mount)(`<ore-radio-group ${y(b(e))}>${t?.innerHTML??``}</ore-radio-group>`),k=(e,t)=>(0,n.mount)(`<ore-switch ${y(b(e))}>${t?.innerHTML??``}</ore-switch>`),A=(e,t)=>(0,n.mount)(`<ore-button ${y(b(e))}>${t?.innerHTML??``}</ore-button>`),j=(e,t)=>(0,n.mount)(`<ore-button-group ${y(b(e))}>${t?.innerHTML??``}</ore-button-group>`),M=(e,t)=>(0,n.mount)(`<ore-file-input ${y(b(e))}>${t?.innerHTML??``}</ore-file-input>`),N=(e,t)=>(0,n.mount)(`<ore-form ${y(b(e))}>${t?.innerHTML??``}</ore-form>`),P=(e,t)=>(0,n.mount)(`<ore-number-input ${y(b(e))}>${t?.innerHTML??``}</ore-number-input>`),F=(e,t)=>(0,n.mount)(`<ore-otp-input ${y(b(e))}>${t?.innerHTML??``}</ore-otp-input>`),I=(e,t)=>(0,n.mount)(`<ore-rating ${y(b(e))}>${t?.innerHTML??``}</ore-rating>`),L=(e,t)=>(0,n.mount)(`<ore-slider ${y(b(e))}>${t?.innerHTML??``}</ore-slider>`);exports.attrsToHtml=y,exports.getAriaControls=m,exports.getAriaDescribedBy=p,exports.getAriaLabel=d,exports.getAriaLabelledBy=f,exports.getAriaState=v,exports.getFormValue=g,exports.getRole=h,Object.defineProperty(exports,"getSlotted",{enumerable:!0,get:function(){return t.getSlotted}}),exports.isAriaChecked=a,exports.isAriaDisabled=i,exports.isAriaExpanded=s,exports.isAriaHidden=u,exports.isAriaIndeterminate=o,exports.isAriaInvalid=r,exports.isAriaPressed=c,exports.isAriaRequired=l,exports.isFormValid=_,exports.mountOreButton=A,exports.mountOreButtonGroup=j,exports.mountOreCheckbox=T,exports.mountOreCheckboxGroup=E,exports.mountOreCombobox=w,exports.mountOreFileInput=M,exports.mountOreForm=N,exports.mountOreInput=x,exports.mountOreNumberInput=P,exports.mountOreOtpInput=F,exports.mountOreRadio=D,exports.mountOreRadioGroup=O,exports.mountOreRating=I,exports.mountOreSelect=C,exports.mountOreSlider=L,exports.mountOreSwitch=k,exports.mountOreTextarea=S,Object.defineProperty(exports,"nextTick",{enumerable:!0,get:function(){return t.nextTick}}),exports.propsToAttrs=b,Object.defineProperty(exports,"queryAllInShadow",{enumerable:!0,get:function(){return t.queryAllInShadow}}),Object.defineProperty(exports,"queryInShadow",{enumerable:!0,get:function(){return t.queryInShadow}}),Object.defineProperty(exports,"queryPart",{enumerable:!0,get:function(){return t.queryPart}}),Object.defineProperty(exports,"resetStableIdCounter",{enumerable:!0,get:function(){return e.resetStableIdCounter}}),Object.defineProperty(exports,"wait",{enumerable:!0,get:function(){return t.wait}});
 //# sourceMappingURL=testing.cjs.map