@vielzeug/refine 3.1.0 → 3.2.1

package/dist/switch.cjs

@@ -1,10 +1,35 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/states.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./core/checkable.cjs"),a=require("./core/ore.cjs"),o=require("./shared/prop-bundles.cjs"),s=require("./shared/size-presets.cjs"),c=require("./inputs/shared/field-binding.cjs"),l=require("./inputs/shared/templates.cjs"),u=require("./inputs/shared/native-field-event.cjs"),d=require("./inputs/switch/switch.css.cjs");let f=require("@vielzeug/ore");var p=`ore-switch`;(0,f.define)(p,{formAssociated:!0,props:{...o.themableBundle,...o.sizableBundle,...o.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.getHost)(),n=i.createCheckable({checked:e.checked,clearIndeterminateFirst:!1,disabled:e.disabled,error:e.error,helper:e.helper,onToggle:e=>{n.triggerValidation(`change`),u.setFieldChecked(t,e.checked),u.dispatchNativeFieldEvent(t,`input`),u.dispatchNativeFieldEvent(t,`change`)},prefix:`switch`,signal:a.lifecycleSignal(f.onCleanup),value:e.value});n.attachFormField((0,f.useField)({disabled:n.disabled,toFormValue:e=>e,value:n.checkableFormValue}));let{assistiveId:r,checked:o,disabled:s,errorText:d,handleClick:p,handleKeydown:m,helperText:h,labelId:g}=n;return u.defineFieldChecked(t,()=>o.value,e=>{o.value=e}),c.applyCheckableBinding(e.size,{assistiveId:r,checked:o,disabled:s,errorText:d,handleClick:p,handleKeydown:m,helperText:h,labelId:g},`switch`),f.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("./core/checkable.cjs"),i=require("./core/ore.cjs"),a=require("./shared/prop-bundles.cjs"),o=require("./shared/size-presets.cjs"),s=require("./inputs/shared/field-binding.cjs"),c=require("./inputs/shared/templates.cjs"),l=require("./inputs/shared/native-field-event.cjs"),u=require("./inputs/switch/switch.css.cjs");let d=require("@vielzeug/ore");var f=`ore-switch`,p=d.css`
+  @media (pointer: coarse) {
+    :host,
+    :host([size='md']) {
+      --_touch-target: var(--size-11);
+      --_font-size: var(--text-base);
+      --_gap: var(--size-3);
+      --_height: var(--size-7);
+      --_thumb-size: var(--size-6);
+      --_width: var(--size-14);
+    }
+
+    :host([size='sm']) {
+      --_touch-target: var(--size-11);
+      --_font-size: var(--text-sm);
+      --_gap: var(--size-2);
+      --_height: var(--size-5);
+      --_thumb-size: var(--size-4);
+      --_width: var(--size-10);
+    }
+
+    :host([size='lg']) {
+      --_touch-target: var(--size-11);
+    }
+  }
+`;(0,d.define)(f,{formAssociated:!0,props:{...a.themableBundle,...a.sizableBundle,...a.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){let t=(0,d.getHost)(),n=r.createCheckable({checked:e.checked,clearIndeterminateFirst:!1,disabled:e.disabled,error:e.error,helper:e.helper,onToggle:e=>{n.triggerValidation(`change`),l.setFieldChecked(t,e.checked),l.dispatchNativeFieldEvent(t,`input`),l.dispatchNativeFieldEvent(t,`change`)},prefix:`switch`,signal:i.lifecycleSignal(d.onCleanup),value:e.value});n.attachFormField((0,d.useField)({disabled:n.disabled,toFormValue:e=>e,value:n.checkableFormValue}));let{assistiveId:a,checked:o,disabled:u,errorText:f,handleClick:p,handleKeydown:m,helperText:h,labelId:g}=n;return l.defineFieldChecked(t,()=>o.value,e=>{o.value=e}),s.applyCheckableBinding(e.size,{assistiveId:a,checked:o,disabled:u,errorText:f,handleClick:p,handleKeydown:m,helperText:h,labelId:g},`switch`),d.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="${g}"><slot></slot></span>
-      ${l.renderHelperRegion(r,d,h)}
-    `},styles:[r.colorThemeMixin,r.forcedColorsFormControlMixin,n.disabledStateMixin,e.coarsePointerMixin,t.sizeVariantMixin(s.SWITCH_SIZE_PRESET),d.default]}),exports.SWITCH_TAG=p;
+      ${c.renderHelperRegion(a,f,h)}
+    `},styles:[n.colorThemeMixin,n.forcedColorsFormControlMixin,t.disabledStateMixin,e.sizeVariantMixin(o.SWITCH_SIZE_PRESET),p,u.default]}),exports.SWITCH_TAG=f;
 //# 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, getHost, html, onCleanup, prop, useField } from '@vielzeug/ore';\nimport { createCheckable, lifecycleSignal } from '../../core';\nimport { disablableBundle, SWITCH_SIZE_PRESET, sizableBundle, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsFormControlMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\nimport { applyCheckableBinding } from '../shared/field-binding';\nimport { defineFieldChecked, dispatchNativeFieldEvent, setFieldChecked } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './switch.css?inline';\n\nexport type OreSwitchEvents = {\n  change: Event;\n  input: Event;\n};\n\nexport type OreSwitchProps = CheckableProps & {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message (marks field as invalid) */\n  error?: string;\n  /** Helper text displayed below the switch */\n  helper?: string;\n  /** Component size */\n  size?: ComponentSize;\n};\n\n/**\n * A toggle switch component for binary on/off states.\n *\n * @element ore-switch\n *\n * @attr {boolean} checked - Checked/on state\n * @attr {boolean} disabled - Disable switch interaction\n * @attr {string} value - Field value\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Switch size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the switch\n *\n * @fires input - Emitted when switch is toggled.\n * @fires change - Emitted when switch is toggled.\n *\n * @slot - Switch label text\n *\n * @cssprop --switch-width - Track width\n * @cssprop --switch-height - Track height\n * @cssprop --switch-track-bg - Inactive track background color\n * @cssprop --switch-checked-bg - Active/checked track background color\n * @cssprop --switch-thumb-bg - Thumb background color\n * @cssprop --switch-font-size - Label font size\n * @part switch - The switch wrapper element\n * @part track - The switch track element\n * @part thumb - The switch thumb element\n * @part label - The label element\n * @part helper-text - The helper/error text element\n *\n * @example\n * ```html\n * <ore-switch name=\"notifications\" checked color=\"primary\">Enable notifications</ore-switch>\n * <ore-switch name=\"darkMode\" size=\"sm\">Dark mode</ore-switch>\n * <ore-switch disabled helper=\"Contact admin to change\">Admin only</ore-switch>\n * ```\n */\nexport const SWITCH_TAG = 'ore-switch' as const;\ndefine<OreSwitchProps>(SWITCH_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    checked: prop.bool(false),\n    error: prop.string(),\n    helper: prop.string(),\n    name: prop.string(),\n    value: prop.string('on'),\n  },\n  setup(props) {\n    const el = getHost();\n\n    const checkable = createCheckable({\n      checked: props.checked,\n      clearIndeterminateFirst: false,\n      disabled: props.disabled,\n      error: props.error,\n      helper: props.helper,\n      onToggle: (payload) => {\n        checkable.triggerValidation('change');\n        setFieldChecked(el, payload.checked);\n        dispatchNativeFieldEvent(el, 'input');\n        dispatchNativeFieldEvent(el, 'change');\n      },\n      prefix: 'switch',\n      signal: lifecycleSignal(onCleanup),\n      value: props.value,\n    });\n\n    checkable.attachFormField(\n      useField<string | null>({\n        disabled: checkable.disabled,\n        toFormValue: (v) => v,\n        value: checkable.checkableFormValue,\n      }),\n    );\n\n    const { assistiveId, checked, disabled, errorText, handleClick, handleKeydown, helperText, labelId } = checkable;\n\n    defineFieldChecked(\n      el,\n      () => checked.value,\n      (value) => {\n        checked.value = value;\n      },\n    );\n\n    applyCheckableBinding(\n      props.size,\n      { assistiveId, checked, disabled, errorText, handleClick, handleKeydown, helperText, labelId },\n      'switch',\n    );\n\n    return html`\n      <div class=\"switch-wrapper\" part=\"switch\">\n        <div class=\"switch-track\" part=\"track\">\n          <div class=\"switch-thumb\" part=\"thumb\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" id=\"${labelId}\"><slot></slot></span>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    forcedColorsFormControlMixin,\n    disabledStateMixin,\n    coarsePointerMixin,\n    sizeVariantMixin(SWITCH_SIZE_PRESET),\n    componentStyles,\n  ],\n});\n"],"mappings":"mmBAwEA,IAAa,EAAa,cAC1B,EAAA,EAAA,OAAA,CAAuB,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,EAAK,EAAA,QAAA,CAAQ,EAEb,EAAY,EAAA,gBAAgB,CAChC,QAAS,EAAM,QACf,wBAAyB,GACzB,SAAU,EAAM,SAChB,MAAO,EAAM,MACb,OAAQ,EAAM,OACd,SAAW,GAAY,CACrB,EAAU,kBAAkB,QAAQ,EACpC,EAAA,gBAAgB,EAAI,EAAQ,OAAO,EACnC,EAAA,yBAAyB,EAAI,OAAO,EACpC,EAAA,yBAAyB,EAAI,QAAQ,CACvC,EACA,OAAQ,SACR,OAAQ,EAAA,gBAAgB,EAAA,SAAS,EACjC,MAAO,EAAM,KACf,CAAC,EAED,EAAU,iBAAA,EACR,EAAA,SAAA,CAAwB,CACtB,SAAU,EAAU,SACpB,YAAc,GAAM,EACpB,MAAO,EAAU,kBACnB,CAAC,CACH,EAEA,GAAM,CAAE,cAAa,UAAS,WAAU,YAAW,cAAa,gBAAe,aAAY,WAAY,EAgBvG,OAdA,EAAA,mBACE,MACM,EAAQ,MACb,GAAU,CACT,EAAQ,MAAQ,CAClB,CACF,EAEA,EAAA,sBACE,EAAM,KACN,CAAE,cAAa,UAAS,WAAU,YAAW,cAAa,gBAAe,aAAY,SAAQ,EAC7F,QACF,EAEO,EAAA,IAAI;;;;;;6CAM8B,EAAQ;QAC7C,EAAA,mBAAmB,EAAa,EAAW,CAAU,EAAE;KAE7D,EACA,OAAQ,CACN,EAAA,gBACA,EAAA,6BACA,EAAA,mBACA,EAAA,mBACA,EAAA,iBAAiB,EAAA,kBAAkB,EACnC,EAAA,OACF,CACF,CAAC"}
