@vielzeug/refine 2.1.0 → 2.1.2

package/dist/chat-message.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"chat-message.cjs","names":[],"sources":["../src/content/chat-message/chat-message.ts"],"sourcesContent":["import { define, html, onEvent, onMounted, prop, ref, useEmit, useSlots } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\nimport { watch } from '@vielzeug/ripple/watch';\n\nimport { announce } from '../../core';\nimport { reducedMotionMixin } from '../../styles';\nimport '../icon/icon';\nimport componentStyles from './chat-message.css?inline';\n\nexport type ChatMessageSender = 'assistant' | 'system' | 'user';\nexport type ChatMessageStatus = 'error' | 'sending' | 'sent';\n\nconst SENDER_LABELS: Record<ChatMessageSender, string> = {\n  assistant: 'Assistant',\n  system: 'System',\n  user: 'You',\n};\n\n/** Events emitted by the chat-message component */\nexport type OreChatMessageEvents = {\n  /** Fired when the retry action is activated on a `status=\"error\"` message */\n  retry: { originalEvent?: Event };\n};\n\n/** Chat message component properties */\nexport type OreChatMessageProps = {\n  /** Error detail shown beneath the bubble; only visible when `status=\"error\"` */\n  error?: string;\n  /** Display name shown above the bubble (falls back to a generic label per `sender`) */\n  name?: string;\n  /** Who sent the message — controls alignment and bubble styling */\n  sender?: ChatMessageSender;\n  /** Delivery status for outgoing messages — shows an inline indicator and, for `\"error\"`, a retry action */\n  status?: ChatMessageStatus;\n  /** Append a blinking cursor after the content, for a message still streaming in */\n  streaming?: boolean;\n  /** ISO 8601 timestamp; rendered as a localized short time in a semantic `<time>` element */\n  timestamp?: string;\n};\n\n/**\n * A single message bubble for chat/conversation UIs — sender-aware alignment, an optional\n * avatar slot, delivery status (sending/sent/error with retry), and a streaming cursor for\n * assistant messages still generating. Content is provided via the default slot, so any\n * markdown-to-HTML rendering stays the consumer's choice.\n *\n * The default slot's leading/trailing whitespace-only text nodes are trimmed in place once\n * per slot assignment (mount, and again on `slotchange`) — pretty-printed HTML's\n * indentation would otherwise render as blank lines, since the bubble preserves line breaks\n * (`white-space: pre-wrap`) for genuine multi-paragraph replies. This mutates those specific\n * text nodes' `textContent` directly; it never touches nodes appended afterward (e.g. by\n * `el.textContent += token` while streaming), only the ones present at assignment time.\n *\n * @element ore-chat-message\n *\n * @attr {string} sender - Who sent the message: 'user' | 'assistant' | 'system' (default 'assistant')\n * @attr {string} name - Display name shown above the bubble\n * @attr {string} timestamp - ISO 8601 timestamp, rendered as a localized short time\n * @attr {string} status - Delivery status: 'sending' | 'sent' | 'error'\n * @attr {string} error - Error detail shown beneath the bubble when status=\"error\"\n * @attr {boolean} streaming - Append a blinking cursor after the content\n *\n * @fires retry - Fired when the retry action is activated. detail: { originalEvent }\n *\n * @slot - Message content\n * @slot avatar - Avatar element (e.g. `<ore-avatar>`)\n * @slot actions - Action buttons shown beneath the message (copy, regenerate, feedback, …)\n *\n * @cssprop --chat-message-bg - Bubble background color (assistant/system)\n * @cssprop --chat-message-color - Bubble text color (assistant/system)\n * @cssprop --chat-message-user-bg - Bubble background color (user)\n * @cssprop --chat-message-user-color - Bubble text color (user)\n * @cssprop --chat-message-radius - Bubble border radius\n * @cssprop --chat-message-max-width - Maximum bubble width\n *\n * @part row - Root row container (avatar + column)\n * @part avatar - Avatar slot container\n * @part column - Column containing name, bubble, meta, and actions\n * @part name - Sender display name\n * @part bubble - Message bubble container\n * @part content - Content container inside the bubble\n * @part cursor - Blinking streaming cursor\n * @part meta - Row of timestamp, status, and error text below the bubble\n * @part timestamp - Timestamp `<time>` element\n * @part status - Status indicator\n * @part error - Error text\n * @part retry - Retry button (status=\"error\" only)\n * @part actions - Actions slot container\n *\n * @example\n * ```html\n * <ore-chat-message sender=\"user\" timestamp=\"2024-01-01T12:00:00Z\" status=\"sent\">\n *   What's the weather like today?\n * </ore-chat-message>\n *\n * <ore-chat-message sender=\"assistant\" name=\"Assistant\" streaming>\n *   Let me check that for you\n * </ore-chat-message>\n * ```\n */\nexport const CHAT_MESSAGE_TAG = 'ore-chat-message' as const;\ndefine<OreChatMessageProps>(CHAT_MESSAGE_TAG, {\n  props: {\n    error: prop.string(),\n    name: prop.string(),\n    sender: prop.oneOf(['user', 'assistant', 'system'] as const, 'assistant'),\n    status: prop.string<ChatMessageStatus>(),\n    streaming: prop.bool(false),\n    timestamp: prop.string(),\n  },\n  setup(props) {\n    const emit = useEmit<OreChatMessageEvents>();\n    const slots = useSlots();\n\n    const senderLabel = () => SENDER_LABELS[props.sender.value ?? 'assistant'];\n\n    const bubbleLabel = computed(() => `Message from ${props.name.value || senderLabel()}`);\n\n    const formattedTime = computed(() => {\n      const raw = props.timestamp.value;\n\n      if (!raw) return '';\n\n      const date = new Date(raw);\n\n      if (Number.isNaN(date.getTime())) return '';\n\n      return new Intl.DateTimeFormat(undefined, { hour: 'numeric', minute: '2-digit' }).format(date);\n    });\n\n    const hasMeta = computed(\n      () => Boolean(formattedTime.value) || Boolean(props.status.value) || Boolean(props.error.value),\n    );\n\n    // Announce delivery failures — the visible retry button and error text are always present\n    // for sighted users, but a failed send is exactly the kind of state change a screen\n    // reader user could otherwise miss entirely. Keyed on `error` text too (not just\n    // `status`) so a retry that fails again with a *different* reason re-announces even\n    // though `status` never left `\"error\"` in between; a second failure with the identical\n    // message doesn't re-fire, since the source value hasn't actually changed.\n    watch(\n      () => (props.status.value === 'error' ? (props.error.value ?? '') : null),\n      (errorText) => {\n        if (errorText !== null) {\n          announce(`Message failed to send${errorText ? `: ${errorText}` : ''}`, { politeness: 'assertive' });\n        }\n      },\n    );\n\n    function handleRetry(e: Event): void {\n      emit('retry', { originalEvent: e });\n    }\n\n    // ── Trim author-time indentation whitespace from the default slot ──\n    // `.content` uses `white-space: pre-wrap` so genuine multi-paragraph replies keep their\n    // line breaks — but that also preserves the leading/trailing newline + indentation from\n    // pretty-printed HTML (`<ore-chat-message>\\n  Hello\\n</ore-chat-message>`), rendering as\n    // visible blank lines around the text. Trim only the outermost edges once per slot\n    // assignment; appending tokens to an existing text node for streaming doesn't re-fire\n    // `slotchange`, so this never interferes with in-progress streaming updates.\n    //\n    // A named-slotted sibling (e.g. `<ore-avatar slot=\"avatar\">` between the opening tag and\n    // the message text) splits the default slot's light-DOM text into *multiple* text nodes\n    // — text nodes can't target a named slot, so each run on either side of the element is\n    // assigned separately. The \"real\" content can start on a later node than index 0 (it's\n    // still preceded by its own leading indentation), so this walks inward from each end,\n    // fully clearing whitespace-only nodes and stopping at the first node with real content\n    // on each side — rather than only touching the very first/last assigned node.\n    const contentSlotRef = ref<HTMLSlotElement>();\n\n    function trimSlotEdgeWhitespace(): void {\n      const nodes = contentSlotRef.value?.assignedNodes({ flatten: true });\n\n      if (!nodes || nodes.length === 0) return;\n\n      for (const node of nodes) {\n        if (node.nodeType !== Node.TEXT_NODE) break;\n\n        const trimmed = (node.textContent ?? '').replace(/^\\s+/, '');\n\n        node.textContent = trimmed;\n\n        if (trimmed !== '') break;\n      }\n\n      for (let i = nodes.length - 1; i >= 0; i--) {\n        const node = nodes[i];\n\n        if (node.nodeType !== Node.TEXT_NODE) break;\n\n        const trimmed = (node.textContent ?? '').replace(/\\s+$/, '');\n\n        node.textContent = trimmed;\n\n        if (trimmed !== '') break;\n      }\n    }\n\n    onMounted(() => {\n      trimSlotEdgeWhitespace();\n\n      const slotEl = contentSlotRef.value;\n\n      if (slotEl) onEvent(slotEl, 'slotchange', trimSlotEdgeWhitespace);\n    });\n\n    return html`\n      <div class=\"row\" part=\"row\">\n        <span class=\"avatar\" part=\"avatar\" ?hidden=\"${() => !slots.has('avatar').value}\">\n          <slot name=\"avatar\"></slot>\n        </span>\n        <div class=\"column\" part=\"column\">\n          <span class=\"name\" part=\"name\" ?hidden=\"${() => !props.name.value}\">${props.name}</span>\n          <div class=\"bubble\" part=\"bubble\" role=\"article\" aria-label=\"${bubbleLabel}\">\n            <div class=\"content\" part=\"content\">\n              <slot class=\"content-slot\" ref=\"${contentSlotRef}\"></slot>\n              <span class=\"cursor\" part=\"cursor\" aria-hidden=\"true\" ?hidden=\"${() => !props.streaming.value}\"></span>\n            </div>\n          </div>\n          <div class=\"meta\" part=\"meta\" ?hidden=\"${() => !hasMeta.value}\">\n            <time\n              class=\"timestamp\"\n              part=\"timestamp\"\n              datetime=\"${props.timestamp}\"\n              ?hidden=\"${() => !formattedTime.value}\">\n              ${formattedTime}\n            </time>\n            <span class=\"status\" part=\"status\" data-status=\"${props.status}\" ?hidden=\"${() => !props.status.value}\">\n              ${() => {\n                switch (props.status.value) {\n                  case 'error':\n                    return html`\n                      <ore-icon name=\"alert-circle\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n                    `;\n                  case 'sending':\n                    return html`\n                      <span class=\"spinner\" aria-hidden=\"true\"></span>\n                    `;\n                  case 'sent':\n                    return html`\n                      <ore-icon name=\"check\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n                    `;\n                  default:\n                    return '';\n                }\n              }}\n            </span>\n            <span class=\"error-text\" part=\"error\" role=\"alert\" ?hidden=\"${() => !props.error.value}\">\n              ${props.error}\n            </span>\n            <button\n              class=\"retry\"\n              part=\"retry\"\n              type=\"button\"\n              ?hidden=\"${() => props.status.value !== 'error'}\"\n              @click=\"${handleRetry}\">\n              Retry\n            </button>\n          </div>\n          <div class=\"actions\" part=\"actions\" ?hidden=\"${() => !slots.has('actions').value}\">\n            <slot name=\"actions\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"chat-message.cjs","names":[],"sources":["../src/content/chat-message/chat-message.ts"],"sourcesContent":["import { define, html, onEvent, onMounted, prop, ref, useEmit, useSlots } from '@vielzeug/ore';\nimport { computed, watch } from '@vielzeug/ripple';\n\nimport { announce } from '../../core';\nimport { reducedMotionMixin } from '../../styles';\nimport '../icon/icon';\nimport componentStyles from './chat-message.css?inline';\n\nexport type ChatMessageSender = 'assistant' | 'system' | 'user';\nexport type ChatMessageStatus = 'error' | 'sending' | 'sent';\n\nconst SENDER_LABELS: Record<ChatMessageSender, string> = {\n  assistant: 'Assistant',\n  system: 'System',\n  user: 'You',\n};\n\n/** Events emitted by the chat-message component */\nexport type OreChatMessageEvents = {\n  /** Fired when the retry action is activated on a `status=\"error\"` message */\n  retry: { originalEvent?: Event };\n};\n\n/** Chat message component properties */\nexport type OreChatMessageProps = {\n  /** Error detail shown beneath the bubble; only visible when `status=\"error\"` */\n  error?: string;\n  /** Display name shown above the bubble (falls back to a generic label per `sender`) */\n  name?: string;\n  /** Who sent the message — controls alignment and bubble styling */\n  sender?: ChatMessageSender;\n  /** Delivery status for outgoing messages — shows an inline indicator and, for `\"error\"`, a retry action */\n  status?: ChatMessageStatus;\n  /** Append a blinking cursor after the content, for a message still streaming in */\n  streaming?: boolean;\n  /** ISO 8601 timestamp; rendered as a localized short time in a semantic `<time>` element */\n  timestamp?: string;\n};\n\n/**\n * A single message bubble for chat/conversation UIs — sender-aware alignment, an optional\n * avatar slot, delivery status (sending/sent/error with retry), and a streaming cursor for\n * assistant messages still generating. Content is provided via the default slot, so any\n * markdown-to-HTML rendering stays the consumer's choice.\n *\n * The default slot's leading/trailing whitespace-only text nodes are trimmed in place once\n * per slot assignment (mount, and again on `slotchange`) — pretty-printed HTML's\n * indentation would otherwise render as blank lines, since the bubble preserves line breaks\n * (`white-space: pre-wrap`) for genuine multi-paragraph replies. This mutates those specific\n * text nodes' `textContent` directly; it never touches nodes appended afterward (e.g. by\n * `el.textContent += token` while streaming), only the ones present at assignment time.\n *\n * @element ore-chat-message\n *\n * @attr {string} sender - Who sent the message: 'user' | 'assistant' | 'system' (default 'assistant')\n * @attr {string} name - Display name shown above the bubble\n * @attr {string} timestamp - ISO 8601 timestamp, rendered as a localized short time\n * @attr {string} status - Delivery status: 'sending' | 'sent' | 'error'\n * @attr {string} error - Error detail shown beneath the bubble when status=\"error\"\n * @attr {boolean} streaming - Append a blinking cursor after the content\n *\n * @fires retry - Fired when the retry action is activated. detail: { originalEvent }\n *\n * @slot - Message content\n * @slot avatar - Avatar element (e.g. `<ore-avatar>`)\n * @slot actions - Action buttons shown beneath the message (copy, regenerate, feedback, …)\n *\n * @cssprop --chat-message-bg - Bubble background color (assistant/system)\n * @cssprop --chat-message-color - Bubble text color (assistant/system)\n * @cssprop --chat-message-user-bg - Bubble background color (user)\n * @cssprop --chat-message-user-color - Bubble text color (user)\n * @cssprop --chat-message-radius - Bubble border radius\n * @cssprop --chat-message-max-width - Maximum bubble width\n *\n * @part row - Root row container (avatar + column)\n * @part avatar - Avatar slot container\n * @part column - Column containing name, bubble, meta, and actions\n * @part name - Sender display name\n * @part bubble - Message bubble container\n * @part content - Content container inside the bubble\n * @part cursor - Blinking streaming cursor\n * @part meta - Row of timestamp, status, and error text below the bubble\n * @part timestamp - Timestamp `<time>` element\n * @part status - Status indicator\n * @part error - Error text\n * @part retry - Retry button (status=\"error\" only)\n * @part actions - Actions slot container\n *\n * @example\n * ```html\n * <ore-chat-message sender=\"user\" timestamp=\"2024-01-01T12:00:00Z\" status=\"sent\">\n *   What's the weather like today?\n * </ore-chat-message>\n *\n * <ore-chat-message sender=\"assistant\" name=\"Assistant\" streaming>\n *   Let me check that for you\n * </ore-chat-message>\n * ```\n */\nexport const CHAT_MESSAGE_TAG = 'ore-chat-message' as const;\ndefine<OreChatMessageProps>(CHAT_MESSAGE_TAG, {\n  props: {\n    error: prop.string(),\n    name: prop.string(),\n    sender: prop.oneOf(['user', 'assistant', 'system'] as const, 'assistant'),\n    status: prop.string<ChatMessageStatus>(),\n    streaming: prop.bool(false),\n    timestamp: prop.string(),\n  },\n  setup(props) {\n    const emit = useEmit<OreChatMessageEvents>();\n    const slots = useSlots();\n\n    const senderLabel = () => SENDER_LABELS[props.sender.value ?? 'assistant'];\n\n    const bubbleLabel = computed(() => `Message from ${props.name.value || senderLabel()}`);\n\n    const formattedTime = computed(() => {\n      const raw = props.timestamp.value;\n\n      if (!raw) return '';\n\n      const date = new Date(raw);\n\n      if (Number.isNaN(date.getTime())) return '';\n\n      return new Intl.DateTimeFormat(undefined, { hour: 'numeric', minute: '2-digit' }).format(date);\n    });\n\n    const hasMeta = computed(\n      () => Boolean(formattedTime.value) || Boolean(props.status.value) || Boolean(props.error.value),\n    );\n\n    // Announce delivery failures — the visible retry button and error text are always present\n    // for sighted users, but a failed send is exactly the kind of state change a screen\n    // reader user could otherwise miss entirely. Keyed on `error` text too (not just\n    // `status`) so a retry that fails again with a *different* reason re-announces even\n    // though `status` never left `\"error\"` in between; a second failure with the identical\n    // message doesn't re-fire, since the source value hasn't actually changed.\n    watch(\n      () => (props.status.value === 'error' ? (props.error.value ?? '') : null),\n      (errorText) => {\n        if (errorText !== null) {\n          announce(`Message failed to send${errorText ? `: ${errorText}` : ''}`, { politeness: 'assertive' });\n        }\n      },\n    );\n\n    function handleRetry(e: Event): void {\n      emit('retry', { originalEvent: e });\n    }\n\n    // ── Trim author-time indentation whitespace from the default slot ──\n    // `.content` uses `white-space: pre-wrap` so genuine multi-paragraph replies keep their\n    // line breaks — but that also preserves the leading/trailing newline + indentation from\n    // pretty-printed HTML (`<ore-chat-message>\\n  Hello\\n</ore-chat-message>`), rendering as\n    // visible blank lines around the text. Trim only the outermost edges once per slot\n    // assignment; appending tokens to an existing text node for streaming doesn't re-fire\n    // `slotchange`, so this never interferes with in-progress streaming updates.\n    //\n    // A named-slotted sibling (e.g. `<ore-avatar slot=\"avatar\">` between the opening tag and\n    // the message text) splits the default slot's light-DOM text into *multiple* text nodes\n    // — text nodes can't target a named slot, so each run on either side of the element is\n    // assigned separately. The \"real\" content can start on a later node than index 0 (it's\n    // still preceded by its own leading indentation), so this walks inward from each end,\n    // fully clearing whitespace-only nodes and stopping at the first node with real content\n    // on each side — rather than only touching the very first/last assigned node.\n    const contentSlotRef = ref<HTMLSlotElement>();\n\n    function trimSlotEdgeWhitespace(): void {\n      const nodes = contentSlotRef.value?.assignedNodes({ flatten: true });\n\n      if (!nodes || nodes.length === 0) return;\n\n      for (const node of nodes) {\n        if (node.nodeType !== Node.TEXT_NODE) break;\n\n        const trimmed = (node.textContent ?? '').replace(/^\\s+/, '');\n\n        node.textContent = trimmed;\n\n        if (trimmed !== '') break;\n      }\n\n      for (let i = nodes.length - 1; i >= 0; i--) {\n        const node = nodes[i];\n\n        if (node.nodeType !== Node.TEXT_NODE) break;\n\n        const trimmed = (node.textContent ?? '').replace(/\\s+$/, '');\n\n        node.textContent = trimmed;\n\n        if (trimmed !== '') break;\n      }\n    }\n\n    onMounted(() => {\n      trimSlotEdgeWhitespace();\n\n      const slotEl = contentSlotRef.value;\n\n      if (slotEl) onEvent(slotEl, 'slotchange', trimSlotEdgeWhitespace);\n    });\n\n    return html`\n      <div class=\"row\" part=\"row\">\n        <span class=\"avatar\" part=\"avatar\" ?hidden=\"${() => !slots.has('avatar').value}\">\n          <slot name=\"avatar\"></slot>\n        </span>\n        <div class=\"column\" part=\"column\">\n          <span class=\"name\" part=\"name\" ?hidden=\"${() => !props.name.value}\">${props.name}</span>\n          <div class=\"bubble\" part=\"bubble\" role=\"article\" aria-label=\"${bubbleLabel}\">\n            <div class=\"content\" part=\"content\">\n              <slot class=\"content-slot\" ref=\"${contentSlotRef}\"></slot>\n              <span class=\"cursor\" part=\"cursor\" aria-hidden=\"true\" ?hidden=\"${() => !props.streaming.value}\"></span>\n            </div>\n          </div>\n          <div class=\"meta\" part=\"meta\" ?hidden=\"${() => !hasMeta.value}\">\n            <time\n              class=\"timestamp\"\n              part=\"timestamp\"\n              datetime=\"${props.timestamp}\"\n              ?hidden=\"${() => !formattedTime.value}\">\n              ${formattedTime}\n            </time>\n            <span class=\"status\" part=\"status\" data-status=\"${props.status}\" ?hidden=\"${() => !props.status.value}\">\n              ${() => {\n                switch (props.status.value) {\n                  case 'error':\n                    return html`\n                      <ore-icon name=\"alert-circle\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n                    `;\n                  case 'sending':\n                    return html`\n                      <span class=\"spinner\" aria-hidden=\"true\"></span>\n                    `;\n                  case 'sent':\n                    return html`\n                      <ore-icon name=\"check\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n                    `;\n                  default:\n                    return '';\n                }\n              }}\n            </span>\n            <span class=\"error-text\" part=\"error\" role=\"alert\" ?hidden=\"${() => !props.error.value}\">\n              ${props.error}\n            </span>\n            <button\n              class=\"retry\"\n              part=\"retry\"\n              type=\"button\"\n              ?hidden=\"${() => props.status.value !== 'error'}\"\n              @click=\"${handleRetry}\">\n              Retry\n            </button>\n          </div>\n          <div class=\"actions\" part=\"actions\" ?hidden=\"${() => !slots.has('actions').value}\">\n            <slot name=\"actions\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":"oRAWA,IAAM,EAAmD,CACvD,UAAW,YACX,OAAQ,SACR,KAAM,KACR,EAoFa,EAAmB,oBAChC,EAAA,EAAA,OAAA,CAA4B,EAAkB,CAC5C,MAAO,CACL,MAAO,EAAA,KAAK,OAAO,EACnB,KAAM,EAAA,KAAK,OAAO,EAClB,OAAQ,EAAA,KAAK,MAAM,CAAC,OAAQ,YAAa,QAAQ,EAAY,WAAW,EACxE,OAAQ,EAAA,KAAK,OAA0B,EACvC,UAAW,EAAA,KAAK,KAAK,EAAK,EAC1B,UAAW,EAAA,KAAK,OAAO,CACzB,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAO,EAAA,QAAA,CAA8B,EACrC,GAAA,EAAQ,EAAA,SAAA,CAAS,EAEjB,MAAoB,EAAc,EAAM,OAAO,OAAS,aAExD,GAAA,EAAc,EAAA,SAAA,KAAe,gBAAgB,EAAM,KAAK,OAAS,EAAY,GAAG,EAEhF,GAAA,EAAgB,EAAA,SAAA,KAAe,CACnC,IAAM,EAAM,EAAM,UAAU,MAE5B,GAAI,CAAC,EAAK,MAAO,GAEjB,IAAM,EAAO,IAAI,KAAK,CAAG,EAIzB,OAFI,OAAO,MAAM,EAAK,QAAQ,CAAC,EAAU,GAElC,IAAI,KAAK,eAAe,IAAA,GAAW,CAAE,KAAM,UAAW,OAAQ,SAAU,CAAC,CAAC,CAAC,OAAO,CAAI,CAC/F,CAAC,EAEK,GAAA,EAAU,EAAA,SAAA,KACR,EAAQ,EAAc,OAAU,EAAQ,EAAM,OAAO,OAAU,EAAQ,EAAM,MAAM,KAC3F,GAQA,EAAA,EAAA,MAAA,KACS,EAAM,OAAO,QAAU,QAAW,EAAM,MAAM,OAAS,GAAM,KACnE,GAAc,CACT,IAAc,MAChB,EAAA,SAAS,yBAAyB,EAAY,KAAK,IAAc,KAAM,CAAE,WAAY,WAAY,CAAC,CAEtG,CACF,EAEA,SAAS,EAAY,EAAgB,CACnC,EAAK,QAAS,CAAE,cAAe,CAAE,CAAC,CACpC,CAiBA,IAAM,GAAA,EAAiB,EAAA,IAAA,CAAqB,EAE5C,SAAS,GAA+B,CACtC,IAAM,EAAQ,EAAe,OAAO,cAAc,CAAE,QAAS,EAAK,CAAC,EAE/D,MAAC,GAAS,EAAM,SAAW,GAE/B,KAAK,IAAM,KAAQ,EAAO,CACxB,GAAI,EAAK,WAAa,KAAK,UAAW,MAEtC,IAAM,GAAW,EAAK,aAAe,GAAA,CAAI,QAAQ,OAAQ,EAAE,EAI3D,GAFA,EAAK,YAAc,EAEf,IAAY,GAAI,KACtB,CAEA,IAAK,IAAI,EAAI,EAAM,OAAS,EAAG,GAAK,EAAG,IAAK,CAC1C,IAAM,EAAO,EAAM,GAEnB,GAAI,EAAK,WAAa,KAAK,UAAW,MAEtC,IAAM,GAAW,EAAK,aAAe,GAAA,CAAI,QAAQ,OAAQ,EAAE,EAI3D,GAFA,EAAK,YAAc,EAEf,IAAY,GAAI,KACtB,CAZA,CAaF,CAUA,OARA,EAAA,EAAA,UAAA,KAAgB,CACd,EAAuB,EAEvB,IAAM,EAAS,EAAe,MAE1B,IAAQ,EAAA,EAAA,QAAA,CAAQ,EAAQ,aAAc,CAAsB,CAClE,CAAC,EAEM,EAAA,IAAI;;0DAE6C,CAAC,EAAM,IAAI,QAAQ,CAAC,CAAC,MAAM;;;;wDAI7B,CAAC,EAAM,KAAK,MAAM,IAAI,EAAM,KAAK;yEAClB,EAAY;;gDAErC,EAAe;mFACsB,CAAC,EAAM,UAAU,MAAM;;;uDAGnD,CAAC,EAAQ,MAAM;;;;0BAI9C,EAAM,UAAU;6BACX,CAAC,EAAc,MAAM;gBACpC,EAAc;;8DAEgC,EAAM,OAAO,iBAAmB,CAAC,EAAM,OAAO,MAAM;oBAC5F,CACN,OAAQ,EAAM,OAAO,MAArB,CACE,IAAK,QACH,MAAO,GAAA,IAAI;;sBAGb,IAAK,UACH,MAAO,GAAA,IAAI;;sBAGb,IAAK,OACH,MAAO,GAAA,IAAI;;sBAGb,QACE,MAAO,EACX,CACF,EAAE;;8EAEgE,CAAC,EAAM,MAAM,MAAM;gBACnF,EAAM,MAAM;;;;;;6BAMG,EAAM,OAAO,QAAU,QAAQ;wBACtC,EAAY;;;;6DAI2B,CAAC,EAAM,IAAI,SAAS,CAAC,CAAC,MAAM;;;;;KAMzF,EACA,OAAQ,CAAC,EAAA,mBAAoB,EAAA,OAAe,CAC9C,CAAC"}

package/dist/chat-message.js

@@ -2,8 +2,7 @@ import { reducedMotionMixin as e } from "./styles/mixins/accessibility.css.js";
 import { announce as t } from "./core/announcer.js";
 import n from "./content/chat-message/chat-message.css.js";
 import { define as r, html as i, onEvent as a, onMounted as o, prop as s, ref as c, useEmit as l, useSlots as u } from "@vielzeug/ore";
-import { computed as d } from "@vielzeug/ripple";
-import { watch as f } from "@vielzeug/ripple/watch";
+import { computed as d, watch as f } from "@vielzeug/ripple";
 //#region src/content/chat-message/chat-message.ts
 var p = {
 	assistant: "Assistant",

package/dist/chat-message.js.map

@@ -1 +1 @@
-{"version":3,"file":"chat-message.js","names":[],"sources":["../src/content/chat-message/chat-message.ts"],"sourcesContent":["import { define, html, onEvent, onMounted, prop, ref, useEmit, useSlots } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\nimport { watch } from '@vielzeug/ripple/watch';\n\nimport { announce } from '../../core';\nimport { reducedMotionMixin } from '../../styles';\nimport '../icon/icon';\nimport componentStyles from './chat-message.css?inline';\n\nexport type ChatMessageSender = 'assistant' | 'system' | 'user';\nexport type ChatMessageStatus = 'error' | 'sending' | 'sent';\n\nconst SENDER_LABELS: Record<ChatMessageSender, string> = {\n  assistant: 'Assistant',\n  system: 'System',\n  user: 'You',\n};\n\n/** Events emitted by the chat-message component */\nexport type OreChatMessageEvents = {\n  /** Fired when the retry action is activated on a `status=\"error\"` message */\n  retry: { originalEvent?: Event };\n};\n\n/** Chat message component properties */\nexport type OreChatMessageProps = {\n  /** Error detail shown beneath the bubble; only visible when `status=\"error\"` */\n  error?: string;\n  /** Display name shown above the bubble (falls back to a generic label per `sender`) */\n  name?: string;\n  /** Who sent the message — controls alignment and bubble styling */\n  sender?: ChatMessageSender;\n  /** Delivery status for outgoing messages — shows an inline indicator and, for `\"error\"`, a retry action */\n  status?: ChatMessageStatus;\n  /** Append a blinking cursor after the content, for a message still streaming in */\n  streaming?: boolean;\n  /** ISO 8601 timestamp; rendered as a localized short time in a semantic `<time>` element */\n  timestamp?: string;\n};\n\n/**\n * A single message bubble for chat/conversation UIs — sender-aware alignment, an optional\n * avatar slot, delivery status (sending/sent/error with retry), and a streaming cursor for\n * assistant messages still generating. Content is provided via the default slot, so any\n * markdown-to-HTML rendering stays the consumer's choice.\n *\n * The default slot's leading/trailing whitespace-only text nodes are trimmed in place once\n * per slot assignment (mount, and again on `slotchange`) — pretty-printed HTML's\n * indentation would otherwise render as blank lines, since the bubble preserves line breaks\n * (`white-space: pre-wrap`) for genuine multi-paragraph replies. This mutates those specific\n * text nodes' `textContent` directly; it never touches nodes appended afterward (e.g. by\n * `el.textContent += token` while streaming), only the ones present at assignment time.\n *\n * @element ore-chat-message\n *\n * @attr {string} sender - Who sent the message: 'user' | 'assistant' | 'system' (default 'assistant')\n * @attr {string} name - Display name shown above the bubble\n * @attr {string} timestamp - ISO 8601 timestamp, rendered as a localized short time\n * @attr {string} status - Delivery status: 'sending' | 'sent' | 'error'\n * @attr {string} error - Error detail shown beneath the bubble when status=\"error\"\n * @attr {boolean} streaming - Append a blinking cursor after the content\n *\n * @fires retry - Fired when the retry action is activated. detail: { originalEvent }\n *\n * @slot - Message content\n * @slot avatar - Avatar element (e.g. `<ore-avatar>`)\n * @slot actions - Action buttons shown beneath the message (copy, regenerate, feedback, …)\n *\n * @cssprop --chat-message-bg - Bubble background color (assistant/system)\n * @cssprop --chat-message-color - Bubble text color (assistant/system)\n * @cssprop --chat-message-user-bg - Bubble background color (user)\n * @cssprop --chat-message-user-color - Bubble text color (user)\n * @cssprop --chat-message-radius - Bubble border radius\n * @cssprop --chat-message-max-width - Maximum bubble width\n *\n * @part row - Root row container (avatar + column)\n * @part avatar - Avatar slot container\n * @part column - Column containing name, bubble, meta, and actions\n * @part name - Sender display name\n * @part bubble - Message bubble container\n * @part content - Content container inside the bubble\n * @part cursor - Blinking streaming cursor\n * @part meta - Row of timestamp, status, and error text below the bubble\n * @part timestamp - Timestamp `<time>` element\n * @part status - Status indicator\n * @part error - Error text\n * @part retry - Retry button (status=\"error\" only)\n * @part actions - Actions slot container\n *\n * @example\n * ```html\n * <ore-chat-message sender=\"user\" timestamp=\"2024-01-01T12:00:00Z\" status=\"sent\">\n *   What's the weather like today?\n * </ore-chat-message>\n *\n * <ore-chat-message sender=\"assistant\" name=\"Assistant\" streaming>\n *   Let me check that for you\n * </ore-chat-message>\n * ```\n */\nexport const CHAT_MESSAGE_TAG = 'ore-chat-message' as const;\ndefine<OreChatMessageProps>(CHAT_MESSAGE_TAG, {\n  props: {\n    error: prop.string(),\n    name: prop.string(),\n    sender: prop.oneOf(['user', 'assistant', 'system'] as const, 'assistant'),\n    status: prop.string<ChatMessageStatus>(),\n    streaming: prop.bool(false),\n    timestamp: prop.string(),\n  },\n  setup(props) {\n    const emit = useEmit<OreChatMessageEvents>();\n    const slots = useSlots();\n\n    const senderLabel = () => SENDER_LABELS[props.sender.value ?? 'assistant'];\n\n    const bubbleLabel = computed(() => `Message from ${props.name.value || senderLabel()}`);\n\n    const formattedTime = computed(() => {\n      const raw = props.timestamp.value;\n\n      if (!raw) return '';\n\n      const date = new Date(raw);\n\n      if (Number.isNaN(date.getTime())) return '';\n\n      return new Intl.DateTimeFormat(undefined, { hour: 'numeric', minute: '2-digit' }).format(date);\n    });\n\n    const hasMeta = computed(\n      () => Boolean(formattedTime.value) || Boolean(props.status.value) || Boolean(props.error.value),\n    );\n\n    // Announce delivery failures — the visible retry button and error text are always present\n    // for sighted users, but a failed send is exactly the kind of state change a screen\n    // reader user could otherwise miss entirely. Keyed on `error` text too (not just\n    // `status`) so a retry that fails again with a *different* reason re-announces even\n    // though `status` never left `\"error\"` in between; a second failure with the identical\n    // message doesn't re-fire, since the source value hasn't actually changed.\n    watch(\n      () => (props.status.value === 'error' ? (props.error.value ?? '') : null),\n      (errorText) => {\n        if (errorText !== null) {\n          announce(`Message failed to send${errorText ? `: ${errorText}` : ''}`, { politeness: 'assertive' });\n        }\n      },\n    );\n\n    function handleRetry(e: Event): void {\n      emit('retry', { originalEvent: e });\n    }\n\n    // ── Trim author-time indentation whitespace from the default slot ──\n    // `.content` uses `white-space: pre-wrap` so genuine multi-paragraph replies keep their\n    // line breaks — but that also preserves the leading/trailing newline + indentation from\n    // pretty-printed HTML (`<ore-chat-message>\\n  Hello\\n</ore-chat-message>`), rendering as\n    // visible blank lines around the text. Trim only the outermost edges once per slot\n    // assignment; appending tokens to an existing text node for streaming doesn't re-fire\n    // `slotchange`, so this never interferes with in-progress streaming updates.\n    //\n    // A named-slotted sibling (e.g. `<ore-avatar slot=\"avatar\">` between the opening tag and\n    // the message text) splits the default slot's light-DOM text into *multiple* text nodes\n    // — text nodes can't target a named slot, so each run on either side of the element is\n    // assigned separately. The \"real\" content can start on a later node than index 0 (it's\n    // still preceded by its own leading indentation), so this walks inward from each end,\n    // fully clearing whitespace-only nodes and stopping at the first node with real content\n    // on each side — rather than only touching the very first/last assigned node.\n    const contentSlotRef = ref<HTMLSlotElement>();\n\n    function trimSlotEdgeWhitespace(): void {\n      const nodes = contentSlotRef.value?.assignedNodes({ flatten: true });\n\n      if (!nodes || nodes.length === 0) return;\n\n      for (const node of nodes) {\n        if (node.nodeType !== Node.TEXT_NODE) break;\n\n        const trimmed = (node.textContent ?? '').replace(/^\\s+/, '');\n\n        node.textContent = trimmed;\n\n        if (trimmed !== '') break;\n      }\n\n      for (let i = nodes.length - 1; i >= 0; i--) {\n        const node = nodes[i];\n\n        if (node.nodeType !== Node.TEXT_NODE) break;\n\n        const trimmed = (node.textContent ?? '').replace(/\\s+$/, '');\n\n        node.textContent = trimmed;\n\n        if (trimmed !== '') break;\n      }\n    }\n\n    onMounted(() => {\n      trimSlotEdgeWhitespace();\n\n      const slotEl = contentSlotRef.value;\n\n      if (slotEl) onEvent(slotEl, 'slotchange', trimSlotEdgeWhitespace);\n    });\n\n    return html`\n      <div class=\"row\" part=\"row\">\n        <span class=\"avatar\" part=\"avatar\" ?hidden=\"${() => !slots.has('avatar').value}\">\n          <slot name=\"avatar\"></slot>\n        </span>\n        <div class=\"column\" part=\"column\">\n          <span class=\"name\" part=\"name\" ?hidden=\"${() => !props.name.value}\">${props.name}</span>\n          <div class=\"bubble\" part=\"bubble\" role=\"article\" aria-label=\"${bubbleLabel}\">\n            <div class=\"content\" part=\"content\">\n              <slot class=\"content-slot\" ref=\"${contentSlotRef}\"></slot>\n              <span class=\"cursor\" part=\"cursor\" aria-hidden=\"true\" ?hidden=\"${() => !props.streaming.value}\"></span>\n            </div>\n          </div>\n          <div class=\"meta\" part=\"meta\" ?hidden=\"${() => !hasMeta.value}\">\n            <time\n              class=\"timestamp\"\n              part=\"timestamp\"\n              datetime=\"${props.timestamp}\"\n              ?hidden=\"${() => !formattedTime.value}\">\n              ${formattedTime}\n            </time>\n            <span class=\"status\" part=\"status\" data-status=\"${props.status}\" ?hidden=\"${() => !props.status.value}\">\n              ${() => {\n                switch (props.status.value) {\n                  case 'error':\n                    return html`\n                      <ore-icon name=\"alert-circle\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n                    `;\n                  case 'sending':\n                    return html`\n                      <span class=\"spinner\" aria-hidden=\"true\"></span>\n                    `;\n                  case 'sent':\n                    return html`\n                      <ore-icon name=\"check\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n                    `;\n                  default:\n                    return '';\n                }\n              }}\n            </span>\n            <span class=\"error-text\" part=\"error\" role=\"alert\" ?hidden=\"${() => !props.error.value}\">\n              ${props.error}\n            </span>\n            <button\n              class=\"retry\"\n              part=\"retry\"\n              type=\"button\"\n              ?hidden=\"${() => props.status.value !== 'error'}\"\n              @click=\"${handleRetry}\">\n              Retry\n            </button>\n          </div>\n          <div class=\"actions\" part=\"actions\" ?hidden=\"${() => !slots.has('actions').value}\">\n            <slot name=\"actions\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"chat-message.js","names":[],"sources":["../src/content/chat-message/chat-message.ts"],"sourcesContent":["import { define, html, onEvent, onMounted, prop, ref, useEmit, useSlots } from '@vielzeug/ore';\nimport { computed, watch } from '@vielzeug/ripple';\n\nimport { announce } from '../../core';\nimport { reducedMotionMixin } from '../../styles';\nimport '../icon/icon';\nimport componentStyles from './chat-message.css?inline';\n\nexport type ChatMessageSender = 'assistant' | 'system' | 'user';\nexport type ChatMessageStatus = 'error' | 'sending' | 'sent';\n\nconst SENDER_LABELS: Record<ChatMessageSender, string> = {\n  assistant: 'Assistant',\n  system: 'System',\n  user: 'You',\n};\n\n/** Events emitted by the chat-message component */\nexport type OreChatMessageEvents = {\n  /** Fired when the retry action is activated on a `status=\"error\"` message */\n  retry: { originalEvent?: Event };\n};\n\n/** Chat message component properties */\nexport type OreChatMessageProps = {\n  /** Error detail shown beneath the bubble; only visible when `status=\"error\"` */\n  error?: string;\n  /** Display name shown above the bubble (falls back to a generic label per `sender`) */\n  name?: string;\n  /** Who sent the message — controls alignment and bubble styling */\n  sender?: ChatMessageSender;\n  /** Delivery status for outgoing messages — shows an inline indicator and, for `\"error\"`, a retry action */\n  status?: ChatMessageStatus;\n  /** Append a blinking cursor after the content, for a message still streaming in */\n  streaming?: boolean;\n  /** ISO 8601 timestamp; rendered as a localized short time in a semantic `<time>` element */\n  timestamp?: string;\n};\n\n/**\n * A single message bubble for chat/conversation UIs — sender-aware alignment, an optional\n * avatar slot, delivery status (sending/sent/error with retry), and a streaming cursor for\n * assistant messages still generating. Content is provided via the default slot, so any\n * markdown-to-HTML rendering stays the consumer's choice.\n *\n * The default slot's leading/trailing whitespace-only text nodes are trimmed in place once\n * per slot assignment (mount, and again on `slotchange`) — pretty-printed HTML's\n * indentation would otherwise render as blank lines, since the bubble preserves line breaks\n * (`white-space: pre-wrap`) for genuine multi-paragraph replies. This mutates those specific\n * text nodes' `textContent` directly; it never touches nodes appended afterward (e.g. by\n * `el.textContent += token` while streaming), only the ones present at assignment time.\n *\n * @element ore-chat-message\n *\n * @attr {string} sender - Who sent the message: 'user' | 'assistant' | 'system' (default 'assistant')\n * @attr {string} name - Display name shown above the bubble\n * @attr {string} timestamp - ISO 8601 timestamp, rendered as a localized short time\n * @attr {string} status - Delivery status: 'sending' | 'sent' | 'error'\n * @attr {string} error - Error detail shown beneath the bubble when status=\"error\"\n * @attr {boolean} streaming - Append a blinking cursor after the content\n *\n * @fires retry - Fired when the retry action is activated. detail: { originalEvent }\n *\n * @slot - Message content\n * @slot avatar - Avatar element (e.g. `<ore-avatar>`)\n * @slot actions - Action buttons shown beneath the message (copy, regenerate, feedback, …)\n *\n * @cssprop --chat-message-bg - Bubble background color (assistant/system)\n * @cssprop --chat-message-color - Bubble text color (assistant/system)\n * @cssprop --chat-message-user-bg - Bubble background color (user)\n * @cssprop --chat-message-user-color - Bubble text color (user)\n * @cssprop --chat-message-radius - Bubble border radius\n * @cssprop --chat-message-max-width - Maximum bubble width\n *\n * @part row - Root row container (avatar + column)\n * @part avatar - Avatar slot container\n * @part column - Column containing name, bubble, meta, and actions\n * @part name - Sender display name\n * @part bubble - Message bubble container\n * @part content - Content container inside the bubble\n * @part cursor - Blinking streaming cursor\n * @part meta - Row of timestamp, status, and error text below the bubble\n * @part timestamp - Timestamp `<time>` element\n * @part status - Status indicator\n * @part error - Error text\n * @part retry - Retry button (status=\"error\" only)\n * @part actions - Actions slot container\n *\n * @example\n * ```html\n * <ore-chat-message sender=\"user\" timestamp=\"2024-01-01T12:00:00Z\" status=\"sent\">\n *   What's the weather like today?\n * </ore-chat-message>\n *\n * <ore-chat-message sender=\"assistant\" name=\"Assistant\" streaming>\n *   Let me check that for you\n * </ore-chat-message>\n * ```\n */\nexport const CHAT_MESSAGE_TAG = 'ore-chat-message' as const;\ndefine<OreChatMessageProps>(CHAT_MESSAGE_TAG, {\n  props: {\n    error: prop.string(),\n    name: prop.string(),\n    sender: prop.oneOf(['user', 'assistant', 'system'] as const, 'assistant'),\n    status: prop.string<ChatMessageStatus>(),\n    streaming: prop.bool(false),\n    timestamp: prop.string(),\n  },\n  setup(props) {\n    const emit = useEmit<OreChatMessageEvents>();\n    const slots = useSlots();\n\n    const senderLabel = () => SENDER_LABELS[props.sender.value ?? 'assistant'];\n\n    const bubbleLabel = computed(() => `Message from ${props.name.value || senderLabel()}`);\n\n    const formattedTime = computed(() => {\n      const raw = props.timestamp.value;\n\n      if (!raw) return '';\n\n      const date = new Date(raw);\n\n      if (Number.isNaN(date.getTime())) return '';\n\n      return new Intl.DateTimeFormat(undefined, { hour: 'numeric', minute: '2-digit' }).format(date);\n    });\n\n    const hasMeta = computed(\n      () => Boolean(formattedTime.value) || Boolean(props.status.value) || Boolean(props.error.value),\n    );\n\n    // Announce delivery failures — the visible retry button and error text are always present\n    // for sighted users, but a failed send is exactly the kind of state change a screen\n    // reader user could otherwise miss entirely. Keyed on `error` text too (not just\n    // `status`) so a retry that fails again with a *different* reason re-announces even\n    // though `status` never left `\"error\"` in between; a second failure with the identical\n    // message doesn't re-fire, since the source value hasn't actually changed.\n    watch(\n      () => (props.status.value === 'error' ? (props.error.value ?? '') : null),\n      (errorText) => {\n        if (errorText !== null) {\n          announce(`Message failed to send${errorText ? `: ${errorText}` : ''}`, { politeness: 'assertive' });\n        }\n      },\n    );\n\n    function handleRetry(e: Event): void {\n      emit('retry', { originalEvent: e });\n    }\n\n    // ── Trim author-time indentation whitespace from the default slot ──\n    // `.content` uses `white-space: pre-wrap` so genuine multi-paragraph replies keep their\n    // line breaks — but that also preserves the leading/trailing newline + indentation from\n    // pretty-printed HTML (`<ore-chat-message>\\n  Hello\\n</ore-chat-message>`), rendering as\n    // visible blank lines around the text. Trim only the outermost edges once per slot\n    // assignment; appending tokens to an existing text node for streaming doesn't re-fire\n    // `slotchange`, so this never interferes with in-progress streaming updates.\n    //\n    // A named-slotted sibling (e.g. `<ore-avatar slot=\"avatar\">` between the opening tag and\n    // the message text) splits the default slot's light-DOM text into *multiple* text nodes\n    // — text nodes can't target a named slot, so each run on either side of the element is\n    // assigned separately. The \"real\" content can start on a later node than index 0 (it's\n    // still preceded by its own leading indentation), so this walks inward from each end,\n    // fully clearing whitespace-only nodes and stopping at the first node with real content\n    // on each side — rather than only touching the very first/last assigned node.\n    const contentSlotRef = ref<HTMLSlotElement>();\n\n    function trimSlotEdgeWhitespace(): void {\n      const nodes = contentSlotRef.value?.assignedNodes({ flatten: true });\n\n      if (!nodes || nodes.length === 0) return;\n\n      for (const node of nodes) {\n        if (node.nodeType !== Node.TEXT_NODE) break;\n\n        const trimmed = (node.textContent ?? '').replace(/^\\s+/, '');\n\n        node.textContent = trimmed;\n\n        if (trimmed !== '') break;\n      }\n\n      for (let i = nodes.length - 1; i >= 0; i--) {\n        const node = nodes[i];\n\n        if (node.nodeType !== Node.TEXT_NODE) break;\n\n        const trimmed = (node.textContent ?? '').replace(/\\s+$/, '');\n\n        node.textContent = trimmed;\n\n        if (trimmed !== '') break;\n      }\n    }\n\n    onMounted(() => {\n      trimSlotEdgeWhitespace();\n\n      const slotEl = contentSlotRef.value;\n\n      if (slotEl) onEvent(slotEl, 'slotchange', trimSlotEdgeWhitespace);\n    });\n\n    return html`\n      <div class=\"row\" part=\"row\">\n        <span class=\"avatar\" part=\"avatar\" ?hidden=\"${() => !slots.has('avatar').value}\">\n          <slot name=\"avatar\"></slot>\n        </span>\n        <div class=\"column\" part=\"column\">\n          <span class=\"name\" part=\"name\" ?hidden=\"${() => !props.name.value}\">${props.name}</span>\n          <div class=\"bubble\" part=\"bubble\" role=\"article\" aria-label=\"${bubbleLabel}\">\n            <div class=\"content\" part=\"content\">\n              <slot class=\"content-slot\" ref=\"${contentSlotRef}\"></slot>\n              <span class=\"cursor\" part=\"cursor\" aria-hidden=\"true\" ?hidden=\"${() => !props.streaming.value}\"></span>\n            </div>\n          </div>\n          <div class=\"meta\" part=\"meta\" ?hidden=\"${() => !hasMeta.value}\">\n            <time\n              class=\"timestamp\"\n              part=\"timestamp\"\n              datetime=\"${props.timestamp}\"\n              ?hidden=\"${() => !formattedTime.value}\">\n              ${formattedTime}\n            </time>\n            <span class=\"status\" part=\"status\" data-status=\"${props.status}\" ?hidden=\"${() => !props.status.value}\">\n              ${() => {\n                switch (props.status.value) {\n                  case 'error':\n                    return html`\n                      <ore-icon name=\"alert-circle\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n                    `;\n                  case 'sending':\n                    return html`\n                      <span class=\"spinner\" aria-hidden=\"true\"></span>\n                    `;\n                  case 'sent':\n                    return html`\n                      <ore-icon name=\"check\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n                    `;\n                  default:\n                    return '';\n                }\n              }}\n            </span>\n            <span class=\"error-text\" part=\"error\" role=\"alert\" ?hidden=\"${() => !props.error.value}\">\n              ${props.error}\n            </span>\n            <button\n              class=\"retry\"\n              part=\"retry\"\n              type=\"button\"\n              ?hidden=\"${() => props.status.value !== 'error'}\"\n              @click=\"${handleRetry}\">\n              Retry\n            </button>\n          </div>\n          <div class=\"actions\" part=\"actions\" ?hidden=\"${() => !slots.has('actions').value}\">\n            <slot name=\"actions\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":"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"}

package/dist/checkbox-group.cjs

@@ -1,20 +1,20 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./core/ore.cjs"),t=require("./core/choice-field.cjs"),n=require("./styles/mixins/states.css.cjs"),r=require("./core/light-dom.cjs"),i=require("./shared/prop-bundles.cjs"),a=require("./inputs/checkbox-group/checkbox-group.css.cjs");let o=require("@vielzeug/ore"),s=require("@vielzeug/ripple");var c=(0,o.createContext)(`CheckboxGroupContext`),l=`ore-checkbox-group`;(0,o.define)(l,{formAssociated:!0,props:{...i.themableBundle,...i.sizableBundle,...i.disablableBundle,error:o.prop.string(),helper:o.prop.string(),label:o.prop.string(),name:o.prop.string(),orientation:o.prop.string(`vertical`),required:o.prop.bool(!1),values:{...o.prop.string(),reflect:!1}},setup(n){let i=(0,o.getHost)(),a=(0,o.useEmit)(),l=(0,o.useSlots)(),u=o.watchEffect,d=t.createChoiceField({disabled:n.disabled,error:n.error,helper:n.helper,multiple:(0,s.signal)(!0),prefix:`checkbox-group`,required:n.required,signal:e.lifecycleSignal(o.onCleanup),value:n.values});d.attachFormField((0,o.useField)({disabled:d.disabled,onReset:d.reset,toFormValue:e=>e,validationMessage:d.validationMessage,validity:d.validity,value:d.formValue}));let f=d.selectedValues,p=()=>r.getLightChildrenByTag(i,`ore-checkbox`),m=e=>r.getChoiceLabel(p(),e),h=e=>{let t=f.value,n=t.map(m);a(`change`,{labels:n,originalEvent:e,values:t})},g=(e,t)=>{d.toggleValue(e),d.triggerValidation(`change`),h(t)};(0,o.provide)(c,{color:n.color,disabled:(0,s.computed)(()=>!!n.disabled.value),size:n.size,toggle:g,values:f});let _=()=>{let e=f.value,t=n.color.value,r=n.size.value,i=n.disabled.value,a=p();for(let n of a){let a=n.getAttribute(`value`)??``;n.toggleAttribute(`checked`,e.includes(a)),t?n.setAttribute(`color`,t):n.removeAttribute(`color`),r?n.setAttribute(`size`,r):n.removeAttribute(`size`),n.toggleAttribute(`disabled`,!!i)}};u(()=>{l.elements().value,_()}),u(()=>{l.elements().value;let e=p().map(e=>{let t=t=>{t.stopPropagation();let n=(e.getAttribute(`value`)??``).trim();n&&g(n,t)};return e.addEventListener(`change`,t),()=>{e.removeEventListener(`change`,t)}});return()=>{for(let t of e)t()}});let v=(0,o.createStableId)(`checkbox-group-legend`),y=`${v}-error`,b=`${v}-helper`,x=()=>!!n.error.value,S=()=>!!n.helper.value&&!x();return(0,o.bind)({attr:{size:n.size,values:d.formValue}}),o.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/states.css.cjs"),t=require("./core/choice-field.cjs"),n=require("./core/light-dom.cjs"),r=require("./core/ore.cjs"),i=require("./shared/prop-bundles.cjs"),a=require("./inputs/checkbox-group/checkbox-group.css.cjs");let o=require("@vielzeug/ore"),s=require("@vielzeug/ripple");var c=(0,o.createContext)(`CheckboxGroupContext`),l=`ore-checkbox-group`;(0,o.define)(l,{formAssociated:!0,props:{...i.themableBundle,...i.sizableBundle,...i.disablableBundle,error:o.prop.string(),helper:o.prop.string(),label:o.prop.string(),name:o.prop.string(),orientation:o.prop.string(`vertical`),required:o.prop.bool(!1),values:{...o.prop.string(),reflect:!1}},setup(e){let i=(0,o.getHost)(),a=(0,o.useEmit)(),l=(0,o.useSlots)(),u=o.watchEffect,d=t.createChoiceField({disabled:e.disabled,error:e.error,helper:e.helper,multiple:(0,s.signal)(!0),prefix:`checkbox-group`,required:e.required,signal:r.lifecycleSignal(o.onCleanup),value:e.values});d.attachFormField((0,o.useField)({disabled:d.disabled,onReset:d.reset,toFormValue:e=>e,validationMessage:d.validationMessage,validity:d.validity,value:d.formValue}));let f=d.selectedValues,p=()=>n.getLightChildrenByTag(i,`ore-checkbox`),m=e=>n.getChoiceLabel(p(),e),h=e=>{let t=f.value,n=t.map(m);a(`change`,{labels:n,originalEvent:e,values:t})},g=(e,t)=>{d.toggleValue(e),d.triggerValidation(`change`),h(t)};(0,o.provide)(c,{color:e.color,disabled:(0,s.computed)(()=>!!e.disabled.value),size:e.size,toggle:g,values:f});let _=()=>{let t=f.value,n=e.color.value,r=e.size.value,i=e.disabled.value,a=p();for(let e of a){let a=e.getAttribute(`value`)??``;e.toggleAttribute(`checked`,t.includes(a)),n?e.setAttribute(`color`,n):e.removeAttribute(`color`),r?e.setAttribute(`size`,r):e.removeAttribute(`size`),e.toggleAttribute(`disabled`,!!i)}};u(()=>{l.elements().value,_()}),u(()=>{l.elements().value;let e=p().map(e=>{let t=t=>{t.stopPropagation();let n=(e.getAttribute(`value`)??``).trim();n&&g(n,t)};return e.addEventListener(`change`,t),()=>{e.removeEventListener(`change`,t)}});return()=>{for(let t of e)t()}});let v=(0,o.createStableId)(`checkbox-group-legend`),y=`${v}-error`,b=`${v}-helper`,x=()=>!!e.error.value,S=()=>!!e.helper.value&&!x();return(0,o.bind)({attr:{size:e.size,values:d.formValue}}),o.html`
       <fieldset
         role="group"
-        aria-required="${()=>String(!!n.required.value)}"
+        aria-required="${()=>String(!!e.required.value)}"
         aria-invalid="${()=>String(x())}"
         aria-errormessage="${()=>x()?y:null}"
         aria-describedby="${()=>x()?y:S()?b:null}">
-        <legend id="${v}" ?hidden=${()=>!n.label.value}>
-          ${n.label}${(0,o.when)(()=>!!n.required.value,()=>o.html`
+        <legend id="${v}" ?hidden=${()=>!e.label.value}>
+          ${e.label}${(0,o.when)(()=>!!e.required.value,()=>o.html`
               <span aria-hidden="true">*</span>
             `)}
         </legend>
         <div class="checkbox-group-items" part="items">
           <slot></slot>
         </div>
-        <div class="error-text" id="${y}" role="alert" ?hidden=${()=>!x()}>${n.error}</div>
-        <div class="helper-text" id="${b}" ?hidden=${()=>!S()}>${n.helper}</div>
+        <div class="error-text" id="${y}" role="alert" ?hidden=${()=>!x()}>${e.error}</div>
+        <div class="helper-text" id="${b}" ?hidden=${()=>!S()}>${e.helper}</div>
       </fieldset>
-    `},styles:[n.disabledStateMixin,a.default]}),exports.CHECKBOX_GROUP_CTX=c,exports.CHECKBOX_GROUP_TAG=l;
+    `},styles:[e.disabledStateMixin,a.default]}),exports.CHECKBOX_GROUP_CTX=c,exports.CHECKBOX_GROUP_TAG=l;
 //# sourceMappingURL=checkbox-group.cjs.map

package/dist/checkbox-group.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.cjs","names":[],"sources":["../src/inputs/checkbox-group/checkbox-group.ts"],"sourcesContent":["import {\n  createContext,\n  createStableId,\n  define,\n  html,\n  prop,\n  bind,\n  getHost,\n  onCleanup,\n  provide,\n  useEmit,\n  useSlots,\n  watchEffect,\n  when,\n} from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore';\nimport { computed, type Readable, signal } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport {\n  type ChoiceChangeDetail,\n  lifecycleSignal,\n  createChoiceField,\n  getChoiceLabel,\n  getLightChildrenByTag,\n} from '../../core';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { disabledStateMixin } from '../../styles';\nimport componentStyles from './checkbox-group.css?inline';\n\n// ─── Context ──────────────────────────────────────────────────────────────────\n\nexport type CheckboxGroupContext = {\n  color: Readable<ThemeColor | undefined>;\n  disabled: Readable<boolean>;\n  size: Readable<ComponentSize | undefined>;\n  toggle: (value: string, originalEvent?: Event) => void;\n  values: Readable<string[]>;\n};\n\nexport const CHECKBOX_GROUP_CTX = createContext<CheckboxGroupContext>('CheckboxGroupContext');\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type OreCheckboxGroupProps = {\n  /** Theme color — propagated to all child ore-checkbox elements */\n  color?: ThemeColor;\n  /** Disable all checkboxes in the group */\n  disabled?: boolean;\n  /** Error message shown below the group */\n  error?: string;\n  /** Helper text shown below the group */\n  helper?: string;\n  /** Legend / label for the fieldset. Required for accessibility. */\n  label?: string;\n  /** Form field name used during submission */\n  name?: string;\n  /** Layout direction of the checkbox options */\n  orientation?: 'vertical' | 'horizontal';\n  /** Mark the group as required */\n  required?: boolean;\n  /** Size — propagated to all child ore-checkbox elements */\n  size?: ComponentSize;\n  /** Comma-separated list of currently checked values */\n  values?: string;\n};\n\nexport type OreCheckboxGroupEvents = {\n  change: ChoiceChangeDetail;\n};\n\n/**\n * A fieldset wrapper that groups `ore-checkbox` elements, provides shared\n * `color` and `size` via context, and manages multi-value selection state.\n *\n * @element ore-checkbox-group\n *\n * @attr {string} label - Legend text (required for a11y)\n * @attr {string} values - Comma-separated list of checked values\n * @attr {boolean} disabled - Disable all checkboxes in the group\n * @attr {string} error - Error message\n * @attr {string} helper - Helper text\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} orientation - Layout: 'vertical' | 'horizontal'\n * @attr {boolean} required - Required field\n *\n * @fires change - Emitted when selection changes. detail: { value: string, values: string[], labels: string[], originalEvent?: Event }\n *\n * @slot - Place `ore-checkbox` elements here\n *\n * @cssprop --checkbox-group-direction - Flex direction of the items list ('row' | 'column')\n * @cssprop --checkbox-group-gap - Gap between checkbox items\n * @part items - Items container.\n * @example\n * ```html\n * <ore-checkbox-group name=\"fruits\" label=\"Favourite fruits\" required>\n *   <ore-checkbox value=\"apple\">Apple</ore-checkbox>\n *   <ore-checkbox value=\"banana\">Banana</ore-checkbox>\n *   <ore-checkbox value=\"cherry\">Cherry</ore-checkbox>\n * </ore-checkbox-group>\n * <ore-checkbox-group name=\"options\" orientation=\"horizontal\" color=\"primary\">\n *   <ore-checkbox value=\"a\">Option A</ore-checkbox>\n *   <ore-checkbox value=\"b\">Option B</ore-checkbox>\n * </ore-checkbox-group>\n * ```\n */\nexport const CHECKBOX_GROUP_TAG = 'ore-checkbox-group' as const;\ndefine<OreCheckboxGroupProps>(CHECKBOX_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.string('vertical'),\n    required: prop.bool(false),\n    // Not auto-reflected (`reflect: false`) — the derived, interaction-updated selection\n    // (`choice.formValue`) is the single writer for this attribute, via `bind()` below;\n    // letting `prop.string()`'s own default reflection also write the raw incoming value\n    // would leave two effects racing to set the same attribute from different sources.\n    values: { ...prop.string(), reflect: false },\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCheckboxGroupEvents>();\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      multiple: signal(true),\n      prefix: 'checkbox-group',\n      required: props.required,\n      signal: lifecycleSignal(onCleanup),\n      value: props.values,\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 checkedValues = choice.selectedValues;\n\n    const getCheckboxes = (): HTMLElement[] => getLightChildrenByTag(el, 'ore-checkbox');\n    const getLabelForValue = (value: string): string => getChoiceLabel(getCheckboxes(), value);\n    const emitChange = (originalEvent?: Event) => {\n      const values = checkedValues.value;\n\n      const labels = values.map(getLabelForValue);\n\n      emit('change', { labels, originalEvent, values });\n    };\n\n    const toggleCheckbox = (val: string, originalEvent?: Event) => {\n      choice.toggleValue(val);\n      choice.triggerValidation('change');\n      emitChange(originalEvent);\n    };\n\n    provide(CHECKBOX_GROUP_CTX, {\n      color: props.color,\n      disabled: computed(() => Boolean(props.disabled.value)),\n      size: props.size,\n      toggle: toggleCheckbox,\n      values: checkedValues,\n    });\n\n    // Sync checked state + color/size/disabled onto slotted ore-checkbox children\n    const syncChildren = () => {\n      const values = checkedValues.value;\n      const color = props.color.value;\n      const size = props.size.value;\n      const disabled = props.disabled.value;\n      const checkboxes = getCheckboxes();\n\n      for (const checkbox of checkboxes) {\n        const val = checkbox.getAttribute('value') ?? '';\n\n        checkbox.toggleAttribute('checked', values.includes(val));\n\n        if (color) checkbox.setAttribute('color', color);\n        else checkbox.removeAttribute('color');\n\n        if (size) checkbox.setAttribute('size', size);\n        else checkbox.removeAttribute('size');\n\n        checkbox.toggleAttribute('disabled', Boolean(disabled));\n      }\n    };\n\n    watch(() => {\n      void slots.elements().value;\n      syncChildren();\n    });\n\n    watch(() => {\n      void slots.elements().value;\n\n      const listeners = getCheckboxes().map((checkbox) => {\n        const handler = (event: Event) => {\n          event.stopPropagation();\n\n          const val = (checkbox.getAttribute('value') ?? '').trim();\n\n          if (!val) return;\n\n          toggleCheckbox(val, event);\n        };\n\n        checkbox.addEventListener('change', handler);\n\n        return () => {\n          checkbox.removeEventListener('change', handler);\n        };\n      });\n\n      return () => {\n        for (const dispose of listeners) dispose();\n      };\n    });\n\n    const legendId = createStableId('checkbox-group-legend');\n    const errorId = `${legendId}-error`;\n    const helperId = `${legendId}-helper`;\n    const hasError = () => Boolean(props.error.value);\n    const hasHelper = () => Boolean(props.helper.value) && !hasError();\n\n    // Reactive, not a one-off `el.setAttribute()` inside the click handler: the host's `values`\n    // attribute must stay in sync with the selection regardless of *why* it changed (a click,\n    // or `reset()` on ancestor form reset — neither of which should need its own copy of this).\n    bind({ attr: { size: props.size, values: choice.formValue } });\n\n    return html`\n      <fieldset\n        role=\"group\"\n        aria-required=\"${() => String(Boolean(props.required.value))}\"\n        aria-invalid=\"${() => String(hasError())}\"\n        aria-errormessage=\"${() => (hasError() ? errorId : null)}\"\n        aria-describedby=\"${() => (hasError() ? errorId : hasHelper() ? helperId : null)}\">\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=\"checkbox-group-items\" part=\"items\">\n          <slot></slot>\n        </div>\n        <div class=\"error-text\" id=\"${errorId}\" role=\"alert\" ?hidden=${() => !hasError()}>${props.error}</div>\n        <div class=\"helper-text\" id=\"${helperId}\" ?hidden=${() => !hasHelper()}>${props.helper}</div>\n      </fieldset>\n    `;\n  },\n  styles: [disabledStateMixin, componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"checkbox-group.cjs","names":[],"sources":["../src/inputs/checkbox-group/checkbox-group.ts"],"sourcesContent":["import {\n  bind,\n  createContext,\n  createStableId,\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 { computed, type Readable, signal } from '@vielzeug/ripple';\nimport {\n  type ChoiceChangeDetail,\n  createChoiceField,\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 './checkbox-group.css?inline';\n\n// ─── Context ──────────────────────────────────────────────────────────────────\n\nexport type CheckboxGroupContext = {\n  color: Readable<ThemeColor | undefined>;\n  disabled: Readable<boolean>;\n  size: Readable<ComponentSize | undefined>;\n  toggle: (value: string, originalEvent?: Event) => void;\n  values: Readable<string[]>;\n};\n\nexport const CHECKBOX_GROUP_CTX = createContext<CheckboxGroupContext>('CheckboxGroupContext');\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type OreCheckboxGroupProps = {\n  /** Theme color — propagated to all child ore-checkbox elements */\n  color?: ThemeColor;\n  /** Disable all checkboxes in the group */\n  disabled?: boolean;\n  /** Error message shown below the group */\n  error?: string;\n  /** Helper text shown below the group */\n  helper?: string;\n  /** Legend / label for the fieldset. Required for accessibility. */\n  label?: string;\n  /** Form field name used during submission */\n  name?: string;\n  /** Layout direction of the checkbox options */\n  orientation?: 'vertical' | 'horizontal';\n  /** Mark the group as required */\n  required?: boolean;\n  /** Size — propagated to all child ore-checkbox elements */\n  size?: ComponentSize;\n  /** Comma-separated list of currently checked values */\n  values?: string;\n};\n\nexport type OreCheckboxGroupEvents = {\n  change: ChoiceChangeDetail;\n};\n\n/**\n * A fieldset wrapper that groups `ore-checkbox` elements, provides shared\n * `color` and `size` via context, and manages multi-value selection state.\n *\n * @element ore-checkbox-group\n *\n * @attr {string} label - Legend text (required for a11y)\n * @attr {string} values - Comma-separated list of checked values\n * @attr {boolean} disabled - Disable all checkboxes in the group\n * @attr {string} error - Error message\n * @attr {string} helper - Helper text\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} orientation - Layout: 'vertical' | 'horizontal'\n * @attr {boolean} required - Required field\n *\n * @fires change - Emitted when selection changes. detail: { value: string, values: string[], labels: string[], originalEvent?: Event }\n *\n * @slot - Place `ore-checkbox` elements here\n *\n * @cssprop --checkbox-group-direction - Flex direction of the items list ('row' | 'column')\n * @cssprop --checkbox-group-gap - Gap between checkbox items\n * @part items - Items container.\n * @example\n * ```html\n * <ore-checkbox-group name=\"fruits\" label=\"Favourite fruits\" required>\n *   <ore-checkbox value=\"apple\">Apple</ore-checkbox>\n *   <ore-checkbox value=\"banana\">Banana</ore-checkbox>\n *   <ore-checkbox value=\"cherry\">Cherry</ore-checkbox>\n * </ore-checkbox-group>\n * <ore-checkbox-group name=\"options\" orientation=\"horizontal\" color=\"primary\">\n *   <ore-checkbox value=\"a\">Option A</ore-checkbox>\n *   <ore-checkbox value=\"b\">Option B</ore-checkbox>\n * </ore-checkbox-group>\n * ```\n */\nexport const CHECKBOX_GROUP_TAG = 'ore-checkbox-group' as const;\ndefine<OreCheckboxGroupProps>(CHECKBOX_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.string('vertical'),\n    required: prop.bool(false),\n    // Not auto-reflected (`reflect: false`) — the derived, interaction-updated selection\n    // (`choice.formValue`) is the single writer for this attribute, via `bind()` below;\n    // letting `prop.string()`'s own default reflection also write the raw incoming value\n    // would leave two effects racing to set the same attribute from different sources.\n    values: { ...prop.string(), reflect: false },\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCheckboxGroupEvents>();\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      multiple: signal(true),\n      prefix: 'checkbox-group',\n      required: props.required,\n      signal: lifecycleSignal(onCleanup),\n      value: props.values,\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 checkedValues = choice.selectedValues;\n\n    const getCheckboxes = (): HTMLElement[] => getLightChildrenByTag(el, 'ore-checkbox');\n    const getLabelForValue = (value: string): string => getChoiceLabel(getCheckboxes(), value);\n    const emitChange = (originalEvent?: Event) => {\n      const values = checkedValues.value;\n\n      const labels = values.map(getLabelForValue);\n\n      emit('change', { labels, originalEvent, values });\n    };\n\n    const toggleCheckbox = (val: string, originalEvent?: Event) => {\n      choice.toggleValue(val);\n      choice.triggerValidation('change');\n      emitChange(originalEvent);\n    };\n\n    provide(CHECKBOX_GROUP_CTX, {\n      color: props.color,\n      disabled: computed(() => Boolean(props.disabled.value)),\n      size: props.size,\n      toggle: toggleCheckbox,\n      values: checkedValues,\n    });\n\n    // Sync checked state + color/size/disabled onto slotted ore-checkbox children\n    const syncChildren = () => {\n      const values = checkedValues.value;\n      const color = props.color.value;\n      const size = props.size.value;\n      const disabled = props.disabled.value;\n      const checkboxes = getCheckboxes();\n\n      for (const checkbox of checkboxes) {\n        const val = checkbox.getAttribute('value') ?? '';\n\n        checkbox.toggleAttribute('checked', values.includes(val));\n\n        if (color) checkbox.setAttribute('color', color);\n        else checkbox.removeAttribute('color');\n\n        if (size) checkbox.setAttribute('size', size);\n        else checkbox.removeAttribute('size');\n\n        checkbox.toggleAttribute('disabled', Boolean(disabled));\n      }\n    };\n\n    watch(() => {\n      void slots.elements().value;\n      syncChildren();\n    });\n\n    watch(() => {\n      void slots.elements().value;\n\n      const listeners = getCheckboxes().map((checkbox) => {\n        const handler = (event: Event) => {\n          event.stopPropagation();\n\n          const val = (checkbox.getAttribute('value') ?? '').trim();\n\n          if (!val) return;\n\n          toggleCheckbox(val, event);\n        };\n\n        checkbox.addEventListener('change', handler);\n\n        return () => {\n          checkbox.removeEventListener('change', handler);\n        };\n      });\n\n      return () => {\n        for (const dispose of listeners) dispose();\n      };\n    });\n\n    const legendId = createStableId('checkbox-group-legend');\n    const errorId = `${legendId}-error`;\n    const helperId = `${legendId}-helper`;\n    const hasError = () => Boolean(props.error.value);\n    const hasHelper = () => Boolean(props.helper.value) && !hasError();\n\n    // Reactive, not a one-off `el.setAttribute()` inside the click handler: the host's `values`\n    // attribute must stay in sync with the selection regardless of *why* it changed (a click,\n    // or `reset()` on ancestor form reset — neither of which should need its own copy of this).\n    bind({ attr: { size: props.size, values: choice.formValue } });\n\n    return html`\n      <fieldset\n        role=\"group\"\n        aria-required=\"${() => String(Boolean(props.required.value))}\"\n        aria-invalid=\"${() => String(hasError())}\"\n        aria-errormessage=\"${() => (hasError() ? errorId : null)}\"\n        aria-describedby=\"${() => (hasError() ? errorId : hasHelper() ? helperId : null)}\">\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=\"checkbox-group-items\" part=\"items\">\n          <slot></slot>\n        </div>\n        <div class=\"error-text\" id=\"${errorId}\" role=\"alert\" ?hidden=${() => !hasError()}>${props.error}</div>\n        <div class=\"helper-text\" id=\"${helperId}\" ?hidden=${() => !hasHelper()}>${props.helper}</div>\n      </fieldset>\n    `;\n  },\n  styles: [disabledStateMixin, componentStyles],\n});\n"],"mappings":"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"}

package/dist/checkbox-group.js

@@ -1,7 +1,7 @@
-import { lifecycleSignal as e } from "./core/ore.js";
+import { disabledStateMixin as e } from "./styles/mixins/states.css.js";
 import { createChoiceField as t } from "./core/choice-field.js";
-import { disabledStateMixin as n } from "./styles/mixins/states.css.js";
-import { getChoiceLabel as r, getLightChildrenByTag as i } from "./core/light-dom.js";
+import { getChoiceLabel as n, getLightChildrenByTag as r } from "./core/light-dom.js";
+import { lifecycleSignal as i } from "./core/ore.js";
 import { disablableBundle as a, sizableBundle as o, themableBundle as s } from "./shared/prop-bundles.js";
 import c from "./inputs/checkbox-group/checkbox-group.css.js";
 import { bind as l, createContext as u, createStableId as d, define as f, getHost as p, html as m, onCleanup as h, prop as g, provide as _, useEmit as v, useField as y, useSlots as b, watchEffect as x, when as S } from "@vielzeug/ore";
@@ -25,16 +25,16 @@ f(E, {
 			reflect: !1
 		}
 	},
-	setup(n) {
+	setup(e) {
 		let a = p(), o = v(), s = b(), c = x, u = t({
-			disabled: n.disabled,
-			error: n.error,
-			helper: n.helper,
+			disabled: e.disabled,
+			error: e.error,
+			helper: e.helper,
 			multiple: w(!0),
 			prefix: "checkbox-group",
-			required: n.required,
-			signal: e(h),
-			value: n.values
+			required: e.required,
+			signal: i(h),
+			value: e.values
 		});
 		u.attachFormField(y({
 			disabled: u.disabled,
@@ -44,7 +44,7 @@ f(E, {
 			validity: u.validity,
 			value: u.formValue
 		}));
-		let f = u.selectedValues, g = () => i(a, "ore-checkbox"), E = (e) => r(g(), e), D = (e) => {
+		let f = u.selectedValues, g = () => r(a, "ore-checkbox"), E = (e) => n(g(), e), D = (e) => {
 			let t = f.value, n = t.map(E);
 			o("change", {
 				labels: n,
@@ -55,17 +55,17 @@ f(E, {
 			u.toggleValue(e), u.triggerValidation("change"), D(t);
 		};
 		_(T, {
-			color: n.color,
-			disabled: C(() => !!n.disabled.value),
-			size: n.size,
+			color: e.color,
+			disabled: C(() => !!e.disabled.value),
+			size: e.size,
 			toggle: O,
 			values: f
 		});
 		let k = () => {
-			let e = f.value, t = n.color.value, r = n.size.value, i = n.disabled.value, a = g();
-			for (let n of a) {
-				let a = n.getAttribute("value") ?? "";
-				n.toggleAttribute("checked", e.includes(a)), t ? n.setAttribute("color", t) : n.removeAttribute("color"), r ? n.setAttribute("size", r) : n.removeAttribute("size"), n.toggleAttribute("disabled", !!i);
+			let t = f.value, n = e.color.value, r = e.size.value, i = e.disabled.value, a = g();
+			for (let e of a) {
+				let a = e.getAttribute("value") ?? "";
+				e.toggleAttribute("checked", t.includes(a)), n ? e.setAttribute("color", n) : e.removeAttribute("color"), r ? e.setAttribute("size", r) : e.removeAttribute("size"), e.toggleAttribute("disabled", !!i);
 			}
 		};
 		c(() => {
@@ -86,31 +86,31 @@ f(E, {
 				for (let t of e) t();
 			};
 		});
-		let A = d("checkbox-group-legend"), j = `${A}-error`, M = `${A}-helper`, N = () => !!n.error.value, P = () => !!n.helper.value && !N();
+		let A = d("checkbox-group-legend"), j = `${A}-error`, M = `${A}-helper`, N = () => !!e.error.value, P = () => !!e.helper.value && !N();
 		return l({ attr: {
-			size: n.size,
+			size: e.size,
 			values: u.formValue
 		} }), m`
       <fieldset
         role="group"
-        aria-required="${() => String(!!n.required.value)}"
+        aria-required="${() => String(!!e.required.value)}"
         aria-invalid="${() => String(N())}"
         aria-errormessage="${() => N() ? j : null}"
         aria-describedby="${() => N() ? j : P() ? M : null}">
-        <legend id="${A}" ?hidden=${() => !n.label.value}>
-          ${n.label}${S(() => !!n.required.value, () => m`
+        <legend id="${A}" ?hidden=${() => !e.label.value}>
+          ${e.label}${S(() => !!e.required.value, () => m`
               <span aria-hidden="true">*</span>
             `)}
         </legend>
         <div class="checkbox-group-items" part="items">
           <slot></slot>
         </div>
-        <div class="error-text" id="${j}" role="alert" ?hidden=${() => !N()}>${n.error}</div>
-        <div class="helper-text" id="${M}" ?hidden=${() => !P()}>${n.helper}</div>
+        <div class="error-text" id="${j}" role="alert" ?hidden=${() => !N()}>${e.error}</div>
+        <div class="helper-text" id="${M}" ?hidden=${() => !P()}>${e.helper}</div>
       </fieldset>
     `;
 	},
-	styles: [n, c]
+	styles: [e, c]
 });
 //#endregion
 export { T as CHECKBOX_GROUP_CTX, E as CHECKBOX_GROUP_TAG };

package/dist/checkbox-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-group.js","names":[],"sources":["../src/inputs/checkbox-group/checkbox-group.ts"],"sourcesContent":["import {\n  createContext,\n  createStableId,\n  define,\n  html,\n  prop,\n  bind,\n  getHost,\n  onCleanup,\n  provide,\n  useEmit,\n  useSlots,\n  watchEffect,\n  when,\n} from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore';\nimport { computed, type Readable, signal } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport {\n  type ChoiceChangeDetail,\n  lifecycleSignal,\n  createChoiceField,\n  getChoiceLabel,\n  getLightChildrenByTag,\n} from '../../core';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { disabledStateMixin } from '../../styles';\nimport componentStyles from './checkbox-group.css?inline';\n\n// ─── Context ──────────────────────────────────────────────────────────────────\n\nexport type CheckboxGroupContext = {\n  color: Readable<ThemeColor | undefined>;\n  disabled: Readable<boolean>;\n  size: Readable<ComponentSize | undefined>;\n  toggle: (value: string, originalEvent?: Event) => void;\n  values: Readable<string[]>;\n};\n\nexport const CHECKBOX_GROUP_CTX = createContext<CheckboxGroupContext>('CheckboxGroupContext');\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type OreCheckboxGroupProps = {\n  /** Theme color — propagated to all child ore-checkbox elements */\n  color?: ThemeColor;\n  /** Disable all checkboxes in the group */\n  disabled?: boolean;\n  /** Error message shown below the group */\n  error?: string;\n  /** Helper text shown below the group */\n  helper?: string;\n  /** Legend / label for the fieldset. Required for accessibility. */\n  label?: string;\n  /** Form field name used during submission */\n  name?: string;\n  /** Layout direction of the checkbox options */\n  orientation?: 'vertical' | 'horizontal';\n  /** Mark the group as required */\n  required?: boolean;\n  /** Size — propagated to all child ore-checkbox elements */\n  size?: ComponentSize;\n  /** Comma-separated list of currently checked values */\n  values?: string;\n};\n\nexport type OreCheckboxGroupEvents = {\n  change: ChoiceChangeDetail;\n};\n\n/**\n * A fieldset wrapper that groups `ore-checkbox` elements, provides shared\n * `color` and `size` via context, and manages multi-value selection state.\n *\n * @element ore-checkbox-group\n *\n * @attr {string} label - Legend text (required for a11y)\n * @attr {string} values - Comma-separated list of checked values\n * @attr {boolean} disabled - Disable all checkboxes in the group\n * @attr {string} error - Error message\n * @attr {string} helper - Helper text\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} orientation - Layout: 'vertical' | 'horizontal'\n * @attr {boolean} required - Required field\n *\n * @fires change - Emitted when selection changes. detail: { value: string, values: string[], labels: string[], originalEvent?: Event }\n *\n * @slot - Place `ore-checkbox` elements here\n *\n * @cssprop --checkbox-group-direction - Flex direction of the items list ('row' | 'column')\n * @cssprop --checkbox-group-gap - Gap between checkbox items\n * @part items - Items container.\n * @example\n * ```html\n * <ore-checkbox-group name=\"fruits\" label=\"Favourite fruits\" required>\n *   <ore-checkbox value=\"apple\">Apple</ore-checkbox>\n *   <ore-checkbox value=\"banana\">Banana</ore-checkbox>\n *   <ore-checkbox value=\"cherry\">Cherry</ore-checkbox>\n * </ore-checkbox-group>\n * <ore-checkbox-group name=\"options\" orientation=\"horizontal\" color=\"primary\">\n *   <ore-checkbox value=\"a\">Option A</ore-checkbox>\n *   <ore-checkbox value=\"b\">Option B</ore-checkbox>\n * </ore-checkbox-group>\n * ```\n */\nexport const CHECKBOX_GROUP_TAG = 'ore-checkbox-group' as const;\ndefine<OreCheckboxGroupProps>(CHECKBOX_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.string('vertical'),\n    required: prop.bool(false),\n    // Not auto-reflected (`reflect: false`) — the derived, interaction-updated selection\n    // (`choice.formValue`) is the single writer for this attribute, via `bind()` below;\n    // letting `prop.string()`'s own default reflection also write the raw incoming value\n    // would leave two effects racing to set the same attribute from different sources.\n    values: { ...prop.string(), reflect: false },\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCheckboxGroupEvents>();\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      multiple: signal(true),\n      prefix: 'checkbox-group',\n      required: props.required,\n      signal: lifecycleSignal(onCleanup),\n      value: props.values,\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 checkedValues = choice.selectedValues;\n\n    const getCheckboxes = (): HTMLElement[] => getLightChildrenByTag(el, 'ore-checkbox');\n    const getLabelForValue = (value: string): string => getChoiceLabel(getCheckboxes(), value);\n    const emitChange = (originalEvent?: Event) => {\n      const values = checkedValues.value;\n\n      const labels = values.map(getLabelForValue);\n\n      emit('change', { labels, originalEvent, values });\n    };\n\n    const toggleCheckbox = (val: string, originalEvent?: Event) => {\n      choice.toggleValue(val);\n      choice.triggerValidation('change');\n      emitChange(originalEvent);\n    };\n\n    provide(CHECKBOX_GROUP_CTX, {\n      color: props.color,\n      disabled: computed(() => Boolean(props.disabled.value)),\n      size: props.size,\n      toggle: toggleCheckbox,\n      values: checkedValues,\n    });\n\n    // Sync checked state + color/size/disabled onto slotted ore-checkbox children\n    const syncChildren = () => {\n      const values = checkedValues.value;\n      const color = props.color.value;\n      const size = props.size.value;\n      const disabled = props.disabled.value;\n      const checkboxes = getCheckboxes();\n\n      for (const checkbox of checkboxes) {\n        const val = checkbox.getAttribute('value') ?? '';\n\n        checkbox.toggleAttribute('checked', values.includes(val));\n\n        if (color) checkbox.setAttribute('color', color);\n        else checkbox.removeAttribute('color');\n\n        if (size) checkbox.setAttribute('size', size);\n        else checkbox.removeAttribute('size');\n\n        checkbox.toggleAttribute('disabled', Boolean(disabled));\n      }\n    };\n\n    watch(() => {\n      void slots.elements().value;\n      syncChildren();\n    });\n\n    watch(() => {\n      void slots.elements().value;\n\n      const listeners = getCheckboxes().map((checkbox) => {\n        const handler = (event: Event) => {\n          event.stopPropagation();\n\n          const val = (checkbox.getAttribute('value') ?? '').trim();\n\n          if (!val) return;\n\n          toggleCheckbox(val, event);\n        };\n\n        checkbox.addEventListener('change', handler);\n\n        return () => {\n          checkbox.removeEventListener('change', handler);\n        };\n      });\n\n      return () => {\n        for (const dispose of listeners) dispose();\n      };\n    });\n\n    const legendId = createStableId('checkbox-group-legend');\n    const errorId = `${legendId}-error`;\n    const helperId = `${legendId}-helper`;\n    const hasError = () => Boolean(props.error.value);\n    const hasHelper = () => Boolean(props.helper.value) && !hasError();\n\n    // Reactive, not a one-off `el.setAttribute()` inside the click handler: the host's `values`\n    // attribute must stay in sync with the selection regardless of *why* it changed (a click,\n    // or `reset()` on ancestor form reset — neither of which should need its own copy of this).\n    bind({ attr: { size: props.size, values: choice.formValue } });\n\n    return html`\n      <fieldset\n        role=\"group\"\n        aria-required=\"${() => String(Boolean(props.required.value))}\"\n        aria-invalid=\"${() => String(hasError())}\"\n        aria-errormessage=\"${() => (hasError() ? errorId : null)}\"\n        aria-describedby=\"${() => (hasError() ? errorId : hasHelper() ? helperId : null)}\">\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=\"checkbox-group-items\" part=\"items\">\n          <slot></slot>\n        </div>\n        <div class=\"error-text\" id=\"${errorId}\" role=\"alert\" ?hidden=${() => !hasError()}>${props.error}</div>\n        <div class=\"helper-text\" id=\"${helperId}\" ?hidden=${() => !hasHelper()}>${props.helper}</div>\n      </fieldset>\n    `;\n  },\n  styles: [disabledStateMixin, componentStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"checkbox-group.js","names":[],"sources":["../src/inputs/checkbox-group/checkbox-group.ts"],"sourcesContent":["import {\n  bind,\n  createContext,\n  createStableId,\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 { computed, type Readable, signal } from '@vielzeug/ripple';\nimport {\n  type ChoiceChangeDetail,\n  createChoiceField,\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 './checkbox-group.css?inline';\n\n// ─── Context ──────────────────────────────────────────────────────────────────\n\nexport type CheckboxGroupContext = {\n  color: Readable<ThemeColor | undefined>;\n  disabled: Readable<boolean>;\n  size: Readable<ComponentSize | undefined>;\n  toggle: (value: string, originalEvent?: Event) => void;\n  values: Readable<string[]>;\n};\n\nexport const CHECKBOX_GROUP_CTX = createContext<CheckboxGroupContext>('CheckboxGroupContext');\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type OreCheckboxGroupProps = {\n  /** Theme color — propagated to all child ore-checkbox elements */\n  color?: ThemeColor;\n  /** Disable all checkboxes in the group */\n  disabled?: boolean;\n  /** Error message shown below the group */\n  error?: string;\n  /** Helper text shown below the group */\n  helper?: string;\n  /** Legend / label for the fieldset. Required for accessibility. */\n  label?: string;\n  /** Form field name used during submission */\n  name?: string;\n  /** Layout direction of the checkbox options */\n  orientation?: 'vertical' | 'horizontal';\n  /** Mark the group as required */\n  required?: boolean;\n  /** Size — propagated to all child ore-checkbox elements */\n  size?: ComponentSize;\n  /** Comma-separated list of currently checked values */\n  values?: string;\n};\n\nexport type OreCheckboxGroupEvents = {\n  change: ChoiceChangeDetail;\n};\n\n/**\n * A fieldset wrapper that groups `ore-checkbox` elements, provides shared\n * `color` and `size` via context, and manages multi-value selection state.\n *\n * @element ore-checkbox-group\n *\n * @attr {string} label - Legend text (required for a11y)\n * @attr {string} values - Comma-separated list of checked values\n * @attr {boolean} disabled - Disable all checkboxes in the group\n * @attr {string} error - Error message\n * @attr {string} helper - Helper text\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Component size: 'sm' | 'md' | 'lg'\n * @attr {string} orientation - Layout: 'vertical' | 'horizontal'\n * @attr {boolean} required - Required field\n *\n * @fires change - Emitted when selection changes. detail: { value: string, values: string[], labels: string[], originalEvent?: Event }\n *\n * @slot - Place `ore-checkbox` elements here\n *\n * @cssprop --checkbox-group-direction - Flex direction of the items list ('row' | 'column')\n * @cssprop --checkbox-group-gap - Gap between checkbox items\n * @part items - Items container.\n * @example\n * ```html\n * <ore-checkbox-group name=\"fruits\" label=\"Favourite fruits\" required>\n *   <ore-checkbox value=\"apple\">Apple</ore-checkbox>\n *   <ore-checkbox value=\"banana\">Banana</ore-checkbox>\n *   <ore-checkbox value=\"cherry\">Cherry</ore-checkbox>\n * </ore-checkbox-group>\n * <ore-checkbox-group name=\"options\" orientation=\"horizontal\" color=\"primary\">\n *   <ore-checkbox value=\"a\">Option A</ore-checkbox>\n *   <ore-checkbox value=\"b\">Option B</ore-checkbox>\n * </ore-checkbox-group>\n * ```\n */\nexport const CHECKBOX_GROUP_TAG = 'ore-checkbox-group' as const;\ndefine<OreCheckboxGroupProps>(CHECKBOX_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.string('vertical'),\n    required: prop.bool(false),\n    // Not auto-reflected (`reflect: false`) — the derived, interaction-updated selection\n    // (`choice.formValue`) is the single writer for this attribute, via `bind()` below;\n    // letting `prop.string()`'s own default reflection also write the raw incoming value\n    // would leave two effects racing to set the same attribute from different sources.\n    values: { ...prop.string(), reflect: false },\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCheckboxGroupEvents>();\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      multiple: signal(true),\n      prefix: 'checkbox-group',\n      required: props.required,\n      signal: lifecycleSignal(onCleanup),\n      value: props.values,\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 checkedValues = choice.selectedValues;\n\n    const getCheckboxes = (): HTMLElement[] => getLightChildrenByTag(el, 'ore-checkbox');\n    const getLabelForValue = (value: string): string => getChoiceLabel(getCheckboxes(), value);\n    const emitChange = (originalEvent?: Event) => {\n      const values = checkedValues.value;\n\n      const labels = values.map(getLabelForValue);\n\n      emit('change', { labels, originalEvent, values });\n    };\n\n    const toggleCheckbox = (val: string, originalEvent?: Event) => {\n      choice.toggleValue(val);\n      choice.triggerValidation('change');\n      emitChange(originalEvent);\n    };\n\n    provide(CHECKBOX_GROUP_CTX, {\n      color: props.color,\n      disabled: computed(() => Boolean(props.disabled.value)),\n      size: props.size,\n      toggle: toggleCheckbox,\n      values: checkedValues,\n    });\n\n    // Sync checked state + color/size/disabled onto slotted ore-checkbox children\n    const syncChildren = () => {\n      const values = checkedValues.value;\n      const color = props.color.value;\n      const size = props.size.value;\n      const disabled = props.disabled.value;\n      const checkboxes = getCheckboxes();\n\n      for (const checkbox of checkboxes) {\n        const val = checkbox.getAttribute('value') ?? '';\n\n        checkbox.toggleAttribute('checked', values.includes(val));\n\n        if (color) checkbox.setAttribute('color', color);\n        else checkbox.removeAttribute('color');\n\n        if (size) checkbox.setAttribute('size', size);\n        else checkbox.removeAttribute('size');\n\n        checkbox.toggleAttribute('disabled', Boolean(disabled));\n      }\n    };\n\n    watch(() => {\n      void slots.elements().value;\n      syncChildren();\n    });\n\n    watch(() => {\n      void slots.elements().value;\n\n      const listeners = getCheckboxes().map((checkbox) => {\n        const handler = (event: Event) => {\n          event.stopPropagation();\n\n          const val = (checkbox.getAttribute('value') ?? '').trim();\n\n          if (!val) return;\n\n          toggleCheckbox(val, event);\n        };\n\n        checkbox.addEventListener('change', handler);\n\n        return () => {\n          checkbox.removeEventListener('change', handler);\n        };\n      });\n\n      return () => {\n        for (const dispose of listeners) dispose();\n      };\n    });\n\n    const legendId = createStableId('checkbox-group-legend');\n    const errorId = `${legendId}-error`;\n    const helperId = `${legendId}-helper`;\n    const hasError = () => Boolean(props.error.value);\n    const hasHelper = () => Boolean(props.helper.value) && !hasError();\n\n    // Reactive, not a one-off `el.setAttribute()` inside the click handler: the host's `values`\n    // attribute must stay in sync with the selection regardless of *why* it changed (a click,\n    // or `reset()` on ancestor form reset — neither of which should need its own copy of this).\n    bind({ attr: { size: props.size, values: choice.formValue } });\n\n    return html`\n      <fieldset\n        role=\"group\"\n        aria-required=\"${() => String(Boolean(props.required.value))}\"\n        aria-invalid=\"${() => String(hasError())}\"\n        aria-errormessage=\"${() => (hasError() ? errorId : null)}\"\n        aria-describedby=\"${() => (hasError() ? errorId : hasHelper() ? helperId : null)}\">\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=\"checkbox-group-items\" part=\"items\">\n          <slot></slot>\n        </div>\n        <div class=\"error-text\" id=\"${errorId}\" role=\"alert\" ?hidden=${() => !hasError()}>${props.error}</div>\n        <div class=\"helper-text\" id=\"${helperId}\" ?hidden=${() => !hasHelper()}>${props.helper}</div>\n      </fieldset>\n    `;\n  },\n  styles: [disabledStateMixin, componentStyles],\n});\n"],"mappings":";;;;;;;;;AAuCA,IAAa,IAAqB,EAAoC,sBAAsB,GAoE/E,IAAqB;AAClC,EAA8B,GAAoB;CAChD,gBAAgB;CAChB,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,OAAO,EAAK,OAAO;EACnB,QAAQ,EAAK,OAAO;EACpB,OAAO,EAAK,OAAO;EACnB,MAAM,EAAK,OAAO;EAClB,aAAa,EAAK,OAAO,UAAU;EACnC,UAAU,EAAK,KAAK,EAAK;EAKzB,QAAQ;GAAE,GAAG,EAAK,OAAO;GAAG,SAAS;EAAM;CAC7C;CACA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAO,EAAgC,GACvC,IAAQ,EAAS,GACjB,IAAQ,GAER,IAAS,EAAkB;GAC/B,UAAU,EAAM;GAChB,OAAO,EAAM;GACb,QAAQ,EAAM;GACd,UAAU,EAAO,EAAI;GACrB,QAAQ;GACR,UAAU,EAAM;GAChB,QAAQ,EAAgB,CAAS;GACjC,OAAO,EAAM;EACf,CAAC;EAED,EAAO,gBACL,EAAiB;GACf,UAAU,EAAO;GACjB,SAAS,EAAO;GAChB,cAAc,MAAM;GACpB,mBAAmB,EAAO;GAC1B,UAAU,EAAO;GACjB,OAAO,EAAO;EAChB,CAAC,CACH;EAEA,IAAM,IAAgB,EAAO,gBAEvB,UAAqC,EAAsB,GAAI,cAAc,GAC7E,KAAoB,MAA0B,EAAe,EAAc,GAAG,CAAK,GACnF,KAAc,MAA0B;GAC5C,IAAM,IAAS,EAAc,OAEvB,IAAS,EAAO,IAAI,CAAgB;GAE1C,EAAK,UAAU;IAAE;IAAQ;IAAe;GAAO,CAAC;EAClD,GAEM,KAAkB,GAAa,MAA0B;GAG7D,AAFA,EAAO,YAAY,CAAG,GACtB,EAAO,kBAAkB,QAAQ,GACjC,EAAW,CAAa;EAC1B;EAEA,EAAQ,GAAoB;GAC1B,OAAO,EAAM;GACb,UAAU,QAAe,EAAQ,EAAM,SAAS,KAAM;GACtD,MAAM,EAAM;GACZ,QAAQ;GACR,QAAQ;EACV,CAAC;EAGD,IAAM,UAAqB;GACzB,IAAM,IAAS,EAAc,OACvB,IAAQ,EAAM,MAAM,OACpB,IAAO,EAAM,KAAK,OAClB,IAAW,EAAM,SAAS,OAC1B,IAAa,EAAc;GAEjC,KAAK,IAAM,KAAY,GAAY;IACjC,IAAM,IAAM,EAAS,aAAa,OAAO,KAAK;IAU9C,AARA,EAAS,gBAAgB,WAAW,EAAO,SAAS,CAAG,CAAC,GAEpD,IAAO,EAAS,aAAa,SAAS,CAAK,IAC1C,EAAS,gBAAgB,OAAO,GAEjC,IAAM,EAAS,aAAa,QAAQ,CAAI,IACvC,EAAS,gBAAgB,MAAM,GAEpC,EAAS,gBAAgB,YAAY,EAAQ,CAAS;GACxD;EACF;EAOA,AALA,QAAY;GAEV,AADA,EAAW,SAAS,CAAC,CAAC,OACtB,EAAa;EACf,CAAC,GAED,QAAY;GACV,EAAW,SAAS,CAAC,CAAC;GAEtB,IAAM,IAAY,EAAc,CAAC,CAAC,KAAK,MAAa;IAClD,IAAM,KAAW,MAAiB;KAChC,EAAM,gBAAgB;KAEtB,IAAM,KAAO,EAAS,aAAa,OAAO,KAAK,GAAA,CAAI,KAAK;KAEnD,KAEL,EAAe,GAAK,CAAK;IAC3B;IAIA,OAFA,EAAS,iBAAiB,UAAU,CAAO,SAE9B;KACX,EAAS,oBAAoB,UAAU,CAAO;IAChD;GACF,CAAC;GAED,aAAa;IACX,KAAK,IAAM,KAAW,GAAW,EAAQ;GAC3C;EACF,CAAC;EAED,IAAM,IAAW,EAAe,uBAAuB,GACjD,IAAU,GAAG,EAAS,SACtB,IAAW,GAAG,EAAS,UACvB,UAAiB,EAAQ,EAAM,MAAM,OACrC,UAAkB,EAAQ,EAAM,OAAO,SAAU,CAAC,EAAS;EAOjE,OAFA,EAAK,EAAE,MAAM;GAAE,MAAM,EAAM;GAAM,QAAQ,EAAO;EAAU,EAAE,CAAC,GAEtD,CAAI;;;+BAGgB,OAAO,EAAQ,EAAM,SAAS,KAAM,EAAE;8BACvC,OAAO,EAAS,CAAC,EAAE;mCACb,EAAS,IAAI,IAAU,KAAM;kCAC9B,EAAS,IAAI,IAAU,EAAU,IAAI,IAAW,KAAM;sBACnE,EAAS,kBAAkB,CAAC,EAAM,MAAM,MAAM;YACxD,EAAM,QAAQ,QACR,EAAQ,EAAM,SAAS,aACvB,CAAI;;aAGZ,EAAE;;;;;sCAK0B,EAAQ,+BAA+B,CAAC,EAAS,EAAE,GAAG,EAAM,MAAM;uCACjE,EAAS,kBAAkB,CAAC,EAAU,EAAE,GAAG,EAAM,OAAO;;;CAG7F;CACA,QAAQ,CAAC,GAAoB,CAAe;AAC9C,CAAC"}

package/dist/checkbox.cjs

@@ -1,4 +1,4 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./core/ore.cjs"),t=require("./core/checkable.cjs"),n=require("./styles/mixins/accessibility.css.cjs"),r=require("./styles/mixins/shape.css.cjs"),i=require("./styles/mixins/states.css.cjs"),a=require("./styles/mixins/theme.css.cjs"),o=require("./shared/prop-bundles.cjs"),s=require("./shared/size-presets.cjs"),c=require("./inputs/shared/field-binding.cjs"),l=require("./inputs/shared/templates.cjs"),u=require("./checkbox-group.cjs"),d=require("./inputs/shared/native-field-event.cjs"),f=require("./inputs/checkbox/checkbox.css.cjs");let p=require("@vielzeug/ore"),m=require("@vielzeug/ripple");var h=`ore-checkbox`;(0,p.define)(h,{formAssociated:!0,props:{...o.themableBundle,...o.sizableBundle,...o.disablableBundle,checked:p.prop.bool(!1),error:p.prop.string(),helper:p.prop.string(),indeterminate:p.prop.bool(!1),name:p.prop.string(),required:p.prop.bool(!1),value:p.prop.string(`on`)},setup(n){let r=(0,p.getHost)(),i=(0,p.inject)(u.CHECKBOX_GROUP_CTX),a=t.createCheckable({checked:n.checked,clearIndeterminateFirst:!0,disabled:(0,m.computed)(()=>n.disabled.value||!!i?.disabled.value),error:n.error,group:i,helper:n.helper,indeterminate:n.indeterminate,onToggle:e=>{a.triggerValidation(`change`),d.setFieldChecked(r,e.checked),!i&&(d.dispatchNativeFieldEvent(r,`input`),d.dispatchNativeFieldEvent(r,`change`))},prefix:`checkbox`,required:n.required,signal:e.lifecycleSignal(p.onCleanup),value:n.value});a.attachFormField((0,p.useField)({disabled:a.disabled,onReset:a.reset,toFormValue:e=>e,validationMessage:a.validationMessage,validity:a.validity,value:a.checkableFormValue}));let{assistiveId:o,checked:s,disabled:f,errorText:h,handleClick:g,handleKeydown:_,helperText:v,indeterminate:y,labelId:b}=a;return d.defineFieldChecked(r,()=>s.value,e=>{s.value=e}),c.applyCheckableBinding(n.size,{assistiveId:o,checked:s,disabled:f,errorText:h,handleClick:g,handleKeydown:_,helperText:v,indeterminate:y,labelId:b,required:n.required},`checkbox`),p.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/states.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./core/checkable.cjs"),a=require("./core/ore.cjs"),o=require("./shared/prop-bundles.cjs"),s=require("./shared/size-presets.cjs"),c=require("./inputs/shared/field-binding.cjs"),l=require("./inputs/shared/templates.cjs"),u=require("./checkbox-group.cjs"),d=require("./inputs/shared/native-field-event.cjs"),f=require("./inputs/checkbox/checkbox.css.cjs");let p=require("@vielzeug/ore"),m=require("@vielzeug/ripple");var h=`ore-checkbox`;(0,p.define)(h,{formAssociated:!0,props:{...o.themableBundle,...o.sizableBundle,...o.disablableBundle,checked:p.prop.bool(!1),error:p.prop.string(),helper:p.prop.string(),indeterminate:p.prop.bool(!1),name:p.prop.string(),required:p.prop.bool(!1),value:p.prop.string(`on`)},setup(e){let t=(0,p.getHost)(),n=(0,p.inject)(u.CHECKBOX_GROUP_CTX),r=i.createCheckable({checked:e.checked,clearIndeterminateFirst:!0,disabled:(0,m.computed)(()=>e.disabled.value||!!n?.disabled.value),error:e.error,group:n,helper:e.helper,indeterminate:e.indeterminate,onToggle:e=>{r.triggerValidation(`change`),d.setFieldChecked(t,e.checked),!n&&(d.dispatchNativeFieldEvent(t,`input`),d.dispatchNativeFieldEvent(t,`change`))},prefix:`checkbox`,required:e.required,signal:a.lifecycleSignal(p.onCleanup),value:e.value});r.attachFormField((0,p.useField)({disabled:r.disabled,onReset:r.reset,toFormValue:e=>e,validationMessage:r.validationMessage,validity:r.validity,value:r.checkableFormValue}));let{assistiveId:o,checked:s,disabled:f,errorText:h,handleClick:g,handleKeydown:_,helperText:v,indeterminate:y,labelId:b}=r;return d.defineFieldChecked(t,()=>s.value,e=>{s.value=e}),c.applyCheckableBinding(e.size,{assistiveId:o,checked:s,disabled:f,errorText:h,handleClick:g,handleKeydown:_,helperText:v,indeterminate:y,labelId:b,required:e.required},`checkbox`),p.html`
       <div class="checkbox-wrapper" part="checkbox">
         <div class="box" part="box">
           <ore-icon class="checkmark" name="check" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
@@ -7,5 +7,5 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
       </div>
       <span class="label" part="label" id="${b}"><slot></slot></span>
       ${l.renderHelperRegion(o,h,v)}
-    `},styles:[a.colorThemeMixin,a.forcedColorsFormControlMixin,i.disabledStateMixin,n.coarsePointerMixin,r.sizeVariantMixin(s.CONTROL_SIZE_PRESET),f.default]}),exports.CHECKBOX_TAG=h;
+    `},styles:[r.colorThemeMixin,r.forcedColorsFormControlMixin,n.disabledStateMixin,e.coarsePointerMixin,t.sizeVariantMixin(s.CONTROL_SIZE_PRESET),f.default]}),exports.CHECKBOX_TAG=h;
 //# sourceMappingURL=checkbox.cjs.map

package/dist/checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.cjs","names":[],"sources":["../src/inputs/checkbox/checkbox.ts"],"sourcesContent":["import { define, html, inject, prop, getHost, onCleanup } from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\n\nimport { lifecycleSignal, createCheckable } from '../../core';\nimport '../../content/icon/icon';\nimport { CONTROL_SIZE_PRESET, disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsFormControlMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport { CHECKBOX_GROUP_CTX } from '../checkbox-group/checkbox-group';\nimport { applyCheckableBinding } from '../shared/field-binding';\nimport { defineFieldChecked, dispatchNativeFieldEvent, setFieldChecked } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './checkbox.css?inline';\n\nexport type OreCheckboxEvents = {\n  change: Event;\n  input: Event;\n};\n\nexport type OreCheckboxProps = 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 checkbox */\n  helper?: string;\n  /** Indeterminate state (partially checked) */\n  indeterminate?: boolean;\n  /** Require this checkbox to be checked for native form validation (e.g. a consent checkbox) */\n  required?: boolean;\n  /** Component size */\n  size?: ComponentSize;\n};\n\n/**\n * A customizable checkbox component with theme colors, sizes, and indeterminate state support.\n *\n * @element ore-checkbox\n *\n * @attr {boolean} checked - Checked state\n * @attr {boolean} disabled - Disable checkbox interaction\n * @attr {boolean} indeterminate - Indeterminate (partially checked) state\n * @attr {boolean} required - Require this checkbox to be checked for native form validation\n * @attr {string} value - Field value submitted with forms\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Checkbox size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the checkbox\n *\n * @fires input - Emitted when checkbox is toggled.\n * @fires change - Emitted when checkbox is toggled.\n *\n * @slot - Checkbox label text\n *\n * @cssprop --checkbox-size - Control size (width and height)\n * @cssprop --checkbox-radius - Control border radius\n * @cssprop --checkbox-bg - Unchecked background color\n * @cssprop --checkbox-border-color - Unchecked border color\n * @cssprop --checkbox-checked-bg - Checked/indeterminate background color\n * @cssprop --checkbox-color - Checkmark icon color\n * @cssprop --checkbox-font-size - Label font size\n * @part checkbox - The checkbox wrapper element\n * @part box - The visual checkbox box\n * @part label - The label element\n * @part helper-text - The helper/error text element\n *\n * @example\n * ```html\n * <ore-checkbox name=\"agree\" required>I agree to the terms</ore-checkbox>\n * <ore-checkbox checked color=\"primary\" size=\"lg\">Enabled by default</ore-checkbox>\n * <ore-checkbox error=\"This field is required\" helper=\"Check to continue\">Accept</ore-checkbox>\n * ```\n */\nexport const CHECKBOX_TAG = 'ore-checkbox' as const;\ndefine<OreCheckboxProps>(CHECKBOX_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    indeterminate: prop.bool(false),\n    name: prop.string(),\n    required: prop.bool(false),\n    value: prop.string('on'),\n  },\n  setup(props) {\n    const el = getHost();\n\n    const groupCtx = inject(CHECKBOX_GROUP_CTX);\n\n    const checkable = createCheckable({\n      checked: props.checked,\n      clearIndeterminateFirst: true,\n      disabled: computed(() => props.disabled.value || Boolean(groupCtx?.disabled.value)),\n      error: props.error,\n      group: groupCtx,\n      helper: props.helper,\n      indeterminate: props.indeterminate,\n      onToggle: (payload) => {\n        checkable.triggerValidation('change');\n        setFieldChecked(el, payload.checked);\n\n        // In a checkbox-group, the group owns change emission/state updates.\n        // Emitting here would bubble to the group and toggle a second time.\n        if (groupCtx) return;\n\n        dispatchNativeFieldEvent(el, 'input');\n        dispatchNativeFieldEvent(el, 'change');\n      },\n      prefix: 'checkbox',\n      required: props.required,\n      signal: lifecycleSignal(onCleanup),\n      value: props.value,\n    });\n\n    checkable.attachFormField(\n      useField<string | null>({\n        disabled: checkable.disabled,\n        onReset: checkable.reset,\n        toFormValue: (v) => v,\n        validationMessage: checkable.validationMessage,\n        validity: checkable.validity,\n        value: checkable.checkableFormValue,\n      }),\n    );\n\n    const {\n      assistiveId,\n      checked,\n      disabled,\n      errorText,\n      handleClick,\n      handleKeydown,\n      helperText,\n      indeterminate,\n      labelId,\n    } = checkable;\n\n    defineFieldChecked(\n      el,\n      () => checked.value,\n      (value) => {\n        checked.value = value;\n      },\n    );\n\n    applyCheckableBinding(\n      props.size,\n      {\n        assistiveId,\n        checked,\n        disabled,\n        errorText,\n        handleClick,\n        handleKeydown,\n        helperText,\n        indeterminate,\n        labelId,\n        required: props.required,\n      },\n      'checkbox',\n    );\n\n    return html`\n      <div class=\"checkbox-wrapper\" part=\"checkbox\">\n        <div class=\"box\" part=\"box\">\n          <ore-icon class=\"checkmark\" name=\"check\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n          <ore-icon class=\"dash\" name=\"minus\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\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":"uqBAoFA,IAAa,EAAe,gBAC5B,EAAA,EAAA,OAAA,CAAyB,EAAc,CACrC,eAAgB,GAChB,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,cACH,GAAG,EAAA,iBACH,QAAS,EAAA,KAAK,KAAK,EAAK,EACxB,MAAO,EAAA,KAAK,OAAO,EACnB,OAAQ,EAAA,KAAK,OAAO,EACpB,cAAe,EAAA,KAAK,KAAK,EAAK,EAC9B,KAAM,EAAA,KAAK,OAAO,EAClB,SAAU,EAAA,KAAK,KAAK,EAAK,EACzB,MAAO,EAAA,KAAK,OAAO,IAAI,CACzB,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAK,EAAA,QAAA,CAAQ,EAEb,GAAA,EAAW,EAAA,OAAA,CAAO,EAAA,kBAAkB,EAEpC,EAAY,EAAA,gBAAgB,CAChC,QAAS,EAAM,QACf,wBAAyB,GACzB,UAAA,EAAU,EAAA,SAAA,KAAe,EAAM,SAAS,OAAS,EAAQ,GAAU,SAAS,KAAM,EAClF,MAAO,EAAM,MACb,MAAO,EACP,OAAQ,EAAM,OACd,cAAe,EAAM,cACrB,SAAW,GAAY,CACrB,EAAU,kBAAkB,QAAQ,EACpC,EAAA,gBAAgB,EAAI,EAAQ,OAAO,EAI/B,KAEJ,EAAA,yBAAyB,EAAI,OAAO,EACpC,EAAA,yBAAyB,EAAI,QAAQ,EACvC,EACA,OAAQ,WACR,SAAU,EAAM,SAChB,OAAQ,EAAA,gBAAgB,EAAA,SAAS,EACjC,MAAO,EAAM,KACf,CAAC,EAED,EAAU,iBAAA,EACR,EAAA,SAAA,CAAwB,CACtB,SAAU,EAAU,SACpB,QAAS,EAAU,MACnB,YAAc,GAAM,EACpB,kBAAmB,EAAU,kBAC7B,SAAU,EAAU,SACpB,MAAO,EAAU,kBACnB,CAAC,CACH,EAEA,GAAM,CACJ,cACA,UACA,WACA,YACA,cACA,gBACA,aACA,gBACA,WACE,EA2BJ,OAzBA,EAAA,mBACE,MACM,EAAQ,MACb,GAAU,CACT,EAAQ,MAAQ,CAClB,CACF,EAEA,EAAA,sBACE,EAAM,KACN,CACE,cACA,UACA,WACA,YACA,cACA,gBACA,aACA,gBACA,UACA,SAAU,EAAM,QAClB,EACA,UACF,EAEO,EAAA,IAAI;;;;;;;6CAO8B,EAAQ;QAC7C,EAAA,mBAAmB,EAAa,EAAW,CAAU,EAAE;KAE7D,EACA,OAAQ,CACN,EAAA,gBACA,EAAA,6BACA,EAAA,mBACA,EAAA,mBACA,EAAA,iBAAiB,EAAA,mBAAmB,EACpC,EAAA,OACF,CACF,CAAC"}
+{"version":3,"file":"checkbox.cjs","names":[],"sources":["../src/inputs/checkbox/checkbox.ts"],"sourcesContent":["import { define, getHost, html, inject, onCleanup, prop, useField } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\nimport { createCheckable, lifecycleSignal } from '../../core';\nimport type { CheckableProps, ComponentSize, ThemeColor } from '../../types';\nimport '../../content/icon/icon';\nimport { CONTROL_SIZE_PRESET, disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  disabledStateMixin,\n  forcedColorsFormControlMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport { CHECKBOX_GROUP_CTX } from '../checkbox-group/checkbox-group';\nimport { applyCheckableBinding } from '../shared/field-binding';\nimport { defineFieldChecked, dispatchNativeFieldEvent, setFieldChecked } from '../shared/native-field-event';\nimport { renderHelperRegion } from '../shared/templates';\nimport componentStyles from './checkbox.css?inline';\n\nexport type OreCheckboxEvents = {\n  change: Event;\n  input: Event;\n};\n\nexport type OreCheckboxProps = 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 checkbox */\n  helper?: string;\n  /** Indeterminate state (partially checked) */\n  indeterminate?: boolean;\n  /** Require this checkbox to be checked for native form validation (e.g. a consent checkbox) */\n  required?: boolean;\n  /** Component size */\n  size?: ComponentSize;\n};\n\n/**\n * A customizable checkbox component with theme colors, sizes, and indeterminate state support.\n *\n * @element ore-checkbox\n *\n * @attr {boolean} checked - Checked state\n * @attr {boolean} disabled - Disable checkbox interaction\n * @attr {boolean} indeterminate - Indeterminate (partially checked) state\n * @attr {boolean} required - Require this checkbox to be checked for native form validation\n * @attr {string} value - Field value submitted with forms\n * @attr {string} name - Form field name\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - Checkbox size: 'sm' | 'md' | 'lg'\n * @attr {string} error - Error message (marks field as invalid)\n * @attr {string} helper - Helper text displayed below the checkbox\n *\n * @fires input - Emitted when checkbox is toggled.\n * @fires change - Emitted when checkbox is toggled.\n *\n * @slot - Checkbox label text\n *\n * @cssprop --checkbox-size - Control size (width and height)\n * @cssprop --checkbox-radius - Control border radius\n * @cssprop --checkbox-bg - Unchecked background color\n * @cssprop --checkbox-border-color - Unchecked border color\n * @cssprop --checkbox-checked-bg - Checked/indeterminate background color\n * @cssprop --checkbox-color - Checkmark icon color\n * @cssprop --checkbox-font-size - Label font size\n * @part checkbox - The checkbox wrapper element\n * @part box - The visual checkbox box\n * @part label - The label element\n * @part helper-text - The helper/error text element\n *\n * @example\n * ```html\n * <ore-checkbox name=\"agree\" required>I agree to the terms</ore-checkbox>\n * <ore-checkbox checked color=\"primary\" size=\"lg\">Enabled by default</ore-checkbox>\n * <ore-checkbox error=\"This field is required\" helper=\"Check to continue\">Accept</ore-checkbox>\n * ```\n */\nexport const CHECKBOX_TAG = 'ore-checkbox' as const;\ndefine<OreCheckboxProps>(CHECKBOX_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    indeterminate: prop.bool(false),\n    name: prop.string(),\n    required: prop.bool(false),\n    value: prop.string('on'),\n  },\n  setup(props) {\n    const el = getHost();\n\n    const groupCtx = inject(CHECKBOX_GROUP_CTX);\n\n    const checkable = createCheckable({\n      checked: props.checked,\n      clearIndeterminateFirst: true,\n      disabled: computed(() => props.disabled.value || Boolean(groupCtx?.disabled.value)),\n      error: props.error,\n      group: groupCtx,\n      helper: props.helper,\n      indeterminate: props.indeterminate,\n      onToggle: (payload) => {\n        checkable.triggerValidation('change');\n        setFieldChecked(el, payload.checked);\n\n        // In a checkbox-group, the group owns change emission/state updates.\n        // Emitting here would bubble to the group and toggle a second time.\n        if (groupCtx) return;\n\n        dispatchNativeFieldEvent(el, 'input');\n        dispatchNativeFieldEvent(el, 'change');\n      },\n      prefix: 'checkbox',\n      required: props.required,\n      signal: lifecycleSignal(onCleanup),\n      value: props.value,\n    });\n\n    checkable.attachFormField(\n      useField<string | null>({\n        disabled: checkable.disabled,\n        onReset: checkable.reset,\n        toFormValue: (v) => v,\n        validationMessage: checkable.validationMessage,\n        validity: checkable.validity,\n        value: checkable.checkableFormValue,\n      }),\n    );\n\n    const {\n      assistiveId,\n      checked,\n      disabled,\n      errorText,\n      handleClick,\n      handleKeydown,\n      helperText,\n      indeterminate,\n      labelId,\n    } = checkable;\n\n    defineFieldChecked(\n      el,\n      () => checked.value,\n      (value) => {\n        checked.value = value;\n      },\n    );\n\n    applyCheckableBinding(\n      props.size,\n      {\n        assistiveId,\n        checked,\n        disabled,\n        errorText,\n        handleClick,\n        handleKeydown,\n        helperText,\n        indeterminate,\n        labelId,\n        required: props.required,\n      },\n      'checkbox',\n    );\n\n    return html`\n      <div class=\"checkbox-wrapper\" part=\"checkbox\">\n        <div class=\"box\" part=\"box\">\n          <ore-icon class=\"checkmark\" name=\"check\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n          <ore-icon class=\"dash\" name=\"minus\" size=\"14\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\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":"uqBAiFA,IAAa,EAAe,gBAC5B,EAAA,EAAA,OAAA,CAAyB,EAAc,CACrC,eAAgB,GAChB,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,cACH,GAAG,EAAA,iBACH,QAAS,EAAA,KAAK,KAAK,EAAK,EACxB,MAAO,EAAA,KAAK,OAAO,EACnB,OAAQ,EAAA,KAAK,OAAO,EACpB,cAAe,EAAA,KAAK,KAAK,EAAK,EAC9B,KAAM,EAAA,KAAK,OAAO,EAClB,SAAU,EAAA,KAAK,KAAK,EAAK,EACzB,MAAO,EAAA,KAAK,OAAO,IAAI,CACzB,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAK,EAAA,QAAA,CAAQ,EAEb,GAAA,EAAW,EAAA,OAAA,CAAO,EAAA,kBAAkB,EAEpC,EAAY,EAAA,gBAAgB,CAChC,QAAS,EAAM,QACf,wBAAyB,GACzB,UAAA,EAAU,EAAA,SAAA,KAAe,EAAM,SAAS,OAAS,EAAQ,GAAU,SAAS,KAAM,EAClF,MAAO,EAAM,MACb,MAAO,EACP,OAAQ,EAAM,OACd,cAAe,EAAM,cACrB,SAAW,GAAY,CACrB,EAAU,kBAAkB,QAAQ,EACpC,EAAA,gBAAgB,EAAI,EAAQ,OAAO,EAI/B,KAEJ,EAAA,yBAAyB,EAAI,OAAO,EACpC,EAAA,yBAAyB,EAAI,QAAQ,EACvC,EACA,OAAQ,WACR,SAAU,EAAM,SAChB,OAAQ,EAAA,gBAAgB,EAAA,SAAS,EACjC,MAAO,EAAM,KACf,CAAC,EAED,EAAU,iBAAA,EACR,EAAA,SAAA,CAAwB,CACtB,SAAU,EAAU,SACpB,QAAS,EAAU,MACnB,YAAc,GAAM,EACpB,kBAAmB,EAAU,kBAC7B,SAAU,EAAU,SACpB,MAAO,EAAU,kBACnB,CAAC,CACH,EAEA,GAAM,CACJ,cACA,UACA,WACA,YACA,cACA,gBACA,aACA,gBACA,WACE,EA2BJ,OAzBA,EAAA,mBACE,MACM,EAAQ,MACb,GAAU,CACT,EAAQ,MAAQ,CAClB,CACF,EAEA,EAAA,sBACE,EAAM,KACN,CACE,cACA,UACA,WACA,YACA,cACA,gBACA,aACA,gBACA,UACA,SAAU,EAAM,QAClB,EACA,UACF,EAEO,EAAA,IAAI;;;;;;;6CAO8B,EAAQ;QAC7C,EAAA,mBAAmB,EAAa,EAAW,CAAU,EAAE;KAE7D,EACA,OAAQ,CACN,EAAA,gBACA,EAAA,6BACA,EAAA,mBACA,EAAA,mBACA,EAAA,iBAAiB,EAAA,mBAAmB,EACpC,EAAA,OACF,CACF,CAAC"}