@vielzeug/refine 1.8.0 → 2.0.0

package/dist/switch.js

@@ -1,78 +1,78 @@
-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 { lifecycleSignal as e } from "./core/ore.js";
+import { createCheckable as t } from "./core/checkable.js";
+import { coarsePointerMixin as n } from "./styles/mixins/accessibility.css.js";
+import { sizeVariantMixin as r } from "./styles/mixins/shape.css.js";
+import { disabledStateMixin as i } from "./styles/mixins/states.css.js";
+import { colorThemeMixin as a, forcedColorsFormControlMixin as o } from "./styles/mixins/theme.css.js";
+import { disablableBundle as s, sizableBundle as c, themableBundle as l } from "./shared/prop-bundles.js";
+import { SWITCH_SIZE_PRESET as u } from "./shared/size-presets.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";
+import { renderHelperRegion as f } from "./inputs/shared/templates.js";
+import { defineFieldChecked as p, dispatchNativeFieldEvent as m, setFieldChecked as h } from "./inputs/shared/native-field-event.js";
+import g from "./inputs/switch/switch.css.js";
+import { define as _, getHost as v, html as y, onCleanup as b, prop as x, useField as S } from "@vielzeug/ore";
 //#region src/inputs/switch/switch.ts
 var C = "ore-switch";
