@vielzeug/refine 26.10.0 → 26.10.1

package/dist/qr-code.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"qr-code.cjs","names":[],"sources":["../src/content/qr-code/qr-code.ts"],"sourcesContent":["import { define, html, prop, unsafeHtml, useEmit, useSlots, when } from '@vielzeug/ore';\nimport { computed, watch } from '@vielzeug/ripple';\nimport { encodeQr, type QrErrorCorrection, SigilError, toSvg } from '@vielzeug/sigil';\nimport { roundableBundle } from '../../shared';\nimport { roundedVariantMixin } from '../../styles';\nimport type { ComponentSize, RoundedSize } from '../../types';\nimport componentStyles from './qr-code.css?inline';\n\n/** QR code component properties */\nexport type OreQrCodeProps = {\n  /** Error-correction level */\n  'error-correction'?: QrErrorCorrection;\n  /** Accessible label for the rendered code */\n  label?: string;\n  /** Quiet-zone width in modules */\n  margin?: number;\n  /** Border radius size */\n  rounded?: RoundedSize;\n  /** Rendered size: named scale or pixel number */\n  size?: ComponentSize | number;\n  /** The payload to encode */\n  value?: string;\n  /** Surface variant: 'flat' (transparent) or 'card' (themed background) */\n  variant?: 'flat' | 'card';\n};\n\n/** QR code component events */\nexport type OreQrCodeEvents = {\n  /** Emitted whenever the code is (re)rendered. detail: `{ version, size }` */\n  render: { version: number; size: number };\n  /** Emitted when encoding fails (e.g. payload exceeds capacity). detail: `{ error }` */\n  error: { error: SigilError };\n};\n\nconst SIZES: Record<ComponentSize, number> = { lg: 256, md: 192, sm: 128 };\n\nconst cssSize = (size: ComponentSize | number): number => (typeof size === 'number' ? size : (SIZES[size] ?? SIZES.md));\n\n/**\n * Renders a QR code for `value` as inline SVG — themeable via `currentColor`,\n * crisp at any scale, no canvas. On capacity errors the component shows an\n * error state and emits `error` rather than throwing.\n *\n * @element ore-qr-code\n *\n * @attr {string} value - The payload to encode\n * @attr {string} error-correction - 'L' | 'M' | 'Q' | 'H' (default 'M')\n * @attr {number} margin - Quiet-zone modules (default 4)\n * @attr {string} size - 'sm' | 'md' | 'lg', or a pixel value\n * @attr {string} label - Accessible label (default \"QR code\")\n * @attr {string} rounded - Border radius for the card variant\n *\n * @fires render - detail: `{ version, size }` after each successful render\n * @fires error - detail: `{ error }` when encoding fails\n *\n * @slot caption - Optional caption rendered below the code\n *\n * @cssprop --qr-code-dark - Module color (default `currentColor`)\n * @cssprop --qr-code-light - Background color (default `transparent`)\n * @cssprop --qr-code-size - Rendered size in px (overrides `size`)\n * @cssprop --qr-code-radius - Border radius\n * @cssprop --qr-code-padding - Inner padding\n * @cssprop --qr-code-bg - Card background (variant=\"card\")\n * @cssprop --qr-code-border - Card border width (variant=\"card\")\n * @cssprop --qr-code-border-color - Card border color (variant=\"card\")\n * @cssprop --qr-code-shadow - Card box shadow (variant=\"card\")\n * @cssprop --qr-code-error-color - Error-state text color\n *\n * @part wrapper - Outer container\n * @part svg - The rendered `<svg>` element\n * @part caption - Caption slot container\n * @part error - Error-state container\n *\n * @example\n * ```html\n * <ore-qr-code value=\"https://example.com\"></ore-qr-code>\n * <ore-qr-code value=\"otpauth://…\" error-correction=\"H\" size=\"256\"></ore-qr-code>\n * ```\n */\nexport const QR_CODE_TAG = 'ore-qr-code' as const;\n\ndefine<OreQrCodeProps>(QR_CODE_TAG, {\n  props: {\n    'error-correction': prop.string<QrErrorCorrection>('M'),\n    label: prop.string('QR code'),\n    margin: prop.number(4),\n    ...roundableBundle,\n    size: {\n      default: 'md' as ComponentSize | number,\n      parse: (v) => (v !== null && /^\\d+$/.test(v) ? Number(v) : ((v ?? 'md') as ComponentSize)),\n    },\n    value: prop.string(''),\n    variant: prop.string<'flat' | 'card'>('flat'),\n  },\n\n  setup(props) {\n    const emit = useEmit<OreQrCodeEvents>();\n    const slots = useSlots();\n\n    // Encode → SVG string in one computed; SigilError flips the error state.\n    const encoded = computed<{ svg: string; version: number } | { error: SigilError }>(() => {\n      const value = props.value.value ?? '';\n      if (!value) return { error: new SigilError('No value to encode') };\n      try {\n        const matrix = encodeQr(value, { errorCorrection: props['error-correction'].value ?? 'M' });\n        const svg = toSvg(matrix, {\n          dark: 'var(--_dark)',\n          label: props.label.value ?? 'QR code',\n          light: 'var(--_light)',\n          margin: props.margin.value ?? 4,\n        });\n        return { svg, version: matrix.version };\n      } catch (error) {\n        return { error: error instanceof SigilError ? error : new SigilError('QR encoding failed', { cause: error }) };\n      }\n    });\n\n    const failed = computed(() => 'error' in encoded.value);\n    const hasCaption = computed(() => slots.has('caption').value);\n\n    // Emit once per encode outcome, not per reactive read.\n    watch(encoded, (result) => {\n      if ('error' in result) emit('error', { error: result.error });\n      else emit('render', { size: cssSize(props.size.value ?? 'md'), version: result.version });\n    });\n\n    return html`\n      <div class=\"wrapper\" part=\"wrapper\" style=${() => `--_size-px: ${cssSize(props.size.value ?? 'md')}px`}>\n        ${when(\n          () => failed.value,\n          () => html`\n            <div class=\"error\" part=\"error\" role=\"alert\">\n              <span class=\"error-text\">${() => ('error' in encoded.value ? encoded.value.error.message : '')}</span>\n            </div>\n          `,\n          () => html`\n            <span class=\"svg\" part=\"svg\">${unsafeHtml(() => ('error' in encoded.value ? '' : encoded.value.svg))}</span>\n          `,\n        )}\n        <span class=\"caption\" part=\"caption\" ?hidden=${() => !hasCaption.value}>\n          <slot name=\"caption\"></slot>\n        </span>\n      </div>\n    `;\n  },\n  styles: [roundedVariantMixin, componentStyles],\n});\n"],"mappings":"oSAkCA,IAAM,EAAuC,CAAE,GAAI,IAAK,GAAI,IAAK,GAAI,GAAI,EAEnE,QAAW,GAA0C,OAAO,GAAS,SAAW,EAAQ,EAAM,IAAS,EAAM,GA2CtG,EAAc,eAE3B,EAAA,EAAA,OAAA,CAAuB,EAAa,CAClC,MAAO,CACL,mBAAoB,EAAA,KAAK,OAA0B,GAAG,EACtD,MAAO,EAAA,KAAK,OAAO,SAAS,EAC5B,OAAQ,EAAA,KAAK,OAAO,CAAC,EACrB,GAAG,EAAA,gBACH,KAAM,CACJ,QAAS,KACT,MAAQ,GAAO,IAAM,MAAQ,QAAQ,KAAK,CAAC,EAAI,OAAO,CAAC,EAAM,GAAK,IACpE,EACA,MAAO,EAAA,KAAK,OAAO,EAAE,EACrB,QAAS,EAAA,KAAK,OAAwB,MAAM,CAC9C,EAEA,MAAM,EAAO,CACX,IAAM,GAAA,EAAO,EAAA,QAAA,CAAyB,EAChC,GAAA,EAAQ,EAAA,SAAA,CAAS,EAGjB,GAAA,EAAU,EAAA,SAAA,KAAyE,CACvF,IAAM,EAAQ,EAAM,MAAM,OAAS,GACnC,GAAI,CAAC,EAAO,MAAO,CAAE,MAAO,IAAI,EAAA,WAAW,oBAAoB,CAAE,EACjE,GAAI,CACF,IAAM,GAAA,EAAS,EAAA,SAAA,CAAS,EAAO,CAAE,gBAAiB,EAAM,mBAAmB,CAAC,OAAS,GAAI,CAAC,EAO1F,MAAO,CAAE,KAAA,EANG,EAAA,MAAA,CAAM,EAAQ,CACxB,KAAM,eACN,MAAO,EAAM,MAAM,OAAS,UAC5B,MAAO,gBACP,OAAQ,EAAM,OAAO,OAAS,CAChC,CACS,EAAK,QAAS,EAAO,OAAQ,CACxC,OAAS,EAAO,CACd,MAAO,CAAE,MAAO,aAAiB,EAAA,WAAa,EAAQ,IAAI,EAAA,WAAW,qBAAsB,CAAE,MAAO,CAAM,CAAC,CAAE,CAC/G,CACF,CAAC,EAEK,GAAA,EAAS,EAAA,SAAA,KAAe,UAAW,EAAQ,KAAK,EAChD,GAAA,EAAa,EAAA,SAAA,KAAe,EAAM,IAAI,SAAS,CAAC,CAAC,KAAK,EAQ5D,OALA,EAAA,EAAA,MAAA,CAAM,EAAU,GAAW,CACrB,UAAW,EAAQ,EAAK,QAAS,CAAE,MAAO,EAAO,KAAM,CAAC,EACvD,EAAK,SAAU,CAAE,KAAM,QAAQ,EAAM,KAAK,OAAS,IAAI,EAAG,QAAS,EAAO,OAAQ,CAAC,CAC1F,CAAC,EAEM,EAAA,IAAI;sDACyC,eAAe,QAAQ,EAAM,KAAK,OAAS,IAAI,EAAE,IAAI;WACnG,EAAA,EAAA,KAAA,KACM,EAAO,UACP,EAAA,IAAI;;6CAE4B,UAAW,EAAQ,MAAQ,EAAQ,MAAM,MAAM,QAAU,GAAI;;gBAG7F,EAAA,IAAI;4CACuB,EAAA,EAAA,WAAA,KAAkB,UAAW,EAAQ,MAAQ,GAAK,EAAQ,MAAM,GAAI,EAAE;WAEzG,EAAE;2DACmD,CAAC,EAAW,MAAM;;;;KAK7E,EACA,OAAQ,CAAC,EAAA,oBAAqB,EAAA,OAAe,CAC/C,CAAC"}
+{"version":3,"file":"qr-code.cjs","names":[],"sources":["../src/content/qr-code/qr-code.ts"],"sourcesContent":["import { define, html, prop, unsafeHtml, useEmit, useSlots, when } from '@vielzeug/ore';\nimport { computed, watch } from '@vielzeug/ripple';\nimport { encodeQr, type QrErrorCorrection, SigilError, toSvg } from '@vielzeug/sigil';\nimport { roundableBundle } from '../../shared';\nimport { roundedVariantMixin } from '../../styles';\nimport type { ComponentSize, RoundedSize } from '../../types';\nimport componentStyles from './qr-code.css?inline';\n\n/** QR code component properties */\nexport type OreQrCodeProps = {\n  /** Error-correction level */\n  'error-correction'?: QrErrorCorrection;\n  /** Accessible label for the rendered code */\n  label?: string;\n  /** Quiet-zone width in modules */\n  margin?: number;\n  /** Border radius size */\n  rounded?: RoundedSize;\n  /** Rendered size: named scale or pixel number */\n  size?: ComponentSize | number;\n  /** The payload to encode */\n  value?: string;\n  /** Surface variant: 'flat' (transparent) or 'card' (themed background) */\n  variant?: 'flat' | 'card';\n};\n\n/** QR code component events */\nexport type OreQrCodeEvents = {\n  /** Emitted whenever the code is (re)rendered. detail: `{ version, size }` */\n  render: { version: number; size: number };\n  /** Emitted when encoding fails (e.g. payload exceeds capacity). detail: `{ error }` */\n  error: { error: SigilError };\n};\n\nconst SIZES: Record<ComponentSize, number> = { lg: 256, md: 192, sm: 128 };\n\nconst cssSize = (size: ComponentSize | number): number => (typeof size === 'number' ? size : (SIZES[size] ?? SIZES.md));\n\n/**\n * Renders a QR code for `value` as inline SVG: themeable via `currentColor`,\n * crisp at any scale, no canvas. On capacity errors the component shows an\n * error state and emits `error` rather than throwing.\n *\n * @element ore-qr-code\n *\n * @attr {string} value - The payload to encode\n * @attr {string} error-correction - 'L' | 'M' | 'Q' | 'H' (default 'M')\n * @attr {number} margin - Quiet-zone modules (default 4)\n * @attr {string} size - 'sm' | 'md' | 'lg', or a pixel value\n * @attr {string} label - Accessible label (default \"QR code\")\n * @attr {string} rounded - Border radius for the card variant\n *\n * @fires render - detail: `{ version, size }` after each successful render\n * @fires error - detail: `{ error }` when encoding fails\n *\n * @slot caption - Optional caption rendered below the code\n *\n * @cssprop --qr-code-dark - Module color (default `currentColor`)\n * @cssprop --qr-code-light - Background color (default `transparent`)\n * @cssprop --qr-code-size - Rendered size in px (overrides `size`)\n * @cssprop --qr-code-radius - Border radius\n * @cssprop --qr-code-padding - Inner padding\n * @cssprop --qr-code-bg - Card background (variant=\"card\")\n * @cssprop --qr-code-border - Card border width (variant=\"card\")\n * @cssprop --qr-code-border-color - Card border color (variant=\"card\")\n * @cssprop --qr-code-shadow - Card box shadow (variant=\"card\")\n * @cssprop --qr-code-error-color - Error-state text color\n *\n * @part wrapper - Outer container\n * @part svg - The rendered `<svg>` element\n * @part caption - Caption slot container\n * @part error - Error-state container\n *\n * @example\n * ```html\n * <ore-qr-code value=\"https://example.com\"></ore-qr-code>\n * <ore-qr-code value=\"otpauth://…\" error-correction=\"H\" size=\"256\"></ore-qr-code>\n * ```\n */\nexport const QR_CODE_TAG = 'ore-qr-code' as const;\n\ndefine<OreQrCodeProps>(QR_CODE_TAG, {\n  props: {\n    'error-correction': prop.string<QrErrorCorrection>('M'),\n    label: prop.string('QR code'),\n    margin: prop.number(4),\n    ...roundableBundle,\n    size: {\n      default: 'md' as ComponentSize | number,\n      parse: (v) => (v !== null && /^\\d+$/.test(v) ? Number(v) : ((v ?? 'md') as ComponentSize)),\n    },\n    value: prop.string(''),\n    variant: prop.string<'flat' | 'card'>('flat'),\n  },\n\n  setup(props) {\n    const emit = useEmit<OreQrCodeEvents>();\n    const slots = useSlots();\n\n    // Encode → SVG string in one computed; SigilError flips the error state.\n    const encoded = computed<{ svg: string; version: number } | { error: SigilError }>(() => {\n      const value = props.value.value ?? '';\n      if (!value) return { error: new SigilError('No value to encode') };\n      try {\n        const matrix = encodeQr(value, { errorCorrection: props['error-correction'].value ?? 'M' });\n        const svg = toSvg(matrix, {\n          dark: 'var(--_dark)',\n          label: props.label.value ?? 'QR code',\n          light: 'var(--_light)',\n          margin: props.margin.value ?? 4,\n        });\n        return { svg, version: matrix.version };\n      } catch (error) {\n        return { error: error instanceof SigilError ? error : new SigilError('QR encoding failed', { cause: error }) };\n      }\n    });\n\n    const failed = computed(() => 'error' in encoded.value);\n    const hasCaption = computed(() => slots.has('caption').value);\n\n    // Emit once per encode outcome, not per reactive read.\n    watch(encoded, (result) => {\n      if ('error' in result) emit('error', { error: result.error });\n      else emit('render', { size: cssSize(props.size.value ?? 'md'), version: result.version });\n    });\n\n    return html`\n      <div class=\"wrapper\" part=\"wrapper\" style=${() => `--_size-px: ${cssSize(props.size.value ?? 'md')}px`}>\n        ${when(\n          () => failed.value,\n          () => html`\n            <div class=\"error\" part=\"error\" role=\"alert\">\n              <span class=\"error-text\">${() => ('error' in encoded.value ? encoded.value.error.message : '')}</span>\n            </div>\n          `,\n          () => html`\n            <span class=\"svg\" part=\"svg\">${unsafeHtml(() => ('error' in encoded.value ? '' : encoded.value.svg))}</span>\n          `,\n        )}\n        <span class=\"caption\" part=\"caption\" ?hidden=${() => !hasCaption.value}>\n          <slot name=\"caption\"></slot>\n        </span>\n      </div>\n    `;\n  },\n  styles: [roundedVariantMixin, componentStyles],\n});\n"],"mappings":"oSAkCA,IAAM,EAAuC,CAAE,GAAI,IAAK,GAAI,IAAK,GAAI,GAAI,EAEnE,QAAW,GAA0C,OAAO,GAAS,SAAW,EAAQ,EAAM,IAAS,EAAM,GA2CtG,EAAc,eAE3B,EAAA,EAAA,OAAA,CAAuB,EAAa,CAClC,MAAO,CACL,mBAAoB,EAAA,KAAK,OAA0B,GAAG,EACtD,MAAO,EAAA,KAAK,OAAO,SAAS,EAC5B,OAAQ,EAAA,KAAK,OAAO,CAAC,EACrB,GAAG,EAAA,gBACH,KAAM,CACJ,QAAS,KACT,MAAQ,GAAO,IAAM,MAAQ,QAAQ,KAAK,CAAC,EAAI,OAAO,CAAC,EAAM,GAAK,IACpE,EACA,MAAO,EAAA,KAAK,OAAO,EAAE,EACrB,QAAS,EAAA,KAAK,OAAwB,MAAM,CAC9C,EAEA,MAAM,EAAO,CACX,IAAM,GAAA,EAAO,EAAA,QAAA,CAAyB,EAChC,GAAA,EAAQ,EAAA,SAAA,CAAS,EAGjB,GAAA,EAAU,EAAA,SAAA,KAAyE,CACvF,IAAM,EAAQ,EAAM,MAAM,OAAS,GACnC,GAAI,CAAC,EAAO,MAAO,CAAE,MAAO,IAAI,EAAA,WAAW,oBAAoB,CAAE,EACjE,GAAI,CACF,IAAM,GAAA,EAAS,EAAA,SAAA,CAAS,EAAO,CAAE,gBAAiB,EAAM,mBAAmB,CAAC,OAAS,GAAI,CAAC,EAO1F,MAAO,CAAE,KAAA,EANG,EAAA,MAAA,CAAM,EAAQ,CACxB,KAAM,eACN,MAAO,EAAM,MAAM,OAAS,UAC5B,MAAO,gBACP,OAAQ,EAAM,OAAO,OAAS,CAChC,CACS,EAAK,QAAS,EAAO,OAAQ,CACxC,OAAS,EAAO,CACd,MAAO,CAAE,MAAO,aAAiB,EAAA,WAAa,EAAQ,IAAI,EAAA,WAAW,qBAAsB,CAAE,MAAO,CAAM,CAAC,CAAE,CAC/G,CACF,CAAC,EAEK,GAAA,EAAS,EAAA,SAAA,KAAe,UAAW,EAAQ,KAAK,EAChD,GAAA,EAAa,EAAA,SAAA,KAAe,EAAM,IAAI,SAAS,CAAC,CAAC,KAAK,EAQ5D,OALA,EAAA,EAAA,MAAA,CAAM,EAAU,GAAW,CACrB,UAAW,EAAQ,EAAK,QAAS,CAAE,MAAO,EAAO,KAAM,CAAC,EACvD,EAAK,SAAU,CAAE,KAAM,QAAQ,EAAM,KAAK,OAAS,IAAI,EAAG,QAAS,EAAO,OAAQ,CAAC,CAC1F,CAAC,EAEM,EAAA,IAAI;sDACyC,eAAe,QAAQ,EAAM,KAAK,OAAS,IAAI,EAAE,IAAI;WACnG,EAAA,EAAA,KAAA,KACM,EAAO,UACP,EAAA,IAAI;;6CAE4B,UAAW,EAAQ,MAAQ,EAAQ,MAAM,MAAM,QAAU,GAAI;;gBAG7F,EAAA,IAAI;4CACuB,EAAA,EAAA,WAAA,KAAkB,UAAW,EAAQ,MAAQ,GAAK,EAAQ,MAAM,GAAI,EAAE;WAEzG,EAAE;2DACmD,CAAC,EAAW,MAAM;;;;KAK7E,EACA,OAAQ,CAAC,EAAA,oBAAqB,EAAA,OAAe,CAC/C,CAAC"}

package/dist/qr-code.js.map