+{"version":3,"file":"switch.cjs","names":[],"sources":["../src/inputs/switch/switch.ts"],"sourcesContent":["import { css, define, getHost, html, onCleanup, prop, useField } from '@vielzeug/ore';\nimport { createCheckable, lifecycleSignal } from '../../core';\nimport { disablableBundle, SWITCH_SIZE_PRESET, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, disabledStateMixin, forcedColorsFormControlMixin, sizeVariantMixin } from '../../styles';\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\nimport { applyCheckableBinding } from '../shared/field-binding';\nimport { defineFieldChecked, dispatchNativeFieldEvent, setFieldChecked } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './switch.css?inline';\n\nexport type OreSwitchEvents = {\n  change: Event;\n  input: Event;\n};\n\nexport type OreSwitchProps = CheckableProps & {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message (marks field as invalid) */\n  error?: string;\n  /** Helper text displayed below the switch */\n  helper?: string;\n  /** Component size */\n  size?: ComponentSize;\n};\n\n/**\n * A toggle switch component for binary on/off states.\n *\n * @element ore-switch\n *\n * @attr {boolean} checked - Checked/on state\n * @attr {boolean} disabled - Disable switch interaction\n * @attr {string} value - Field value\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Switch size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the switch\n *\n * @fires input - Emitted when switch is toggled.\n * @fires change - Emitted when switch is toggled.\n *\n * @slot - Switch label text\n *\n * @cssprop --switch-width - Track width\n * @cssprop --switch-height - Track height\n * @cssprop --switch-track-bg - Inactive track background color\n * @cssprop --switch-checked-bg - Active/checked track background color\n * @cssprop --switch-thumb-bg - Thumb background color\n * @cssprop --switch-font-size - Label font size\n * @part switch - The switch wrapper element\n * @part track - The switch track element\n * @part thumb - The switch thumb element\n * @part label - The label element\n * @part helper-text - The helper/error text element\n *\n * @example\n * ```html\n * <ore-switch name=\"notifications\" checked color=\"primary\">Enable notifications</ore-switch>\n * <ore-switch name=\"darkMode\" size=\"sm\">Dark mode</ore-switch>\n * <ore-switch disabled helper=\"Contact admin to change\">Admin only</ore-switch>\n * ```\n */\nexport const SWITCH_TAG = 'ore-switch' as const;\nconst switchCoarsePointerMixin = css`\n  @media (pointer: coarse) {\n    :host,\n    :host([size='md']) {\n      --_touch-target: var(--size-11);\n      --_font-size: var(--text-base);\n      --_gap: var(--size-3);\n      --_height: var(--size-7);\n      --_thumb-size: var(--size-6);\n      --_width: var(--size-14);\n    }\n\n    :host([size='sm']) {\n      --_touch-target: var(--size-11);\n      --_font-size: var(--text-sm);\n      --_gap: var(--size-2);\n      --_height: var(--size-5);\n      --_thumb-size: var(--size-4);\n      --_width: var(--size-10);\n    }\n\n    :host([size='lg']) {\n      --_touch-target: var(--size-11);\n    }\n  }\n`;\ndefine<OreSwitchProps>(SWITCH_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    checked: prop.bool(false),\n    error: prop.string(),\n    helper: prop.string(),\n    name: prop.string(),\n    value: prop.string('on'),\n  },\n  setup(props) {\n    const el = getHost();\n\n    const checkable = createCheckable({\n      checked: props.checked,\n      clearIndeterminateFirst: false,\n      disabled: props.disabled,\n      error: props.error,\n      helper: props.helper,\n      onToggle: (payload) => {\n        checkable.triggerValidation('change');\n        setFieldChecked(el, payload.checked);\n        dispatchNativeFieldEvent(el, 'input');\n        dispatchNativeFieldEvent(el, 'change');\n      },\n      prefix: 'switch',\n      signal: lifecycleSignal(onCleanup),\n      value: props.value,\n    });\n\n    checkable.attachFormField(\n      useField<string | null>({\n        disabled: checkable.disabled,\n        toFormValue: (v) => v,\n        value: checkable.checkableFormValue,\n      }),\n    );\n\n    const { assistiveId, checked, disabled, errorText, handleClick, handleKeydown, helperText, labelId } = checkable;\n\n    defineFieldChecked(\n      el,\n      () => checked.value,\n      (value) => {\n        checked.value = value;\n      },\n    );\n\n    applyCheckableBinding(\n      props.size,\n      { assistiveId, checked, disabled, errorText, handleClick, handleKeydown, helperText, labelId },\n      'switch',\n    );\n\n    return html`\n      <div class=\"switch-wrapper\" part=\"switch\">\n        <div class=\"switch-track\" part=\"track\">\n          <div class=\"switch-thumb\" part=\"thumb\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" id=\"${labelId}\"><slot></slot></span>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    forcedColorsFormControlMixin,\n    disabledStateMixin,\n    sizeVariantMixin(SWITCH_SIZE_PRESET),\n    switchCoarsePointerMixin,\n    componentStyles,\n  ],\n});\n"],"mappings":"gjBAkEA,IAAa,EAAa,aACpB,EAA2B,EAAA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;GA0BpC,EAAA,EAAA,OAAA,CAAuB,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,EAAK,EAAA,QAAA,CAAQ,EAEb,EAAY,EAAA,gBAAgB,CAChC,QAAS,EAAM,QACf,wBAAyB,GACzB,SAAU,EAAM,SAChB,MAAO,EAAM,MACb,OAAQ,EAAM,OACd,SAAW,GAAY,CACrB,EAAU,kBAAkB,QAAQ,EACpC,EAAA,gBAAgB,EAAI,EAAQ,OAAO,EACnC,EAAA,yBAAyB,EAAI,OAAO,EACpC,EAAA,yBAAyB,EAAI,QAAQ,CACvC,EACA,OAAQ,SACR,OAAQ,EAAA,gBAAgB,EAAA,SAAS,EACjC,MAAO,EAAM,KACf,CAAC,EAED,EAAU,iBAAA,EACR,EAAA,SAAA,CAAwB,CACtB,SAAU,EAAU,SACpB,YAAc,GAAM,EACpB,MAAO,EAAU,kBACnB,CAAC,CACH,EAEA,GAAM,CAAE,cAAa,UAAS,WAAU,YAAW,cAAa,gBAAe,aAAY,WAAY,EAgBvG,OAdA,EAAA,mBACE,MACM,EAAQ,MACb,GAAU,CACT,EAAQ,MAAQ,CAClB,CACF,EAEA,EAAA,sBACE,EAAM,KACN,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,EACA,EAAA,OACF,CACF,CAAC"}

