@vielzeug/refine 1.1.3 → 1.3.0

package/dist/chat-message.cjs

@@ -0,0 +1,47 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./headless/announcer.cjs"),n=require("./content/chat-message/chat-message.css.cjs");let r=require("@vielzeug/ore"),i=require("@vielzeug/ripple");var a={assistant:`Assistant`,system:`System`,user:`You`},o=`ore-chat-message`;(0,r.define)(o,{props:{error:r.prop.string(),name:r.prop.string(),sender:r.prop.oneOf([`user`,`assistant`,`system`],`assistant`),status:r.prop.string(),streaming:r.prop.bool(!1),timestamp:r.prop.string()},setup(e){let n=(0,r.useEmit)(),o=(0,r.useSlots)(),s=()=>a[e.sender.value??`assistant`],c=(0,i.computed)(()=>`Message from ${e.name.value||s()}`),l=(0,i.computed)(()=>{let t=e.timestamp.value;if(!t)return``;let n=new Date(t);return Number.isNaN(n.getTime())?``:new Intl.DateTimeFormat(void 0,{hour:`numeric`,minute:`2-digit`}).format(n)}),u=(0,i.computed)(()=>!!l.value||!!e.status.value||!!e.error.value);(0,i.watch)(()=>e.status.value===`error`?e.error.value??``:null,e=>{e!==null&&t.announce(`Message failed to send${e?`: ${e}`:``}`,{politeness:`assertive`})});function d(e){n(`retry`,{originalEvent:e})}let f=(0,r.ref)();function p(){let e=f.value?.assignedNodes({flatten:!0});if(!(!e||e.length===0)){for(let t of e){if(t.nodeType!==Node.TEXT_NODE)break;let e=(t.textContent??``).replace(/^\s+/,``);if(t.textContent=e,e!==``)break}for(let t=e.length-1;t>=0;t--){let n=e[t];if(n.nodeType!==Node.TEXT_NODE)break;let r=(n.textContent??``).replace(/\s+$/,``);if(n.textContent=r,r!==``)break}}}return(0,r.onMounted)(()=>{p();let e=f.value;e&&(0,r.onEvent)(e,`slotchange`,p)}),r.html`
+      <div class="row" part="row">
+        <span class="avatar" part="avatar" ?hidden="${()=>!o.has(`avatar`).value}">
+          <slot name="avatar"></slot>
+        </span>
+        <div class="column" part="column">
+          <span class="name" part="name" ?hidden="${()=>!e.name.value}">${e.name}</span>
+          <div class="bubble" part="bubble" role="article" aria-label="${c}">
+            <div class="content" part="content">
+              <slot class="content-slot" ref="${f}"></slot>
+              <span class="cursor" part="cursor" aria-hidden="true" ?hidden="${()=>!e.streaming.value}"></span>
+            </div>
+          </div>
+          <div class="meta" part="meta" ?hidden="${()=>!u.value}">
+            <time
+              class="timestamp"
+              part="timestamp"
+              datetime="${e.timestamp}"
+              ?hidden="${()=>!l.value}"
+              >${l}</time
+            >
+            <span class="status" part="status" data-status="${e.status}" ?hidden="${()=>!e.status.value}">
+              ${()=>{switch(e.status.value){case`error`:return r.html`<ore-icon
+                      name="alert-circle"
+                      size="12"
+                      stroke-width="2.5"
+                      aria-hidden="true"></ore-icon>`;case`sending`:return r.html`<span class="spinner" aria-hidden="true"></span>`;case`sent`:return r.html`<ore-icon name="check" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>`;default:return``}}}
+            </span>
+            <span class="error-text" part="error" role="alert" ?hidden="${()=>!e.error.value}"
+              >${e.error}</span
+            >
+            <button
+              class="retry"
+              part="retry"
+              type="button"
+              ?hidden="${()=>e.status.value!==`error`}"
+              @click="${d}">
+              Retry
+            </button>
+          </div>
+          <div class="actions" part="actions" ?hidden="${()=>!o.has(`actions`).value}">
+            <slot name="actions"></slot>
+          </div>
+        </div>
+      </div>
+    `},styles:[e.reducedMotionMixin,n.default]}),exports.CHAT_MESSAGE_TAG=o;
+//# sourceMappingURL=chat-message.cjs.map

package/dist/chat-message.cjs.map

@@ -0,0 +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, watch } from '@vielzeug/ripple';\n\nimport { announce } from '../../headless';\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}</time\n            >\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`<ore-icon\n                      name=\"alert-circle\"\n                      size=\"12\"\n                      stroke-width=\"2.5\"\n                      aria-hidden=\"true\"></ore-icon>`;\n                  case 'sending':\n                    return html`<span class=\"spinner\" aria-hidden=\"true\"></span>`;\n                  case 'sent':\n                    return html`<ore-icon name=\"check\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>`;\n                  default:\n                    return '';\n                }\n              }}\n            </span>\n            <span class=\"error-text\" part=\"error\" role=\"alert\" ?hidden=\"${() => !props.error.value}\"\n              >${props.error}</span\n            >\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/chat-message.js

