@vielzeug/buildit 2.0.0

package/dist/button-group.cjs

@@ -0,0 +1,6 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./inputs/button-group/button-group.css?inline.cjs`);let t=require(`@vielzeug/craftit`);var n=(0,t.createContext)(`ButtonGroupContext`),r=(0,t.defineComponent)({props:{attached:{default:!1},color:{default:void 0},fullwidth:{default:!1},label:{default:void 0},orientation:{default:void 0},size:{default:void 0},variant:{default:void 0}},setup({props:e}){return(0,t.provide)(n,{color:e.color,size:e.size,variant:e.variant}),t.html`
+      <div class="button-group" part="group" role="group" :aria-label="${()=>e.label.value??null}">
+        <slot></slot>
+      </div>
+    `},styles:[e.default],tag:`bit-button-group`});exports.BUTTON_GROUP_CTX=n,exports.BUTTON_GROUP_TAG=r;
+//# sourceMappingURL=button-group.cjs.map

package/dist/button-group.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.cjs","names":[],"sources":["../src/inputs/button-group/button-group.ts"],"sourcesContent":["import { createContext, defineComponent, html, provide, type ReadonlySignal } from '@vielzeug/craftit';\n\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\n/** Context provided by bit-button-group to its bit-button children. */\nexport type ButtonGroupContext = {\n  color: ReadonlySignal<ThemeColor | undefined>;\n  size: ReadonlySignal<ComponentSize | undefined>;\n  variant: ReadonlySignal<Exclude<VisualVariant, 'glass'> | undefined>;\n};\n/** Injection key for the button-group context. */\nexport const BUTTON_GROUP_CTX = createContext<ButtonGroupContext>('ButtonGroupContext');\n\nimport styles from './button-group.css?inline';\n\n/** Button group component properties */\nexport type BitButtonGroupProps = {\n  /** Attach buttons together (no gap, rounded only on edges) */\n  attached?: boolean;\n  /** Button color for all children (propagated) */\n  color?: ThemeColor;\n  /** Make all buttons full width */\n  fullwidth?: boolean;\n  /** Accessible group label */\n  label?: string;\n  /** Group orientation */\n  orientation?: 'horizontal' | 'vertical';\n  /** Button size for all children (propagated) */\n  size?: ComponentSize;\n  /** Button variant for all children (propagated) */\n  variant?: Exclude<VisualVariant, 'glass'>;\n};\n\n// -------------------- Component Definition --------------------\n/**\n * A container for grouping buttons with coordinated styling and layout.\n *\n * @element bit-button-group\n *\n * @attr {string} size - Button size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'frost'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} orientation - Group orientation: 'horizontal' | 'vertical'\n * @attr {boolean} attached - Attach buttons together (no gap, rounded only on edges)\n * @attr {boolean} fullwidth - Make all buttons full width\n * @attr {string} label - Accessible group label\n *\n * @slot - Button elements (bit-button)\n *\n * @cssprop --group-gap - Gap between buttons\n * @cssprop --group-radius - Border radius for edge buttons\n *\n * @example\n * ```html\n * <bit-button-group><bit-button>First</bit-button><bit-button>Second</bit-button></bit-button-group>\n * ```\n */\nexport const BUTTON_GROUP_TAG = defineComponent<BitButtonGroupProps>({\n  props: {\n    attached: { default: false },\n    color: { default: undefined },\n    fullwidth: { default: false },\n    label: { default: undefined },\n    orientation: { default: undefined },\n    size: { default: undefined },\n    variant: { default: undefined },\n  },\n  setup({ props }) {\n    provide(BUTTON_GROUP_CTX, {\n      color: props.color,\n      size: props.size,\n      variant: props.variant,\n    });\n\n    return html`\n      <div class=\"button-group\" part=\"group\" role=\"group\" :aria-label=\"${() => props.label.value ?? null}\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [styles],\n  tag: 'bit-button-group',\n});\n"],"mappings":"2KAWA,IAAa,GAAA,EAAA,EAAA,eAAqD,qBAAqB,CA8C1E,GAAA,EAAA,EAAA,iBAAwD,CACnE,MAAO,CACL,SAAU,CAAE,QAAS,GAAO,CAC5B,MAAO,CAAE,QAAS,IAAA,GAAW,CAC7B,UAAW,CAAE,QAAS,GAAO,CAC7B,MAAO,CAAE,QAAS,IAAA,GAAW,CAC7B,YAAa,CAAE,QAAS,IAAA,GAAW,CACnC,KAAM,CAAE,QAAS,IAAA,GAAW,CAC5B,QAAS,CAAE,QAAS,IAAA,GAAW,CAChC,CACD,MAAM,CAAE,SAAS,CAOf,OANA,EAAA,EAAA,SAAQ,EAAkB,CACxB,MAAO,EAAM,MACb,KAAM,EAAM,KACZ,QAAS,EAAM,QAChB,CAAC,CAEK,EAAA,IAAI;6EACgE,EAAM,MAAM,OAAS,KAAK;;;OAKvG,OAAQ,CAAC,EAAA,QAAO,CAChB,IAAK,mBACN,CAAC"}

package/dist/button-group.js

@@ -0,0 +1,31 @@
+import e from "./inputs/button-group/button-group.css?inline.js";
+import { createContext as t, defineComponent as n, html as r, provide as i } from "@vielzeug/craftit";
+//#region src/inputs/button-group/button-group.ts
+var a = t("ButtonGroupContext"), o = n({
+	props: {
+		attached: { default: !1 },
+		color: { default: void 0 },
+		fullwidth: { default: !1 },
+		label: { default: void 0 },
+		orientation: { default: void 0 },
+		size: { default: void 0 },
+		variant: { default: void 0 }
+	},
+	setup({ props: e }) {
+		return i(a, {
+			color: e.color,
+			size: e.size,
+			variant: e.variant
+		}), r`
+      <div class="button-group" part="group" role="group" :aria-label="${() => e.label.value ?? null}">
+        <slot></slot>
+      </div>
+    `;
+	},
+	styles: [e],
+	tag: "bit-button-group"
+});
+//#endregion
+export { a as BUTTON_GROUP_CTX, o as BUTTON_GROUP_TAG };
+
+//# sourceMappingURL=button-group.js.map

package/dist/button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.js","names":[],"sources":["../src/inputs/button-group/button-group.ts"],"sourcesContent":["import { createContext, defineComponent, html, provide, type ReadonlySignal } from '@vielzeug/craftit';\n\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\n/** Context provided by bit-button-group to its bit-button children. */\nexport type ButtonGroupContext = {\n  color: ReadonlySignal<ThemeColor | undefined>;\n  size: ReadonlySignal<ComponentSize | undefined>;\n  variant: ReadonlySignal<Exclude<VisualVariant, 'glass'> | undefined>;\n};\n/** Injection key for the button-group context. */\nexport const BUTTON_GROUP_CTX = createContext<ButtonGroupContext>('ButtonGroupContext');\n\nimport styles from './button-group.css?inline';\n\n/** Button group component properties */\nexport type BitButtonGroupProps = {\n  /** Attach buttons together (no gap, rounded only on edges) */\n  attached?: boolean;\n  /** Button color for all children (propagated) */\n  color?: ThemeColor;\n  /** Make all buttons full width */\n  fullwidth?: boolean;\n  /** Accessible group label */\n  label?: string;\n  /** Group orientation */\n  orientation?: 'horizontal' | 'vertical';\n  /** Button size for all children (propagated) */\n  size?: ComponentSize;\n  /** Button variant for all children (propagated) */\n  variant?: Exclude<VisualVariant, 'glass'>;\n};\n\n// -------------------- Component Definition --------------------\n/**\n * A container for grouping buttons with coordinated styling and layout.\n *\n * @element bit-button-group\n *\n * @attr {string} size - Button size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'frost'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} orientation - Group orientation: 'horizontal' | 'vertical'\n * @attr {boolean} attached - Attach buttons together (no gap, rounded only on edges)\n * @attr {boolean} fullwidth - Make all buttons full width\n * @attr {string} label - Accessible group label\n *\n * @slot - Button elements (bit-button)\n *\n * @cssprop --group-gap - Gap between buttons\n * @cssprop --group-radius - Border radius for edge buttons\n *\n * @example\n * ```html\n * <bit-button-group><bit-button>First</bit-button><bit-button>Second</bit-button></bit-button-group>\n * ```\n */\nexport const BUTTON_GROUP_TAG = defineComponent<BitButtonGroupProps>({\n  props: {\n    attached: { default: false },\n    color: { default: undefined },\n    fullwidth: { default: false },\n    label: { default: undefined },\n    orientation: { default: undefined },\n    size: { default: undefined },\n    variant: { default: undefined },\n  },\n  setup({ props }) {\n    provide(BUTTON_GROUP_CTX, {\n      color: props.color,\n      size: props.size,\n      variant: props.variant,\n    });\n\n    return html`\n      <div class=\"button-group\" part=\"group\" role=\"group\" :aria-label=\"${() => props.label.value ?? null}\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [styles],\n  tag: 'bit-button-group',\n});\n"],"mappings":";;;AAWA,IAAa,IAAmB,EAAkC,qBAAqB,EA8C1E,IAAmB,EAAqC;CACnE,OAAO;EACL,UAAU,EAAE,SAAS,IAAO;EAC5B,OAAO,EAAE,SAAS,KAAA,GAAW;EAC7B,WAAW,EAAE,SAAS,IAAO;EAC7B,OAAO,EAAE,SAAS,KAAA,GAAW;EAC7B,aAAa,EAAE,SAAS,KAAA,GAAW;EACnC,MAAM,EAAE,SAAS,KAAA,GAAW;EAC5B,SAAS,EAAE,SAAS,KAAA,GAAW;EAChC;CACD,MAAM,EAAE,YAAS;AAOf,SANA,EAAQ,GAAkB;GACxB,OAAO,EAAM;GACb,MAAM,EAAM;GACZ,SAAS,EAAM;GAChB,CAAC,EAEK,CAAI;+EACgE,EAAM,MAAM,SAAS,KAAK;;;;;CAKvG,QAAQ,CAAC,EAAO;CAChB,KAAK;CACN,CAAC"}

package/dist/button.cjs