package/dist/switch.js

@@ -1,24 +1,48 @@
-import { coarsePointerMixin as e } from "./styles/mixins/accessibility.css.js";
-import { sizeVariantMixin as t } from "./styles/mixins/shape.css.js";
-import { disabledStateMixin as n } from "./styles/mixins/states.css.js";
-import { colorThemeMixin as r, forcedColorsFormControlMixin as i } from "./styles/mixins/theme.css.js";
-import { createCheckable as a } from "./core/checkable.js";
-import { lifecycleSignal as o } from "./core/ore.js";
-import { disablableBundle as s, sizableBundle as c, themableBundle as l } from "./shared/prop-bundles.js";
-import { SWITCH_SIZE_PRESET as u } from "./shared/size-presets.js";
-import { applyCheckableBinding as d } from "./inputs/shared/field-binding.js";
-import { renderHelperRegion as f } from "./inputs/shared/templates.js";
-import { defineFieldChecked as p, dispatchNativeFieldEvent as m, setFieldChecked as h } from "./inputs/shared/native-field-event.js";
-import g from "./inputs/switch/switch.css.js";
-import { define as _, getHost as v, html as y, onCleanup as b, prop as x, useField as S } from "@vielzeug/ore";
+import { sizeVariantMixin as e } from "./styles/mixins/shape.css.js";
+import { disabledStateMixin as t } from "./styles/mixins/states.css.js";
+import { colorThemeMixin as n, forcedColorsFormControlMixin as r } from "./styles/mixins/theme.css.js";
+import { createCheckable as i } from "./core/checkable.js";
+import { lifecycleSignal as a } from "./core/ore.js";
+import { disablableBundle as o, sizableBundle as s, themableBundle as c } from "./shared/prop-bundles.js";
+import { SWITCH_SIZE_PRESET as l } from "./shared/size-presets.js";
+import { applyCheckableBinding as u } from "./inputs/shared/field-binding.js";
+import { renderHelperRegion as d } from "./inputs/shared/templates.js";
+import { defineFieldChecked as f, dispatchNativeFieldEvent as p, setFieldChecked as m } from "./inputs/shared/native-field-event.js";
+import h from "./inputs/switch/switch.css.js";
+import { css as g, define as _, getHost as v, html as y, onCleanup as b, prop as x, useField as S } from "@vielzeug/ore";
 //#region src/inputs/switch/switch.ts