@@ -0,0 +1,121 @@
+import { reducedMotionMixin as e } from "./styles/mixins/accessibility.css.js";
+import { announce as t } from "./headless/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, watch as f } from "@vielzeug/ripple";
+//#region src/content/chat-message/chat-message.ts
+var p = {
+	assistant: "Assistant",
+	system: "System",
+	user: "You"
+}, m = "ore-chat-message";
+r(m, {
+	props: {
+		error: s.string(),
+		name: s.string(),
+		sender: s.oneOf([
+			"user",
+			"assistant",
+			"system"
+		], "assistant"),
+		status: s.string(),
+		streaming: s.bool(!1),
+		timestamp: s.string()
+	},
+	setup(e) {
+		let n = l(), r = u(), s = () => p[e.sender.value ?? "assistant"], m = d(() => `Message from ${e.name.value || s()}`), h = d(() => {
+			let t = e.timestamp.value;
+			if (!t) return "";
+			let n = new Date(t);
+			return Number.isNaN(n.getTime()) ? "" : new Intl.DateTimeFormat(void 0, {
+				hour: "numeric",
+				minute: "2-digit"
+			}).format(n);
+		}), g = d(() => !!h.value || !!e.status.value || !!e.error.value);
+		f(() => e.status.value === "error" ? e.error.value ?? "" : null, (e) => {
+			e !== null && t(`Message failed to send${e ? `: ${e}` : ""}`, { politeness: "assertive" });
+		});
+		function _(e) {
+			n("retry", { originalEvent: e });
+		}
+		let v = c();
+		function y() {
+			let e = v.value?.assignedNodes({ flatten: !0 });
+			if (!(!e || e.length === 0)) {
+				for (let t of e) {
+					if (t.nodeType !== Node.TEXT_NODE) break;
+					let e = (t.textContent ?? "").replace(/^\s+/, "");
+					if (t.textContent = e, e !== "") break;
+				}
+				for (let t = e.length - 1; t >= 0; t--) {
+					let n = e[t];
+					if (n.nodeType !== Node.TEXT_NODE) break;
+					let r = (n.textContent ?? "").replace(/\s+$/, "");
+					if (n.textContent = r, r !== "") break;
+				}
+			}
+		}
+		return o(() => {
+			y();
+			let e = v.value;
+			e && a(e, "slotchange", y);
+		}), i`
+      <div class="row" part="row">
+        <span class="avatar" part="avatar" ?hidden="${() => !r.has("avatar").value}">
+          <slot name="avatar"></slot>
+        </span>
+        <div class="column" part="column">
+          <span class="name" part="name" ?hidden="${() => !e.name.value}">${e.name}</span>
+          <div class="bubble" part="bubble" role="article" aria-label="${m}">
+            <div class="content" part="content">
+              <slot class="content-slot" ref="${v}"></slot>
+              <span class="cursor" part="cursor" aria-hidden="true" ?hidden="${() => !e.streaming.value}"></span>
+            </div>
+          </div>
+          <div class="meta" part="meta" ?hidden="${() => !g.value}">
+            <time
+              class="timestamp"
+              part="timestamp"
+              datetime="${e.timestamp}"
+              ?hidden="${() => !h.value}"
+              >${h}</time
+            >
+            <span class="status" part="status" data-status="${e.status}" ?hidden="${() => !e.status.value}">
+              ${() => {
+			switch (e.status.value) {
+				case "error": return i`<ore-icon
+                      name="alert-circle"
+                      size="12"
+                      stroke-width="2.5"
+                      aria-hidden="true"></ore-icon>`;
+				case "sending": return i`<span class="spinner" aria-hidden="true"></span>`;
+				case "sent": return i`<ore-icon name="check" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>`;
+				default: return "";
+			}
+		}}
+            </span>
+            <span class="error-text" part="error" role="alert" ?hidden="${() => !e.error.value}"
+              >${e.error}</span
+            >
+            <button
+              class="retry"
+              part="retry"
+              type="button"
+              ?hidden="${() => e.status.value !== "error"}"
+              @click="${_}">
+              Retry
+            </button>
+          </div>
+          <div class="actions" part="actions" ?hidden="${() => !r.has("actions").value}">
+            <slot name="actions"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+	},
+	styles: [e, n]
+});
+//#endregion
+export { m as CHAT_MESSAGE_TAG };
+
+//# sourceMappingURL=chat-message.js.map

package/dist/chat-message.js.map

@@ -0,0 +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, watch } from '@vielzeug/ripple';\n\nimport { announce } from '../../headless';\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}</time\n            >\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`<ore-icon\n                      name=\"alert-circle\"\n                      size=\"12\"\n                      stroke-width=\"2.5\"\n                      aria-hidden=\"true\"></ore-icon>`;\n                  case 'sending':\n                    return html`<span class=\"spinner\" aria-hidden=\"true\"></span>`;\n                  case 'sent':\n                    return html`<ore-icon name=\"check\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>`;\n                  default:\n                    return '';\n                }\n              }}\n            </span>\n            <span class=\"error-text\" part=\"error\" role=\"alert\" ?hidden=\"${() => !props.error.value}\"\n              >${props.error}</span\n            >\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,18 +1,18 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./ore/dist/directives/when.cjs");require("./ore/dist/directives.cjs");const t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/states.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./shared/prop-bundles.cjs"),a=require("./headless/ore.cjs"),o=require("./headless/choice-field.cjs"),s=require("./headless/light-dom.cjs"),c=require("./inputs/shared/form-context.cjs"),l=require("./inputs/checkbox-group/checkbox-group.css?inline.cjs");let u=require("@vielzeug/ore"),d=require("@vielzeug/ripple");var f=(0,u.createContext)(`CheckboxGroupContext`),p=`ore-checkbox-group`;(0,u.define)(p,{formAssociated:!0,props:{...i.themableBundle,...i.sizableBundle,...i.disablableBundle,error:u.prop.string(),helper:u.prop.string(),label:u.prop.string(),name:u.prop.string(),orientation:u.prop.string(`vertical`),required:u.prop.bool(!1),values:u.prop.string()},setup(t,{bind:n,el:r,emit:i,onCleanup:l,provide:p,slots:m,watch:h}){let g=(0,u.inject)(c.FORM_CTX),_=c.useFormContext(n,t,g),v=null,y=o.createChoiceField({disabled:_.disabled,error:t.error,getFormField:()=>v,helper:t.helper,multiple:(0,d.signal)(!0),prefix:`checkbox-group`,signal:a.lifecycleSignal(l),validateOn:g?.validateOn,value:t.values});v=(0,u.useField)({disabled:y.disabled,toFormValue:e=>e,value:y.formValue});let b=y.selectedValues,x=()=>s.getLightChildrenByTag(r,`ore-checkbox`),S=e=>s.getChoiceLabel(x(),e),C=e=>{let t=b.value;i(`change`,{labels:t.map(S),originalEvent:e,values:t})},w=(e,t)=>{y.toggleValue(e),r.setAttribute(`values`,y.formValue.value),y.triggerValidation(`change`),C(t)};p(f,{color:t.color,disabled:(0,d.computed)(()=>!!t.disabled.value),size:t.size,toggle:w,values:b});let T=()=>{let e=b.value,n=t.color.value,r=t.size.value,i=t.disabled.value,a=x();for(let t of a){let a=t.getAttribute(`value`)??``;t.toggleAttribute(`checked`,e.includes(a)),n?t.setAttribute(`color`,n):t.removeAttribute(`color`),r?t.setAttribute(`size`,r):t.removeAttribute(`size`),t.toggleAttribute(`disabled`,!!i)}};h(()=>{m.elements().value,T()}),h(()=>{m.elements().value;let e=x().map(e=>{let t=t=>{t.stopPropagation();let n=(e.getAttribute(`value`)??``).trim();n&&w(n,t)};return e.addEventListener(`change`,t),()=>{e.removeEventListener(`change`,t)}});return()=>{for(let t of e)t()}});let E=(0,u.createStableId)(`checkbox-group-legend`),D=`${E}-error`,O=`${E}-helper`,k=()=>!!t.error.value,A=()=>!!t.helper.value&&!k();return n({attr:{size:_.size}}),u.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./ore/dist/directives/when.cjs");require("./ore/dist/directives.cjs");const t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/states.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./shared/prop-bundles.cjs"),a=require("./headless/ore.cjs"),o=require("./headless/choice-field.cjs"),s=require("./headless/light-dom.cjs"),c=require("./ore/dist/forms/field.cjs");require("./ore/dist/forms.cjs");const l=require("./inputs/shared/form-context.cjs"),u=require("./inputs/checkbox-group/checkbox-group.css.cjs");let d=require("@vielzeug/ore"),f=require("@vielzeug/ripple");var p=(0,d.createContext)(`CheckboxGroupContext`),m=`ore-checkbox-group`;(0,d.define)(m,{formAssociated:!0,props:{...i.themableBundle,...i.sizableBundle,...i.disablableBundle,error:d.prop.string(),helper:d.prop.string(),label:d.prop.string(),name:d.prop.string(),orientation:d.prop.string(`vertical`),required:d.prop.bool(!1),values:d.prop.string()},setup(t){let n=(0,d.getHost)(),r=(0,d.useEmit)(),i=(0,d.useSlots)(),u=d.watchEffect,m=(0,d.inject)(l.FORM_CTX),h=l.useFormContext(t,m),g=null,_=o.createChoiceField({disabled:h.disabled,error:t.error,getFormField:()=>g,helper:t.helper,multiple:(0,f.signal)(!0),prefix:`checkbox-group`,signal:a.lifecycleSignal(d.onCleanup),validateOn:m?.validateOn,value:t.values});g=c.useField({disabled:_.disabled,toFormValue:e=>e,value:_.formValue});let v=_.selectedValues,y=()=>s.getLightChildrenByTag(n,`ore-checkbox`),b=e=>s.getChoiceLabel(y(),e),x=e=>{let t=v.value,n=t.map(b);r(`change`,{labels:n,originalEvent:e,values:t})},S=(e,t)=>{_.toggleValue(e),n.setAttribute(`values`,_.formValue.value),_.triggerValidation(`change`),x(t)};(0,d.provide)(p,{color:t.color,disabled:(0,f.computed)(()=>!!t.disabled.value),size:t.size,toggle:S,values:v});let C=()=>{let e=v.value,n=t.color.value,r=t.size.value,i=t.disabled.value,a=y();for(let t of a){let a=t.getAttribute(`value`)??``;t.toggleAttribute(`checked`,e.includes(a)),n?t.setAttribute(`color`,n):t.removeAttribute(`color`),r?t.setAttribute(`size`,r):t.removeAttribute(`size`),t.toggleAttribute(`disabled`,!!i)}};u(()=>{i.elements().value,C()}),u(()=>{i.elements().value;let e=y().map(e=>{let t=t=>{t.stopPropagation();let n=(e.getAttribute(`value`)??``).trim();n&&S(n,t)};return e.addEventListener(`change`,t),()=>{e.removeEventListener(`change`,t)}});return()=>{for(let t of e)t()}});let w=(0,d.createStableId)(`checkbox-group-legend`),T=`${w}-error`,E=`${w}-helper`,D=()=>!!t.error.value,O=()=>!!t.helper.value&&!D();return(0,d.bind)({attr:{size:h.size}}),d.html`
       <fieldset
         role="group"
         aria-required="${()=>String(!!t.required.value)}"
-        aria-invalid="${()=>String(k())}"
-        aria-errormessage="${()=>k()?D:null}"
-        aria-describedby="${()=>k()?D:A()?O:null}">
-        <legend id="${E}" ?hidden=${()=>!t.label.value}>
-          ${t.label}${e.when(()=>!!t.required.value,()=>u.html`<span aria-hidden="true"> *</span>`)}
+        aria-invalid="${()=>String(D())}"
+        aria-errormessage="${()=>D()?T:null}"
+        aria-describedby="${()=>D()?T:O()?E:null}">
+        <legend id="${w}" ?hidden=${()=>!t.label.value}>
+          ${t.label}${e.when(()=>!!t.required.value,()=>d.html`<span aria-hidden="true"> *</span>`)}
         </legend>
         <div class="checkbox-group-items" part="items">
           <slot></slot>
         </div>
-        <div class="error-text" id="${D}" role="alert" ?hidden=${()=>!k()}>${t.error}</div>
-        <div class="helper-text" id="${O}" ?hidden=${()=>!A()}>${t.helper}</div>
+        <div class="error-text" id="${T}" role="alert" ?hidden=${()=>!D()}>${t.error}</div>
+        <div class="helper-text" id="${E}" ?hidden=${()=>!O()}>${t.helper}</div>
       </fieldset>
-    `},styles:[r.colorThemeMixin,t.sizeVariantMixin(),n.disabledStateMixin,l.default]}),exports.CHECKBOX_GROUP_CTX=f,exports.CHECKBOX_GROUP_TAG=p;
+    `},styles:[r.colorThemeMixin,t.sizeVariantMixin(),n.disabledStateMixin,u.default]}),exports.CHECKBOX_GROUP_CTX=p,exports.CHECKBOX_GROUP_TAG=m;
 //# 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 { createContext, createStableId, define, useField, html, inject, prop } from '@vielzeug/ore';\nimport { when } from '@vielzeug/ore/directives';\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 '../../headless';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, disabledStateMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\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, OreCheckboxGroupEvents>(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    values: prop.string(),\n  },\n  setup(props, { bind, el, emit, onCleanup, provide, slots, watch }) {\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(bind, props, formCtx);\n\n    let _formField: { reportValidity(): void } | null = null;\n    const choice = createChoiceField({\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      getFormField: () => _formField,\n      helper: props.helper,\n      multiple: signal(true),\n      prefix: 'checkbox-group',\n      signal: lifecycleSignal(onCleanup),\n      validateOn: formCtx?.validateOn,\n      value: props.values,\n    });\n\n    _formField = useField<string>({ disabled: choice.disabled, toFormValue: (v) => v, value: choice.formValue });\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      el.setAttribute('values', choice.formValue.value);\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    bind({ attr: { size: fCtxProps.size } });\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`<span aria-hidden=\"true\"> *</span>`,\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: [colorThemeMixin, sizeVariantMixin(), 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  createContext,\n  createStableId,\n  define,\n  html,\n  inject,\n  prop,\n  bind,\n  getHost,\n  onCleanup,\n  provide,\n  useEmit,\n  useSlots,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { when } from '@vielzeug/ore/directives';\nimport { useField } from '@vielzeug/ore/forms';\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 '../../headless';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, disabledStateMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\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    values: prop.string(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCheckboxGroupEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n\n    let _formField: { reportValidity(): void } | null = null;\n    const choice = createChoiceField({\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      getFormField: () => _formField,\n      helper: props.helper,\n      multiple: signal(true),\n      prefix: 'checkbox-group',\n      signal: lifecycleSignal(onCleanup),\n      validateOn: formCtx?.validateOn,\n      value: props.values,\n    });\n\n    _formField = useField<string>({ disabled: choice.disabled, toFormValue: (v) => v, value: choice.formValue });\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      el.setAttribute('values', choice.formValue.value);\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    bind({ attr: { size: fCtxProps.size } });\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`<span aria-hidden=\"true\"> *</span>`,\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: [colorThemeMixin, sizeVariantMixin(), disabledStateMixin, componentStyles],\n});\n"],"mappings":"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"}