-g(C, {
+_(C, {
 	formAssociated: !0,
 	props: {
+		...l,
+		...c,
 		...s,
-		...o,
-		...a,
-		checked: b.bool(!1),
-		error: b.string(),
-		helper: b.string(),
-		name: b.string(),
-		value: b.string("on")
+		checked: x.bool(!1),
+		error: x.string(),
+		helper: x.string(),
+		name: x.string(),
+		value: x.string("on")
 	},
-	setup(e) {
-		let t = x(), n = v(f), r = p(e, n), i = u({
-			checked: e.checked,
+	setup(n) {
+		let r = v(), i = t({
+			checked: n.checked,
 			clearIndeterminateFirst: !1,
-			disabled: r.disabled,
-			error: e.error,
-			helper: e.helper,
+			disabled: n.disabled,
+			error: n.error,
+			helper: n.helper,
 			onToggle: (e) => {
-				i.triggerValidation("change"), t("change", e);
+				i.triggerValidation("change"), h(r, e.checked), m(r, "input"), m(r, "change");
 			},
 			prefix: "switch",
-			signal: l(y),
-			validateOn: n?.validateOn,
-			value: e.value
+			signal: e(b),
+			value: n.value
 		});
 		i.attachFormField(S({
 			disabled: i.disabled,
 			toFormValue: (e) => e,
 			value: i.checkableFormValue
 		}));
-		let { assistiveId: a, checked: o, disabled: s, errorText: c, handleClick: h, handleKeydown: g, helperText: b, labelId: C } = i;
-		return d(r.size, {
+		let { assistiveId: a, checked: o, disabled: s, errorText: c, handleClick: l, handleKeydown: u, helperText: g, labelId: _ } = i;
+		return p(r, () => o.value, (e) => {
+			o.value = e;
+		}), d(n.size, {
 			assistiveId: a,
 			checked: o,
 			disabled: s,
 			errorText: c,
-			handleClick: h,
-			handleKeydown: g,
-			helperText: b,
-			labelId: C
-		}, "switch"), _`
+			handleClick: l,
+			handleKeydown: u,
+			helperText: g,
+			labelId: _
+		}, "switch"), y`
       <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>
-      ${m(a, c, b)}
+      <span class="label" part="label" id="${_}"><slot></slot></span>
+      ${f(a, c, g)}
     `;
 	},
 	styles: [
-		r,
+		a,
+		o,
 		i,
 		n,
-		e,
-		t(c),
-		h
+		r(u),
+		g
 	]
 });
 //#endregion

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 {\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"}
+{"version":3,"file":"switch.js","names":[],"sources":["../src/inputs/switch/switch.ts"],"sourcesContent":["import { define, html, prop, getHost, onCleanup } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore';\n\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\n\nimport { lifecycleSignal, createCheckable } from '../../core';\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 { defineFieldChecked, dispatchNativeFieldEvent, setFieldChecked } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './switch.css?inline';\n\nexport type OreSwitchEvents = {\n  change: Event;\n  input: Event;\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 input - Emitted when switch is toggled.\n * @fires change - Emitted when switch is toggled.\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 el = getHost();\n\n    const checkable = createCheckable({\n      checked: props.checked,\n      clearIndeterminateFirst: false,\n      disabled: props.disabled,\n      error: props.error,\n      helper: props.helper,\n      onToggle: (payload) => {\n        checkable.triggerValidation('change');\n        setFieldChecked(el, payload.checked);\n        dispatchNativeFieldEvent(el, 'input');\n        dispatchNativeFieldEvent(el, 'change');\n      },\n      prefix: 'switch',\n      signal: lifecycleSignal(onCleanup),\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    defineFieldChecked(\n      el,\n      () => checked.value,\n      (value) => {\n        checked.value = value;\n      },\n    );\n\n    applyCheckableBinding(\n      props.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":";;;;;;;;;;;;;;AA2EA,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,IAAK,EAAQ,GAEb,IAAY,EAAgB;GAChC,SAAS,EAAM;GACf,yBAAyB;GACzB,UAAU,EAAM;GAChB,OAAO,EAAM;GACb,QAAQ,EAAM;GACd,WAAW,MAAY;IAIrB,AAHA,EAAU,kBAAkB,QAAQ,GACpC,EAAgB,GAAI,EAAQ,OAAO,GACnC,EAAyB,GAAI,OAAO,GACpC,EAAyB,GAAI,QAAQ;GACvC;GACA,QAAQ;GACR,QAAQ,EAAgB,CAAS;GACjC,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;EAgBvG,OAdA,EACE,SACM,EAAQ,QACb,MAAU;GACT,EAAQ,QAAQ;EAClB,CACF,GAEA,EACE,EAAM,MACN;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,10 +1,10 @@
-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`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./core/aria-reflection.cjs"),t=require("./styles/mixins/accessibility.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./shared/prop-bundles.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:{...r.disablableBundle,active:o.prop.bool(!1),color:o.prop.string(),size:o.prop.string(),value:o.prop.string(``),variant:o.prop.string()},setup(t){let n=(0,o.getHost)(),r=o.watchEffect,a=(0,o.inject)(i.TABS_CTX);a&&r(()=>{let e=a.color.value,t=a.size.value,r=a.variant.value;e!==void 0&&n.setAttribute(`color`,e),t!==void 0&&n.setAttribute(`size`,t),r!==void 0&&n.setAttribute(`variant`,r)});let c=(0,s.computed)(()=>a?!!a.value.value&&a.value.value===t.value.value:t.active.value),l=()=>!!t.disabled.value;(0,o.bind)({attr:{active:()=>c.value?!0:void 0}});let u=e=>{if(e.stopPropagation(),l()){e.preventDefault();return}n.dispatchEvent(new CustomEvent(`click`,{bubbles:!0,detail:{value:t.value.value}}))},d=()=>`tab-${t.value.value}`,f=(0,o.ref)();return(0,o.onMounted)(()=>{(0,o.watchEffect)(()=>{let r=f.value,i=t.value.value;if(!r)return;let a=((i?n.closest(`ore-tabs`):null)?.querySelector(`:scope > ore-tab-panel[value="${i}"]`))?.shadowRoot?.querySelector(`.panel`)??null;e.setAriaReflection(r,`ariaControlsElements`,a?[a]:[])})}),o.html`
       <button
         role="tab"
         type="button"
         part="tab"
         ref="${f}"
-        :id="${d}"
+        id="${d}"
         aria-selected="${c}"
         tabindex="${()=>c.value?`0`:`-1`}"
         aria-disabled="${l}"
@@ -13,5 +13,5 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
         <slot></slot>
         <slot name="suffix"></slot>
       </button>
-    `},styles:[t.colorThemeMixin,t.forcedColorsFocusMixin(`button`),e.coarsePointerMixin,a.default]}),exports.TAB_ITEM_TAG=c;
+    `},styles:[n.colorThemeMixin,n.forcedColorsFocusMixin(`button`),t.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, 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"}
+{"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 '../../core';\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":"+XA0DA,IAAa,EAAe,gBAC5B,EAAA,EAAA,OAAA,CAAwB,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,EAAK,EAAA,QAAA,CAAQ,EACb,EAAQ,EAAA,YAER,GAAA,EAAU,EAAA,OAAA,CAAO,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,EAAW,EAAA,SAAA,KACf,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,EAAY,EAAA,IAAA,CAAuB,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;cACX,EAAM;yBACK,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,7 +1,7 @@
-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 { setAriaReflection as i } from "./headless/aria-reflection.js";
+import { setAriaReflection as e } from "./core/aria-reflection.js";
+import { coarsePointerMixin as t } from "./styles/mixins/accessibility.css.js";
+import { colorThemeMixin as n, forcedColorsFocusMixin as r } from "./styles/mixins/theme.css.js";
+import { disablableBundle as i } from "./shared/prop-bundles.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";
@@ -10,37 +10,37 @@ import { computed as g } from "@vielzeug/ripple";
 var _ = "ore-tab-item";
 c(_, {
 	props: {
-		...r,
+		...i,
 		active: p.bool(!1),
 		color: p.string(),
 		size: p.string(),
 		value: p.string(""),
 		variant: p.string()
 	},
-	setup(e) {
-		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);
+	setup(t) {
+		let n = l(), r = h, i = d(a);
+		i && r(() => {
+			let e = i.color.value, t = i.size.value, r = i.variant.value;
+			e !== void 0 && n.setAttribute("color", e), t !== void 0 && n.setAttribute("size", t), r !== void 0 && n.setAttribute("variant", r);
 		});
-		let o = g(() => r ? !!r.value.value && r.value.value === e.value.value : e.active.value), c = () => !!e.disabled.value;
+		let o = g(() => i ? !!i.value.value && i.value.value === t.value.value : t.active.value), c = () => !!t.disabled.value;
 		s({ attr: { active: () => o.value ? !0 : void 0 } });
-		let p = (n) => {
-			if (n.stopPropagation(), c()) {
-				n.preventDefault();
+		let p = (e) => {
+			if (e.stopPropagation(), c()) {
+				e.preventDefault();
 				return;
 			}
-			t.dispatchEvent(new CustomEvent("click", {
+			n.dispatchEvent(new CustomEvent("click", {
 				bubbles: !0,
-				detail: { value: e.value.value }
+				detail: { value: t.value.value }
 			}));
-		}, _ = () => `tab-${e.value.value}`, v = m();
+		}, _ = () => `tab-${t.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] : []);
+				let r = v.value, i = t.value.value;
+				if (!r) return;
+				let a = ((i ? n.closest("ore-tabs") : null)?.querySelector(`:scope > ore-tab-panel[value="${i}"]`))?.shadowRoot?.querySelector(".panel") ?? null;
+				e(r, "ariaControlsElements", a ? [a] : []);
 			});
 		}), u`
       <button
@@ -48,7 +48,7 @@ c(_, {
         type="button"
         part="tab"
         ref="${v}"
-        :id="${_}"
+        id="${_}"
         aria-selected="${o}"
         tabindex="${() => o.value ? "0" : "-1"}"
         aria-disabled="${c}"
@@ -60,9 +60,9 @@ c(_, {
     `;
 	},
 	styles: [
+		n,
+		r("button"),
 		t,
-		n("button"),
-		e,
 		o
 	]
 });

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, 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"}
+{"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 '../../core';\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;cACX,EAAM;yBACK,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,16 @@
-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/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,i.define)(s,{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)(),s=i.watchEffect,c=(0,i.inject)(n.TABS_CTX),l=(0,a.computed)(()=>c?!!c.value.value&&c.value.value===e.value.value:e.active.value);(0,i.bind)({attr:{active:()=>l.value?!0:void 0}});let u=(0,a.computed)(()=>o[e.padding.value??`md`]??o.md),d=(0,a.signal)(!1);s(()=>{l.value&&(d.value=!0)});let f=(0,a.computed)(()=>!e.lazy.value||d.value),p=(0,i.styleMap)({"--tab-panel-padding":u}),m=()=>`tabpanel-${e.value.value}`,h=(0,i.ref)();return(0,i.onMounted)(()=>{s(()=>{let n=h.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`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./core/aria-reflection.cjs"),t=require("./styles/mixins/accessibility.css.cjs"),n=require("./tabs.cjs"),r=require("./disclosure/tab-panel/tab-panel.css.cjs");let i=require("@vielzeug/ore"),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,i.define)(s,{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(t){let r=(0,i.getHost)(),s=i.watchEffect,c=(0,i.inject)(n.TABS_CTX),l=(0,a.computed)(()=>c?!!c.value.value&&c.value.value===t.value.value:t.active.value);(0,i.bind)({attr:{active:()=>l.value?!0:void 0}});let u=(0,a.computed)(()=>o[t.padding.value??`md`]??o.md),d=(0,a.signal)(!1);s(()=>{l.value&&(d.value=!0)});let f=(0,a.computed)(()=>!t.lazy.value||d.value),p=(0,i.styleMap)({"--tab-panel-padding":u}),m=()=>`tabpanel-${t.value.value}`,h=(0,i.ref)();return(0,i.onMounted)(()=>{s(()=>{let n=h.value,i=t.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;e.setAriaReflection(n,`ariaLabelledByElements`,a?[a]:[])})}),i.html`
       <div
         class="panel"
         part="panel"
         role="tabpanel"
         ref="${h}"
-        :id="${m}"
+        id="${m}"
         aria-hidden="${()=>String(!l.value)}"
-        :style="${p}"
+        style="${p}"
         tabindex="0">
-        ${(0,i.when)(f,()=>i.html`<slot></slot>`)}
+        ${(0,i.when)(f,()=>i.html`
+            <slot></slot>
+          `)}
       </div>
-    `},styles:[e.reducedMotionMixin,r.default]}),exports.TAB_PANEL_TAG=s;
+    `},styles:[t.reducedMotionMixin,r.default]}),exports.TAB_PANEL_TAG=s;
 //# 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, ref, bind, getHost, onMounted, watchEffect, styleMap, when } from '@vielzeug/ore';\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":"mTAQA,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"}
+{"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, styleMap, when } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\n\nimport { setAriaReflection } from '../../core';\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(\n          shouldRender,\n          () => html`\n            <slot></slot>\n          `,\n        )}\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, styles],\n});\n"],"mappings":"+SAQA,IAAM,EAAmD,CACvD,MAAO,iBACP,GAAI,gBACJ,GAAI,gBACJ,KAAM,IACN,GAAI,gBACJ,GAAI,gBACJ,GAAI,eACN,EAkCa,EAAgB,iBAC7B,EAAA,EAAA,OAAA,CAAyB,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,EAAK,EAAA,QAAA,CAAQ,EACb,EAAQ,EAAA,YAER,GAAA,EAAU,EAAA,OAAA,CAAO,EAAA,QAAQ,EACzB,GAAA,EAAW,EAAA,SAAA,KACf,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,EAAe,EAAA,SAAA,KAGZ,EAFK,EAAM,QAAQ,OAAS,OAEK,EAAyB,EAClE,EAEK,GAAA,EAAgB,EAAA,OAAA,CAAO,EAAK,EAElC,MAAY,CACN,EAAS,QAAO,EAAc,MAAQ,GAC5C,CAAC,EAGD,IAAM,GAAA,EAAe,EAAA,SAAA,KAAe,CAAC,EAAM,KAAK,OAAS,EAAc,KAAK,EACtE,GAAA,EAAa,EAAA,SAAA,CAAS,CAAE,sBAAuB,CAAa,CAAC,EAC7D,MAAgB,YAAY,EAAM,MAAM,QACxC,GAAA,EAAW,EAAA,IAAA,CAAiB,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;cACV,EAAQ;2BACO,OAAO,CAAC,EAAS,KAAK,EAAE;iBACpC,EAAW;;WAElB,EAAA,EAAA,KAAA,CACA,MACM,EAAA,IAAI;;WAGZ,EAAE;;KAGR,EACA,OAAQ,CAAC,EAAA,mBAAoB,EAAA,OAAM,CACrC,CAAC"}

package/dist/tab-panel.js

@@ -1,5 +1,5 @@
-import { reducedMotionMixin as e } from "./styles/mixins/accessibility.css.js";
-import { setAriaReflection as t } from "./headless/aria-reflection.js";
+import { setAriaReflection as e } from "./core/aria-reflection.js";
+import { reducedMotionMixin as t } from "./styles/mixins/accessibility.css.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, styleMap as f, watchEffect as p, when as m } from "@vielzeug/ore";
@@ -29,20 +29,20 @@ a(v, {
 		], "md"),
 		value: u.string("")
 	},
