@vielzeug/buildit 2.0.0 → 2.1.0

package/dist/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","names":[],"sources":["../src/inputs/slider/slider.ts"],"sourcesContent":["import {\n  aria,\n  computed,\n  createId,\n  defineComponent,\n  defineField,\n  guard,\n  handle,\n  html,\n  inject,\n  onMount,\n  ref,\n  signal,\n  watch,\n} from '@vielzeug/craftit';\n\nimport type { DisablableProps, SizableProps, ThemableProps } from '../../types';\n\nimport { coarsePointerMixin, colorThemeMixin, disabledStateMixin, sizeVariantMixin } from '../../styles';\nimport { SLIDER_SIZE_PRESET } from '../shared/design-presets';\nimport { mountFormContextSync } from '../shared/dom-sync';\nimport { FORM_CTX } from '../shared/form-context';\nimport { createFieldValidation } from '../shared/validation';\nimport componentStyles from './slider.css?inline';\n\n/** Slider component properties */\n\nexport type BitSliderEvents = {\n  change: { from?: number; originalEvent?: Event; to?: number; value: number | { from: number; to: number } };\n};\n\nexport type BitSliderProps = ThemableProps &\n  SizableProps &\n  DisablableProps & {\n    /** Range mode: lower bound */\n    from?: number | string;\n    /** Range mode a11y label for the start thumb (e.g. \"$20\") */\n    'from-value-text'?: string;\n    /** Maximum value */\n    max?: number | string;\n    /** Minimum value */\n    min?: number | string;\n    /** Single-value mode: form field name */\n    name?: string;\n    /** Activate two-thumb range selection */\n    range?: boolean;\n    /** Step increment */\n    step?: number | string;\n    /** Range mode: upper bound */\n    to?: number | string;\n    /** Range mode a11y label for the end thumb (e.g. \"$80\") */\n    'to-value-text'?: string;\n    /** Single-value mode: current value */\n    value?: number | string;\n    /** Single-value mode a11y label override (e.g. \"75%\"). Overrides raw aria-valuenow. */\n    'value-text'?: string;\n  };\n\n/**\n * A slider for selecting a single numeric value or a numeric range.\n *\n * Add the boolean `range` attribute to activate two-thumb range mode.\n *\n * @element bit-slider\n *\n * @attr {number}  min   - Minimum value (default: 0)\n * @attr {number}  max   - Maximum value (default: 100)\n * @attr {number}  step  - Step increment (default: 1)\n * @attr {number}  value - Current value (single mode)\n * @attr {number}  from  - Lower bound (range mode)\n * @attr {number}  to    - Upper bound (range mode)\n * @attr {boolean} range - Activate range mode\n * @attr {boolean} disabled - Disable interaction\n * @attr {string}  name  - Form field name (single mode)\n * @attr {string}  color - Theme color\n * @attr {string}  size  - 'sm' | 'md' | 'lg'\n *\n * @fires change - detail always includes `value`; single mode: { value: number }, range mode: { value: { from, to }, from, to }, plus optional originalEvent\n *\n * @slot - Slider label text\n *\n * @part slider      - Slider container\n * @part track       - Track element\n * @part fill        - Fill element\n * @part thumb       - Single-value thumb\n * @part thumb-start - Range start thumb\n * @part thumb-end   - Range end thumb\n * @part label       - Label element\n *\n * @cssprop --slider-height - Track height\n * @cssprop --slider-size   - Thumb dimensions\n * @cssprop --slider-track  - Track background color\n * @cssprop --slider-fill   - Fill background color\n * @cssprop --slider-thumb  - Thumb background color\n *\n * @example\n * ```html\n * <bit-slider value=\"50\" name=\"volume\">Volume</bit-slider>\n * <bit-slider range from=\"20\" to=\"80\" color=\"primary\">Price range</bit-slider>\n * ```\n */\nexport const SLIDER_TAG = defineComponent<BitSliderProps, BitSliderEvents>({\n  formAssociated: true,\n  props: {\n    color: { default: undefined },\n    disabled: { default: false },\n    from: { default: '0' },\n    'from-value-text': { default: undefined },\n    max: { default: '100' },\n    min: { default: '0' },\n    name: { default: '' },\n    range: { default: false },\n    size: { default: undefined },\n    step: { default: '1' },\n    to: { default: '100' },\n    'to-value-text': { default: undefined },\n    value: { default: '0' },\n    'value-text': { default: undefined },\n  },\n  setup({ emit, host, props, slots }) {\n    // Treat `range` as static — determined at first render\n    const isRange = props.range.value;\n    // ── Shared helpers ────────────────────────────────────────────\n    const getNum = (v: string | number | undefined, fallback: number) => {\n      const n = Number(v);\n\n      return Number.isFinite(n) ? n : fallback;\n    };\n    const snapVal = (value: number) => {\n      const min = getNum(props.min.value, 0);\n      const max = getNum(props.max.value, 100);\n      const step = getNum(props.step.value, 1);\n\n      return Math.max(min, Math.min(max, Math.round(value / step) * step));\n    };\n    const toPercent = (value: number) => {\n      const min = getNum(props.min.value, 0);\n      const max = getNum(props.max.value, 100);\n\n      return ((value - min) / (max - min)) * 100;\n    };\n    // ── Single-value state ────────────────────────────────────────\n    const formCtx = inject(FORM_CTX, undefined);\n\n    mountFormContextSync(host, formCtx, props);\n\n    let sliderFd:\n      | {\n          reportValidity: () => boolean;\n        }\n      | undefined;\n    const valueSignal = signal('0');\n\n    if (!isRange) {\n      sliderFd = defineField(\n        { disabled: computed(() => Boolean(props.disabled.value)), value: valueSignal },\n        {\n          onReset: () => {\n            valueSignal.value = '0';\n          },\n        },\n      );\n      watch(\n        props.value,\n        (v) => {\n          valueSignal.value = String(v);\n        },\n        { immediate: true },\n      );\n      aria({\n        disabled: () => Boolean(props.disabled.value),\n        valuemax: () => getNum(props.max.value, 100),\n        valuemin: () => getNum(props.min.value, 0),\n        valuenow: () => Number(valueSignal.value || 0),\n        valuetext: () => props['value-text'].value ?? null,\n      });\n    }\n\n    // ── Range state ───────────────────────────────────────────────\n    const startVal = signal(0);\n    const endVal = signal(100);\n\n    if (isRange) {\n      sliderFd = defineField<{\n        from: number;\n        to: number;\n      }>(\n        {\n          disabled: computed(() => Boolean(props.disabled.value)),\n          toFormValue: ({ from, to }) => {\n            const name = props.name.value;\n\n            if (!name) return null;\n\n            const fd = new FormData();\n\n            fd.append(`${name}[from]`, String(from));\n            fd.append(`${name}[to]`, String(to));\n\n            return fd;\n          },\n          value: computed(() => ({ from: startVal.value, to: endVal.value })),\n        },\n        {\n          onReset: () => {\n            startVal.value = snapVal(getNum(props.from.value, 0));\n            endVal.value = snapVal(getNum(props.to.value, 100));\n          },\n        },\n      );\n      watch(\n        props.from,\n        (v) => {\n          startVal.value = snapVal(getNum(v as string | number | undefined, 0));\n        },\n        { immediate: true },\n      );\n      watch(\n        props.to,\n        (v) => {\n          endVal.value = snapVal(getNum(v as string | number | undefined, 100));\n        },\n        { immediate: true },\n      );\n    }\n\n    // ── Refs ──────────────────────────────────────────────────────\n    const containerRef = ref<HTMLDivElement>();\n    const labelRef = ref<HTMLSpanElement>();\n    const thumbStartRef = ref<HTMLDivElement>();\n    const thumbEndRef = ref<HTMLDivElement>();\n    const startId = createId('slider-start');\n    const endId = createId('slider-end');\n    // ── CSS update helpers ────────────────────────────────────────\n    const updateSingleCSS = (value: number) => {\n      const pct = toPercent(value);\n\n      host.style.setProperty('--_thumb-pos', `${pct}%`);\n      host.style.setProperty('--_fill-start', '0%');\n      host.style.setProperty('--_fill-width', `${pct}%`);\n    };\n    const updateRangeCSS = () => {\n      const s = toPercent(startVal.value);\n      const e = toPercent(endVal.value);\n\n      host.style.setProperty('--_thumb-start', `${s}%`);\n      host.style.setProperty('--_thumb-end', `${e}%`);\n      host.style.setProperty('--_fill-start', `${s}%`);\n      host.style.setProperty('--_fill-width', `${e - s}%`);\n    };\n    // ── Key-delta maps (avoids switch complexity) ─────────────────\n    const keyDelta = (key: string, step: number, min: number, max: number, current: number): number | null => {\n      if (key === 'ArrowRight' || key === 'ArrowUp') return current + step;\n\n      if (key === 'ArrowLeft' || key === 'ArrowDown') return current - step;\n\n      if (key === 'Home') return min;\n\n      if (key === 'End') return max;\n\n      return null;\n    };\n\n    // ── Range mode setup ──────────────────────────────────────────\n    const { triggerValidation } = createFieldValidation(formCtx, {\n      reportValidity: () => sliderFd?.reportValidity() ?? false,\n    });\n\n    const setupRangeMode = (container: HTMLDivElement) => {\n      updateRangeCSS();\n\n      const clientToValue = (clientX: number) => {\n        const rect = container.getBoundingClientRect();\n        const min = getNum(props.min.value, 0);\n        const max = getNum(props.max.value, 100);\n        const pct = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));\n\n        return snapVal(min + pct * (max - min));\n      };\n      let dragging: 'start' | 'end' | null = null;\n      const applyDrag = (val: number) => {\n        const min = getNum(props.min.value, 0);\n        const max = getNum(props.max.value, 100);\n\n        if (dragging === 'start') startVal.value = Math.min(snapVal(val), endVal.value);\n        else if (dragging === 'end') endVal.value = Math.max(snapVal(val), startVal.value);\n\n        startVal.value = Math.max(min, Math.min(startVal.value, max));\n        endVal.value = Math.max(min, Math.min(endVal.value, max));\n        updateRangeCSS();\n        emit('change', {\n          from: startVal.value,\n          to: endVal.value,\n          value: { from: startVal.value, to: endVal.value },\n        });\n        triggerValidation('change');\n      };\n\n      handle(\n        container,\n        'pointerdown',\n        guard(\n          () => !props.disabled.value,\n          (e: PointerEvent) => {\n            e.preventDefault();\n\n            const val = clientToValue(e.clientX);\n\n            dragging = Math.abs(val - startVal.value) <= Math.abs(val - endVal.value) ? 'start' : 'end';\n            host.setAttribute('data-dragging', '');\n            (e.target as Element).setPointerCapture(e.pointerId);\n            applyDrag(val);\n          },\n        ),\n      );\n      handle(\n        container,\n        'pointermove',\n        guard(\n          () => !!dragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            applyDrag(clientToValue(e.clientX));\n          },\n        ),\n      );\n      handle(\n        container,\n        'pointerup',\n        guard(\n          () => !!dragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            dragging = null;\n            host.removeAttribute('data-dragging');\n            (e.target as Element).releasePointerCapture(e.pointerId);\n          },\n        ),\n      );\n\n      const makeThumbKeydown = (getVal: () => number, setVal: (v: number) => void) => (e: KeyboardEvent) => {\n        if (props.disabled.value) return;\n\n        const step = getNum(props.step.value, 1);\n        const min = getNum(props.min.value, 0);\n        const max = getNum(props.max.value, 100);\n        const next = keyDelta(e.key, step, min, max, getVal());\n\n        if (next === null) return;\n\n        e.preventDefault();\n        setVal(snapVal(Math.max(min, Math.min(max, next))));\n        updateRangeCSS();\n        emit('change', {\n          from: startVal.value,\n          originalEvent: e,\n          to: endVal.value,\n          value: { from: startVal.value, to: endVal.value },\n        });\n        triggerValidation('change');\n      };\n      const thumbStartEl = thumbStartRef.value;\n      const thumbEndEl = thumbEndRef.value;\n\n      if (thumbStartEl) {\n        thumbStartEl.addEventListener(\n          'keydown',\n          makeThumbKeydown(\n            () => startVal.value,\n            (v) => {\n              startVal.value = Math.min(v, endVal.value);\n            },\n          ),\n        );\n        aria(thumbStartEl, {\n          label: 'Range start',\n          valuemax: () => endVal.value,\n          valuemin: () => getNum(props.min.value, 0),\n          valuenow: () => startVal.value,\n          valuetext: () => props['from-value-text'].value ?? null,\n        });\n      }\n\n      if (thumbEndEl) {\n        thumbEndEl.addEventListener(\n          'keydown',\n          makeThumbKeydown(\n            () => endVal.value,\n            (v) => {\n              endVal.value = Math.max(v, startVal.value);\n            },\n          ),\n        );\n        aria(thumbEndEl, {\n          label: 'Range end',\n          valuemax: () => getNum(props.max.value, 100),\n          valuemin: () => startVal.value,\n          valuenow: () => endVal.value,\n          valuetext: () => props['to-value-text'].value ?? null,\n        });\n      }\n    };\n    // ── Single-value mode setup ───────────────────────────────────\n    const setupSingleMode = (container: HTMLDivElement) => {\n      host.setAttribute('role', 'slider');\n\n      if (!props.disabled.value) host.setAttribute('tabindex', '0');\n\n      updateSingleCSS(Number(valueSignal.value));\n\n      const updateValue = (clientX: number) => {\n        if (props.disabled.value) return;\n\n        const rect = container.getBoundingClientRect();\n        const min = getNum(props.min.value, 0);\n        const max = getNum(props.max.value, 100);\n        const step = getNum(props.step.value, 1);\n        const pct = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));\n        const newValue = Math.max(min, Math.min(max, Math.round((min + pct * (max - min)) / step) * step));\n\n        if (Number(valueSignal.value) !== newValue) {\n          valueSignal.value = newValue.toString();\n          updateSingleCSS(newValue);\n          emit('change', { value: newValue });\n          triggerValidation('change');\n        }\n      };\n      let isDragging = false;\n\n      handle(\n        container,\n        'pointerdown',\n        guard(\n          () => !props.disabled.value,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            isDragging = true;\n            updateValue(e.clientX);\n            (e.target as Element).setPointerCapture(e.pointerId);\n          },\n        ),\n      );\n      handle(\n        container,\n        'pointermove',\n        guard(\n          () => isDragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n\n            if (!host.hasAttribute('data-dragging')) host.setAttribute('data-dragging', '');\n\n            updateValue(e.clientX);\n          },\n        ),\n      );\n      handle(\n        container,\n        'pointerup',\n        guard(\n          () => isDragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            isDragging = false;\n            host.removeAttribute('data-dragging');\n            (e.target as Element).releasePointerCapture(e.pointerId);\n          },\n        ),\n      );\n      handle(\n        host,\n        'keydown',\n        guard(\n          () => !props.disabled.value,\n          (e: KeyboardEvent) => {\n            const min = getNum(props.min.value, 0);\n            const max = getNum(props.max.value, 100);\n            const step = getNum(props.step.value, 1);\n            const val = Number(valueSignal.value || 0);\n            const next = keyDelta(e.key, step, min, max, val);\n\n            if (next === null) return;\n\n            e.preventDefault();\n\n            const newValue = Math.max(min, Math.min(max, next));\n\n            if (newValue !== val) {\n              valueSignal.value = newValue.toString();\n              updateSingleCSS(newValue);\n              emit('change', { originalEvent: e, value: newValue });\n              triggerValidation('change');\n            }\n          },\n        ),\n      );\n    };\n\n    onMount(() => {\n      const container = containerRef.value;\n\n      if (!container) return;\n\n      if (slots.has('default').value && labelRef.value) {\n        const labelId = createId('slider-label');\n\n        labelRef.value.id = labelId;\n\n        if (!isRange) aria({ labelledby: labelId });\n      }\n\n      if (isRange) setupRangeMode(container);\n      else setupSingleMode(container);\n    });\n\n    return html`\n      <div class=\"slider-container\" part=\"slider\" ref=${containerRef}>\n        <div class=\"slider-track\" part=\"track\">\n          <div class=\"slider-fill\" part=\"fill\"></div>\n          <div class=\"slider-thumb slider-thumb-sole\" part=\"thumb\"></div>\n          <div\n            class=\"slider-thumb slider-thumb-start\"\n            part=\"thumb-start\"\n            ref=${thumbStartRef}\n            role=\"slider\"\n            tabindex=\"${() => (props.disabled.value ? '-1' : '0')}\"\n            id=\"${startId}\"></div>\n          <div\n            class=\"slider-thumb slider-thumb-end\"\n            part=\"thumb-end\"\n            ref=${thumbEndRef}\n            role=\"slider\"\n            tabindex=\"${() => (props.disabled.value ? '-1' : '0')}\"\n            id=\"${endId}\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" ref=${labelRef}><slot></slot></span>\n    `;\n  },\n  styles: [\n    disabledStateMixin(),\n    colorThemeMixin,\n    sizeVariantMixin(SLIDER_SIZE_PRESET),\n    componentStyles,\n    coarsePointerMixin,\n  ],\n  tag: 'bit-slider',\n});\n"],"mappings":"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"}
+{"version":3,"file":"slider.js","names":[],"sources":["../src/inputs/slider/slider.ts"],"sourcesContent":["import {\n  define,\n  computed,\n  createId,\n  defineField,\n  handle,\n  html,\n  inject,\n  onMount,\n  ref,\n  signal,\n  watch,\n} from '@vielzeug/craftit';\nimport { createSliderControl, createValidationControl } from '@vielzeug/craftit/controls';\n\nimport type { DisablableProps, SizableProps, ThemableProps } from '../../types';\n\nimport { coarsePointerMixin, colorThemeMixin, disabledStateMixin, sizeVariantMixin } from '../../styles';\nimport { syncAria } from '../../utils/aria';\nimport { disablableBundle, sizableBundle, themableBundle, type PropBundle } from '../shared/bundles';\nimport { SLIDER_SIZE_PRESET } from '../shared/design-presets';\nimport { mountFormContextSync } from '../shared/dom-sync';\nimport { FORM_CTX } from '../shared/form-context';\nimport componentStyles from './slider.css?inline';\n\nconst guard =\n  <E extends Event = Event>(condition: () => unknown, handler: (e: E) => void): ((e: E) => void) =>\n  (e) => {\n    if (condition()) handler(e);\n  };\n\n/** Slider component properties */\n\nexport type BitSliderEvents = {\n  change: { from?: number; originalEvent?: Event; to?: number; value: number | { from: number; to: number } };\n};\n\nexport type BitSliderProps = ThemableProps &\n  SizableProps &\n  DisablableProps & {\n    /** Range mode: lower bound */\n    from?: number | string;\n    /** Range mode a11y label for the start thumb (e.g. \"$20\") */\n    'from-value-text'?: string;\n    /** Maximum value */\n    max?: number | string;\n    /** Minimum value */\n    min?: number | string;\n    /** Single-value mode: form field name */\n    name?: string;\n    /** Activate two-thumb range selection */\n    range?: boolean;\n    /** Step increment */\n    step?: number | string;\n    /** Range mode: upper bound */\n    to?: number | string;\n    /** Range mode a11y label for the end thumb (e.g. \"$80\") */\n    'to-value-text'?: string;\n    /** Single-value mode: current value */\n    value?: number | string;\n    /** Single-value mode a11y label override (e.g. \"75%\"). Overrides raw aria-valuenow. */\n    'value-text'?: string;\n  };\n\nconst sliderProps = {\n  ...themableBundle,\n  ...sizableBundle,\n  ...disablableBundle,\n  from: '0',\n  'from-value-text': undefined,\n  max: '100',\n  min: '0',\n  name: '',\n  range: false,\n  step: '1',\n  to: '100',\n  'to-value-text': undefined,\n  value: '0',\n  'value-text': undefined,\n} satisfies PropBundle<BitSliderProps>;\n\n/**\n * A slider for selecting a single numeric value or a numeric range.\n *\n * Add the boolean `range` attribute to activate two-thumb range mode.\n *\n * @element bit-slider\n *\n * @attr {number}  min   - Minimum value (default: 0)\n * @attr {number}  max   - Maximum value (default: 100)\n * @attr {number}  step  - Step increment (default: 1)\n * @attr {number}  value - Current value (single mode)\n * @attr {number}  from  - Lower bound (range mode)\n * @attr {number}  to    - Upper bound (range mode)\n * @attr {boolean} range - Activate range mode\n * @attr {boolean} disabled - Disable interaction\n * @attr {string}  name  - Form field name (single mode)\n * @attr {string}  color - Theme color\n * @attr {string}  size  - 'sm' | 'md' | 'lg'\n *\n * @fires change - detail always includes `value`; single mode: { value: number }, range mode: { value: { from, to }, from, to }, plus optional originalEvent\n *\n * @slot - Slider label text\n *\n * @part slider      - Slider container\n * @part track       - Track element\n * @part fill        - Fill element\n * @part thumb       - Single-value thumb\n * @part thumb-start - Range start thumb\n * @part thumb-end   - Range end thumb\n * @part label       - Label element\n *\n * @cssprop --slider-height - Track height\n * @cssprop --slider-size   - Thumb dimensions\n * @cssprop --slider-track  - Track background color\n * @cssprop --slider-fill   - Fill background color\n * @cssprop --slider-thumb  - Thumb background color\n *\n * @example\n * ```html\n * <bit-slider value=\"50\" name=\"volume\">Volume</bit-slider>\n * <bit-slider range from=\"20\" to=\"80\" color=\"primary\">Price range</bit-slider>\n * ```\n */\nexport const SLIDER_TAG = define<BitSliderProps, BitSliderEvents>('bit-slider', {\n  formAssociated: true,\n  props: sliderProps,\n  setup({ emit, host, props, slots }) {\n    // Treat `range` as static — determined at first render\n    const isRange = props.range.value;\n    // ── Shared helpers ────────────────────────────────────────────\n    const sliderControl = createSliderControl({\n      max: () => props.max.value,\n      min: () => props.min.value,\n      step: () => props.step.value,\n    });\n    // ── Single-value state ────────────────────────────────────────\n    const formCtx = inject(FORM_CTX, undefined);\n    const isDragging = signal(false);\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n    const labelledById = signal<string | undefined>(undefined);\n\n    mountFormContextSync(host.el, formCtx, props);\n\n    host.bind('attr', {\n      'data-dragging': () => (isDragging.value ? true : undefined),\n    });\n\n    let sliderFd:\n      | {\n          reportValidity: () => boolean;\n        }\n      | undefined;\n    const valueSignal = signal('0');\n\n    if (!isRange) {\n      sliderFd = defineField(\n        { disabled: isDisabled, value: valueSignal },\n        {\n          onReset: () => {\n            valueSignal.value = '0';\n          },\n        },\n      );\n      watch(\n        props.value,\n        (v) => {\n          valueSignal.value = String(v);\n        },\n        { immediate: true },\n      );\n      host.bind('attr', {\n        ariaDisabled: () => (isDisabled.value ? 'true' : null),\n        ariaLabelledby: () => labelledById.value ?? null,\n        ariaValuemax: () => sliderControl.max(),\n        ariaValuemin: () => sliderControl.min(),\n        ariaValuenow: () => Number(valueSignal.value || 0),\n        ariaValuetext: () => props['value-text'].value ?? null,\n        role: () => 'slider',\n        tabindex: () => (isDisabled.value ? null : '0'),\n      });\n    }\n\n    // ── Range state ───────────────────────────────────────────────\n    const startVal = signal(0);\n    const endVal = signal(100);\n\n    if (isRange) {\n      sliderFd = defineField<{\n        from: number;\n        to: number;\n      }>(\n        {\n          disabled: isDisabled,\n          toFormValue: ({ from, to }) => {\n            const name = props.name.value;\n\n            if (!name) return null;\n\n            const fd = new FormData();\n\n            fd.append(`${name}[from]`, String(from));\n            fd.append(`${name}[to]`, String(to));\n\n            return fd;\n          },\n          value: computed(() => ({ from: startVal.value, to: endVal.value })),\n        },\n        {\n          onReset: () => {\n            startVal.value = sliderControl.snap(Number(props.from.value));\n            endVal.value = sliderControl.snap(Number(props.to.value));\n          },\n        },\n      );\n      watch(\n        props.from,\n        (v) => {\n          startVal.value = sliderControl.snap(Number(v));\n        },\n        { immediate: true },\n      );\n      watch(\n        props.to,\n        (v) => {\n          endVal.value = sliderControl.snap(Number(v));\n        },\n        { immediate: true },\n      );\n    }\n\n    // ── Refs ──────────────────────────────────────────────────────\n    const containerRef = ref<HTMLDivElement>();\n    const labelRef = ref<HTMLSpanElement>();\n    const thumbStartRef = ref<HTMLDivElement>();\n    const thumbEndRef = ref<HTMLDivElement>();\n    const startId = createId('slider-start');\n    const endId = createId('slider-end');\n    // ── CSS update helpers ────────────────────────────────────────\n    const updateSingleCSS = (value: number) => {\n      const pct = sliderControl.toPercent(value);\n\n      host.el.style.setProperty('--_thumb-pos', `${pct}%`);\n      host.el.style.setProperty('--_fill-start', '0%');\n      host.el.style.setProperty('--_fill-width', `${pct}%`);\n    };\n    const updateRangeCSS = () => {\n      const s = sliderControl.toPercent(startVal.value);\n      const e = sliderControl.toPercent(endVal.value);\n\n      host.el.style.setProperty('--_thumb-start', `${s}%`);\n      host.el.style.setProperty('--_thumb-end', `${e}%`);\n      host.el.style.setProperty('--_fill-start', `${s}%`);\n      host.el.style.setProperty('--_fill-width', `${e - s}%`);\n    };\n\n    // ── Range mode setup ──────────────────────────────────────────\n    const { triggerValidation } = createValidationControl(formCtx?.validateOn, {\n      reportValidity: () => sliderFd?.reportValidity() ?? false,\n    });\n\n    const setupRangeMode = (container: HTMLDivElement) => {\n      updateRangeCSS();\n\n      const clientToValue = (clientX: number) => {\n        const rect = container.getBoundingClientRect();\n\n        return sliderControl.fromClientX(clientX, rect);\n      };\n      let dragging: 'start' | 'end' | null = null;\n      const applyDrag = (val: number) => {\n        if (dragging === 'start') startVal.value = Math.min(sliderControl.snap(val), endVal.value);\n        else if (dragging === 'end') endVal.value = Math.max(sliderControl.snap(val), startVal.value);\n\n        startVal.value = sliderControl.clamp(startVal.value);\n        endVal.value = sliderControl.clamp(endVal.value);\n        updateRangeCSS();\n        emit('change', {\n          from: startVal.value,\n          to: endVal.value,\n          value: { from: startVal.value, to: endVal.value },\n        });\n        triggerValidation('change');\n      };\n\n      handle(\n        container,\n        'pointerdown',\n        guard(\n          () => !isDisabled.value,\n          (e: PointerEvent) => {\n            e.preventDefault();\n\n            const val = clientToValue(e.clientX);\n\n            dragging = Math.abs(val - startVal.value) <= Math.abs(val - endVal.value) ? 'start' : 'end';\n            isDragging.value = true;\n            (e.target as Element).setPointerCapture(e.pointerId);\n            applyDrag(val);\n          },\n        ),\n      );\n      handle(\n        container,\n        'pointermove',\n        guard(\n          () => !!dragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            applyDrag(clientToValue(e.clientX));\n          },\n        ),\n      );\n      handle(\n        container,\n        'pointerup',\n        guard(\n          () => !!dragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            dragging = null;\n            isDragging.value = false;\n            (e.target as Element).releasePointerCapture(e.pointerId);\n          },\n        ),\n      );\n\n      const makeThumbKeydown = (getVal: () => number, setVal: (v: number) => void) => (e: KeyboardEvent) => {\n        if (isDisabled.value) return;\n\n        const next = sliderControl.nextFromKey(e.key, getVal());\n\n        if (next === null) return;\n\n        e.preventDefault();\n        setVal(sliderControl.snap(next));\n        updateRangeCSS();\n        emit('change', {\n          from: startVal.value,\n          originalEvent: e,\n          to: endVal.value,\n          value: { from: startVal.value, to: endVal.value },\n        });\n        triggerValidation('change');\n      };\n      const thumbStartEl = thumbStartRef.value;\n      const thumbEndEl = thumbEndRef.value;\n\n      if (thumbStartEl) {\n        handle(\n          thumbStartEl,\n          'keydown',\n          makeThumbKeydown(\n            () => startVal.value,\n            (v) => {\n              startVal.value = Math.min(v, endVal.value);\n            },\n          ),\n        );\n        syncAria(thumbStartEl, {\n          label: 'Range start',\n          valuemax: () => endVal.value,\n          valuemin: () => sliderControl.min(),\n          valuenow: () => startVal.value,\n          valuetext: () => props['from-value-text'].value ?? null,\n        });\n      }\n\n      if (thumbEndEl) {\n        handle(\n          thumbEndEl,\n          'keydown',\n          makeThumbKeydown(\n            () => endVal.value,\n            (v) => {\n              endVal.value = Math.max(v, startVal.value);\n            },\n          ),\n        );\n        syncAria(thumbEndEl, {\n          label: 'Range end',\n          valuemax: () => sliderControl.max(),\n          valuemin: () => startVal.value,\n          valuenow: () => endVal.value,\n          valuetext: () => props['to-value-text'].value ?? null,\n        });\n      }\n    };\n    // ── Single-value mode setup ───────────────────────────────────\n    const setupSingleMode = (container: HTMLDivElement) => {\n      updateSingleCSS(Number(valueSignal.value));\n\n      const updateValue = (clientX: number) => {\n        if (isDisabled.value) return;\n\n        const rect = container.getBoundingClientRect();\n        const newValue = sliderControl.fromClientX(clientX, rect);\n\n        if (Number(valueSignal.value) !== newValue) {\n          valueSignal.value = newValue.toString();\n          updateSingleCSS(newValue);\n          emit('change', { value: newValue });\n          triggerValidation('change');\n        }\n      };\n      let isPointerDragging = false;\n\n      handle(\n        container,\n        'pointerdown',\n        guard(\n          () => !isDisabled.value,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            isPointerDragging = true;\n            updateValue(e.clientX);\n            (e.target as Element).setPointerCapture(e.pointerId);\n          },\n        ),\n      );\n      handle(\n        container,\n        'pointermove',\n        guard(\n          () => isPointerDragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n\n            if (!isDragging.value) isDragging.value = true;\n\n            updateValue(e.clientX);\n          },\n        ),\n      );\n      handle(\n        container,\n        'pointerup',\n        guard(\n          () => isPointerDragging,\n          (e: PointerEvent) => {\n            e.preventDefault();\n            isPointerDragging = false;\n            isDragging.value = false;\n            (e.target as Element).releasePointerCapture(e.pointerId);\n          },\n        ),\n      );\n      handle(\n        host.el,\n        'keydown',\n        guard(\n          () => !isDisabled.value,\n          (e: KeyboardEvent) => {\n            const val = Number(valueSignal.value || 0);\n            const next = sliderControl.nextFromKey(e.key, val);\n\n            if (next === null) return;\n\n            e.preventDefault();\n\n            const newValue = sliderControl.clamp(next);\n\n            if (newValue !== val) {\n              valueSignal.value = newValue.toString();\n              updateSingleCSS(newValue);\n              emit('change', { originalEvent: e, value: newValue });\n              triggerValidation('change');\n            }\n          },\n        ),\n      );\n    };\n\n    onMount(() => {\n      const container = containerRef.value;\n\n      if (!container) return;\n\n      if (slots.has().value && labelRef.value) {\n        const labelId = createId('slider-label');\n\n        labelRef.value.id = labelId;\n\n        if (!isRange) labelledById.value = labelId;\n      }\n\n      if (isRange) setupRangeMode(container);\n      else setupSingleMode(container);\n    });\n\n    return html`\n      <div class=\"slider-container\" part=\"slider\" ref=${containerRef}>\n        <div class=\"slider-track\" part=\"track\">\n          <div class=\"slider-fill\" part=\"fill\"></div>\n          <div class=\"slider-thumb slider-thumb-sole\" part=\"thumb\"></div>\n          <div\n            class=\"slider-thumb slider-thumb-start\"\n            part=\"thumb-start\"\n            ref=${thumbStartRef}\n            role=\"slider\"\n            tabindex=\"${() => (isDisabled.value ? '-1' : '0')}\"\n            id=\"${startId}\"></div>\n          <div\n            class=\"slider-thumb slider-thumb-end\"\n            part=\"thumb-end\"\n            ref=${thumbEndRef}\n            role=\"slider\"\n            tabindex=\"${() => (isDisabled.value ? '-1' : '0')}\"\n            id=\"${endId}\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" ref=${labelRef}><slot></slot></span>\n    `;\n  },\n  styles: [\n    disabledStateMixin(),\n    colorThemeMixin,\n    sizeVariantMixin(SLIDER_SIZE_PRESET),\n    componentStyles,\n    coarsePointerMixin,\n  ],\n});\n"],"mappings":"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"}

package/dist/switch.cjs

@@ -1,16 +1,16 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/shape.css.cjs`),t=require(`./styles/index.cjs`),n=require(`./craftit/dist/labs/a11y.cjs`),r=require(`./craftit/dist/labs/selectable.cjs`);require(`./craftit/dist/labs.cjs`);const i=require(`./inputs/shared/dom-sync/form-context.cjs`);require(`./inputs/shared/dom-sync/index.cjs`);const a=require(`./inputs/shared/composables/use-toggle-field.cjs`);require(`./inputs/shared/composables/index.cjs`);const o=require(`./inputs/shared/design-presets.cjs`),s=require(`./inputs/switch/switch.css?inline.cjs`);let c=require(`@vielzeug/craftit`);var l=(0,c.defineComponent)({formAssociated:!0,props:{checked:{default:!1},color:{default:void 0},disabled:{default:!1},error:{default:``},helper:{default:``},name:{default:``},size:{default:void 0},value:{default:`on`}},setup({emit:e,host:t,props:o,reflect:s}){let{checkedSignal:l,formCtx:u,triggerValidation:d}=a.useToggleField(o);i.mountFormContextSync(t,u,o);let f=r.t({checked:l,clearIndeterminateFirst:!1,disabled:o.disabled,onToggle:t=>{d(`change`),e(`change`,f.changePayload(t))},value:o.value}),p=n.r(t,{checked:()=>f.checked.value?`true`:`false`,helperText:()=>o.error.value||o.helper.value,helperTone:()=>o.error.value?`error`:`default`,invalid:()=>!!o.error.value,role:`switch`});return s({checked:()=>f.checked.value,classMap:()=>({"is-checked":f.checked.value,"is-disabled":!!o.disabled.value}),onClick:e=>f.toggle(e),onKeydown:e=>{let t=e;(t.key===` `||t.key===`Enter`)&&(t.preventDefault(),f.toggle(e))},tabindex:()=>o.disabled.value?void 0:0}),c.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./inputs/shared/bundles.cjs`),t=require(`./styles/mixins/shape.css.cjs`),n=require(`./styles/index.cjs`),r=require(`./packages/craftit/dist/controls/checkable-control.cjs`);require(`./packages/craftit/dist/controls.cjs`);const i=require(`./inputs/shared/form-context.cjs`),a=require(`./inputs/shared/dom-sync/form-context.cjs`);require(`./inputs/shared/dom-sync/index.cjs`);const o=require(`./inputs/shared/design-presets.cjs`),s=require(`./inputs/switch/switch.css?inline.cjs`);let c=require(`@vielzeug/craftit`);var l={...e.themableBundle,...e.sizableBundle,...e.disablableBundle,checked:!1,error:``,helper:``,name:``,value:`on`},u=(0,c.define)(`bit-switch`,{formAssociated:!0,props:l,setup({emit:e,host:t,props:n}){let o=(0,c.inject)(i.FORM_CTX,void 0),s=r.r({checked:n.checked,clearIndeterminateFirst:!1,disabled:(0,c.computed)(()=>!!n.disabled.value||!!o?.disabled.value),error:n.error,helper:n.helper,host:t.el,onToggle:t=>{s.control.triggerValidation(`change`),e(`change`,t)},prefix:`switch`,role:`switch`,validateOn:o?.validateOn,value:n.value}),{a11y:l,control:u,press:d}=s;return a.mountFormContextSync(t.el,o,n),t.bind(`class`,()=>({"is-checked":u.checked.value,"is-disabled":u.disabled.value})),t.bind(`attr`,{checked:()=>u.checked.value,tabindex:()=>u.disabled.value?void 0:0}),t.bind(`on`,{click:e=>{d.handleClick(e)},keydown:e=>{d.handleKeydown(e)}}),c.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" data-a11y-label id="${p.labelId}"><slot></slot></span>
+      <span class="label" part="label" data-a11y-label id="${l.labelId}"><slot></slot></span>
       <div
         class="helper-text"
         part="helper-text"
         data-a11y-helper
-        id="${p.helperId}"
+        id="${l.helperId}"
         aria-live="polite"
         hidden></div>
-    `},styles:[...t.formControlMixins,e.sizeVariantMixin(o.SWITCH_SIZE_PRESET),s.default],tag:`bit-switch`});exports.SWITCH_TAG=l;
+    `},styles:[...n.formControlMixins,t.sizeVariantMixin(o.SWITCH_SIZE_PRESET),s.default]});exports.SWITCH_TAG=u;
 //# 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 { defineComponent, html } from '@vielzeug/craftit';\nimport { useA11yControl, createCheckableControl } from '@vielzeug/craftit/labs';\n\nimport type { CheckableProps, DisablableProps, SizableProps, ThemableProps } from '../../types';\n\nimport { formControlMixins, sizeVariantMixin } from '../../styles';\nimport { useToggleField } from '../shared/composables';\nimport { SWITCH_SIZE_PRESET } from '../shared/design-presets';\nimport { mountFormContextSync } from '../shared/dom-sync';\nimport componentStyles from './switch.css?inline';\n\nexport type BitSwitchEvents = {\n  change: { checked: boolean; originalEvent?: Event; value: boolean };\n};\n\nexport type BitSwitchProps = CheckableProps &\n  ThemableProps &\n  SizableProps &\n  DisablableProps & {\n    /** Error message (marks field as invalid) */\n    error?: string;\n    /** Helper text displayed below the switch */\n    helper?: string;\n  };\n\n/**\n * A toggle switch component for binary on/off states.\n *\n * @element bit-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: { value: boolean, checked: boolean, originalEvent?: Event }\n *\n * @slot - Switch label text\n *\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 */\nexport const SWITCH_TAG = defineComponent<BitSwitchProps, BitSwitchEvents>({\n  formAssociated: true,\n  props: {\n    checked: { default: false },\n    color: { default: undefined },\n    disabled: { default: false },\n    error: { default: '' },\n    helper: { default: '' },\n    name: { default: '' },\n    size: { default: undefined },\n    value: { default: 'on' },\n  },\n  setup({ emit, host, props, reflect }) {\n    const { checkedSignal, formCtx, triggerValidation } = useToggleField(props);\n\n    mountFormContextSync(host, formCtx, props);\n\n    // Pass writable checkedSignal directly — toggle() mutates it in place\n    const control = createCheckableControl({\n      checked: checkedSignal,\n      clearIndeterminateFirst: false,\n      disabled: props.disabled,\n      onToggle: (e) => {\n        triggerValidation('change');\n        emit('change', control.changePayload(e));\n      },\n      value: props.value,\n    });\n\n    const a11y = useA11yControl(host, {\n      checked: () => (control.checked.value ? 'true' : 'false'),\n      helperText: () => props.error.value || props.helper.value,\n      helperTone: () => (props.error.value ? 'error' : 'default'),\n      invalid: () => !!props.error.value,\n      role: 'switch',\n    });\n\n    reflect({\n      checked: () => control.checked.value,\n      classMap: () => ({\n        'is-checked': control.checked.value,\n        'is-disabled': !!props.disabled.value,\n      }),\n      onClick: (e: Event) => control.toggle(e),\n      onKeydown: (e: Event) => {\n        const ke = e as KeyboardEvent;\n\n        if (ke.key === ' ' || ke.key === 'Enter') {\n          ke.preventDefault();\n          control.toggle(e);\n        }\n      },\n      tabindex: () => (props.disabled.value ? undefined : 0),\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\" data-a11y-label id=\"${a11y.labelId}\"><slot></slot></span>\n      <div\n        class=\"helper-text\"\n        part=\"helper-text\"\n        data-a11y-helper\n        id=\"${a11y.helperId}\"\n        aria-live=\"polite\"\n        hidden></div>\n    `;\n  },\n  styles: [...formControlMixins, sizeVariantMixin(SWITCH_SIZE_PRESET), componentStyles],\n  tag: 'bit-switch',\n});\n"],"mappings":"6nBAiDA,IAAa,GAAA,EAAA,EAAA,iBAA8D,CACzE,eAAgB,GAChB,MAAO,CACL,QAAS,CAAE,QAAS,GAAO,CAC3B,MAAO,CAAE,QAAS,IAAA,GAAW,CAC7B,SAAU,CAAE,QAAS,GAAO,CAC5B,MAAO,CAAE,QAAS,GAAI,CACtB,OAAQ,CAAE,QAAS,GAAI,CACvB,KAAM,CAAE,QAAS,GAAI,CACrB,KAAM,CAAE,QAAS,IAAA,GAAW,CAC5B,MAAO,CAAE,QAAS,KAAM,CACzB,CACD,MAAM,CAAE,OAAM,OAAM,QAAO,WAAW,CACpC,GAAM,CAAE,gBAAe,UAAS,qBAAsB,EAAA,eAAe,EAAM,CAE3E,EAAA,qBAAqB,EAAM,EAAS,EAAM,CAG1C,IAAM,EAAU,EAAA,EAAuB,CACrC,QAAS,EACT,wBAAyB,GACzB,SAAU,EAAM,SAChB,SAAW,GAAM,CACf,EAAkB,SAAS,CAC3B,EAAK,SAAU,EAAQ,cAAc,EAAE,CAAC,EAE1C,MAAO,EAAM,MACd,CAAC,CAEI,EAAO,EAAA,EAAe,EAAM,CAChC,YAAgB,EAAQ,QAAQ,MAAQ,OAAS,QACjD,eAAkB,EAAM,MAAM,OAAS,EAAM,OAAO,MACpD,eAAmB,EAAM,MAAM,MAAQ,QAAU,UACjD,YAAe,CAAC,CAAC,EAAM,MAAM,MAC7B,KAAM,SACP,CAAC,CAoBF,OAlBA,EAAQ,CACN,YAAe,EAAQ,QAAQ,MAC/B,cAAiB,CACf,aAAc,EAAQ,QAAQ,MAC9B,cAAe,CAAC,CAAC,EAAM,SAAS,MACjC,EACD,QAAU,GAAa,EAAQ,OAAO,EAAE,CACxC,UAAY,GAAa,CACvB,IAAM,EAAK,GAEP,EAAG,MAAQ,KAAO,EAAG,MAAQ,WAC/B,EAAG,gBAAgB,CACnB,EAAQ,OAAO,EAAE,GAGrB,aAAiB,EAAM,SAAS,MAAQ,IAAA,GAAY,EACrD,CAAC,CAEK,EAAA,IAAI;;;;;;6DAM8C,EAAK,QAAQ;;;;;cAK5D,EAAK,SAAS;;;OAK1B,OAAQ,CAAC,GAAG,EAAA,kBAAmB,EAAA,iBAAiB,EAAA,mBAAmB,CAAE,EAAA,QAAgB,CACrF,IAAK,aACN,CAAC"}
+{"version":3,"file":"switch.cjs","names":[],"sources":["../src/inputs/switch/switch.ts"],"sourcesContent":["import { define, computed, html, inject } from '@vielzeug/craftit';\nimport { type CheckableChangePayload, createCheckableFieldControl } from '@vielzeug/craftit/controls';\n\nimport type { CheckableProps, DisablableProps, SizableProps, ThemableProps } from '../../types';\n\nimport { formControlMixins, sizeVariantMixin } from '../../styles';\nimport { disablableBundle, type PropBundle, sizableBundle, themableBundle } from '../shared/bundles';\nimport { SWITCH_SIZE_PRESET } from '../shared/design-presets';\nimport { mountFormContextSync } from '../shared/dom-sync';\nimport { FORM_CTX } from '../shared/form-context';\nimport componentStyles from './switch.css?inline';\n\nexport type BitSwitchEvents = {\n  change: CheckableChangePayload;\n};\n\nexport type BitSwitchProps = CheckableProps &\n  ThemableProps &\n  SizableProps &\n  DisablableProps & {\n    /** Error message (marks field as invalid) */\n    error?: string;\n    /** Helper text displayed below the switch */\n    helper?: string;\n  };\n\nconst switchProps = {\n  ...themableBundle,\n  ...sizableBundle,\n  ...disablableBundle,\n  checked: false,\n  error: '',\n  helper: '',\n  name: '',\n  value: 'on',\n} satisfies PropBundle<BitSwitchProps>;\n\n/**\n * A toggle switch component for binary on/off states.\n *\n * @element bit-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, fieldValue: string, originalEvent?: Event }\n *\n * @slot - Switch label text\n *\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 */\nexport const SWITCH_TAG = define<BitSwitchProps, BitSwitchEvents>('bit-switch', {\n  formAssociated: true,\n  props: switchProps,\n  setup({ emit, host, props }) {\n    const formCtx = inject(FORM_CTX, undefined);\n\n    const checkable = createCheckableFieldControl({\n      checked: props.checked,\n      clearIndeterminateFirst: false,\n      disabled: computed(() => Boolean(props.disabled.value) || Boolean(formCtx?.disabled.value)),\n      error: props.error,\n      helper: props.helper,\n      host: host.el,\n      onToggle: (payload) => {\n        checkable.control.triggerValidation('change');\n        emit('change', payload);\n      },\n      prefix: 'switch',\n      role: 'switch',\n      validateOn: formCtx?.validateOn,\n      value: props.value,\n    });\n    const { a11y, control, press: pressControl } = checkable;\n\n    mountFormContextSync(host.el, formCtx, props);\n\n    host.bind('class', () => ({\n      'is-checked': control.checked.value,\n      'is-disabled': control.disabled.value,\n    }));\n\n    host.bind('attr', {\n      checked: () => control.checked.value,\n      tabindex: () => (control.disabled.value ? undefined : 0),\n    });\n    host.bind('on', {\n      click: (e) => {\n        pressControl.handleClick(e);\n      },\n      keydown: (e) => {\n        pressControl.handleKeydown(e);\n      },\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\" data-a11y-label id=\"${a11y.labelId}\"><slot></slot></span>\n      <div\n        class=\"helper-text\"\n        part=\"helper-text\"\n        data-a11y-helper\n        id=\"${a11y.helperId}\"\n        aria-live=\"polite\"\n        hidden></div>\n    `;\n  },\n  styles: [...formControlMixins, sizeVariantMixin(SWITCH_SIZE_PRESET), componentStyles],\n});\n"],"mappings":"slBA0BA,IAAM,EAAc,CAClB,GAAG,EAAA,eACH,GAAG,EAAA,cACH,GAAG,EAAA,iBACH,QAAS,GACT,MAAO,GACP,OAAQ,GACR,KAAM,GACN,MAAO,KACR,CA0BY,GAAA,EAAA,EAAA,QAAqD,aAAc,CAC9E,eAAgB,GAChB,MAAO,EACP,MAAM,CAAE,OAAM,OAAM,SAAS,CAC3B,IAAM,GAAA,EAAA,EAAA,QAAiB,EAAA,SAAU,IAAA,GAAU,CAErC,EAAY,EAAA,EAA4B,CAC5C,QAAS,EAAM,QACf,wBAAyB,GACzB,UAAA,EAAA,EAAA,cAAyB,EAAQ,EAAM,SAAS,OAAU,EAAQ,GAAS,SAAS,MAAO,CAC3F,MAAO,EAAM,MACb,OAAQ,EAAM,OACd,KAAM,EAAK,GACX,SAAW,GAAY,CACrB,EAAU,QAAQ,kBAAkB,SAAS,CAC7C,EAAK,SAAU,EAAQ,EAEzB,OAAQ,SACR,KAAM,SACN,WAAY,GAAS,WACrB,MAAO,EAAM,MACd,CAAC,CACI,CAAE,OAAM,UAAS,MAAO,GAAiB,EAsB/C,OApBA,EAAA,qBAAqB,EAAK,GAAI,EAAS,EAAM,CAE7C,EAAK,KAAK,aAAgB,CACxB,aAAc,EAAQ,QAAQ,MAC9B,cAAe,EAAQ,SAAS,MACjC,EAAE,CAEH,EAAK,KAAK,OAAQ,CAChB,YAAe,EAAQ,QAAQ,MAC/B,aAAiB,EAAQ,SAAS,MAAQ,IAAA,GAAY,EACvD,CAAC,CACF,EAAK,KAAK,KAAM,CACd,MAAQ,GAAM,CACZ,EAAa,YAAY,EAAE,EAE7B,QAAU,GAAM,CACd,EAAa,cAAc,EAAE,EAEhC,CAAC,CAEK,EAAA,IAAI;;;;;;6DAM8C,EAAK,QAAQ;;;;;cAK5D,EAAK,SAAS;;;OAK1B,OAAQ,CAAC,GAAG,EAAA,kBAAmB,EAAA,iBAAiB,EAAA,mBAAmB,CAAE,EAAA,QAAgB,CACtF,CAAC"}

package/dist/switch.js

@@ -1,82 +1,78 @@
-import { sizeVariantMixin as e } from "./styles/mixins/shape.css.js";
-import { formControlMixins as t } from "./styles/index.js";
-import { r as n } from "./craftit/dist/labs/a11y.js";
-import { t as r } from "./craftit/dist/labs/selectable.js";
-import "./craftit/dist/labs.js";
-import { mountFormContextSync as i } from "./inputs/shared/dom-sync/form-context.js";
+import { disablableBundle as e, sizableBundle as t, themableBundle as n } from "./inputs/shared/bundles.js";
+import { sizeVariantMixin as r } from "./styles/mixins/shape.css.js";
+import { formControlMixins as i } from "./styles/index.js";
+import { r as a } from "./packages/craftit/dist/controls/checkable-control.js";
+import "./packages/craftit/dist/controls.js";
+import { FORM_CTX as o } from "./inputs/shared/form-context.js";
+import { mountFormContextSync as s } from "./inputs/shared/dom-sync/form-context.js";
 import "./inputs/shared/dom-sync/index.js";
-import { useToggleField as a } from "./inputs/shared/composables/use-toggle-field.js";
-import "./inputs/shared/composables/index.js";
-import { SWITCH_SIZE_PRESET as o } from "./inputs/shared/design-presets.js";
-import s from "./inputs/switch/switch.css?inline.js";
-import { defineComponent as c, html as l } from "@vielzeug/craftit";
-//#region src/inputs/switch/switch.ts
-var u = c({
+import { SWITCH_SIZE_PRESET as c } from "./inputs/shared/design-presets.js";
+import l from "./inputs/switch/switch.css?inline.js";
+import { computed as u, define as d, html as f, inject as p } from "@vielzeug/craftit";
+var m = d("bit-switch", {
 	formAssociated: !0,
 	props: {
-		checked: { default: !1 },
-		color: { default: void 0 },
-		disabled: { default: !1 },
-		error: { default: "" },
-		helper: { default: "" },
-		name: { default: "" },
-		size: { default: void 0 },
-		value: { default: "on" }
+		...n,
+		...t,
+		...e,
+		checked: !1,
+		error: "",
+		helper: "",
+		name: "",
+		value: "on"
 	},
-	setup({ emit: e, host: t, props: o, reflect: s }) {
-		let { checkedSignal: c, formCtx: u, triggerValidation: d } = a(o);
-		i(t, u, o);
-		let f = r({
-			checked: c,
+	setup({ emit: e, host: t, props: n }) {
+		let r = p(o, void 0), i = a({
+			checked: n.checked,
 			clearIndeterminateFirst: !1,
-			disabled: o.disabled,
+			disabled: u(() => !!n.disabled.value || !!r?.disabled.value),
+			error: n.error,
+			helper: n.helper,
+			host: t.el,
 			onToggle: (t) => {
-				d("change"), e("change", f.changePayload(t));
+				i.control.triggerValidation("change"), e("change", t);
 			},
-			value: o.value
-		}), p = n(t, {
-			checked: () => f.checked.value ? "true" : "false",
-			helperText: () => o.error.value || o.helper.value,
-			helperTone: () => o.error.value ? "error" : "default",
-			invalid: () => !!o.error.value,
-			role: "switch"
-		});
-		return s({
-			checked: () => f.checked.value,
-			classMap: () => ({
-				"is-checked": f.checked.value,
-				"is-disabled": !!o.disabled.value
-			}),
-			onClick: (e) => f.toggle(e),
-			onKeydown: (e) => {
-				let t = e;
-				(t.key === " " || t.key === "Enter") && (t.preventDefault(), f.toggle(e));
+			prefix: "switch",
+			role: "switch",
+			validateOn: r?.validateOn,
+			value: n.value
+		}), { a11y: c, control: l, press: d } = i;
+		return s(t.el, r, n), t.bind("class", () => ({
+			"is-checked": l.checked.value,
+			"is-disabled": l.disabled.value
+		})), t.bind("attr", {
+			checked: () => l.checked.value,
+			tabindex: () => l.disabled.value ? void 0 : 0
+		}), t.bind("on", {
+			click: (e) => {
+				d.handleClick(e);
 			},
-			tabindex: () => o.disabled.value ? void 0 : 0
-		}), l`
+			keydown: (e) => {
+				d.handleKeydown(e);
+			}
+		}), f`
       <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" data-a11y-label id="${p.labelId}"><slot></slot></span>
+      <span class="label" part="label" data-a11y-label id="${c.labelId}"><slot></slot></span>
       <div
         class="helper-text"
         part="helper-text"
         data-a11y-helper
-        id="${p.helperId}"
+        id="${c.helperId}"
         aria-live="polite"
         hidden></div>
     `;
 	},
 	styles: [
-		...t,
-		e(o),
-		s
-	],
-	tag: "bit-switch"
+		...i,
+		r(c),
+		l
+	]
 });
 //#endregion
-export { u as SWITCH_TAG };
+export { m 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 { defineComponent, html } from '@vielzeug/craftit';\nimport { useA11yControl, createCheckableControl } from '@vielzeug/craftit/labs';\n\nimport type { CheckableProps, DisablableProps, SizableProps, ThemableProps } from '../../types';\n\nimport { formControlMixins, sizeVariantMixin } from '../../styles';\nimport { useToggleField } from '../shared/composables';\nimport { SWITCH_SIZE_PRESET } from '../shared/design-presets';\nimport { mountFormContextSync } from '../shared/dom-sync';\nimport componentStyles from './switch.css?inline';\n\nexport type BitSwitchEvents = {\n  change: { checked: boolean; originalEvent?: Event; value: boolean };\n};\n\nexport type BitSwitchProps = CheckableProps &\n  ThemableProps &\n  SizableProps &\n  DisablableProps & {\n    /** Error message (marks field as invalid) */\n    error?: string;\n    /** Helper text displayed below the switch */\n    helper?: string;\n  };\n\n/**\n * A toggle switch component for binary on/off states.\n *\n * @element bit-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: { value: boolean, checked: boolean, originalEvent?: Event }\n *\n * @slot - Switch label text\n *\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 */\nexport const SWITCH_TAG = defineComponent<BitSwitchProps, BitSwitchEvents>({\n  formAssociated: true,\n  props: {\n    checked: { default: false },\n    color: { default: undefined },\n    disabled: { default: false },\n    error: { default: '' },\n    helper: { default: '' },\n    name: { default: '' },\n    size: { default: undefined },\n    value: { default: 'on' },\n  },\n  setup({ emit, host, props, reflect }) {\n    const { checkedSignal, formCtx, triggerValidation } = useToggleField(props);\n\n    mountFormContextSync(host, formCtx, props);\n\n    // Pass writable checkedSignal directly — toggle() mutates it in place\n    const control = createCheckableControl({\n      checked: checkedSignal,\n      clearIndeterminateFirst: false,\n      disabled: props.disabled,\n      onToggle: (e) => {\n        triggerValidation('change');\n        emit('change', control.changePayload(e));\n      },\n      value: props.value,\n    });\n\n    const a11y = useA11yControl(host, {\n      checked: () => (control.checked.value ? 'true' : 'false'),\n      helperText: () => props.error.value || props.helper.value,\n      helperTone: () => (props.error.value ? 'error' : 'default'),\n      invalid: () => !!props.error.value,\n      role: 'switch',\n    });\n\n    reflect({\n      checked: () => control.checked.value,\n      classMap: () => ({\n        'is-checked': control.checked.value,\n        'is-disabled': !!props.disabled.value,\n      }),\n      onClick: (e: Event) => control.toggle(e),\n      onKeydown: (e: Event) => {\n        const ke = e as KeyboardEvent;\n\n        if (ke.key === ' ' || ke.key === 'Enter') {\n          ke.preventDefault();\n          control.toggle(e);\n        }\n      },\n      tabindex: () => (props.disabled.value ? undefined : 0),\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\" data-a11y-label id=\"${a11y.labelId}\"><slot></slot></span>\n      <div\n        class=\"helper-text\"\n        part=\"helper-text\"\n        data-a11y-helper\n        id=\"${a11y.helperId}\"\n        aria-live=\"polite\"\n        hidden></div>\n    `;\n  },\n  styles: [...formControlMixins, sizeVariantMixin(SWITCH_SIZE_PRESET), componentStyles],\n  tag: 'bit-switch',\n});\n"],"mappings":";;;;;;;;;;;;;AAiDA,IAAa,IAAa,EAAiD;CACzE,gBAAgB;CAChB,OAAO;EACL,SAAS,EAAE,SAAS,IAAO;EAC3B,OAAO,EAAE,SAAS,KAAA,GAAW;EAC7B,UAAU,EAAE,SAAS,IAAO;EAC5B,OAAO,EAAE,SAAS,IAAI;EACtB,QAAQ,EAAE,SAAS,IAAI;EACvB,MAAM,EAAE,SAAS,IAAI;EACrB,MAAM,EAAE,SAAS,KAAA,GAAW;EAC5B,OAAO,EAAE,SAAS,MAAM;EACzB;CACD,MAAM,EAAE,SAAM,SAAM,UAAO,cAAW;EACpC,IAAM,EAAE,kBAAe,YAAS,yBAAsB,EAAe,EAAM;AAE3E,IAAqB,GAAM,GAAS,EAAM;EAG1C,IAAM,IAAU,EAAuB;GACrC,SAAS;GACT,yBAAyB;GACzB,UAAU,EAAM;GAChB,WAAW,MAAM;AAEf,IADA,EAAkB,SAAS,EAC3B,EAAK,UAAU,EAAQ,cAAc,EAAE,CAAC;;GAE1C,OAAO,EAAM;GACd,CAAC,EAEI,IAAO,EAAe,GAAM;GAChC,eAAgB,EAAQ,QAAQ,QAAQ,SAAS;GACjD,kBAAkB,EAAM,MAAM,SAAS,EAAM,OAAO;GACpD,kBAAmB,EAAM,MAAM,QAAQ,UAAU;GACjD,eAAe,CAAC,CAAC,EAAM,MAAM;GAC7B,MAAM;GACP,CAAC;AAoBF,SAlBA,EAAQ;GACN,eAAe,EAAQ,QAAQ;GAC/B,iBAAiB;IACf,cAAc,EAAQ,QAAQ;IAC9B,eAAe,CAAC,CAAC,EAAM,SAAS;IACjC;GACD,UAAU,MAAa,EAAQ,OAAO,EAAE;GACxC,YAAY,MAAa;IACvB,IAAM,IAAK;AAEX,KAAI,EAAG,QAAQ,OAAO,EAAG,QAAQ,aAC/B,EAAG,gBAAgB,EACnB,EAAQ,OAAO,EAAE;;GAGrB,gBAAiB,EAAM,SAAS,QAAQ,KAAA,IAAY;GACrD,CAAC,EAEK,CAAI;;;;;;6DAM8C,EAAK,QAAQ;;;;;cAK5D,EAAK,SAAS;;;;;CAK1B,QAAQ;EAAC,GAAG;EAAmB,EAAiB,EAAmB;EAAE;EAAgB;CACrF,KAAK;CACN,CAAC"}
+{"version":3,"file":"switch.js","names":[],"sources":["../src/inputs/switch/switch.ts"],"sourcesContent":["import { define, computed, html, inject } from '@vielzeug/craftit';\nimport { type CheckableChangePayload, createCheckableFieldControl } from '@vielzeug/craftit/controls';\n\nimport type { CheckableProps, DisablableProps, SizableProps, ThemableProps } from '../../types';\n\nimport { formControlMixins, sizeVariantMixin } from '../../styles';\nimport { disablableBundle, type PropBundle, sizableBundle, themableBundle } from '../shared/bundles';\nimport { SWITCH_SIZE_PRESET } from '../shared/design-presets';\nimport { mountFormContextSync } from '../shared/dom-sync';\nimport { FORM_CTX } from '../shared/form-context';\nimport componentStyles from './switch.css?inline';\n\nexport type BitSwitchEvents = {\n  change: CheckableChangePayload;\n};\n\nexport type BitSwitchProps = CheckableProps &\n  ThemableProps &\n  SizableProps &\n  DisablableProps & {\n    /** Error message (marks field as invalid) */\n    error?: string;\n    /** Helper text displayed below the switch */\n    helper?: string;\n  };\n\nconst switchProps = {\n  ...themableBundle,\n  ...sizableBundle,\n  ...disablableBundle,\n  checked: false,\n  error: '',\n  helper: '',\n  name: '',\n  value: 'on',\n} satisfies PropBundle<BitSwitchProps>;\n\n/**\n * A toggle switch component for binary on/off states.\n *\n * @element bit-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, fieldValue: string, originalEvent?: Event }\n *\n * @slot - Switch label text\n *\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 */\nexport const SWITCH_TAG = define<BitSwitchProps, BitSwitchEvents>('bit-switch', {\n  formAssociated: true,\n  props: switchProps,\n  setup({ emit, host, props }) {\n    const formCtx = inject(FORM_CTX, undefined);\n\n    const checkable = createCheckableFieldControl({\n      checked: props.checked,\n      clearIndeterminateFirst: false,\n      disabled: computed(() => Boolean(props.disabled.value) || Boolean(formCtx?.disabled.value)),\n      error: props.error,\n      helper: props.helper,\n      host: host.el,\n      onToggle: (payload) => {\n        checkable.control.triggerValidation('change');\n        emit('change', payload);\n      },\n      prefix: 'switch',\n      role: 'switch',\n      validateOn: formCtx?.validateOn,\n      value: props.value,\n    });\n    const { a11y, control, press: pressControl } = checkable;\n\n    mountFormContextSync(host.el, formCtx, props);\n\n    host.bind('class', () => ({\n      'is-checked': control.checked.value,\n      'is-disabled': control.disabled.value,\n    }));\n\n    host.bind('attr', {\n      checked: () => control.checked.value,\n      tabindex: () => (control.disabled.value ? undefined : 0),\n    });\n    host.bind('on', {\n      click: (e) => {\n        pressControl.handleClick(e);\n      },\n      keydown: (e) => {\n        pressControl.handleKeydown(e);\n      },\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\" data-a11y-label id=\"${a11y.labelId}\"><slot></slot></span>\n      <div\n        class=\"helper-text\"\n        part=\"helper-text\"\n        data-a11y-helper\n        id=\"${a11y.helperId}\"\n        aria-live=\"polite\"\n        hidden></div>\n    `;\n  },\n  styles: [...formControlMixins, sizeVariantMixin(SWITCH_SIZE_PRESET), componentStyles],\n});\n"],"mappings":";;;;;;;;;;;AA6DA,IAAa,IAAa,EAAwC,cAAc;CAC9E,gBAAgB;CAChB,OArCkB;EAClB,GAAG;EACH,GAAG;EACH,GAAG;EACH,SAAS;EACT,OAAO;EACP,QAAQ;EACR,MAAM;EACN,OAAO;EACR;CA6BC,MAAM,EAAE,SAAM,SAAM,YAAS;EAC3B,IAAM,IAAU,EAAO,GAAU,KAAA,EAAU,EAErC,IAAY,EAA4B;GAC5C,SAAS,EAAM;GACf,yBAAyB;GACzB,UAAU,QAAe,EAAQ,EAAM,SAAS,SAAU,EAAQ,GAAS,SAAS,MAAO;GAC3F,OAAO,EAAM;GACb,QAAQ,EAAM;GACd,MAAM,EAAK;GACX,WAAW,MAAY;AAErB,IADA,EAAU,QAAQ,kBAAkB,SAAS,EAC7C,EAAK,UAAU,EAAQ;;GAEzB,QAAQ;GACR,MAAM;GACN,YAAY,GAAS;GACrB,OAAO,EAAM;GACd,CAAC,EACI,EAAE,SAAM,YAAS,OAAO,MAAiB;AAsB/C,SApBA,EAAqB,EAAK,IAAI,GAAS,EAAM,EAE7C,EAAK,KAAK,gBAAgB;GACxB,cAAc,EAAQ,QAAQ;GAC9B,eAAe,EAAQ,SAAS;GACjC,EAAE,EAEH,EAAK,KAAK,QAAQ;GAChB,eAAe,EAAQ,QAAQ;GAC/B,gBAAiB,EAAQ,SAAS,QAAQ,KAAA,IAAY;GACvD,CAAC,EACF,EAAK,KAAK,MAAM;GACd,QAAQ,MAAM;AACZ,MAAa,YAAY,EAAE;;GAE7B,UAAU,MAAM;AACd,MAAa,cAAc,EAAE;;GAEhC,CAAC,EAEK,CAAI;;;;;;6DAM8C,EAAK,QAAQ;;;;;cAK5D,EAAK,SAAS;;;;;CAK1B,QAAQ;EAAC,GAAG;EAAmB,EAAiB,EAAmB;EAAE;EAAgB;CACtF,CAAC"}

package/dist/tab-item.cjs

@@ -1,17 +1,17 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/accessibility.css.cjs`),t=require(`./styles/mixins/theme.css.cjs`);require(`./styles/index.cjs`);const n=require(`./tabs.cjs`),r=require(`./disclosure/tab-item/tab-item.css?inline.cjs`);let i=require(`@vielzeug/craftit`);var a=(0,i.defineComponent)({props:{active:(0,i.typed)(!1),color:(0,i.typed)(void 0),disabled:(0,i.typed)(!1),size:(0,i.typed)(void 0),value:(0,i.typed)(``),variant:(0,i.typed)(void 0)},setup({host:e,props:t}){let r=(0,i.inject)(n.TABS_CTX,void 0);(0,i.syncContextProps)(r,t,[`color`,`size`,`variant`]);let a=r?(0,i.computed)(()=>!!r.value.value&&r.value.value===t.value.value):t.active;(0,i.effect)(()=>{e.toggleAttribute(`active`,a.value)});let o=(0,i.computed)(()=>String(a.value)),s=(0,i.computed)(()=>a.value?`0`:`-1`);return i.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/accessibility.css.cjs`),t=require(`./styles/mixins/theme.css.cjs`);require(`./styles/index.cjs`);const n=require(`./tabs.cjs`),r=require(`./disclosure/tab-item/tab-item.css?inline.cjs`);let i=require(`@vielzeug/craftit`);var a=(0,i.define)(`bit-tab-item`,{props:{active:!1,color:void 0,disabled:!1,size:void 0,value:``,variant:void 0},setup({host:e,props:t}){let r=(0,i.inject)(n.TABS_CTX,void 0);(0,i.syncContextProps)(r,t,[`color`,`size`,`variant`]);let a=(0,i.computed)(()=>r?!!r.value.value&&r.value.value===t.value.value:t.active.value),o=(0,i.computed)(()=>!!t.disabled.value);e.bind(`attr`,{active:()=>a.value?!0:void 0});let s=(0,i.computed)(()=>String(a.value)),c=(0,i.computed)(()=>String(o.value)),l=(0,i.computed)(()=>a.value?`0`:`-1`);return i.html`
       <button
         role="tab"
         type="button"
         part="tab"
         :id="${()=>`tab-${t.value.value}`}"
-        :aria-selected=${o}
-        :tabindex=${s}
-        :aria-disabled=${(0,i.computed)(()=>String(t.disabled.value))}
+        :aria-selected=${s}
+        :tabindex=${l}
+        :aria-disabled=${c}
         :aria-controls="${()=>`tabpanel-${t.value.value}`}"
-        @click=${()=>{t.disabled.value||i.fire.custom(e,`click`,{detail:{value:t.value.value}})}}>
+        @click=${n=>{if(n.stopPropagation(),o.value){n.preventDefault();return}i.fire.custom(e.el,`click`,{detail:{value:t.value.value}})}}>
         <slot name="prefix"></slot>
         <slot></slot>
         <slot name="suffix"></slot>
       </button>
-    `},styles:[t.colorThemeMixin,t.forcedColorsFocusMixin(`button`),e.coarsePointerMixin,r.default],tag:`bit-tab-item`});exports.TAB_ITEM_TAG=a;
+    `},styles:[t.colorThemeMixin,t.forcedColorsFocusMixin(`button`),e.coarsePointerMixin,r.default]});exports.TAB_ITEM_TAG=a;
 //# sourceMappingURL=tab-item.cjs.map

package/dist/tab-item.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tab-item.cjs","names":[],"sources":["../src/disclosure/tab-item/tab-item.ts"],"sourcesContent":["import { computed, defineComponent, effect, fire, html, typed, inject, syncContextProps } from '@vielzeug/craftit';\n\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { coarsePointerMixin, colorThemeMixin, forcedColorsFocusMixin } from '../../styles';\nimport { TABS_CTX } from '../tabs/tabs';\nimport styles from './tab-item.css?inline';\n\nexport type BitTabItemProps = {\n  /** Whether this tab is currently selected (set by bit-tabs) */\n  active?: boolean;\n  /** Theme color (inherited from bit-tabs) */\n  color?: ThemeColor;\n  /** Disable this tab */\n  disabled?: boolean;\n  /** Size (inherited from bit-tabs) */\n  size?: ComponentSize;\n  /** Unique value identifier — must match a bit-tab-panel value */\n  value: string;\n  /** Visual variant (inherited from bit-tabs) */\n  variant?: VisualVariant;\n};\n\n/**\n * Individual tab trigger. Must be placed in the `tabs` slot of `bit-tabs`.\n *\n * @element bit-tab-item\n *\n * @attr {string} value - Unique identifier, matches the corresponding bit-tab-panel value\n * @attr {boolean} active - Set by the parent bit-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 bit-tabs\n * @attr {string} color - Inherited from bit-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 * @example\n * ```html\n * <bit-tab-item slot=\"tabs\" value=\"overview\">Overview</bit-tab-item>\n * <bit-tab-item slot=\"tabs\" value=\"settings\" disabled>Settings</bit-tab-item>\n * ```\n */\nexport const TAB_ITEM_TAG = defineComponent<BitTabItemProps>({\n  props: {\n    active: typed<boolean>(false),\n    color: typed<BitTabItemProps['color']>(undefined),\n    disabled: typed<boolean>(false),\n    size: typed<BitTabItemProps['size']>(undefined),\n    value: typed<string>(''),\n    variant: typed<BitTabItemProps['variant']>(undefined),\n  },\n  setup({ host, props }) {\n    const tabsCtx = inject(TABS_CTX, undefined);\n\n    syncContextProps(tabsCtx, props, ['color', 'size', 'variant']);\n\n    const isActive = tabsCtx\n      ? computed(() => !!tabsCtx.value.value && tabsCtx.value.value === props.value.value)\n      : props.active;\n\n    effect(() => {\n      host.toggleAttribute('active', isActive.value);\n    });\n\n    const ariaSelected = computed(() => String(isActive.value));\n    const tabIndex = computed(() => (isActive.value ? '0' : '-1'));\n    const handleClick = () => {\n      if (props.disabled.value) return;\n\n      fire.custom(host, 'click', {\n        detail: { value: props.value.value },\n      });\n    };\n\n    return html`\n      <button\n        role=\"tab\"\n        type=\"button\"\n        part=\"tab\"\n        :id=\"${() => `tab-${props.value.value}`}\"\n        :aria-selected=${ariaSelected}\n        :tabindex=${tabIndex}\n        :aria-disabled=${computed(() => String(props.disabled.value))}\n        :aria-controls=\"${() => `tabpanel-${props.value.value}`}\"\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  tag: 'bit-tab-item',\n});\n"],"mappings":"iUA6CA,IAAa,GAAA,EAAA,EAAA,iBAAgD,CAC3D,MAAO,CACL,QAAA,EAAA,EAAA,OAAuB,GAAM,CAC7B,OAAA,EAAA,EAAA,OAAuC,IAAA,GAAU,CACjD,UAAA,EAAA,EAAA,OAAyB,GAAM,CAC/B,MAAA,EAAA,EAAA,OAAqC,IAAA,GAAU,CAC/C,OAAA,EAAA,EAAA,OAAqB,GAAG,CACxB,SAAA,EAAA,EAAA,OAA2C,IAAA,GAAU,CACtD,CACD,MAAM,CAAE,OAAM,SAAS,CACrB,IAAM,GAAA,EAAA,EAAA,QAAiB,EAAA,SAAU,IAAA,GAAU,EAE3C,EAAA,EAAA,kBAAiB,EAAS,EAAO,CAAC,QAAS,OAAQ,UAAU,CAAC,CAE9D,IAAM,EAAW,GAAA,EAAA,EAAA,cACE,CAAC,CAAC,EAAQ,MAAM,OAAS,EAAQ,MAAM,QAAU,EAAM,MAAM,MAAM,CAClF,EAAM,QAEV,EAAA,EAAA,YAAa,CACX,EAAK,gBAAgB,SAAU,EAAS,MAAM,EAC9C,CAEF,IAAM,GAAA,EAAA,EAAA,cAA8B,OAAO,EAAS,MAAM,CAAC,CACrD,GAAA,EAAA,EAAA,cAA2B,EAAS,MAAQ,IAAM,KAAM,CAS9D,MAAO,GAAA,IAAI;;;;;mBAKM,OAAO,EAAM,MAAM,QAAQ;yBACvB,EAAa;oBAClB,EAAS;4CACW,OAAO,EAAM,SAAS,MAAM,CAAC,CAAC;8BACtC,YAAY,EAAM,MAAM,QAAQ;qBAjBlC,CACpB,EAAM,SAAS,OAEnB,EAAA,KAAK,OAAO,EAAM,QAAS,CACzB,OAAQ,CAAE,MAAO,EAAM,MAAM,MAAO,CACrC,CAAC,EAaqB;;;;;OAO3B,OAAQ,CAAC,EAAA,gBAAiB,EAAA,uBAAuB,SAAS,CAAE,EAAA,mBAAoB,EAAA,QAAO,CACvF,IAAK,eACN,CAAC"}
+{"version":3,"file":"tab-item.cjs","names":[],"sources":["../src/disclosure/tab-item/tab-item.ts"],"sourcesContent":["import { define, computed, fire, html, inject, syncContextProps } from '@vielzeug/craftit';\n\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { coarsePointerMixin, colorThemeMixin, forcedColorsFocusMixin } from '../../styles';\nimport { TABS_CTX } from '../tabs/tabs';\nimport styles from './tab-item.css?inline';\n\nexport type BitTabItemProps = {\n  /** Whether this tab is currently selected (set by bit-tabs) */\n  active?: boolean;\n  /** Theme color (inherited from bit-tabs) */\n  color?: ThemeColor;\n  /** Disable this tab */\n  disabled?: boolean;\n  /** Size (inherited from bit-tabs) */\n  size?: ComponentSize;\n  /** Unique value identifier — must match a bit-tab-panel value */\n  value: string;\n  /** Visual variant (inherited from bit-tabs) */\n  variant?: VisualVariant;\n};\n\n/**\n * Individual tab trigger. Must be placed in the `tabs` slot of `bit-tabs`.\n *\n * @element bit-tab-item\n *\n * @attr {string} value - Unique identifier, matches the corresponding bit-tab-panel value\n * @attr {boolean} active - Set by the parent bit-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 bit-tabs\n * @attr {string} color - Inherited from bit-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 * @example\n * ```html\n * <bit-tab-item slot=\"tabs\" value=\"overview\">Overview</bit-tab-item>\n * <bit-tab-item slot=\"tabs\" value=\"settings\" disabled>Settings</bit-tab-item>\n * ```\n */\nexport const TAB_ITEM_TAG = define<BitTabItemProps>('bit-tab-item', {\n  props: {\n    active: false,\n    color: undefined,\n    disabled: false,\n    size: undefined,\n    value: '',\n    variant: undefined,\n  },\n  setup({ host, props }) {\n    const tabsCtx = inject(TABS_CTX, undefined);\n\n    syncContextProps(tabsCtx, props, ['color', 'size', 'variant']);\n\n    const isActive = computed(() =>\n      tabsCtx ? !!tabsCtx.value.value && tabsCtx.value.value === props.value.value : props.active.value,\n    );\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n\n    host.bind('attr', {\n      active: () => (isActive.value ? true : undefined),\n    });\n\n    const ariaSelected = computed(() => String(isActive.value));\n    const ariaDisabled = computed(() => String(isDisabled.value));\n    const tabIndex = computed(() => (isActive.value ? '0' : '-1'));\n    const handleClick = (event: MouseEvent) => {\n      event.stopPropagation();\n\n      if (isDisabled.value) {\n        event.preventDefault();\n\n        return;\n      }\n\n      fire.custom(host.el, 'click', {\n        detail: { value: props.value.value },\n      });\n    };\n\n    return html`\n      <button\n        role=\"tab\"\n        type=\"button\"\n        part=\"tab\"\n        :id=\"${() => `tab-${props.value.value}`}\"\n        :aria-selected=${ariaSelected}\n        :tabindex=${tabIndex}\n        :aria-disabled=${ariaDisabled}\n        :aria-controls=\"${() => `tabpanel-${props.value.value}`}\"\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":"iUA6CA,IAAa,GAAA,EAAA,EAAA,QAAuC,eAAgB,CAClE,MAAO,CACL,OAAQ,GACR,MAAO,IAAA,GACP,SAAU,GACV,KAAM,IAAA,GACN,MAAO,GACP,QAAS,IAAA,GACV,CACD,MAAM,CAAE,OAAM,SAAS,CACrB,IAAM,GAAA,EAAA,EAAA,QAAiB,EAAA,SAAU,IAAA,GAAU,EAE3C,EAAA,EAAA,kBAAiB,EAAS,EAAO,CAAC,QAAS,OAAQ,UAAU,CAAC,CAE9D,IAAM,GAAA,EAAA,EAAA,cACJ,EAAU,CAAC,CAAC,EAAQ,MAAM,OAAS,EAAQ,MAAM,QAAU,EAAM,MAAM,MAAQ,EAAM,OAAO,MAC7F,CACK,GAAA,EAAA,EAAA,cAA4B,EAAQ,EAAM,SAAS,MAAO,CAEhE,EAAK,KAAK,OAAQ,CAChB,WAAe,EAAS,MAAQ,GAAO,IAAA,GACxC,CAAC,CAEF,IAAM,GAAA,EAAA,EAAA,cAA8B,OAAO,EAAS,MAAM,CAAC,CACrD,GAAA,EAAA,EAAA,cAA8B,OAAO,EAAW,MAAM,CAAC,CACvD,GAAA,EAAA,EAAA,cAA2B,EAAS,MAAQ,IAAM,KAAM,CAe9D,MAAO,GAAA,IAAI;;;;;mBAKM,OAAO,EAAM,MAAM,QAAQ;yBACvB,EAAa;oBAClB,EAAS;yBACJ,EAAa;8BACN,YAAY,EAAM,MAAM,QAAQ;iBAvBvC,GAAsB,CAGzC,GAFA,EAAM,iBAAiB,CAEnB,EAAW,MAAO,CACpB,EAAM,gBAAgB,CAEtB,OAGF,EAAA,KAAK,OAAO,EAAK,GAAI,QAAS,CAC5B,OAAQ,CAAE,MAAO,EAAM,MAAM,MAAO,CACrC,CAAC,EAaqB;;;;;OAO3B,OAAQ,CAAC,EAAA,gBAAiB,EAAA,uBAAuB,SAAS,CAAE,EAAA,mBAAoB,EAAA,QAAO,CACxF,CAAC"}

package/dist/tab-item.js

@@ -3,39 +3,43 @@ import { colorThemeMixin as t, forcedColorsFocusMixin as n } from "./styles/mixi
 import "./styles/index.js";
 import { TABS_CTX as r } from "./tabs.js";
 import i from "./disclosure/tab-item/tab-item.css?inline.js";
-import { computed as a, defineComponent as o, effect as s, fire as c, html as l, inject as u, syncContextProps as d, typed as f } from "@vielzeug/craftit";
+import { computed as a, define as o, fire as s, html as c, inject as l, syncContextProps as u } from "@vielzeug/craftit";
 //#region src/disclosure/tab-item/tab-item.ts
-var p = o({
+var d = o("bit-tab-item", {
 	props: {
-		active: f(!1),
-		color: f(void 0),
-		disabled: f(!1),
-		size: f(void 0),
-		value: f(""),
-		variant: f(void 0)
+		active: !1,
+		color: void 0,
+		disabled: !1,
+		size: void 0,
+		value: "",
+		variant: void 0
 	},
 	setup({ host: e, props: t }) {
-		let n = u(r, void 0);
-		d(n, t, [
+		let n = l(r, void 0);
+		u(n, t, [
 			"color",
 			"size",
 			"variant"
 		]);
-		let i = n ? a(() => !!n.value.value && n.value.value === t.value.value) : t.active;
-		return s(() => {
-			e.toggleAttribute("active", i.value);
-		}), l`
+		let i = a(() => n ? !!n.value.value && n.value.value === t.value.value : t.active.value), o = a(() => !!t.disabled.value);
+		e.bind("attr", { active: () => i.value ? !0 : void 0 });
+		let d = a(() => String(i.value)), f = a(() => String(o.value));
+		return c`
       <button
         role="tab"
         type="button"
         part="tab"
         :id="${() => `tab-${t.value.value}`}"
-        :aria-selected=${a(() => String(i.value))}
+        :aria-selected=${d}
         :tabindex=${a(() => i.value ? "0" : "-1")}
-        :aria-disabled=${a(() => String(t.disabled.value))}
+        :aria-disabled=${f}
         :aria-controls="${() => `tabpanel-${t.value.value}`}"
-        @click=${() => {
-			t.disabled.value || c.custom(e, "click", { detail: { value: t.value.value } });
+        @click=${(n) => {
+			if (n.stopPropagation(), o.value) {
+				n.preventDefault();
+				return;
+			}
+			s.custom(e.el, "click", { detail: { value: t.value.value } });
 		}}>
         <slot name="prefix"></slot>
         <slot></slot>
@@ -48,10 +52,9 @@ var p = o({
 		n("button"),
 		e,
 		i
-	],
-	tag: "bit-tab-item"
+	]
 });
 //#endregion
-export { p as TAB_ITEM_TAG };
+export { d 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 { computed, defineComponent, effect, fire, html, typed, inject, syncContextProps } from '@vielzeug/craftit';\n\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { coarsePointerMixin, colorThemeMixin, forcedColorsFocusMixin } from '../../styles';\nimport { TABS_CTX } from '../tabs/tabs';\nimport styles from './tab-item.css?inline';\n\nexport type BitTabItemProps = {\n  /** Whether this tab is currently selected (set by bit-tabs) */\n  active?: boolean;\n  /** Theme color (inherited from bit-tabs) */\n  color?: ThemeColor;\n  /** Disable this tab */\n  disabled?: boolean;\n  /** Size (inherited from bit-tabs) */\n  size?: ComponentSize;\n  /** Unique value identifier — must match a bit-tab-panel value */\n  value: string;\n  /** Visual variant (inherited from bit-tabs) */\n  variant?: VisualVariant;\n};\n\n/**\n * Individual tab trigger. Must be placed in the `tabs` slot of `bit-tabs`.\n *\n * @element bit-tab-item\n *\n * @attr {string} value - Unique identifier, matches the corresponding bit-tab-panel value\n * @attr {boolean} active - Set by the parent bit-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 bit-tabs\n * @attr {string} color - Inherited from bit-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 * @example\n * ```html\n * <bit-tab-item slot=\"tabs\" value=\"overview\">Overview</bit-tab-item>\n * <bit-tab-item slot=\"tabs\" value=\"settings\" disabled>Settings</bit-tab-item>\n * ```\n */\nexport const TAB_ITEM_TAG = defineComponent<BitTabItemProps>({\n  props: {\n    active: typed<boolean>(false),\n    color: typed<BitTabItemProps['color']>(undefined),\n    disabled: typed<boolean>(false),\n    size: typed<BitTabItemProps['size']>(undefined),\n    value: typed<string>(''),\n    variant: typed<BitTabItemProps['variant']>(undefined),\n  },\n  setup({ host, props }) {\n    const tabsCtx = inject(TABS_CTX, undefined);\n\n    syncContextProps(tabsCtx, props, ['color', 'size', 'variant']);\n\n    const isActive = tabsCtx\n      ? computed(() => !!tabsCtx.value.value && tabsCtx.value.value === props.value.value)\n      : props.active;\n\n    effect(() => {\n      host.toggleAttribute('active', isActive.value);\n    });\n\n    const ariaSelected = computed(() => String(isActive.value));\n    const tabIndex = computed(() => (isActive.value ? '0' : '-1'));\n    const handleClick = () => {\n      if (props.disabled.value) return;\n\n      fire.custom(host, 'click', {\n        detail: { value: props.value.value },\n      });\n    };\n\n    return html`\n      <button\n        role=\"tab\"\n        type=\"button\"\n        part=\"tab\"\n        :id=\"${() => `tab-${props.value.value}`}\"\n        :aria-selected=${ariaSelected}\n        :tabindex=${tabIndex}\n        :aria-disabled=${computed(() => String(props.disabled.value))}\n        :aria-controls=\"${() => `tabpanel-${props.value.value}`}\"\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  tag: 'bit-tab-item',\n});\n"],"mappings":";;;;;;;AA6CA,IAAa,IAAe,EAAiC;CAC3D,OAAO;EACL,QAAQ,EAAe,GAAM;EAC7B,OAAO,EAAgC,KAAA,EAAU;EACjD,UAAU,EAAe,GAAM;EAC/B,MAAM,EAA+B,KAAA,EAAU;EAC/C,OAAO,EAAc,GAAG;EACxB,SAAS,EAAkC,KAAA,EAAU;EACtD;CACD,MAAM,EAAE,SAAM,YAAS;EACrB,IAAM,IAAU,EAAO,GAAU,KAAA,EAAU;AAE3C,IAAiB,GAAS,GAAO;GAAC;GAAS;GAAQ;GAAU,CAAC;EAE9D,IAAM,IAAW,IACb,QAAe,CAAC,CAAC,EAAQ,MAAM,SAAS,EAAQ,MAAM,UAAU,EAAM,MAAM,MAAM,GAClF,EAAM;AAgBV,SAdA,QAAa;AACX,KAAK,gBAAgB,UAAU,EAAS,MAAM;IAC9C,EAYK,CAAI;;;;;qBAKM,OAAO,EAAM,MAAM,QAAQ;yBAfvB,QAAe,OAAO,EAAS,MAAM,CAAC,CAgBzB;oBAfjB,QAAgB,EAAS,QAAQ,MAAM,KAAM,CAgBrC;yBACJ,QAAe,OAAO,EAAM,SAAS,MAAM,CAAC,CAAC;gCACtC,YAAY,EAAM,MAAM,QAAQ;uBAjBlC;AACpB,KAAM,SAAS,SAEnB,EAAK,OAAO,GAAM,SAAS,EACzB,QAAQ,EAAE,OAAO,EAAM,MAAM,OAAO,EACrC,CAAC;IAaqB;;;;;;;CAO3B,QAAQ;EAAC;EAAiB,EAAuB,SAAS;EAAE;EAAoB;EAAO;CACvF,KAAK;CACN,CAAC"}
+{"version":3,"file":"tab-item.js","names":[],"sources":["../src/disclosure/tab-item/tab-item.ts"],"sourcesContent":["import { define, computed, fire, html, inject, syncContextProps } from '@vielzeug/craftit';\n\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { coarsePointerMixin, colorThemeMixin, forcedColorsFocusMixin } from '../../styles';\nimport { TABS_CTX } from '../tabs/tabs';\nimport styles from './tab-item.css?inline';\n\nexport type BitTabItemProps = {\n  /** Whether this tab is currently selected (set by bit-tabs) */\n  active?: boolean;\n  /** Theme color (inherited from bit-tabs) */\n  color?: ThemeColor;\n  /** Disable this tab */\n  disabled?: boolean;\n  /** Size (inherited from bit-tabs) */\n  size?: ComponentSize;\n  /** Unique value identifier — must match a bit-tab-panel value */\n  value: string;\n  /** Visual variant (inherited from bit-tabs) */\n  variant?: VisualVariant;\n};\n\n/**\n * Individual tab trigger. Must be placed in the `tabs` slot of `bit-tabs`.\n *\n * @element bit-tab-item\n *\n * @attr {string} value - Unique identifier, matches the corresponding bit-tab-panel value\n * @attr {boolean} active - Set by the parent bit-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 bit-tabs\n * @attr {string} color - Inherited from bit-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 * @example\n * ```html\n * <bit-tab-item slot=\"tabs\" value=\"overview\">Overview</bit-tab-item>\n * <bit-tab-item slot=\"tabs\" value=\"settings\" disabled>Settings</bit-tab-item>\n * ```\n */\nexport const TAB_ITEM_TAG = define<BitTabItemProps>('bit-tab-item', {\n  props: {\n    active: false,\n    color: undefined,\n    disabled: false,\n    size: undefined,\n    value: '',\n    variant: undefined,\n  },\n  setup({ host, props }) {\n    const tabsCtx = inject(TABS_CTX, undefined);\n\n    syncContextProps(tabsCtx, props, ['color', 'size', 'variant']);\n\n    const isActive = computed(() =>\n      tabsCtx ? !!tabsCtx.value.value && tabsCtx.value.value === props.value.value : props.active.value,\n    );\n    const isDisabled = computed(() => Boolean(props.disabled.value));\n\n    host.bind('attr', {\n      active: () => (isActive.value ? true : undefined),\n    });\n\n    const ariaSelected = computed(() => String(isActive.value));\n    const ariaDisabled = computed(() => String(isDisabled.value));\n    const tabIndex = computed(() => (isActive.value ? '0' : '-1'));\n    const handleClick = (event: MouseEvent) => {\n      event.stopPropagation();\n\n      if (isDisabled.value) {\n        event.preventDefault();\n\n        return;\n      }\n\n      fire.custom(host.el, 'click', {\n        detail: { value: props.value.value },\n      });\n    };\n\n    return html`\n      <button\n        role=\"tab\"\n        type=\"button\"\n        part=\"tab\"\n        :id=\"${() => `tab-${props.value.value}`}\"\n        :aria-selected=${ariaSelected}\n        :tabindex=${tabIndex}\n        :aria-disabled=${ariaDisabled}\n        :aria-controls=\"${() => `tabpanel-${props.value.value}`}\"\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":";;;;;;;AA6CA,IAAa,IAAe,EAAwB,gBAAgB;CAClE,OAAO;EACL,QAAQ;EACR,OAAO,KAAA;EACP,UAAU;EACV,MAAM,KAAA;EACN,OAAO;EACP,SAAS,KAAA;EACV;CACD,MAAM,EAAE,SAAM,YAAS;EACrB,IAAM,IAAU,EAAO,GAAU,KAAA,EAAU;AAE3C,IAAiB,GAAS,GAAO;GAAC;GAAS;GAAQ;GAAU,CAAC;EAE9D,IAAM,IAAW,QACf,IAAU,CAAC,CAAC,EAAQ,MAAM,SAAS,EAAQ,MAAM,UAAU,EAAM,MAAM,QAAQ,EAAM,OAAO,MAC7F,EACK,IAAa,QAAe,EAAQ,EAAM,SAAS,MAAO;AAEhE,IAAK,KAAK,QAAQ,EAChB,cAAe,EAAS,QAAQ,KAAO,KAAA,GACxC,CAAC;EAEF,IAAM,IAAe,QAAe,OAAO,EAAS,MAAM,CAAC,EACrD,IAAe,QAAe,OAAO,EAAW,MAAM,CAAC;AAgB7D,SAAO,CAAI;;;;;qBAKM,OAAO,EAAM,MAAM,QAAQ;yBACvB,EAAa;oBArBjB,QAAgB,EAAS,QAAQ,MAAM,KAAM,CAsBrC;yBACJ,EAAa;gCACN,YAAY,EAAM,MAAM,QAAQ;kBAvBvC,MAAsB;AAGzC,OAFA,EAAM,iBAAiB,EAEnB,EAAW,OAAO;AACpB,MAAM,gBAAgB;AAEtB;;AAGF,KAAK,OAAO,EAAK,IAAI,SAAS,EAC5B,QAAQ,EAAE,OAAO,EAAM,MAAM,OAAO,EACrC,CAAC;IAaqB;;;;;;;CAO3B,QAAQ;EAAC;EAAiB,EAAuB,SAAS;EAAE;EAAoB;EAAO;CACxF,CAAC"}

package/dist/tab-panel.cjs

@@ -1,14 +1,14 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/accessibility.css.cjs`);require(`./styles/index.cjs`);const t=require(`./tabs.cjs`),n=require(`./disclosure/tab-panel/tab-panel.css?inline.cjs`);let r=require(`@vielzeug/craftit`);var i=(0,r.defineComponent)({props:{active:(0,r.typed)(!1),lazy:(0,r.typed)(!1),padding:(0,r.typed)(`md`),value:(0,r.typed)(``)},setup({host:e,props:n}){let i=(0,r.inject)(t.TABS_CTX,void 0),a=i?(0,r.computed)(()=>!!i.value.value&&i.value.value===n.value.value):n.active,o=(0,r.computed)(()=>{let e={"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)`};return e[n.padding.value??`md`]??e.md}),s=(0,r.signal)(!1);(0,r.effect)(()=>{e.toggleAttribute(`active`,a.value),a.value&&(s.value=!0)});let c=(0,r.computed)(()=>!n.lazy.value||s.value);return r.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/accessibility.css.cjs`);require(`./styles/index.cjs`);const t=require(`./tabs.cjs`),n=require(`./disclosure/tab-panel/tab-panel.css?inline.cjs`);let r=require(`@vielzeug/craftit`);var i={"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)`},a=(0,r.define)(`bit-tab-panel`,{props:{active:!1,lazy:!1,padding:`md`,value:``},setup({host:e,props:n}){let a=(0,r.inject)(t.TABS_CTX,void 0),o=(0,r.computed)(()=>a?!!a.value.value&&a.value.value===n.value.value:n.active.value);e.bind(`attr`,{active:()=>o.value?!0:void 0});let s=(0,r.computed)(()=>i[n.padding.value??`md`]??i.md),c=(0,r.signal)(!1);(0,r.effect)(()=>{o.value&&(c.value=!0)});let l=(0,r.computed)(()=>!n.lazy.value||c.value);return r.html`
       <div
         class="panel"
         part="panel"
         role="tabpanel"
-        :id="${()=>`tabpanel-${n.value.value}`}"
-        :aria-labelledby="${()=>`tab-${n.value.value}`}"
-        :aria-hidden=${()=>String(!a.value)}
-        :style="${()=>`--tab-panel-padding: ${o.value}`}"
+        :id="${(0,r.computed)(()=>`tabpanel-${n.value.value}`)}"
+        :aria-labelledby="${(0,r.computed)(()=>`tab-${n.value.value}`)}"
+        :aria-hidden=${()=>String(!o.value)}
+        :style="${()=>`--tab-panel-padding: ${s.value}`}"
         tabindex="0">
-        ${()=>c.value?r.html`<slot></slot>`:``}
+        ${()=>l.value?r.html`<slot></slot>`:``}
       </div>
-    `},styles:[e.reducedMotionMixin,n.default],tag:`bit-tab-panel`});exports.TAB_PANEL_TAG=i;
+    `},styles:[e.reducedMotionMixin,n.default]});exports.TAB_PANEL_TAG=a;
 //# 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 { computed, defineComponent, effect, html, typed, inject, signal } from '@vielzeug/craftit';\n\nimport { reducedMotionMixin } from '../../styles';\nimport { TABS_CTX } from '../tabs/tabs';\nimport styles from './tab-panel.css?inline';\n\nexport type BitTabPanelProps = {\n  /** Active state (managed by bit-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 bit-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 bit-tab-panel\n *\n * @attr {string} value - Must match the corresponding bit-tab-item value\n * @attr {boolean} active - Toggled by the parent bit-tabs\n * @attr {string} padding - Panel padding: 'none' | 'xs' | 'sm' | 'md' (default) | 'lg' | 'xl' | '2xl'\n *\n * @slot - Panel content\n *\n * @example\n * ```html\n * <bit-tab-panel value=\"overview\"><p>Overview content here</p></bit-tab-panel>\n * <bit-tab-panel value=\"settings\" padding=\"lg\"><p>Large padding</p></bit-tab-panel>\n * <bit-tab-panel value=\"code\" padding=\"none\"><pre>No padding for code</pre></bit-tab-panel>\n * ```\n */\nexport const TAB_PANEL_TAG = defineComponent<BitTabPanelProps>({\n  props: {\n    active: typed<boolean>(false),\n    lazy: typed<boolean>(false),\n    padding: typed<BitTabPanelProps['padding']>('md'),\n    value: typed<string>(''),\n  },\n  setup({ host, props }) {\n    const tabsCtx = inject(TABS_CTX, undefined);\n    const isActive = tabsCtx\n      ? computed(() => !!tabsCtx.value.value && tabsCtx.value.value === props.value.value)\n      : props.active;\n    // Map padding prop to CSS variable\n    const paddingValue = computed(() => {\n      const paddingMap: 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      const key = props.padding.value ?? 'md';\n\n      return paddingMap[key] ?? paddingMap.md;\n    });\n    // Track whether the panel has ever been active (for lazy rendering)\n    const hasBeenActive = signal(false);\n\n    effect(() => {\n      host.toggleAttribute('active', isActive.value);\n\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\n    return html`\n      <div\n        class=\"panel\"\n        part=\"panel\"\n        role=\"tabpanel\"\n        :id=\"${() => `tabpanel-${props.value.value}`}\"\n        :aria-labelledby=\"${() => `tab-${props.value.value}`}\"\n        :aria-hidden=${() => String(!isActive.value)}\n        :style=\"${() => `--tab-panel-padding: ${paddingValue.value}`}\"\n        tabindex=\"0\">\n        ${() => (shouldRender.value ? html`<slot></slot>` : '')}\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, styles],\n  tag: 'bit-tab-panel',\n});\n"],"mappings":"wRAmCA,IAAa,GAAA,EAAA,EAAA,iBAAkD,CAC7D,MAAO,CACL,QAAA,EAAA,EAAA,OAAuB,GAAM,CAC7B,MAAA,EAAA,EAAA,OAAqB,GAAM,CAC3B,SAAA,EAAA,EAAA,OAA4C,KAAK,CACjD,OAAA,EAAA,EAAA,OAAqB,GAAG,CACzB,CACD,MAAM,CAAE,OAAM,SAAS,CACrB,IAAM,GAAA,EAAA,EAAA,QAAiB,EAAA,SAAU,IAAA,GAAU,CACrC,EAAW,GAAA,EAAA,EAAA,cACE,CAAC,CAAC,EAAQ,MAAM,OAAS,EAAQ,MAAM,QAAU,EAAM,MAAM,MAAM,CAClF,EAAM,OAEJ,GAAA,EAAA,EAAA,cAA8B,CAClC,IAAM,EAAqC,CACzC,MAAO,iBACP,GAAI,gBACJ,GAAI,gBACJ,KAAM,IACN,GAAI,gBACJ,GAAI,gBACJ,GAAI,gBACL,CAGD,OAAO,EAFK,EAAM,QAAQ,OAAS,OAET,EAAW,IACrC,CAEI,GAAA,EAAA,EAAA,QAAuB,GAAM,EAEnC,EAAA,EAAA,YAAa,CACX,EAAK,gBAAgB,SAAU,EAAS,MAAM,CAE1C,EAAS,QAAO,EAAc,MAAQ,KAC1C,CAGF,IAAM,GAAA,EAAA,EAAA,cAA8B,CAAC,EAAM,KAAK,OAAS,EAAc,MAAM,CAE7E,MAAO,GAAA,IAAI;;;;;mBAKM,YAAY,EAAM,MAAM,QAAQ;gCACnB,OAAO,EAAM,MAAM,QAAQ;2BAChC,OAAO,CAAC,EAAS,MAAM,CAAC;sBAC7B,wBAAwB,EAAa,QAAQ;;cAEpD,EAAa,MAAQ,EAAA,IAAI,gBAAkB,GAAI;;OAI9D,OAAQ,CAAC,EAAA,mBAAoB,EAAA,QAAO,CACpC,IAAK,gBACN,CAAC"}
+{"version":3,"file":"tab-panel.cjs","names":[],"sources":["../src/disclosure/tab-panel/tab-panel.ts"],"sourcesContent":["import { define, computed, effect, html, inject, signal } from '@vielzeug/craftit';\n\nimport { reducedMotionMixin } from '../../styles';\nimport { TABS_CTX } from '../tabs/tabs';\nimport styles from './tab-panel.css?inline';\n\nconst TAB_PANEL_PADDING_MAP: 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 BitTabPanelProps = {\n  /** Active state (managed by bit-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 bit-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 bit-tab-panel\n *\n * @attr {string} value - Must match the corresponding bit-tab-item value\n * @attr {boolean} active - Toggled by the parent bit-tabs\n * @attr {string} padding - Panel padding: 'none' | 'xs' | 'sm' | 'md' (default) | 'lg' | 'xl' | '2xl'\n *\n * @slot - Panel content\n *\n * @example\n * ```html\n * <bit-tab-panel value=\"overview\"><p>Overview content here</p></bit-tab-panel>\n * <bit-tab-panel value=\"settings\" padding=\"lg\"><p>Large padding</p></bit-tab-panel>\n * <bit-tab-panel value=\"code\" padding=\"none\"><pre>No padding for code</pre></bit-tab-panel>\n * ```\n */\nexport const TAB_PANEL_TAG = define<BitTabPanelProps>('bit-tab-panel', {\n  props: {\n    active: false,\n    lazy: false,\n    padding: 'md',\n    value: '',\n  },\n  setup({ host, props }) {\n    const tabsCtx = inject(TABS_CTX, undefined);\n    const isActive = computed(() =>\n      tabsCtx ? !!tabsCtx.value.value && tabsCtx.value.value === props.value.value : props.active.value,\n    );\n\n    host.bind('attr', {\n      active: () => (isActive.value ? true : undefined),\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_MAP[key] ?? TAB_PANEL_PADDING_MAP.md;\n    });\n    // Track whether the panel has ever been active (for lazy rendering)\n    const hasBeenActive = signal(false);\n\n    effect(() => {\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 panelId = computed(() => `tabpanel-${props.value.value}`);\n    const labelledById = computed(() => `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=\"${() => `--tab-panel-padding: ${paddingValue.value}`}\"\n        tabindex=\"0\">\n        ${() => (shouldRender.value ? html`<slot></slot>` : '')}\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, styles],\n});\n"],"mappings":"wRAMA,IAAM,EAAgD,CACpD,MAAO,iBACP,GAAI,gBACJ,GAAI,gBACJ,KAAM,IACN,GAAI,gBACJ,GAAI,gBACJ,GAAI,gBACL,CA+BY,GAAA,EAAA,EAAA,QAAyC,gBAAiB,CACrE,MAAO,CACL,OAAQ,GACR,KAAM,GACN,QAAS,KACT,MAAO,GACR,CACD,MAAM,CAAE,OAAM,SAAS,CACrB,IAAM,GAAA,EAAA,EAAA,QAAiB,EAAA,SAAU,IAAA,GAAU,CACrC,GAAA,EAAA,EAAA,cACJ,EAAU,CAAC,CAAC,EAAQ,MAAM,OAAS,EAAQ,MAAM,QAAU,EAAM,MAAM,MAAQ,EAAM,OAAO,MAC7F,CAED,EAAK,KAAK,OAAQ,CAChB,WAAe,EAAS,MAAQ,GAAO,IAAA,GACxC,CAAC,CAGF,IAAM,GAAA,EAAA,EAAA,cAGG,EAFK,EAAM,QAAQ,OAAS,OAEE,EAAsB,GAC3D,CAEI,GAAA,EAAA,EAAA,QAAuB,GAAM,EAEnC,EAAA,EAAA,YAAa,CACP,EAAS,QAAO,EAAc,MAAQ,KAC1C,CAGF,IAAM,GAAA,EAAA,EAAA,cAA8B,CAAC,EAAM,KAAK,OAAS,EAAc,MAAM,CAI7E,MAAO,GAAA,IAAI;;;;;kCAHoB,YAAY,EAAM,MAAM,QAAQ,CAQ5C;+CAPiB,OAAO,EAAM,MAAM,QAAQ,CAQ1B;2BACZ,OAAO,CAAC,EAAS,MAAM,CAAC;sBAC7B,wBAAwB,EAAa,QAAQ;;cAEpD,EAAa,MAAQ,EAAA,IAAI,gBAAkB,GAAI;;OAI9D,OAAQ,CAAC,EAAA,mBAAoB,EAAA,QAAO,CACrC,CAAC"}