package/dist/checkbox-group.js

@@ -7,76 +7,78 @@ import { disablableBundle as i, sizableBundle as a, themableBundle as o } from "
 import { lifecycleSignal as s } from "./headless/ore.js";
 import { createChoiceField as c } from "./headless/choice-field.js";
 import { getChoiceLabel as l, getLightChildrenByTag as u } from "./headless/light-dom.js";
-import { FORM_CTX as d, useFormContext as f } from "./inputs/shared/form-context.js";
-import p from "./inputs/checkbox-group/checkbox-group.css?inline.js";
-import { createContext as m, createStableId as h, define as g, html as _, inject as v, prop as y, useField as b } from "@vielzeug/ore";
-import { computed as x, signal as S } from "@vielzeug/ripple";
+import { useField as d } from "./ore/dist/forms/field.js";
+import "./ore/dist/forms.js";
+import { FORM_CTX as f, useFormContext as p } from "./inputs/shared/form-context.js";
+import m from "./inputs/checkbox-group/checkbox-group.css.js";
+import { bind as h, createContext as g, createStableId as _, define as v, getHost as y, html as b, inject as x, onCleanup as S, prop as C, provide as w, useEmit as T, useSlots as E, watchEffect as D } from "@vielzeug/ore";
+import { computed as O, signal as k } from "@vielzeug/ripple";
 //#region src/inputs/checkbox-group/checkbox-group.ts