-	setup(e) {
-		let r = o(), a = p, u = c(n), v = h(() => u ? !!u.value.value && u.value.value === e.value.value : e.active.value);
+	setup(t) {
+		let r = o(), a = p, u = c(n), v = h(() => u ? !!u.value.value && u.value.value === t.value.value : t.active.value);
 		i({ attr: { active: () => v.value ? !0 : void 0 } });
-		let y = h(() => _[e.padding.value ?? "md"] ?? _.md), b = g(!1);
+		let y = h(() => _[t.padding.value ?? "md"] ?? _.md), b = g(!1);
 		a(() => {
 			v.value && (b.value = !0);
 		});
-		let x = h(() => !e.lazy.value || b.value), S = f({ "--tab-panel-padding": y }), C = () => `tabpanel-${e.value.value}`, w = d();
+		let x = h(() => !t.lazy.value || b.value), S = f({ "--tab-panel-padding": y }), C = () => `tabpanel-${t.value.value}`, w = d();
 		return l(() => {
 			a(() => {
-				let n = w.value, i = e.value.value;
+				let n = w.value, i = t.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] : []);
+				e(n, "ariaLabelledByElements", a ? [a] : []);
 			});
 		}), s`
       <div
@@ -50,15 +50,17 @@ a(v, {
         part="panel"
         role="tabpanel"
         ref="${w}"
-        :id="${C}"
+        id="${C}"
         aria-hidden="${() => String(!v.value)}"
-        :style="${S}"
+        style="${S}"
         tabindex="0">
-        ${m(x, () => s`<slot></slot>`)}
+        ${m(x, () => s`
+            <slot></slot>
+          `)}
       </div>
     `;
 	},
