@vielzeug/refine 1.5.4 → 1.7.0

package/dist/switch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"switch.cjs","names":[],"sources":["../src/inputs/switch/switch.ts"],"sourcesContent":["import { define, html, inject, prop, onCleanup, useEmit } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\n\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\n\nimport { type CheckableChangePayload, lifecycleSignal, createCheckable } from '../../headless';\nimport { disablableBundle, sizableBundle, SWITCH_SIZE_PRESET, themableBundle } from '../../shared';\nimport { colorThemeMixin, disabledStateMixin, forcedColorsFormControlMixin, sizeVariantMixin } from '../../styles';\nimport { applyCheckableBinding } from '../shared/field-binding';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './switch.css?inline';\n\nexport type OreSwitchEvents = {\n  change: CheckableChangePayload;\n};\n\nexport type OreSwitchProps = CheckableProps & {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message (marks field as invalid) */\n  error?: string;\n  /** Helper text displayed below the switch */\n  helper?: string;\n  /** Component size */\n  size?: ComponentSize;\n};\n\n/**\n * A toggle switch component for binary on/off states.\n *\n * @element ore-switch\n *\n * @attr {boolean} checked - Checked/on state\n * @attr {boolean} disabled - Disable switch interaction\n * @attr {string} value - Field value\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Switch size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the switch\n *\n * @fires change - Emitted when switch is toggled. detail: { checked: boolean, value: string, originalEvent?: Event }\n *\n * @slot - Switch label text\n *\n * @cssprop --switch-width - Track width\n * @cssprop --switch-height - Track height\n * @cssprop --switch-track-bg - Inactive track background color\n * @cssprop --switch-checked-bg - Active/checked track background color\n * @cssprop --switch-thumb-bg - Thumb background color\n * @cssprop --switch-font-size - Label font size\n * @part switch - The switch wrapper element\n * @part track - The switch track element\n * @part thumb - The switch thumb element\n * @part label - The label element\n * @part helper-text - The helper/error text element\n *\n * @example\n * ```html\n * <ore-switch name=\"notifications\" checked color=\"primary\">Enable notifications</ore-switch>\n * <ore-switch name=\"darkMode\" size=\"sm\">Dark mode</ore-switch>\n * <ore-switch disabled helper=\"Contact admin to change\">Admin only</ore-switch>\n * ```\n */\nexport const SWITCH_TAG = 'ore-switch' as const;\ndefine<OreSwitchProps>(SWITCH_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    checked: prop.bool(false),\n    error: prop.string(),\n    helper: prop.string(),\n    name: prop.string(),\n    value: prop.string('on'),\n  },\n  setup(props) {\n    const emit = useEmit<OreSwitchEvents>();\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n\n    const checkable = createCheckable({\n      checked: props.checked,\n      clearIndeterminateFirst: false,\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      helper: props.helper,\n      onToggle: (payload) => {\n        checkable.triggerValidation('change');\n        emit('change', payload);\n      },\n      prefix: 'switch',\n      signal: lifecycleSignal(onCleanup),\n      validateOn: formCtx?.validateOn,\n      value: props.value,\n    });\n\n    checkable.attachFormField(\n      useField<string | null>({\n        disabled: checkable.disabled,\n        toFormValue: (v) => v,\n        value: checkable.checkableFormValue,\n      }),\n    );\n\n    const { assistiveId, checked, disabled, errorText, handleClick, handleKeydown, helperText, labelId } = checkable;\n\n    applyCheckableBinding(\n      fCtxProps.size,\n      { assistiveId, checked, disabled, errorText, handleClick, handleKeydown, helperText, labelId },\n      'switch',\n    );\n\n    return html`\n      <div class=\"switch-wrapper\" part=\"switch\">\n        <div class=\"switch-track\" part=\"track\">\n          <div class=\"switch-thumb\" part=\"thumb\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" id=\"${labelId}\"><slot></slot></span>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    forcedColorsFormControlMixin,\n    disabledStateMixin,\n    sizeVariantMixin(SWITCH_SIZE_PRESET),\n    componentStyles,\n  ],\n});\n"],"mappings":"mlBAmEA,IAAa,EAAa,0BACH,EAAY,CACjC,eAAgB,GAChB,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,cACH,GAAG,EAAA,iBACH,QAAS,EAAA,KAAK,KAAK,EAAK,EACxB,MAAO,EAAA,KAAK,OAAO,EACnB,OAAQ,EAAA,KAAK,OAAO,EACpB,KAAM,EAAA,KAAK,OAAO,EAClB,MAAO,EAAA,KAAK,OAAO,IAAI,CACzB,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAA,EAAA,QAAA,CAAgC,EAEhC,GAAA,EAAA,EAAA,OAAA,CAAiB,EAAA,QAAQ,EACzB,EAAY,EAAA,eAAe,EAAO,CAAO,EAEzC,EAAY,EAAA,gBAAgB,CAChC,QAAS,EAAM,QACf,wBAAyB,GACzB,SAAU,EAAU,SACpB,MAAO,EAAM,MACb,OAAQ,EAAM,OACd,SAAW,GAAY,CACrB,EAAU,kBAAkB,QAAQ,EACpC,EAAK,SAAU,CAAO,CACxB,EACA,OAAQ,SACR,OAAQ,EAAA,gBAAgB,EAAA,SAAS,EACjC,WAAY,GAAS,WACrB,MAAO,EAAM,KACf,CAAC,EAED,EAAU,iBAAA,EAAA,EAAA,SAAA,CACgB,CACtB,SAAU,EAAU,SACpB,YAAc,GAAM,EACpB,MAAO,EAAU,kBACnB,CAAC,CACH,EAEA,GAAM,CAAE,cAAa,UAAS,WAAU,YAAW,cAAa,gBAAe,aAAY,WAAY,EAQvG,OANA,EAAA,sBACE,EAAU,KACV,CAAE,cAAa,UAAS,WAAU,YAAW,cAAa,gBAAe,aAAY,SAAQ,EAC7F,QACF,EAEO,EAAA,IAAI;;;;;;6CAM8B,EAAQ;QAC7C,EAAA,mBAAmB,EAAa,EAAW,CAAU,EAAE;KAE7D,EACA,OAAQ,CACN,EAAA,gBACA,EAAA,6BACA,EAAA,mBACA,EAAA,iBAAiB,EAAA,kBAAkB,EACnC,EAAA,OACF,CACF,CAAC"}
+{"version":3,"file":"switch.cjs","names":[],"sources":["../src/inputs/switch/switch.ts"],"sourcesContent":["import { define, html, inject, prop, onCleanup, useEmit } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\n\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\n\nimport { type CheckableChangePayload, lifecycleSignal, createCheckable } from '../../headless';\nimport { disablableBundle, sizableBundle, SWITCH_SIZE_PRESET, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsFormControlMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport { applyCheckableBinding } from '../shared/field-binding';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './switch.css?inline';\n\nexport type OreSwitchEvents = {\n  change: CheckableChangePayload;\n};\n\nexport type OreSwitchProps = CheckableProps & {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message (marks field as invalid) */\n  error?: string;\n  /** Helper text displayed below the switch */\n  helper?: string;\n  /** Component size */\n  size?: ComponentSize;\n};\n\n/**\n * A toggle switch component for binary on/off states.\n *\n * @element ore-switch\n *\n * @attr {boolean} checked - Checked/on state\n * @attr {boolean} disabled - Disable switch interaction\n * @attr {string} value - Field value\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Switch size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the switch\n *\n * @fires change - Emitted when switch is toggled. detail: { checked: boolean, value: string, originalEvent?: Event }\n *\n * @slot - Switch label text\n *\n * @cssprop --switch-width - Track width\n * @cssprop --switch-height - Track height\n * @cssprop --switch-track-bg - Inactive track background color\n * @cssprop --switch-checked-bg - Active/checked track background color\n * @cssprop --switch-thumb-bg - Thumb background color\n * @cssprop --switch-font-size - Label font size\n * @part switch - The switch wrapper element\n * @part track - The switch track element\n * @part thumb - The switch thumb element\n * @part label - The label element\n * @part helper-text - The helper/error text element\n *\n * @example\n * ```html\n * <ore-switch name=\"notifications\" checked color=\"primary\">Enable notifications</ore-switch>\n * <ore-switch name=\"darkMode\" size=\"sm\">Dark mode</ore-switch>\n * <ore-switch disabled helper=\"Contact admin to change\">Admin only</ore-switch>\n * ```\n */\nexport const SWITCH_TAG = 'ore-switch' as const;\ndefine<OreSwitchProps>(SWITCH_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    checked: prop.bool(false),\n    error: prop.string(),\n    helper: prop.string(),\n    name: prop.string(),\n    value: prop.string('on'),\n  },\n  setup(props) {\n    const emit = useEmit<OreSwitchEvents>();\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n\n    const checkable = createCheckable({\n      checked: props.checked,\n      clearIndeterminateFirst: false,\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      helper: props.helper,\n      onToggle: (payload) => {\n        checkable.triggerValidation('change');\n        emit('change', payload);\n      },\n      prefix: 'switch',\n      signal: lifecycleSignal(onCleanup),\n      validateOn: formCtx?.validateOn,\n      value: props.value,\n    });\n\n    checkable.attachFormField(\n      useField<string | null>({\n        disabled: checkable.disabled,\n        toFormValue: (v) => v,\n        value: checkable.checkableFormValue,\n      }),\n    );\n\n    const { assistiveId, checked, disabled, errorText, handleClick, handleKeydown, helperText, labelId } = checkable;\n\n    applyCheckableBinding(\n      fCtxProps.size,\n      { assistiveId, checked, disabled, errorText, handleClick, handleKeydown, helperText, labelId },\n      'switch',\n    );\n\n    return html`\n      <div class=\"switch-wrapper\" part=\"switch\">\n        <div class=\"switch-track\" part=\"track\">\n          <div class=\"switch-thumb\" part=\"thumb\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" id=\"${labelId}\"><slot></slot></span>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    forcedColorsFormControlMixin,\n    disabledStateMixin,\n    coarsePointerMixin,\n    sizeVariantMixin(SWITCH_SIZE_PRESET),\n    componentStyles,\n  ],\n});\n"],"mappings":"soBAyEA,IAAa,EAAa,0BACH,EAAY,CACjC,eAAgB,GAChB,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,cACH,GAAG,EAAA,iBACH,QAAS,EAAA,KAAK,KAAK,EAAK,EACxB,MAAO,EAAA,KAAK,OAAO,EACnB,OAAQ,EAAA,KAAK,OAAO,EACpB,KAAM,EAAA,KAAK,OAAO,EAClB,MAAO,EAAA,KAAK,OAAO,IAAI,CACzB,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAA,EAAA,QAAA,CAAgC,EAEhC,GAAA,EAAA,EAAA,OAAA,CAAiB,EAAA,QAAQ,EACzB,EAAY,EAAA,eAAe,EAAO,CAAO,EAEzC,EAAY,EAAA,gBAAgB,CAChC,QAAS,EAAM,QACf,wBAAyB,GACzB,SAAU,EAAU,SACpB,MAAO,EAAM,MACb,OAAQ,EAAM,OACd,SAAW,GAAY,CACrB,EAAU,kBAAkB,QAAQ,EACpC,EAAK,SAAU,CAAO,CACxB,EACA,OAAQ,SACR,OAAQ,EAAA,gBAAgB,EAAA,SAAS,EACjC,WAAY,GAAS,WACrB,MAAO,EAAM,KACf,CAAC,EAED,EAAU,iBAAA,EAAA,EAAA,SAAA,CACgB,CACtB,SAAU,EAAU,SACpB,YAAc,GAAM,EACpB,MAAO,EAAU,kBACnB,CAAC,CACH,EAEA,GAAM,CAAE,cAAa,UAAS,WAAU,YAAW,cAAa,gBAAe,aAAY,WAAY,EAQvG,OANA,EAAA,sBACE,EAAU,KACV,CAAE,cAAa,UAAS,WAAU,YAAW,cAAa,gBAAe,aAAY,SAAQ,EAC7F,QACF,EAEO,EAAA,IAAI;;;;;;6CAM8B,EAAQ;QAC7C,EAAA,mBAAmB,EAAa,EAAW,CAAU,EAAE;KAE7D,EACA,OAAQ,CACN,EAAA,gBACA,EAAA,6BACA,EAAA,mBACA,EAAA,mBACA,EAAA,iBAAiB,EAAA,kBAAkB,EACnC,EAAA,OACF,CACF,CAAC"}

package/dist/switch.js

@@ -1,32 +1,33 @@
-import { sizeVariantMixin as e } from "./styles/mixins/shape.css.js";
-import { disabledStateMixin as t } from "./styles/mixins/states.css.js";
-import { colorThemeMixin as n, forcedColorsFormControlMixin as r } from "./styles/mixins/theme.css.js";
-import { disablableBundle as i, sizableBundle as a, themableBundle as o } from "./shared/prop-bundles.js";
-import { SWITCH_SIZE_PRESET as s } from "./shared/size-presets.js";
-import { lifecycleSignal as c } from "./headless/ore.js";
-import { createCheckable as l } from "./headless/checkable.js";
-import { applyCheckableBinding as u } from "./inputs/shared/field-binding.js";
-import { FORM_CTX as d, useFormContext as f } from "./inputs/shared/form-context.js";
-import { renderHelperRegion as p } from "./inputs/shared/templates.js";
-import m from "./inputs/switch/switch.css.js";
-import { define as h, html as g, inject as _, onCleanup as v, prop as y, useEmit as b } from "@vielzeug/ore";
-import { useField as x } from "@vielzeug/ore/forms";
+import { coarsePointerMixin as e } from "./styles/mixins/accessibility.css.js";
+import { sizeVariantMixin as t } from "./styles/mixins/shape.css.js";
+import { disabledStateMixin as n } from "./styles/mixins/states.css.js";
+import { colorThemeMixin as r, forcedColorsFormControlMixin as i } from "./styles/mixins/theme.css.js";
+import { disablableBundle as a, sizableBundle as o, themableBundle as s } from "./shared/prop-bundles.js";
+import { SWITCH_SIZE_PRESET as c } from "./shared/size-presets.js";
+import { lifecycleSignal as l } from "./headless/ore.js";
+import { createCheckable as u } from "./headless/checkable.js";
+import { applyCheckableBinding as d } from "./inputs/shared/field-binding.js";
+import { FORM_CTX as f, useFormContext as p } from "./inputs/shared/form-context.js";
+import { renderHelperRegion as m } from "./inputs/shared/templates.js";
+import h from "./inputs/switch/switch.css.js";
+import { define as g, html as _, inject as v, onCleanup as y, prop as b, useEmit as x } from "@vielzeug/ore";
+import { useField as S } from "@vielzeug/ore/forms";
 //#region src/inputs/switch/switch.ts