@@ -1 +1 @@
-{"version":3,"file":"qr-code.js","names":[],"sources":["../src/content/qr-code/qr-code.ts"],"sourcesContent":["import { define, html, prop, unsafeHtml, useEmit, useSlots, when } from '@vielzeug/ore';\nimport { computed, watch } from '@vielzeug/ripple';\nimport { encodeQr, type QrErrorCorrection, SigilError, toSvg } from '@vielzeug/sigil';\nimport { roundableBundle } from '../../shared';\nimport { roundedVariantMixin } from '../../styles';\nimport type { ComponentSize, RoundedSize } from '../../types';\nimport componentStyles from './qr-code.css?inline';\n\n/** QR code component properties */\nexport type OreQrCodeProps = {\n  /** Error-correction level */\n  'error-correction'?: QrErrorCorrection;\n  /** Accessible label for the rendered code */\n  label?: string;\n  /** Quiet-zone width in modules */\n  margin?: number;\n  /** Border radius size */\n  rounded?: RoundedSize;\n  /** Rendered size: named scale or pixel number */\n  size?: ComponentSize | number;\n  /** The payload to encode */\n  value?: string;\n  /** Surface variant: 'flat' (transparent) or 'card' (themed background) */\n  variant?: 'flat' | 'card';\n};\n\n/** QR code component events */\nexport type OreQrCodeEvents = {\n  /** Emitted whenever the code is (re)rendered. detail: `{ version, size }` */\n  render: { version: number; size: number };\n  /** Emitted when encoding fails (e.g. payload exceeds capacity). detail: `{ error }` */\n  error: { error: SigilError };\n};\n\nconst SIZES: Record<ComponentSize, number> = { lg: 256, md: 192, sm: 128 };\n\nconst cssSize = (size: ComponentSize | number): number => (typeof size === 'number' ? size : (SIZES[size] ?? SIZES.md));\n\n/**\n * Renders a QR code for `value` as inline SVG — themeable via `currentColor`,\n * crisp at any scale, no canvas. On capacity errors the component shows an\n * error state and emits `error` rather than throwing.\n *\n * @element ore-qr-code\n *\n * @attr {string} value - The payload to encode\n * @attr {string} error-correction - 'L' | 'M' | 'Q' | 'H' (default 'M')\n * @attr {number} margin - Quiet-zone modules (default 4)\n * @attr {string} size - 'sm' | 'md' | 'lg', or a pixel value\n * @attr {string} label - Accessible label (default \"QR code\")\n * @attr {string} rounded - Border radius for the card variant\n *\n * @fires render - detail: `{ version, size }` after each successful render\n * @fires error - detail: `{ error }` when encoding fails\n *\n * @slot caption - Optional caption rendered below the code\n *\n * @cssprop --qr-code-dark - Module color (default `currentColor`)\n * @cssprop --qr-code-light - Background color (default `transparent`)\n * @cssprop --qr-code-size - Rendered size in px (overrides `size`)\n * @cssprop --qr-code-radius - Border radius\n * @cssprop --qr-code-padding - Inner padding\n * @cssprop --qr-code-bg - Card background (variant=\"card\")\n * @cssprop --qr-code-border - Card border width (variant=\"card\")\n * @cssprop --qr-code-border-color - Card border color (variant=\"card\")\n * @cssprop --qr-code-shadow - Card box shadow (variant=\"card\")\n * @cssprop --qr-code-error-color - Error-state text color\n *\n * @part wrapper - Outer container\n * @part svg - The rendered `<svg>` element\n * @part caption - Caption slot container\n * @part error - Error-state container\n *\n * @example\n * ```html\n * <ore-qr-code value=\"https://example.com\"></ore-qr-code>\n * <ore-qr-code value=\"otpauth://…\" error-correction=\"H\" size=\"256\"></ore-qr-code>\n * ```\n */\nexport const QR_CODE_TAG = 'ore-qr-code' as const;\n\ndefine<OreQrCodeProps>(QR_CODE_TAG, {\n  props: {\n    'error-correction': prop.string<QrErrorCorrection>('M'),\n    label: prop.string('QR code'),\n    margin: prop.number(4),\n    ...roundableBundle,\n    size: {\n      default: 'md' as ComponentSize | number,\n      parse: (v) => (v !== null && /^\\d+$/.test(v) ? Number(v) : ((v ?? 'md') as ComponentSize)),\n    },\n    value: prop.string(''),\n    variant: prop.string<'flat' | 'card'>('flat'),\n  },\n\n  setup(props) {\n    const emit = useEmit<OreQrCodeEvents>();\n    const slots = useSlots();\n\n    // Encode → SVG string in one computed; SigilError flips the error state.\n    const encoded = computed<{ svg: string; version: number } | { error: SigilError }>(() => {\n      const value = props.value.value ?? '';\n      if (!value) return { error: new SigilError('No value to encode') };\n      try {\n        const matrix = encodeQr(value, { errorCorrection: props['error-correction'].value ?? 'M' });\n        const svg = toSvg(matrix, {\n          dark: 'var(--_dark)',\n          label: props.label.value ?? 'QR code',\n          light: 'var(--_light)',\n          margin: props.margin.value ?? 4,\n        });\n        return { svg, version: matrix.version };\n      } catch (error) {\n        return { error: error instanceof SigilError ? error : new SigilError('QR encoding failed', { cause: error }) };\n      }\n    });\n\n    const failed = computed(() => 'error' in encoded.value);\n    const hasCaption = computed(() => slots.has('caption').value);\n\n    // Emit once per encode outcome, not per reactive read.\n    watch(encoded, (result) => {\n      if ('error' in result) emit('error', { error: result.error });\n      else emit('render', { size: cssSize(props.size.value ?? 'md'), version: result.version });\n    });\n\n    return html`\n      <div class=\"wrapper\" part=\"wrapper\" style=${() => `--_size-px: ${cssSize(props.size.value ?? 'md')}px`}>\n        ${when(\n          () => failed.value,\n          () => html`\n            <div class=\"error\" part=\"error\" role=\"alert\">\n              <span class=\"error-text\">${() => ('error' in encoded.value ? encoded.value.error.message : '')}</span>\n            </div>\n          `,\n          () => html`\n            <span class=\"svg\" part=\"svg\">${unsafeHtml(() => ('error' in encoded.value ? '' : encoded.value.svg))}</span>\n          `,\n        )}\n        <span class=\"caption\" part=\"caption\" ?hidden=${() => !hasCaption.value}>\n          <slot name=\"caption\"></slot>\n        </span>\n      </div>\n    `;\n  },\n  styles: [roundedVariantMixin, componentStyles],\n});\n"],"mappings":"2ZAkCA,IAAM,EAAuC,CAAE,GAAI,IAAK,GAAI,IAAK,GAAI,GAAI,EAEnE,QAAW,GAA0C,OAAO,GAAS,SAAW,EAAQ,EAAM,IAAS,EAAM,GA2CtG,EAAc,cAE3B,EAAuB,EAAa,CAClC,MAAO,CACL,mBAAoB,EAAK,OAA0B,GAAG,EACtD,MAAO,EAAK,OAAO,SAAS,EAC5B,OAAQ,EAAK,OAAO,CAAC,EACrB,GAAG,EACH,KAAM,CACJ,QAAS,KACT,MAAQ,GAAO,IAAM,MAAQ,QAAQ,KAAK,CAAC,EAAI,OAAO,CAAC,EAAM,GAAK,IACpE,EACA,MAAO,EAAK,OAAO,EAAE,EACrB,QAAS,EAAK,OAAwB,MAAM,CAC9C,EAEA,MAAM,EAAO,CACX,IAAM,EAAO,EAAyB,EAChC,EAAQ,EAAS,EAGjB,EAAU,MAAyE,CACvF,IAAM,EAAQ,EAAM,MAAM,OAAS,GACnC,GAAI,CAAC,EAAO,MAAO,CAAE,MAAO,IAAI,EAAW,oBAAoB,CAAE,EACjE,GAAI,CACF,IAAM,EAAS,EAAS,EAAO,CAAE,gBAAiB,EAAM,mBAAmB,CAAC,OAAS,GAAI,CAAC,EAO1F,MAAO,CAAE,IANG,EAAM,EAAQ,CACxB,KAAM,eACN,MAAO,EAAM,MAAM,OAAS,UAC5B,MAAO,gBACP,OAAQ,EAAM,OAAO,OAAS,CAChC,CACS,EAAK,QAAS,EAAO,OAAQ,CACxC,OAAS,EAAO,CACd,MAAO,CAAE,MAAO,aAAiB,EAAa,EAAQ,IAAI,EAAW,qBAAsB,CAAE,MAAO,CAAM,CAAC,CAAE,CAC/G,CACF,CAAC,EAEK,EAAS,MAAe,UAAW,EAAQ,KAAK,EAChD,EAAa,MAAe,EAAM,IAAI,SAAS,CAAC,CAAC,KAAK,EAQ5D,OALA,EAAM,EAAU,GAAW,CACrB,UAAW,EAAQ,EAAK,QAAS,CAAE,MAAO,EAAO,KAAM,CAAC,EACvD,EAAK,SAAU,CAAE,KAAM,QAAQ,EAAM,KAAK,OAAS,IAAI,EAAG,QAAS,EAAO,OAAQ,CAAC,CAC1F,CAAC,EAEM,CAAI;sDACyC,eAAe,QAAQ,EAAM,KAAK,OAAS,IAAI,EAAE,IAAI;UACnG,MACM,EAAO,UACP,CAAI;;6CAE4B,UAAW,EAAQ,MAAQ,EAAQ,MAAM,MAAM,QAAU,GAAI;;gBAG7F,CAAI;2CACuB,MAAkB,UAAW,EAAQ,MAAQ,GAAK,EAAQ,MAAM,GAAI,EAAE;WAEzG,EAAE;2DACmD,CAAC,EAAW,MAAM;;;;KAK7E,EACA,OAAQ,CAAC,EAAqB,CAAe,CAC/C,CAAC"}
+{"version":3,"file":"qr-code.js","names":[],"sources":["../src/content/qr-code/qr-code.ts"],"sourcesContent":["import { define, html, prop, unsafeHtml, useEmit, useSlots, when } from '@vielzeug/ore';\nimport { computed, watch } from '@vielzeug/ripple';\nimport { encodeQr, type QrErrorCorrection, SigilError, toSvg } from '@vielzeug/sigil';\nimport { roundableBundle } from '../../shared';\nimport { roundedVariantMixin } from '../../styles';\nimport type { ComponentSize, RoundedSize } from '../../types';\nimport componentStyles from './qr-code.css?inline';\n\n/** QR code component properties */\nexport type OreQrCodeProps = {\n  /** Error-correction level */\n  'error-correction'?: QrErrorCorrection;\n  /** Accessible label for the rendered code */\n  label?: string;\n  /** Quiet-zone width in modules */\n  margin?: number;\n  /** Border radius size */\n  rounded?: RoundedSize;\n  /** Rendered size: named scale or pixel number */\n  size?: ComponentSize | number;\n  /** The payload to encode */\n  value?: string;\n  /** Surface variant: 'flat' (transparent) or 'card' (themed background) */\n  variant?: 'flat' | 'card';\n};\n\n/** QR code component events */\nexport type OreQrCodeEvents = {\n  /** Emitted whenever the code is (re)rendered. detail: `{ version, size }` */\n  render: { version: number; size: number };\n  /** Emitted when encoding fails (e.g. payload exceeds capacity). detail: `{ error }` */\n  error: { error: SigilError };\n};\n\nconst SIZES: Record<ComponentSize, number> = { lg: 256, md: 192, sm: 128 };\n\nconst cssSize = (size: ComponentSize | number): number => (typeof size === 'number' ? size : (SIZES[size] ?? SIZES.md));\n\n/**\n * Renders a QR code for `value` as inline SVG: themeable via `currentColor`,\n * crisp at any scale, no canvas. On capacity errors the component shows an\n * error state and emits `error` rather than throwing.\n *\n * @element ore-qr-code\n *\n * @attr {string} value - The payload to encode\n * @attr {string} error-correction - 'L' | 'M' | 'Q' | 'H' (default 'M')\n * @attr {number} margin - Quiet-zone modules (default 4)\n * @attr {string} size - 'sm' | 'md' | 'lg', or a pixel value\n * @attr {string} label - Accessible label (default \"QR code\")\n * @attr {string} rounded - Border radius for the card variant\n *\n * @fires render - detail: `{ version, size }` after each successful render\n * @fires error - detail: `{ error }` when encoding fails\n *\n * @slot caption - Optional caption rendered below the code\n *\n * @cssprop --qr-code-dark - Module color (default `currentColor`)\n * @cssprop --qr-code-light - Background color (default `transparent`)\n * @cssprop --qr-code-size - Rendered size in px (overrides `size`)\n * @cssprop --qr-code-radius - Border radius\n * @cssprop --qr-code-padding - Inner padding\n * @cssprop --qr-code-bg - Card background (variant=\"card\")\n * @cssprop --qr-code-border - Card border width (variant=\"card\")\n * @cssprop --qr-code-border-color - Card border color (variant=\"card\")\n * @cssprop --qr-code-shadow - Card box shadow (variant=\"card\")\n * @cssprop --qr-code-error-color - Error-state text color\n *\n * @part wrapper - Outer container\n * @part svg - The rendered `<svg>` element\n * @part caption - Caption slot container\n * @part error - Error-state container\n *\n * @example\n * ```html\n * <ore-qr-code value=\"https://example.com\"></ore-qr-code>\n * <ore-qr-code value=\"otpauth://…\" error-correction=\"H\" size=\"256\"></ore-qr-code>\n * ```\n */\nexport const QR_CODE_TAG = 'ore-qr-code' as const;\n\ndefine<OreQrCodeProps>(QR_CODE_TAG, {\n  props: {\n    'error-correction': prop.string<QrErrorCorrection>('M'),\n    label: prop.string('QR code'),\n    margin: prop.number(4),\n    ...roundableBundle,\n    size: {\n      default: 'md' as ComponentSize | number,\n      parse: (v) => (v !== null && /^\\d+$/.test(v) ? Number(v) : ((v ?? 'md') as ComponentSize)),\n    },\n    value: prop.string(''),\n    variant: prop.string<'flat' | 'card'>('flat'),\n  },\n\n  setup(props) {\n    const emit = useEmit<OreQrCodeEvents>();\n    const slots = useSlots();\n\n    // Encode → SVG string in one computed; SigilError flips the error state.\n    const encoded = computed<{ svg: string; version: number } | { error: SigilError }>(() => {\n      const value = props.value.value ?? '';\n      if (!value) return { error: new SigilError('No value to encode') };\n      try {\n        const matrix = encodeQr(value, { errorCorrection: props['error-correction'].value ?? 'M' });\n        const svg = toSvg(matrix, {\n          dark: 'var(--_dark)',\n          label: props.label.value ?? 'QR code',\n          light: 'var(--_light)',\n          margin: props.margin.value ?? 4,\n        });\n        return { svg, version: matrix.version };\n      } catch (error) {\n        return { error: error instanceof SigilError ? error : new SigilError('QR encoding failed', { cause: error }) };\n      }\n    });\n\n    const failed = computed(() => 'error' in encoded.value);\n    const hasCaption = computed(() => slots.has('caption').value);\n\n    // Emit once per encode outcome, not per reactive read.\n    watch(encoded, (result) => {\n      if ('error' in result) emit('error', { error: result.error });\n      else emit('render', { size: cssSize(props.size.value ?? 'md'), version: result.version });\n    });\n\n    return html`\n      <div class=\"wrapper\" part=\"wrapper\" style=${() => `--_size-px: ${cssSize(props.size.value ?? 'md')}px`}>\n        ${when(\n          () => failed.value,\n          () => html`\n            <div class=\"error\" part=\"error\" role=\"alert\">\n              <span class=\"error-text\">${() => ('error' in encoded.value ? encoded.value.error.message : '')}</span>\n            </div>\n          `,\n          () => html`\n            <span class=\"svg\" part=\"svg\">${unsafeHtml(() => ('error' in encoded.value ? '' : encoded.value.svg))}</span>\n          `,\n        )}\n        <span class=\"caption\" part=\"caption\" ?hidden=${() => !hasCaption.value}>\n          <slot name=\"caption\"></slot>\n        </span>\n      </div>\n    `;\n  },\n  styles: [roundedVariantMixin, componentStyles],\n});\n"],"mappings":"2ZAkCA,IAAM,EAAuC,CAAE,GAAI,IAAK,GAAI,IAAK,GAAI,GAAI,EAEnE,QAAW,GAA0C,OAAO,GAAS,SAAW,EAAQ,EAAM,IAAS,EAAM,GA2CtG,EAAc,cAE3B,EAAuB,EAAa,CAClC,MAAO,CACL,mBAAoB,EAAK,OAA0B,GAAG,EACtD,MAAO,EAAK,OAAO,SAAS,EAC5B,OAAQ,EAAK,OAAO,CAAC,EACrB,GAAG,EACH,KAAM,CACJ,QAAS,KACT,MAAQ,GAAO,IAAM,MAAQ,QAAQ,KAAK,CAAC,EAAI,OAAO,CAAC,EAAM,GAAK,IACpE,EACA,MAAO,EAAK,OAAO,EAAE,EACrB,QAAS,EAAK,OAAwB,MAAM,CAC9C,EAEA,MAAM,EAAO,CACX,IAAM,EAAO,EAAyB,EAChC,EAAQ,EAAS,EAGjB,EAAU,MAAyE,CACvF,IAAM,EAAQ,EAAM,MAAM,OAAS,GACnC,GAAI,CAAC,EAAO,MAAO,CAAE,MAAO,IAAI,EAAW,oBAAoB,CAAE,EACjE,GAAI,CACF,IAAM,EAAS,EAAS,EAAO,CAAE,gBAAiB,EAAM,mBAAmB,CAAC,OAAS,GAAI,CAAC,EAO1F,MAAO,CAAE,IANG,EAAM,EAAQ,CACxB,KAAM,eACN,MAAO,EAAM,MAAM,OAAS,UAC5B,MAAO,gBACP,OAAQ,EAAM,OAAO,OAAS,CAChC,CACS,EAAK,QAAS,EAAO,OAAQ,CACxC,OAAS,EAAO,CACd,MAAO,CAAE,MAAO,aAAiB,EAAa,EAAQ,IAAI,EAAW,qBAAsB,CAAE,MAAO,CAAM,CAAC,CAAE,CAC/G,CACF,CAAC,EAEK,EAAS,MAAe,UAAW,EAAQ,KAAK,EAChD,EAAa,MAAe,EAAM,IAAI,SAAS,CAAC,CAAC,KAAK,EAQ5D,OALA,EAAM,EAAU,GAAW,CACrB,UAAW,EAAQ,EAAK,QAAS,CAAE,MAAO,EAAO,KAAM,CAAC,EACvD,EAAK,SAAU,CAAE,KAAM,QAAQ,EAAM,KAAK,OAAS,IAAI,EAAG,QAAS,EAAO,OAAQ,CAAC,CAC1F,CAAC,EAEM,CAAI;sDACyC,eAAe,QAAQ,EAAM,KAAK,OAAS,IAAI,EAAE,IAAI;UACnG,MACM,EAAO,UACP,CAAI;;6CAE4B,UAAW,EAAQ,MAAQ,EAAQ,MAAM,MAAM,QAAU,GAAI;;gBAG7F,CAAI;2CACuB,MAAkB,UAAW,EAAQ,MAAQ,GAAK,EAAQ,MAAM,GAAI,EAAE;WAEzG,EAAE;2DACmD,CAAC,EAAW,MAAM;;;;KAK7E,EACA,OAAQ,CAAC,EAAqB,CAAe,CAC/C,CAAC"}