@@ -0,0 +1,30 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/shape.css.cjs`),t=require(`./styles/mixins/states.css.cjs`),n=require(`./styles/mixins/theme.css.cjs`),r=require(`./styles/mixins/animation.css.cjs`),i=require(`./styles/mixins/variants.css.cjs`),a=require(`./styles/index.cjs`),o=require(`./craftit/dist/directives/when.cjs`);require(`./craftit/dist/directives/index.cjs`);const s=require(`./button-group.cjs`),c=require(`./inputs/button/button.css?inline.cjs`);let l=require(`@vielzeug/craftit`);var u=(0,l.defineComponent)({formAssociated:!0,props:{color:{default:void 0},disabled:{default:!1},fullwidth:{default:!1},href:{default:void 0},iconOnly:{default:!1},label:{default:void 0},loading:{default:!1},rainbow:{default:!1},rel:{default:void 0},rounded:{default:void 0},size:{default:void 0},target:{default:void 0},type:{default:`button`},variant:{default:`solid`}},setup({host:e,props:t}){(0,l.syncContextProps)((0,l.inject)(s.BUTTON_GROUP_CTX,void 0),t,[`color`,`size`,`variant`]);let n=(0,l.computed)(()=>t.disabled.value||t.loading.value||!1),r=(0,l.computed)(()=>!!t.href.value),i=(0,l.defineField)({disabled:n,toFormValue:()=>null,value:(0,l.computed)(()=>``)}),a=t=>{if(n.value){t.preventDefault(),t.stopPropagation();return}t.stopPropagation(),l.fire.mouse(e,t.type,t)},c=r=>{if(n.value)return;r.stopPropagation();let a=i.internals.form;a&&(t.type.value===`submit`?a.requestSubmit():t.type.value===`reset`&&a.reset()),l.fire.mouse(e,r.type,r)};return l.html`
+      ${o.t(r,()=>l.html`<a
+            part="button"
+            :href="${()=>t.href.value??null}"
+            :target="${()=>t.target.value??null}"
+            :rel="${()=>t.rel.value??null}"
+            :aria-label="${()=>t.label.value??null}"
+            :aria-disabled="${()=>n.value?`true`:null}"
+            :aria-busy="${()=>t.loading.value?`true`:null}"
+            role="button"
+            @click="${a}">
+            <span class="loader" part="loader" aria-label="Loading" ?hidden=${()=>!t.loading.value}></span>
+            <slot name="prefix"></slot>
+            <span class="content" part="content"><slot></slot></span>
+            <slot name="suffix"></slot>
+          </a>`,()=>l.html`<button
+            part="button"
+            type="button"
+            ?disabled=${n}
+            :aria-label="${()=>t.label.value??null}"
+            :aria-disabled="${()=>n.value?`true`:null}"
+            :aria-busy="${()=>t.loading.value?`true`:null}"
+            @click="${c}">
+            <span class="loader" part="loader" aria-label="Loading" ?hidden=${()=>!t.loading.value}></span>
+            <slot name="prefix"></slot>
+            <span class="content" part="content"><slot></slot></span>
+            <slot name="suffix"></slot>
+          </button>`)}
+    `},shadow:{delegatesFocus:!0},styles:[...a.formFieldMixins,n.forcedColorsMixin,e.sizeVariantMixin({lg:{fontSize:`var(--text-base)`,gap:`var(--size-2-5)`,height:`var(--size-12)`,iconSize:`var(--size-6)`,lineHeight:`var(--leading-relaxed)`,padding:`var(--size-2-5) var(--size-5)`},sm:{fontSize:`var(--text-sm)`,gap:`var(--size-1-5)`,height:`var(--size-8)`,iconSize:`var(--size-4)`,lineHeight:`var(--leading-tight)`,padding:`var(--size-1-5) var(--size-3)`}}),i.frostVariantMixin(`button`),r.rainbowEffectMixin(`button`),t.disabledLoadingMixin(`button`),c.default],tag:`bit-button`});exports.BUTTON_TAG=u;
+//# sourceMappingURL=button.cjs.map

package/dist/button.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.cjs","names":[],"sources":["../src/inputs/button/button.ts"],"sourcesContent":["import { computed, defineComponent, defineField, fire, html, inject, syncContextProps } from '@vielzeug/craftit';\nimport { when } from '@vielzeug/craftit/directives';\n\nimport type { ButtonType, DisablableProps, RoundedSize, SizableProps, ThemableProps, VisualVariant } from '../../types';\n\nimport {\n  disabledLoadingMixin,\n  forcedColorsMixin,\n  formFieldMixins,\n  frostVariantMixin,\n  rainbowEffectMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport { BUTTON_GROUP_CTX } from '../button-group/button-group';\nimport componentStyles from './button.css?inline';\n\n/** Button component properties */\nexport type BitButtonProps = ThemableProps &\n  SizableProps &\n  DisablableProps & {\n    /** Full width button (100% of container) */\n    fullwidth?: boolean;\n    /** When set, renders an `<a>` instead of `<button>` */\n    href?: string;\n    /** Icon-only mode (square aspect ratio, no padding) */\n    iconOnly?: boolean;\n    /** Accessible label for the inner button — required for icon-only buttons */\n    label?: string;\n    /** Show loading state with spinner */\n    loading?: boolean;\n    /** Enable animated rainbow border effect */\n    rainbow?: boolean;\n    /** Link rel attribute (requires href) */\n    rel?: string;\n    /** Border radius size */\n    rounded?: RoundedSize;\n    /** Link target (requires href) */\n    target?: '_blank' | '_self' | '_parent' | '_top';\n    /** HTML button type attribute */\n    type?: ButtonType;\n    /** Visual style variant */\n    variant?: Exclude<VisualVariant, 'glass'>;\n  };\n\n/**\n * A customizable button component with multiple variants, sizes, and states.\n * Supports icons, loading states, and special effects like frost and rainbow.\n *\n * @element bit-button\n *\n * @attr {string} type - HTML button type: 'button' | 'submit' | 'reset'\n * @attr {boolean} disabled - Disable button interaction\n * @attr {boolean} loading - Show loading state with spinner\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'frost'\n * @attr {string} size - Button size: 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {boolean} rainbow - Enable animated rainbow border effect\n * @attr {boolean} icon-only - Icon-only mode (square aspect ratio, no padding)\n * @attr {boolean} fullwidth - Full width button (100% of container)\n *\n * @fires click - Emitted when button is clicked (unless disabled/loading)\n *\n * @slot - Button content (text, icons, etc.)\n * @slot prefix - Content before the button text (e.g., icons)\n * @slot suffix - Content after the button text (e.g., icons, badges)\n *\n * @part button - The button element\n * @part loader - The loading spinner element\n * @part content - The button content wrapper\n *\n * @cssprop --button-bg - Background color\n * @cssprop --button-color - Text color\n * @cssprop --button-hover-bg - Hover background\n * @cssprop --button-active-bg - Active/pressed background\n * @cssprop --button-border - Border width\n * @cssprop --button-border-color - Border color\n * @cssprop --button-radius - Border radius\n * @cssprop --button-padding - Inner padding\n * @cssprop --button-gap - Gap between icon and text\n * @cssprop --button-font-size - Font size\n *\n * @example\n * ```html\n * <bit-button variant=\"solid\" color=\"primary\">Click me</bit-button>\n * <bit-button loading color=\"success\">Processing...</bit-button>\n * <bit-button variant=\"frost\" rainbow>Special Button</bit-button>\n * ```\n */\nexport const BUTTON_TAG = defineComponent<BitButtonProps>({\n  formAssociated: true,\n  props: {\n    color: { default: undefined },\n    disabled: { default: false },\n    fullwidth: { default: false },\n    href: { default: undefined },\n    iconOnly: { default: false },\n    label: { default: undefined },\n    loading: { default: false },\n    rainbow: { default: false },\n    rel: { default: undefined },\n    rounded: { default: undefined },\n    size: { default: undefined },\n    target: { default: undefined },\n    type: { default: 'button' },\n    variant: { default: 'solid' },\n  },\n  setup({ host, props }) {\n    // Reactively inherit size/variant/color from a parent bit-button-group when present.\n    syncContextProps(inject(BUTTON_GROUP_CTX, undefined), props, ['color', 'size', 'variant']);\n\n    const isDisabled = computed(() => props.disabled.value || props.loading.value || false);\n    const isLink = computed(() => !!props.href.value);\n    // Form association: relay submit/reset clicks to the associated form.\n    // The inner <button> always has type=\"button\" so shadow DOM never drives native form actions.\n    const formField = defineField({\n      disabled: isDisabled,\n      toFormValue: () => null,\n      value: computed(() => ''),\n    });\n    // Prevent navigation on disabled links; native <button disabled> handles the button case.\n    const handleLinkClick = (e: MouseEvent) => {\n      if (isDisabled.value) {\n        e.preventDefault();\n        e.stopPropagation();\n\n        return;\n      }\n\n      // Relay to host as a proper MouseEvent. stopPropagation prevents double-dispatch in\n      // browsers where shadow DOM already retargets the event to the host.\n      e.stopPropagation();\n      fire.mouse(host, e.type, e);\n    };\n    const handleButtonClick = (e: MouseEvent) => {\n      if (isDisabled.value) return;\n\n      // Relay to host, handle form submission, and stop inner bubble in one place.\n      e.stopPropagation();\n\n      const form = formField.internals.form;\n\n      if (form) {\n        if (props.type.value === 'submit') form.requestSubmit();\n        else if (props.type.value === 'reset') form.reset();\n      }\n\n      fire.mouse(host, e.type, e);\n    };\n\n    return html`\n      ${when(\n        isLink,\n        () =>\n          html`<a\n            part=\"button\"\n            :href=\"${() => props.href.value ?? null}\"\n            :target=\"${() => props.target.value ?? null}\"\n            :rel=\"${() => props.rel.value ?? null}\"\n            :aria-label=\"${() => props.label.value ?? null}\"\n            :aria-disabled=\"${() => (isDisabled.value ? 'true' : null)}\"\n            :aria-busy=\"${() => (props.loading.value ? 'true' : null)}\"\n            role=\"button\"\n            @click=\"${handleLinkClick}\">\n            <span class=\"loader\" part=\"loader\" aria-label=\"Loading\" ?hidden=${() => !props.loading.value}></span>\n            <slot name=\"prefix\"></slot>\n            <span class=\"content\" part=\"content\"><slot></slot></span>\n            <slot name=\"suffix\"></slot>\n          </a>`,\n        () =>\n          html`<button\n            part=\"button\"\n            type=\"button\"\n            ?disabled=${isDisabled}\n            :aria-label=\"${() => props.label.value ?? null}\"\n            :aria-disabled=\"${() => (isDisabled.value ? 'true' : null)}\"\n            :aria-busy=\"${() => (props.loading.value ? 'true' : null)}\"\n            @click=\"${handleButtonClick}\">\n            <span class=\"loader\" part=\"loader\" aria-label=\"Loading\" ?hidden=${() => !props.loading.value}></span>\n            <slot name=\"prefix\"></slot>\n            <span class=\"content\" part=\"content\"><slot></slot></span>\n            <slot name=\"suffix\"></slot>\n          </button>`,\n      )}\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [\n    ...formFieldMixins,\n    forcedColorsMixin,\n    sizeVariantMixin({\n      lg: {\n        fontSize: 'var(--text-base)',\n        gap: 'var(--size-2-5)',\n        height: 'var(--size-12)',\n        iconSize: 'var(--size-6)',\n        lineHeight: 'var(--leading-relaxed)',\n        padding: 'var(--size-2-5) var(--size-5)',\n      },\n      sm: {\n        fontSize: 'var(--text-sm)',\n        gap: 'var(--size-1-5)',\n        height: 'var(--size-8)',\n        iconSize: 'var(--size-4)',\n        lineHeight: 'var(--leading-tight)',\n        padding: 'var(--size-1-5) var(--size-3)',\n      },\n    }),\n    frostVariantMixin('button'),\n    rainbowEffectMixin('button'),\n    disabledLoadingMixin('button'),\n    componentStyles,\n  ],\n  tag: 'bit-button',\n});\n"],"mappings":"miBAyFA,IAAa,GAAA,EAAA,EAAA,iBAA6C,CACxD,eAAgB,GAChB,MAAO,CACL,MAAO,CAAE,QAAS,IAAA,GAAW,CAC7B,SAAU,CAAE,QAAS,GAAO,CAC5B,UAAW,CAAE,QAAS,GAAO,CAC7B,KAAM,CAAE,QAAS,IAAA,GAAW,CAC5B,SAAU,CAAE,QAAS,GAAO,CAC5B,MAAO,CAAE,QAAS,IAAA,GAAW,CAC7B,QAAS,CAAE,QAAS,GAAO,CAC3B,QAAS,CAAE,QAAS,GAAO,CAC3B,IAAK,CAAE,QAAS,IAAA,GAAW,CAC3B,QAAS,CAAE,QAAS,IAAA,GAAW,CAC/B,KAAM,CAAE,QAAS,IAAA,GAAW,CAC5B,OAAQ,CAAE,QAAS,IAAA,GAAW,CAC9B,KAAM,CAAE,QAAS,SAAU,CAC3B,QAAS,CAAE,QAAS,QAAS,CAC9B,CACD,MAAM,CAAE,OAAM,SAAS,EAErB,EAAA,EAAA,mBAAA,EAAA,EAAA,QAAwB,EAAA,iBAAkB,IAAA,GAAU,CAAE,EAAO,CAAC,QAAS,OAAQ,UAAU,CAAC,CAE1F,IAAM,GAAA,EAAA,EAAA,cAA4B,EAAM,SAAS,OAAS,EAAM,QAAQ,OAAS,GAAM,CACjF,GAAA,EAAA,EAAA,cAAwB,CAAC,CAAC,EAAM,KAAK,MAAM,CAG3C,GAAA,EAAA,EAAA,aAAwB,CAC5B,SAAU,EACV,gBAAmB,KACnB,OAAA,EAAA,EAAA,cAAsB,GAAG,CAC1B,CAAC,CAEI,EAAmB,GAAkB,CACzC,GAAI,EAAW,MAAO,CACpB,EAAE,gBAAgB,CAClB,EAAE,iBAAiB,CAEnB,OAKF,EAAE,iBAAiB,CACnB,EAAA,KAAK,MAAM,EAAM,EAAE,KAAM,EAAE,EAEvB,EAAqB,GAAkB,CAC3C,GAAI,EAAW,MAAO,OAGtB,EAAE,iBAAiB,CAEnB,IAAM,EAAO,EAAU,UAAU,KAE7B,IACE,EAAM,KAAK,QAAU,SAAU,EAAK,eAAe,CAC9C,EAAM,KAAK,QAAU,SAAS,EAAK,OAAO,EAGrD,EAAA,KAAK,MAAM,EAAM,EAAE,KAAM,EAAE,EAG7B,MAAO,GAAA,IAAI;QACP,EAAA,EACA,MAEE,EAAA,IAAI;;yBAEa,EAAM,KAAK,OAAS,KAAK;2BACvB,EAAM,OAAO,OAAS,KAAK;wBAC9B,EAAM,IAAI,OAAS,KAAK;+BACjB,EAAM,MAAM,OAAS,KAAK;kCACtB,EAAW,MAAQ,OAAS,KAAM;8BACtC,EAAM,QAAQ,MAAQ,OAAS,KAAM;;sBAEhD,EAAgB;kFAC8C,CAAC,EAAM,QAAQ,MAAM;;;;oBAM/F,EAAA,IAAI;;;wBAGU,EAAW;+BACF,EAAM,MAAM,OAAS,KAAK;kCACtB,EAAW,MAAQ,OAAS,KAAM;8BACtC,EAAM,QAAQ,MAAQ,OAAS,KAAM;sBAChD,EAAkB;kFAC4C,CAAC,EAAM,QAAQ,MAAM;;;;qBAKlG,CAAC;OAGN,OAAQ,CAAE,eAAgB,GAAM,CAChC,OAAQ,CACN,GAAG,EAAA,gBACH,EAAA,kBACA,EAAA,iBAAiB,CACf,GAAI,CACF,SAAU,mBACV,IAAK,kBACL,OAAQ,iBACR,SAAU,gBACV,WAAY,yBACZ,QAAS,gCACV,CACD,GAAI,CACF,SAAU,iBACV,IAAK,kBACL,OAAQ,gBACR,SAAU,gBACV,WAAY,uBACZ,QAAS,gCACV,CACF,CAAC,CACF,EAAA,kBAAkB,SAAS,CAC3B,EAAA,mBAAmB,SAAS,CAC5B,EAAA,qBAAqB,SAAS,CAC9B,EAAA,QACD,CACD,IAAK,aACN,CAAC"}