-var S = "ore-switch";
-h(S, {
+var C = "ore-switch";
+g(C, {
 	formAssociated: !0,
 	props: {
+		...s,
 		...o,
 		...a,
-		...i,
-		checked: y.bool(!1),
-		error: y.string(),
-		helper: y.string(),
-		name: y.string(),
-		value: y.string("on")
+		checked: b.bool(!1),
+		error: b.string(),
+		helper: b.string(),
+		name: b.string(),
+		value: b.string("on")
 	},
 	setup(e) {
-		let t = b(), n = _(d), r = f(e, n), i = l({
+		let t = x(), n = v(f), r = p(e, n), i = u({
 			checked: e.checked,
 			clearIndeterminateFirst: !1,
 			disabled: r.disabled,
@@ -36,44 +37,45 @@ h(S, {
 				i.triggerValidation("change"), t("change", e);
 			},
 			prefix: "switch",
-			signal: c(v),
+			signal: l(y),
 			validateOn: n?.validateOn,
 			value: e.value
 		});
-		i.attachFormField(x({
+		i.attachFormField(S({
 			disabled: i.disabled,
 			toFormValue: (e) => e,
 			value: i.checkableFormValue
 		}));
-		let { assistiveId: a, checked: o, disabled: s, errorText: m, handleClick: h, handleKeydown: y, helperText: S, labelId: C } = i;
-		return u(r.size, {
+		let { assistiveId: a, checked: o, disabled: s, errorText: c, handleClick: h, handleKeydown: g, helperText: b, labelId: C } = i;
+		return d(r.size, {
 			assistiveId: a,
 			checked: o,
 			disabled: s,
-			errorText: m,
+			errorText: c,
 			handleClick: h,
-			handleKeydown: y,
-			helperText: S,
+			handleKeydown: g,
+			helperText: b,
 			labelId: C
-		}, "switch"), g`
+		}, "switch"), _`
       <div class="switch-wrapper" part="switch">
         <div class="switch-track" part="track">
           <div class="switch-thumb" part="thumb"></div>
         </div>
       </div>
       <span class="label" part="label" id="${C}"><slot></slot></span>
-      ${p(a, m, S)}
+      ${m(a, c, b)}
     `;
 	},
 	styles: [
-		n,
 		r,
-		t,
-		e(s),
-		m
+		i,
+		n,
+		e,
+		t(c),
+		h
 	]
 });
 //#endregion
-export { S as SWITCH_TAG };
+export { C as SWITCH_TAG };
 
 //# sourceMappingURL=switch.js.map

package/dist/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","names":[],"sources":["../src/inputs/switch/switch.ts"],"sourcesContent":["import { define, html, inject, prop, onCleanup, useEmit } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\n\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\n\nimport { type CheckableChangePayload, lifecycleSignal, createCheckable } from '../../headless';\nimport { disablableBundle, sizableBundle, SWITCH_SIZE_PRESET, themableBundle } from '../../shared';\nimport { colorThemeMixin, disabledStateMixin, forcedColorsFormControlMixin, sizeVariantMixin } from '../../styles';\nimport { applyCheckableBinding } from '../shared/field-binding';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './switch.css?inline';\n\nexport type OreSwitchEvents = {\n  change: CheckableChangePayload;\n};\n\nexport type OreSwitchProps = CheckableProps & {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message (marks field as invalid) */\n  error?: string;\n  /** Helper text displayed below the switch */\n  helper?: string;\n  /** Component size */\n  size?: ComponentSize;\n};\n\n/**\n * A toggle switch component for binary on/off states.\n *\n * @element ore-switch\n *\n * @attr {boolean} checked - Checked/on state\n * @attr {boolean} disabled - Disable switch interaction\n * @attr {string} value - Field value\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Switch size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the switch\n *\n * @fires change - Emitted when switch is toggled. detail: { checked: boolean, value: string, originalEvent?: Event }\n *\n * @slot - Switch label text\n *\n * @cssprop --switch-width - Track width\n * @cssprop --switch-height - Track height\n * @cssprop --switch-track-bg - Inactive track background color\n * @cssprop --switch-checked-bg - Active/checked track background color\n * @cssprop --switch-thumb-bg - Thumb background color\n * @cssprop --switch-font-size - Label font size\n * @part switch - The switch wrapper element\n * @part track - The switch track element\n * @part thumb - The switch thumb element\n * @part label - The label element\n * @part helper-text - The helper/error text element\n *\n * @example\n * ```html\n * <ore-switch name=\"notifications\" checked color=\"primary\">Enable notifications</ore-switch>\n * <ore-switch name=\"darkMode\" size=\"sm\">Dark mode</ore-switch>\n * <ore-switch disabled helper=\"Contact admin to change\">Admin only</ore-switch>\n * ```\n */\nexport const SWITCH_TAG = 'ore-switch' as const;\ndefine<OreSwitchProps>(SWITCH_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    checked: prop.bool(false),\n    error: prop.string(),\n    helper: prop.string(),\n    name: prop.string(),\n    value: prop.string('on'),\n  },\n  setup(props) {\n    const emit = useEmit<OreSwitchEvents>();\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n\n    const checkable = createCheckable({\n      checked: props.checked,\n      clearIndeterminateFirst: false,\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      helper: props.helper,\n      onToggle: (payload) => {\n        checkable.triggerValidation('change');\n        emit('change', payload);\n      },\n      prefix: 'switch',\n      signal: lifecycleSignal(onCleanup),\n      validateOn: formCtx?.validateOn,\n      value: props.value,\n    });\n\n    checkable.attachFormField(\n      useField<string | null>({\n        disabled: checkable.disabled,\n        toFormValue: (v) => v,\n        value: checkable.checkableFormValue,\n      }),\n    );\n\n    const { assistiveId, checked, disabled, errorText, handleClick, handleKeydown, helperText, labelId } = checkable;\n\n    applyCheckableBinding(\n      fCtxProps.size,\n      { assistiveId, checked, disabled, errorText, handleClick, handleKeydown, helperText, labelId },\n      'switch',\n    );\n\n    return html`\n      <div class=\"switch-wrapper\" part=\"switch\">\n        <div class=\"switch-track\" part=\"track\">\n          <div class=\"switch-thumb\" part=\"thumb\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" id=\"${labelId}\"><slot></slot></span>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    forcedColorsFormControlMixin,\n    disabledStateMixin,\n    sizeVariantMixin(SWITCH_SIZE_PRESET),\n    componentStyles,\n  ],\n});\n"],"mappings":";;;;;;;;;;;;;;AAmEA,IAAa,IAAa;AAC1B,EAAuB,GAAY;CACjC,gBAAgB;CAChB,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,SAAS,EAAK,KAAK,EAAK;EACxB,OAAO,EAAK,OAAO;EACnB,QAAQ,EAAK,OAAO;EACpB,MAAM,EAAK,OAAO;EAClB,OAAO,EAAK,OAAO,IAAI;CACzB;CACA,MAAM,GAAO;EACX,IAAM,IAAO,EAAyB,GAEhC,IAAU,EAAO,CAAQ,GACzB,IAAY,EAAe,GAAO,CAAO,GAEzC,IAAY,EAAgB;GAChC,SAAS,EAAM;GACf,yBAAyB;GACzB,UAAU,EAAU;GACpB,OAAO,EAAM;GACb,QAAQ,EAAM;GACd,WAAW,MAAY;IAErB,AADA,EAAU,kBAAkB,QAAQ,GACpC,EAAK,UAAU,CAAO;GACxB;GACA,QAAQ;GACR,QAAQ,EAAgB,CAAS;GACjC,YAAY,GAAS;GACrB,OAAO,EAAM;EACf,CAAC;EAED,EAAU,gBACR,EAAwB;GACtB,UAAU,EAAU;GACpB,cAAc,MAAM;GACpB,OAAO,EAAU;EACnB,CAAC,CACH;EAEA,IAAM,EAAE,gBAAa,YAAS,aAAU,cAAW,gBAAa,kBAAe,eAAY,eAAY;EAQvG,OANA,EACE,EAAU,MACV;GAAE;GAAa;GAAS;GAAU;GAAW;GAAa;GAAe;GAAY;EAAQ,GAC7F,QACF,GAEO,CAAI;;;;;;6CAM8B,EAAQ;QAC7C,EAAmB,GAAa,GAAW,CAAU,EAAE;;CAE7D;CACA,QAAQ;EACN;EACA;EACA;EACA,EAAiB,CAAkB;EACnC;CACF;AACF,CAAC"}
+{"version":3,"file":"switch.js","names":[],"sources":["../src/inputs/switch/switch.ts"],"sourcesContent":["import { define, html, inject, prop, onCleanup, useEmit } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\n\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\n\nimport { type CheckableChangePayload, lifecycleSignal, createCheckable } from '../../headless';\nimport { disablableBundle, sizableBundle, SWITCH_SIZE_PRESET, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsFormControlMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport { applyCheckableBinding } from '../shared/field-binding';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './switch.css?inline';\n\nexport type OreSwitchEvents = {\n  change: CheckableChangePayload;\n};\n\nexport type OreSwitchProps = CheckableProps & {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message (marks field as invalid) */\n  error?: string;\n  /** Helper text displayed below the switch */\n  helper?: string;\n  /** Component size */\n  size?: ComponentSize;\n};\n\n/**\n * A toggle switch component for binary on/off states.\n *\n * @element ore-switch\n *\n * @attr {boolean} checked - Checked/on state\n * @attr {boolean} disabled - Disable switch interaction\n * @attr {string} value - Field value\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Switch size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the switch\n *\n * @fires change - Emitted when switch is toggled. detail: { checked: boolean, value: string, originalEvent?: Event }\n *\n * @slot - Switch label text\n *\n * @cssprop --switch-width - Track width\n * @cssprop --switch-height - Track height\n * @cssprop --switch-track-bg - Inactive track background color\n * @cssprop --switch-checked-bg - Active/checked track background color\n * @cssprop --switch-thumb-bg - Thumb background color\n * @cssprop --switch-font-size - Label font size\n * @part switch - The switch wrapper element\n * @part track - The switch track element\n * @part thumb - The switch thumb element\n * @part label - The label element\n * @part helper-text - The helper/error text element\n *\n * @example\n * ```html\n * <ore-switch name=\"notifications\" checked color=\"primary\">Enable notifications</ore-switch>\n * <ore-switch name=\"darkMode\" size=\"sm\">Dark mode</ore-switch>\n * <ore-switch disabled helper=\"Contact admin to change\">Admin only</ore-switch>\n * ```\n */\nexport const SWITCH_TAG = 'ore-switch' as const;\ndefine<OreSwitchProps>(SWITCH_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    checked: prop.bool(false),\n    error: prop.string(),\n    helper: prop.string(),\n    name: prop.string(),\n    value: prop.string('on'),\n  },\n  setup(props) {\n    const emit = useEmit<OreSwitchEvents>();\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n\n    const checkable = createCheckable({\n      checked: props.checked,\n      clearIndeterminateFirst: false,\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      helper: props.helper,\n      onToggle: (payload) => {\n        checkable.triggerValidation('change');\n        emit('change', payload);\n      },\n      prefix: 'switch',\n      signal: lifecycleSignal(onCleanup),\n      validateOn: formCtx?.validateOn,\n      value: props.value,\n    });\n\n    checkable.attachFormField(\n      useField<string | null>({\n        disabled: checkable.disabled,\n        toFormValue: (v) => v,\n        value: checkable.checkableFormValue,\n      }),\n    );\n\n    const { assistiveId, checked, disabled, errorText, handleClick, handleKeydown, helperText, labelId } = checkable;\n\n    applyCheckableBinding(\n      fCtxProps.size,\n      { assistiveId, checked, disabled, errorText, handleClick, handleKeydown, helperText, labelId },\n      'switch',\n    );\n\n    return html`\n      <div class=\"switch-wrapper\" part=\"switch\">\n        <div class=\"switch-track\" part=\"track\">\n          <div class=\"switch-thumb\" part=\"thumb\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" id=\"${labelId}\"><slot></slot></span>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    forcedColorsFormControlMixin,\n    disabledStateMixin,\n    coarsePointerMixin,\n    sizeVariantMixin(SWITCH_SIZE_PRESET),\n    componentStyles,\n  ],\n});\n"],"mappings":";;;;;;;;;;;;;;;AAyEA,IAAa,IAAa;AAC1B,EAAuB,GAAY;CACjC,gBAAgB;CAChB,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,SAAS,EAAK,KAAK,EAAK;EACxB,OAAO,EAAK,OAAO;EACnB,QAAQ,EAAK,OAAO;EACpB,MAAM,EAAK,OAAO;EAClB,OAAO,EAAK,OAAO,IAAI;CACzB;CACA,MAAM,GAAO;EACX,IAAM,IAAO,EAAyB,GAEhC,IAAU,EAAO,CAAQ,GACzB,IAAY,EAAe,GAAO,CAAO,GAEzC,IAAY,EAAgB;GAChC,SAAS,EAAM;GACf,yBAAyB;GACzB,UAAU,EAAU;GACpB,OAAO,EAAM;GACb,QAAQ,EAAM;GACd,WAAW,MAAY;IAErB,AADA,EAAU,kBAAkB,QAAQ,GACpC,EAAK,UAAU,CAAO;GACxB;GACA,QAAQ;GACR,QAAQ,EAAgB,CAAS;GACjC,YAAY,GAAS;GACrB,OAAO,EAAM;EACf,CAAC;EAED,EAAU,gBACR,EAAwB;GACtB,UAAU,EAAU;GACpB,cAAc,MAAM;GACpB,OAAO,EAAU;EACnB,CAAC,CACH;EAEA,IAAM,EAAE,gBAAa,YAAS,aAAU,cAAW,gBAAa,kBAAe,eAAY,eAAY;EAQvG,OANA,EACE,EAAU,MACV;GAAE;GAAa;GAAS;GAAU;GAAW;GAAa;GAAe;GAAY;EAAQ,GAC7F,QACF,GAEO,CAAI;;;;;;6CAM8B,EAAQ;QAC7C,EAAmB,GAAa,GAAW,CAAU,EAAE;;CAE7D;CACA,QAAQ;EACN;EACA;EACA;EACA;EACA,EAAiB,CAAkB;EACnC;CACF;AACF,CAAC"}

package/dist/tab-item.cjs

@@ -1,17 +1,17 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/theme.css.cjs"),n=require("./shared/prop-bundles.cjs"),r=require("./tabs.cjs"),i=require("./disclosure/tab-item/tab-item.css.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple");var s=`ore-tab-item`;(0,a.define)(s,{props:{...n.disablableBundle,active:a.prop.bool(!1),color:a.prop.string(),size:a.prop.string(),value:a.prop.string(``),variant:a.prop.string()},setup(e){let t=(0,a.getHost)(),n=a.watchEffect,i=(0,a.inject)(r.TABS_CTX);i&&n(()=>{let e=i.color.value,n=i.size.value,r=i.variant.value;e!==void 0&&t.setAttribute(`color`,e),n!==void 0&&t.setAttribute(`size`,n),r!==void 0&&t.setAttribute(`variant`,r)});let s=(0,o.computed)(()=>i?!!i.value.value&&i.value.value===e.value.value:e.active.value),c=()=>!!e.disabled.value;return(0,a.bind)({attr:{active:()=>s.value?!0:void 0}}),a.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/theme.css.cjs"),n=require("./shared/prop-bundles.cjs"),r=require("./headless/aria-reflection.cjs"),i=require("./tabs.cjs"),a=require("./disclosure/tab-item/tab-item.css.cjs");let o=require("@vielzeug/ore"),s=require("@vielzeug/ripple");var c=`ore-tab-item`;(0,o.define)(c,{props:{...n.disablableBundle,active:o.prop.bool(!1),color:o.prop.string(),size:o.prop.string(),value:o.prop.string(``),variant:o.prop.string()},setup(e){let t=(0,o.getHost)(),n=o.watchEffect,a=(0,o.inject)(i.TABS_CTX);a&&n(()=>{let e=a.color.value,n=a.size.value,r=a.variant.value;e!==void 0&&t.setAttribute(`color`,e),n!==void 0&&t.setAttribute(`size`,n),r!==void 0&&t.setAttribute(`variant`,r)});let c=(0,s.computed)(()=>a?!!a.value.value&&a.value.value===e.value.value:e.active.value),l=()=>!!e.disabled.value;(0,o.bind)({attr:{active:()=>c.value?!0:void 0}});let u=n=>{if(n.stopPropagation(),l()){n.preventDefault();return}t.dispatchEvent(new CustomEvent(`click`,{bubbles:!0,detail:{value:e.value.value}}))},d=()=>`tab-${e.value.value}`,f=(0,o.ref)();return(0,o.onMounted)(()=>{(0,o.watchEffect)(()=>{let n=f.value,i=e.value.value;if(!n)return;let a=((i?t.closest(`ore-tabs`):null)?.querySelector(`:scope > ore-tab-panel[value="${i}"]`))?.shadowRoot?.querySelector(`.panel`)??null;r.setAriaReflection(n,`ariaControlsElements`,a?[a]:[])})}),o.html`
       <button
         role="tab"
         type="button"
         part="tab"
-        :id="${()=>`tab-${e.value.value}`}"
-        aria-selected="${s}"
-        tabindex="${()=>s.value?`0`:`-1`}"
-        aria-disabled="${c}"
-        :aria-controls="${()=>`tabpanel-${e.value.value}`}"
-        @click="${n=>{if(n.stopPropagation(),c()){n.preventDefault();return}t.dispatchEvent(new CustomEvent(`click`,{bubbles:!0,detail:{value:e.value.value}}))}}">
+        ref="${f}"
+        :id="${d}"
+        aria-selected="${c}"
+        tabindex="${()=>c.value?`0`:`-1`}"
+        aria-disabled="${l}"
+        @click="${u}">
         <slot name="prefix"></slot>
         <slot></slot>
         <slot name="suffix"></slot>
       </button>
-    `},styles:[t.colorThemeMixin,t.forcedColorsFocusMixin(`button`),e.coarsePointerMixin,i.default]}),exports.TAB_ITEM_TAG=s;
+    `},styles:[t.colorThemeMixin,t.forcedColorsFocusMixin(`button`),e.coarsePointerMixin,a.default]}),exports.TAB_ITEM_TAG=c;
 //# sourceMappingURL=tab-item.cjs.map

package/dist/tab-item.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tab-item.cjs","names":[],"sources":["../src/disclosure/tab-item/tab-item.ts"],"sourcesContent":["import { define, html, inject, prop, bind, getHost, watchEffect } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { ComponentSize, SurfaceVariant, ThemeColor } from '../../types';\n\nimport { disablableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, forcedColorsFocusMixin } from '../../styles';\nimport { TABS_CTX } from '../tabs/tabs';\nimport styles from './tab-item.css?inline';\n\nexport type OreTabItemProps = {\n  /** Whether this tab is currently selected (set by ore-tabs) */\n  active?: boolean;\n  /** Theme color (inherited from ore-tabs) */\n  color?: ThemeColor;\n  /** Disable this tab */\n  disabled?: boolean;\n  /** Size (inherited from ore-tabs) */\n  size?: ComponentSize;\n  /** Unique value identifier — must match a ore-tab-panel value */\n  value: string;\n  /** Visual variant (inherited from ore-tabs) */\n  variant?: SurfaceVariant;\n};\n\n/**\n * Individual tab trigger. Must be placed in the `tabs` slot of `ore-tabs`.\n *\n * @element ore-tab-item\n *\n * @attr {string} value - Unique identifier, matches the corresponding ore-tab-panel value\n * @attr {boolean} active - Set by the parent ore-tabs when this tab is selected\n * @attr {boolean} disabled - Prevents selection\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} variant - Inherited from ore-tabs: 'solid' | 'flat' | 'bordered' | 'ghost' | 'glass' | 'frost'\n * @attr {string} color - Inherited from ore-tabs: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n *\n * @slot prefix - Icon or content before the label\n * @slot - Tab label\n * @slot suffix - Badge or count after the label\n *\n * @cssprop --tab-item-radius - Button border radius\n * @cssprop --tab-item-transition - Transition duration/easing\n * @cssprop --tab-item-padding - Button padding\n * @cssprop --tab-item-font-size - Button font size\n * @cssprop --tab-item-color - Default text color\n * @cssprop --tab-item-hover-bg - Background on hover\n * @cssprop --tab-item-active-bg - Background when active/selected\n * @cssprop --tab-item-active-color - Text color when active/selected\n * @cssprop --tab-item-active-shadow - Box shadow when active/selected\n * @part tab - Tab trigger element.\n * @example\n * ```html\n * <ore-tab-item slot=\"tabs\" value=\"overview\">Overview</ore-tab-item>\n * <ore-tab-item slot=\"tabs\" value=\"settings\" disabled>Settings</ore-tab-item>\n * ```\n */\nexport const TAB_ITEM_TAG = 'ore-tab-item' as const;\ndefine<OreTabItemProps>(TAB_ITEM_TAG, {\n  props: {\n    ...disablableBundle,\n    active: prop.bool(false),\n    color: prop.string<ThemeColor>(),\n    size: prop.string<ComponentSize>(),\n    value: prop.string(''),\n    variant: prop.string<SurfaceVariant>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const watch = watchEffect;\n\n    const tabsCtx = inject(TABS_CTX);\n\n    if (tabsCtx) {\n      watch(() => {\n        const color = tabsCtx.color.value;\n        const size = tabsCtx.size.value;\n        const variant = tabsCtx.variant.value;\n\n        if (color !== undefined) el.setAttribute('color', color);\n\n        if (size !== undefined) el.setAttribute('size', size);\n\n        if (variant !== undefined) el.setAttribute('variant', variant);\n      });\n    }\n\n    const isActive = computed(() =>\n      tabsCtx ? !!tabsCtx.value.value && tabsCtx.value.value === props.value.value : props.active.value,\n    );\n    const isDisabled = () => Boolean(props.disabled.value);\n\n    bind({\n      attr: {\n        active: () => (isActive.value ? true : undefined),\n      },\n    });\n\n    const handleClick = (event: MouseEvent) => {\n      event.stopPropagation();\n\n      if (isDisabled()) {\n        event.preventDefault();\n\n        return;\n      }\n\n      el.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: { value: props.value.value } }));\n    };\n\n    const tabId = () => `tab-${props.value.value}`;\n    const controlsAttr = () => `tabpanel-${props.value.value}`;\n\n    return html`\n      <button\n        role=\"tab\"\n        type=\"button\"\n        part=\"tab\"\n        :id=\"${tabId}\"\n        aria-selected=\"${isActive}\"\n        tabindex=\"${() => (isActive.value ? '0' : '-1')}\"\n        aria-disabled=\"${isDisabled}\"\n        :aria-controls=\"${controlsAttr}\"\n        @click=\"${handleClick}\">\n        <slot name=\"prefix\"></slot>\n        <slot></slot>\n        <slot name=\"suffix\"></slot>\n      </button>\n    `;\n  },\n  styles: [colorThemeMixin, forcedColorsFocusMixin('button'), coarsePointerMixin, styles],\n});\n"],"mappings":"uVAyDA,IAAa,EAAe,4BACJ,EAAc,CACpC,MAAO,CACL,GAAG,EAAA,iBACH,OAAQ,EAAA,KAAK,KAAK,EAAK,EACvB,MAAO,EAAA,KAAK,OAAmB,EAC/B,KAAM,EAAA,KAAK,OAAsB,EACjC,MAAO,EAAA,KAAK,OAAO,EAAE,EACrB,QAAS,EAAA,KAAK,OAAuB,CACvC,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAA,EAAA,QAAA,CAAa,EACb,EAAQ,EAAA,YAER,GAAA,EAAA,EAAA,OAAA,CAAiB,EAAA,QAAQ,EAE3B,GACF,MAAY,CACV,IAAM,EAAQ,EAAQ,MAAM,MACtB,EAAO,EAAQ,KAAK,MACpB,EAAU,EAAQ,QAAQ,MAE5B,IAAU,IAAA,IAAW,EAAG,aAAa,QAAS,CAAK,EAEnD,IAAS,IAAA,IAAW,EAAG,aAAa,OAAQ,CAAI,EAEhD,IAAY,IAAA,IAAW,EAAG,aAAa,UAAW,CAAO,CAC/D,CAAC,EAGH,IAAM,GAAA,EAAA,EAAA,SAAA,KACJ,EAAU,CAAC,CAAC,EAAQ,MAAM,OAAS,EAAQ,MAAM,QAAU,EAAM,MAAM,MAAQ,EAAM,OAAO,KAC9F,EACM,MAAmB,EAAQ,EAAM,SAAS,MAuBhD,OArBA,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,WAAe,EAAS,MAAQ,GAAO,IAAA,EACzC,CACF,CAAC,EAiBM,EAAA,IAAI;;;;;mBAHS,OAAO,EAAM,MAAM,QAQtB;yBACI,EAAS;wBACP,EAAS,MAAQ,IAAM,KAAM;yBAC/B,EAAW;8BAVL,YAAY,EAAM,MAAM,QAWhB;kBAxBd,GAAsB,CAGzC,GAFA,EAAM,gBAAgB,EAElB,EAAW,EAAG,CAChB,EAAM,eAAe,EAErB,MACF,CAEA,EAAG,cAAc,IAAI,YAAY,QAAS,CAAE,QAAS,GAAM,OAAQ,CAAE,MAAO,EAAM,MAAM,KAAM,CAAE,CAAC,CAAC,CACpG,EAe0B;;;;;KAM5B,EACA,OAAQ,CAAC,EAAA,gBAAiB,EAAA,uBAAuB,QAAQ,EAAG,EAAA,mBAAoB,EAAA,OAAM,CACxF,CAAC"}
+{"version":3,"file":"tab-item.cjs","names":[],"sources":["../src/disclosure/tab-item/tab-item.ts"],"sourcesContent":["import { define, html, inject, prop, ref, bind, getHost, onMounted, watchEffect } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { ComponentSize, SurfaceVariant, ThemeColor } from '../../types';\n\nimport { setAriaReflection } from '../../headless';\nimport { disablableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, forcedColorsFocusMixin } from '../../styles';\nimport { TABS_CTX } from '../tabs/tabs';\nimport styles from './tab-item.css?inline';\n\nexport type OreTabItemProps = {\n  /** Whether this tab is currently selected (set by ore-tabs) */\n  active?: boolean;\n  /** Theme color (inherited from ore-tabs) */\n  color?: ThemeColor;\n  /** Disable this tab */\n  disabled?: boolean;\n  /** Size (inherited from ore-tabs) */\n  size?: ComponentSize;\n  /** Unique value identifier — must match a ore-tab-panel value */\n  value: string;\n  /** Visual variant (inherited from ore-tabs) */\n  variant?: SurfaceVariant;\n};\n\n/**\n * Individual tab trigger. Must be placed in the `tabs` slot of `ore-tabs`.\n *\n * @element ore-tab-item\n *\n * @attr {string} value - Unique identifier, matches the corresponding ore-tab-panel value\n * @attr {boolean} active - Set by the parent ore-tabs when this tab is selected\n * @attr {boolean} disabled - Prevents selection\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} variant - Inherited from ore-tabs: 'solid' | 'flat' | 'bordered' | 'ghost' | 'glass' | 'frost'\n * @attr {string} color - Inherited from ore-tabs: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n *\n * @slot prefix - Icon or content before the label\n * @slot - Tab label\n * @slot suffix - Badge or count after the label\n *\n * @cssprop --tab-item-radius - Button border radius\n * @cssprop --tab-item-transition - Transition duration/easing\n * @cssprop --tab-item-padding - Button padding\n * @cssprop --tab-item-font-size - Button font size\n * @cssprop --tab-item-color - Default text color\n * @cssprop --tab-item-hover-bg - Background on hover\n * @cssprop --tab-item-active-bg - Background when active/selected\n * @cssprop --tab-item-active-color - Text color when active/selected\n * @cssprop --tab-item-active-shadow - Box shadow when active/selected\n * @part tab - Tab trigger element.\n * @example\n * ```html\n * <ore-tab-item slot=\"tabs\" value=\"overview\">Overview</ore-tab-item>\n * <ore-tab-item slot=\"tabs\" value=\"settings\" disabled>Settings</ore-tab-item>\n * ```\n */\nexport const TAB_ITEM_TAG = 'ore-tab-item' as const;\ndefine<OreTabItemProps>(TAB_ITEM_TAG, {\n  props: {\n    ...disablableBundle,\n    active: prop.bool(false),\n    color: prop.string<ThemeColor>(),\n    size: prop.string<ComponentSize>(),\n    value: prop.string(''),\n    variant: prop.string<SurfaceVariant>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const watch = watchEffect;\n\n    const tabsCtx = inject(TABS_CTX);\n\n    if (tabsCtx) {\n      watch(() => {\n        const color = tabsCtx.color.value;\n        const size = tabsCtx.size.value;\n        const variant = tabsCtx.variant.value;\n\n        if (color !== undefined) el.setAttribute('color', color);\n\n        if (size !== undefined) el.setAttribute('size', size);\n\n        if (variant !== undefined) el.setAttribute('variant', variant);\n      });\n    }\n\n    const isActive = computed(() =>\n      tabsCtx ? !!tabsCtx.value.value && tabsCtx.value.value === props.value.value : props.active.value,\n    );\n    const isDisabled = () => Boolean(props.disabled.value);\n\n    bind({\n      attr: {\n        active: () => (isActive.value ? true : undefined),\n      },\n    });\n\n    const handleClick = (event: MouseEvent) => {\n      event.stopPropagation();\n\n      if (isDisabled()) {\n        event.preventDefault();\n\n        return;\n      }\n\n      el.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: { value: props.value.value } }));\n    };\n\n    const tabId = () => `tab-${props.value.value}`;\n    const buttonRef = ref<HTMLButtonElement>();\n\n    // `aria-controls` as a plain IDREF attribute cannot resolve across shadow-tree boundaries\n    // (the matching `id` lives inside <ore-tab-panel>'s own shadow root) — see\n    // `setAriaReflection()`'s doc comment. Deferred to `onMounted()`: sibling custom elements\n    // (including the peer `<ore-tab-panel>`) connect in tree order within the same synchronous\n    // insertion, so a sibling's shadow content may not exist yet during this element's own\n    // `setup()` — `onMounted()`'s microtask runs after the whole subtree has connected.\n    onMounted(() => {\n      watchEffect(() => {\n        const button = buttonRef.value;\n        const value = props.value.value;\n\n        if (!button) return;\n\n        const tabsEl = value ? el.closest('ore-tabs') : null;\n        const panelEl = tabsEl?.querySelector<HTMLElement>(`:scope > ore-tab-panel[value=\"${value}\"]`);\n        const panel = panelEl?.shadowRoot?.querySelector<HTMLElement>('.panel') ?? null;\n\n        setAriaReflection(button, 'ariaControlsElements', panel ? [panel] : []);\n      });\n    });\n\n    return html`\n      <button\n        role=\"tab\"\n        type=\"button\"\n        part=\"tab\"\n        ref=\"${buttonRef}\"\n        :id=\"${tabId}\"\n        aria-selected=\"${isActive}\"\n        tabindex=\"${() => (isActive.value ? '0' : '-1')}\"\n        aria-disabled=\"${isDisabled}\"\n        @click=\"${handleClick}\">\n        <slot name=\"prefix\"></slot>\n        <slot></slot>\n        <slot name=\"suffix\"></slot>\n      </button>\n    `;\n  },\n  styles: [colorThemeMixin, forcedColorsFocusMixin('button'), coarsePointerMixin, styles],\n});\n"],"mappings":"mYA0DA,IAAa,EAAe,4BACJ,EAAc,CACpC,MAAO,CACL,GAAG,EAAA,iBACH,OAAQ,EAAA,KAAK,KAAK,EAAK,EACvB,MAAO,EAAA,KAAK,OAAmB,EAC/B,KAAM,EAAA,KAAK,OAAsB,EACjC,MAAO,EAAA,KAAK,OAAO,EAAE,EACrB,QAAS,EAAA,KAAK,OAAuB,CACvC,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAA,EAAA,QAAA,CAAa,EACb,EAAQ,EAAA,YAER,GAAA,EAAA,EAAA,OAAA,CAAiB,EAAA,QAAQ,EAE3B,GACF,MAAY,CACV,IAAM,EAAQ,EAAQ,MAAM,MACtB,EAAO,EAAQ,KAAK,MACpB,EAAU,EAAQ,QAAQ,MAE5B,IAAU,IAAA,IAAW,EAAG,aAAa,QAAS,CAAK,EAEnD,IAAS,IAAA,IAAW,EAAG,aAAa,OAAQ,CAAI,EAEhD,IAAY,IAAA,IAAW,EAAG,aAAa,UAAW,CAAO,CAC/D,CAAC,EAGH,IAAM,GAAA,EAAA,EAAA,SAAA,KACJ,EAAU,CAAC,CAAC,EAAQ,MAAM,OAAS,EAAQ,MAAM,QAAU,EAAM,MAAM,MAAQ,EAAM,OAAO,KAC9F,EACM,MAAmB,EAAQ,EAAM,SAAS,OAEhD,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,WAAe,EAAS,MAAQ,GAAO,IAAA,EACzC,CACF,CAAC,EAED,IAAM,EAAe,GAAsB,CAGzC,GAFA,EAAM,gBAAgB,EAElB,EAAW,EAAG,CAChB,EAAM,eAAe,EAErB,MACF,CAEA,EAAG,cAAc,IAAI,YAAY,QAAS,CAAE,QAAS,GAAM,OAAQ,CAAE,MAAO,EAAM,MAAM,KAAM,CAAE,CAAC,CAAC,CACpG,EAEM,MAAc,OAAO,EAAM,MAAM,QACjC,GAAA,EAAA,EAAA,IAAA,CAAmC,EAuBzC,OAfA,EAAA,EAAA,UAAA,KAAgB,EACd,EAAA,EAAA,YAAA,KAAkB,CAChB,IAAM,EAAS,EAAU,MACnB,EAAQ,EAAM,MAAM,MAE1B,GAAI,CAAC,EAAQ,OAIb,IAAM,IAFS,EAAQ,EAAG,QAAQ,UAAU,EAAI,KAAA,EACxB,cAA2B,iCAAiC,EAAM,GAAG,EAAA,EACtE,YAAY,cAA2B,QAAQ,GAAK,KAE3E,EAAA,kBAAkB,EAAQ,uBAAwB,EAAQ,CAAC,CAAK,EAAI,CAAC,CAAC,CACxE,CAAC,CACH,CAAC,EAEM,EAAA,IAAI;;;;;eAKA,EAAU;eACV,EAAM;yBACI,EAAS;wBACP,EAAS,MAAQ,IAAM,KAAM;yBAC/B,EAAW;kBAClB,EAAY;;;;;KAM5B,EACA,OAAQ,CAAC,EAAA,gBAAiB,EAAA,uBAAuB,QAAQ,EAAG,EAAA,mBAAoB,EAAA,OAAM,CACxF,CAAC"}

package/dist/tab-item.js

@@ -1,40 +1,32 @@
 import { coarsePointerMixin as e } from "./styles/mixins/accessibility.css.js";
 import { colorThemeMixin as t, forcedColorsFocusMixin as n } from "./styles/mixins/theme.css.js";
 import { disablableBundle as r } from "./shared/prop-bundles.js";
-import { TABS_CTX as i } from "./tabs.js";
-import a from "./disclosure/tab-item/tab-item.css.js";
-import { bind as o, define as s, getHost as c, html as l, inject as u, prop as d, watchEffect as f } from "@vielzeug/ore";
-import { computed as p } from "@vielzeug/ripple";
+import { setAriaReflection as i } from "./headless/aria-reflection.js";
+import { TABS_CTX as a } from "./tabs.js";
+import o from "./disclosure/tab-item/tab-item.css.js";
+import { bind as s, define as c, getHost as l, html as u, inject as d, onMounted as f, prop as p, ref as m, watchEffect as h } from "@vielzeug/ore";
+import { computed as g } from "@vielzeug/ripple";
 //#region src/disclosure/tab-item/tab-item.ts
-var m = "ore-tab-item";
-s(m, {
+var _ = "ore-tab-item";
+c(_, {
 	props: {
 		...r,
-		active: d.bool(!1),
-		color: d.string(),
-		size: d.string(),
-		value: d.string(""),
-		variant: d.string()
+		active: p.bool(!1),
+		color: p.string(),
+		size: p.string(),
+		value: p.string(""),
+		variant: p.string()
 	},
 	setup(e) {
-		let t = c(), n = f, r = u(i);
+		let t = l(), n = h, r = d(a);
 		r && n(() => {
 			let e = r.color.value, n = r.size.value, i = r.variant.value;
 			e !== void 0 && t.setAttribute("color", e), n !== void 0 && t.setAttribute("size", n), i !== void 0 && t.setAttribute("variant", i);
 		});
-		let a = p(() => r ? !!r.value.value && r.value.value === e.value.value : e.active.value), s = () => !!e.disabled.value;
-		return o({ attr: { active: () => a.value ? !0 : void 0 } }), l`
-      <button
-        role="tab"
-        type="button"
-        part="tab"
-        :id="${() => `tab-${e.value.value}`}"
-        aria-selected="${a}"
-        tabindex="${() => a.value ? "0" : "-1"}"
-        aria-disabled="${s}"
-        :aria-controls="${() => `tabpanel-${e.value.value}`}"
-        @click="${(n) => {
-			if (n.stopPropagation(), s()) {
+		let o = g(() => r ? !!r.value.value && r.value.value === e.value.value : e.active.value), c = () => !!e.disabled.value;
+		s({ attr: { active: () => o.value ? !0 : void 0 } });
+		let p = (n) => {
+			if (n.stopPropagation(), c()) {
 				n.preventDefault();
 				return;
 			}
@@ -42,7 +34,25 @@ s(m, {
 				bubbles: !0,
 				detail: { value: e.value.value }
 			}));
-		}}">
+		}, _ = () => `tab-${e.value.value}`, v = m();
+		return f(() => {
+			h(() => {
+				let n = v.value, r = e.value.value;
+				if (!n) return;
+				let a = ((r ? t.closest("ore-tabs") : null)?.querySelector(`:scope > ore-tab-panel[value="${r}"]`))?.shadowRoot?.querySelector(".panel") ?? null;
+				i(n, "ariaControlsElements", a ? [a] : []);
+			});
+		}), u`
+      <button
+        role="tab"
+        type="button"
+        part="tab"
+        ref="${v}"
+        :id="${_}"
+        aria-selected="${o}"
+        tabindex="${() => o.value ? "0" : "-1"}"
+        aria-disabled="${c}"
+        @click="${p}">
         <slot name="prefix"></slot>
         <slot></slot>
         <slot name="suffix"></slot>
@@ -53,10 +63,10 @@ s(m, {
 		t,
 		n("button"),
 		e,
-		a
+		o
 	]
 });
 //#endregion
-export { m as TAB_ITEM_TAG };
+export { _ as TAB_ITEM_TAG };
 
 //# sourceMappingURL=tab-item.js.map

package/dist/tab-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-item.js","names":[],"sources":["../src/disclosure/tab-item/tab-item.ts"],"sourcesContent":["import { define, html, inject, prop, bind, getHost, watchEffect } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { ComponentSize, SurfaceVariant, ThemeColor } from '../../types';\n\nimport { disablableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, forcedColorsFocusMixin } from '../../styles';\nimport { TABS_CTX } from '../tabs/tabs';\nimport styles from './tab-item.css?inline';\n\nexport type OreTabItemProps = {\n  /** Whether this tab is currently selected (set by ore-tabs) */\n  active?: boolean;\n  /** Theme color (inherited from ore-tabs) */\n  color?: ThemeColor;\n  /** Disable this tab */\n  disabled?: boolean;\n  /** Size (inherited from ore-tabs) */\n  size?: ComponentSize;\n  /** Unique value identifier — must match a ore-tab-panel value */\n  value: string;\n  /** Visual variant (inherited from ore-tabs) */\n  variant?: SurfaceVariant;\n};\n\n/**\n * Individual tab trigger. Must be placed in the `tabs` slot of `ore-tabs`.\n *\n * @element ore-tab-item\n *\n * @attr {string} value - Unique identifier, matches the corresponding ore-tab-panel value\n * @attr {boolean} active - Set by the parent ore-tabs when this tab is selected\n * @attr {boolean} disabled - Prevents selection\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} variant - Inherited from ore-tabs: 'solid' | 'flat' | 'bordered' | 'ghost' | 'glass' | 'frost'\n * @attr {string} color - Inherited from ore-tabs: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n *\n * @slot prefix - Icon or content before the label\n * @slot - Tab label\n * @slot suffix - Badge or count after the label\n *\n * @cssprop --tab-item-radius - Button border radius\n * @cssprop --tab-item-transition - Transition duration/easing\n * @cssprop --tab-item-padding - Button padding\n * @cssprop --tab-item-font-size - Button font size\n * @cssprop --tab-item-color - Default text color\n * @cssprop --tab-item-hover-bg - Background on hover\n * @cssprop --tab-item-active-bg - Background when active/selected\n * @cssprop --tab-item-active-color - Text color when active/selected\n * @cssprop --tab-item-active-shadow - Box shadow when active/selected\n * @part tab - Tab trigger element.\n * @example\n * ```html\n * <ore-tab-item slot=\"tabs\" value=\"overview\">Overview</ore-tab-item>\n * <ore-tab-item slot=\"tabs\" value=\"settings\" disabled>Settings</ore-tab-item>\n * ```\n */\nexport const TAB_ITEM_TAG = 'ore-tab-item' as const;\ndefine<OreTabItemProps>(TAB_ITEM_TAG, {\n  props: {\n    ...disablableBundle,\n    active: prop.bool(false),\n    color: prop.string<ThemeColor>(),\n    size: prop.string<ComponentSize>(),\n    value: prop.string(''),\n    variant: prop.string<SurfaceVariant>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const watch = watchEffect;\n\n    const tabsCtx = inject(TABS_CTX);\n\n    if (tabsCtx) {\n      watch(() => {\n        const color = tabsCtx.color.value;\n        const size = tabsCtx.size.value;\n        const variant = tabsCtx.variant.value;\n\n        if (color !== undefined) el.setAttribute('color', color);\n\n        if (size !== undefined) el.setAttribute('size', size);\n\n        if (variant !== undefined) el.setAttribute('variant', variant);\n      });\n    }\n\n    const isActive = computed(() =>\n      tabsCtx ? !!tabsCtx.value.value && tabsCtx.value.value === props.value.value : props.active.value,\n    );\n    const isDisabled = () => Boolean(props.disabled.value);\n\n    bind({\n      attr: {\n        active: () => (isActive.value ? true : undefined),\n      },\n    });\n\n    const handleClick = (event: MouseEvent) => {\n      event.stopPropagation();\n\n      if (isDisabled()) {\n        event.preventDefault();\n\n        return;\n      }\n\n      el.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: { value: props.value.value } }));\n    };\n\n    const tabId = () => `tab-${props.value.value}`;\n    const controlsAttr = () => `tabpanel-${props.value.value}`;\n\n    return html`\n      <button\n        role=\"tab\"\n        type=\"button\"\n        part=\"tab\"\n        :id=\"${tabId}\"\n        aria-selected=\"${isActive}\"\n        tabindex=\"${() => (isActive.value ? '0' : '-1')}\"\n        aria-disabled=\"${isDisabled}\"\n        :aria-controls=\"${controlsAttr}\"\n        @click=\"${handleClick}\">\n        <slot name=\"prefix\"></slot>\n        <slot></slot>\n        <slot name=\"suffix\"></slot>\n      </button>\n    `;\n  },\n  styles: [colorThemeMixin, forcedColorsFocusMixin('button'), coarsePointerMixin, styles],\n});\n"],"mappings":";;;;;;;;AAyDA,IAAa,IAAe;AAC5B,EAAwB,GAAc;CACpC,OAAO;EACL,GAAG;EACH,QAAQ,EAAK,KAAK,EAAK;EACvB,OAAO,EAAK,OAAmB;EAC/B,MAAM,EAAK,OAAsB;EACjC,OAAO,EAAK,OAAO,EAAE;EACrB,SAAS,EAAK,OAAuB;CACvC;CACA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAQ,GAER,IAAU,EAAO,CAAQ;EAE/B,AAAI,KACF,QAAY;GACV,IAAM,IAAQ,EAAQ,MAAM,OACtB,IAAO,EAAQ,KAAK,OACpB,IAAU,EAAQ,QAAQ;GAMhC,AAJI,MAAU,KAAA,KAAW,EAAG,aAAa,SAAS,CAAK,GAEnD,MAAS,KAAA,KAAW,EAAG,aAAa,QAAQ,CAAI,GAEhD,MAAY,KAAA,KAAW,EAAG,aAAa,WAAW,CAAO;EAC/D,CAAC;EAGH,IAAM,IAAW,QACf,IAAU,CAAC,CAAC,EAAQ,MAAM,SAAS,EAAQ,MAAM,UAAU,EAAM,MAAM,QAAQ,EAAM,OAAO,KAC9F,GACM,UAAmB,EAAQ,EAAM,SAAS;EAuBhD,OArBA,EAAK,EACH,MAAM,EACJ,cAAe,EAAS,QAAQ,KAAO,KAAA,EACzC,EACF,CAAC,GAiBM,CAAI;;;;;qBAHS,OAAO,EAAM,MAAM,QAQtB;yBACI,EAAS;0BACP,EAAS,QAAQ,MAAM,KAAM;yBAC/B,EAAW;gCAVL,YAAY,EAAM,MAAM,QAWhB;mBAxBd,MAAsB;GAGzC,IAFA,EAAM,gBAAgB,GAElB,EAAW,GAAG;IAChB,EAAM,eAAe;IAErB;GACF;GAEA,EAAG,cAAc,IAAI,YAAY,SAAS;IAAE,SAAS;IAAM,QAAQ,EAAE,OAAO,EAAM,MAAM,MAAM;GAAE,CAAC,CAAC;EACpG,EAe0B;;;;;;CAM5B;CACA,QAAQ;EAAC;EAAiB,EAAuB,QAAQ;EAAG;EAAoB;CAAM;AACxF,CAAC"}
+{"version":3,"file":"tab-item.js","names":[],"sources":["../src/disclosure/tab-item/tab-item.ts"],"sourcesContent":["import { define, html, inject, prop, ref, bind, getHost, onMounted, watchEffect } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { ComponentSize, SurfaceVariant, ThemeColor } from '../../types';\n\nimport { setAriaReflection } from '../../headless';\nimport { disablableBundle } from '../../shared';\nimport { coarsePointerMixin, colorThemeMixin, forcedColorsFocusMixin } from '../../styles';\nimport { TABS_CTX } from '../tabs/tabs';\nimport styles from './tab-item.css?inline';\n\nexport type OreTabItemProps = {\n  /** Whether this tab is currently selected (set by ore-tabs) */\n  active?: boolean;\n  /** Theme color (inherited from ore-tabs) */\n  color?: ThemeColor;\n  /** Disable this tab */\n  disabled?: boolean;\n  /** Size (inherited from ore-tabs) */\n  size?: ComponentSize;\n  /** Unique value identifier — must match a ore-tab-panel value */\n  value: string;\n  /** Visual variant (inherited from ore-tabs) */\n  variant?: SurfaceVariant;\n};\n\n/**\n * Individual tab trigger. Must be placed in the `tabs` slot of `ore-tabs`.\n *\n * @element ore-tab-item\n *\n * @attr {string} value - Unique identifier, matches the corresponding ore-tab-panel value\n * @attr {boolean} active - Set by the parent ore-tabs when this tab is selected\n * @attr {boolean} disabled - Prevents selection\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} variant - Inherited from ore-tabs: 'solid' | 'flat' | 'bordered' | 'ghost' | 'glass' | 'frost'\n * @attr {string} color - Inherited from ore-tabs: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n *\n * @slot prefix - Icon or content before the label\n * @slot - Tab label\n * @slot suffix - Badge or count after the label\n *\n * @cssprop --tab-item-radius - Button border radius\n * @cssprop --tab-item-transition - Transition duration/easing\n * @cssprop --tab-item-padding - Button padding\n * @cssprop --tab-item-font-size - Button font size\n * @cssprop --tab-item-color - Default text color\n * @cssprop --tab-item-hover-bg - Background on hover\n * @cssprop --tab-item-active-bg - Background when active/selected\n * @cssprop --tab-item-active-color - Text color when active/selected\n * @cssprop --tab-item-active-shadow - Box shadow when active/selected\n * @part tab - Tab trigger element.\n * @example\n * ```html\n * <ore-tab-item slot=\"tabs\" value=\"overview\">Overview</ore-tab-item>\n * <ore-tab-item slot=\"tabs\" value=\"settings\" disabled>Settings</ore-tab-item>\n * ```\n */\nexport const TAB_ITEM_TAG = 'ore-tab-item' as const;\ndefine<OreTabItemProps>(TAB_ITEM_TAG, {\n  props: {\n    ...disablableBundle,\n    active: prop.bool(false),\n    color: prop.string<ThemeColor>(),\n    size: prop.string<ComponentSize>(),\n    value: prop.string(''),\n    variant: prop.string<SurfaceVariant>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const watch = watchEffect;\n\n    const tabsCtx = inject(TABS_CTX);\n\n    if (tabsCtx) {\n      watch(() => {\n        const color = tabsCtx.color.value;\n        const size = tabsCtx.size.value;\n        const variant = tabsCtx.variant.value;\n\n        if (color !== undefined) el.setAttribute('color', color);\n\n        if (size !== undefined) el.setAttribute('size', size);\n\n        if (variant !== undefined) el.setAttribute('variant', variant);\n      });\n    }\n\n    const isActive = computed(() =>\n      tabsCtx ? !!tabsCtx.value.value && tabsCtx.value.value === props.value.value : props.active.value,\n    );\n    const isDisabled = () => Boolean(props.disabled.value);\n\n    bind({\n      attr: {\n        active: () => (isActive.value ? true : undefined),\n      },\n    });\n\n    const handleClick = (event: MouseEvent) => {\n      event.stopPropagation();\n\n      if (isDisabled()) {\n        event.preventDefault();\n\n        return;\n      }\n\n      el.dispatchEvent(new CustomEvent('click', { bubbles: true, detail: { value: props.value.value } }));\n    };\n\n    const tabId = () => `tab-${props.value.value}`;\n    const buttonRef = ref<HTMLButtonElement>();\n\n    // `aria-controls` as a plain IDREF attribute cannot resolve across shadow-tree boundaries\n    // (the matching `id` lives inside <ore-tab-panel>'s own shadow root) — see\n    // `setAriaReflection()`'s doc comment. Deferred to `onMounted()`: sibling custom elements\n    // (including the peer `<ore-tab-panel>`) connect in tree order within the same synchronous\n    // insertion, so a sibling's shadow content may not exist yet during this element's own\n    // `setup()` — `onMounted()`'s microtask runs after the whole subtree has connected.\n    onMounted(() => {\n      watchEffect(() => {\n        const button = buttonRef.value;\n        const value = props.value.value;\n\n        if (!button) return;\n\n        const tabsEl = value ? el.closest('ore-tabs') : null;\n        const panelEl = tabsEl?.querySelector<HTMLElement>(`:scope > ore-tab-panel[value=\"${value}\"]`);\n        const panel = panelEl?.shadowRoot?.querySelector<HTMLElement>('.panel') ?? null;\n\n        setAriaReflection(button, 'ariaControlsElements', panel ? [panel] : []);\n      });\n    });\n\n    return html`\n      <button\n        role=\"tab\"\n        type=\"button\"\n        part=\"tab\"\n        ref=\"${buttonRef}\"\n        :id=\"${tabId}\"\n        aria-selected=\"${isActive}\"\n        tabindex=\"${() => (isActive.value ? '0' : '-1')}\"\n        aria-disabled=\"${isDisabled}\"\n        @click=\"${handleClick}\">\n        <slot name=\"prefix\"></slot>\n        <slot></slot>\n        <slot name=\"suffix\"></slot>\n      </button>\n    `;\n  },\n  styles: [colorThemeMixin, forcedColorsFocusMixin('button'), coarsePointerMixin, styles],\n});\n"],"mappings":";;;;;;;;;AA0DA,IAAa,IAAe;AAC5B,EAAwB,GAAc;CACpC,OAAO;EACL,GAAG;EACH,QAAQ,EAAK,KAAK,EAAK;EACvB,OAAO,EAAK,OAAmB;EAC/B,MAAM,EAAK,OAAsB;EACjC,OAAO,EAAK,OAAO,EAAE;EACrB,SAAS,EAAK,OAAuB;CACvC;CACA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAQ,GAER,IAAU,EAAO,CAAQ;EAE/B,AAAI,KACF,QAAY;GACV,IAAM,IAAQ,EAAQ,MAAM,OACtB,IAAO,EAAQ,KAAK,OACpB,IAAU,EAAQ,QAAQ;GAMhC,AAJI,MAAU,KAAA,KAAW,EAAG,aAAa,SAAS,CAAK,GAEnD,MAAS,KAAA,KAAW,EAAG,aAAa,QAAQ,CAAI,GAEhD,MAAY,KAAA,KAAW,EAAG,aAAa,WAAW,CAAO;EAC/D,CAAC;EAGH,IAAM,IAAW,QACf,IAAU,CAAC,CAAC,EAAQ,MAAM,SAAS,EAAQ,MAAM,UAAU,EAAM,MAAM,QAAQ,EAAM,OAAO,KAC9F,GACM,UAAmB,EAAQ,EAAM,SAAS;EAEhD,EAAK,EACH,MAAM,EACJ,cAAe,EAAS,QAAQ,KAAO,KAAA,EACzC,EACF,CAAC;EAED,IAAM,KAAe,MAAsB;GAGzC,IAFA,EAAM,gBAAgB,GAElB,EAAW,GAAG;IAChB,EAAM,eAAe;IAErB;GACF;GAEA,EAAG,cAAc,IAAI,YAAY,SAAS;IAAE,SAAS;IAAM,QAAQ,EAAE,OAAO,EAAM,MAAM,MAAM;GAAE,CAAC,CAAC;EACpG,GAEM,UAAc,OAAO,EAAM,MAAM,SACjC,IAAY,EAAuB;EAuBzC,OAfA,QAAgB;GACd,QAAkB;IAChB,IAAM,IAAS,EAAU,OACnB,IAAQ,EAAM,MAAM;IAE1B,IAAI,CAAC,GAAQ;IAIb,IAAM,MAFS,IAAQ,EAAG,QAAQ,UAAU,IAAI,KAAA,EACxB,cAA2B,iCAAiC,EAAM,GAAG,EAAA,EACtE,YAAY,cAA2B,QAAQ,KAAK;IAE3E,EAAkB,GAAQ,wBAAwB,IAAQ,CAAC,CAAK,IAAI,CAAC,CAAC;GACxE,CAAC;EACH,CAAC,GAEM,CAAI;;;;;eAKA,EAAU;eACV,EAAM;yBACI,EAAS;0BACP,EAAS,QAAQ,MAAM,KAAM;yBAC/B,EAAW;kBAClB,EAAY;;;;;;CAM5B;CACA,QAAQ;EAAC;EAAiB,EAAuB,QAAQ;EAAG;EAAoB;CAAM;AACxF,CAAC"}

package/dist/tab-panel.cjs

@@ -1,14 +1,14 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./tabs.cjs"),n=require("./disclosure/tab-panel/tab-panel.css.cjs");let r=require("@vielzeug/ore"),i=require("@vielzeug/ore/directives"),a=require("@vielzeug/ripple");var o={"2xl":`var(--size-12)`,lg:`var(--size-6)`,md:`var(--size-4)`,none:`0`,sm:`var(--size-2)`,xl:`var(--size-8)`,xs:`var(--size-1)`},s=`ore-tab-panel`;(0,r.define)(s,{props:{active:r.prop.bool(!1),lazy:r.prop.bool(!1),padding:r.prop.oneOf([`none`,`xs`,`sm`,`md`,`lg`,`xl`,`2xl`],`md`),value:r.prop.string(``)},setup(e){let n=r.watchEffect,s=(0,r.inject)(t.TABS_CTX),c=(0,a.computed)(()=>s?!!s.value.value&&s.value.value===e.value.value:e.active.value);(0,r.bind)({attr:{active:()=>c.value?!0:void 0}});let l=(0,a.computed)(()=>o[e.padding.value??`md`]??o.md),u=(0,a.signal)(!1);n(()=>{c.value&&(u.value=!0)});let d=(0,a.computed)(()=>!e.lazy.value||u.value),f=(0,i.styleMap)({"--tab-panel-padding":l}),p=()=>`tabpanel-${e.value.value}`,m=()=>`tab-${e.value.value}`;return r.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./headless/aria-reflection.cjs"),n=require("./tabs.cjs"),r=require("./disclosure/tab-panel/tab-panel.css.cjs");let i=require("@vielzeug/ore"),a=require("@vielzeug/ore/directives"),o=require("@vielzeug/ripple");var s={"2xl":`var(--size-12)`,lg:`var(--size-6)`,md:`var(--size-4)`,none:`0`,sm:`var(--size-2)`,xl:`var(--size-8)`,xs:`var(--size-1)`},c=`ore-tab-panel`;(0,i.define)(c,{props:{active:i.prop.bool(!1),lazy:i.prop.bool(!1),padding:i.prop.oneOf([`none`,`xs`,`sm`,`md`,`lg`,`xl`,`2xl`],`md`),value:i.prop.string(``)},setup(e){let r=(0,i.getHost)(),c=i.watchEffect,l=(0,i.inject)(n.TABS_CTX),u=(0,o.computed)(()=>l?!!l.value.value&&l.value.value===e.value.value:e.active.value);(0,i.bind)({attr:{active:()=>u.value?!0:void 0}});let d=(0,o.computed)(()=>s[e.padding.value??`md`]??s.md),f=(0,o.signal)(!1);c(()=>{u.value&&(f.value=!0)});let p=(0,o.computed)(()=>!e.lazy.value||f.value),m=(0,a.styleMap)({"--tab-panel-padding":d}),h=()=>`tabpanel-${e.value.value}`,g=(0,i.ref)();return(0,i.onMounted)(()=>{c(()=>{let n=g.value,i=e.value.value;if(!n)return;let a=((i?r.closest(`ore-tabs`):null)?.querySelector(`:scope > ore-tab-item[value="${i}"]`))?.shadowRoot?.querySelector(`[role="tab"]`)??null;t.setAriaReflection(n,`ariaLabelledByElements`,a?[a]:[])})}),i.html`
       <div
         class="panel"
         part="panel"
         role="tabpanel"
-        id="${()=>p()}"
-        aria-labelledby="${()=>m()}"
-        aria-hidden="${()=>String(!c.value)}"
-        :style="${f}"
+        ref="${g}"
+        :id="${h}"
+        aria-hidden="${()=>String(!u.value)}"
+        :style="${m}"
         tabindex="0">
-        ${(0,i.when)(d,()=>r.html`<slot></slot>`)}
+        ${(0,a.when)(p,()=>i.html`<slot></slot>`)}
       </div>
-    `},styles:[e.reducedMotionMixin,n.default]}),exports.TAB_PANEL_TAG=s;
+    `},styles:[e.reducedMotionMixin,r.default]}),exports.TAB_PANEL_TAG=c;
 //# sourceMappingURL=tab-panel.cjs.map

package/dist/tab-panel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tab-panel.cjs","names":[],"sources":["../src/disclosure/tab-panel/tab-panel.ts"],"sourcesContent":["import { define, html, inject, prop, bind, watchEffect } from '@vielzeug/ore';\nimport { styleMap, when } from '@vielzeug/ore/directives';\nimport { computed, signal } from '@vielzeug/ripple';\n\nimport { reducedMotionMixin } from '../../styles';\nimport { TABS_CTX } from '../tabs/tabs';\nimport styles from './tab-panel.css?inline';\n\nconst TAB_PANEL_PADDING_PRESET: Record<string, string> = {\n  '2xl': 'var(--size-12)',\n  lg: 'var(--size-6)',\n  md: 'var(--size-4)',\n  none: '0',\n  sm: 'var(--size-2)',\n  xl: 'var(--size-8)',\n  xs: 'var(--size-1)',\n};\n\nexport type OreTabPanelProps = {\n  /** Active state (managed by ore-tabs) */\n  active?: boolean;\n  /** When true, the panel content is not rendered until first activation (preserves resources) */\n  lazy?: boolean;\n  /** Panel padding size: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' (default: 'md' = var(--size-4)) */\n  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /** Must match the `value` of its corresponding ore-tab-item */\n  value: string;\n};\n\n/**\n * Content panel for a tab. Shown when its `value` matches the selected tab.\n *\n * @element ore-tab-panel\n *\n * @attr {string} value - Must match the corresponding ore-tab-item value\n * @attr {boolean} active - Toggled by the parent ore-tabs\n * @attr {string} padding - Panel padding: 'none' | 'xs' | 'sm' | 'md' (default) | 'lg' | 'xl' | '2xl'\n *\n * @slot - Panel content\n *\n * @cssprop --tab-panel-padding - Inner padding of the panel content area\n * @cssprop --tab-panel-font-size - Font size of the panel content\n * @part panel - Panel container.\n * @example\n * ```html\n * <ore-tab-panel value=\"overview\"><p>Overview content here</p></ore-tab-panel>\n * <ore-tab-panel value=\"settings\" padding=\"lg\"><p>Large padding</p></ore-tab-panel>\n * <ore-tab-panel value=\"code\" padding=\"none\"><pre>No padding for code</pre></ore-tab-panel>\n * ```\n */\nexport const TAB_PANEL_TAG = 'ore-tab-panel' as const;\ndefine<OreTabPanelProps>(TAB_PANEL_TAG, {\n  props: {\n    active: prop.bool(false),\n    lazy: prop.bool(false),\n    padding: prop.oneOf(['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const, 'md'),\n    value: prop.string(''),\n  },\n  setup(props) {\n    const watch = watchEffect;\n\n    const tabsCtx = inject(TABS_CTX);\n    const isActive = computed(() =>\n      tabsCtx ? !!tabsCtx.value.value && tabsCtx.value.value === props.value.value : props.active.value,\n    );\n\n    bind({\n      attr: {\n        active: () => (isActive.value ? true : undefined),\n      },\n    });\n\n    // Map padding prop to CSS variable\n    const paddingValue = computed(() => {\n      const key = props.padding.value ?? 'md';\n\n      return TAB_PANEL_PADDING_PRESET[key] ?? TAB_PANEL_PADDING_PRESET.md;\n    });\n    // Track whether the panel has ever been active (for lazy rendering)\n    const hasBeenActive = signal(false);\n\n    watch(() => {\n      if (isActive.value) hasBeenActive.value = true;\n    });\n\n    // shouldRender: true if not lazy OR has been active at least once\n    const shouldRender = computed(() => !props.lazy.value || hasBeenActive.value);\n    const panelStyle = styleMap({ '--tab-panel-padding': paddingValue });\n    const panelId = () => `tabpanel-${props.value.value}`;\n    const labelledById = () => `tab-${props.value.value}`;\n\n    return html`\n      <div\n        class=\"panel\"\n        part=\"panel\"\n        role=\"tabpanel\"\n        id=\"${() => panelId()}\"\n        aria-labelledby=\"${() => labelledById()}\"\n        aria-hidden=\"${() => String(!isActive.value)}\"\n        :style=\"${panelStyle}\"\n        tabindex=\"0\">\n        ${when(shouldRender, () => html`<slot></slot>`)}\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, styles],\n});\n"],"mappings":"6SAQA,IAAM,EAAmD,CACvD,MAAO,iBACP,GAAI,gBACJ,GAAI,gBACJ,KAAM,IACN,GAAI,gBACJ,GAAI,gBACJ,GAAI,eACN,EAkCa,EAAgB,6BACJ,EAAe,CACtC,MAAO,CACL,OAAQ,EAAA,KAAK,KAAK,EAAK,EACvB,KAAM,EAAA,KAAK,KAAK,EAAK,EACrB,QAAS,EAAA,KAAK,MAAM,CAAC,OAAQ,KAAM,KAAM,KAAM,KAAM,KAAM,KAAK,EAAY,IAAI,EAChF,MAAO,EAAA,KAAK,OAAO,EAAE,CACvB,EACA,MAAM,EAAO,CACX,IAAM,EAAQ,EAAA,YAER,GAAA,EAAA,EAAA,OAAA,CAAiB,EAAA,QAAQ,EACzB,GAAA,EAAA,EAAA,SAAA,KACJ,EAAU,CAAC,CAAC,EAAQ,MAAM,OAAS,EAAQ,MAAM,QAAU,EAAM,MAAM,MAAQ,EAAM,OAAO,KAC9F,GAEA,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,WAAe,EAAS,MAAQ,GAAO,IAAA,EACzC,CACF,CAAC,EAGD,IAAM,GAAA,EAAA,EAAA,SAAA,KAGG,EAFK,EAAM,QAAQ,OAAS,OAEK,EAAyB,EAClE,EAEK,GAAA,EAAA,EAAA,OAAA,CAAuB,EAAK,EAElC,MAAY,CACN,EAAS,QAAO,EAAc,MAAQ,GAC5C,CAAC,EAGD,IAAM,GAAA,EAAA,EAAA,SAAA,KAA8B,CAAC,EAAM,KAAK,OAAS,EAAc,KAAK,EACtE,GAAA,EAAA,EAAA,SAAA,CAAsB,CAAE,sBAAuB,CAAa,CAAC,EAC7D,MAAgB,YAAY,EAAM,MAAM,QACxC,MAAqB,OAAO,EAAM,MAAM,QAE9C,MAAO,GAAA,IAAI;;;;;kBAKK,EAAQ,EAAE;+BACG,EAAa,EAAE;2BACnB,OAAO,CAAC,EAAS,KAAK,EAAE;kBACnC,EAAW;;qBAEd,MAAoB,EAAA,IAAI,eAAe,EAAE;;KAGtD,EACA,OAAQ,CAAC,EAAA,mBAAoB,EAAA,OAAM,CACrC,CAAC"}
+{"version":3,"file":"tab-panel.cjs","names":[],"sources":["../src/disclosure/tab-panel/tab-panel.ts"],"sourcesContent":["import { define, html, inject, prop, ref, bind, getHost, onMounted, watchEffect } from '@vielzeug/ore';\nimport { styleMap, when } from '@vielzeug/ore/directives';\nimport { computed, signal } from '@vielzeug/ripple';\n\nimport { setAriaReflection } from '../../headless';\nimport { reducedMotionMixin } from '../../styles';\nimport { TABS_CTX } from '../tabs/tabs';\nimport styles from './tab-panel.css?inline';\n\nconst TAB_PANEL_PADDING_PRESET: Record<string, string> = {\n  '2xl': 'var(--size-12)',\n  lg: 'var(--size-6)',\n  md: 'var(--size-4)',\n  none: '0',\n  sm: 'var(--size-2)',\n  xl: 'var(--size-8)',\n  xs: 'var(--size-1)',\n};\n\nexport type OreTabPanelProps = {\n  /** Active state (managed by ore-tabs) */\n  active?: boolean;\n  /** When true, the panel content is not rendered until first activation (preserves resources) */\n  lazy?: boolean;\n  /** Panel padding size: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' (default: 'md' = var(--size-4)) */\n  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /** Must match the `value` of its corresponding ore-tab-item */\n  value: string;\n};\n\n/**\n * Content panel for a tab. Shown when its `value` matches the selected tab.\n *\n * @element ore-tab-panel\n *\n * @attr {string} value - Must match the corresponding ore-tab-item value\n * @attr {boolean} active - Toggled by the parent ore-tabs\n * @attr {string} padding - Panel padding: 'none' | 'xs' | 'sm' | 'md' (default) | 'lg' | 'xl' | '2xl'\n *\n * @slot - Panel content\n *\n * @cssprop --tab-panel-padding - Inner padding of the panel content area\n * @cssprop --tab-panel-font-size - Font size of the panel content\n * @part panel - Panel container.\n * @example\n * ```html\n * <ore-tab-panel value=\"overview\"><p>Overview content here</p></ore-tab-panel>\n * <ore-tab-panel value=\"settings\" padding=\"lg\"><p>Large padding</p></ore-tab-panel>\n * <ore-tab-panel value=\"code\" padding=\"none\"><pre>No padding for code</pre></ore-tab-panel>\n * ```\n */\nexport const TAB_PANEL_TAG = 'ore-tab-panel' as const;\ndefine<OreTabPanelProps>(TAB_PANEL_TAG, {\n  props: {\n    active: prop.bool(false),\n    lazy: prop.bool(false),\n    padding: prop.oneOf(['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const, 'md'),\n    value: prop.string(''),\n  },\n  setup(props) {\n    const el = getHost();\n    const watch = watchEffect;\n\n    const tabsCtx = inject(TABS_CTX);\n    const isActive = computed(() =>\n      tabsCtx ? !!tabsCtx.value.value && tabsCtx.value.value === props.value.value : props.active.value,\n    );\n\n    bind({\n      attr: {\n        active: () => (isActive.value ? true : undefined),\n      },\n    });\n\n    // Map padding prop to CSS variable\n    const paddingValue = computed(() => {\n      const key = props.padding.value ?? 'md';\n\n      return TAB_PANEL_PADDING_PRESET[key] ?? TAB_PANEL_PADDING_PRESET.md;\n    });\n    // Track whether the panel has ever been active (for lazy rendering)\n    const hasBeenActive = signal(false);\n\n    watch(() => {\n      if (isActive.value) hasBeenActive.value = true;\n    });\n\n    // shouldRender: true if not lazy OR has been active at least once\n    const shouldRender = computed(() => !props.lazy.value || hasBeenActive.value);\n    const panelStyle = styleMap({ '--tab-panel-padding': paddingValue });\n    const panelId = () => `tabpanel-${props.value.value}`;\n    const panelRef = ref<HTMLElement>();\n\n    // `aria-labelledby` as a plain IDREF attribute cannot resolve across shadow-tree boundaries\n    // (the matching `id` lives inside <ore-tab-item>'s own shadow root) — see\n    // `setAriaReflection()`'s doc comment. Deferred to `onMounted()`: sibling custom elements\n    // (including the peer `<ore-tab-item>`) connect in tree order within the same synchronous\n    // insertion, so a sibling's shadow content may not exist yet during this element's own\n    // `setup()` — `onMounted()`'s microtask runs after the whole subtree has connected.\n    onMounted(() => {\n      watch(() => {\n        const panel = panelRef.value;\n        const value = props.value.value;\n\n        if (!panel) return;\n\n        const tabsEl = value ? el.closest('ore-tabs') : null;\n        const tabEl = tabsEl?.querySelector<HTMLElement>(`:scope > ore-tab-item[value=\"${value}\"]`);\n        const button = tabEl?.shadowRoot?.querySelector<HTMLElement>('[role=\"tab\"]') ?? null;\n\n        setAriaReflection(panel, 'ariaLabelledByElements', button ? [button] : []);\n      });\n    });\n\n    return html`\n      <div\n        class=\"panel\"\n        part=\"panel\"\n        role=\"tabpanel\"\n        ref=\"${panelRef}\"\n        :id=\"${panelId}\"\n        aria-hidden=\"${() => String(!isActive.value)}\"\n        :style=\"${panelStyle}\"\n        tabindex=\"0\">\n        ${when(shouldRender, () => html`<slot></slot>`)}\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, styles],\n});\n"],"mappings":"yVASA,IAAM,EAAmD,CACvD,MAAO,iBACP,GAAI,gBACJ,GAAI,gBACJ,KAAM,IACN,GAAI,gBACJ,GAAI,gBACJ,GAAI,eACN,EAkCa,EAAgB,6BACJ,EAAe,CACtC,MAAO,CACL,OAAQ,EAAA,KAAK,KAAK,EAAK,EACvB,KAAM,EAAA,KAAK,KAAK,EAAK,EACrB,QAAS,EAAA,KAAK,MAAM,CAAC,OAAQ,KAAM,KAAM,KAAM,KAAM,KAAM,KAAK,EAAY,IAAI,EAChF,MAAO,EAAA,KAAK,OAAO,EAAE,CACvB,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAA,EAAA,QAAA,CAAa,EACb,EAAQ,EAAA,YAER,GAAA,EAAA,EAAA,OAAA,CAAiB,EAAA,QAAQ,EACzB,GAAA,EAAA,EAAA,SAAA,KACJ,EAAU,CAAC,CAAC,EAAQ,MAAM,OAAS,EAAQ,MAAM,QAAU,EAAM,MAAM,MAAQ,EAAM,OAAO,KAC9F,GAEA,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,WAAe,EAAS,MAAQ,GAAO,IAAA,EACzC,CACF,CAAC,EAGD,IAAM,GAAA,EAAA,EAAA,SAAA,KAGG,EAFK,EAAM,QAAQ,OAAS,OAEK,EAAyB,EAClE,EAEK,GAAA,EAAA,EAAA,OAAA,CAAuB,EAAK,EAElC,MAAY,CACN,EAAS,QAAO,EAAc,MAAQ,GAC5C,CAAC,EAGD,IAAM,GAAA,EAAA,EAAA,SAAA,KAA8B,CAAC,EAAM,KAAK,OAAS,EAAc,KAAK,EACtE,GAAA,EAAA,EAAA,SAAA,CAAsB,CAAE,sBAAuB,CAAa,CAAC,EAC7D,MAAgB,YAAY,EAAM,MAAM,QACxC,GAAA,EAAA,EAAA,IAAA,CAA4B,EAuBlC,OAfA,EAAA,EAAA,UAAA,KAAgB,CACd,MAAY,CACV,IAAM,EAAQ,EAAS,MACjB,EAAQ,EAAM,MAAM,MAE1B,GAAI,CAAC,EAAO,OAIZ,IAAM,IAFS,EAAQ,EAAG,QAAQ,UAAU,EAAI,KAAA,EAC1B,cAA2B,gCAAgC,EAAM,GAAG,EAAA,EACpE,YAAY,cAA2B,cAAc,GAAK,KAEhF,EAAA,kBAAkB,EAAO,yBAA0B,EAAS,CAAC,CAAM,EAAI,CAAC,CAAC,CAC3E,CAAC,CACH,CAAC,EAEM,EAAA,IAAI;;;;;eAKA,EAAS;eACT,EAAQ;2BACM,OAAO,CAAC,EAAS,KAAK,EAAE;kBACnC,EAAW;;qBAEd,MAAoB,EAAA,IAAI,eAAe,EAAE;;KAGtD,EACA,OAAQ,CAAC,EAAA,mBAAoB,EAAA,OAAM,CACrC,CAAC"}

package/dist/tab-panel.js

@@ -1,11 +1,12 @@
 import { reducedMotionMixin as e } from "./styles/mixins/accessibility.css.js";
-import { TABS_CTX as t } from "./tabs.js";
-import n from "./disclosure/tab-panel/tab-panel.css.js";
-import { bind as r, define as i, html as a, inject as o, prop as s, watchEffect as c } from "@vielzeug/ore";
-import { styleMap as l, when as u } from "@vielzeug/ore/directives";
-import { computed as d, signal as f } from "@vielzeug/ripple";
+import { setAriaReflection as t } from "./headless/aria-reflection.js";
+import { TABS_CTX as n } from "./tabs.js";
+import r from "./disclosure/tab-panel/tab-panel.css.js";
+import { bind as i, define as a, getHost as o, html as s, inject as c, onMounted as l, prop as u, ref as d, watchEffect as f } from "@vielzeug/ore";
+import { styleMap as p, when as m } from "@vielzeug/ore/directives";
+import { computed as h, signal as g } from "@vielzeug/ripple";
 //#region src/disclosure/tab-panel/tab-panel.ts
-var p = {
+var _ = {
 	"2xl": "var(--size-12)",
 	lg: "var(--size-6)",
 	md: "var(--size-4)",
@@ -13,12 +14,12 @@ var p = {
 	sm: "var(--size-2)",
 	xl: "var(--size-8)",
 	xs: "var(--size-1)"
-}, m = "ore-tab-panel";
-i(m, {
+}, v = "ore-tab-panel";
+a(v, {
 	props: {
-		active: s.bool(!1),
-		lazy: s.bool(!1),
-		padding: s.oneOf([
+		active: u.bool(!1),
+		lazy: u.bool(!1),
+		padding: u.oneOf([
 			"none",
 			"xs",
 			"sm",
@@ -27,33 +28,40 @@ i(m, {
 			"xl",
 			"2xl"
 		], "md"),
-		value: s.string("")
+		value: u.string("")
 	},
 	setup(e) {
-		let n = c, i = o(t), s = d(() => i ? !!i.value.value && i.value.value === e.value.value : e.active.value);
-		r({ attr: { active: () => s.value ? !0 : void 0 } });
-		let m = d(() => p[e.padding.value ?? "md"] ?? p.md), h = f(!1);
-		n(() => {
-			s.value && (h.value = !0);
+		let r = o(), a = f, u = c(n), v = h(() => u ? !!u.value.value && u.value.value === e.value.value : e.active.value);
+		i({ attr: { active: () => v.value ? !0 : void 0 } });
+		let y = h(() => _[e.padding.value ?? "md"] ?? _.md), b = g(!1);
+		a(() => {
+			v.value && (b.value = !0);
 		});
-		let g = d(() => !e.lazy.value || h.value), _ = l({ "--tab-panel-padding": m }), v = () => `tabpanel-${e.value.value}`, y = () => `tab-${e.value.value}`;
-		return a`
+		let x = h(() => !e.lazy.value || b.value), S = p({ "--tab-panel-padding": y }), C = () => `tabpanel-${e.value.value}`, w = d();
+		return l(() => {
+			a(() => {
+				let n = w.value, i = e.value.value;
+				if (!n) return;
+				let a = ((i ? r.closest("ore-tabs") : null)?.querySelector(`:scope > ore-tab-item[value="${i}"]`))?.shadowRoot?.querySelector("[role=\"tab\"]") ?? null;
+				t(n, "ariaLabelledByElements", a ? [a] : []);
+			});
+		}), s`
       <div
         class="panel"
         part="panel"
         role="tabpanel"
-        id="${() => v()}"
-        aria-labelledby="${() => y()}"
-        aria-hidden="${() => String(!s.value)}"
-        :style="${_}"
+        ref="${w}"
+        :id="${C}"
+        aria-hidden="${() => String(!v.value)}"
+        :style="${S}"
         tabindex="0">
-        ${u(g, () => a`<slot></slot>`)}
+        ${m(x, () => s`<slot></slot>`)}
       </div>
     `;
 	},
-	styles: [e, n]
+	styles: [e, r]
 });
 //#endregion
-export { m as TAB_PANEL_TAG };
+export { v as TAB_PANEL_TAG };
 
 //# sourceMappingURL=tab-panel.js.map

package/dist/tab-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-panel.js","names":[],"sources":["../src/disclosure/tab-panel/tab-panel.ts"],"sourcesContent":["import { define, html, inject, prop, bind, watchEffect } from '@vielzeug/ore';\nimport { styleMap, when } from '@vielzeug/ore/directives';\nimport { computed, signal } from '@vielzeug/ripple';\n\nimport { reducedMotionMixin } from '../../styles';\nimport { TABS_CTX } from '../tabs/tabs';\nimport styles from './tab-panel.css?inline';\n\nconst TAB_PANEL_PADDING_PRESET: Record<string, string> = {\n  '2xl': 'var(--size-12)',\n  lg: 'var(--size-6)',\n  md: 'var(--size-4)',\n  none: '0',\n  sm: 'var(--size-2)',\n  xl: 'var(--size-8)',\n  xs: 'var(--size-1)',\n};\n\nexport type OreTabPanelProps = {\n  /** Active state (managed by ore-tabs) */\n  active?: boolean;\n  /** When true, the panel content is not rendered until first activation (preserves resources) */\n  lazy?: boolean;\n  /** Panel padding size: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' (default: 'md' = var(--size-4)) */\n  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /** Must match the `value` of its corresponding ore-tab-item */\n  value: string;\n};\n\n/**\n * Content panel for a tab. Shown when its `value` matches the selected tab.\n *\n * @element ore-tab-panel\n *\n * @attr {string} value - Must match the corresponding ore-tab-item value\n * @attr {boolean} active - Toggled by the parent ore-tabs\n * @attr {string} padding - Panel padding: 'none' | 'xs' | 'sm' | 'md' (default) | 'lg' | 'xl' | '2xl'\n *\n * @slot - Panel content\n *\n * @cssprop --tab-panel-padding - Inner padding of the panel content area\n * @cssprop --tab-panel-font-size - Font size of the panel content\n * @part panel - Panel container.\n * @example\n * ```html\n * <ore-tab-panel value=\"overview\"><p>Overview content here</p></ore-tab-panel>\n * <ore-tab-panel value=\"settings\" padding=\"lg\"><p>Large padding</p></ore-tab-panel>\n * <ore-tab-panel value=\"code\" padding=\"none\"><pre>No padding for code</pre></ore-tab-panel>\n * ```\n */\nexport const TAB_PANEL_TAG = 'ore-tab-panel' as const;\ndefine<OreTabPanelProps>(TAB_PANEL_TAG, {\n  props: {\n    active: prop.bool(false),\n    lazy: prop.bool(false),\n    padding: prop.oneOf(['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const, 'md'),\n    value: prop.string(''),\n  },\n  setup(props) {\n    const watch = watchEffect;\n\n    const tabsCtx = inject(TABS_CTX);\n    const isActive = computed(() =>\n      tabsCtx ? !!tabsCtx.value.value && tabsCtx.value.value === props.value.value : props.active.value,\n    );\n\n    bind({\n      attr: {\n        active: () => (isActive.value ? true : undefined),\n      },\n    });\n\n    // Map padding prop to CSS variable\n    const paddingValue = computed(() => {\n      const key = props.padding.value ?? 'md';\n\n      return TAB_PANEL_PADDING_PRESET[key] ?? TAB_PANEL_PADDING_PRESET.md;\n    });\n    // Track whether the panel has ever been active (for lazy rendering)\n    const hasBeenActive = signal(false);\n\n    watch(() => {\n      if (isActive.value) hasBeenActive.value = true;\n    });\n\n    // shouldRender: true if not lazy OR has been active at least once\n    const shouldRender = computed(() => !props.lazy.value || hasBeenActive.value);\n    const panelStyle = styleMap({ '--tab-panel-padding': paddingValue });\n    const panelId = () => `tabpanel-${props.value.value}`;\n    const labelledById = () => `tab-${props.value.value}`;\n\n    return html`\n      <div\n        class=\"panel\"\n        part=\"panel\"\n        role=\"tabpanel\"\n        id=\"${() => panelId()}\"\n        aria-labelledby=\"${() => labelledById()}\"\n        aria-hidden=\"${() => String(!isActive.value)}\"\n        :style=\"${panelStyle}\"\n        tabindex=\"0\">\n        ${when(shouldRender, () => html`<slot></slot>`)}\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, styles],\n});\n"],"mappings":";;;;;;;AAQA,IAAM,IAAmD;CACvD,OAAO;CACP,IAAI;CACJ,IAAI;CACJ,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAkCa,IAAgB;AAC7B,EAAyB,GAAe;CACtC,OAAO;EACL,QAAQ,EAAK,KAAK,EAAK;EACvB,MAAM,EAAK,KAAK,EAAK;EACrB,SAAS,EAAK,MAAM;GAAC;GAAQ;GAAM;GAAM;GAAM;GAAM;GAAM;EAAK,GAAY,IAAI;EAChF,OAAO,EAAK,OAAO,EAAE;CACvB;CACA,MAAM,GAAO;EACX,IAAM,IAAQ,GAER,IAAU,EAAO,CAAQ,GACzB,IAAW,QACf,IAAU,CAAC,CAAC,EAAQ,MAAM,SAAS,EAAQ,MAAM,UAAU,EAAM,MAAM,QAAQ,EAAM,OAAO,KAC9F;EAEA,EAAK,EACH,MAAM,EACJ,cAAe,EAAS,QAAQ,KAAO,KAAA,EACzC,EACF,CAAC;EAGD,IAAM,IAAe,QAGZ,EAFK,EAAM,QAAQ,SAAS,SAEK,EAAyB,EAClE,GAEK,IAAgB,EAAO,EAAK;EAElC,QAAY;GACV,AAAI,EAAS,UAAO,EAAc,QAAQ;EAC5C,CAAC;EAGD,IAAM,IAAe,QAAe,CAAC,EAAM,KAAK,SAAS,EAAc,KAAK,GACtE,IAAa,EAAS,EAAE,uBAAuB,EAAa,CAAC,GAC7D,UAAgB,YAAY,EAAM,MAAM,SACxC,UAAqB,OAAO,EAAM,MAAM;EAE9C,OAAO,CAAI;;;;;oBAKK,EAAQ,EAAE;iCACG,EAAa,EAAE;6BACnB,OAAO,CAAC,EAAS,KAAK,EAAE;kBACnC,EAAW;;UAEnB,EAAK,SAAoB,CAAI,eAAe,EAAE;;;CAGtD;CACA,QAAQ,CAAC,GAAoB,CAAM;AACrC,CAAC"}
+{"version":3,"file":"tab-panel.js","names":[],"sources":["../src/disclosure/tab-panel/tab-panel.ts"],"sourcesContent":["import { define, html, inject, prop, ref, bind, getHost, onMounted, watchEffect } from '@vielzeug/ore';\nimport { styleMap, when } from '@vielzeug/ore/directives';\nimport { computed, signal } from '@vielzeug/ripple';\n\nimport { setAriaReflection } from '../../headless';\nimport { reducedMotionMixin } from '../../styles';\nimport { TABS_CTX } from '../tabs/tabs';\nimport styles from './tab-panel.css?inline';\n\nconst TAB_PANEL_PADDING_PRESET: Record<string, string> = {\n  '2xl': 'var(--size-12)',\n  lg: 'var(--size-6)',\n  md: 'var(--size-4)',\n  none: '0',\n  sm: 'var(--size-2)',\n  xl: 'var(--size-8)',\n  xs: 'var(--size-1)',\n};\n\nexport type OreTabPanelProps = {\n  /** Active state (managed by ore-tabs) */\n  active?: boolean;\n  /** When true, the panel content is not rendered until first activation (preserves resources) */\n  lazy?: boolean;\n  /** Panel padding size: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' (default: 'md' = var(--size-4)) */\n  padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /** Must match the `value` of its corresponding ore-tab-item */\n  value: string;\n};\n\n/**\n * Content panel for a tab. Shown when its `value` matches the selected tab.\n *\n * @element ore-tab-panel\n *\n * @attr {string} value - Must match the corresponding ore-tab-item value\n * @attr {boolean} active - Toggled by the parent ore-tabs\n * @attr {string} padding - Panel padding: 'none' | 'xs' | 'sm' | 'md' (default) | 'lg' | 'xl' | '2xl'\n *\n * @slot - Panel content\n *\n * @cssprop --tab-panel-padding - Inner padding of the panel content area\n * @cssprop --tab-panel-font-size - Font size of the panel content\n * @part panel - Panel container.\n * @example\n * ```html\n * <ore-tab-panel value=\"overview\"><p>Overview content here</p></ore-tab-panel>\n * <ore-tab-panel value=\"settings\" padding=\"lg\"><p>Large padding</p></ore-tab-panel>\n * <ore-tab-panel value=\"code\" padding=\"none\"><pre>No padding for code</pre></ore-tab-panel>\n * ```\n */\nexport const TAB_PANEL_TAG = 'ore-tab-panel' as const;\ndefine<OreTabPanelProps>(TAB_PANEL_TAG, {\n  props: {\n    active: prop.bool(false),\n    lazy: prop.bool(false),\n    padding: prop.oneOf(['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const, 'md'),\n    value: prop.string(''),\n  },\n  setup(props) {\n    const el = getHost();\n    const watch = watchEffect;\n\n    const tabsCtx = inject(TABS_CTX);\n    const isActive = computed(() =>\n      tabsCtx ? !!tabsCtx.value.value && tabsCtx.value.value === props.value.value : props.active.value,\n    );\n\n    bind({\n      attr: {\n        active: () => (isActive.value ? true : undefined),\n      },\n    });\n\n    // Map padding prop to CSS variable\n    const paddingValue = computed(() => {\n      const key = props.padding.value ?? 'md';\n\n      return TAB_PANEL_PADDING_PRESET[key] ?? TAB_PANEL_PADDING_PRESET.md;\n    });\n    // Track whether the panel has ever been active (for lazy rendering)\n    const hasBeenActive = signal(false);\n\n    watch(() => {\n      if (isActive.value) hasBeenActive.value = true;\n    });\n\n    // shouldRender: true if not lazy OR has been active at least once\n    const shouldRender = computed(() => !props.lazy.value || hasBeenActive.value);\n    const panelStyle = styleMap({ '--tab-panel-padding': paddingValue });\n    const panelId = () => `tabpanel-${props.value.value}`;\n    const panelRef = ref<HTMLElement>();\n\n    // `aria-labelledby` as a plain IDREF attribute cannot resolve across shadow-tree boundaries\n    // (the matching `id` lives inside <ore-tab-item>'s own shadow root) — see\n    // `setAriaReflection()`'s doc comment. Deferred to `onMounted()`: sibling custom elements\n    // (including the peer `<ore-tab-item>`) connect in tree order within the same synchronous\n    // insertion, so a sibling's shadow content may not exist yet during this element's own\n    // `setup()` — `onMounted()`'s microtask runs after the whole subtree has connected.\n    onMounted(() => {\n      watch(() => {\n        const panel = panelRef.value;\n        const value = props.value.value;\n\n        if (!panel) return;\n\n        const tabsEl = value ? el.closest('ore-tabs') : null;\n        const tabEl = tabsEl?.querySelector<HTMLElement>(`:scope > ore-tab-item[value=\"${value}\"]`);\n        const button = tabEl?.shadowRoot?.querySelector<HTMLElement>('[role=\"tab\"]') ?? null;\n\n        setAriaReflection(panel, 'ariaLabelledByElements', button ? [button] : []);\n      });\n    });\n\n    return html`\n      <div\n        class=\"panel\"\n        part=\"panel\"\n        role=\"tabpanel\"\n        ref=\"${panelRef}\"\n        :id=\"${panelId}\"\n        aria-hidden=\"${() => String(!isActive.value)}\"\n        :style=\"${panelStyle}\"\n        tabindex=\"0\">\n        ${when(shouldRender, () => html`<slot></slot>`)}\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, styles],\n});\n"],"mappings":";;;;;;;;AASA,IAAM,IAAmD;CACvD,OAAO;CACP,IAAI;CACJ,IAAI;CACJ,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAkCa,IAAgB;AAC7B,EAAyB,GAAe;CACtC,OAAO;EACL,QAAQ,EAAK,KAAK,EAAK;EACvB,MAAM,EAAK,KAAK,EAAK;EACrB,SAAS,EAAK,MAAM;GAAC;GAAQ;GAAM;GAAM;GAAM;GAAM;GAAM;EAAK,GAAY,IAAI;EAChF,OAAO,EAAK,OAAO,EAAE;CACvB;CACA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAQ,GAER,IAAU,EAAO,CAAQ,GACzB,IAAW,QACf,IAAU,CAAC,CAAC,EAAQ,MAAM,SAAS,EAAQ,MAAM,UAAU,EAAM,MAAM,QAAQ,EAAM,OAAO,KAC9F;EAEA,EAAK,EACH,MAAM,EACJ,cAAe,EAAS,QAAQ,KAAO,KAAA,EACzC,EACF,CAAC;EAGD,IAAM,IAAe,QAGZ,EAFK,EAAM,QAAQ,SAAS,SAEK,EAAyB,EAClE,GAEK,IAAgB,EAAO,EAAK;EAElC,QAAY;GACV,AAAI,EAAS,UAAO,EAAc,QAAQ;EAC5C,CAAC;EAGD,IAAM,IAAe,QAAe,CAAC,EAAM,KAAK,SAAS,EAAc,KAAK,GACtE,IAAa,EAAS,EAAE,uBAAuB,EAAa,CAAC,GAC7D,UAAgB,YAAY,EAAM,MAAM,SACxC,IAAW,EAAiB;EAuBlC,OAfA,QAAgB;GACd,QAAY;IACV,IAAM,IAAQ,EAAS,OACjB,IAAQ,EAAM,MAAM;IAE1B,IAAI,CAAC,GAAO;IAIZ,IAAM,MAFS,IAAQ,EAAG,QAAQ,UAAU,IAAI,KAAA,EAC1B,cAA2B,gCAAgC,EAAM,GAAG,EAAA,EACpE,YAAY,cAA2B,gBAAc,KAAK;IAEhF,EAAkB,GAAO,0BAA0B,IAAS,CAAC,CAAM,IAAI,CAAC,CAAC;GAC3E,CAAC;EACH,CAAC,GAEM,CAAI;;;;;eAKA,EAAS;eACT,EAAQ;6BACM,OAAO,CAAC,EAAS,KAAK,EAAE;kBACnC,EAAW;;UAEnB,EAAK,SAAoB,CAAI,eAAe,EAAE;;;CAGtD;CACA,QAAQ,CAAC,GAAoB,CAAM;AACrC,CAAC"}