package/dist/qr-scanner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"qr-scanner.cjs","names":[],"sources":["../src/inputs/qr-scanner/qr-scanner.ts"],"sourcesContent":["import { define, html, onElement, prop, ref, useEmit, watchEffect, when } from '@vielzeug/ore';\nimport { signal, watch } from '@vielzeug/ripple';\nimport {\n  createQrScanner,\n  isQrScanSupported,\n  type QrScanner,\n  type QrScannerOptions,\n  type QrScanResult,\n  SigilError,\n  SigilPermissionError,\n  SigilUnsupportedError,\n} from '@vielzeug/sigil';\nimport { roundableBundle } from '../../shared';\nimport { roundedVariantMixin } from '../../styles';\nimport type { ComponentSize, RoundedSize } from '../../types';\n\nimport componentStyles from './qr-scanner.css?inline';\n\nexport { ICON_TAG } from '../../content/icon/icon';\nexport { BUTTON_TAG } from '../button/button';\n/** Testing hook — inject a fake `createQrScanner` without touching globals. */\nexport type QrScannerFactory = (options: QrScannerOptions) => QrScanner;\n\n/** Component-level view states; sigil's transport states are mapped onto these. */\nexport type OreQrScannerStatus = 'idle' | 'starting' | 'scanning' | 'result' | 'unsupported' | 'denied' | 'error';\n\n/** QR scanner component properties */\nexport type OreQrScannerProps = {\n  /** Start/stop the camera externally; mirrors into internal intent on change */\n  active?: boolean;\n  /** Preferred camera: 'environment' (rear) or 'user' (front) */\n  'facing-mode'?: 'environment' | 'user';\n  /** Minimum ms between detection passes */\n  interval?: number;\n  /** Accessible label for the scanner region */\n  label?: string;\n  /** Stop after the first successful scan (default true) */\n  once?: boolean;\n  /** Border radius size */\n  rounded?: RoundedSize;\n  /** JS-only testing hook: custom scanner factory (defaults to `createQrScanner`) */\n  scannerFactory?: QrScannerFactory;\n  /** Preview size: named scale or pixel number */\n  size?: ComponentSize | number;\n};\n\n/** QR scanner component events */\nexport type OreQrScannerEvents = {\n  /** Emitted on every successful decode. detail: `{ value }` */\n  scan: { value: string };\n  /** Emitted on permission, support, or detection failure. detail: `{ error }` */\n  error: { error: SigilError };\n  /** Emitted on every view-state transition. detail: `{ status }` */\n  status: { status: OreQrScannerStatus };\n};\n\nconst SIZES: Record<ComponentSize, number> = { lg: 360, md: 280, sm: 200 };\n\nconst cssSize = (size: ComponentSize | number): number => (typeof size === 'number' ? size : (SIZES[size] ?? SIZES.md));\n\nconst STATUS_TEXT: Record<OreQrScannerStatus, string> = {\n  denied: 'Camera access denied. Allow camera permission and retry.',\n  error: 'Scanning failed.',\n  idle: 'Camera is off.',\n  result: 'Code scanned.',\n  scanning: 'Point the camera at a QR code.',\n  starting: 'Starting camera…',\n  unsupported: 'QR scanning is not supported in this browser.',\n};\n\n/**\n * Camera QR scanner built on `createQrScanner` (native `BarcodeDetector`).\n * `active` starts/stops the camera externally; internal Start/Stop controls\n * drive the same intent. Unsupported browsers render the `unsupported` slot\n * so apps can substitute a paste fallback.\n *\n * @element ore-qr-scanner\n *\n * @attr {boolean} active - Start/stop the camera\n * @attr {string} facing-mode - 'environment' | 'user' (default 'environment')\n * @attr {number} interval - Ms between detection passes (default 200)\n * @attr {boolean} once - Stop after first scan (default true)\n * @attr {string} size - 'sm' | 'md' | 'lg', or a pixel value\n * @attr {string} label - Region label (default \"QR code scanner\")\n * @attr {string} rounded - Border radius\n *\n * @fires scan - detail: `{ value }` on each decode\n * @fires error - detail: `{ error }` on permission/support/detection failure\n * @fires status - detail: `{ status }` on view-state transitions\n *\n * @slot overlay - Content layered over the camera preview\n * @slot unsupported - Fallback UI when scanning is unsupported (e.g. paste input)\n * @slot footer - Extra content below the status row\n *\n * @cssprop --qr-scanner-size - Preview edge length in px (overrides `size`)\n * @cssprop --qr-scanner-radius - Border radius\n * @cssprop --qr-scanner-bg - Preview background while idle\n * @cssprop --qr-scanner-viewfinder-color - Viewfinder frame color\n * @cssprop --qr-scanner-status-color - Status text color\n *\n * @part wrapper - Outer container\n * @part stage - Square preview area (video + overlays)\n * @part video - The `<video>` preview element\n * @part viewfinder - Decorative scan frame over the preview\n * @part state - Idle/error/denied/unsupported/result panel\n * @part status - Live status line\n * @part controls - Button row\n *\n * @example\n * ```html\n * <ore-qr-scanner active @scan=${(e) => pair(e.detail.value)}></ore-qr-scanner>\n * ```\n */\nexport const QR_SCANNER_TAG = 'ore-qr-scanner' as const;\n\ndefine<OreQrScannerProps>(QR_SCANNER_TAG, {\n  props: {\n    active: prop.bool(false),\n    'facing-mode': prop.oneOf(['environment', 'user'] as const, 'environment'),\n    interval: prop.number(200),\n    label: prop.string('QR code scanner'),\n    once: prop.bool(true),\n    ...roundableBundle,\n    scannerFactory: prop.data<QrScannerFactory>(),\n    size: {\n      default: 'md' as ComponentSize | number,\n      parse: (v) => (v !== null && /^\\d+$/.test(v) ? Number(v) : ((v ?? 'md') as ComponentSize)),\n    },\n  },\n\n  setup(props) {\n    const emit = useEmit<OreQrScannerEvents>();\n    const videoRef = ref<HTMLVideoElement>();\n\n    const status = signal<OreQrScannerStatus>('idle');\n    const failure = signal('');\n    const lastValue = signal('');\n\n    // `active` is an imperative hint mirrored into internal intent; the\n    // internal Start/Stop buttons drive the same signal.\n    const requested = signal(false);\n    watch(\n      props.active,\n      (active) => {\n        requested.value = active === true;\n      },\n      { immediate: true },\n    );\n\n    const setStatus = (next: OreQrScannerStatus, message = ''): void => {\n      failure.value = message;\n      if (status.value === next) return;\n      status.value = next;\n      emit('status', { status: next });\n    };\n\n    const statusText = (): string =>\n      status.value === 'result' && lastValue.value ? `Code scanned: ${lastValue.value}` : STATUS_TEXT[status.value];\n\n    // Eager support check so VitePress/jsdom (no BarcodeDetector) land on the\n    // unsupported state immediately; an injected factory skips the gate.\n    if (!props.scannerFactory.value && !isQrScanSupported()) {\n      setStatus('unsupported', STATUS_TEXT.unsupported);\n    }\n\n    const startScanner = async (scanner: QrScanner): Promise<void> => {\n      try {\n        await scanner.start();\n        // Intent may have been withdrawn while getUserMedia was pending.\n        if (!requested.value) scanner.stop();\n      } catch (error) {\n        requested.value = false;\n        const sigilError =\n          error instanceof SigilError ? error : new SigilError('QR scanner failed to start', { cause: error });\n        if (sigilError instanceof SigilUnsupportedError) setStatus('unsupported', sigilError.message);\n        else if (sigilError instanceof SigilPermissionError) setStatus('denied', sigilError.message);\n        else setStatus('error', sigilError.message);\n        emit('error', { error: sigilError });\n      }\n    };\n\n    const wire = (scanner: QrScanner): void => {\n      scanner.onResult((result: QrScanResult) => {\n        lastValue.value = result.value;\n        emit('scan', { value: result.value });\n        if (props.once.value) setStatus('result');\n      });\n      scanner.tap((event) => {\n        if (event.type === 'status-change') {\n          if (event.status === 'starting') setStatus('starting');\n          else if (event.status === 'scanning') setStatus('scanning');\n          // 'idle' after a once-result must not clobber the result view.\n          else if (event.status === 'idle' && status.value !== 'result') setStatus('idle');\n        } else if (event.type === 'error') {\n          emit('error', { error: event.error });\n          if (status.value === 'scanning' || status.value === 'starting') setStatus('error', event.error.message);\n        }\n      });\n    };\n\n    onElement(videoRef, (video) => {\n      const current = signal<QrScanner | null>(null);\n\n      // Rebuild when scan-affecting props change; cleanup disposes the previous scanner.\n      watchEffect(() => {\n        const factory = props.scannerFactory.value ?? createQrScanner;\n        const scanner = factory({\n          constraints: { facingMode: props['facing-mode'].value ?? 'environment' },\n          intervalMs: props.interval.value ?? 200,\n          once: props.once.value ?? true,\n          video,\n        });\n        current.value = scanner;\n        wire(scanner);\n        return () => scanner.dispose();\n      });\n\n      // Drive start/stop from intent + the current scanner instance. `watch`\n      // (untracked callback) is required over `watchEffect`: `scanner.stop()`\n      // synchronously re-enters the tap handler, and tracking its `status`\n      // reads would retrigger this effect on every transition — an infinite loop.\n      watch(\n        () => [requested.value, current.value] as const,\n        ([want, scanner]) => {\n          if (!scanner || scanner.disposed) return;\n          if (want) void startScanner(scanner);\n          else scanner.stop();\n        },\n        { immediate: true },\n      );\n    });\n\n    const resume = (): void => {\n      requested.value = true;\n    };\n    const pause = (): void => {\n      requested.value = false;\n    };\n\n    const showVideo = (): boolean => status.value === 'starting' || status.value === 'scanning';\n    const showControls = (): boolean => status.value !== 'unsupported';\n\n    return html`\n      <div\n        class=\"wrapper\"\n        part=\"wrapper\"\n        role=\"region\"\n        aria-label=${() => props.label.value}\n        style=${() => `--_size-px: ${cssSize(props.size.value ?? 'md')}px`}>\n        <div class=\"stage\" part=\"stage\">\n          <video\n            ref=${videoRef}\n            part=\"video\"\n            autoplay\n            playsinline\n            muted\n            aria-hidden=\"true\"\n            ?hidden=${() => !showVideo()}></video>\n          <div class=\"viewfinder\" part=\"viewfinder\" aria-hidden=\"true\" ?hidden=${() => status.value !== 'scanning'}></div>\n          <div class=\"overlay\"><slot name=\"overlay\"></slot></div>\n          ${when(\n            () => !showVideo(),\n            () => html`\n              <div class=\"state\" part=\"state\" data-state=${() => status.value}>\n                ${when(\n                  () => status.value === 'unsupported',\n                  () => html`<slot name=\"unsupported\"></slot>`,\n                  () => html`\n                    ${when(\n                      () => status.value === 'result',\n                      () => html`<ore-icon name=\"check\" size=\"24\" aria-hidden=\"true\"></ore-icon>`,\n                      () => html`<ore-icon name=\"camera\" size=\"24\" aria-hidden=\"true\"></ore-icon>`,\n                    )}\n                    <span class=\"state-text\">${() => failure.value || STATUS_TEXT[status.value]}</span>\n                  `,\n                )}\n              </div>\n            `,\n          )}\n        </div>\n        <div class=\"status\" part=\"status\" role=\"status\">${statusText}</div>\n        ${when(\n          showControls,\n          () => html`\n            <div class=\"controls\" part=\"controls\">\n              ${when(\n                () => status.value === 'starting' || status.value === 'scanning',\n                () => html`\n                  <ore-button variant=\"ghost\" size=\"sm\" @click=${pause}>Stop</ore-button>\n                `,\n                () => html`\n                  <ore-button\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    @click=${resume}>\n                    ${() =>\n                      status.value === 'result'\n                        ? 'Scan again'\n                        : status.value === 'denied' || status.value === 'error'\n                          ? 'Retry'\n                          : 'Start camera'}\n                  </ore-button>\n                `,\n              )}\n            </div>\n          `,\n        )}\n        <slot name=\"footer\"></slot>\n      </div>\n    `;\n  },\n  styles: [roundedVariantMixin, componentStyles],\n});\n"],"mappings":"2VAwDA,IAAM,EAAuC,CAAE,GAAI,IAAK,GAAI,IAAK,GAAI,GAAI,EAEnE,QAAW,GAA0C,OAAO,GAAS,SAAW,EAAQ,EAAM,IAAS,EAAM,GAE7G,EAAkD,CACtD,OAAQ,2DACR,MAAO,mBACP,KAAM,iBACN,OAAQ,gBACR,SAAU,iCACV,SAAU,mBACV,YAAa,+CACf,EA6Ca,EAAiB,kBAE9B,EAAA,EAAA,OAAA,CAA0B,EAAgB,CACxC,MAAO,CACL,OAAQ,EAAA,KAAK,KAAK,EAAK,EACvB,cAAe,EAAA,KAAK,MAAM,CAAC,cAAe,MAAM,EAAY,aAAa,EACzE,SAAU,EAAA,KAAK,OAAO,GAAG,EACzB,MAAO,EAAA,KAAK,OAAO,iBAAiB,EACpC,KAAM,EAAA,KAAK,KAAK,EAAI,EACpB,GAAG,EAAA,gBACH,eAAgB,EAAA,KAAK,KAAuB,EAC5C,KAAM,CACJ,QAAS,KACT,MAAQ,GAAO,IAAM,MAAQ,QAAQ,KAAK,CAAC,EAAI,OAAO,CAAC,EAAM,GAAK,IACpE,CACF,EAEA,MAAM,EAAO,CACX,IAAM,GAAA,EAAO,EAAA,QAAA,CAA4B,EACnC,GAAA,EAAW,EAAA,IAAA,CAAsB,EAEjC,GAAA,EAAS,EAAA,OAAA,CAA2B,MAAM,EAC1C,GAAA,EAAU,EAAA,OAAA,CAAO,EAAE,EACnB,GAAA,EAAY,EAAA,OAAA,CAAO,EAAE,EAIrB,GAAA,EAAY,EAAA,OAAA,CAAO,EAAK,GAC9B,EAAA,EAAA,MAAA,CACE,EAAM,OACL,GAAW,CACV,EAAU,MAAQ,IAAW,EAC/B,EACA,CAAE,UAAW,EAAK,CACpB,EAEA,IAAM,WAAa,EAA0B,EAAU,KAAa,CAClE,EAAQ,MAAQ,EACZ,EAAO,QAAU,IACrB,EAAO,MAAQ,EACf,EAAK,SAAU,CAAE,OAAQ,CAAK,CAAC,EACjC,EAEM,eACJ,EAAO,QAAU,UAAY,EAAU,MAAQ,iBAAiB,EAAU,QAAU,EAAY,EAAO,OAIrG,CAAC,EAAM,eAAe,OAAS,EAAA,EAAC,EAAA,kBAAA,CAAkB,GACpD,UAAU,cAAe,EAAY,WAAW,EAGlD,IAAM,aAAe,KAAO,IAAsC,CAChE,GAAI,CACF,MAAM,EAAQ,MAAM,EAEf,EAAU,OAAO,EAAQ,KAAK,CACrC,OAAS,EAAO,CACd,EAAU,MAAQ,GAClB,IAAM,EACJ,aAAiB,EAAA,WAAa,EAAQ,IAAI,EAAA,WAAW,6BAA8B,CAAE,MAAO,CAAM,CAAC,EACjG,aAAsB,EAAA,sBAAuB,UAAU,cAAe,EAAW,OAAO,EACnF,aAAsB,EAAA,qBAAsB,UAAU,SAAU,EAAW,OAAO,EACtF,UAAU,QAAS,EAAW,OAAO,EAC1C,EAAK,QAAS,CAAE,MAAO,CAAW,CAAC,CACrC,CACF,EAEM,KAAQ,GAA6B,CACzC,EAAQ,SAAU,GAAyB,CACzC,EAAU,MAAQ,EAAO,MACzB,EAAK,OAAQ,CAAE,MAAO,EAAO,KAAM,CAAC,EAChC,EAAM,KAAK,OAAO,UAAU,QAAQ,CAC1C,CAAC,EACD,EAAQ,IAAK,GAAU,CACjB,EAAM,OAAS,gBACb,EAAM,SAAW,WAAY,UAAU,UAAU,EAC5C,EAAM,SAAW,WAAY,UAAU,UAAU,EAEjD,EAAM,SAAW,QAAU,EAAO,QAAU,UAAU,UAAU,MAAM,EACtE,EAAM,OAAS,UACxB,EAAK,QAAS,CAAE,MAAO,EAAM,KAAM,CAAC,GAChC,EAAO,QAAU,YAAc,EAAO,QAAU,aAAY,UAAU,QAAS,EAAM,MAAM,OAAO,EAE1G,CAAC,CACH,GAEA,EAAA,EAAA,UAAA,CAAU,EAAW,GAAU,CAC7B,IAAM,GAAA,EAAU,EAAA,OAAA,CAAyB,IAAI,GAG7C,EAAA,EAAA,YAAA,KAAkB,CAEhB,IAAM,GADU,EAAM,eAAe,OAAS,EAAA,gBAAA,CACtB,CACtB,YAAa,CAAE,WAAY,EAAM,cAAc,CAAC,OAAS,aAAc,EACvE,WAAY,EAAM,SAAS,OAAS,IACpC,KAAM,EAAM,KAAK,OAAS,GAC1B,OACF,CAAC,EAGD,MAFA,GAAQ,MAAQ,EAChB,KAAK,CAAO,MACC,EAAQ,QAAQ,CAC/B,CAAC,GAMD,EAAA,EAAA,MAAA,KACQ,CAAC,EAAU,MAAO,EAAQ,KAAK,GACpC,CAAC,EAAM,KAAa,CACd,GAAW,GAAQ,WACpB,EAAM,aAAkB,CAAO,EAC9B,EAAQ,KAAK,EACpB,EACA,CAAE,UAAW,EAAK,CACpB,CACF,CAAC,EAED,IAAM,WAAqB,CACzB,EAAU,MAAQ,EACpB,EACM,UAAoB,CACxB,EAAU,MAAQ,EACpB,EAEM,cAA2B,EAAO,QAAU,YAAc,EAAO,QAAU,WAC3E,iBAA8B,EAAO,QAAU,cAErD,MAAO,GAAA,IAAI;;;;;yBAKY,EAAM,MAAM,MAAM;oBACvB,eAAe,QAAQ,EAAM,KAAK,OAAS,IAAI,EAAE,IAAI;;;kBAGzD,EAAS;;;;;;0BAMC,CAAC,UAAU,EAAE;qFAC8C,EAAO,QAAU,WAAW;;aAEvG,EAAA,EAAA,KAAA,KACM,CAAC,UAAU,MACX,EAAA,IAAI;+DAC2C,EAAO,MAAM;mBAC5D,EAAA,EAAA,KAAA,KACM,EAAO,QAAU,kBACjB,EAAA,IAAI,uCACJ,EAAA,IAAI;uBACN,EAAA,EAAA,KAAA,KACM,EAAO,QAAU,aACjB,EAAA,IAAI,sEACJ,EAAA,IAAI,kEACZ,EAAE;mDAC+B,EAAQ,OAAS,EAAY,EAAO,OAAO;mBAEhF,EAAE;;aAGR,EAAE;;0DAE8C,WAAW;WAC3D,EAAA,EAAA,KAAA,CACA,iBACM,EAAA,IAAI;;iBAEJ,EAAA,EAAA,KAAA,KACM,EAAO,QAAU,YAAc,EAAO,QAAU,eAChD,EAAA,IAAI;iEACuC,MAAM;sBAEjD,EAAA,IAAI;;;;6BAIG,OAAO;0BAEd,EAAO,QAAU,SACb,aACA,EAAO,QAAU,UAAY,EAAO,QAAU,QAC5C,QACA,eAAe;;iBAG7B,EAAE;;WAGR,EAAE;;;KAIR,EACA,OAAQ,CAAC,EAAA,oBAAqB,EAAA,OAAe,CAC/C,CAAC"}
+{"version":3,"file":"qr-scanner.cjs","names":[],"sources":["../src/inputs/qr-scanner/qr-scanner.ts"],"sourcesContent":["import { define, html, onElement, prop, ref, useEmit, watchEffect, when } from '@vielzeug/ore';\nimport { signal, watch } from '@vielzeug/ripple';\nimport {\n  createQrScanner,\n  isQrScanSupported,\n  type QrScanner,\n  type QrScannerOptions,\n  type QrScanResult,\n  SigilError,\n  SigilPermissionError,\n  SigilUnsupportedError,\n} from '@vielzeug/sigil';\nimport { roundableBundle } from '../../shared';\nimport { roundedVariantMixin } from '../../styles';\nimport type { ComponentSize, RoundedSize } from '../../types';\n\nimport componentStyles from './qr-scanner.css?inline';\n\nexport { ICON_TAG } from '../../content/icon/icon';\nexport { BUTTON_TAG } from '../button/button';\n/** Testing hook: inject a fake `createQrScanner` without touching globals. */\nexport type QrScannerFactory = (options: QrScannerOptions) => QrScanner;\n\n/** Component-level view states; sigil's transport states are mapped onto these. */\nexport type OreQrScannerStatus = 'idle' | 'starting' | 'scanning' | 'result' | 'unsupported' | 'denied' | 'error';\n\n/** QR scanner component properties */\nexport type OreQrScannerProps = {\n  /** Start/stop the camera externally; mirrors into internal intent on change */\n  active?: boolean;\n  /** Preferred camera: 'environment' (rear) or 'user' (front) */\n  'facing-mode'?: 'environment' | 'user';\n  /** Minimum ms between detection passes */\n  interval?: number;\n  /** Accessible label for the scanner region */\n  label?: string;\n  /** Stop after the first successful scan (default true) */\n  once?: boolean;\n  /** Border radius size */\n  rounded?: RoundedSize;\n  /** JS-only testing hook: custom scanner factory (defaults to `createQrScanner`) */\n  scannerFactory?: QrScannerFactory;\n  /** Preview size: named scale or pixel number */\n  size?: ComponentSize | number;\n};\n\n/** QR scanner component events */\nexport type OreQrScannerEvents = {\n  /** Emitted on every successful decode. detail: `{ value }` */\n  scan: { value: string };\n  /** Emitted on permission, support, or detection failure. detail: `{ error }` */\n  error: { error: SigilError };\n  /** Emitted on every view-state transition. detail: `{ status }` */\n  status: { status: OreQrScannerStatus };\n};\n\nconst SIZES: Record<ComponentSize, number> = { lg: 360, md: 280, sm: 200 };\n\nconst cssSize = (size: ComponentSize | number): number => (typeof size === 'number' ? size : (SIZES[size] ?? SIZES.md));\n\nconst STATUS_TEXT: Record<OreQrScannerStatus, string> = {\n  denied: 'Camera access denied. Allow camera permission and retry.',\n  error: 'Scanning failed.',\n  idle: 'Camera is off.',\n  result: 'Code scanned.',\n  scanning: 'Point the camera at a QR code.',\n  starting: 'Starting camera…',\n  unsupported: 'QR scanning is not supported in this browser.',\n};\n\n/**\n * Camera QR scanner built on `createQrScanner` (native `BarcodeDetector`).\n * `active` starts/stops the camera externally; internal Start/Stop controls\n * drive the same intent. Unsupported browsers render the `unsupported` slot\n * so apps can substitute a paste fallback.\n *\n * @element ore-qr-scanner\n *\n * @attr {boolean} active - Start/stop the camera\n * @attr {string} facing-mode - 'environment' | 'user' (default 'environment')\n * @attr {number} interval - Ms between detection passes (default 200)\n * @attr {boolean} once - Stop after first scan (default true)\n * @attr {string} size - 'sm' | 'md' | 'lg', or a pixel value\n * @attr {string} label - Region label (default \"QR code scanner\")\n * @attr {string} rounded - Border radius\n *\n * @fires scan - detail: `{ value }` on each decode\n * @fires error - detail: `{ error }` on permission/support/detection failure\n * @fires status - detail: `{ status }` on view-state transitions\n *\n * @slot overlay - Content layered over the camera preview\n * @slot unsupported - Fallback UI when scanning is unsupported (e.g. paste input)\n * @slot footer - Extra content below the status row\n *\n * @cssprop --qr-scanner-size - Preview edge length in px (overrides `size`)\n * @cssprop --qr-scanner-radius - Border radius\n * @cssprop --qr-scanner-bg - Preview background while idle\n * @cssprop --qr-scanner-viewfinder-color - Viewfinder frame color\n * @cssprop --qr-scanner-status-color - Status text color\n *\n * @part wrapper - Outer container\n * @part stage - Square preview area (video + overlays)\n * @part video - The `<video>` preview element\n * @part viewfinder - Decorative scan frame over the preview\n * @part state - Idle/error/denied/unsupported/result panel\n * @part status - Live status line\n * @part controls - Button row\n *\n * @example\n * ```html\n * <ore-qr-scanner active @scan=${(e) => pair(e.detail.value)}></ore-qr-scanner>\n * ```\n */\nexport const QR_SCANNER_TAG = 'ore-qr-scanner' as const;\n\ndefine<OreQrScannerProps>(QR_SCANNER_TAG, {\n  props: {\n    active: prop.bool(false),\n    'facing-mode': prop.oneOf(['environment', 'user'] as const, 'environment'),\n    interval: prop.number(200),\n    label: prop.string('QR code scanner'),\n    once: prop.bool(true),\n    ...roundableBundle,\n    scannerFactory: prop.data<QrScannerFactory>(),\n    size: {\n      default: 'md' as ComponentSize | number,\n      parse: (v) => (v !== null && /^\\d+$/.test(v) ? Number(v) : ((v ?? 'md') as ComponentSize)),\n    },\n  },\n\n  setup(props) {\n    const emit = useEmit<OreQrScannerEvents>();\n    const videoRef = ref<HTMLVideoElement>();\n\n    const status = signal<OreQrScannerStatus>('idle');\n    const failure = signal('');\n    const lastValue = signal('');\n\n    // `active` is an imperative hint mirrored into internal intent; the\n    // internal Start/Stop buttons drive the same signal.\n    const requested = signal(false);\n    watch(\n      props.active,\n      (active) => {\n        requested.value = active === true;\n      },\n      { immediate: true },\n    );\n\n    const setStatus = (next: OreQrScannerStatus, message = ''): void => {\n      failure.value = message;\n      if (status.value === next) return;\n      status.value = next;\n      emit('status', { status: next });\n    };\n\n    const statusText = (): string =>\n      status.value === 'result' && lastValue.value ? `Code scanned: ${lastValue.value}` : STATUS_TEXT[status.value];\n\n    // Eager support check so VitePress/jsdom (no BarcodeDetector) land on the\n    // unsupported state immediately; an injected factory skips the gate.\n    if (!props.scannerFactory.value && !isQrScanSupported()) {\n      setStatus('unsupported', STATUS_TEXT.unsupported);\n    }\n\n    const startScanner = async (scanner: QrScanner): Promise<void> => {\n      try {\n        await scanner.start();\n        // Intent may have been withdrawn while getUserMedia was pending.\n        if (!requested.value) scanner.stop();\n      } catch (error) {\n        requested.value = false;\n        const sigilError =\n          error instanceof SigilError ? error : new SigilError('QR scanner failed to start', { cause: error });\n        if (sigilError instanceof SigilUnsupportedError) setStatus('unsupported', sigilError.message);\n        else if (sigilError instanceof SigilPermissionError) setStatus('denied', sigilError.message);\n        else setStatus('error', sigilError.message);\n        emit('error', { error: sigilError });\n      }\n    };\n\n    const wire = (scanner: QrScanner): void => {\n      scanner.onResult((result: QrScanResult) => {\n        lastValue.value = result.value;\n        emit('scan', { value: result.value });\n        if (props.once.value) setStatus('result');\n      });\n      scanner.tap((event) => {\n        if (event.type === 'status-change') {\n          if (event.status === 'starting') setStatus('starting');\n          else if (event.status === 'scanning') setStatus('scanning');\n          // 'idle' after a once-result must not clobber the result view.\n          else if (event.status === 'idle' && status.value !== 'result') setStatus('idle');\n        } else if (event.type === 'error') {\n          emit('error', { error: event.error });\n          if (status.value === 'scanning' || status.value === 'starting') setStatus('error', event.error.message);\n        }\n      });\n    };\n\n    onElement(videoRef, (video) => {\n      const current = signal<QrScanner | null>(null);\n\n      // Rebuild when scan-affecting props change; cleanup disposes the previous scanner.\n      watchEffect(() => {\n        const factory = props.scannerFactory.value ?? createQrScanner;\n        const scanner = factory({\n          constraints: { facingMode: props['facing-mode'].value ?? 'environment' },\n          intervalMs: props.interval.value ?? 200,\n          once: props.once.value ?? true,\n          video,\n        });\n        current.value = scanner;\n        wire(scanner);\n        return () => scanner.dispose();\n      });\n\n      // Drive start/stop from intent + the current scanner instance. `watch`\n      // (untracked callback) is required over `watchEffect`: `scanner.stop()`\n      // synchronously re-enters the tap handler, and tracking its `status`\n      // reads would retrigger this effect on every transition: an infinite loop.\n      watch(\n        () => [requested.value, current.value] as const,\n        ([want, scanner]) => {\n          if (!scanner || scanner.disposed) return;\n          if (want) void startScanner(scanner);\n          else scanner.stop();\n        },\n        { immediate: true },\n      );\n    });\n\n    const resume = (): void => {\n      requested.value = true;\n    };\n    const pause = (): void => {\n      requested.value = false;\n    };\n\n    const showVideo = (): boolean => status.value === 'starting' || status.value === 'scanning';\n    const showControls = (): boolean => status.value !== 'unsupported';\n\n    return html`\n      <div\n        class=\"wrapper\"\n        part=\"wrapper\"\n        role=\"region\"\n        aria-label=${() => props.label.value}\n        style=${() => `--_size-px: ${cssSize(props.size.value ?? 'md')}px`}>\n        <div class=\"stage\" part=\"stage\">\n          <video\n            ref=${videoRef}\n            part=\"video\"\n            autoplay\n            playsinline\n            muted\n            aria-hidden=\"true\"\n            ?hidden=${() => !showVideo()}></video>\n          <div class=\"viewfinder\" part=\"viewfinder\" aria-hidden=\"true\" ?hidden=${() => status.value !== 'scanning'}></div>\n          <div class=\"overlay\"><slot name=\"overlay\"></slot></div>\n          ${when(\n            () => !showVideo(),\n            () => html`\n              <div class=\"state\" part=\"state\" data-state=${() => status.value}>\n                ${when(\n                  () => status.value === 'unsupported',\n                  () => html`<slot name=\"unsupported\"></slot>`,\n                  () => html`\n                    ${when(\n                      () => status.value === 'result',\n                      () => html`<ore-icon name=\"check\" size=\"24\" aria-hidden=\"true\"></ore-icon>`,\n                      () => html`<ore-icon name=\"camera\" size=\"24\" aria-hidden=\"true\"></ore-icon>`,\n                    )}\n                    <span class=\"state-text\">${() => failure.value || STATUS_TEXT[status.value]}</span>\n                  `,\n                )}\n              </div>\n            `,\n          )}\n        </div>\n        <div class=\"status\" part=\"status\" role=\"status\">${statusText}</div>\n        ${when(\n          showControls,\n          () => html`\n            <div class=\"controls\" part=\"controls\">\n              ${when(\n                () => status.value === 'starting' || status.value === 'scanning',\n                () => html`\n                  <ore-button variant=\"ghost\" size=\"sm\" @click=${pause}>Stop</ore-button>\n                `,\n                () => html`\n                  <ore-button\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    @click=${resume}>\n                    ${() =>\n                      status.value === 'result'\n                        ? 'Scan again'\n                        : status.value === 'denied' || status.value === 'error'\n                          ? 'Retry'\n                          : 'Start camera'}\n                  </ore-button>\n                `,\n              )}\n            </div>\n          `,\n        )}\n        <slot name=\"footer\"></slot>\n      </div>\n    `;\n  },\n  styles: [roundedVariantMixin, componentStyles],\n});\n"],"mappings":"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"}