package/dist/button.js

@@ -0,0 +1,115 @@
+import { sizeVariantMixin as e } from "./styles/mixins/shape.css.js";
+import { disabledLoadingMixin as t } from "./styles/mixins/states.css.js";
+import { forcedColorsMixin as n } from "./styles/mixins/theme.css.js";
+import { rainbowEffectMixin as r } from "./styles/mixins/animation.css.js";
+import { frostVariantMixin as i } from "./styles/mixins/variants.css.js";
+import { formFieldMixins as a } from "./styles/index.js";
+import { t as o } from "./craftit/dist/directives/when.js";
+import "./craftit/dist/directives/index.js";
+import { BUTTON_GROUP_CTX as s } from "./button-group.js";
+import c from "./inputs/button/button.css?inline.js";
+import { computed as l, defineComponent as u, defineField as d, fire as f, html as p, inject as m, syncContextProps as h } from "@vielzeug/craftit";
+//#region src/inputs/button/button.ts
+var g = u({
+	formAssociated: !0,
+	props: {
+		color: { default: void 0 },
+		disabled: { default: !1 },
+		fullwidth: { default: !1 },
+		href: { default: void 0 },
+		iconOnly: { default: !1 },
+		label: { default: void 0 },
+		loading: { default: !1 },
+		rainbow: { default: !1 },
+		rel: { default: void 0 },
+		rounded: { default: void 0 },
+		size: { default: void 0 },
+		target: { default: void 0 },
+		type: { default: "button" },
+		variant: { default: "solid" }
+	},
+	setup({ host: e, props: t }) {
+		h(m(s, void 0), t, [
+			"color",
+			"size",
+			"variant"
+		]);
+		let n = l(() => t.disabled.value || t.loading.value || !1), r = l(() => !!t.href.value), i = d({
+			disabled: n,
+			toFormValue: () => null,
+			value: l(() => "")
+		}), a = (t) => {
+			if (n.value) {
+				t.preventDefault(), t.stopPropagation();
+				return;
+			}
+			t.stopPropagation(), f.mouse(e, t.type, t);
+		}, c = (r) => {
+			if (n.value) return;
+			r.stopPropagation();
+			let a = i.internals.form;
+			a && (t.type.value === "submit" ? a.requestSubmit() : t.type.value === "reset" && a.reset()), f.mouse(e, r.type, r);
+		};
+		return p`
+      ${o(r, () => p`<a
+            part="button"
+            :href="${() => t.href.value ?? null}"
+            :target="${() => t.target.value ?? null}"
+            :rel="${() => t.rel.value ?? null}"
+            :aria-label="${() => t.label.value ?? null}"
+            :aria-disabled="${() => n.value ? "true" : null}"
+            :aria-busy="${() => t.loading.value ? "true" : null}"
+            role="button"
+            @click="${a}">
+            <span class="loader" part="loader" aria-label="Loading" ?hidden=${() => !t.loading.value}></span>
+            <slot name="prefix"></slot>
+            <span class="content" part="content"><slot></slot></span>
+            <slot name="suffix"></slot>
+          </a>`, () => p`<button
+            part="button"
+            type="button"
+            ?disabled=${n}
+            :aria-label="${() => t.label.value ?? null}"
+            :aria-disabled="${() => n.value ? "true" : null}"
+            :aria-busy="${() => t.loading.value ? "true" : null}"
+            @click="${c}">
+            <span class="loader" part="loader" aria-label="Loading" ?hidden=${() => !t.loading.value}></span>
+            <slot name="prefix"></slot>
+            <span class="content" part="content"><slot></slot></span>
+            <slot name="suffix"></slot>
+          </button>`)}
+    `;
+	},
+	shadow: { delegatesFocus: !0 },
+	styles: [
+		...a,
+		n,
+		e({
+			lg: {
+				fontSize: "var(--text-base)",
+				gap: "var(--size-2-5)",
+				height: "var(--size-12)",
+				iconSize: "var(--size-6)",
+				lineHeight: "var(--leading-relaxed)",
+				padding: "var(--size-2-5) var(--size-5)"
+			},
+			sm: {
+				fontSize: "var(--text-sm)",
+				gap: "var(--size-1-5)",
+				height: "var(--size-8)",
+				iconSize: "var(--size-4)",
+				lineHeight: "var(--leading-tight)",
+				padding: "var(--size-1-5) var(--size-3)"
+			}
+		}),
+		i("button"),
+		r("button"),
+		t("button"),
+		c
+	],
+	tag: "bit-button"
+});
+//#endregion
+export { g as BUTTON_TAG };
+
+//# sourceMappingURL=button.js.map

