@vielzeug/refine 1.1.1 → 1.3.0

package/dist/switch.cjs

@@ -1,10 +1,10 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/shape.css.cjs"),t=require("./styles/mixins/states.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./shared/prop-bundles.cjs"),i=require("./shared/size-presets.cjs"),a=require("./headless/ore.cjs"),o=require("./headless/checkable.cjs"),s=require("./inputs/shared/field-binding.cjs"),c=require("./inputs/shared/form-context.cjs"),l=require("./inputs/shared/templates.cjs"),u=require("./inputs/switch/switch.css?inline.cjs");let d=require("@vielzeug/ore");var f=`ore-switch`;(0,d.define)(f,{formAssociated:!0,props:{...r.themableBundle,...r.sizableBundle,...r.disablableBundle,checked:d.prop.bool(!1),error:d.prop.string(),helper:d.prop.string(),name:d.prop.string(),value:d.prop.string(`on`)},setup(e,{bind:t,emit:n,onCleanup:r}){let i=(0,d.inject)(c.FORM_CTX),u=c.useFormContext(t,e,i),f=null,p=o.createCheckable({checked:e.checked,clearIndeterminateFirst:!1,disabled:u.disabled,error:e.error,getFormField:()=>f,helper:e.helper,onToggle:e=>{p.triggerValidation(`change`),n(`change`,e)},prefix:`switch`,signal:a.lifecycleSignal(r),validateOn:i?.validateOn,value:e.value});f=(0,d.useField)({disabled:p.disabled,toFormValue:e=>e,value:p.checkableFormValue});let{assistiveId:m,checked:h,disabled:g,errorText:_,handleClick:v,handleKeydown:y,helperText:b,labelId:x}=p;return s.applyCheckableBinding(t,u.size,{assistiveId:m,checked:h,disabled:g,errorText:_,handleClick:v,handleKeydown:y,helperText:b,labelId:x},`switch`),d.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/shape.css.cjs"),t=require("./styles/mixins/states.css.cjs"),n=require("./styles/mixins/theme.css.cjs"),r=require("./shared/prop-bundles.cjs"),i=require("./shared/size-presets.cjs"),a=require("./headless/ore.cjs"),o=require("./headless/checkable.cjs"),s=require("./ore/dist/forms/field.cjs");require("./ore/dist/forms.cjs");const c=require("./inputs/shared/field-binding.cjs"),l=require("./inputs/shared/form-context.cjs"),u=require("./inputs/shared/templates.cjs"),d=require("./inputs/switch/switch.css.cjs");let f=require("@vielzeug/ore");var p=`ore-switch`;(0,f.define)(p,{formAssociated:!0,props:{...r.themableBundle,...r.sizableBundle,...r.disablableBundle,checked:f.prop.bool(!1),error:f.prop.string(),helper:f.prop.string(),name:f.prop.string(),value:f.prop.string(`on`)},setup(e){let t=(0,f.useEmit)(),n=(0,f.inject)(l.FORM_CTX),r=l.useFormContext(e,n),i=null,d=o.createCheckable({checked:e.checked,clearIndeterminateFirst:!1,disabled:r.disabled,error:e.error,getFormField:()=>i,helper:e.helper,onToggle:e=>{d.triggerValidation(`change`),t(`change`,e)},prefix:`switch`,signal:a.lifecycleSignal(f.onCleanup),validateOn:n?.validateOn,value:e.value});i=s.useField({disabled:d.disabled,toFormValue:e=>e,value:d.checkableFormValue});let{assistiveId:p,checked:m,disabled:h,errorText:g,handleClick:_,handleKeydown:v,helperText:y,labelId:b}=d;return c.applyCheckableBinding(r.size,{assistiveId:p,checked:m,disabled:h,errorText:g,handleClick:_,handleKeydown:v,helperText:y,labelId:b},`switch`),f.html`
       <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="${x}"><slot></slot></span>
-      ${l.renderHelperRegion(m,_,b)}
-    `},styles:[n.colorThemeMixin,n.forcedColorsFormControlMixin,t.disabledStateMixin,e.sizeVariantMixin(i.SWITCH_SIZE_PRESET),u.default]}),exports.SWITCH_TAG=f;
+      <span class="label" part="label" id="${b}"><slot></slot></span>
+      ${u.renderHelperRegion(p,g,y)}
+    `},styles:[n.colorThemeMixin,n.forcedColorsFormControlMixin,t.disabledStateMixin,e.sizeVariantMixin(i.SWITCH_SIZE_PRESET),d.default]}),exports.SWITCH_TAG=p;
 //# sourceMappingURL=switch.cjs.map

package/dist/switch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"switch.cjs","names":[],"sources":["../src/inputs/switch/switch.ts"],"sourcesContent":["import { define, useField, html, inject, prop } from '@vielzeug/ore';\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, OreSwitchEvents>(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, { bind, emit, onCleanup }) {\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(bind, props, formCtx);\n\n    let _formField: { reportValidity(): void } | null = null;\n    const checkable = createCheckable({\n      checked: props.checked,\n      clearIndeterminateFirst: false,\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      getFormField: () => _formField,\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    _formField = useField<string | null>({\n      disabled: checkable.disabled,\n      toFormValue: (v) => v,\n      value: checkable.checkableFormValue,\n    });\n\n    const { assistiveId, checked, disabled, errorText, handleClick, handleKeydown, helperText, labelId } = checkable;\n\n    applyCheckableBinding(\n      bind,\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":"yjBAkEA,IAAa,EAAa,0BACc,EAAY,CAClD,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,CAAE,OAAM,OAAM,aAAa,CACtC,IAAM,GAAA,EAAA,EAAA,OAAA,CAAiB,EAAA,QAAQ,EACzB,EAAY,EAAA,eAAe,EAAM,EAAO,CAAO,EAEjD,EAAgD,KAC9C,EAAY,EAAA,gBAAgB,CAChC,QAAS,EAAM,QACf,wBAAyB,GACzB,SAAU,EAAU,SACpB,MAAO,EAAM,MACb,iBAAoB,EACpB,OAAQ,EAAM,OACd,SAAW,GAAY,CACrB,EAAU,kBAAkB,QAAQ,EACpC,EAAK,SAAU,CAAO,CACxB,EACA,OAAQ,SACR,OAAQ,EAAA,gBAAgB,CAAS,EACjC,WAAY,GAAS,WACrB,MAAO,EAAM,KACf,CAAC,EAED,GAAA,EAAA,EAAA,SAAA,CAAqC,CACnC,SAAU,EAAU,SACpB,YAAc,GAAM,EACpB,MAAO,EAAU,kBACnB,CAAC,EAED,GAAM,CAAE,cAAa,UAAS,WAAU,YAAW,cAAa,gBAAe,aAAY,WAAY,EASvG,OAPA,EAAA,sBACE,EACA,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 { 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    let _formField: { reportValidity(): void } | null = null;\n    const checkable = createCheckable({\n      checked: props.checked,\n      clearIndeterminateFirst: false,\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      getFormField: () => _formField,\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    _formField = useField<string | null>({\n      disabled: checkable.disabled,\n      toFormValue: (v) => v,\n      value: checkable.checkableFormValue,\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":"goBAmEA,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,EAE3C,EAAgD,KAC9C,EAAY,EAAA,gBAAgB,CAChC,QAAS,EAAM,QACf,wBAAyB,GACzB,SAAU,EAAU,SACpB,MAAO,EAAM,MACb,iBAAoB,EACpB,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,EAAa,EAAA,SAAwB,CACnC,SAAU,EAAU,SACpB,YAAc,GAAM,EACpB,MAAO,EAAU,kBACnB,CAAC,EAED,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"}

package/dist/switch.js

@@ -5,64 +5,66 @@ import { disablableBundle as i, sizableBundle as a, themableBundle as o } from "
 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?inline.js";
-import { define as h, html as g, inject as _, prop as v, useField as y } from "@vielzeug/ore";
+import { useField as u } from "./ore/dist/forms/field.js";
+import "./ore/dist/forms.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";
 //#region src/inputs/switch/switch.ts
-var b = "ore-switch";
-h(b, {
+var S = "ore-switch";
+g(S, {
 	formAssociated: !0,
 	props: {
 		...o,
 		...a,
 		...i,
-		checked: v.bool(!1),
-		error: v.string(),
-		helper: v.string(),
-		name: v.string(),
-		value: v.string("on")
+		checked: b.bool(!1),
+		error: b.string(),
+		helper: b.string(),
+		name: b.string(),
+		value: b.string("on")
 	},
-	setup(e, { bind: t, emit: n, onCleanup: r }) {
-		let i = _(d), a = f(t, e, i), o = null, s = l({
+	setup(e) {
+		let t = x(), n = v(f), r = p(e, n), i = null, a = l({
 			checked: e.checked,
 			clearIndeterminateFirst: !1,
-			disabled: a.disabled,
+			disabled: r.disabled,
 			error: e.error,
-			getFormField: () => o,
+			getFormField: () => i,
 			helper: e.helper,
 			onToggle: (e) => {
-				s.triggerValidation("change"), n("change", e);
+				a.triggerValidation("change"), t("change", e);
 			},
 			prefix: "switch",
-			signal: c(r),
-			validateOn: i?.validateOn,
+			signal: c(y),
+			validateOn: n?.validateOn,
 			value: e.value
 		});
-		o = y({
-			disabled: s.disabled,
+		i = u({
+			disabled: a.disabled,
 			toFormValue: (e) => e,
-			value: s.checkableFormValue
+			value: a.checkableFormValue
 		});
-		let { assistiveId: m, checked: h, disabled: v, errorText: b, handleClick: x, handleKeydown: S, helperText: C, labelId: w } = s;
-		return u(t, a.size, {
-			assistiveId: m,
-			checked: h,
-			disabled: v,
-			errorText: b,
-			handleClick: x,
+		let { assistiveId: o, checked: s, disabled: h, errorText: g, handleClick: b, handleKeydown: S, helperText: C, labelId: w } = a;
+		return d(r.size, {
+			assistiveId: o,
+			checked: s,
+			disabled: h,
+			errorText: g,
+			handleClick: b,
 			handleKeydown: S,
 			helperText: C,
 			labelId: w
-		}, "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="${w}"><slot></slot></span>
-      ${p(m, b, C)}
+      ${m(o, g, C)}
     `;
 	},
 	styles: [
@@ -70,10 +72,10 @@ h(b, {
 		r,
 		t,
 		e(s),
-		m
+		h
 	]
 });
 //#endregion