-var C = "ore-switch";
+var C = "ore-switch", w = g`
+  @media (pointer: coarse) {
+    :host,
+    :host([size='md']) {
+      --_touch-target: var(--size-11);
+      --_font-size: var(--text-base);
+      --_gap: var(--size-3);
+      --_height: var(--size-7);
+      --_thumb-size: var(--size-6);
+      --_width: var(--size-14);
+    }
+
+    :host([size='sm']) {
+      --_touch-target: var(--size-11);
+      --_font-size: var(--text-sm);
+      --_gap: var(--size-2);
+      --_height: var(--size-5);
+      --_thumb-size: var(--size-4);
+      --_width: var(--size-10);
+    }
+
+    :host([size='lg']) {
+      --_touch-target: var(--size-11);
+    }
+  }
+`;
 _(C, {
 	formAssociated: !0,
 	props: {
-		...l,
 		...c,
 		...s,
+		...o,
 		checked: x.bool(!1),
 		error: x.string(),
 		helper: x.string(),
@@ -26,17 +50,17 @@ _(C, {
 		value: x.string("on")
 	},
 	setup(e) {
-		let t = v(), n = a({
+		let t = v(), n = i({
 			checked: e.checked,
 			clearIndeterminateFirst: !1,
 			disabled: e.disabled,
 			error: e.error,
 			helper: e.helper,
 			onToggle: (e) => {
-				n.triggerValidation("change"), h(t, e.checked), m(t, "input"), m(t, "change");
+				n.triggerValidation("change"), m(t, e.checked), p(t, "input"), p(t, "change");
 			},
 			prefix: "switch",
-			signal: o(b),
+			signal: a(b),
 			value: e.value
 		});
 		n.attachFormField(S({
@@ -44,16 +68,16 @@ _(C, {
 			toFormValue: (e) => e,
 			value: n.checkableFormValue
 		}));
-		let { assistiveId: r, checked: i, disabled: s, errorText: c, handleClick: l, handleKeydown: u, helperText: g, labelId: _ } = n;
-		return p(t, () => i.value, (e) => {
-			i.value = e;
-		}), d(e.size, {
+		let { assistiveId: r, checked: o, disabled: s, errorText: c, handleClick: l, handleKeydown: h, helperText: g, labelId: _ } = n;
+		return f(t, () => o.value, (e) => {
+			o.value = e;
+		}), u(e.size, {
 			assistiveId: r,
-			checked: i,
+			checked: o,
 			disabled: s,
 			errorText: c,
 			handleClick: l,
-			handleKeydown: u,
+			handleKeydown: h,
 			helperText: g,
 			labelId: _
 		}, "switch"), y`
@@ -63,16 +87,16 @@ _(C, {
         </div>
       </div>
       <span class="label" part="label" id="${_}"><slot></slot></span>
-      ${f(r, c, g)}
+      ${d(r, c, g)}
     `;
 	},
 	styles: [
-		r,
-		i,
 		n,
-		e,
-		t(u),
-		g
+		r,
+		t,
+		e(l),
+		w,
+		h
 	]
 });
 //#endregion

package/dist/switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"switch.js","names":[],"sources":["../src/inputs/switch/switch.ts"],"sourcesContent":["import { define, getHost, html, onCleanup, prop, useField } from '@vielzeug/ore';\nimport { createCheckable, lifecycleSignal } from '../../core';\nimport { disablableBundle, SWITCH_SIZE_PRESET, sizableBundle, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsFormControlMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\nimport { applyCheckableBinding } from '../shared/field-binding';\nimport { defineFieldChecked, dispatchNativeFieldEvent, setFieldChecked } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './switch.css?inline';\n\nexport type OreSwitchEvents = {\n  change: Event;\n  input: Event;\n};\n\nexport type OreSwitchProps = CheckableProps & {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message (marks field as invalid) */\n  error?: string;\n  /** Helper text displayed below the switch */\n  helper?: string;\n  /** Component size */\n  size?: ComponentSize;\n};\n\n/**\n * A toggle switch component for binary on/off states.\n *\n * @element ore-switch\n *\n * @attr {boolean} checked - Checked/on state\n * @attr {boolean} disabled - Disable switch interaction\n * @attr {string} value - Field value\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Switch size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the switch\n *\n * @fires input - Emitted when switch is toggled.\n * @fires change - Emitted when switch is toggled.\n *\n * @slot - Switch label text\n *\n * @cssprop --switch-width - Track width\n * @cssprop --switch-height - Track height\n * @cssprop --switch-track-bg - Inactive track background color\n * @cssprop --switch-checked-bg - Active/checked track background color\n * @cssprop --switch-thumb-bg - Thumb background color\n * @cssprop --switch-font-size - Label font size\n * @part switch - The switch wrapper element\n * @part track - The switch track element\n * @part thumb - The switch thumb element\n * @part label - The label element\n * @part helper-text - The helper/error text element\n *\n * @example\n * ```html\n * <ore-switch name=\"notifications\" checked color=\"primary\">Enable notifications</ore-switch>\n * <ore-switch name=\"darkMode\" size=\"sm\">Dark mode</ore-switch>\n * <ore-switch disabled helper=\"Contact admin to change\">Admin only</ore-switch>\n * ```\n */\nexport const SWITCH_TAG = 'ore-switch' as const;\ndefine<OreSwitchProps>(SWITCH_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    checked: prop.bool(false),\n    error: prop.string(),\n    helper: prop.string(),\n    name: prop.string(),\n    value: prop.string('on'),\n  },\n  setup(props) {\n    const el = getHost();\n\n    const checkable = createCheckable({\n      checked: props.checked,\n      clearIndeterminateFirst: false,\n      disabled: props.disabled,\n      error: props.error,\n      helper: props.helper,\n      onToggle: (payload) => {\n        checkable.triggerValidation('change');\n        setFieldChecked(el, payload.checked);\n        dispatchNativeFieldEvent(el, 'input');\n        dispatchNativeFieldEvent(el, 'change');\n      },\n      prefix: 'switch',\n      signal: lifecycleSignal(onCleanup),\n      value: props.value,\n    });\n\n    checkable.attachFormField(\n      useField<string | null>({\n        disabled: checkable.disabled,\n        toFormValue: (v) => v,\n        value: checkable.checkableFormValue,\n      }),\n    );\n\n    const { assistiveId, checked, disabled, errorText, handleClick, handleKeydown, helperText, labelId } = checkable;\n\n    defineFieldChecked(\n      el,\n      () => checked.value,\n      (value) => {\n        checked.value = value;\n      },\n    );\n\n    applyCheckableBinding(\n      props.size,\n      { assistiveId, checked, disabled, errorText, handleClick, handleKeydown, helperText, labelId },\n      'switch',\n    );\n\n    return html`\n      <div class=\"switch-wrapper\" part=\"switch\">\n        <div class=\"switch-track\" part=\"track\">\n          <div class=\"switch-thumb\" part=\"thumb\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" id=\"${labelId}\"><slot></slot></span>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    forcedColorsFormControlMixin,\n    disabledStateMixin,\n    coarsePointerMixin,\n    sizeVariantMixin(SWITCH_SIZE_PRESET),\n    componentStyles,\n  ],\n});\n"],"mappings":";;;;;;;;;;;;;;AAwEA,IAAa,IAAa;AAC1B,EAAuB,GAAY;CACjC,gBAAgB;CAChB,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,SAAS,EAAK,KAAK,EAAK;EACxB,OAAO,EAAK,OAAO;EACnB,QAAQ,EAAK,OAAO;EACpB,MAAM,EAAK,OAAO;EAClB,OAAO,EAAK,OAAO,IAAI;CACzB;CACA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GAEb,IAAY,EAAgB;GAChC,SAAS,EAAM;GACf,yBAAyB;GACzB,UAAU,EAAM;GAChB,OAAO,EAAM;GACb,QAAQ,EAAM;GACd,WAAW,MAAY;IAIrB,AAHA,EAAU,kBAAkB,QAAQ,GACpC,EAAgB,GAAI,EAAQ,OAAO,GACnC,EAAyB,GAAI,OAAO,GACpC,EAAyB,GAAI,QAAQ;GACvC;GACA,QAAQ;GACR,QAAQ,EAAgB,CAAS;GACjC,OAAO,EAAM;EACf,CAAC;EAED,EAAU,gBACR,EAAwB;GACtB,UAAU,EAAU;GACpB,cAAc,MAAM;GACpB,OAAO,EAAU;EACnB,CAAC,CACH;EAEA,IAAM,EAAE,gBAAa,YAAS,aAAU,cAAW,gBAAa,kBAAe,eAAY,eAAY;EAgBvG,OAdA,EACE,SACM,EAAQ,QACb,MAAU;GACT,EAAQ,QAAQ;EAClB,CACF,GAEA,EACE,EAAM,MACN;GAAE;GAAa;GAAS;GAAU;GAAW;GAAa;GAAe;GAAY;EAAQ,GAC7F,QACF,GAEO,CAAI;;;;;;6CAM8B,EAAQ;QAC7C,EAAmB,GAAa,GAAW,CAAU,EAAE;;CAE7D;CACA,QAAQ;EACN;EACA;EACA;EACA;EACA,EAAiB,CAAkB;EACnC;CACF;AACF,CAAC"}
+{"version":3,"file":"switch.js","names":[],"sources":["../src/inputs/switch/switch.ts"],"sourcesContent":["import { css, define, getHost, html, onCleanup, prop, useField } from '@vielzeug/ore';\nimport { createCheckable, lifecycleSignal } from '../../core';\nimport { disablableBundle, SWITCH_SIZE_PRESET, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, disabledStateMixin, forcedColorsFormControlMixin, sizeVariantMixin } from '../../styles';\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\nimport { applyCheckableBinding } from '../shared/field-binding';\nimport { defineFieldChecked, dispatchNativeFieldEvent, setFieldChecked } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './switch.css?inline';\n\nexport type OreSwitchEvents = {\n  change: Event;\n  input: Event;\n};\n\nexport type OreSwitchProps = CheckableProps & {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message (marks field as invalid) */\n  error?: string;\n  /** Helper text displayed below the switch */\n  helper?: string;\n  /** Component size */\n  size?: ComponentSize;\n};\n\n/**\n * A toggle switch component for binary on/off states.\n *\n * @element ore-switch\n *\n * @attr {boolean} checked - Checked/on state\n * @attr {boolean} disabled - Disable switch interaction\n * @attr {string} value - Field value\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Switch size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the switch\n *\n * @fires input - Emitted when switch is toggled.\n * @fires change - Emitted when switch is toggled.\n *\n * @slot - Switch label text\n *\n * @cssprop --switch-width - Track width\n * @cssprop --switch-height - Track height\n * @cssprop --switch-track-bg - Inactive track background color\n * @cssprop --switch-checked-bg - Active/checked track background color\n * @cssprop --switch-thumb-bg - Thumb background color\n * @cssprop --switch-font-size - Label font size\n * @part switch - The switch wrapper element\n * @part track - The switch track element\n * @part thumb - The switch thumb element\n * @part label - The label element\n * @part helper-text - The helper/error text element\n *\n * @example\n * ```html\n * <ore-switch name=\"notifications\" checked color=\"primary\">Enable notifications</ore-switch>\n * <ore-switch name=\"darkMode\" size=\"sm\">Dark mode</ore-switch>\n * <ore-switch disabled helper=\"Contact admin to change\">Admin only</ore-switch>\n * ```\n */\nexport const SWITCH_TAG = 'ore-switch' as const;\nconst switchCoarsePointerMixin = css`\n  @media (pointer: coarse) {\n    :host,\n    :host([size='md']) {\n      --_touch-target: var(--size-11);\n      --_font-size: var(--text-base);\n      --_gap: var(--size-3);\n      --_height: var(--size-7);\n      --_thumb-size: var(--size-6);\n      --_width: var(--size-14);\n    }\n\n    :host([size='sm']) {\n      --_touch-target: var(--size-11);\n      --_font-size: var(--text-sm);\n      --_gap: var(--size-2);\n      --_height: var(--size-5);\n      --_thumb-size: var(--size-4);\n      --_width: var(--size-10);\n    }\n\n    :host([size='lg']) {\n      --_touch-target: var(--size-11);\n    }\n  }\n`;\ndefine<OreSwitchProps>(SWITCH_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    checked: prop.bool(false),\n    error: prop.string(),\n    helper: prop.string(),\n    name: prop.string(),\n    value: prop.string('on'),\n  },\n  setup(props) {\n    const el = getHost();\n\n    const checkable = createCheckable({\n      checked: props.checked,\n      clearIndeterminateFirst: false,\n      disabled: props.disabled,\n      error: props.error,\n      helper: props.helper,\n      onToggle: (payload) => {\n        checkable.triggerValidation('change');\n        setFieldChecked(el, payload.checked);\n        dispatchNativeFieldEvent(el, 'input');\n        dispatchNativeFieldEvent(el, 'change');\n      },\n      prefix: 'switch',\n      signal: lifecycleSignal(onCleanup),\n      value: props.value,\n    });\n\n    checkable.attachFormField(\n      useField<string | null>({\n        disabled: checkable.disabled,\n        toFormValue: (v) => v,\n        value: checkable.checkableFormValue,\n      }),\n    );\n\n    const { assistiveId, checked, disabled, errorText, handleClick, handleKeydown, helperText, labelId } = checkable;\n\n    defineFieldChecked(\n      el,\n      () => checked.value,\n      (value) => {\n        checked.value = value;\n      },\n    );\n\n    applyCheckableBinding(\n      props.size,\n      { assistiveId, checked, disabled, errorText, handleClick, handleKeydown, helperText, labelId },\n      'switch',\n    );\n\n    return html`\n      <div class=\"switch-wrapper\" part=\"switch\">\n        <div class=\"switch-track\" part=\"track\">\n          <div class=\"switch-thumb\" part=\"thumb\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" id=\"${labelId}\"><slot></slot></span>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    forcedColorsFormControlMixin,\n    disabledStateMixin,\n    sizeVariantMixin(SWITCH_SIZE_PRESET),\n    switchCoarsePointerMixin,\n    componentStyles,\n  ],\n});\n"],"mappings":";;;;;;;;;;;;;AAkEA,IAAa,IAAa,cACpB,IAA2B,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BpC,EAAuB,GAAY;CACjC,gBAAgB;CAChB,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,SAAS,EAAK,KAAK,EAAK;EACxB,OAAO,EAAK,OAAO;EACnB,QAAQ,EAAK,OAAO;EACpB,MAAM,EAAK,OAAO;EAClB,OAAO,EAAK,OAAO,IAAI;CACzB;CACA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GAEb,IAAY,EAAgB;GAChC,SAAS,EAAM;GACf,yBAAyB;GACzB,UAAU,EAAM;GAChB,OAAO,EAAM;GACb,QAAQ,EAAM;GACd,WAAW,MAAY;IAIrB,AAHA,EAAU,kBAAkB,QAAQ,GACpC,EAAgB,GAAI,EAAQ,OAAO,GACnC,EAAyB,GAAI,OAAO,GACpC,EAAyB,GAAI,QAAQ;GACvC;GACA,QAAQ;GACR,QAAQ,EAAgB,CAAS;GACjC,OAAO,EAAM;EACf,CAAC;EAED,EAAU,gBACR,EAAwB;GACtB,UAAU,EAAU;GACpB,cAAc,MAAM;GACpB,OAAO,EAAU;EACnB,CAAC,CACH;EAEA,IAAM,EAAE,gBAAa,YAAS,aAAU,cAAW,gBAAa,kBAAe,eAAY,eAAY;EAgBvG,OAdA,EACE,SACM,EAAQ,QACb,MAAU;GACT,EAAQ,QAAQ;EAClB,CACF,GAEA,EACE,EAAM,MACN;GAAE;GAAa;GAAS;GAAU;GAAW;GAAa;GAAe;GAAY;EAAQ,GAC7F,QACF,GAEO,CAAI;;;;;;6CAM8B,EAAQ;QAC7C,EAAmB,GAAa,GAAW,CAAU,EAAE;;CAE7D;CACA,QAAQ;EACN;EACA;EACA;EACA,EAAiB,CAAkB;EACnC;EACA;CACF;AACF,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vielzeug/refine",
-  "version": "3.1.0",
-  "description": "Accessible, themeable web components built on Ore custom element primitives",
+  "version": "3.2.1",
+  "description": "Accessible, themeable web components built on ore",
   "keywords": [
     "web-components",
     "custom-elements",