package/dist/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","names":[],"sources":["../src/inputs/button/button.ts"],"sourcesContent":["import { computed, defineComponent, defineField, fire, html, inject, syncContextProps } from '@vielzeug/craftit';\nimport { when } from '@vielzeug/craftit/directives';\n\nimport type { ButtonType, DisablableProps, RoundedSize, SizableProps, ThemableProps, VisualVariant } from '../../types';\n\nimport {\n  disabledLoadingMixin,\n  forcedColorsMixin,\n  formFieldMixins,\n  frostVariantMixin,\n  rainbowEffectMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport { BUTTON_GROUP_CTX } from '../button-group/button-group';\nimport componentStyles from './button.css?inline';\n\n/** Button component properties */\nexport type BitButtonProps = ThemableProps &\n  SizableProps &\n  DisablableProps & {\n    /** Full width button (100% of container) */\n    fullwidth?: boolean;\n    /** When set, renders an `<a>` instead of `<button>` */\n    href?: string;\n    /** Icon-only mode (square aspect ratio, no padding) */\n    iconOnly?: boolean;\n    /** Accessible label for the inner button — required for icon-only buttons */\n    label?: string;\n    /** Show loading state with spinner */\n    loading?: boolean;\n    /** Enable animated rainbow border effect */\n    rainbow?: boolean;\n    /** Link rel attribute (requires href) */\n    rel?: string;\n    /** Border radius size */\n    rounded?: RoundedSize;\n    /** Link target (requires href) */\n    target?: '_blank' | '_self' | '_parent' | '_top';\n    /** HTML button type attribute */\n    type?: ButtonType;\n    /** Visual style variant */\n    variant?: Exclude<VisualVariant, 'glass'>;\n  };\n\n/**\n * A customizable button component with multiple variants, sizes, and states.\n * Supports icons, loading states, and special effects like frost and rainbow.\n *\n * @element bit-button\n *\n * @attr {string} type - HTML button type: 'button' | 'submit' | 'reset'\n * @attr {boolean} disabled - Disable button interaction\n * @attr {boolean} loading - Show loading state with spinner\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'frost'\n * @attr {string} size - Button size: 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {boolean} rainbow - Enable animated rainbow border effect\n * @attr {boolean} icon-only - Icon-only mode (square aspect ratio, no padding)\n * @attr {boolean} fullwidth - Full width button (100% of container)\n *\n * @fires click - Emitted when button is clicked (unless disabled/loading)\n *\n * @slot - Button content (text, icons, etc.)\n * @slot prefix - Content before the button text (e.g., icons)\n * @slot suffix - Content after the button text (e.g., icons, badges)\n *\n * @part button - The button element\n * @part loader - The loading spinner element\n * @part content - The button content wrapper\n *\n * @cssprop --button-bg - Background color\n * @cssprop --button-color - Text color\n * @cssprop --button-hover-bg - Hover background\n * @cssprop --button-active-bg - Active/pressed background\n * @cssprop --button-border - Border width\n * @cssprop --button-border-color - Border color\n * @cssprop --button-radius - Border radius\n * @cssprop --button-padding - Inner padding\n * @cssprop --button-gap - Gap between icon and text\n * @cssprop --button-font-size - Font size\n *\n * @example\n * ```html\n * <bit-button variant=\"solid\" color=\"primary\">Click me</bit-button>\n * <bit-button loading color=\"success\">Processing...</bit-button>\n * <bit-button variant=\"frost\" rainbow>Special Button</bit-button>\n * ```\n */\nexport const BUTTON_TAG = defineComponent<BitButtonProps>({\n  formAssociated: true,\n  props: {\n    color: { default: undefined },\n    disabled: { default: false },\n    fullwidth: { default: false },\n    href: { default: undefined },\n    iconOnly: { default: false },\n    label: { default: undefined },\n    loading: { default: false },\n    rainbow: { default: false },\n    rel: { default: undefined },\n    rounded: { default: undefined },\n    size: { default: undefined },\n    target: { default: undefined },\n    type: { default: 'button' },\n    variant: { default: 'solid' },\n  },\n  setup({ host, props }) {\n    // Reactively inherit size/variant/color from a parent bit-button-group when present.\n    syncContextProps(inject(BUTTON_GROUP_CTX, undefined), props, ['color', 'size', 'variant']);\n\n    const isDisabled = computed(() => props.disabled.value || props.loading.value || false);\n    const isLink = computed(() => !!props.href.value);\n    // Form association: relay submit/reset clicks to the associated form.\n    // The inner <button> always has type=\"button\" so shadow DOM never drives native form actions.\n    const formField = defineField({\n      disabled: isDisabled,\n      toFormValue: () => null,\n      value: computed(() => ''),\n    });\n    // Prevent navigation on disabled links; native <button disabled> handles the button case.\n    const handleLinkClick = (e: MouseEvent) => {\n      if (isDisabled.value) {\n        e.preventDefault();\n        e.stopPropagation();\n\n        return;\n      }\n\n      // Relay to host as a proper MouseEvent. stopPropagation prevents double-dispatch in\n      // browsers where shadow DOM already retargets the event to the host.\n      e.stopPropagation();\n      fire.mouse(host, e.type, e);\n    };\n    const handleButtonClick = (e: MouseEvent) => {\n      if (isDisabled.value) return;\n\n      // Relay to host, handle form submission, and stop inner bubble in one place.\n      e.stopPropagation();\n\n      const form = formField.internals.form;\n\n      if (form) {\n        if (props.type.value === 'submit') form.requestSubmit();\n        else if (props.type.value === 'reset') form.reset();\n      }\n\n      fire.mouse(host, e.type, e);\n    };\n\n    return html`\n      ${when(\n        isLink,\n        () =>\n          html`<a\n            part=\"button\"\n            :href=\"${() => props.href.value ?? null}\"\n            :target=\"${() => props.target.value ?? null}\"\n            :rel=\"${() => props.rel.value ?? null}\"\n            :aria-label=\"${() => props.label.value ?? null}\"\n            :aria-disabled=\"${() => (isDisabled.value ? 'true' : null)}\"\n            :aria-busy=\"${() => (props.loading.value ? 'true' : null)}\"\n            role=\"button\"\n            @click=\"${handleLinkClick}\">\n            <span class=\"loader\" part=\"loader\" aria-label=\"Loading\" ?hidden=${() => !props.loading.value}></span>\n            <slot name=\"prefix\"></slot>\n            <span class=\"content\" part=\"content\"><slot></slot></span>\n            <slot name=\"suffix\"></slot>\n          </a>`,\n        () =>\n          html`<button\n            part=\"button\"\n            type=\"button\"\n            ?disabled=${isDisabled}\n            :aria-label=\"${() => props.label.value ?? null}\"\n            :aria-disabled=\"${() => (isDisabled.value ? 'true' : null)}\"\n            :aria-busy=\"${() => (props.loading.value ? 'true' : null)}\"\n            @click=\"${handleButtonClick}\">\n            <span class=\"loader\" part=\"loader\" aria-label=\"Loading\" ?hidden=${() => !props.loading.value}></span>\n            <slot name=\"prefix\"></slot>\n            <span class=\"content\" part=\"content\"><slot></slot></span>\n            <slot name=\"suffix\"></slot>\n          </button>`,\n      )}\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [\n    ...formFieldMixins,\n    forcedColorsMixin,\n    sizeVariantMixin({\n      lg: {\n        fontSize: 'var(--text-base)',\n        gap: 'var(--size-2-5)',\n        height: 'var(--size-12)',\n        iconSize: 'var(--size-6)',\n        lineHeight: 'var(--leading-relaxed)',\n        padding: 'var(--size-2-5) var(--size-5)',\n      },\n      sm: {\n        fontSize: 'var(--text-sm)',\n        gap: 'var(--size-1-5)',\n        height: 'var(--size-8)',\n        iconSize: 'var(--size-4)',\n        lineHeight: 'var(--leading-tight)',\n        padding: 'var(--size-1-5) var(--size-3)',\n      },\n    }),\n    frostVariantMixin('button'),\n    rainbowEffectMixin('button'),\n    disabledLoadingMixin('button'),\n    componentStyles,\n  ],\n  tag: 'bit-button',\n});\n"],"mappings":";;;;;;;;;;;;AAyFA,IAAa,IAAa,EAAgC;CACxD,gBAAgB;CAChB,OAAO;EACL,OAAO,EAAE,SAAS,KAAA,GAAW;EAC7B,UAAU,EAAE,SAAS,IAAO;EAC5B,WAAW,EAAE,SAAS,IAAO;EAC7B,MAAM,EAAE,SAAS,KAAA,GAAW;EAC5B,UAAU,EAAE,SAAS,IAAO;EAC5B,OAAO,EAAE,SAAS,KAAA,GAAW;EAC7B,SAAS,EAAE,SAAS,IAAO;EAC3B,SAAS,EAAE,SAAS,IAAO;EAC3B,KAAK,EAAE,SAAS,KAAA,GAAW;EAC3B,SAAS,EAAE,SAAS,KAAA,GAAW;EAC/B,MAAM,EAAE,SAAS,KAAA,GAAW;EAC5B,QAAQ,EAAE,SAAS,KAAA,GAAW;EAC9B,MAAM,EAAE,SAAS,UAAU;EAC3B,SAAS,EAAE,SAAS,SAAS;EAC9B;CACD,MAAM,EAAE,SAAM,YAAS;AAErB,IAAiB,EAAO,GAAkB,KAAA,EAAU,EAAE,GAAO;GAAC;GAAS;GAAQ;GAAU,CAAC;EAE1F,IAAM,IAAa,QAAe,EAAM,SAAS,SAAS,EAAM,QAAQ,SAAS,GAAM,EACjF,IAAS,QAAe,CAAC,CAAC,EAAM,KAAK,MAAM,EAG3C,IAAY,EAAY;GAC5B,UAAU;GACV,mBAAmB;GACnB,OAAO,QAAe,GAAG;GAC1B,CAAC,EAEI,KAAmB,MAAkB;AACzC,OAAI,EAAW,OAAO;AAEpB,IADA,EAAE,gBAAgB,EAClB,EAAE,iBAAiB;AAEnB;;AAMF,GADA,EAAE,iBAAiB,EACnB,EAAK,MAAM,GAAM,EAAE,MAAM,EAAE;KAEvB,KAAqB,MAAkB;AAC3C,OAAI,EAAW,MAAO;AAGtB,KAAE,iBAAiB;GAEnB,IAAM,IAAO,EAAU,UAAU;AAOjC,GALI,MACE,EAAM,KAAK,UAAU,WAAU,EAAK,eAAe,GAC9C,EAAM,KAAK,UAAU,WAAS,EAAK,OAAO,GAGrD,EAAK,MAAM,GAAM,EAAE,MAAM,EAAE;;AAG7B,SAAO,CAAI;QACP,EACA,SAEE,CAAI;;2BAEa,EAAM,KAAK,SAAS,KAAK;6BACvB,EAAM,OAAO,SAAS,KAAK;0BAC9B,EAAM,IAAI,SAAS,KAAK;iCACjB,EAAM,MAAM,SAAS,KAAK;oCACtB,EAAW,QAAQ,SAAS,KAAM;gCACtC,EAAM,QAAQ,QAAQ,SAAS,KAAM;;sBAEhD,EAAgB;oFAC8C,CAAC,EAAM,QAAQ,MAAM;;;;uBAM/F,CAAI;;;wBAGU,EAAW;iCACF,EAAM,MAAM,SAAS,KAAK;oCACtB,EAAW,QAAQ,SAAS,KAAM;gCACtC,EAAM,QAAQ,QAAQ,SAAS,KAAM;sBAChD,EAAkB;oFAC4C,CAAC,EAAM,QAAQ,MAAM;;;;qBAKlG,CAAC;;;CAGN,QAAQ,EAAE,gBAAgB,IAAM;CAChC,QAAQ;EACN,GAAG;EACH;EACA,EAAiB;GACf,IAAI;IACF,UAAU;IACV,KAAK;IACL,QAAQ;IACR,UAAU;IACV,YAAY;IACZ,SAAS;IACV;GACD,IAAI;IACF,UAAU;IACV,KAAK;IACL,QAAQ;IACR,UAAU;IACV,YAAY;IACZ,SAAS;IACV;GACF,CAAC;EACF,EAAkB,SAAS;EAC3B,EAAmB,SAAS;EAC5B,EAAqB,SAAS;EAC9B;EACD;CACD,KAAK;CACN,CAAC"}

package/dist/card.cjs

@@ -0,0 +1,23 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/accessibility.css.cjs`),t=require(`./styles/mixins/variants.css.cjs`),n=require(`./styles/index.cjs`),r=require(`./content/card/card.css?inline.cjs`);let i=require(`@vielzeug/craftit`);var a=`button, a[href], input, select, textarea, summary, [role="button"], [role="link"], [contenteditable=""], [contenteditable="true"]`;function o(e){return e?e.assignedNodes({flatten:!0}).some(e=>e.nodeType===Node.ELEMENT_NODE?!0:e.nodeType===Node.TEXT_NODE?!!e.textContent?.trim():!1):!1}function s(e,t){for(let n of t.composedPath())if(n instanceof HTMLElement){if(n===e)return!1;if(n.matches(a)||n.closest(a))return!0}return!1}var c=(0,i.defineComponent)({props:{color:{default:void 0},disabled:{default:!1,type:Boolean},elevation:{default:void 0},interactive:{default:!1,type:Boolean},loading:{default:!1,type:Boolean},orientation:{default:void 0},padding:{default:void 0},variant:{default:void 0}},setup({emit:e,host:t,props:n}){let r=(0,i.ref)(),a=(0,i.ref)(),c=(0,i.ref)(),l=(0,i.ref)(),u=(0,i.ref)(),d=(0,i.signal)(!1),f=(0,i.signal)(!1),p=(0,i.signal)(!1),m=(0,i.signal)(!1),h=(0,i.signal)(!1);function g(){d.value=o(r.value),f.value=o(a.value),p.value=o(c.value),m.value=o(l.value),h.value=o(u.value)}return(0,i.onMount)(()=>{(0,i.onSlotChange)(`media`,g),(0,i.onSlotChange)(`header`,g),(0,i.onSlotChange)(`default`,g),(0,i.onSlotChange)(`footer`,g),(0,i.onSlotChange)(`actions`,g)}),(0,i.watch)([n.interactive,n.disabled,n.loading,n.variant,n.color,n.padding,n.orientation],()=>{n.interactive.value?(t.setAttribute(`role`,`button`),t.setAttribute(`tabindex`,n.disabled.value?`-1`:`0`),t.setAttribute(`aria-disabled`,String(n.disabled.value))):(t.removeAttribute(`role`),t.removeAttribute(`tabindex`),t.removeAttribute(`aria-disabled`)),t.setAttribute(`aria-busy`,n.loading.value?`true`:`false`)},{immediate:!0}),(0,i.handle)(t,`click`,r=>{!n.interactive.value||n.disabled.value||s(t,r)||e(`activate`,{originalEvent:r,trigger:`pointer`})}),(0,i.handle)(t,`keydown`,t=>{!n.interactive.value||n.disabled.value||(t.key===`Enter`||t.key===` `)&&(t.preventDefault(),e(`activate`,{originalEvent:t,trigger:`keyboard`}))}),i.html`
+      <div class="card" part="card">
+        <div class="loading-bar" part="loading-bar"></div>
+        <div class="card-media" part="media" ?hidden="${()=>!d.value}">
+          <slot ref=${r} name="media"></slot>
+        </div>
+        <div class="card-body" part="body">
+          <div class="card-header" part="header" ?hidden="${()=>!f.value}">
+            <slot ref=${a} name="header"></slot>
+          </div>
+          <div class="card-content" part="content" ?hidden="${()=>!p.value}">
+            <slot ref=${c}></slot>
+          </div>
+          <div class="card-footer" part="footer" ?hidden="${()=>!m.value}">
+            <slot ref=${l} name="footer"></slot>
+          </div>
+          <div class="card-actions" part="actions" ?hidden="${()=>!h.value}">
+            <slot ref=${u} name="actions"></slot>
+          </div>
+        </div>
+      </div>
+    `},styles:[...n.surfaceMixins,t.frostVariantMixin(`.card`),e.reducedMotionMixin,r.default],tag:`bit-card`});exports.CARD_TAG=c;
+//# sourceMappingURL=card.cjs.map

package/dist/card.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.cjs","names":[],"sources":["../src/content/card/card.ts"],"sourcesContent":["import { defineComponent, handle, html, onMount, onSlotChange, ref, signal, watch } from '@vielzeug/craftit';\n\nimport type { ElevationLevel, PaddingSize, ThemeColor } from '../../types';\n\nimport { frostVariantMixin, reducedMotionMixin, surfaceMixins } from '../../styles';\n\nconst INTERACTIVE_DESCENDANT_SELECTOR =\n  'button, a[href], input, select, textarea, summary, [role=\"button\"], [role=\"link\"], [contenteditable=\"\"], [contenteditable=\"true\"]';\n\nfunction slotHasMeaningfulContent(slot: HTMLSlotElement | null | undefined): boolean {\n  if (!slot) return false;\n\n  return slot.assignedNodes({ flatten: true }).some((node) => {\n    if (node.nodeType === Node.ELEMENT_NODE) return true;\n\n    if (node.nodeType === Node.TEXT_NODE) return !!node.textContent?.trim();\n\n    return false;\n  });\n}\n\nfunction isNestedInteractiveTarget(host: HTMLElement, event: Event): boolean {\n  for (const node of event.composedPath()) {\n    if (!(node instanceof HTMLElement)) continue;\n\n    if (node === host) return false;\n\n    if (node.matches(INTERACTIVE_DESCENDANT_SELECTOR) || !!node.closest(INTERACTIVE_DESCENDANT_SELECTOR)) {\n      return true;\n    }\n  }\n\n  return false;\n}\n\nimport componentStyles from './card.css?inline';\n\n/** Card component properties */\n\nexport type BitCardEvents = {\n  activate: { originalEvent: MouseEvent | KeyboardEvent; trigger: 'pointer' | 'keyboard' };\n};\n\nexport type BitCardProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Shadow elevation level (0-5) */\n  elevation?: `${ElevationLevel}`;\n  /** Make the card interactive (role=button, keyboard nav, emits activate) */\n  interactive?: boolean;\n  /** Show a loading progress bar */\n  loading?: boolean;\n  /** Card orientation */\n  orientation?: 'horizontal';\n  /** Internal padding size */\n  padding?: PaddingSize;\n  /** Visual style variant */\n  variant?: 'solid' | 'flat' | 'glass' | 'frost';\n};\n\n/**\n * A versatile card container with semantic slots for media, header, body, footer, and actions.\n *\n * @element bit-card\n *\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'glass' | 'frost'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} padding - Internal padding: 'none' | 'sm' | 'md' | 'lg' | 'xl'\n * @attr {string} elevation - Shadow elevation: '0' | '1' | '2' | '3' | '4' | '5'\n * @attr {string} orientation - Card layout: 'horizontal'\n * @attr {boolean} interactive - Enable pointer/keyboard activation\n * @attr {boolean} disabled - Disable card interaction\n * @attr {boolean} loading - Show loading progress bar\n *\n * @fires activate - Emitted when an interactive card is activated\n *\n * @slot media - Media content displayed at top/left\n * @slot header - Card header (title, subtitle)\n * @slot - Main card content\n * @slot footer - Card footer content\n * @slot actions - Action buttons or links\n *\n * @cssprop --card-bg - Background color\n * @cssprop --card-color - Text color\n * @cssprop --card-border - Border width\n * @cssprop --card-border-color - Border color\n * @cssprop --card-radius - Border radius\n * @cssprop --card-padding - Internal padding\n * @cssprop --card-shadow - Box shadow\n * @cssprop --card-hover-shadow - Shadow on hover\n *\n * @example\n * ```html\n * <bit-card elevation=\"2\"><h3 slot=\"header\">Title</h3><p>Content</p></bit-card>\n * <bit-card interactive color=\"primary\"><h3 slot=\"header\">Click me</h3></bit-card>\n * <bit-card variant=\"frost\" color=\"secondary\">Frosted card</bit-card>\n * ```\n */\nexport const CARD_TAG = defineComponent<BitCardProps, BitCardEvents>({\n  props: {\n    color: { default: undefined },\n    disabled: { default: false, type: Boolean },\n    elevation: { default: undefined },\n    interactive: { default: false, type: Boolean },\n    loading: { default: false, type: Boolean },\n    orientation: { default: undefined },\n    padding: { default: undefined },\n    variant: { default: undefined },\n  },\n  setup({ emit, host, props }) {\n    const mediaSlot = ref<HTMLSlotElement>();\n    const headerSlot = ref<HTMLSlotElement>();\n    const contentSlot = ref<HTMLSlotElement>();\n    const footerSlot = ref<HTMLSlotElement>();\n    const actionsSlot = ref<HTMLSlotElement>();\n    const hasMedia = signal(false);\n    const hasHeader = signal(false);\n    const hasContent = signal(false);\n    const hasFooter = signal(false);\n    const hasActions = signal(false);\n\n    function updateSlotState() {\n      hasMedia.value = slotHasMeaningfulContent(mediaSlot.value);\n      hasHeader.value = slotHasMeaningfulContent(headerSlot.value);\n      hasContent.value = slotHasMeaningfulContent(contentSlot.value);\n      hasFooter.value = slotHasMeaningfulContent(footerSlot.value);\n      hasActions.value = slotHasMeaningfulContent(actionsSlot.value);\n    }\n    onMount(() => {\n      onSlotChange('media', updateSlotState);\n      onSlotChange('header', updateSlotState);\n      onSlotChange('default', updateSlotState);\n      onSlotChange('footer', updateSlotState);\n      onSlotChange('actions', updateSlotState);\n    });\n    watch(\n      [props.interactive, props.disabled, props.loading, props.variant, props.color, props.padding, props.orientation],\n      () => {\n        if (props.interactive.value) {\n          host.setAttribute('role', 'button');\n          host.setAttribute('tabindex', props.disabled.value ? '-1' : '0');\n          host.setAttribute('aria-disabled', String(props.disabled.value));\n        } else {\n          host.removeAttribute('role');\n          host.removeAttribute('tabindex');\n          host.removeAttribute('aria-disabled');\n        }\n\n        host.setAttribute('aria-busy', props.loading.value ? 'true' : 'false');\n      },\n      { immediate: true },\n    );\n\n    const handleClick = (e: MouseEvent) => {\n      if (!props.interactive.value || props.disabled.value) return;\n\n      if (isNestedInteractiveTarget(host, e)) return;\n\n      emit('activate', { originalEvent: e, trigger: 'pointer' });\n    };\n    const handleKeydown = (e: KeyboardEvent) => {\n      if (!props.interactive.value || props.disabled.value) return;\n\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        emit('activate', { originalEvent: e, trigger: 'keyboard' });\n      }\n    };\n\n    handle(host, 'click', handleClick);\n    handle(host, 'keydown', handleKeydown);\n\n    return html`\n      <div class=\"card\" part=\"card\">\n        <div class=\"loading-bar\" part=\"loading-bar\"></div>\n        <div class=\"card-media\" part=\"media\" ?hidden=\"${() => !hasMedia.value}\">\n          <slot ref=${mediaSlot} name=\"media\"></slot>\n        </div>\n        <div class=\"card-body\" part=\"body\">\n          <div class=\"card-header\" part=\"header\" ?hidden=\"${() => !hasHeader.value}\">\n            <slot ref=${headerSlot} name=\"header\"></slot>\n          </div>\n          <div class=\"card-content\" part=\"content\" ?hidden=\"${() => !hasContent.value}\">\n            <slot ref=${contentSlot}></slot>\n          </div>\n          <div class=\"card-footer\" part=\"footer\" ?hidden=\"${() => !hasFooter.value}\">\n            <slot ref=${footerSlot} name=\"footer\"></slot>\n          </div>\n          <div class=\"card-actions\" part=\"actions\" ?hidden=\"${() => !hasActions.value}\">\n            <slot ref=${actionsSlot} name=\"actions\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  },\n  styles: [...surfaceMixins, frostVariantMixin('.card'), reducedMotionMixin, componentStyles],\n  tag: 'bit-card',\n});\n"],"mappings":"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"}

package/dist/card.js

@@ -0,0 +1,99 @@
+import { reducedMotionMixin as e } from "./styles/mixins/accessibility.css.js";
+import { frostVariantMixin as t } from "./styles/mixins/variants.css.js";
+import { surfaceMixins as n } from "./styles/index.js";
+import r from "./content/card/card.css?inline.js";
+import { defineComponent as i, handle as a, html as o, onMount as s, onSlotChange as c, ref as l, signal as u, watch as d } from "@vielzeug/craftit";
+//#region src/content/card/card.ts
+var f = "button, a[href], input, select, textarea, summary, [role=\"button\"], [role=\"link\"], [contenteditable=\"\"], [contenteditable=\"true\"]";
+function p(e) {
+	return e ? e.assignedNodes({ flatten: !0 }).some((e) => e.nodeType === Node.ELEMENT_NODE ? !0 : e.nodeType === Node.TEXT_NODE ? !!e.textContent?.trim() : !1) : !1;
+}
+function m(e, t) {
+	for (let n of t.composedPath()) if (n instanceof HTMLElement) {
+		if (n === e) return !1;
+		if (n.matches(f) || n.closest(f)) return !0;
+	}
+	return !1;
+}
+var h = i({
+	props: {
+		color: { default: void 0 },
+		disabled: {
+			default: !1,
+			type: Boolean
+		},
+		elevation: { default: void 0 },
+		interactive: {
+			default: !1,
+			type: Boolean
+		},
+		loading: {
+			default: !1,
+			type: Boolean
+		},
+		orientation: { default: void 0 },
+		padding: { default: void 0 },
+		variant: { default: void 0 }
+	},
+	setup({ emit: e, host: t, props: n }) {
+		let r = l(), i = l(), f = l(), h = l(), g = l(), _ = u(!1), v = u(!1), y = u(!1), b = u(!1), x = u(!1);
+		function S() {
+			_.value = p(r.value), v.value = p(i.value), y.value = p(f.value), b.value = p(h.value), x.value = p(g.value);
+		}
+		return s(() => {
+			c("media", S), c("header", S), c("default", S), c("footer", S), c("actions", S);
+		}), d([
+			n.interactive,
+			n.disabled,
+			n.loading,
+			n.variant,
+			n.color,
+			n.padding,
+			n.orientation
+		], () => {
+			n.interactive.value ? (t.setAttribute("role", "button"), t.setAttribute("tabindex", n.disabled.value ? "-1" : "0"), t.setAttribute("aria-disabled", String(n.disabled.value))) : (t.removeAttribute("role"), t.removeAttribute("tabindex"), t.removeAttribute("aria-disabled")), t.setAttribute("aria-busy", n.loading.value ? "true" : "false");
+		}, { immediate: !0 }), a(t, "click", (r) => {
+			!n.interactive.value || n.disabled.value || m(t, r) || e("activate", {
+				originalEvent: r,
+				trigger: "pointer"
+			});
+		}), a(t, "keydown", (t) => {
+			!n.interactive.value || n.disabled.value || (t.key === "Enter" || t.key === " ") && (t.preventDefault(), e("activate", {
+				originalEvent: t,
+				trigger: "keyboard"
+			}));
+		}), o`
+      <div class="card" part="card">
+        <div class="loading-bar" part="loading-bar"></div>
+        <div class="card-media" part="media" ?hidden="${() => !_.value}">
+          <slot ref=${r} name="media"></slot>
+        </div>
+        <div class="card-body" part="body">
+          <div class="card-header" part="header" ?hidden="${() => !v.value}">
+            <slot ref=${i} name="header"></slot>
+          </div>
+          <div class="card-content" part="content" ?hidden="${() => !y.value}">
+            <slot ref=${f}></slot>
+          </div>
+          <div class="card-footer" part="footer" ?hidden="${() => !b.value}">
+            <slot ref=${h} name="footer"></slot>
+          </div>
+          <div class="card-actions" part="actions" ?hidden="${() => !x.value}">
+            <slot ref=${g} name="actions"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+	},
+	styles: [
+		...n,
+		t(".card"),
+		e,
+		r
+	],
+	tag: "bit-card"
+});
+//#endregion
+export { h as CARD_TAG };
+
+//# sourceMappingURL=card.js.map

package/dist/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","names":[],"sources":["../src/content/card/card.ts"],"sourcesContent":["import { defineComponent, handle, html, onMount, onSlotChange, ref, signal, watch } from '@vielzeug/craftit';\n\nimport type { ElevationLevel, PaddingSize, ThemeColor } from '../../types';\n\nimport { frostVariantMixin, reducedMotionMixin, surfaceMixins } from '../../styles';\n\nconst INTERACTIVE_DESCENDANT_SELECTOR =\n  'button, a[href], input, select, textarea, summary, [role=\"button\"], [role=\"link\"], [contenteditable=\"\"], [contenteditable=\"true\"]';\n\nfunction slotHasMeaningfulContent(slot: HTMLSlotElement | null | undefined): boolean {\n  if (!slot) return false;\n\n  return slot.assignedNodes({ flatten: true }).some((node) => {\n    if (node.nodeType === Node.ELEMENT_NODE) return true;\n\n    if (node.nodeType === Node.TEXT_NODE) return !!node.textContent?.trim();\n\n    return false;\n  });\n}\n\nfunction isNestedInteractiveTarget(host: HTMLElement, event: Event): boolean {\n  for (const node of event.composedPath()) {\n    if (!(node instanceof HTMLElement)) continue;\n\n    if (node === host) return false;\n\n    if (node.matches(INTERACTIVE_DESCENDANT_SELECTOR) || !!node.closest(INTERACTIVE_DESCENDANT_SELECTOR)) {\n      return true;\n    }\n  }\n\n  return false;\n}\n\nimport componentStyles from './card.css?inline';\n\n/** Card component properties */\n\nexport type BitCardEvents = {\n  activate: { originalEvent: MouseEvent | KeyboardEvent; trigger: 'pointer' | 'keyboard' };\n};\n\nexport type BitCardProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Disable interaction */\n  disabled?: boolean;\n  /** Shadow elevation level (0-5) */\n  elevation?: `${ElevationLevel}`;\n  /** Make the card interactive (role=button, keyboard nav, emits activate) */\n  interactive?: boolean;\n  /** Show a loading progress bar */\n  loading?: boolean;\n  /** Card orientation */\n  orientation?: 'horizontal';\n  /** Internal padding size */\n  padding?: PaddingSize;\n  /** Visual style variant */\n  variant?: 'solid' | 'flat' | 'glass' | 'frost';\n};\n\n/**\n * A versatile card container with semantic slots for media, header, body, footer, and actions.\n *\n * @element bit-card\n *\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'glass' | 'frost'\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} padding - Internal padding: 'none' | 'sm' | 'md' | 'lg' | 'xl'\n * @attr {string} elevation - Shadow elevation: '0' | '1' | '2' | '3' | '4' | '5'\n * @attr {string} orientation - Card layout: 'horizontal'\n * @attr {boolean} interactive - Enable pointer/keyboard activation\n * @attr {boolean} disabled - Disable card interaction\n * @attr {boolean} loading - Show loading progress bar\n *\n * @fires activate - Emitted when an interactive card is activated\n *\n * @slot media - Media content displayed at top/left\n * @slot header - Card header (title, subtitle)\n * @slot - Main card content\n * @slot footer - Card footer content\n * @slot actions - Action buttons or links\n *\n * @cssprop --card-bg - Background color\n * @cssprop --card-color - Text color\n * @cssprop --card-border - Border width\n * @cssprop --card-border-color - Border color\n * @cssprop --card-radius - Border radius\n * @cssprop --card-padding - Internal padding\n * @cssprop --card-shadow - Box shadow\n * @cssprop --card-hover-shadow - Shadow on hover\n *\n * @example\n * ```html\n * <bit-card elevation=\"2\"><h3 slot=\"header\">Title</h3><p>Content</p></bit-card>\n * <bit-card interactive color=\"primary\"><h3 slot=\"header\">Click me</h3></bit-card>\n * <bit-card variant=\"frost\" color=\"secondary\">Frosted card</bit-card>\n * ```\n */\nexport const CARD_TAG = defineComponent<BitCardProps, BitCardEvents>({\n  props: {\n    color: { default: undefined },\n    disabled: { default: false, type: Boolean },\n    elevation: { default: undefined },\n    interactive: { default: false, type: Boolean },\n    loading: { default: false, type: Boolean },\n    orientation: { default: undefined },\n    padding: { default: undefined },\n    variant: { default: undefined },\n  },\n  setup({ emit, host, props }) {\n    const mediaSlot = ref<HTMLSlotElement>();\n    const headerSlot = ref<HTMLSlotElement>();\n    const contentSlot = ref<HTMLSlotElement>();\n    const footerSlot = ref<HTMLSlotElement>();\n    const actionsSlot = ref<HTMLSlotElement>();\n    const hasMedia = signal(false);\n    const hasHeader = signal(false);\n    const hasContent = signal(false);\n    const hasFooter = signal(false);\n    const hasActions = signal(false);\n\n    function updateSlotState() {\n      hasMedia.value = slotHasMeaningfulContent(mediaSlot.value);\n      hasHeader.value = slotHasMeaningfulContent(headerSlot.value);\n      hasContent.value = slotHasMeaningfulContent(contentSlot.value);\n      hasFooter.value = slotHasMeaningfulContent(footerSlot.value);\n      hasActions.value = slotHasMeaningfulContent(actionsSlot.value);\n    }\n    onMount(() => {\n      onSlotChange('media', updateSlotState);\n      onSlotChange('header', updateSlotState);\n      onSlotChange('default', updateSlotState);\n      onSlotChange('footer', updateSlotState);\n      onSlotChange('actions', updateSlotState);\n    });\n    watch(\n      [props.interactive, props.disabled, props.loading, props.variant, props.color, props.padding, props.orientation],\n      () => {\n        if (props.interactive.value) {\n          host.setAttribute('role', 'button');\n          host.setAttribute('tabindex', props.disabled.value ? '-1' : '0');\n          host.setAttribute('aria-disabled', String(props.disabled.value));\n        } else {\n          host.removeAttribute('role');\n          host.removeAttribute('tabindex');\n          host.removeAttribute('aria-disabled');\n        }\n\n        host.setAttribute('aria-busy', props.loading.value ? 'true' : 'false');\n      },\n      { immediate: true },\n    );\n\n    const handleClick = (e: MouseEvent) => {\n      if (!props.interactive.value || props.disabled.value) return;\n\n      if (isNestedInteractiveTarget(host, e)) return;\n\n      emit('activate', { originalEvent: e, trigger: 'pointer' });\n    };\n    const handleKeydown = (e: KeyboardEvent) => {\n      if (!props.interactive.value || props.disabled.value) return;\n\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        emit('activate', { originalEvent: e, trigger: 'keyboard' });\n      }\n    };\n\n    handle(host, 'click', handleClick);\n    handle(host, 'keydown', handleKeydown);\n\n    return html`\n      <div class=\"card\" part=\"card\">\n        <div class=\"loading-bar\" part=\"loading-bar\"></div>\n        <div class=\"card-media\" part=\"media\" ?hidden=\"${() => !hasMedia.value}\">\n          <slot ref=${mediaSlot} name=\"media\"></slot>\n        </div>\n        <div class=\"card-body\" part=\"body\">\n          <div class=\"card-header\" part=\"header\" ?hidden=\"${() => !hasHeader.value}\">\n            <slot ref=${headerSlot} name=\"header\"></slot>\n          </div>\n          <div class=\"card-content\" part=\"content\" ?hidden=\"${() => !hasContent.value}\">\n            <slot ref=${contentSlot}></slot>\n          </div>\n          <div class=\"card-footer\" part=\"footer\" ?hidden=\"${() => !hasFooter.value}\">\n            <slot ref=${footerSlot} name=\"footer\"></slot>\n          </div>\n          <div class=\"card-actions\" part=\"actions\" ?hidden=\"${() => !hasActions.value}\">\n            <slot ref=${actionsSlot} name=\"actions\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  },\n  styles: [...surfaceMixins, frostVariantMixin('.card'), reducedMotionMixin, componentStyles],\n  tag: 'bit-card',\n});\n"],"mappings":"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"}

package/dist/checkbox-group.cjs

@@ -0,0 +1,20 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/shape.css.cjs`),t=require(`./styles/mixins/states.css.cjs`),n=require(`./styles/mixins/theme.css.cjs`);require(`./styles/index.cjs`);const r=require(`./inputs/shared/utils/choice-change.cjs`),i=require(`./inputs/shared/utils/field-values.cjs`),a=require(`./inputs/shared/form-context.cjs`),o=require(`./inputs/shared/dom-sync/form-context.cjs`);require(`./inputs/shared/dom-sync/index.cjs`);const s=require(`./inputs/checkbox-group/checkbox-group.css?inline.cjs`);let c=require(`@vielzeug/craftit`);var l=(0,c.createContext)(`CheckboxGroupContext`),u=(0,c.defineComponent)({props:{color:{default:void 0},disabled:{default:!1},error:{default:``},helper:{default:``},label:{default:``},orientation:{default:`vertical`},required:{default:!1},size:{default:void 0},values:{default:``}},setup({emit:e,host:t,props:n}){let s=e=>i.parseCsvValues(e),u=(0,c.signal)(s(n.values.value)),d=()=>Array.from(t.getElementsByTagName(`bit-checkbox`)),f=e=>d().find(t=>(t.getAttribute(`value`)??``)===e)?.textContent?.replace(/\s+/g,` `).trim()||e,p=t=>{let n=u.value;e(`change`,r.createChoiceChangeDetail(n,n.map(f),t))};(0,c.effect)(()=>{u.value=s(n.values.value)});let m=(e,n)=>{let r=u.value,i=r.includes(e)?r.filter(t=>t!==e):[...r,e];u.value=i,t.setAttribute(`values`,i.join(`,`)),p(n)};o.mountFormContextSync(t,(0,c.inject)(a.FORM_CTX,void 0),n),(0,c.provide)(l,{color:n.color,disabled:(0,c.computed)(()=>!!n.disabled.value),size:n.size,toggle:m,values:u});let h=()=>{let e=u.value,r=n.color.value,i=n.size.value,a=n.disabled.value,o=Array.from(t.getElementsByTagName(`bit-checkbox`));for(let t of o){let n=t.getAttribute(`value`)??``;e.includes(n)?t.setAttribute(`checked`,``):t.removeAttribute(`checked`),r?t.setAttribute(`color`,r):t.removeAttribute(`color`),i?t.setAttribute(`size`,i):t.removeAttribute(`size`),a?t.setAttribute(`disabled`,``):t.removeAttribute(`disabled`)}};(0,c.effect)(h),(0,c.onMount)(()=>{(0,c.onSlotChange)(`default`,h),h(),(0,c.handle)(t,`change`,e=>{e.target!==t&&(e.stopPropagation(),m(e.target.getAttribute(`value`)??``,e))})});let g=(0,c.createId)(`checkbox-group-legend`),_=`${g}-error`,v=`${g}-helper`,y=(0,c.computed)(()=>!!n.error.value),b=(0,c.computed)(()=>!!n.helper.value&&!y.value);return c.html`
+      <fieldset
+        role="group"
+        aria-required="${()=>String(!!n.required.value)}"
+        aria-invalid="${()=>String(y.value)}"
+        aria-errormessage="${()=>y.value?_:null}"
+        aria-describedby="${()=>y.value?_:b.value?v:null}">
+        <legend id="${g}" ?hidden=${()=>!n.label.value}>
+          ${()=>n.label.value}${()=>n.required.value?c.html`<span aria-hidden="true"> *</span>`:``}
+        </legend>
+        <div class="checkbox-group-items" part="items">
+          <slot></slot>
+        </div>
+        <div class="error-text" id="${_}" role="alert" ?hidden=${()=>!y.value}>
+          ${()=>n.error.value}
+        </div>
+        <div class="helper-text" id="${v}" ?hidden=${()=>!b.value}>${()=>n.helper.value}</div>
+      </fieldset>
+    `},styles:[n.colorThemeMixin,e.sizeVariantMixin(),t.disabledStateMixin(),s.default],tag:`bit-checkbox-group`});exports.CHECKBOX_GROUP_CTX=l,exports.CHECKBOX_GROUP_TAG=u;
+//# sourceMappingURL=checkbox-group.cjs.map

package/dist/checkbox-group.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group.cjs","names":[],"sources":["../src/inputs/checkbox-group/checkbox-group.ts"],"sourcesContent":["import {\n  computed,\n  createContext,\n  createId,\n  defineComponent,\n  effect,\n  handle,\n  html,\n  inject,\n  onMount,\n  onSlotChange,\n  provide,\n  type ReadonlySignal,\n  signal,\n} from '@vielzeug/craftit';\n\nimport type { ComponentSize, ThemeColor } from '../../types';\n\nimport { colorThemeMixin, disabledStateMixin, sizeVariantMixin } from '../../styles';\nimport { mountFormContextSync } from '../shared/dom-sync';\nimport { FORM_CTX } from '../shared/form-context';\nimport { createChoiceChangeDetail, parseCsvValues, type ChoiceChangeDetail } from '../shared/utils';\nimport componentStyles from './checkbox-group.css?inline';\n\n// ─── Context ──────────────────────────────────────────────────────────────────\n\nexport type CheckboxGroupContext = {\n  color: ReadonlySignal<ThemeColor | undefined>;\n  disabled: ReadonlySignal<boolean>;\n  size: ReadonlySignal<ComponentSize | undefined>;\n  toggle: (value: string, originalEvent?: Event) => void;\n  values: ReadonlySignal<string[]>;\n};\n\nexport const CHECKBOX_GROUP_CTX = createContext<CheckboxGroupContext>('CheckboxGroupContext');\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type BitCheckboxGroupProps = {\n  /** Theme color — propagated to all child bit-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  /** 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 bit-checkbox elements */\n  size?: ComponentSize;\n  /** Comma-separated list of currently checked values */\n  values?: string;\n};\n\nexport type BitCheckboxGroupEvents = {\n  change: ChoiceChangeDetail;\n};\n\n/**\n * A fieldset wrapper that groups `bit-checkbox` elements, provides shared\n * `color` and `size` via context, and manages multi-value selection state.\n *\n * @element bit-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} color - Theme color\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 `bit-checkbox` elements here\n */\nexport const CHECKBOX_GROUP_TAG = defineComponent<BitCheckboxGroupProps, BitCheckboxGroupEvents>({\n  props: {\n    color: { default: undefined },\n    disabled: { default: false },\n    error: { default: '' },\n    helper: { default: '' },\n    label: { default: '' },\n    orientation: { default: 'vertical' },\n    required: { default: false },\n    size: { default: undefined },\n    values: { default: '' },\n  },\n  setup({ emit, host, props }) {\n    // Parse comma-separated value string into an array of checked values\n    const parseValues = (v: string | undefined): string[] => parseCsvValues(v);\n    const checkedValues = signal<string[]>(parseValues(props.values.value));\n\n    const getCheckboxes = (): HTMLElement[] => Array.from(host.getElementsByTagName('bit-checkbox')) as HTMLElement[];\n    const getLabelForValue = (value: string): string => {\n      const checkbox = getCheckboxes().find((item) => (item.getAttribute('value') ?? '') === value);\n\n      return checkbox?.textContent?.replace(/\\s+/g, ' ').trim() || value;\n    };\n    const emitChange = (originalEvent?: Event) => {\n      const values = checkedValues.value;\n\n      emit('change', createChoiceChangeDetail(values, values.map(getLabelForValue), originalEvent));\n    };\n\n    // Keep checkedValues in sync when prop changes externally\n    effect(() => {\n      checkedValues.value = parseValues(props.values.value);\n    });\n\n    const toggleCheckbox = (val: string, originalEvent?: Event) => {\n      const current = checkedValues.value;\n      const next = current.includes(val) ? current.filter((v) => v !== val) : [...current, val];\n\n      checkedValues.value = next;\n      host.setAttribute('values', next.join(','));\n      emitChange(originalEvent);\n    };\n    const formCtx = inject(FORM_CTX, undefined);\n\n    mountFormContextSync(host, formCtx, props);\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 bit-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 = Array.from(host.getElementsByTagName('bit-checkbox')) as HTMLElement[];\n\n      for (const checkbox of checkboxes) {\n        const val = checkbox.getAttribute('value') ?? '';\n\n        if (values.includes(val)) checkbox.setAttribute('checked', '');\n        else checkbox.removeAttribute('checked');\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        if (disabled) checkbox.setAttribute('disabled', '');\n        else checkbox.removeAttribute('disabled');\n      }\n    };\n\n    effect(syncChildren);\n\n    onMount(() => {\n      onSlotChange('default', syncChildren);\n      syncChildren();\n\n      handle(host, 'change', (e: Event) => {\n        if (e.target === host) return;\n\n        e.stopPropagation();\n\n        const val = (e.target as HTMLElement).getAttribute('value') ?? '';\n\n        toggleCheckbox(val, e);\n      });\n    });\n\n    const legendId = createId('checkbox-group-legend');\n    const errorId = `${legendId}-error`;\n    const helperId = `${legendId}-helper`;\n    const hasError = computed(() => Boolean(props.error.value));\n    const hasHelper = computed(() => Boolean(props.helper.value) && !hasError.value);\n\n    return html`\n      <fieldset\n        role=\"group\"\n        aria-required=\"${() => String(Boolean(props.required.value))}\"\n        aria-invalid=\"${() => String(hasError.value)}\"\n        aria-errormessage=\"${() => (hasError.value ? errorId : null)}\"\n        aria-describedby=\"${() => (hasError.value ? errorId : hasHelper.value ? helperId : null)}\">\n        <legend id=\"${legendId}\" ?hidden=${() => !props.label.value}>\n          ${() => props.label.value}${() => (props.required.value ? html`<span aria-hidden=\"true\"> *</span>` : '')}\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.value}>\n          ${() => props.error.value}\n        </div>\n        <div class=\"helper-text\" id=\"${helperId}\" ?hidden=${() => !hasHelper.value}>${() => props.helper.value}</div>\n      </fieldset>\n    `;\n  },\n  styles: [colorThemeMixin, sizeVariantMixin(), disabledStateMixin(), componentStyles],\n  tag: 'bit-checkbox-group',\n});\n"],"mappings":"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"}

package/dist/checkbox-group.js

@@ -0,0 +1,88 @@
+import { sizeVariantMixin as e } from "./styles/mixins/shape.css.js";
+import { disabledStateMixin as t } from "./styles/mixins/states.css.js";
+import { colorThemeMixin as n } from "./styles/mixins/theme.css.js";
+import "./styles/index.js";
+import { createChoiceChangeDetail as r } from "./inputs/shared/utils/choice-change.js";
+import { parseCsvValues as i } from "./inputs/shared/utils/field-values.js";
+import { FORM_CTX as a } from "./inputs/shared/form-context.js";
+import { mountFormContextSync as o } from "./inputs/shared/dom-sync/form-context.js";
+import "./inputs/shared/dom-sync/index.js";
+import s from "./inputs/checkbox-group/checkbox-group.css?inline.js";
+import { computed as c, createContext as l, createId as u, defineComponent as d, effect as f, handle as p, html as m, inject as h, onMount as g, onSlotChange as _, provide as v, signal as y } from "@vielzeug/craftit";
+//#region src/inputs/checkbox-group/checkbox-group.ts
+var b = l("CheckboxGroupContext"), x = d({
+	props: {
+		color: { default: void 0 },
+		disabled: { default: !1 },
+		error: { default: "" },
+		helper: { default: "" },
+		label: { default: "" },
+		orientation: { default: "vertical" },
+		required: { default: !1 },
+		size: { default: void 0 },
+		values: { default: "" }
+	},
+	setup({ emit: e, host: t, props: n }) {
+		let s = (e) => i(e), l = y(s(n.values.value)), d = () => Array.from(t.getElementsByTagName("bit-checkbox")), x = (e) => d().find((t) => (t.getAttribute("value") ?? "") === e)?.textContent?.replace(/\s+/g, " ").trim() || e, S = (t) => {
+			let n = l.value;
+			e("change", r(n, n.map(x), t));
+		};
+		f(() => {
+			l.value = s(n.values.value);
+		});
+		let C = (e, n) => {
+			let r = l.value, i = r.includes(e) ? r.filter((t) => t !== e) : [...r, e];
+			l.value = i, t.setAttribute("values", i.join(",")), S(n);
+		};
+		o(t, h(a, void 0), n), v(b, {
+			color: n.color,
+			disabled: c(() => !!n.disabled.value),
+			size: n.size,
+			toggle: C,
+			values: l
+		});
+		let w = () => {
+			let e = l.value, r = n.color.value, i = n.size.value, a = n.disabled.value, o = Array.from(t.getElementsByTagName("bit-checkbox"));
+			for (let t of o) {
+				let n = t.getAttribute("value") ?? "";
+				e.includes(n) ? t.setAttribute("checked", "") : t.removeAttribute("checked"), r ? t.setAttribute("color", r) : t.removeAttribute("color"), i ? t.setAttribute("size", i) : t.removeAttribute("size"), a ? t.setAttribute("disabled", "") : t.removeAttribute("disabled");
+			}
+		};
+		f(w), g(() => {
+			_("default", w), w(), p(t, "change", (e) => {
+				e.target !== t && (e.stopPropagation(), C(e.target.getAttribute("value") ?? "", e));
+			});
+		});
+		let T = u("checkbox-group-legend"), E = `${T}-error`, D = `${T}-helper`, O = c(() => !!n.error.value), k = c(() => !!n.helper.value && !O.value);
+		return m`
+      <fieldset
+        role="group"
+        aria-required="${() => String(!!n.required.value)}"
+        aria-invalid="${() => String(O.value)}"
+        aria-errormessage="${() => O.value ? E : null}"
+        aria-describedby="${() => O.value ? E : k.value ? D : null}">
+        <legend id="${T}" ?hidden=${() => !n.label.value}>
+          ${() => n.label.value}${() => n.required.value ? m`<span aria-hidden="true"> *</span>` : ""}
+        </legend>
+        <div class="checkbox-group-items" part="items">
+          <slot></slot>
+        </div>
+        <div class="error-text" id="${E}" role="alert" ?hidden=${() => !O.value}>
+          ${() => n.error.value}
+        </div>
+        <div class="helper-text" id="${D}" ?hidden=${() => !k.value}>${() => n.helper.value}</div>
+      </fieldset>
+    `;
+	},
+	styles: [
+		n,
+		e(),
+		t(),
+		s
+	],
+	tag: "bit-checkbox-group"
+});
+//#endregion
+export { b as CHECKBOX_GROUP_CTX, x as CHECKBOX_GROUP_TAG };
+
+//# sourceMappingURL=checkbox-group.js.map