-var C = m("CheckboxGroupContext"), w = "ore-checkbox-group";
-g(w, {
+var A = g("CheckboxGroupContext"), j = "ore-checkbox-group";
+v(j, {
 	formAssociated: !0,
 	props: {
 		...o,
 		...a,
 		...i,
-		error: y.string(),
-		helper: y.string(),
-		label: y.string(),
-		name: y.string(),
-		orientation: y.string("vertical"),
-		required: y.bool(!1),
-		values: y.string()
+		error: C.string(),
+		helper: C.string(),
+		label: C.string(),
+		name: C.string(),
+		orientation: C.string("vertical"),
+		required: C.bool(!1),
+		values: C.string()
 	},
-	setup(t, { bind: n, el: r, emit: i, onCleanup: a, provide: o, slots: p, watch: m }) {
-		let g = v(d), y = f(n, t, g), w = null, T = c({
-			disabled: y.disabled,
+	setup(t) {
+		let n = y(), r = T(), i = E(), a = D, o = x(f), m = p(t, o), g = null, v = c({
+			disabled: m.disabled,
 			error: t.error,
-			getFormField: () => w,
+			getFormField: () => g,
 			helper: t.helper,
-			multiple: S(!0),
+			multiple: k(!0),
 			prefix: "checkbox-group",
-			signal: s(a),
-			validateOn: g?.validateOn,
+			signal: s(S),
+			validateOn: o?.validateOn,
 			value: t.values
 		});
-		w = b({
-			disabled: T.disabled,
+		g = d({
+			disabled: v.disabled,
 			toFormValue: (e) => e,
-			value: T.formValue
+			value: v.formValue
 		});
-		let E = T.selectedValues, D = () => u(r, "ore-checkbox"), O = (e) => l(D(), e), k = (e) => {
-			let t = E.value;
-			i("change", {
-				labels: t.map(O),
+		let C = v.selectedValues, j = () => u(n, "ore-checkbox"), M = (e) => l(j(), e), N = (e) => {
+			let t = C.value, n = t.map(M);
+			r("change", {
+				labels: n,
 				originalEvent: e,
 				values: t
 			});
-		}, A = (e, t) => {
-			T.toggleValue(e), r.setAttribute("values", T.formValue.value), T.triggerValidation("change"), k(t);
+		}, P = (e, t) => {
+			v.toggleValue(e), n.setAttribute("values", v.formValue.value), v.triggerValidation("change"), N(t);
 		};
-		o(C, {
+		w(A, {
 			color: t.color,
-			disabled: x(() => !!t.disabled.value),
+			disabled: O(() => !!t.disabled.value),
 			size: t.size,
-			toggle: A,
-			values: E
+			toggle: P,
+			values: C
 		});
-		let j = () => {
-			let e = E.value, n = t.color.value, r = t.size.value, i = t.disabled.value, a = D();
+		let F = () => {
+			let e = C.value, n = t.color.value, r = t.size.value, i = t.disabled.value, a = j();
 			for (let t of a) {
 				let a = t.getAttribute("value") ?? "";
 				t.toggleAttribute("checked", e.includes(a)), n ? t.setAttribute("color", n) : t.removeAttribute("color"), r ? t.setAttribute("size", r) : t.removeAttribute("size"), t.toggleAttribute("disabled", !!i);
 			}
 		};
-		m(() => {
-			p.elements().value, j();
-		}), m(() => {
-			p.elements().value;
-			let e = D().map((e) => {
+		a(() => {
+			i.elements().value, F();
+		}), a(() => {
+			i.elements().value;
+			let e = j().map((e) => {
 				let t = (t) => {
 					t.stopPropagation();
 					let n = (e.getAttribute("value") ?? "").trim();
-					n && A(n, t);
+					n && P(n, t);
 				};
 				return e.addEventListener("change", t), () => {
 					e.removeEventListener("change", t);
@@ -86,22 +88,22 @@ g(w, {
 				for (let t of e) t();
 			};
 		});
-		let M = h("checkbox-group-legend"), N = `${M}-error`, P = `${M}-helper`, F = () => !!t.error.value, I = () => !!t.helper.value && !F();
-		return n({ attr: { size: y.size } }), _`
+		let I = _("checkbox-group-legend"), L = `${I}-error`, R = `${I}-helper`, z = () => !!t.error.value, B = () => !!t.helper.value && !z();
+		return h({ attr: { size: m.size } }), b`
       <fieldset
         role="group"
         aria-required="${() => String(!!t.required.value)}"
-        aria-invalid="${() => String(F())}"
-        aria-errormessage="${() => F() ? N : null}"
-        aria-describedby="${() => F() ? N : I() ? P : null}">
-        <legend id="${M}" ?hidden=${() => !t.label.value}>
-          ${t.label}${e(() => !!t.required.value, () => _`<span aria-hidden="true"> *</span>`)}
+        aria-invalid="${() => String(z())}"
+        aria-errormessage="${() => z() ? L : null}"
+        aria-describedby="${() => z() ? L : B() ? R : null}">
+        <legend id="${I}" ?hidden=${() => !t.label.value}>
+          ${t.label}${e(() => !!t.required.value, () => b`<span aria-hidden="true"> *</span>`)}
         </legend>
         <div class="checkbox-group-items" part="items">
           <slot></slot>
         </div>
-        <div class="error-text" id="${N}" role="alert" ?hidden=${() => !F()}>${t.error}</div>
-        <div class="helper-text" id="${P}" ?hidden=${() => !I()}>${t.helper}</div>
+        <div class="error-text" id="${L}" role="alert" ?hidden=${() => !z()}>${t.error}</div>
+        <div class="helper-text" id="${R}" ?hidden=${() => !B()}>${t.helper}</div>
       </fieldset>
     `;
 	},
@@ -109,10 +111,10 @@ g(w, {
 		r,
 		t(),
 		n,
-		p
+		m
 	]
 });
 //#endregion
-export { C as CHECKBOX_GROUP_CTX, w as CHECKBOX_GROUP_TAG };
+export { A as CHECKBOX_GROUP_CTX, j as CHECKBOX_GROUP_TAG };
 
 //# sourceMappingURL=checkbox-group.js.map

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 { createContext, createStableId, define, useField, html, inject, prop } from '@vielzeug/ore';\nimport { when } from '@vielzeug/ore/directives';\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 '../../headless';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, disabledStateMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\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, OreCheckboxGroupEvents>(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    values: prop.string(),\n  },\n  setup(props, { bind, el, emit, onCleanup, provide, slots, watch }) {\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(bind, props, formCtx);\n\n    let _formField: { reportValidity(): void } | null = null;\n    const choice = createChoiceField({\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      getFormField: () => _formField,\n      helper: props.helper,\n      multiple: signal(true),\n      prefix: 'checkbox-group',\n      signal: lifecycleSignal(onCleanup),\n      validateOn: formCtx?.validateOn,\n      value: props.values,\n    });\n\n    _formField = useField<string>({ disabled: choice.disabled, toFormValue: (v) => v, value: choice.formValue });\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      el.setAttribute('values', choice.formValue.value);\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    bind({ attr: { size: fCtxProps.size } });\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`<span aria-hidden=\"true\"> *</span>`,\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: [colorThemeMixin, sizeVariantMixin(), 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  createContext,\n  createStableId,\n  define,\n  html,\n  inject,\n  prop,\n  bind,\n  getHost,\n  onCleanup,\n  provide,\n  useEmit,\n  useSlots,\n  watchEffect,\n} from '@vielzeug/ore';\nimport { when } from '@vielzeug/ore/directives';\nimport { useField } from '@vielzeug/ore/forms';\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 '../../headless';\nimport { disablableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, disabledStateMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\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    values: prop.string(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreCheckboxGroupEvents>();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n\n    let _formField: { reportValidity(): void } | null = null;\n    const choice = createChoiceField({\n      disabled: fCtxProps.disabled,\n      error: props.error,\n      getFormField: () => _formField,\n      helper: props.helper,\n      multiple: signal(true),\n      prefix: 'checkbox-group',\n      signal: lifecycleSignal(onCleanup),\n      validateOn: formCtx?.validateOn,\n      value: props.values,\n    });\n\n    _formField = useField<string>({ disabled: choice.disabled, toFormValue: (v) => v, value: choice.formValue });\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      el.setAttribute('values', choice.formValue.value);\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    bind({ attr: { size: fCtxProps.size } });\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`<span aria-hidden=\"true\"> *</span>`,\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: [colorThemeMixin, sizeVariantMixin(), disabledStateMixin, componentStyles],\n});\n"],"mappings":"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"}

package/dist/checkbox.cjs

@@ -1,11 +1,11 @@
-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("./shared/prop-bundles.cjs"),a=require("./shared/size-presets.cjs"),o=require("./headless/ore.cjs"),s=require("./headless/checkable.cjs"),c=require("./inputs/shared/field-binding.cjs"),l=require("./inputs/shared/form-context.cjs"),u=require("./inputs/shared/templates.cjs"),d=require("./checkbox-group.cjs"),f=require("./inputs/checkbox/checkbox.css?inline.cjs");let p=require("@vielzeug/ore"),m=require("@vielzeug/ripple");var h=`ore-checkbox`;(0,p.define)(h,{formAssociated:!0,props:{...i.themableBundle,...i.sizableBundle,...i.disablableBundle,checked:p.prop.bool(!1),error:p.prop.string(),helper:p.prop.string(),indeterminate:p.prop.bool(!1),name:p.prop.string(),value:p.prop.string(`on`)},setup(e,{bind:t,emit:n,onCleanup:r}){let i=(0,p.inject)(l.FORM_CTX),a=l.useFormContext(t,e,i),f=(0,p.inject)(d.CHECKBOX_GROUP_CTX),h=null,g=s.createCheckable({checked:e.checked,clearIndeterminateFirst:!0,disabled:(0,m.computed)(()=>a.disabled.value||!!f?.disabled.value),error:e.error,getFormField:()=>h,group:f,helper:e.helper,indeterminate:e.indeterminate,onToggle:e=>{g.triggerValidation(`change`),!f&&n(`change`,e)},prefix:`checkbox`,signal:o.lifecycleSignal(r),validateOn:i?.validateOn,value:e.value});h=(0,p.useField)({disabled:g.disabled,toFormValue:e=>e,value:g.checkableFormValue});let{assistiveId:_,checked:v,disabled:y,errorText:b,handleClick:x,handleKeydown:S,helperText:C,indeterminate:w,labelId:T}=g;return c.applyCheckableBinding(t,a.size,{assistiveId:_,checked:v,disabled:y,errorText:b,handleClick:x,handleKeydown:S,helperText:C,indeterminate:w,labelId:T},`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("./shared/prop-bundles.cjs"),a=require("./shared/size-presets.cjs"),o=require("./headless/ore.cjs"),s=require("./headless/checkable.cjs"),c=require("./ore/dist/forms/field.cjs");require("./ore/dist/forms.cjs");const l=require("./inputs/shared/field-binding.cjs"),u=require("./inputs/shared/form-context.cjs"),d=require("./inputs/shared/templates.cjs"),f=require("./checkbox-group.cjs"),p=require("./inputs/checkbox/checkbox.css.cjs");let m=require("@vielzeug/ore"),h=require("@vielzeug/ripple");var g=`ore-checkbox`;(0,m.define)(g,{formAssociated:!0,props:{...i.themableBundle,...i.sizableBundle,...i.disablableBundle,checked:m.prop.bool(!1),error:m.prop.string(),helper:m.prop.string(),indeterminate:m.prop.bool(!1),name:m.prop.string(),value:m.prop.string(`on`)},setup(e){let t=(0,m.useEmit)(),n=(0,m.inject)(u.FORM_CTX),r=u.useFormContext(e,n),i=(0,m.inject)(f.CHECKBOX_GROUP_CTX),a=null,p=s.createCheckable({checked:e.checked,clearIndeterminateFirst:!0,disabled:(0,h.computed)(()=>r.disabled.value||!!i?.disabled.value),error:e.error,getFormField:()=>a,group:i,helper:e.helper,indeterminate:e.indeterminate,onToggle:e=>{p.triggerValidation(`change`),!i&&t(`change`,e)},prefix:`checkbox`,signal:o.lifecycleSignal(m.onCleanup),validateOn:n?.validateOn,value:e.value});a=c.useField({disabled:p.disabled,toFormValue:e=>e,value:p.checkableFormValue});let{assistiveId:g,checked:_,disabled:v,errorText:y,handleClick:b,handleKeydown:x,helperText:S,indeterminate:C,labelId:w}=p;return l.applyCheckableBinding(r.size,{assistiveId:g,checked:_,disabled:v,errorText:y,handleClick:b,handleKeydown:x,helperText:S,indeterminate:C,labelId:w},`checkbox`),m.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>
           <ore-icon class="dash" name="minus" size="14" stroke-width="2" aria-hidden="true"></ore-icon>
         </div>
       </div>
-      <span class="label" part="label" id="${T}"><slot></slot></span>
-      ${u.renderHelperRegion(_,b,C)}
-    `},styles:[r.colorThemeMixin,r.forcedColorsFormControlMixin,n.disabledStateMixin,e.coarsePointerMixin,t.sizeVariantMixin(a.CONTROL_SIZE_PRESET),f.default]}),exports.CHECKBOX_TAG=h;
+      <span class="label" part="label" id="${w}"><slot></slot></span>
+      ${d.renderHelperRegion(g,y,S)}
+    `},styles:[r.colorThemeMixin,r.forcedColorsFormControlMixin,n.disabledStateMixin,e.coarsePointerMixin,t.sizeVariantMixin(a.CONTROL_SIZE_PRESET),p.default]}),exports.CHECKBOX_TAG=g;
 //# sourceMappingURL=checkbox.cjs.map