-export { b as SWITCH_TAG };
+export { S 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, useField, html, inject, prop } from '@vielzeug/ore';\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, OreSwitchEvents>(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, { bind, emit, onCleanup }) {\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(bind, props, formCtx);\n\n    let _formField: { reportValidity(): void } | null = null;\n    const checkable = createCheckable({\n      checked: props.checked,\n      clearIndeterminateFirst: false,\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      getFormField: () => _formField,\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    _formField = useField<string | null>({\n      disabled: checkable.disabled,\n      toFormValue: (v) => v,\n      value: checkable.checkableFormValue,\n    });\n\n    const { assistiveId, checked, disabled, errorText, handleClick, handleKeydown, helperText, labelId } = checkable;\n\n    applyCheckableBinding(\n      bind,\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":";;;;;;;;;;;;;AAkEA,IAAa,IAAa;AAC1B,EAAwC,GAAY;CAClD,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,EAAE,SAAM,SAAM,gBAAa;EACtC,IAAM,IAAU,EAAO,CAAQ,GACzB,IAAY,EAAe,GAAM,GAAO,CAAO,GAEjD,IAAgD,MAC9C,IAAY,EAAgB;GAChC,SAAS,EAAM;GACf,yBAAyB;GACzB,UAAU,EAAU;GACpB,OAAO,EAAM;GACb,oBAAoB;GACpB,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,IAAa,EAAwB;GACnC,UAAU,EAAU;GACpB,cAAc,MAAM;GACpB,OAAO,EAAU;EACnB,CAAC;EAED,IAAM,EAAE,gBAAa,YAAS,aAAU,cAAW,gBAAa,kBAAe,eAAY,eAAY;EASvG,OAPA,EACE,GACA,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 { 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    let _formField: { reportValidity(): void } | null = null;\n    const checkable = createCheckable({\n      checked: props.checked,\n      clearIndeterminateFirst: false,\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      getFormField: () => _formField,\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    _formField = useField<string | null>({\n      disabled: checkable.disabled,\n      toFormValue: (v) => v,\n      value: checkable.checkableFormValue,\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,GAE3C,IAAgD,MAC9C,IAAY,EAAgB;GAChC,SAAS,EAAM;GACf,yBAAyB;GACzB,UAAU,EAAU;GACpB,OAAO,EAAM;GACb,oBAAoB;GACpB,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,IAAa,EAAwB;GACnC,UAAU,EAAU;GACpB,cAAc,MAAM;GACpB,OAAO,EAAU;EACnB,CAAC;EAED,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"}

package/dist/tab-item.cjs

@@ -1,14 +1,14 @@
-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?inline.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,{bind:t,el:n,watch:i}){let s=(0,a.inject)(r.TABS_CTX);s&&i(()=>{let e=s.color.value,t=s.size.value,r=s.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,o.computed)(()=>s?!!s.value.value&&s.value.value===e.value.value:e.active.value),l=()=>!!e.disabled.value;return t({attr:{active:()=>c.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("./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`
       <button
         role="tab"
         type="button"
         part="tab"
         :id="${()=>`tab-${e.value.value}`}"
-        aria-selected="${c}"
-        tabindex="${()=>c.value?`0`:`-1`}"
-        aria-disabled="${l}"
+        aria-selected="${s}"
+        tabindex="${()=>s.value?`0`:`-1`}"
+        aria-disabled="${c}"
         :aria-controls="${()=>`tabpanel-${e.value.value}`}"
-        @click="${t=>{if(t.stopPropagation(),l()){t.preventDefault();return}n.dispatchEvent(new CustomEvent(`click`,{bubbles:!0,detail:{value:e.value.value}}))}}">
+        @click="${n=>{if(n.stopPropagation(),c()){n.preventDefault();return}t.dispatchEvent(new CustomEvent(`click`,{bubbles:!0,detail:{value:e.value.value}}))}}">
         <slot name="prefix"></slot>
         <slot></slot>
         <slot name="suffix"></slot>

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 } 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, { bind, el, watch }) {\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":"8VAyDA,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,CAAE,OAAM,KAAI,SAAS,CAChC,IAAM,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,EAAK,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, 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"}

package/dist/tab-item.js

@@ -2,43 +2,43 @@ 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?inline.js";
-import { define as o, html as s, inject as c, prop as l } from "@vielzeug/ore";
-import { computed as u } from "@vielzeug/ripple";
+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";
 //#region src/disclosure/tab-item/tab-item.ts
-var d = "ore-tab-item";
-o(d, {
+var m = "ore-tab-item";
+s(m, {
 	props: {
 		...r,
-		active: l.bool(!1),
-		color: l.string(),
-		size: l.string(),
-		value: l.string(""),
-		variant: l.string()
+		active: d.bool(!1),
+		color: d.string(),
+		size: d.string(),
+		value: d.string(""),
+		variant: d.string()
 	},
-	setup(e, { bind: t, el: n, watch: r }) {
-		let a = c(i);
-		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);
+	setup(e) {
+		let t = c(), n = f, r = u(i);
+		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 o = u(() => a ? !!a.value.value && a.value.value === e.value.value : e.active.value), l = () => !!e.disabled.value;
-		return t({ attr: { active: () => o.value ? !0 : void 0 } }), s`
+		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="${o}"
-        tabindex="${() => o.value ? "0" : "-1"}"
-        aria-disabled="${l}"
+        aria-selected="${a}"
+        tabindex="${() => a.value ? "0" : "-1"}"
+        aria-disabled="${s}"
         :aria-controls="${() => `tabpanel-${e.value.value}`}"
-        @click="${(t) => {
-			if (t.stopPropagation(), l()) {
-				t.preventDefault();
+        @click="${(n) => {
+			if (n.stopPropagation(), s()) {
+				n.preventDefault();
 				return;
 			}
-			n.dispatchEvent(new CustomEvent("click", {
+			t.dispatchEvent(new CustomEvent("click", {
 				bubbles: !0,
 				detail: { value: e.value.value }
 			}));
@@ -57,6 +57,6 @@ o(d, {
 	]
 });
 //#endregion
-export { d as TAB_ITEM_TAG };
+export { m 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 } 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, { bind, el, watch }) {\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,EAAE,SAAM,OAAI,YAAS;EAChC,IAAM,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, 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"}

package/dist/tab-panel.cjs

@@ -1,14 +1,14 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./ore/dist/directives/styleMap.cjs"),t=require("./ore/dist/directives/when.cjs");require("./ore/dist/directives.cjs");const n=require("./styles/mixins/accessibility.css.cjs"),r=require("./tabs.cjs"),i=require("./disclosure/tab-panel/tab-panel.css?inline.cjs");let a=require("@vielzeug/ore"),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,a.define)(c,{props:{active:a.prop.bool(!1),lazy:a.prop.bool(!1),padding:a.prop.oneOf([`none`,`xs`,`sm`,`md`,`lg`,`xl`,`2xl`],`md`),value:a.prop.string(``)},setup(n,{bind:i,watch:c}){let l=(0,a.inject)(r.TABS_CTX),u=(0,o.computed)(()=>l?!!l.value.value&&l.value.value===n.value.value:n.active.value);i({attr:{active:()=>u.value?!0:void 0}});let d=(0,o.computed)(()=>s[n.padding.value??`md`]??s.md),f=(0,o.signal)(!1);c(()=>{u.value&&(f.value=!0)});let p=(0,o.computed)(()=>!n.lazy.value||f.value),m=e.styleMap({"--tab-panel-padding":d}),h=()=>`tabpanel-${n.value.value}`,g=()=>`tab-${n.value.value}`;return a.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./ore/dist/directives/styleMap.cjs"),t=require("./ore/dist/directives/when.cjs");require("./ore/dist/directives.cjs");const n=require("./styles/mixins/accessibility.css.cjs"),r=require("./tabs.cjs"),i=require("./disclosure/tab-panel/tab-panel.css.cjs");let a=require("@vielzeug/ore"),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,a.define)(c,{props:{active:a.prop.bool(!1),lazy:a.prop.bool(!1),padding:a.prop.oneOf([`none`,`xs`,`sm`,`md`,`lg`,`xl`,`2xl`],`md`),value:a.prop.string(``)},setup(n){let i=a.watchEffect,c=(0,a.inject)(r.TABS_CTX),l=(0,o.computed)(()=>c?!!c.value.value&&c.value.value===n.value.value:n.active.value);(0,a.bind)({attr:{active:()=>l.value?!0:void 0}});let u=(0,o.computed)(()=>s[n.padding.value??`md`]??s.md),d=(0,o.signal)(!1);i(()=>{l.value&&(d.value=!0)});let f=(0,o.computed)(()=>!n.lazy.value||d.value),p=e.styleMap({"--tab-panel-padding":u}),m=()=>`tabpanel-${n.value.value}`,h=()=>`tab-${n.value.value}`;return a.html`
       <div
         class="panel"
         part="panel"
         role="tabpanel"
-        id="${()=>h()}"
-        aria-labelledby="${()=>g()}"
-        aria-hidden="${()=>String(!u.value)}"
-        :style="${m}"
+        id="${()=>m()}"
+        aria-labelledby="${()=>h()}"
+        aria-hidden="${()=>String(!l.value)}"
+        :style="${p}"
         tabindex="0">
-        ${t.when(p,()=>a.html`<slot></slot>`)}
+        ${t.when(f,()=>a.html`<slot></slot>`)}
       </div>
     `},styles:[n.reducedMotionMixin,i.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 } 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, { bind, watch }) {\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":"qZAQA,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,CAAE,OAAM,SAAS,CAC5B,IAAM,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,EAEA,EAAK,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,EAAa,EAAA,SAAS,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;;UAEnB,EAAA,KAAK,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, 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":"8YAQA,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,EAAa,EAAA,SAAS,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;;UAEnB,EAAA,KAAK,MAAoB,EAAA,IAAI,eAAe,EAAE;;KAGtD,EACA,OAAQ,CAAC,EAAA,mBAAoB,EAAA,OAAM,CACrC,CAAC"}

package/dist/tab-panel.js

@@ -3,11 +3,11 @@ import { when as t } from "./ore/dist/directives/when.js";
 import "./ore/dist/directives.js";
 import { reducedMotionMixin as n } from "./styles/mixins/accessibility.css.js";
 import { TABS_CTX as r } from "./tabs.js";
-import i from "./disclosure/tab-panel/tab-panel.css?inline.js";
-import { define as a, html as o, inject as s, prop as c } from "@vielzeug/ore";
-import { computed as l, signal as u } from "@vielzeug/ripple";
+import i from "./disclosure/tab-panel/tab-panel.css.js";
+import { bind as a, define as o, html as s, inject as c, prop as l, watchEffect as u } from "@vielzeug/ore";
+import { computed as d, signal as f } from "@vielzeug/ripple";
 //#region src/disclosure/tab-panel/tab-panel.ts
-var d = {
+var p = {
 	"2xl": "var(--size-12)",
 	lg: "var(--size-6)",
 	md: "var(--size-4)",
@@ -15,12 +15,12 @@ var d = {
 	sm: "var(--size-2)",
 	xl: "var(--size-8)",
 	xs: "var(--size-1)"
-}, f = "ore-tab-panel";
-a(f, {
+}, m = "ore-tab-panel";
+o(m, {
 	props: {
-		active: c.bool(!1),
-		lazy: c.bool(!1),
-		padding: c.oneOf([
+		active: l.bool(!1),
+		lazy: l.bool(!1),
+		padding: l.oneOf([
 			"none",
 			"xs",
 			"sm",
@@ -29,33 +29,33 @@ a(f, {
 			"xl",
 			"2xl"
 		], "md"),
-		value: c.string("")
+		value: l.string("")
 	},
-	setup(n, { bind: i, watch: a }) {
-		let c = s(r), f = l(() => c ? !!c.value.value && c.value.value === n.value.value : n.active.value);
-		i({ attr: { active: () => f.value ? !0 : void 0 } });
-		let p = l(() => d[n.padding.value ?? "md"] ?? d.md), m = u(!1);
-		a(() => {
-			f.value && (m.value = !0);
+	setup(n) {
+		let i = u, o = c(r), l = d(() => o ? !!o.value.value && o.value.value === n.value.value : n.active.value);
+		a({ attr: { active: () => l.value ? !0 : void 0 } });
+		let m = d(() => p[n.padding.value ?? "md"] ?? p.md), h = f(!1);
+		i(() => {
+			l.value && (h.value = !0);
 		});
-		let h = l(() => !n.lazy.value || m.value), g = e({ "--tab-panel-padding": p }), _ = () => `tabpanel-${n.value.value}`, v = () => `tab-${n.value.value}`;
-		return o`
+		let g = d(() => !n.lazy.value || h.value), _ = e({ "--tab-panel-padding": m }), v = () => `tabpanel-${n.value.value}`, y = () => `tab-${n.value.value}`;
+		return s`
       <div
         class="panel"
         part="panel"
         role="tabpanel"
-        id="${() => _()}"
-        aria-labelledby="${() => v()}"
-        aria-hidden="${() => String(!f.value)}"
-        :style="${g}"
+        id="${() => v()}"
+        aria-labelledby="${() => y()}"
+        aria-hidden="${() => String(!l.value)}"
+        :style="${_}"
         tabindex="0">
-        ${t(h, () => o`<slot></slot>`)}
+        ${t(g, () => s`<slot></slot>`)}
       </div>
     `;
 	},
 	styles: [n, i]
 });
 //#endregion
-export { f as TAB_PANEL_TAG };
+export { m 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 } 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, { bind, watch }) {\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,EAAE,SAAM,YAAS;EAC5B,IAAM,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, 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"}

package/dist/table.cjs

@@ -1,2 +1,2 @@
-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?inline.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,{bind:t,el:n,onMounted:s,watch:c}){return t({attr:{"aria-busy":e.loading,"aria-label":e.caption}}),s(()=>{let t=n.shadowRoot.querySelector(`.scroll-container`),r=document.createElement(`table`),s=document.createElement(`caption`),l=document.createElement(`thead`),u=document.createElement(`tbody`),d=document.createElement(`tfoot`);t.setAttribute(`part`,`scroll`),r.setAttribute(`part`,`table`),l.setAttribute(`part`,`head`),u.setAttribute(`part`,`body`),d.setAttribute(`part`,`foot`),r.append(s,l,u,d),t.appendChild(r),c(()=>{let t=e.caption.value??``;s.textContent=t,s.hidden=t===``});let f=o(n,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(n,{attributeFilter:[...i,`scope`],attributes:!0,characterData:!0,childList:!0,subtree:!0});let m=new MutationObserver(()=>{f=o(n,l,u,d)});return m.observe(n,{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