package/dist/qr-scanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"qr-scanner.js","names":[],"sources":["../src/inputs/qr-scanner/qr-scanner.ts"],"sourcesContent":["import { define, html, onElement, prop, ref, useEmit, watchEffect, when } from '@vielzeug/ore';\nimport { signal, watch } from '@vielzeug/ripple';\nimport {\n  createQrScanner,\n  isQrScanSupported,\n  type QrScanner,\n  type QrScannerOptions,\n  type QrScanResult,\n  SigilError,\n  SigilPermissionError,\n  SigilUnsupportedError,\n} from '@vielzeug/sigil';\nimport { roundableBundle } from '../../shared';\nimport { roundedVariantMixin } from '../../styles';\nimport type { ComponentSize, RoundedSize } from '../../types';\n\nimport componentStyles from './qr-scanner.css?inline';\n\nexport { ICON_TAG } from '../../content/icon/icon';\nexport { BUTTON_TAG } from '../button/button';\n/** Testing hook — inject a fake `createQrScanner` without touching globals. */\nexport type QrScannerFactory = (options: QrScannerOptions) => QrScanner;\n\n/** Component-level view states; sigil's transport states are mapped onto these. */\nexport type OreQrScannerStatus = 'idle' | 'starting' | 'scanning' | 'result' | 'unsupported' | 'denied' | 'error';\n\n/** QR scanner component properties */\nexport type OreQrScannerProps = {\n  /** Start/stop the camera externally; mirrors into internal intent on change */\n  active?: boolean;\n  /** Preferred camera: 'environment' (rear) or 'user' (front) */\n  'facing-mode'?: 'environment' | 'user';\n  /** Minimum ms between detection passes */\n  interval?: number;\n  /** Accessible label for the scanner region */\n  label?: string;\n  /** Stop after the first successful scan (default true) */\n  once?: boolean;\n  /** Border radius size */\n  rounded?: RoundedSize;\n  /** JS-only testing hook: custom scanner factory (defaults to `createQrScanner`) */\n  scannerFactory?: QrScannerFactory;\n  /** Preview size: named scale or pixel number */\n  size?: ComponentSize | number;\n};\n\n/** QR scanner component events */\nexport type OreQrScannerEvents = {\n  /** Emitted on every successful decode. detail: `{ value }` */\n  scan: { value: string };\n  /** Emitted on permission, support, or detection failure. detail: `{ error }` */\n  error: { error: SigilError };\n  /** Emitted on every view-state transition. detail: `{ status }` */\n  status: { status: OreQrScannerStatus };\n};\n\nconst SIZES: Record<ComponentSize, number> = { lg: 360, md: 280, sm: 200 };\n\nconst cssSize = (size: ComponentSize | number): number => (typeof size === 'number' ? size : (SIZES[size] ?? SIZES.md));\n\nconst STATUS_TEXT: Record<OreQrScannerStatus, string> = {\n  denied: 'Camera access denied. Allow camera permission and retry.',\n  error: 'Scanning failed.',\n  idle: 'Camera is off.',\n  result: 'Code scanned.',\n  scanning: 'Point the camera at a QR code.',\n  starting: 'Starting camera…',\n  unsupported: 'QR scanning is not supported in this browser.',\n};\n\n/**\n * Camera QR scanner built on `createQrScanner` (native `BarcodeDetector`).\n * `active` starts/stops the camera externally; internal Start/Stop controls\n * drive the same intent. Unsupported browsers render the `unsupported` slot\n * so apps can substitute a paste fallback.\n *\n * @element ore-qr-scanner\n *\n * @attr {boolean} active - Start/stop the camera\n * @attr {string} facing-mode - 'environment' | 'user' (default 'environment')\n * @attr {number} interval - Ms between detection passes (default 200)\n * @attr {boolean} once - Stop after first scan (default true)\n * @attr {string} size - 'sm' | 'md' | 'lg', or a pixel value\n * @attr {string} label - Region label (default \"QR code scanner\")\n * @attr {string} rounded - Border radius\n *\n * @fires scan - detail: `{ value }` on each decode\n * @fires error - detail: `{ error }` on permission/support/detection failure\n * @fires status - detail: `{ status }` on view-state transitions\n *\n * @slot overlay - Content layered over the camera preview\n * @slot unsupported - Fallback UI when scanning is unsupported (e.g. paste input)\n * @slot footer - Extra content below the status row\n *\n * @cssprop --qr-scanner-size - Preview edge length in px (overrides `size`)\n * @cssprop --qr-scanner-radius - Border radius\n * @cssprop --qr-scanner-bg - Preview background while idle\n * @cssprop --qr-scanner-viewfinder-color - Viewfinder frame color\n * @cssprop --qr-scanner-status-color - Status text color\n *\n * @part wrapper - Outer container\n * @part stage - Square preview area (video + overlays)\n * @part video - The `<video>` preview element\n * @part viewfinder - Decorative scan frame over the preview\n * @part state - Idle/error/denied/unsupported/result panel\n * @part status - Live status line\n * @part controls - Button row\n *\n * @example\n * ```html\n * <ore-qr-scanner active @scan=${(e) => pair(e.detail.value)}></ore-qr-scanner>\n * ```\n */\nexport const QR_SCANNER_TAG = 'ore-qr-scanner' as const;\n\ndefine<OreQrScannerProps>(QR_SCANNER_TAG, {\n  props: {\n    active: prop.bool(false),\n    'facing-mode': prop.oneOf(['environment', 'user'] as const, 'environment'),\n    interval: prop.number(200),\n    label: prop.string('QR code scanner'),\n    once: prop.bool(true),\n    ...roundableBundle,\n    scannerFactory: prop.data<QrScannerFactory>(),\n    size: {\n      default: 'md' as ComponentSize | number,\n      parse: (v) => (v !== null && /^\\d+$/.test(v) ? Number(v) : ((v ?? 'md') as ComponentSize)),\n    },\n  },\n\n  setup(props) {\n    const emit = useEmit<OreQrScannerEvents>();\n    const videoRef = ref<HTMLVideoElement>();\n\n    const status = signal<OreQrScannerStatus>('idle');\n    const failure = signal('');\n    const lastValue = signal('');\n\n    // `active` is an imperative hint mirrored into internal intent; the\n    // internal Start/Stop buttons drive the same signal.\n    const requested = signal(false);\n    watch(\n      props.active,\n      (active) => {\n        requested.value = active === true;\n      },\n      { immediate: true },\n    );\n\n    const setStatus = (next: OreQrScannerStatus, message = ''): void => {\n      failure.value = message;\n      if (status.value === next) return;\n      status.value = next;\n      emit('status', { status: next });\n    };\n\n    const statusText = (): string =>\n      status.value === 'result' && lastValue.value ? `Code scanned: ${lastValue.value}` : STATUS_TEXT[status.value];\n\n    // Eager support check so VitePress/jsdom (no BarcodeDetector) land on the\n    // unsupported state immediately; an injected factory skips the gate.\n    if (!props.scannerFactory.value && !isQrScanSupported()) {\n      setStatus('unsupported', STATUS_TEXT.unsupported);\n    }\n\n    const startScanner = async (scanner: QrScanner): Promise<void> => {\n      try {\n        await scanner.start();\n        // Intent may have been withdrawn while getUserMedia was pending.\n        if (!requested.value) scanner.stop();\n      } catch (error) {\n        requested.value = false;\n        const sigilError =\n          error instanceof SigilError ? error : new SigilError('QR scanner failed to start', { cause: error });\n        if (sigilError instanceof SigilUnsupportedError) setStatus('unsupported', sigilError.message);\n        else if (sigilError instanceof SigilPermissionError) setStatus('denied', sigilError.message);\n        else setStatus('error', sigilError.message);\n        emit('error', { error: sigilError });\n      }\n    };\n\n    const wire = (scanner: QrScanner): void => {\n      scanner.onResult((result: QrScanResult) => {\n        lastValue.value = result.value;\n        emit('scan', { value: result.value });\n        if (props.once.value) setStatus('result');\n      });\n      scanner.tap((event) => {\n        if (event.type === 'status-change') {\n          if (event.status === 'starting') setStatus('starting');\n          else if (event.status === 'scanning') setStatus('scanning');\n          // 'idle' after a once-result must not clobber the result view.\n          else if (event.status === 'idle' && status.value !== 'result') setStatus('idle');\n        } else if (event.type === 'error') {\n          emit('error', { error: event.error });\n          if (status.value === 'scanning' || status.value === 'starting') setStatus('error', event.error.message);\n        }\n      });\n    };\n\n    onElement(videoRef, (video) => {\n      const current = signal<QrScanner | null>(null);\n\n      // Rebuild when scan-affecting props change; cleanup disposes the previous scanner.\n      watchEffect(() => {\n        const factory = props.scannerFactory.value ?? createQrScanner;\n        const scanner = factory({\n          constraints: { facingMode: props['facing-mode'].value ?? 'environment' },\n          intervalMs: props.interval.value ?? 200,\n          once: props.once.value ?? true,\n          video,\n        });\n        current.value = scanner;\n        wire(scanner);\n        return () => scanner.dispose();\n      });\n\n      // Drive start/stop from intent + the current scanner instance. `watch`\n      // (untracked callback) is required over `watchEffect`: `scanner.stop()`\n      // synchronously re-enters the tap handler, and tracking its `status`\n      // reads would retrigger this effect on every transition — an infinite loop.\n      watch(\n        () => [requested.value, current.value] as const,\n        ([want, scanner]) => {\n          if (!scanner || scanner.disposed) return;\n          if (want) void startScanner(scanner);\n          else scanner.stop();\n        },\n        { immediate: true },\n      );\n    });\n\n    const resume = (): void => {\n      requested.value = true;\n    };\n    const pause = (): void => {\n      requested.value = false;\n    };\n\n    const showVideo = (): boolean => status.value === 'starting' || status.value === 'scanning';\n    const showControls = (): boolean => status.value !== 'unsupported';\n\n    return html`\n      <div\n        class=\"wrapper\"\n        part=\"wrapper\"\n        role=\"region\"\n        aria-label=${() => props.label.value}\n        style=${() => `--_size-px: ${cssSize(props.size.value ?? 'md')}px`}>\n        <div class=\"stage\" part=\"stage\">\n          <video\n            ref=${videoRef}\n            part=\"video\"\n            autoplay\n            playsinline\n            muted\n            aria-hidden=\"true\"\n            ?hidden=${() => !showVideo()}></video>\n          <div class=\"viewfinder\" part=\"viewfinder\" aria-hidden=\"true\" ?hidden=${() => status.value !== 'scanning'}></div>\n          <div class=\"overlay\"><slot name=\"overlay\"></slot></div>\n          ${when(\n            () => !showVideo(),\n            () => html`\n              <div class=\"state\" part=\"state\" data-state=${() => status.value}>\n                ${when(\n                  () => status.value === 'unsupported',\n                  () => html`<slot name=\"unsupported\"></slot>`,\n                  () => html`\n                    ${when(\n                      () => status.value === 'result',\n                      () => html`<ore-icon name=\"check\" size=\"24\" aria-hidden=\"true\"></ore-icon>`,\n                      () => html`<ore-icon name=\"camera\" size=\"24\" aria-hidden=\"true\"></ore-icon>`,\n                    )}\n                    <span class=\"state-text\">${() => failure.value || STATUS_TEXT[status.value]}</span>\n                  `,\n                )}\n              </div>\n            `,\n          )}\n        </div>\n        <div class=\"status\" part=\"status\" role=\"status\">${statusText}</div>\n        ${when(\n          showControls,\n          () => html`\n            <div class=\"controls\" part=\"controls\">\n              ${when(\n                () => status.value === 'starting' || status.value === 'scanning',\n                () => html`\n                  <ore-button variant=\"ghost\" size=\"sm\" @click=${pause}>Stop</ore-button>\n                `,\n                () => html`\n                  <ore-button\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    @click=${resume}>\n                    ${() =>\n                      status.value === 'result'\n                        ? 'Scan again'\n                        : status.value === 'denied' || status.value === 'error'\n                          ? 'Retry'\n                          : 'Start camera'}\n                  </ore-button>\n                `,\n              )}\n            </div>\n          `,\n        )}\n        <slot name=\"footer\"></slot>\n      </div>\n    `;\n  },\n  styles: [roundedVariantMixin, componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"qr-scanner.js","names":[],"sources":["../src/inputs/qr-scanner/qr-scanner.ts"],"sourcesContent":["import { define, html, onElement, prop, ref, useEmit, watchEffect, when } from '@vielzeug/ore';\nimport { signal, watch } from '@vielzeug/ripple';\nimport {\n  createQrScanner,\n  isQrScanSupported,\n  type QrScanner,\n  type QrScannerOptions,\n  type QrScanResult,\n  SigilError,\n  SigilPermissionError,\n  SigilUnsupportedError,\n} from '@vielzeug/sigil';\nimport { roundableBundle } from '../../shared';\nimport { roundedVariantMixin } from '../../styles';\nimport type { ComponentSize, RoundedSize } from '../../types';\n\nimport componentStyles from './qr-scanner.css?inline';\n\nexport { ICON_TAG } from '../../content/icon/icon';\nexport { BUTTON_TAG } from '../button/button';\n/** Testing hook: inject a fake `createQrScanner` without touching globals. */\nexport type QrScannerFactory = (options: QrScannerOptions) => QrScanner;\n\n/** Component-level view states; sigil's transport states are mapped onto these. */\nexport type OreQrScannerStatus = 'idle' | 'starting' | 'scanning' | 'result' | 'unsupported' | 'denied' | 'error';\n\n/** QR scanner component properties */\nexport type OreQrScannerProps = {\n  /** Start/stop the camera externally; mirrors into internal intent on change */\n  active?: boolean;\n  /** Preferred camera: 'environment' (rear) or 'user' (front) */\n  'facing-mode'?: 'environment' | 'user';\n  /** Minimum ms between detection passes */\n  interval?: number;\n  /** Accessible label for the scanner region */\n  label?: string;\n  /** Stop after the first successful scan (default true) */\n  once?: boolean;\n  /** Border radius size */\n  rounded?: RoundedSize;\n  /** JS-only testing hook: custom scanner factory (defaults to `createQrScanner`) */\n  scannerFactory?: QrScannerFactory;\n  /** Preview size: named scale or pixel number */\n  size?: ComponentSize | number;\n};\n\n/** QR scanner component events */\nexport type OreQrScannerEvents = {\n  /** Emitted on every successful decode. detail: `{ value }` */\n  scan: { value: string };\n  /** Emitted on permission, support, or detection failure. detail: `{ error }` */\n  error: { error: SigilError };\n  /** Emitted on every view-state transition. detail: `{ status }` */\n  status: { status: OreQrScannerStatus };\n};\n\nconst SIZES: Record<ComponentSize, number> = { lg: 360, md: 280, sm: 200 };\n\nconst cssSize = (size: ComponentSize | number): number => (typeof size === 'number' ? size : (SIZES[size] ?? SIZES.md));\n\nconst STATUS_TEXT: Record<OreQrScannerStatus, string> = {\n  denied: 'Camera access denied. Allow camera permission and retry.',\n  error: 'Scanning failed.',\n  idle: 'Camera is off.',\n  result: 'Code scanned.',\n  scanning: 'Point the camera at a QR code.',\n  starting: 'Starting camera…',\n  unsupported: 'QR scanning is not supported in this browser.',\n};\n\n/**\n * Camera QR scanner built on `createQrScanner` (native `BarcodeDetector`).\n * `active` starts/stops the camera externally; internal Start/Stop controls\n * drive the same intent. Unsupported browsers render the `unsupported` slot\n * so apps can substitute a paste fallback.\n *\n * @element ore-qr-scanner\n *\n * @attr {boolean} active - Start/stop the camera\n * @attr {string} facing-mode - 'environment' | 'user' (default 'environment')\n * @attr {number} interval - Ms between detection passes (default 200)\n * @attr {boolean} once - Stop after first scan (default true)\n * @attr {string} size - 'sm' | 'md' | 'lg', or a pixel value\n * @attr {string} label - Region label (default \"QR code scanner\")\n * @attr {string} rounded - Border radius\n *\n * @fires scan - detail: `{ value }` on each decode\n * @fires error - detail: `{ error }` on permission/support/detection failure\n * @fires status - detail: `{ status }` on view-state transitions\n *\n * @slot overlay - Content layered over the camera preview\n * @slot unsupported - Fallback UI when scanning is unsupported (e.g. paste input)\n * @slot footer - Extra content below the status row\n *\n * @cssprop --qr-scanner-size - Preview edge length in px (overrides `size`)\n * @cssprop --qr-scanner-radius - Border radius\n * @cssprop --qr-scanner-bg - Preview background while idle\n * @cssprop --qr-scanner-viewfinder-color - Viewfinder frame color\n * @cssprop --qr-scanner-status-color - Status text color\n *\n * @part wrapper - Outer container\n * @part stage - Square preview area (video + overlays)\n * @part video - The `<video>` preview element\n * @part viewfinder - Decorative scan frame over the preview\n * @part state - Idle/error/denied/unsupported/result panel\n * @part status - Live status line\n * @part controls - Button row\n *\n * @example\n * ```html\n * <ore-qr-scanner active @scan=${(e) => pair(e.detail.value)}></ore-qr-scanner>\n * ```\n */\nexport const QR_SCANNER_TAG = 'ore-qr-scanner' as const;\n\ndefine<OreQrScannerProps>(QR_SCANNER_TAG, {\n  props: {\n    active: prop.bool(false),\n    'facing-mode': prop.oneOf(['environment', 'user'] as const, 'environment'),\n    interval: prop.number(200),\n    label: prop.string('QR code scanner'),\n    once: prop.bool(true),\n    ...roundableBundle,\n    scannerFactory: prop.data<QrScannerFactory>(),\n    size: {\n      default: 'md' as ComponentSize | number,\n      parse: (v) => (v !== null && /^\\d+$/.test(v) ? Number(v) : ((v ?? 'md') as ComponentSize)),\n    },\n  },\n\n  setup(props) {\n    const emit = useEmit<OreQrScannerEvents>();\n    const videoRef = ref<HTMLVideoElement>();\n\n    const status = signal<OreQrScannerStatus>('idle');\n    const failure = signal('');\n    const lastValue = signal('');\n\n    // `active` is an imperative hint mirrored into internal intent; the\n    // internal Start/Stop buttons drive the same signal.\n    const requested = signal(false);\n    watch(\n      props.active,\n      (active) => {\n        requested.value = active === true;\n      },\n      { immediate: true },\n    );\n\n    const setStatus = (next: OreQrScannerStatus, message = ''): void => {\n      failure.value = message;\n      if (status.value === next) return;\n      status.value = next;\n      emit('status', { status: next });\n    };\n\n    const statusText = (): string =>\n      status.value === 'result' && lastValue.value ? `Code scanned: ${lastValue.value}` : STATUS_TEXT[status.value];\n\n    // Eager support check so VitePress/jsdom (no BarcodeDetector) land on the\n    // unsupported state immediately; an injected factory skips the gate.\n    if (!props.scannerFactory.value && !isQrScanSupported()) {\n      setStatus('unsupported', STATUS_TEXT.unsupported);\n    }\n\n    const startScanner = async (scanner: QrScanner): Promise<void> => {\n      try {\n        await scanner.start();\n        // Intent may have been withdrawn while getUserMedia was pending.\n        if (!requested.value) scanner.stop();\n      } catch (error) {\n        requested.value = false;\n        const sigilError =\n          error instanceof SigilError ? error : new SigilError('QR scanner failed to start', { cause: error });\n        if (sigilError instanceof SigilUnsupportedError) setStatus('unsupported', sigilError.message);\n        else if (sigilError instanceof SigilPermissionError) setStatus('denied', sigilError.message);\n        else setStatus('error', sigilError.message);\n        emit('error', { error: sigilError });\n      }\n    };\n\n    const wire = (scanner: QrScanner): void => {\n      scanner.onResult((result: QrScanResult) => {\n        lastValue.value = result.value;\n        emit('scan', { value: result.value });\n        if (props.once.value) setStatus('result');\n      });\n      scanner.tap((event) => {\n        if (event.type === 'status-change') {\n          if (event.status === 'starting') setStatus('starting');\n          else if (event.status === 'scanning') setStatus('scanning');\n          // 'idle' after a once-result must not clobber the result view.\n          else if (event.status === 'idle' && status.value !== 'result') setStatus('idle');\n        } else if (event.type === 'error') {\n          emit('error', { error: event.error });\n          if (status.value === 'scanning' || status.value === 'starting') setStatus('error', event.error.message);\n        }\n      });\n    };\n\n    onElement(videoRef, (video) => {\n      const current = signal<QrScanner | null>(null);\n\n      // Rebuild when scan-affecting props change; cleanup disposes the previous scanner.\n      watchEffect(() => {\n        const factory = props.scannerFactory.value ?? createQrScanner;\n        const scanner = factory({\n          constraints: { facingMode: props['facing-mode'].value ?? 'environment' },\n          intervalMs: props.interval.value ?? 200,\n          once: props.once.value ?? true,\n          video,\n        });\n        current.value = scanner;\n        wire(scanner);\n        return () => scanner.dispose();\n      });\n\n      // Drive start/stop from intent + the current scanner instance. `watch`\n      // (untracked callback) is required over `watchEffect`: `scanner.stop()`\n      // synchronously re-enters the tap handler, and tracking its `status`\n      // reads would retrigger this effect on every transition: an infinite loop.\n      watch(\n        () => [requested.value, current.value] as const,\n        ([want, scanner]) => {\n          if (!scanner || scanner.disposed) return;\n          if (want) void startScanner(scanner);\n          else scanner.stop();\n        },\n        { immediate: true },\n      );\n    });\n\n    const resume = (): void => {\n      requested.value = true;\n    };\n    const pause = (): void => {\n      requested.value = false;\n    };\n\n    const showVideo = (): boolean => status.value === 'starting' || status.value === 'scanning';\n    const showControls = (): boolean => status.value !== 'unsupported';\n\n    return html`\n      <div\n        class=\"wrapper\"\n        part=\"wrapper\"\n        role=\"region\"\n        aria-label=${() => props.label.value}\n        style=${() => `--_size-px: ${cssSize(props.size.value ?? 'md')}px`}>\n        <div class=\"stage\" part=\"stage\">\n          <video\n            ref=${videoRef}\n            part=\"video\"\n            autoplay\n            playsinline\n            muted\n            aria-hidden=\"true\"\n            ?hidden=${() => !showVideo()}></video>\n          <div class=\"viewfinder\" part=\"viewfinder\" aria-hidden=\"true\" ?hidden=${() => status.value !== 'scanning'}></div>\n          <div class=\"overlay\"><slot name=\"overlay\"></slot></div>\n          ${when(\n            () => !showVideo(),\n            () => html`\n              <div class=\"state\" part=\"state\" data-state=${() => status.value}>\n                ${when(\n                  () => status.value === 'unsupported',\n                  () => html`<slot name=\"unsupported\"></slot>`,\n                  () => html`\n                    ${when(\n                      () => status.value === 'result',\n                      () => html`<ore-icon name=\"check\" size=\"24\" aria-hidden=\"true\"></ore-icon>`,\n                      () => html`<ore-icon name=\"camera\" size=\"24\" aria-hidden=\"true\"></ore-icon>`,\n                    )}\n                    <span class=\"state-text\">${() => failure.value || STATUS_TEXT[status.value]}</span>\n                  `,\n                )}\n              </div>\n            `,\n          )}\n        </div>\n        <div class=\"status\" part=\"status\" role=\"status\">${statusText}</div>\n        ${when(\n          showControls,\n          () => html`\n            <div class=\"controls\" part=\"controls\">\n              ${when(\n                () => status.value === 'starting' || status.value === 'scanning',\n                () => html`\n                  <ore-button variant=\"ghost\" size=\"sm\" @click=${pause}>Stop</ore-button>\n                `,\n                () => html`\n                  <ore-button\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    @click=${resume}>\n                    ${() =>\n                      status.value === 'result'\n                        ? 'Scan again'\n                        : status.value === 'denied' || status.value === 'error'\n                          ? 'Retry'\n                          : 'Start camera'}\n                  </ore-button>\n                `,\n              )}\n            </div>\n          `,\n        )}\n        <slot name=\"footer\"></slot>\n      </div>\n    `;\n  },\n  styles: [roundedVariantMixin, componentStyles],\n});\n"],"mappings":"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"}

package/dist/radio-group.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.cjs","names":[],"sources":["../src/inputs/radio-group/radio-group.ts"],"sourcesContent":["import {\n  bind,\n  createContext,\n  createId,\n  define,\n  getHost,\n  html,\n  onCleanup,\n  prop,\n  provide,\n  useEmit,\n  useField,\n  useSlots,\n  watchEffect,\n  when,\n} from '@vielzeug/ore';\nimport type { Readable } from '@vielzeug/ripple';\nimport {\n  type ChoiceChangeDetail,\n  createChoiceField,\n  createListControl,\n  getChoiceLabel,\n  getLightChildrenByTag,\n  lifecycleSignal,\n} from '../../core';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { disabledStateMixin } from '../../styles';\nimport type { ComponentSize, ThemeColor } from '../../types';\nimport componentStyles from './radio-group.css?inline';\n\n/** Radio group component properties */\nexport type OreRadioGroupProps = {\n  /** Theme color tint */\n  color?: ThemeColor;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Error message text */\n  error?: string;\n  /** Helper text displayed below the items */\n  helper?: string;\n  /** Group label text */\n  label?: string;\n  /** Form field name */\n  name?: string;\n  /** Layout orientation */\n  orientation?: 'horizontal' | 'vertical';\n  /** Required field */\n  required?: boolean;\n  /** Items size preset */\n  size?: ComponentSize;\n  /** Initial selected value */\n  value?: string;\n};\n\nexport type RadioGroupContext = {\n  color: Readable<ThemeColor | undefined>;\n  disabled: Readable<boolean>;\n  name: Readable<string | undefined>;\n  select: (value: string, originalEvent?: Event) => void;\n  size: Readable<ComponentSize | undefined>;\n  value: Readable<string | undefined>;\n};\n\nexport const RADIO_GROUP_CTX = createContext<RadioGroupContext | undefined>('OreRadioGroup');\n\n/** Events emitted by the radio-group component */\nexport type OreRadioGroupEvents = {\n  /** Emitted when the selection changes */\n  change: ChoiceChangeDetail;\n};\n\n/**\n * A group of radio buttons that allows users to select a single option from a set.\n * Supports keyboard navigation (arrows) and automatic value management.\n *\n * @element ore-radio-group\n *\n * @attr {string} value - Selected value\n * @attr {string} name - Form field name\n * @attr {string} label - Group label\n * @attr {string} orientation - Layout: 'vertical' | 'horizontal'\n * @attr {boolean} required - Required field\n *\n * @fires change - Emitted when a radio is selected. detail: { values: string[], labels: string[], originalEvent?: Event }\n *\n * @slot - Place `ore-radio` elements here\n *\n * @cssprop --radio-group-direction - Flex direction of the items list ('row' | 'column')\n * @cssprop --radio-group-gap - Gap between radio items\n * @part items - Items container.\n * @example\n * ```html\n * <ore-radio-group name=\"plan\" label=\"Choose a plan\" value=\"free\" required>\n *   <ore-radio value=\"free\">Free</ore-radio>\n *   <ore-radio value=\"pro\">Pro</ore-radio>\n *   <ore-radio value=\"enterprise\">Enterprise</ore-radio>\n * </ore-radio-group>\n * <ore-radio-group name=\"direction\" orientation=\"horizontal\" color=\"primary\">\n *   <ore-radio value=\"left\">Left</ore-radio>\n *   <ore-radio value=\"right\">Right</ore-radio>\n * </ore-radio-group>\n * ```\n */\nexport const RADIO_GROUP_TAG = 'ore-radio-group' as const;\ndefine<OreRadioGroupProps>(RADIO_GROUP_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    error: prop.string(),\n    helper: prop.string(),\n    label: prop.string(),\n    name: prop.string(),\n    orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'vertical'),\n    required: prop.bool(false),\n    // Not auto-reflected (`reflect: false`) — the derived, interaction-updated selection\n    // (`selectedValue`) is the single writer for this attribute, via `bind()` below; letting\n    // `prop.string()`'s own default reflection also write the raw incoming value would leave\n    // two effects racing to set the same attribute from different sources.\n    value: { ...prop.string(), reflect: false },\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreRadioGroupEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    const choice = createChoiceField({\n      disabled: props.disabled,\n      error: props.error,\n      helper: props.helper,\n      label: props.label,\n      prefix: 'radio-group',\n      required: props.required,\n      signal: lifecycleSignal(onCleanup),\n      value: props.value,\n    });\n\n    choice.attachFormField(\n      useField<string>({\n        disabled: choice.disabled,\n        onReset: choice.reset,\n        toFormValue: (v) => v,\n        validationMessage: choice.validationMessage,\n        validity: choice.validity,\n        value: choice.formValue,\n      }),\n    );\n\n    const selectedValue = choice.selectedValue;\n    const isDisabled = props.disabled;\n\n    bind({\n      attr: {\n        size: props.size,\n        value: () => selectedValue.value || null,\n      },\n    });\n\n    const getSlottedRadios = (): HTMLElement[] => getLightChildrenByTag(el, 'ore-radio');\n\n    const getEnabledRadios = (): HTMLElement[] =>\n      isDisabled.value ? [] : getSlottedRadios().filter((radio) => !radio.hasAttribute('disabled'));\n\n    const getLabelForValue = (value: string): string => getChoiceLabel(getSlottedRadios(), value);\n\n    const selectRadio = (val: string, originalEvent?: Event): void => {\n      choice.setValues(val ? [val] : []);\n\n      const labels = val ? [getLabelForValue(val)] : [];\n      const values = val ? [val] : [];\n\n      emit('change', { labels, originalEvent, values });\n      choice.triggerValidation('blur');\n    };\n\n    provide(RADIO_GROUP_CTX, {\n      color: props.color as Readable<ThemeColor | undefined>,\n      disabled: isDisabled,\n      name: props.name,\n      select: selectRadio,\n      size: props.size as Readable<ComponentSize | undefined>,\n      value: selectedValue,\n    });\n\n    // Sync name/color/size/disabled/checked onto slotted ore-radio children.\n    watch(() => {\n      void slots.elements().value;\n      void selectedValue.value;\n\n      const radios = getSlottedRadios();\n\n      for (const radio of radios) {\n        const val = radio.getAttribute('value') ?? '';\n\n        radio.toggleAttribute('checked', val === selectedValue.value);\n\n        if (props.name.value) radio.setAttribute('name', props.name.value);\n        else radio.removeAttribute('name');\n\n        if (props.color.value) radio.setAttribute('color', props.color.value);\n        else radio.removeAttribute('color');\n\n        if (props.size.value) radio.setAttribute('size', props.size.value);\n        else radio.removeAttribute('size');\n\n        radio.toggleAttribute('disabled', isDisabled.value);\n      }\n    });\n\n    // Roving tabindex: only the selected (or first) radio is tabbable.\n    watch(() => {\n      void slots.elements().value;\n\n      const radios = getSlottedRadios();\n      let hasFocusable = false;\n\n      for (const radio of radios) {\n        const isSelected = radio.getAttribute('value') === selectedValue.value;\n\n        radio.setAttribute('tabindex', isSelected && !isDisabled.value ? '0' : '-1');\n\n        if (isSelected && !isDisabled.value) hasFocusable = true;\n      }\n\n      if (!hasFocusable && radios.length > 0) {\n        const first = radios.find((r) => !r.hasAttribute('disabled'));\n\n        if (first) first.setAttribute('tabindex', '0');\n      }\n    });\n\n    const listControl = createListControl<HTMLElement>({\n      getItems: getEnabledRadios,\n      keys: { next: ['ArrowDown', 'ArrowRight'], prev: ['ArrowUp', 'ArrowLeft'] },\n      loop: true,\n      onNavigate: ({ event, item }) => {\n        item.focus();\n\n        if (item.tagName === 'ORE-RADIO') {\n          selectRadio(item.getAttribute('value') ?? '', event);\n        }\n      },\n      signal: lifecycleSignal(onCleanup),\n    });\n\n    bind({\n      on: {\n        change: (e: Event) => {\n          if (e.target === el) return;\n\n          e.stopPropagation();\n          selectRadio((e.target as HTMLElement).getAttribute('value') ?? '', e);\n        },\n        keydown: (e: KeyboardEvent) => {\n          const radios = getEnabledRadios();\n\n          if (!radios.length) return;\n\n          const focused = radios.indexOf(document.activeElement as HTMLElement);\n\n          if (focused === -1) return;\n\n          listControl.set(focused);\n          listControl.handleKeydown(e);\n        },\n      },\n    });\n\n    const legendId = createId('radio-group-legend');\n\n    return html`\n      <fieldset\n        role=\"radiogroup\"\n        aria-required=\"${() => String(Boolean(props.required.value))}\"\n        aria-invalid=\"${choice.ariaInvalid}\"\n        aria-errormessage=\"${choice.ariaErrorMessage}\"\n        aria-describedby=\"${choice.ariaDescribedBy}\">\n        <legend id=\"${legendId}\" ?hidden=${() => !props.label.value}>\n          ${props.label}${when(\n            () => Boolean(props.required.value),\n            () => html`\n              <span aria-hidden=\"true\">*</span>\n            `,\n          )}\n        </legend>\n        <div class=\"radio-group-items\" part=\"items\">\n          <slot></slot>\n        </div>\n        <div\n          class=\"helper-text\"\n          part=\"helper\"\n          id=\"${choice.assistiveId}\"\n          role=\"${() => (choice.errorText.value ? 'alert' : null)}\"\n          aria-live=\"polite\"\n          ?hidden=\"${() => !choice.errorText.value && !choice.helperText.value}\">\n          ${() => choice.errorText.value || choice.helperText.value}\n        </div>\n      </fieldset>\n    `;\n  },\n  styles: [disabledStateMixin, componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"radio-group.cjs","names":[],"sources":["../src/inputs/radio-group/radio-group.ts"],"sourcesContent":["import {\n  bind,\n  createContext,\n  createId,\n  define,\n  getHost,\n  html,\n  onCleanup,\n  prop,\n  provide,\n  useEmit,\n  useField,\n  useSlots,\n  watchEffect,\n  when,\n} from '@vielzeug/ore';\nimport type { Readable } from '@vielzeug/ripple';\nimport {\n  type ChoiceChangeDetail,\n  createChoiceField,\n  createListControl,\n  getChoiceLabel,\n  getLightChildrenByTag,\n  lifecycleSignal,\n} from '../../core';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { disabledStateMixin } from '../../styles';\nimport type { ComponentSize, ThemeColor } from '../../types';\nimport componentStyles from './radio-group.css?inline';\n\n/** Radio group component properties */\nexport type OreRadioGroupProps = {\n  /** Theme color tint */\n  color?: ThemeColor;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Error message text */\n  error?: string;\n  /** Helper text displayed below the items */\n  helper?: string;\n  /** Group label text */\n  label?: string;\n  /** Form field name */\n  name?: string;\n  /** Layout orientation */\n  orientation?: 'horizontal' | 'vertical';\n  /** Required field */\n  required?: boolean;\n  /** Items size preset */\n  size?: ComponentSize;\n  /** Initial selected value */\n  value?: string;\n};\n\nexport type RadioGroupContext = {\n  color: Readable<ThemeColor | undefined>;\n  disabled: Readable<boolean>;\n  name: Readable<string | undefined>;\n  select: (value: string, originalEvent?: Event) => void;\n  size: Readable<ComponentSize | undefined>;\n  value: Readable<string | undefined>;\n};\n\nexport const RADIO_GROUP_CTX = createContext<RadioGroupContext | undefined>('OreRadioGroup');\n\n/** Events emitted by the radio-group component */\nexport type OreRadioGroupEvents = {\n  /** Emitted when the selection changes */\n  change: ChoiceChangeDetail;\n};\n\n/**\n * A group of radio buttons that allows users to select a single option from a set.\n * Supports keyboard navigation (arrows) and automatic value management.\n *\n * @element ore-radio-group\n *\n * @attr {string} value - Selected value\n * @attr {string} name - Form field name\n * @attr {string} label - Group label\n * @attr {string} orientation - Layout: 'vertical' | 'horizontal'\n * @attr {boolean} required - Required field\n *\n * @fires change - Emitted when a radio is selected. detail: { values: string[], labels: string[], originalEvent?: Event }\n *\n * @slot - Place `ore-radio` elements here\n *\n * @cssprop --radio-group-direction - Flex direction of the items list ('row' | 'column')\n * @cssprop --radio-group-gap - Gap between radio items\n * @part items - Items container.\n * @example\n * ```html\n * <ore-radio-group name=\"plan\" label=\"Choose a plan\" value=\"free\" required>\n *   <ore-radio value=\"free\">Free</ore-radio>\n *   <ore-radio value=\"pro\">Pro</ore-radio>\n *   <ore-radio value=\"enterprise\">Enterprise</ore-radio>\n * </ore-radio-group>\n * <ore-radio-group name=\"direction\" orientation=\"horizontal\" color=\"primary\">\n *   <ore-radio value=\"left\">Left</ore-radio>\n *   <ore-radio value=\"right\">Right</ore-radio>\n * </ore-radio-group>\n * ```\n */\nexport const RADIO_GROUP_TAG = 'ore-radio-group' as const;\ndefine<OreRadioGroupProps>(RADIO_GROUP_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    error: prop.string(),\n    helper: prop.string(),\n    label: prop.string(),\n    name: prop.string(),\n    orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'vertical'),\n    required: prop.bool(false),\n    // Not auto-reflected (`reflect: false`): the derived, interaction-updated selection\n    // (`selectedValue`) is the single writer for this attribute, via `bind()` below; letting\n    // `prop.string()`'s own default reflection also write the raw incoming value would leave\n    // two effects racing to set the same attribute from different sources.\n    value: { ...prop.string(), reflect: false },\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreRadioGroupEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    const choice = createChoiceField({\n      disabled: props.disabled,\n      error: props.error,\n      helper: props.helper,\n      label: props.label,\n      prefix: 'radio-group',\n      required: props.required,\n      signal: lifecycleSignal(onCleanup),\n      value: props.value,\n    });\n\n    choice.attachFormField(\n      useField<string>({\n        disabled: choice.disabled,\n        onReset: choice.reset,\n        toFormValue: (v) => v,\n        validationMessage: choice.validationMessage,\n        validity: choice.validity,\n        value: choice.formValue,\n      }),\n    );\n\n    const selectedValue = choice.selectedValue;\n    const isDisabled = props.disabled;\n\n    bind({\n      attr: {\n        size: props.size,\n        value: () => selectedValue.value || null,\n      },\n    });\n\n    const getSlottedRadios = (): HTMLElement[] => getLightChildrenByTag(el, 'ore-radio');\n\n    const getEnabledRadios = (): HTMLElement[] =>\n      isDisabled.value ? [] : getSlottedRadios().filter((radio) => !radio.hasAttribute('disabled'));\n\n    const getLabelForValue = (value: string): string => getChoiceLabel(getSlottedRadios(), value);\n\n    const selectRadio = (val: string, originalEvent?: Event): void => {\n      choice.setValues(val ? [val] : []);\n\n      const labels = val ? [getLabelForValue(val)] : [];\n      const values = val ? [val] : [];\n\n      emit('change', { labels, originalEvent, values });\n      choice.triggerValidation('blur');\n    };\n\n    provide(RADIO_GROUP_CTX, {\n      color: props.color as Readable<ThemeColor | undefined>,\n      disabled: isDisabled,\n      name: props.name,\n      select: selectRadio,\n      size: props.size as Readable<ComponentSize | undefined>,\n      value: selectedValue,\n    });\n\n    // Sync name/color/size/disabled/checked onto slotted ore-radio children.\n    watch(() => {\n      void slots.elements().value;\n      void selectedValue.value;\n\n      const radios = getSlottedRadios();\n\n      for (const radio of radios) {\n        const val = radio.getAttribute('value') ?? '';\n\n        radio.toggleAttribute('checked', val === selectedValue.value);\n\n        if (props.name.value) radio.setAttribute('name', props.name.value);\n        else radio.removeAttribute('name');\n\n        if (props.color.value) radio.setAttribute('color', props.color.value);\n        else radio.removeAttribute('color');\n\n        if (props.size.value) radio.setAttribute('size', props.size.value);\n        else radio.removeAttribute('size');\n\n        radio.toggleAttribute('disabled', isDisabled.value);\n      }\n    });\n\n    // Roving tabindex: only the selected (or first) radio is tabbable.\n    watch(() => {\n      void slots.elements().value;\n\n      const radios = getSlottedRadios();\n      let hasFocusable = false;\n\n      for (const radio of radios) {\n        const isSelected = radio.getAttribute('value') === selectedValue.value;\n\n        radio.setAttribute('tabindex', isSelected && !isDisabled.value ? '0' : '-1');\n\n        if (isSelected && !isDisabled.value) hasFocusable = true;\n      }\n\n      if (!hasFocusable && radios.length > 0) {\n        const first = radios.find((r) => !r.hasAttribute('disabled'));\n\n        if (first) first.setAttribute('tabindex', '0');\n      }\n    });\n\n    const listControl = createListControl<HTMLElement>({\n      getItems: getEnabledRadios,\n      keys: { next: ['ArrowDown', 'ArrowRight'], prev: ['ArrowUp', 'ArrowLeft'] },\n      loop: true,\n      onNavigate: ({ event, item }) => {\n        item.focus();\n\n        if (item.tagName === 'ORE-RADIO') {\n          selectRadio(item.getAttribute('value') ?? '', event);\n        }\n      },\n      signal: lifecycleSignal(onCleanup),\n    });\n\n    bind({\n      on: {\n        change: (e: Event) => {\n          if (e.target === el) return;\n\n          e.stopPropagation();\n          selectRadio((e.target as HTMLElement).getAttribute('value') ?? '', e);\n        },\n        keydown: (e: KeyboardEvent) => {\n          const radios = getEnabledRadios();\n\n          if (!radios.length) return;\n\n          const focused = radios.indexOf(document.activeElement as HTMLElement);\n\n          if (focused === -1) return;\n\n          listControl.set(focused);\n          listControl.handleKeydown(e);\n        },\n      },\n    });\n\n    const legendId = createId('radio-group-legend');\n\n    return html`\n      <fieldset\n        role=\"radiogroup\"\n        aria-required=\"${() => String(Boolean(props.required.value))}\"\n        aria-invalid=\"${choice.ariaInvalid}\"\n        aria-errormessage=\"${choice.ariaErrorMessage}\"\n        aria-describedby=\"${choice.ariaDescribedBy}\">\n        <legend id=\"${legendId}\" ?hidden=${() => !props.label.value}>\n          ${props.label}${when(\n            () => Boolean(props.required.value),\n            () => html`\n              <span aria-hidden=\"true\">*</span>\n            `,\n          )}\n        </legend>\n        <div class=\"radio-group-items\" part=\"items\">\n          <slot></slot>\n        </div>\n        <div\n          class=\"helper-text\"\n          part=\"helper\"\n          id=\"${choice.assistiveId}\"\n          role=\"${() => (choice.errorText.value ? 'alert' : null)}\"\n          aria-live=\"polite\"\n          ?hidden=\"${() => !choice.errorText.value && !choice.helperText.value}\">\n          ${() => choice.errorText.value || choice.helperText.value}\n        </div>\n      </fieldset>\n    `;\n  },\n  styles: [disabledStateMixin, componentStyles],\n});\n"],"mappings":"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"}

package/dist/radio-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.js","names":[],"sources":["../src/inputs/radio-group/radio-group.ts"],"sourcesContent":["import {\n  bind,\n  createContext,\n  createId,\n  define,\n  getHost,\n  html,\n  onCleanup,\n  prop,\n  provide,\n  useEmit,\n  useField,\n  useSlots,\n  watchEffect,\n  when,\n} from '@vielzeug/ore';\nimport type { Readable } from '@vielzeug/ripple';\nimport {\n  type ChoiceChangeDetail,\n  createChoiceField,\n  createListControl,\n  getChoiceLabel,\n  getLightChildrenByTag,\n  lifecycleSignal,\n} from '../../core';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { disabledStateMixin } from '../../styles';\nimport type { ComponentSize, ThemeColor } from '../../types';\nimport componentStyles from './radio-group.css?inline';\n\n/** Radio group component properties */\nexport type OreRadioGroupProps = {\n  /** Theme color tint */\n  color?: ThemeColor;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Error message text */\n  error?: string;\n  /** Helper text displayed below the items */\n  helper?: string;\n  /** Group label text */\n  label?: string;\n  /** Form field name */\n  name?: string;\n  /** Layout orientation */\n  orientation?: 'horizontal' | 'vertical';\n  /** Required field */\n  required?: boolean;\n  /** Items size preset */\n  size?: ComponentSize;\n  /** Initial selected value */\n  value?: string;\n};\n\nexport type RadioGroupContext = {\n  color: Readable<ThemeColor | undefined>;\n  disabled: Readable<boolean>;\n  name: Readable<string | undefined>;\n  select: (value: string, originalEvent?: Event) => void;\n  size: Readable<ComponentSize | undefined>;\n  value: Readable<string | undefined>;\n};\n\nexport const RADIO_GROUP_CTX = createContext<RadioGroupContext | undefined>('OreRadioGroup');\n\n/** Events emitted by the radio-group component */\nexport type OreRadioGroupEvents = {\n  /** Emitted when the selection changes */\n  change: ChoiceChangeDetail;\n};\n\n/**\n * A group of radio buttons that allows users to select a single option from a set.\n * Supports keyboard navigation (arrows) and automatic value management.\n *\n * @element ore-radio-group\n *\n * @attr {string} value - Selected value\n * @attr {string} name - Form field name\n * @attr {string} label - Group label\n * @attr {string} orientation - Layout: 'vertical' | 'horizontal'\n * @attr {boolean} required - Required field\n *\n * @fires change - Emitted when a radio is selected. detail: { values: string[], labels: string[], originalEvent?: Event }\n *\n * @slot - Place `ore-radio` elements here\n *\n * @cssprop --radio-group-direction - Flex direction of the items list ('row' | 'column')\n * @cssprop --radio-group-gap - Gap between radio items\n * @part items - Items container.\n * @example\n * ```html\n * <ore-radio-group name=\"plan\" label=\"Choose a plan\" value=\"free\" required>\n *   <ore-radio value=\"free\">Free</ore-radio>\n *   <ore-radio value=\"pro\">Pro</ore-radio>\n *   <ore-radio value=\"enterprise\">Enterprise</ore-radio>\n * </ore-radio-group>\n * <ore-radio-group name=\"direction\" orientation=\"horizontal\" color=\"primary\">\n *   <ore-radio value=\"left\">Left</ore-radio>\n *   <ore-radio value=\"right\">Right</ore-radio>\n * </ore-radio-group>\n * ```\n */\nexport const RADIO_GROUP_TAG = 'ore-radio-group' as const;\ndefine<OreRadioGroupProps>(RADIO_GROUP_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    error: prop.string(),\n    helper: prop.string(),\n    label: prop.string(),\n    name: prop.string(),\n    orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'vertical'),\n    required: prop.bool(false),\n    // Not auto-reflected (`reflect: false`) — the derived, interaction-updated selection\n    // (`selectedValue`) is the single writer for this attribute, via `bind()` below; letting\n    // `prop.string()`'s own default reflection also write the raw incoming value would leave\n    // two effects racing to set the same attribute from different sources.\n    value: { ...prop.string(), reflect: false },\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreRadioGroupEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    const choice = createChoiceField({\n      disabled: props.disabled,\n      error: props.error,\n      helper: props.helper,\n      label: props.label,\n      prefix: 'radio-group',\n      required: props.required,\n      signal: lifecycleSignal(onCleanup),\n      value: props.value,\n    });\n\n    choice.attachFormField(\n      useField<string>({\n        disabled: choice.disabled,\n        onReset: choice.reset,\n        toFormValue: (v) => v,\n        validationMessage: choice.validationMessage,\n        validity: choice.validity,\n        value: choice.formValue,\n      }),\n    );\n\n    const selectedValue = choice.selectedValue;\n    const isDisabled = props.disabled;\n\n    bind({\n      attr: {\n        size: props.size,\n        value: () => selectedValue.value || null,\n      },\n    });\n\n    const getSlottedRadios = (): HTMLElement[] => getLightChildrenByTag(el, 'ore-radio');\n\n    const getEnabledRadios = (): HTMLElement[] =>\n      isDisabled.value ? [] : getSlottedRadios().filter((radio) => !radio.hasAttribute('disabled'));\n\n    const getLabelForValue = (value: string): string => getChoiceLabel(getSlottedRadios(), value);\n\n    const selectRadio = (val: string, originalEvent?: Event): void => {\n      choice.setValues(val ? [val] : []);\n\n      const labels = val ? [getLabelForValue(val)] : [];\n      const values = val ? [val] : [];\n\n      emit('change', { labels, originalEvent, values });\n      choice.triggerValidation('blur');\n    };\n\n    provide(RADIO_GROUP_CTX, {\n      color: props.color as Readable<ThemeColor | undefined>,\n      disabled: isDisabled,\n      name: props.name,\n      select: selectRadio,\n      size: props.size as Readable<ComponentSize | undefined>,\n      value: selectedValue,\n    });\n\n    // Sync name/color/size/disabled/checked onto slotted ore-radio children.\n    watch(() => {\n      void slots.elements().value;\n      void selectedValue.value;\n\n      const radios = getSlottedRadios();\n\n      for (const radio of radios) {\n        const val = radio.getAttribute('value') ?? '';\n\n        radio.toggleAttribute('checked', val === selectedValue.value);\n\n        if (props.name.value) radio.setAttribute('name', props.name.value);\n        else radio.removeAttribute('name');\n\n        if (props.color.value) radio.setAttribute('color', props.color.value);\n        else radio.removeAttribute('color');\n\n        if (props.size.value) radio.setAttribute('size', props.size.value);\n        else radio.removeAttribute('size');\n\n        radio.toggleAttribute('disabled', isDisabled.value);\n      }\n    });\n\n    // Roving tabindex: only the selected (or first) radio is tabbable.\n    watch(() => {\n      void slots.elements().value;\n\n      const radios = getSlottedRadios();\n      let hasFocusable = false;\n\n      for (const radio of radios) {\n        const isSelected = radio.getAttribute('value') === selectedValue.value;\n\n        radio.setAttribute('tabindex', isSelected && !isDisabled.value ? '0' : '-1');\n\n        if (isSelected && !isDisabled.value) hasFocusable = true;\n      }\n\n      if (!hasFocusable && radios.length > 0) {\n        const first = radios.find((r) => !r.hasAttribute('disabled'));\n\n        if (first) first.setAttribute('tabindex', '0');\n      }\n    });\n\n    const listControl = createListControl<HTMLElement>({\n      getItems: getEnabledRadios,\n      keys: { next: ['ArrowDown', 'ArrowRight'], prev: ['ArrowUp', 'ArrowLeft'] },\n      loop: true,\n      onNavigate: ({ event, item }) => {\n        item.focus();\n\n        if (item.tagName === 'ORE-RADIO') {\n          selectRadio(item.getAttribute('value') ?? '', event);\n        }\n      },\n      signal: lifecycleSignal(onCleanup),\n    });\n\n    bind({\n      on: {\n        change: (e: Event) => {\n          if (e.target === el) return;\n\n          e.stopPropagation();\n          selectRadio((e.target as HTMLElement).getAttribute('value') ?? '', e);\n        },\n        keydown: (e: KeyboardEvent) => {\n          const radios = getEnabledRadios();\n\n          if (!radios.length) return;\n\n          const focused = radios.indexOf(document.activeElement as HTMLElement);\n\n          if (focused === -1) return;\n\n          listControl.set(focused);\n          listControl.handleKeydown(e);\n        },\n      },\n    });\n\n    const legendId = createId('radio-group-legend');\n\n    return html`\n      <fieldset\n        role=\"radiogroup\"\n        aria-required=\"${() => String(Boolean(props.required.value))}\"\n        aria-invalid=\"${choice.ariaInvalid}\"\n        aria-errormessage=\"${choice.ariaErrorMessage}\"\n        aria-describedby=\"${choice.ariaDescribedBy}\">\n        <legend id=\"${legendId}\" ?hidden=${() => !props.label.value}>\n          ${props.label}${when(\n            () => Boolean(props.required.value),\n            () => html`\n              <span aria-hidden=\"true\">*</span>\n            `,\n          )}\n        </legend>\n        <div class=\"radio-group-items\" part=\"items\">\n          <slot></slot>\n        </div>\n        <div\n          class=\"helper-text\"\n          part=\"helper\"\n          id=\"${choice.assistiveId}\"\n          role=\"${() => (choice.errorText.value ? 'alert' : null)}\"\n          aria-live=\"polite\"\n          ?hidden=\"${() => !choice.errorText.value && !choice.helperText.value}\">\n          ${() => choice.errorText.value || choice.helperText.value}\n        </div>\n      </fieldset>\n    `;\n  },\n  styles: [disabledStateMixin, componentStyles],\n});\n"],"mappings":"6pBA+DA,IAAa,EAAkB,EAA6C,eAAe,EAwC9E,EAAkB,kBAC/B,EAA2B,EAAiB,CAC1C,eAAgB,GAChB,MAAO,CACL,GAAG,EACH,GAAG,EACH,GAAG,EACH,MAAO,EAAK,OAAO,EACnB,OAAQ,EAAK,OAAO,EACpB,MAAO,EAAK,OAAO,EACnB,KAAM,EAAK,OAAO,EAClB,YAAa,EAAK,MAAM,CAAC,aAAc,UAAU,EAAY,UAAU,EACvE,SAAU,EAAK,KAAK,EAAK,EAKzB,MAAO,CAAE,GAAG,EAAK,OAAO,EAAG,QAAS,EAAM,CAC5C,EACA,MAAM,EAAO,CACX,IAAM,EAAK,EAAQ,EACb,EAAO,EAA6B,EACpC,EAAQ,EAAS,EACjB,EAAQ,EAER,EAAS,EAAkB,CAC/B,SAAU,EAAM,SAChB,MAAO,EAAM,MACb,OAAQ,EAAM,OACd,MAAO,EAAM,MACb,OAAQ,cACR,SAAU,EAAM,SAChB,OAAQ,EAAgB,CAAS,EACjC,MAAO,EAAM,KACf,CAAC,EAED,EAAO,gBACL,EAAiB,CACf,SAAU,EAAO,SACjB,QAAS,EAAO,MAChB,YAAc,GAAM,EACpB,kBAAmB,EAAO,kBAC1B,SAAU,EAAO,SACjB,MAAO,EAAO,SAChB,CAAC,CACH,EAEA,IAAM,EAAgB,EAAO,cACvB,EAAa,EAAM,SAEzB,EAAK,CACH,KAAM,CACJ,KAAM,EAAM,KACZ,UAAa,EAAc,OAAS,IACtC,CACF,CAAC,EAED,IAAM,qBAAwC,EAAsB,EAAI,WAAW,EAE7E,qBACJ,EAAW,MAAQ,CAAC,EAAI,iBAAiB,CAAC,CAAC,OAAQ,GAAU,CAAC,EAAM,aAAa,UAAU,CAAC,EAExF,iBAAoB,GAA0B,EAAe,iBAAiB,EAAG,CAAK,EAEtF,aAAe,EAAa,IAAgC,CAChE,EAAO,UAAU,EAAM,CAAC,CAAG,EAAI,CAAC,CAAC,EAEjC,IAAM,EAAS,EAAM,CAAC,iBAAiB,CAAG,CAAC,EAAI,CAAC,EAGhD,EAAK,SAAU,CAAE,SAAQ,gBAAe,OAFzB,EAAM,CAAC,CAAG,EAAI,CAAC,CAEiB,CAAC,EAChD,EAAO,kBAAkB,MAAM,CACjC,EAEA,EAAQ,EAAiB,CACvB,MAAO,EAAM,MACb,SAAU,EACV,KAAM,EAAM,KACZ,OAAQ,YACR,KAAM,EAAM,KACZ,MAAO,CACT,CAAC,EAGD,MAAY,CACV,EAAW,SAAS,CAAC,CAAC,MACtB,EAAmB,MAEnB,IAAM,EAAS,iBAAiB,EAEhC,IAAK,IAAM,KAAS,EAAQ,CAC1B,IAAM,EAAM,EAAM,aAAa,OAAO,GAAK,GAE3C,EAAM,gBAAgB,UAAW,IAAQ,EAAc,KAAK,EAExD,EAAM,KAAK,MAAO,EAAM,aAAa,OAAQ,EAAM,KAAK,KAAK,EAC5D,EAAM,gBAAgB,MAAM,EAE7B,EAAM,MAAM,MAAO,EAAM,aAAa,QAAS,EAAM,MAAM,KAAK,EAC/D,EAAM,gBAAgB,OAAO,EAE9B,EAAM,KAAK,MAAO,EAAM,aAAa,OAAQ,EAAM,KAAK,KAAK,EAC5D,EAAM,gBAAgB,MAAM,EAEjC,EAAM,gBAAgB,WAAY,EAAW,KAAK,CACpD,CACF,CAAC,EAGD,MAAY,CACV,EAAW,SAAS,CAAC,CAAC,MAEtB,IAAM,EAAS,iBAAiB,EAC5B,EAAe,GAEnB,IAAK,IAAM,KAAS,EAAQ,CAC1B,IAAM,EAAa,EAAM,aAAa,OAAO,IAAM,EAAc,MAEjE,EAAM,aAAa,WAAY,GAAc,CAAC,EAAW,MAAQ,IAAM,IAAI,EAEvE,GAAc,CAAC,EAAW,QAAO,EAAe,GACtD,CAEA,GAAI,CAAC,GAAgB,EAAO,OAAS,EAAG,CACtC,IAAM,EAAQ,EAAO,KAAM,GAAM,CAAC,EAAE,aAAa,UAAU,CAAC,EAExD,GAAO,EAAM,aAAa,WAAY,GAAG,CAC/C,CACF,CAAC,EAED,IAAM,EAAc,EAA+B,CACjD,SAAU,iBACV,KAAM,CAAE,KAAM,CAAC,YAAa,YAAY,EAAG,KAAM,CAAC,UAAW,WAAW,CAAE,EAC1E,KAAM,GACN,YAAa,CAAE,QAAO,UAAW,CAC/B,EAAK,MAAM,EAEP,EAAK,UAAY,aACnB,YAAY,EAAK,aAAa,OAAO,GAAK,GAAI,CAAK,CAEvD,EACA,OAAQ,EAAgB,CAAS,CACnC,CAAC,EAED,EAAK,CACH,GAAI,CACF,OAAS,GAAa,CAChB,EAAE,SAAW,IAEjB,EAAE,gBAAgB,EAClB,YAAa,EAAE,OAAuB,aAAa,OAAO,GAAK,GAAI,CAAC,EACtE,EACA,QAAU,GAAqB,CAC7B,IAAM,EAAS,iBAAiB,EAEhC,GAAI,CAAC,EAAO,OAAQ,OAEpB,IAAM,EAAU,EAAO,QAAQ,SAAS,aAA4B,EAEhE,IAAY,KAEhB,EAAY,IAAI,CAAO,EACvB,EAAY,cAAc,CAAC,EAC7B,CACF,CACF,CAAC,EAED,IAAM,EAAW,EAAS,oBAAoB,EAE9C,MAAO,EAAI;;;6BAGgB,OAAO,EAAQ,EAAM,SAAS,KAAM,EAAE;wBAC7C,EAAO,YAAY;6BACd,EAAO,iBAAiB;4BACzB,EAAO,gBAAgB;sBAC7B,EAAS,gBAAkB,CAAC,EAAM,MAAM,MAAM;YACxD,EAAM,QAAQ,MACR,EAAQ,EAAM,SAAS,UACvB,CAAI;;aAGZ,EAAE;;;;;;;;gBAQI,EAAO,YAAY;sBACV,EAAO,UAAU,MAAQ,QAAU,KAAM;;yBAEvC,CAAC,EAAO,UAAU,OAAS,CAAC,EAAO,WAAW,MAAM;gBAC7D,EAAO,UAAU,OAAS,EAAO,WAAW,MAAM;;;KAIlE,EACA,OAAQ,CAAC,EAAoB,CAAe,CAC9C,CAAC"}
+{"version":3,"file":"radio-group.js","names":[],"sources":["../src/inputs/radio-group/radio-group.ts"],"sourcesContent":["import {\n  bind,\n  createContext,\n  createId,\n  define,\n  getHost,\n  html,\n  onCleanup,\n  prop,\n  provide,\n  useEmit,\n  useField,\n  useSlots,\n  watchEffect,\n  when,\n} from '@vielzeug/ore';\nimport type { Readable } from '@vielzeug/ripple';\nimport {\n  type ChoiceChangeDetail,\n  createChoiceField,\n  createListControl,\n  getChoiceLabel,\n  getLightChildrenByTag,\n  lifecycleSignal,\n} from '../../core';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { disabledStateMixin } from '../../styles';\nimport type { ComponentSize, ThemeColor } from '../../types';\nimport componentStyles from './radio-group.css?inline';\n\n/** Radio group component properties */\nexport type OreRadioGroupProps = {\n  /** Theme color tint */\n  color?: ThemeColor;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Error message text */\n  error?: string;\n  /** Helper text displayed below the items */\n  helper?: string;\n  /** Group label text */\n  label?: string;\n  /** Form field name */\n  name?: string;\n  /** Layout orientation */\n  orientation?: 'horizontal' | 'vertical';\n  /** Required field */\n  required?: boolean;\n  /** Items size preset */\n  size?: ComponentSize;\n  /** Initial selected value */\n  value?: string;\n};\n\nexport type RadioGroupContext = {\n  color: Readable<ThemeColor | undefined>;\n  disabled: Readable<boolean>;\n  name: Readable<string | undefined>;\n  select: (value: string, originalEvent?: Event) => void;\n  size: Readable<ComponentSize | undefined>;\n  value: Readable<string | undefined>;\n};\n\nexport const RADIO_GROUP_CTX = createContext<RadioGroupContext | undefined>('OreRadioGroup');\n\n/** Events emitted by the radio-group component */\nexport type OreRadioGroupEvents = {\n  /** Emitted when the selection changes */\n  change: ChoiceChangeDetail;\n};\n\n/**\n * A group of radio buttons that allows users to select a single option from a set.\n * Supports keyboard navigation (arrows) and automatic value management.\n *\n * @element ore-radio-group\n *\n * @attr {string} value - Selected value\n * @attr {string} name - Form field name\n * @attr {string} label - Group label\n * @attr {string} orientation - Layout: 'vertical' | 'horizontal'\n * @attr {boolean} required - Required field\n *\n * @fires change - Emitted when a radio is selected. detail: { values: string[], labels: string[], originalEvent?: Event }\n *\n * @slot - Place `ore-radio` elements here\n *\n * @cssprop --radio-group-direction - Flex direction of the items list ('row' | 'column')\n * @cssprop --radio-group-gap - Gap between radio items\n * @part items - Items container.\n * @example\n * ```html\n * <ore-radio-group name=\"plan\" label=\"Choose a plan\" value=\"free\" required>\n *   <ore-radio value=\"free\">Free</ore-radio>\n *   <ore-radio value=\"pro\">Pro</ore-radio>\n *   <ore-radio value=\"enterprise\">Enterprise</ore-radio>\n * </ore-radio-group>\n * <ore-radio-group name=\"direction\" orientation=\"horizontal\" color=\"primary\">\n *   <ore-radio value=\"left\">Left</ore-radio>\n *   <ore-radio value=\"right\">Right</ore-radio>\n * </ore-radio-group>\n * ```\n */\nexport const RADIO_GROUP_TAG = 'ore-radio-group' as const;\ndefine<OreRadioGroupProps>(RADIO_GROUP_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    error: prop.string(),\n    helper: prop.string(),\n    label: prop.string(),\n    name: prop.string(),\n    orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'vertical'),\n    required: prop.bool(false),\n    // Not auto-reflected (`reflect: false`): the derived, interaction-updated selection\n    // (`selectedValue`) is the single writer for this attribute, via `bind()` below; letting\n    // `prop.string()`'s own default reflection also write the raw incoming value would leave\n    // two effects racing to set the same attribute from different sources.\n    value: { ...prop.string(), reflect: false },\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreRadioGroupEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    const choice = createChoiceField({\n      disabled: props.disabled,\n      error: props.error,\n      helper: props.helper,\n      label: props.label,\n      prefix: 'radio-group',\n      required: props.required,\n      signal: lifecycleSignal(onCleanup),\n      value: props.value,\n    });\n\n    choice.attachFormField(\n      useField<string>({\n        disabled: choice.disabled,\n        onReset: choice.reset,\n        toFormValue: (v) => v,\n        validationMessage: choice.validationMessage,\n        validity: choice.validity,\n        value: choice.formValue,\n      }),\n    );\n\n    const selectedValue = choice.selectedValue;\n    const isDisabled = props.disabled;\n\n    bind({\n      attr: {\n        size: props.size,\n        value: () => selectedValue.value || null,\n      },\n    });\n\n    const getSlottedRadios = (): HTMLElement[] => getLightChildrenByTag(el, 'ore-radio');\n\n    const getEnabledRadios = (): HTMLElement[] =>\n      isDisabled.value ? [] : getSlottedRadios().filter((radio) => !radio.hasAttribute('disabled'));\n\n    const getLabelForValue = (value: string): string => getChoiceLabel(getSlottedRadios(), value);\n\n    const selectRadio = (val: string, originalEvent?: Event): void => {\n      choice.setValues(val ? [val] : []);\n\n      const labels = val ? [getLabelForValue(val)] : [];\n      const values = val ? [val] : [];\n\n      emit('change', { labels, originalEvent, values });\n      choice.triggerValidation('blur');\n    };\n\n    provide(RADIO_GROUP_CTX, {\n      color: props.color as Readable<ThemeColor | undefined>,\n      disabled: isDisabled,\n      name: props.name,\n      select: selectRadio,\n      size: props.size as Readable<ComponentSize | undefined>,\n      value: selectedValue,\n    });\n\n    // Sync name/color/size/disabled/checked onto slotted ore-radio children.\n    watch(() => {\n      void slots.elements().value;\n      void selectedValue.value;\n\n      const radios = getSlottedRadios();\n\n      for (const radio of radios) {\n        const val = radio.getAttribute('value') ?? '';\n\n        radio.toggleAttribute('checked', val === selectedValue.value);\n\n        if (props.name.value) radio.setAttribute('name', props.name.value);\n        else radio.removeAttribute('name');\n\n        if (props.color.value) radio.setAttribute('color', props.color.value);\n        else radio.removeAttribute('color');\n\n        if (props.size.value) radio.setAttribute('size', props.size.value);\n        else radio.removeAttribute('size');\n\n        radio.toggleAttribute('disabled', isDisabled.value);\n      }\n    });\n\n    // Roving tabindex: only the selected (or first) radio is tabbable.\n    watch(() => {\n      void slots.elements().value;\n\n      const radios = getSlottedRadios();\n      let hasFocusable = false;\n\n      for (const radio of radios) {\n        const isSelected = radio.getAttribute('value') === selectedValue.value;\n\n        radio.setAttribute('tabindex', isSelected && !isDisabled.value ? '0' : '-1');\n\n        if (isSelected && !isDisabled.value) hasFocusable = true;\n      }\n\n      if (!hasFocusable && radios.length > 0) {\n        const first = radios.find((r) => !r.hasAttribute('disabled'));\n\n        if (first) first.setAttribute('tabindex', '0');\n      }\n    });\n\n    const listControl = createListControl<HTMLElement>({\n      getItems: getEnabledRadios,\n      keys: { next: ['ArrowDown', 'ArrowRight'], prev: ['ArrowUp', 'ArrowLeft'] },\n      loop: true,\n      onNavigate: ({ event, item }) => {\n        item.focus();\n\n        if (item.tagName === 'ORE-RADIO') {\n          selectRadio(item.getAttribute('value') ?? '', event);\n        }\n      },\n      signal: lifecycleSignal(onCleanup),\n    });\n\n    bind({\n      on: {\n        change: (e: Event) => {\n          if (e.target === el) return;\n\n          e.stopPropagation();\n          selectRadio((e.target as HTMLElement).getAttribute('value') ?? '', e);\n        },\n        keydown: (e: KeyboardEvent) => {\n          const radios = getEnabledRadios();\n\n          if (!radios.length) return;\n\n          const focused = radios.indexOf(document.activeElement as HTMLElement);\n\n          if (focused === -1) return;\n\n          listControl.set(focused);\n          listControl.handleKeydown(e);\n        },\n      },\n    });\n\n    const legendId = createId('radio-group-legend');\n\n    return html`\n      <fieldset\n        role=\"radiogroup\"\n        aria-required=\"${() => String(Boolean(props.required.value))}\"\n        aria-invalid=\"${choice.ariaInvalid}\"\n        aria-errormessage=\"${choice.ariaErrorMessage}\"\n        aria-describedby=\"${choice.ariaDescribedBy}\">\n        <legend id=\"${legendId}\" ?hidden=${() => !props.label.value}>\n          ${props.label}${when(\n            () => Boolean(props.required.value),\n            () => html`\n              <span aria-hidden=\"true\">*</span>\n            `,\n          )}\n        </legend>\n        <div class=\"radio-group-items\" part=\"items\">\n          <slot></slot>\n        </div>\n        <div\n          class=\"helper-text\"\n          part=\"helper\"\n          id=\"${choice.assistiveId}\"\n          role=\"${() => (choice.errorText.value ? 'alert' : null)}\"\n          aria-live=\"polite\"\n          ?hidden=\"${() => !choice.errorText.value && !choice.helperText.value}\">\n          ${() => choice.errorText.value || choice.helperText.value}\n        </div>\n      </fieldset>\n    `;\n  },\n  styles: [disabledStateMixin, componentStyles],\n});\n"],"mappings":"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"}

package/dist/radio.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"radio.cjs","names":[],"sources":["../src/inputs/radio/radio.ts"],"sourcesContent":["import { bind, define, getHost, html, inject, onCleanup, prop, useField } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\nimport { createCheckable, createListControl, elementDirection, lifecycleSignal } from '../../core';\nimport { CONTROL_SIZE_PRESET, disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsFormControlMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\nimport { RADIO_GROUP_CTX } from '../radio-group/radio-group';\nimport { defineFieldChecked, dispatchNativeFieldEvent, setFieldChecked } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './radio.css?inline';\n\n/** Radio component properties */\n\nexport type OreRadioEvents = {\n  change: Event;\n  input: Event;\n};\n\nexport type OreRadioProps = CheckableProps & {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message (marks field as invalid) */\n  error?: string;\n  /** Helper text displayed below the radio */\n  helper?: string;\n  /** Component size */\n  size?: ComponentSize;\n};\n\n/**\n * A customizable radio button component for mutually exclusive selections.\n *\n * @element ore-radio\n *\n * @attr {boolean} checked - Checked state\n * @attr {boolean} disabled - Disable radio interaction\n * @attr {string} value - Field value (required for radio groups)\n * @attr {string} name - Form field name (required for radio groups)\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Radio size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the radio\n *\n * @fires input - Emitted when radio is selected.\n * @fires change - Emitted when radio is selected.\n *\n * @slot - Radio button label text\n *\n * @cssprop --radio-size - Control size (width and height)\n * @cssprop --radio-bg - Unchecked background color\n * @cssprop --radio-border-color - Unchecked border color\n * @cssprop --radio-checked-bg - Selected indicator background color\n * @cssprop --radio-color - Selected indicator dot color\n * @cssprop --radio-font-size - Label font size\n * @part radio - The radio wrapper element\n * @part circle - The visual radio circle\n * @part label - The label element\n * @part helper-text - The helper/error text element\n *\n * @example\n * ```html\n * <ore-radio name=\"plan\" value=\"free\">Free</ore-radio>\n * <ore-radio name=\"plan\" value=\"pro\" checked color=\"primary\">Pro</ore-radio>\n * <ore-radio name=\"plan\" value=\"enterprise\" disabled>Enterprise</ore-radio>\n * ```\n */\nexport const RADIO_TAG = 'ore-radio' as const;\ndefine<OreRadioProps>(RADIO_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    checked: prop.bool(false),\n    error: prop.string(),\n    helper: prop.string(),\n    name: prop.string(),\n    value: prop.string(),\n  },\n  setup(props) {\n    const el = getHost();\n\n    const groupCtx = inject(RADIO_GROUP_CTX);\n    const effectiveName = computed(() => groupCtx?.name.value || props.name.value || '');\n    const effectiveSize = computed(() => groupCtx?.size.value ?? props.size.value);\n    const effectiveColor = computed(() => groupCtx?.color.value ?? props.color.value);\n    const checkedFromState = computed(() => {\n      if (groupCtx) return groupCtx.value.value === props.value.value;\n\n      return Boolean(props.checked.value);\n    });\n\n    const getRadioGroup = (): HTMLElement[] => {\n      const radioName = effectiveName.value;\n\n      if (!radioName) return [];\n\n      return Array.from(document.querySelectorAll<HTMLElement>(`ore-radio[name=\"${radioName}\"]`)).filter(\n        (r) => !r.hasAttribute('disabled'),\n      );\n    };\n\n    const selectRadio = (radio: HTMLElement, originalEvent?: Event): void => {\n      if (groupCtx) {\n        groupCtx.select(radio.getAttribute('value') ?? '', originalEvent);\n\n        return;\n      }\n\n      radio.click();\n    };\n\n    const listControl = createListControl({\n      direction: () => elementDirection(el),\n      getItems: () => getRadioGroup(),\n      // 'both' accepts every arrow key regardless of the group's visual layout (radio groups\n      // may render horizontally or vertically via CSS) — RTL mirroring of Left/Right still\n      // applies via `direction` since nav.ts's default keymap covers 'both' too.\n      loop: true,\n      onNavigate: ({ event, item }) => {\n        item.focus();\n        selectRadio(item, event);\n      },\n      orientation: 'both',\n      signal: lifecycleSignal(onCleanup),\n    });\n\n    const activateSelf = (originalEvent?: Event): void => {\n      if (checkable.checked.value) return;\n\n      if (groupCtx) {\n        groupCtx.select(props.value.value ?? '', originalEvent);\n\n        return;\n      }\n\n      checkable.toggle(originalEvent ?? new Event('change'));\n    };\n\n    const checkable = createCheckable({\n      checked: checkedFromState,\n      disabled: computed(() => props.disabled.value || Boolean(groupCtx?.disabled.value)),\n      error: props.error,\n      helper: props.helper,\n      onToggle: (payload) => {\n        setFieldChecked(el, payload.checked);\n        dispatchNativeFieldEvent(el, 'input');\n        dispatchNativeFieldEvent(el, 'change');\n      },\n      prefix: 'radio',\n      signal: lifecycleSignal(onCleanup),\n      value: props.value,\n    });\n\n    checkable.attachFormField(\n      useField<string | null>({\n        disabled: checkable.disabled,\n        toFormValue: (v) => v,\n        value: checkable.checkableFormValue,\n      }),\n    );\n\n    const { assistiveId, checked, disabled, errorText, helperText, labelId, toggle } = checkable;\n\n    defineFieldChecked(\n      el,\n      () => checked.value,\n      (value) => {\n        checked.value = value;\n      },\n    );\n\n    bind({\n      attr: {\n        'aria-checked': () => (checked.value ? 'true' : 'false'),\n        'aria-describedby': () => (errorText.value || helperText.value ? assistiveId : null),\n        'aria-disabled': () => (disabled.value ? 'true' : null),\n        'aria-invalid': () => (errorText.value ? 'true' : null),\n        'aria-labelledby': labelId,\n        checked,\n        color: effectiveColor,\n        disabled: () => (disabled.value ? true : undefined),\n        name: () => effectiveName.value || undefined,\n        role: 'radio',\n        size: effectiveSize,\n        tabindex: () => {\n          if (disabled.value) return undefined;\n\n          return checked.value ? 0 : -1;\n        },\n      },\n      class: () => ({\n        'is-checked': checked.value,\n        'is-disabled': disabled.value,\n      }),\n      on: {\n        click: (e: MouseEvent) => {\n          if (disabled.value) return;\n\n          if (groupCtx) {\n            groupCtx.select(props.value.value ?? '', e);\n          } else {\n            if (!effectiveName.value) return;\n\n            if (!checked.value) {\n              const radioName = props.name.value;\n              const allRadios = document.querySelectorAll<HTMLElement>(`ore-radio[name=\"${radioName}\"]`);\n\n              allRadios.forEach((radio) => {\n                if (radio !== el) radio.removeAttribute('checked');\n              });\n\n              toggle(e);\n            }\n          }\n        },\n        keydown: (e: KeyboardEvent) => {\n          if (e.key === ' ' || e.key === 'Enter') {\n            e.preventDefault();\n            activateSelf(e);\n\n            return;\n          }\n\n          const radios = getRadioGroup();\n\n          if (radios.length === 0) return;\n\n          const selfIndex = radios.indexOf(el);\n\n          if (selfIndex === -1) return;\n\n          listControl.set(selfIndex);\n          listControl.handleKeydown(e);\n        },\n      },\n    });\n\n    return html`\n      <div class=\"radio-wrapper\" part=\"radio\">\n        <div class=\"circle\" part=\"circle\">\n          <div class=\"dot\" part=\"dot\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" id=\"${labelId}\"><slot></slot></span>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    forcedColorsFormControlMixin,\n    disabledStateMixin,\n    coarsePointerMixin,\n    sizeVariantMixin(CONTROL_SIZE_PRESET),\n    componentStyles,\n  ],\n});\n"],"mappings":"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"}
+{"version":3,"file":"radio.cjs","names":[],"sources":["../src/inputs/radio/radio.ts"],"sourcesContent":["import { bind, define, getHost, html, inject, onCleanup, prop, useField } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\nimport { createCheckable, createListControl, elementDirection, lifecycleSignal } from '../../core';\nimport { CONTROL_SIZE_PRESET, disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsFormControlMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\nimport { RADIO_GROUP_CTX } from '../radio-group/radio-group';\nimport { defineFieldChecked, dispatchNativeFieldEvent, setFieldChecked } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './radio.css?inline';\n\n/** Radio component properties */\n\nexport type OreRadioEvents = {\n  change: Event;\n  input: Event;\n};\n\nexport type OreRadioProps = CheckableProps & {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message (marks field as invalid) */\n  error?: string;\n  /** Helper text displayed below the radio */\n  helper?: string;\n  /** Component size */\n  size?: ComponentSize;\n};\n\n/**\n * A customizable radio button component for mutually exclusive selections.\n *\n * @element ore-radio\n *\n * @attr {boolean} checked - Checked state\n * @attr {boolean} disabled - Disable radio interaction\n * @attr {string} value - Field value (required for radio groups)\n * @attr {string} name - Form field name (required for radio groups)\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Radio size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the radio\n *\n * @fires input - Emitted when radio is selected.\n * @fires change - Emitted when radio is selected.\n *\n * @slot - Radio button label text\n *\n * @cssprop --radio-size - Control size (width and height)\n * @cssprop --radio-bg - Unchecked background color\n * @cssprop --radio-border-color - Unchecked border color\n * @cssprop --radio-checked-bg - Selected indicator background color\n * @cssprop --radio-color - Selected indicator dot color\n * @cssprop --radio-font-size - Label font size\n * @part radio - The radio wrapper element\n * @part circle - The visual radio circle\n * @part label - The label element\n * @part helper-text - The helper/error text element\n *\n * @example\n * ```html\n * <ore-radio name=\"plan\" value=\"free\">Free</ore-radio>\n * <ore-radio name=\"plan\" value=\"pro\" checked color=\"primary\">Pro</ore-radio>\n * <ore-radio name=\"plan\" value=\"enterprise\" disabled>Enterprise</ore-radio>\n * ```\n */\nexport const RADIO_TAG = 'ore-radio' as const;\ndefine<OreRadioProps>(RADIO_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    checked: prop.bool(false),\n    error: prop.string(),\n    helper: prop.string(),\n    name: prop.string(),\n    value: prop.string(),\n  },\n  setup(props) {\n    const el = getHost();\n\n    const groupCtx = inject(RADIO_GROUP_CTX);\n    const effectiveName = computed(() => groupCtx?.name.value || props.name.value || '');\n    const effectiveSize = computed(() => groupCtx?.size.value ?? props.size.value);\n    const effectiveColor = computed(() => groupCtx?.color.value ?? props.color.value);\n    const checkedFromState = computed(() => {\n      if (groupCtx) return groupCtx.value.value === props.value.value;\n\n      return Boolean(props.checked.value);\n    });\n\n    const getRadioGroup = (): HTMLElement[] => {\n      const radioName = effectiveName.value;\n\n      if (!radioName) return [];\n\n      return Array.from(document.querySelectorAll<HTMLElement>(`ore-radio[name=\"${radioName}\"]`)).filter(\n        (r) => !r.hasAttribute('disabled'),\n      );\n    };\n\n    const selectRadio = (radio: HTMLElement, originalEvent?: Event): void => {\n      if (groupCtx) {\n        groupCtx.select(radio.getAttribute('value') ?? '', originalEvent);\n\n        return;\n      }\n\n      radio.click();\n    };\n\n    const listControl = createListControl({\n      direction: () => elementDirection(el),\n      getItems: () => getRadioGroup(),\n      // 'both' accepts every arrow key regardless of the group's visual layout (radio groups\n      // may render horizontally or vertically via CSS): RTL mirroring of Left/Right still\n      // applies via `direction` since nav.ts's default keymap covers 'both' too.\n      loop: true,\n      onNavigate: ({ event, item }) => {\n        item.focus();\n        selectRadio(item, event);\n      },\n      orientation: 'both',\n      signal: lifecycleSignal(onCleanup),\n    });\n\n    const activateSelf = (originalEvent?: Event): void => {\n      if (checkable.checked.value) return;\n\n      if (groupCtx) {\n        groupCtx.select(props.value.value ?? '', originalEvent);\n\n        return;\n      }\n\n      checkable.toggle(originalEvent ?? new Event('change'));\n    };\n\n    const checkable = createCheckable({\n      checked: checkedFromState,\n      disabled: computed(() => props.disabled.value || Boolean(groupCtx?.disabled.value)),\n      error: props.error,\n      helper: props.helper,\n      onToggle: (payload) => {\n        setFieldChecked(el, payload.checked);\n        dispatchNativeFieldEvent(el, 'input');\n        dispatchNativeFieldEvent(el, 'change');\n      },\n      prefix: 'radio',\n      signal: lifecycleSignal(onCleanup),\n      value: props.value,\n    });\n\n    checkable.attachFormField(\n      useField<string | null>({\n        disabled: checkable.disabled,\n        toFormValue: (v) => v,\n        value: checkable.checkableFormValue,\n      }),\n    );\n\n    const { assistiveId, checked, disabled, errorText, helperText, labelId, toggle } = checkable;\n\n    defineFieldChecked(\n      el,\n      () => checked.value,\n      (value) => {\n        checked.value = value;\n      },\n    );\n\n    bind({\n      attr: {\n        'aria-checked': () => (checked.value ? 'true' : 'false'),\n        'aria-describedby': () => (errorText.value || helperText.value ? assistiveId : null),\n        'aria-disabled': () => (disabled.value ? 'true' : null),\n        'aria-invalid': () => (errorText.value ? 'true' : null),\n        'aria-labelledby': labelId,\n        checked,\n        color: effectiveColor,\n        disabled: () => (disabled.value ? true : undefined),\n        name: () => effectiveName.value || undefined,\n        role: 'radio',\n        size: effectiveSize,\n        tabindex: () => {\n          if (disabled.value) return undefined;\n\n          return checked.value ? 0 : -1;\n        },\n      },\n      class: () => ({\n        'is-checked': checked.value,\n        'is-disabled': disabled.value,\n      }),\n      on: {\n        click: (e: MouseEvent) => {\n          if (disabled.value) return;\n\n          if (groupCtx) {\n            groupCtx.select(props.value.value ?? '', e);\n          } else {\n            if (!effectiveName.value) return;\n\n            if (!checked.value) {\n              const radioName = props.name.value;\n              const allRadios = document.querySelectorAll<HTMLElement>(`ore-radio[name=\"${radioName}\"]`);\n\n              allRadios.forEach((radio) => {\n                if (radio !== el) radio.removeAttribute('checked');\n              });\n\n              toggle(e);\n            }\n          }\n        },\n        keydown: (e: KeyboardEvent) => {\n          if (e.key === ' ' || e.key === 'Enter') {\n            e.preventDefault();\n            activateSelf(e);\n\n            return;\n          }\n\n          const radios = getRadioGroup();\n\n          if (radios.length === 0) return;\n\n          const selfIndex = radios.indexOf(el);\n\n          if (selfIndex === -1) return;\n\n          listControl.set(selfIndex);\n          listControl.handleKeydown(e);\n        },\n      },\n    });\n\n    return html`\n      <div class=\"radio-wrapper\" part=\"radio\">\n        <div class=\"circle\" part=\"circle\">\n          <div class=\"dot\" part=\"dot\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" id=\"${labelId}\"><slot></slot></span>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    forcedColorsFormControlMixin,\n    disabledStateMixin,\n    coarsePointerMixin,\n    sizeVariantMixin(CONTROL_SIZE_PRESET),\n    componentStyles,\n  ],\n});\n"],"mappings":"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"}

package/dist/radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio.js","names":[],"sources":["../src/inputs/radio/radio.ts"],"sourcesContent":["import { bind, define, getHost, html, inject, onCleanup, prop, useField } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\nimport { createCheckable, createListControl, elementDirection, lifecycleSignal } from '../../core';\nimport { CONTROL_SIZE_PRESET, disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsFormControlMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\nimport { RADIO_GROUP_CTX } from '../radio-group/radio-group';\nimport { defineFieldChecked, dispatchNativeFieldEvent, setFieldChecked } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './radio.css?inline';\n\n/** Radio component properties */\n\nexport type OreRadioEvents = {\n  change: Event;\n  input: Event;\n};\n\nexport type OreRadioProps = CheckableProps & {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message (marks field as invalid) */\n  error?: string;\n  /** Helper text displayed below the radio */\n  helper?: string;\n  /** Component size */\n  size?: ComponentSize;\n};\n\n/**\n * A customizable radio button component for mutually exclusive selections.\n *\n * @element ore-radio\n *\n * @attr {boolean} checked - Checked state\n * @attr {boolean} disabled - Disable radio interaction\n * @attr {string} value - Field value (required for radio groups)\n * @attr {string} name - Form field name (required for radio groups)\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Radio size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the radio\n *\n * @fires input - Emitted when radio is selected.\n * @fires change - Emitted when radio is selected.\n *\n * @slot - Radio button label text\n *\n * @cssprop --radio-size - Control size (width and height)\n * @cssprop --radio-bg - Unchecked background color\n * @cssprop --radio-border-color - Unchecked border color\n * @cssprop --radio-checked-bg - Selected indicator background color\n * @cssprop --radio-color - Selected indicator dot color\n * @cssprop --radio-font-size - Label font size\n * @part radio - The radio wrapper element\n * @part circle - The visual radio circle\n * @part label - The label element\n * @part helper-text - The helper/error text element\n *\n * @example\n * ```html\n * <ore-radio name=\"plan\" value=\"free\">Free</ore-radio>\n * <ore-radio name=\"plan\" value=\"pro\" checked color=\"primary\">Pro</ore-radio>\n * <ore-radio name=\"plan\" value=\"enterprise\" disabled>Enterprise</ore-radio>\n * ```\n */\nexport const RADIO_TAG = 'ore-radio' as const;\ndefine<OreRadioProps>(RADIO_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    checked: prop.bool(false),\n    error: prop.string(),\n    helper: prop.string(),\n    name: prop.string(),\n    value: prop.string(),\n  },\n  setup(props) {\n    const el = getHost();\n\n    const groupCtx = inject(RADIO_GROUP_CTX);\n    const effectiveName = computed(() => groupCtx?.name.value || props.name.value || '');\n    const effectiveSize = computed(() => groupCtx?.size.value ?? props.size.value);\n    const effectiveColor = computed(() => groupCtx?.color.value ?? props.color.value);\n    const checkedFromState = computed(() => {\n      if (groupCtx) return groupCtx.value.value === props.value.value;\n\n      return Boolean(props.checked.value);\n    });\n\n    const getRadioGroup = (): HTMLElement[] => {\n      const radioName = effectiveName.value;\n\n      if (!radioName) return [];\n\n      return Array.from(document.querySelectorAll<HTMLElement>(`ore-radio[name=\"${radioName}\"]`)).filter(\n        (r) => !r.hasAttribute('disabled'),\n      );\n    };\n\n    const selectRadio = (radio: HTMLElement, originalEvent?: Event): void => {\n      if (groupCtx) {\n        groupCtx.select(radio.getAttribute('value') ?? '', originalEvent);\n\n        return;\n      }\n\n      radio.click();\n    };\n\n    const listControl = createListControl({\n      direction: () => elementDirection(el),\n      getItems: () => getRadioGroup(),\n      // 'both' accepts every arrow key regardless of the group's visual layout (radio groups\n      // may render horizontally or vertically via CSS) — RTL mirroring of Left/Right still\n      // applies via `direction` since nav.ts's default keymap covers 'both' too.\n      loop: true,\n      onNavigate: ({ event, item }) => {\n        item.focus();\n        selectRadio(item, event);\n      },\n      orientation: 'both',\n      signal: lifecycleSignal(onCleanup),\n    });\n\n    const activateSelf = (originalEvent?: Event): void => {\n      if (checkable.checked.value) return;\n\n      if (groupCtx) {\n        groupCtx.select(props.value.value ?? '', originalEvent);\n\n        return;\n      }\n\n      checkable.toggle(originalEvent ?? new Event('change'));\n    };\n\n    const checkable = createCheckable({\n      checked: checkedFromState,\n      disabled: computed(() => props.disabled.value || Boolean(groupCtx?.disabled.value)),\n      error: props.error,\n      helper: props.helper,\n      onToggle: (payload) => {\n        setFieldChecked(el, payload.checked);\n        dispatchNativeFieldEvent(el, 'input');\n        dispatchNativeFieldEvent(el, 'change');\n      },\n      prefix: 'radio',\n      signal: lifecycleSignal(onCleanup),\n      value: props.value,\n    });\n\n    checkable.attachFormField(\n      useField<string | null>({\n        disabled: checkable.disabled,\n        toFormValue: (v) => v,\n        value: checkable.checkableFormValue,\n      }),\n    );\n\n    const { assistiveId, checked, disabled, errorText, helperText, labelId, toggle } = checkable;\n\n    defineFieldChecked(\n      el,\n      () => checked.value,\n      (value) => {\n        checked.value = value;\n      },\n    );\n\n    bind({\n      attr: {\n        'aria-checked': () => (checked.value ? 'true' : 'false'),\n        'aria-describedby': () => (errorText.value || helperText.value ? assistiveId : null),\n        'aria-disabled': () => (disabled.value ? 'true' : null),\n        'aria-invalid': () => (errorText.value ? 'true' : null),\n        'aria-labelledby': labelId,\n        checked,\n        color: effectiveColor,\n        disabled: () => (disabled.value ? true : undefined),\n        name: () => effectiveName.value || undefined,\n        role: 'radio',\n        size: effectiveSize,\n        tabindex: () => {\n          if (disabled.value) return undefined;\n\n          return checked.value ? 0 : -1;\n        },\n      },\n      class: () => ({\n        'is-checked': checked.value,\n        'is-disabled': disabled.value,\n      }),\n      on: {\n        click: (e: MouseEvent) => {\n          if (disabled.value) return;\n\n          if (groupCtx) {\n            groupCtx.select(props.value.value ?? '', e);\n          } else {\n            if (!effectiveName.value) return;\n\n            if (!checked.value) {\n              const radioName = props.name.value;\n              const allRadios = document.querySelectorAll<HTMLElement>(`ore-radio[name=\"${radioName}\"]`);\n\n              allRadios.forEach((radio) => {\n                if (radio !== el) radio.removeAttribute('checked');\n              });\n\n              toggle(e);\n            }\n          }\n        },\n        keydown: (e: KeyboardEvent) => {\n          if (e.key === ' ' || e.key === 'Enter') {\n            e.preventDefault();\n            activateSelf(e);\n\n            return;\n          }\n\n          const radios = getRadioGroup();\n\n          if (radios.length === 0) return;\n\n          const selfIndex = radios.indexOf(el);\n\n          if (selfIndex === -1) return;\n\n          listControl.set(selfIndex);\n          listControl.handleKeydown(e);\n        },\n      },\n    });\n\n    return html`\n      <div class=\"radio-wrapper\" part=\"radio\">\n        <div class=\"circle\" part=\"circle\">\n          <div class=\"dot\" part=\"dot\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" id=\"${labelId}\"><slot></slot></span>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    forcedColorsFormControlMixin,\n    disabledStateMixin,\n    coarsePointerMixin,\n    sizeVariantMixin(CONTROL_SIZE_PRESET),\n    componentStyles,\n  ],\n});\n"],"mappings":"omCA0EA,IAAa,EAAY,YACzB,EAAsB,EAAW,CAC/B,eAAgB,GAChB,MAAO,CACL,GAAG,EACH,GAAG,EACH,GAAG,EACH,QAAS,EAAK,KAAK,EAAK,EACxB,MAAO,EAAK,OAAO,EACnB,OAAQ,EAAK,OAAO,EACpB,KAAM,EAAK,OAAO,EAClB,MAAO,EAAK,OAAO,CACrB,EACA,MAAM,EAAO,CACX,IAAM,EAAK,EAAQ,EAEb,EAAW,EAAO,CAAe,EACjC,EAAgB,MAAe,GAAU,KAAK,OAAS,EAAM,KAAK,OAAS,EAAE,EAC7E,EAAgB,MAAe,GAAU,KAAK,OAAS,EAAM,KAAK,KAAK,EACvE,EAAiB,MAAe,GAAU,MAAM,OAAS,EAAM,MAAM,KAAK,EAC1E,EAAmB,MACnB,EAAiB,EAAS,MAAM,QAAU,EAAM,MAAM,MAEnD,EAAQ,EAAM,QAAQ,KAC9B,EAEK,kBAAqC,CACzC,IAAM,EAAY,EAAc,MAIhC,OAFK,EAEE,MAAM,KAAK,SAAS,iBAA8B,mBAAmB,EAAU,GAAG,CAAC,CAAC,CAAC,OACzF,GAAM,CAAC,EAAE,aAAa,UAAU,CACnC,EAJuB,CAAC,CAK1B,EAEM,aAAe,EAAoB,IAAgC,CACvE,GAAI,EAAU,CACZ,EAAS,OAAO,EAAM,aAAa,OAAO,GAAK,GAAI,CAAa,EAEhE,MACF,CAEA,EAAM,MAAM,CACd,EAEM,EAAc,EAAkB,CACpC,cAAiB,EAAiB,CAAE,EACpC,aAAgB,cAAc,EAI9B,KAAM,GACN,YAAa,CAAE,QAAO,UAAW,CAC/B,EAAK,MAAM,EACX,YAAY,EAAM,CAAK,CACzB,EACA,YAAa,OACb,OAAQ,EAAgB,CAAS,CACnC,CAAC,EAEK,aAAgB,GAAgC,CAChD,MAAU,QAAQ,MAEtB,IAAI,EAAU,CACZ,EAAS,OAAO,EAAM,MAAM,OAAS,GAAI,CAAa,EAEtD,MACF,CAEA,EAAU,OAAO,GAAiB,IAAI,MAAM,QAAQ,CAAC,CAFrD,CAGF,EAEM,EAAY,EAAgB,CAChC,QAAS,EACT,SAAU,MAAe,EAAM,SAAS,OAAS,EAAQ,GAAU,SAAS,KAAM,EAClF,MAAO,EAAM,MACb,OAAQ,EAAM,OACd,SAAW,GAAY,CACrB,EAAgB,EAAI,EAAQ,OAAO,EACnC,EAAyB,EAAI,OAAO,EACpC,EAAyB,EAAI,QAAQ,CACvC,EACA,OAAQ,QACR,OAAQ,EAAgB,CAAS,EACjC,MAAO,EAAM,KACf,CAAC,EAED,EAAU,gBACR,EAAwB,CACtB,SAAU,EAAU,SACpB,YAAc,GAAM,EACpB,MAAO,EAAU,kBACnB,CAAC,CACH,EAEA,GAAM,CAAE,cAAa,UAAS,WAAU,YAAW,aAAY,UAAS,UAAW,EA4EnF,OA1EA,EACE,MACM,EAAQ,MACb,GAAU,CACT,EAAQ,MAAQ,CAClB,CACF,EAEA,EAAK,CACH,KAAM,CACJ,mBAAuB,EAAQ,MAAQ,OAAS,QAChD,uBAA2B,EAAU,OAAS,EAAW,MAAQ,EAAc,KAC/E,oBAAwB,EAAS,MAAQ,OAAS,KAClD,mBAAuB,EAAU,MAAQ,OAAS,KAClD,kBAAmB,EACnB,UACA,MAAO,EACP,aAAiB,EAAS,MAAQ,GAAO,IAAA,GACzC,SAAY,EAAc,OAAS,IAAA,GACnC,KAAM,QACN,KAAM,EACN,aAAgB,CACV,MAAS,MAEb,OAAO,EAAQ,MAAQ,EAAI,EAC7B,CACF,EACA,WAAc,CACZ,aAAc,EAAQ,MACtB,cAAe,EAAS,KAC1B,GACA,GAAI,CACF,MAAQ,GAAkB,CACpB,MAAS,MAEb,IAAI,EACF,EAAS,OAAO,EAAM,MAAM,OAAS,GAAI,CAAC,MACrC,CACL,GAAI,CAAC,EAAc,MAAO,OAE1B,GAAI,CAAC,EAAQ,MAAO,CAClB,IAAM,EAAY,EAAM,KAAK,MAG7B,SAF2B,iBAA8B,mBAAmB,EAAU,GAEtF,CAAA,CAAU,QAAS,GAAU,CACvB,IAAU,GAAI,EAAM,gBAAgB,SAAS,CACnD,CAAC,EAED,EAAO,CAAC,CACV,CACF,EACF,EACA,QAAU,GAAqB,CAC7B,GAAI,EAAE,MAAQ,KAAO,EAAE,MAAQ,QAAS,CACtC,EAAE,eAAe,EACjB,aAAa,CAAC,EAEd,MACF,CAEA,IAAM,EAAS,cAAc,EAE7B,GAAI,EAAO,SAAW,EAAG,OAEzB,IAAM,EAAY,EAAO,QAAQ,CAAE,EAE/B,IAAc,KAElB,EAAY,IAAI,CAAS,EACzB,EAAY,cAAc,CAAC,EAC7B,CACF,CACF,CAAC,EAEM,CAAI;;;;;;6CAM8B,EAAQ;QAC7C,EAAmB,EAAa,EAAW,CAAU,EAAE;KAE7D,EACA,OAAQ,CACN,EACA,EACA,EACA,EACA,EAAiB,CAAmB,EACpC,CACF,CACF,CAAC"}
+{"version":3,"file":"radio.js","names":[],"sources":["../src/inputs/radio/radio.ts"],"sourcesContent":["import { bind, define, getHost, html, inject, onCleanup, prop, useField } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\nimport { createCheckable, createListControl, elementDirection, lifecycleSignal } from '../../core';\nimport { CONTROL_SIZE_PRESET, disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsFormControlMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\nimport { RADIO_GROUP_CTX } from '../radio-group/radio-group';\nimport { defineFieldChecked, dispatchNativeFieldEvent, setFieldChecked } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './radio.css?inline';\n\n/** Radio component properties */\n\nexport type OreRadioEvents = {\n  change: Event;\n  input: Event;\n};\n\nexport type OreRadioProps = CheckableProps & {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Error message (marks field as invalid) */\n  error?: string;\n  /** Helper text displayed below the radio */\n  helper?: string;\n  /** Component size */\n  size?: ComponentSize;\n};\n\n/**\n * A customizable radio button component for mutually exclusive selections.\n *\n * @element ore-radio\n *\n * @attr {boolean} checked - Checked state\n * @attr {boolean} disabled - Disable radio interaction\n * @attr {string} value - Field value (required for radio groups)\n * @attr {string} name - Form field name (required for radio groups)\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Radio size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the radio\n *\n * @fires input - Emitted when radio is selected.\n * @fires change - Emitted when radio is selected.\n *\n * @slot - Radio button label text\n *\n * @cssprop --radio-size - Control size (width and height)\n * @cssprop --radio-bg - Unchecked background color\n * @cssprop --radio-border-color - Unchecked border color\n * @cssprop --radio-checked-bg - Selected indicator background color\n * @cssprop --radio-color - Selected indicator dot color\n * @cssprop --radio-font-size - Label font size\n * @part radio - The radio wrapper element\n * @part circle - The visual radio circle\n * @part label - The label element\n * @part helper-text - The helper/error text element\n *\n * @example\n * ```html\n * <ore-radio name=\"plan\" value=\"free\">Free</ore-radio>\n * <ore-radio name=\"plan\" value=\"pro\" checked color=\"primary\">Pro</ore-radio>\n * <ore-radio name=\"plan\" value=\"enterprise\" disabled>Enterprise</ore-radio>\n * ```\n */\nexport const RADIO_TAG = 'ore-radio' as const;\ndefine<OreRadioProps>(RADIO_TAG, {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    checked: prop.bool(false),\n    error: prop.string(),\n    helper: prop.string(),\n    name: prop.string(),\n    value: prop.string(),\n  },\n  setup(props) {\n    const el = getHost();\n\n    const groupCtx = inject(RADIO_GROUP_CTX);\n    const effectiveName = computed(() => groupCtx?.name.value || props.name.value || '');\n    const effectiveSize = computed(() => groupCtx?.size.value ?? props.size.value);\n    const effectiveColor = computed(() => groupCtx?.color.value ?? props.color.value);\n    const checkedFromState = computed(() => {\n      if (groupCtx) return groupCtx.value.value === props.value.value;\n\n      return Boolean(props.checked.value);\n    });\n\n    const getRadioGroup = (): HTMLElement[] => {\n      const radioName = effectiveName.value;\n\n      if (!radioName) return [];\n\n      return Array.from(document.querySelectorAll<HTMLElement>(`ore-radio[name=\"${radioName}\"]`)).filter(\n        (r) => !r.hasAttribute('disabled'),\n      );\n    };\n\n    const selectRadio = (radio: HTMLElement, originalEvent?: Event): void => {\n      if (groupCtx) {\n        groupCtx.select(radio.getAttribute('value') ?? '', originalEvent);\n\n        return;\n      }\n\n      radio.click();\n    };\n\n    const listControl = createListControl({\n      direction: () => elementDirection(el),\n      getItems: () => getRadioGroup(),\n      // 'both' accepts every arrow key regardless of the group's visual layout (radio groups\n      // may render horizontally or vertically via CSS): RTL mirroring of Left/Right still\n      // applies via `direction` since nav.ts's default keymap covers 'both' too.\n      loop: true,\n      onNavigate: ({ event, item }) => {\n        item.focus();\n        selectRadio(item, event);\n      },\n      orientation: 'both',\n      signal: lifecycleSignal(onCleanup),\n    });\n\n    const activateSelf = (originalEvent?: Event): void => {\n      if (checkable.checked.value) return;\n\n      if (groupCtx) {\n        groupCtx.select(props.value.value ?? '', originalEvent);\n\n        return;\n      }\n\n      checkable.toggle(originalEvent ?? new Event('change'));\n    };\n\n    const checkable = createCheckable({\n      checked: checkedFromState,\n      disabled: computed(() => props.disabled.value || Boolean(groupCtx?.disabled.value)),\n      error: props.error,\n      helper: props.helper,\n      onToggle: (payload) => {\n        setFieldChecked(el, payload.checked);\n        dispatchNativeFieldEvent(el, 'input');\n        dispatchNativeFieldEvent(el, 'change');\n      },\n      prefix: 'radio',\n      signal: lifecycleSignal(onCleanup),\n      value: props.value,\n    });\n\n    checkable.attachFormField(\n      useField<string | null>({\n        disabled: checkable.disabled,\n        toFormValue: (v) => v,\n        value: checkable.checkableFormValue,\n      }),\n    );\n\n    const { assistiveId, checked, disabled, errorText, helperText, labelId, toggle } = checkable;\n\n    defineFieldChecked(\n      el,\n      () => checked.value,\n      (value) => {\n        checked.value = value;\n      },\n    );\n\n    bind({\n      attr: {\n        'aria-checked': () => (checked.value ? 'true' : 'false'),\n        'aria-describedby': () => (errorText.value || helperText.value ? assistiveId : null),\n        'aria-disabled': () => (disabled.value ? 'true' : null),\n        'aria-invalid': () => (errorText.value ? 'true' : null),\n        'aria-labelledby': labelId,\n        checked,\n        color: effectiveColor,\n        disabled: () => (disabled.value ? true : undefined),\n        name: () => effectiveName.value || undefined,\n        role: 'radio',\n        size: effectiveSize,\n        tabindex: () => {\n          if (disabled.value) return undefined;\n\n          return checked.value ? 0 : -1;\n        },\n      },\n      class: () => ({\n        'is-checked': checked.value,\n        'is-disabled': disabled.value,\n      }),\n      on: {\n        click: (e: MouseEvent) => {\n          if (disabled.value) return;\n\n          if (groupCtx) {\n            groupCtx.select(props.value.value ?? '', e);\n          } else {\n            if (!effectiveName.value) return;\n\n            if (!checked.value) {\n              const radioName = props.name.value;\n              const allRadios = document.querySelectorAll<HTMLElement>(`ore-radio[name=\"${radioName}\"]`);\n\n              allRadios.forEach((radio) => {\n                if (radio !== el) radio.removeAttribute('checked');\n              });\n\n              toggle(e);\n            }\n          }\n        },\n        keydown: (e: KeyboardEvent) => {\n          if (e.key === ' ' || e.key === 'Enter') {\n            e.preventDefault();\n            activateSelf(e);\n\n            return;\n          }\n\n          const radios = getRadioGroup();\n\n          if (radios.length === 0) return;\n\n          const selfIndex = radios.indexOf(el);\n\n          if (selfIndex === -1) return;\n\n          listControl.set(selfIndex);\n          listControl.handleKeydown(e);\n        },\n      },\n    });\n\n    return html`\n      <div class=\"radio-wrapper\" part=\"radio\">\n        <div class=\"circle\" part=\"circle\">\n          <div class=\"dot\" part=\"dot\"></div>\n        </div>\n      </div>\n      <span class=\"label\" part=\"label\" id=\"${labelId}\"><slot></slot></span>\n      ${renderHelperRegion(assistiveId, errorText, helperText)}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    forcedColorsFormControlMixin,\n    disabledStateMixin,\n    coarsePointerMixin,\n    sizeVariantMixin(CONTROL_SIZE_PRESET),\n    componentStyles,\n  ],\n});\n"],"mappings":"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"}

package/dist/rank-item.cjs

@@ -0,0 +1,21 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./content/rank-list/rank-item.css.cjs"),n=require("./rank-list.cjs");let r=require("@vielzeug/ripple"),i=require("@vielzeug/ore");var a=`ore-rank-item`;(0,i.define)(a,{props:{bar:i.prop.bool(!0),rank:i.prop.number(),value:i.prop.number()},setup(e){let t=(0,i.useSlots)(),a=t.has(`description`),o=t.has(`leading`),s=(0,i.inject)(n.RANK_CTX),c=(0,r.computed)(()=>e.bar.value&&e.value.value!=null&&s!=null),l=(0,r.computed)(()=>{let t=s?.scale.value??1,n=e.value.value;return n==null||t<=0?0:Math.max(0,Math.min(1,n/t))}),u=new Intl.NumberFormat,d=(0,r.computed)(()=>{let t=e.value.value;return t==null?``:u.format(t)}),f=(0,r.computed)(()=>t.has(`trailing`).value||e.value.value!=null);return(0,i.bind)({attr:{role:()=>`listitem`}}),i.html`
+      <div class="row" part="row">
+        <span class="rank" part="rank" aria-hidden="true" ?hidden="${()=>e.rank.value==null}"
+          >${()=>e.rank.value??``}</span
+        >
+        <span class="leading" part="leading" ?hidden="${()=>!o.value}"><slot name="leading"></slot></span>
+        <span class="content" part="content">
+          <span class="label" part="label"><slot></slot></span>
+          <span class="description" part="description" ?hidden="${()=>!a.value}"
+            ><slot name="description"></slot
+          ></span>
+        </span>
+        <span class="trailing" part="trailing" ?hidden="${()=>!f.value}"
+          ><slot name="trailing">${d}</slot></span
+        >
+      </div>
+      <div class="bar" part="bar" aria-hidden="true" ?hidden="${()=>!c.value}">
+        <span class="bar-fill" part="bar-fill" style="${()=>`--_fill: ${l.value}`}"></span>
+      </div>
+    `},styles:[e.reducedMotionMixin,t.default]}),exports.RANK_ITEM_TAG=a;
+//# sourceMappingURL=rank-item.cjs.map

package/dist/rank-item.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rank-item.cjs","names":[],"sources":["../src/content/rank-list/rank-item.ts"],"sourcesContent":["import { bind, define, html, inject, prop, useSlots } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport { reducedMotionMixin } from '../../styles';\nimport componentStyles from './rank-item.css?inline';\nimport { RANK_CTX } from './rank-list';\n\n/** Rank-item component properties */\nexport type OreRankItemProps = {\n  /**\n   * Show the proportional bar (default). Disable with `bar=\"false\"` for rows whose `value` is\n   * not a comparable count (a median duration, a rating), where a scaled bar would imply a\n   * ranking the data does not support.\n   */\n  bar?: boolean;\n  /**\n   * Rank position within the parent `ore-rank-list`, starting at 1. Assigned automatically in\n   * DOM order on every rescan; a hand-written value is overwritten the moment the list syncs.\n   */\n  rank?: number;\n  /**\n   * The row's numeric value. Against the largest sibling `value` it sizes the proportional\n   * bar, and without a `trailing` slot it is also the row's own formatted display. Omit it on\n   * rows whose display is not a count (pass the formatted text in the `trailing` slot instead).\n   */\n  value?: number;\n};\n\n/**\n * A single ranked row inside `ore-rank-list`: a rank numeral, an optional `leading` slot\n * (avatar, icon), the label, a secondary `description` line, and a right-aligned `trailing`\n * value, with a proportional bar under the row sized against the largest sibling `value`.\n * The row is the whole visualization: the label and value stay text, so the ranking is\n * readable and accessible with the bar treated as reinforcement, never as the only carrier.\n *\n * @element ore-rank-item\n *\n * @attr {boolean} bar - Show the proportional bar (default). Disable with `bar=\"false\"` for non-count rows.\n * @attr {number} rank - Rank position: assigned automatically by the parent list in DOM order; manual values are overwritten.\n * @attr {number} value - The row's numeric value: sizes the bar against the largest sibling, and is the formatted display when no `trailing` slot is present.\n *\n * @slot leading - Content before the label (e.g. avatar, icon)\n * @slot - Item label\n * @slot description - Secondary line below the label (e.g. sample count)\n * @slot trailing - Right-aligned value display; replaces the formatted `value`\n *\n * @cssprop --rank-number-color - Rank numeral color (default --color-contrast-500)\n * @cssprop --rank-number-width - Rank numeral column width (default --size-6)\n * @cssprop --rank-bar-color - Bar fill color (default --color-primary)\n * @cssprop --rank-track-color - Bar track color (default --color-contrast-100)\n * @cssprop --rank-bar-height - Bar height (default --size-1)\n *\n * @part row - The text row (rank, leading, label, trailing)\n * @part rank - The rank numeral (aria-hidden: the list order carries it)\n * @part leading - The leading slot container\n * @part content - The label + description container\n * @part label - The label slot container\n * @part description - The description slot container\n * @part trailing - The trailing value container\n * @part bar - The bar track\n * @part bar-fill - The bar fill\n * @example\n * ```html\n * <ore-rank-item value=\"8\">\n *   <ore-avatar slot=\"leading\" src=\"alex.png\" alt=\"\" rounded=\"full\" size=\"sm\"></ore-avatar>\n *   Alex\n * </ore-rank-item>\n * <ore-rank-item value=\"6\" bar=\"false\">\n *   Overview\n *   <span slot=\"description\">4 timed sessions</span>\n *   <span slot=\"trailing\">24m 11s</span>\n * </ore-rank-item>\n * ```\n */\nexport const RANK_ITEM_TAG = 'ore-rank-item' as const;\ndefine<OreRankItemProps>(RANK_ITEM_TAG, {\n  props: {\n    bar: prop.bool(true),\n    rank: prop.number(),\n    value: prop.number(),\n  },\n\n  setup(props) {\n    const slots = useSlots<'description' | 'leading' | 'trailing'>();\n    const hasDescription = slots.has('description');\n    const hasLeading = slots.has('leading');\n\n    // Absent outside an `ore-rank-list`: the row degrades to a plain labeled line (no rank,\n    // no bar), the same standalone shape `ore-list-item` keeps outside its list.\n    const rankCtx = inject(RANK_CTX);\n\n    const showBar = computed(() => props.bar.value && props.value.value != null && rankCtx != null);\n\n    // The largest sibling value is the full track; anything above it is clamped so a stale\n    // `value` written between rescans can never push the bar past the row. The share lands on\n    // the fill's `--_fill` custom property, which its transform consumes: see rank-item.css.\n    const barFill = computed(() => {\n      const scale = rankCtx?.scale.value ?? 1;\n      const value = props.value.value;\n\n      if (value == null || scale <= 0) return 0;\n\n      return Math.max(0, Math.min(1, value / scale));\n    });\n\n    const formatCount = new Intl.NumberFormat();\n    const formattedValue = computed(() => {\n      const value = props.value.value;\n\n      return value == null ? '' : formatCount.format(value);\n    });\n\n    const hasTrailing = computed(() => slots.has('trailing').value || props.value.value != null);\n\n    bind({\n      attr: {\n        role: () => 'listitem',\n      },\n    });\n\n    return html`\n      <div class=\"row\" part=\"row\">\n        <span class=\"rank\" part=\"rank\" aria-hidden=\"true\" ?hidden=\"${() => props.rank.value == null}\"\n          >${() => props.rank.value ?? ''}</span\n        >\n        <span class=\"leading\" part=\"leading\" ?hidden=\"${() => !hasLeading.value}\"><slot name=\"leading\"></slot></span>\n        <span class=\"content\" part=\"content\">\n          <span class=\"label\" part=\"label\"><slot></slot></span>\n          <span class=\"description\" part=\"description\" ?hidden=\"${() => !hasDescription.value}\"\n            ><slot name=\"description\"></slot\n          ></span>\n        </span>\n        <span class=\"trailing\" part=\"trailing\" ?hidden=\"${() => !hasTrailing.value}\"\n          ><slot name=\"trailing\">${formattedValue}</slot></span\n        >\n      </div>\n      <div class=\"bar\" part=\"bar\" aria-hidden=\"true\" ?hidden=\"${() => !showBar.value}\">\n        <span class=\"bar-fill\" part=\"bar-fill\" style=\"${() => `--_fill: ${barFill.value}`}\"></span>\n      </div>\n    `;\n  },\n\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":"yQA0EA,IAAa,EAAgB,iBAC7B,EAAA,EAAA,OAAA,CAAyB,EAAe,CACtC,MAAO,CACL,IAAK,EAAA,KAAK,KAAK,EAAI,EACnB,KAAM,EAAA,KAAK,OAAO,EAClB,MAAO,EAAA,KAAK,OAAO,CACrB,EAEA,MAAM,EAAO,CACX,IAAM,GAAA,EAAQ,EAAA,SAAA,CAAiD,EACzD,EAAiB,EAAM,IAAI,aAAa,EACxC,EAAa,EAAM,IAAI,SAAS,EAIhC,GAAA,EAAU,EAAA,OAAA,CAAO,EAAA,QAAQ,EAEzB,GAAA,EAAU,EAAA,SAAA,KAAe,EAAM,IAAI,OAAS,EAAM,MAAM,OAAS,MAAQ,GAAW,IAAI,EAKxF,GAAA,EAAU,EAAA,SAAA,KAAe,CAC7B,IAAM,EAAQ,GAAS,MAAM,OAAS,EAChC,EAAQ,EAAM,MAAM,MAI1B,OAFI,GAAS,MAAQ,GAAS,EAAU,EAEjC,KAAK,IAAI,EAAG,KAAK,IAAI,EAAG,EAAQ,CAAK,CAAC,CAC/C,CAAC,EAEK,EAAc,IAAI,KAAK,aACvB,GAAA,EAAiB,EAAA,SAAA,KAAe,CACpC,IAAM,EAAQ,EAAM,MAAM,MAE1B,OAAO,GAAS,KAAO,GAAK,EAAY,OAAO,CAAK,CACtD,CAAC,EAEK,GAAA,EAAc,EAAA,SAAA,KAAe,EAAM,IAAI,UAAU,CAAC,CAAC,OAAS,EAAM,MAAM,OAAS,IAAI,EAQ3F,OANA,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,SAAY,UACd,CACF,CAAC,EAEM,EAAA,IAAI;;yEAE4D,EAAM,KAAK,OAAS,KAAK;iBACjF,EAAM,KAAK,OAAS,GAAG;;4DAEoB,CAAC,EAAW,MAAM;;;sEAGR,CAAC,EAAe,MAAM;;;;8DAI9B,CAAC,EAAY,MAAM;mCAChD,EAAe;;;oEAGoB,CAAC,EAAQ,MAAM;4DACvB,YAAY,EAAQ,QAAQ;;KAGxF,EAEA,OAAQ,CAAC,EAAA,mBAAoB,EAAA,OAAe,CAC9C,CAAC"}