-	styles: [e, r]
+	styles: [t, r]
 });
 //#endregion
 export { v as TAB_PANEL_TAG };

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, ref, bind, getHost, onMounted, watchEffect, styleMap, when } from '@vielzeug/ore';\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":";;;;;;;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,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"}
+{"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, styleMap, when } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\n\nimport { setAriaReflection } from '../../core';\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(\n          shouldRender,\n          () => html`\n            <slot></slot>\n          `,\n        )}\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,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;cACV,EAAQ;6BACO,OAAO,CAAC,EAAS,KAAK,EAAE;iBACpC,EAAW;;UAElB,EACA,SACM,CAAI;;WAGZ,EAAE;;;CAGR;CACA,QAAQ,CAAC,GAAoB,CAAM;AACrC,CAAC"}

package/dist/table.cjs

@@ -1,2 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/table-base.css.cjs"),n=require("./content/table/table.css.cjs");let r=require("@vielzeug/ore");customElements.get(`ore-tr`)||customElements.define(`ore-tr`,class extends HTMLElement{}),customElements.get(`ore-th`)||customElements.define(`ore-th`,class extends HTMLElement{}),customElements.get(`ore-td`)||customElements.define(`ore-td`,class extends HTMLElement{});var i=[`colspan`,`rowspan`,`headers`,`abbr`];function a(e,t,n){if(e.childElementCount>0){let n=e.innerHTML;if(t.getAttribute(`data-src-html`)===n)return;t.setAttribute(`data-src-html`,n),t.textContent=``;for(let n of e.childNodes)t.appendChild(n.cloneNode(!0))}else{let n=e.textContent??``;t.textContent!==n&&(t.textContent=n)}for(let n of i){let r=e.getAttribute(n);r===null?t.removeAttribute(n):t.setAttribute(n,r)}let r=e.getAttribute(`scope`);r===null?n?t.scope=n:t.removeAttribute(`scope`):t.setAttribute(`scope`,r)}function o(e,t,n,r){let i=new WeakMap;t.textContent=``,n.textContent=``,r.textContent=``;for(let o of e.children){if(o.localName!==`ore-tr`)continue;let e=o.hasAttribute(`head`)?t:o.hasAttribute(`foot`)?r:n,s=document.createElement(`tr`);for(let r of o.children){if(r.localName!==`ore-th`&&r.localName!==`ore-td`)continue;let o=r.localName===`ore-th`,c=document.createElement(o?`th`:`td`),l=o?e===t?`col`:`row`:void 0;c.setAttribute(`part`,e===n?`cell`:`header-cell`),c.removeAttribute(`data-src-html`),a(r,c,l),i.set(r,{inferredScope:l,native:c}),s.appendChild(c)}e.appendChild(s)}return i}var s=`ore-table`;(0,r.define)(s,{props:{bordered:r.prop.bool(!1),caption:r.prop.string(),density:r.prop.string(),fullwidth:r.prop.bool(!1),loading:r.prop.bool(!1),sticky:r.prop.bool(!1),striped:r.prop.bool(!1)},setup(e){let t=(0,r.getHost)(),n=r.watchEffect;return(0,r.bind)({attr:{"aria-busy":e.loading,"aria-label":e.caption}}),(0,r.onMounted)(()=>{let r=t.shadowRoot.querySelector(`.scroll-container`),s=document.createElement(`table`),c=document.createElement(`caption`),l=document.createElement(`thead`),u=document.createElement(`tbody`),d=document.createElement(`tfoot`);r.setAttribute(`part`,`scroll`),s.setAttribute(`part`,`table`),l.setAttribute(`part`,`head`),u.setAttribute(`part`,`body`),d.setAttribute(`part`,`foot`),s.append(c,l,u,d),r.appendChild(s),n(()=>{let t=e.caption.value??``;c.textContent=t,c.hidden=t===``});let f=o(t,l,u,d),p=new MutationObserver(e=>{for(let t of e){let e=(t.target instanceof Element?t.target:t.target.parentElement)?.closest(`ore-th, ore-td`);if(e){let t=f.get(e);t&&a(e,t.native,t.inferredScope)}}});p.observe(t,{attributeFilter:[...i,`scope`],attributes:!0,characterData:!0,childList:!0,subtree:!0});let m=new MutationObserver(()=>{f=o(t,l,u,d)});return m.observe(t,{childList:!0}),()=>{m.disconnect(),p.disconnect()}}),r.html`<div class="scroll-container"></div>`},styles:[e.reducedMotionMixin,t.tableBaseMixin(`table`),n.default]}),exports.TABLE_TAG=s;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/table-base.css.cjs"),n=require("./content/table/table.css.cjs");let r=require("@vielzeug/ore");customElements.get(`ore-tr`)||customElements.define(`ore-tr`,class extends HTMLElement{}),customElements.get(`ore-th`)||customElements.define(`ore-th`,class extends HTMLElement{}),customElements.get(`ore-td`)||customElements.define(`ore-td`,class extends HTMLElement{});var i=[`colspan`,`rowspan`,`headers`,`abbr`];function a(e,t,n){if(e.childElementCount>0){let n=e.innerHTML;if(t.getAttribute(`data-src-html`)===n)return;t.setAttribute(`data-src-html`,n),t.textContent=``;for(let n of e.childNodes)t.appendChild(n.cloneNode(!0))}else{let n=e.textContent??``;t.textContent!==n&&(t.textContent=n)}for(let n of i){let r=e.getAttribute(n);r===null?t.removeAttribute(n):t.setAttribute(n,r)}let r=e.getAttribute(`scope`);r===null?n?t.scope=n:t.removeAttribute(`scope`):t.setAttribute(`scope`,r)}function o(e,t,n,r){let i=new WeakMap;t.textContent=``,n.textContent=``,r.textContent=``;for(let o of e.children){if(o.localName!==`ore-tr`)continue;let e=o.hasAttribute(`head`)?t:o.hasAttribute(`foot`)?r:n,s=document.createElement(`tr`);for(let r of o.children){if(r.localName!==`ore-th`&&r.localName!==`ore-td`)continue;let o=r.localName===`ore-th`,c=document.createElement(o?`th`:`td`),l=o?e===t?`col`:`row`:void 0;c.setAttribute(`part`,e===n?`cell`:`header-cell`),c.removeAttribute(`data-src-html`),a(r,c,l),i.set(r,{inferredScope:l,native:c}),s.appendChild(c)}e.appendChild(s)}return i}var s=`ore-table`;(0,r.define)(s,{props:{bordered:r.prop.bool(!1),caption:r.prop.string(),density:r.prop.string(),fullwidth:r.prop.bool(!1),loading:r.prop.bool(!1),sticky:r.prop.bool(!1),striped:r.prop.bool(!1)},setup(e){let t=(0,r.getHost)(),n=r.watchEffect;return(0,r.bind)({attr:{"aria-busy":e.loading,"aria-label":e.caption}}),(0,r.onMounted)(()=>{let r=t.shadowRoot.querySelector(`.scroll-container`),s=document.createElement(`table`),c=document.createElement(`caption`),l=document.createElement(`thead`),u=document.createElement(`tbody`),d=document.createElement(`tfoot`);r.setAttribute(`part`,`scroll`),s.setAttribute(`part`,`table`),l.setAttribute(`part`,`head`),u.setAttribute(`part`,`body`),d.setAttribute(`part`,`foot`),s.append(c,l,u,d),r.appendChild(s),n(()=>{let t=e.caption.value??``;c.textContent=t,c.hidden=t===``});let f=o(t,l,u,d),p=new MutationObserver(e=>{for(let t of e){let e=(t.target instanceof Element?t.target:t.target.parentElement)?.closest(`ore-th, ore-td`);if(e){let t=f.get(e);t&&a(e,t.native,t.inferredScope)}}});p.observe(t,{attributeFilter:[...i,`scope`],attributes:!0,characterData:!0,childList:!0,subtree:!0});let m=new MutationObserver(()=>{f=o(t,l,u,d)});return m.observe(t,{childList:!0}),()=>{m.disconnect(),p.disconnect()}}),r.html`
+      <div class="scroll-container"></div>
+    `},styles:[e.reducedMotionMixin,t.tableBaseMixin(`table`),n.default]}),exports.TABLE_TAG=s;
 //# sourceMappingURL=table.cjs.map