@vielzeug/buildit 2.0.0 → 2.1.0

package/dist/button-group.cjs

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

package/dist/button-group.cjs.map

@@ -1 +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"}
+{"version":3,"file":"button-group.cjs","names":[],"sources":["../src/inputs/button-group/button-group.ts"],"sourcesContent":["import { define, createContext, html, provide, type ReadonlySignal } from '@vielzeug/craftit';\n\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { type PropBundle, sizableBundle, themableBundle } from '../shared/bundles';\nimport styles from './button-group.css?inline';\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\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 = define<BitButtonGroupProps>('bit-button-group', {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    attached: false,\n    fullwidth: false,\n    label: undefined,\n    orientation: undefined,\n    variant: undefined,\n  } satisfies PropBundle<BitButtonGroupProps>,\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 ?? null}\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [styles],\n});\n"],"mappings":"oNAcA,IAAa,GAAA,EAAA,EAAA,eAAqD,qBAAqB,CA4C1E,GAAA,EAAA,EAAA,QAA+C,mBAAoB,CAC9E,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,cACH,SAAU,GACV,UAAW,GACX,MAAO,IAAA,GACP,YAAa,IAAA,GACb,QAAS,IAAA,GACV,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,OAAS,KAAK;;;OAKjG,OAAQ,CAAC,EAAA,QAAO,CACjB,CAAC"}

package/dist/button-group.js

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

package/dist/button-group.js.map

@@ -1 +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"}
+{"version":3,"file":"button-group.js","names":[],"sources":["../src/inputs/button-group/button-group.ts"],"sourcesContent":["import { define, createContext, html, provide, type ReadonlySignal } from '@vielzeug/craftit';\n\nimport type { ComponentSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { type PropBundle, sizableBundle, themableBundle } from '../shared/bundles';\nimport styles from './button-group.css?inline';\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\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 = define<BitButtonGroupProps>('bit-button-group', {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    attached: false,\n    fullwidth: false,\n    label: undefined,\n    orientation: undefined,\n    variant: undefined,\n  } satisfies PropBundle<BitButtonGroupProps>,\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 ?? null}\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [styles],\n});\n"],"mappings":";;;;AAcA,IAAa,IAAmB,EAAkC,qBAAqB,EA4C1E,IAAmB,EAA4B,oBAAoB;CAC9E,OAAO;EACL,GAAG;EACH,GAAG;EACH,UAAU;EACV,WAAW;EACX,OAAO,KAAA;EACP,aAAa,KAAA;EACb,SAAS,KAAA;EACV;CACD,MAAM,EAAE,YAAS;AAOf,SANA,EAAQ,GAAkB;GACxB,OAAO,EAAM;GACb,MAAM,EAAM;GACZ,SAAS,EAAM;GAChB,CAAC,EAEK,CAAI;+EACgE,EAAM,SAAS,KAAK;;;;;CAKjG,QAAQ,CAAC,EAAO;CACjB,CAAC"}

package/dist/button.cjs

@@ -1,30 +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
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./packages/craftit/src/directives/when.cjs`);require(`./packages/craftit/src/directives/index.cjs`);const t=require(`./inputs/shared/bundles.cjs`),n=require(`./styles/mixins/shape.css.cjs`),r=require(`./styles/mixins/states.css.cjs`),i=require(`./styles/mixins/theme.css.cjs`),a=require(`./styles/mixins/animation.css.cjs`),o=require(`./styles/mixins/variants.css.cjs`),s=require(`./styles/index.cjs`),c=require(`./button-group.cjs`),l=require(`./inputs/button/button.css?inline.cjs`);let u=require(`@vielzeug/craftit`);var d=(0,u.define)(`bit-button`,{formAssociated:!0,props:{...t.themableBundle,...t.sizableBundle,...t.disablableBundle,...t.loadableBundle,...t.roundableBundle,fullwidth:!1,href:void 0,iconOnly:!1,label:void 0,rainbow:!1,rel:void 0,target:void 0,type:`button`,variant:`solid`},setup({host:t,props:n}){(0,u.syncContextProps)((0,u.inject)(c.BUTTON_GROUP_CTX,void 0),n,[`color`,`size`,`variant`]);let r=(0,u.computed)(()=>!!n.href.value),i=()=>!!(n.disabled.value||n.loading.value),a=(0,u.defineField)({disabled:(0,u.computed)(i),toFormValue:()=>null,value:(0,u.computed)(()=>``)}),o=e=>{if(i()){e.preventDefault(),e.stopImmediatePropagation();return}if(r.value)return;let o=a.internals.form;o&&(n.type.value===`submit`?(e.preventDefault(),o.requestSubmit()):n.type.value===`reset`&&(e.preventDefault(),o.reset())),e.composedPath().includes(t.el)||u.fire.mouse(t.el,e.type,e)};return u.html`
+      ${e.when({condition:r,else:()=>u.html`<button
             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>
+            type="button"
+            ?disabled=${()=>i()}
+            :aria-label="${()=>n.label.value??null}"
+            :aria-disabled="${()=>i()?`true`:null}"
+            :aria-busy="${()=>n.loading.value?`true`:null}"
+            @click="${o}">
+            <span class="loader" part="loader" aria-label="Loading" ?hidden=${()=>!n.loading.value}></span>
             <slot name="prefix"></slot>
             <span class="content" part="content"><slot></slot></span>
             <slot name="suffix"></slot>
-          </a>`,()=>l.html`<button
+          </button>`,then:()=>u.html`<a
             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>
+            :href="${()=>n.href.value??null}"
+            :target="${()=>n.target.value??null}"
+            :rel="${()=>n.rel.value??null}"
+            :aria-label="${()=>n.label.value??null}"
+            :aria-disabled="${()=>i()?`true`:null}"
+            :aria-busy="${()=>n.loading.value?`true`:null}"
+            role="button"
+            @click="${o}">
+            <span class="loader" part="loader" aria-label="Loading" ?hidden=${()=>!n.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;
+          </a>`})}
+    `},shadow:{delegatesFocus:!0},styles:[...s.formFieldMixins,i.forcedColorsMixin,n.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)`}}),o.frostVariantMixin(`button`),a.rainbowEffectMixin(`button`),r.disabledLoadingMixin(`button`),l.default]});exports.BUTTON_TAG=d;
 //# sourceMappingURL=button.cjs.map

package/dist/button.cjs.map

@@ -1 +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"}
+{"version":3,"file":"button.cjs","names":[],"sources":["../src/inputs/button/button.ts"],"sourcesContent":["import { define, computed, 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 {\n  disablableBundle,\n  loadableBundle,\n  type PropBundle,\n  roundableBundle,\n  sizableBundle,\n  themableBundle,\n} from '../shared/bundles';\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 = define<BitButtonProps>('bit-button', {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...loadableBundle,\n    ...roundableBundle,\n    fullwidth: false,\n    href: undefined,\n    iconOnly: false,\n    label: undefined,\n    rainbow: false,\n    rel: undefined,\n    target: undefined,\n    type: 'button',\n    variant: 'solid',\n  } satisfies PropBundle<BitButtonProps>,\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 isLink = computed(() => !!props.href.value);\n    const isDisabled = (): boolean => !!(props.disabled.value || props.loading.value);\n\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: computed(isDisabled),\n      toFormValue: () => null,\n      value: computed(() => ''),\n    });\n\n    // Unified click handler for both links and buttons.\n    // Forward only when native click didn't traverse to host (jsdom/shadow interop).\n    const handleClick = (e: MouseEvent) => {\n      if (isDisabled()) {\n        e.preventDefault();\n        e.stopImmediatePropagation();\n\n        return;\n      }\n\n      // If it's a form button, handle submit/reset\n      if (isLink.value) return;\n\n      const form = formField.internals.form;\n\n      if (form) {\n        if (props.type.value === 'submit') {\n          e.preventDefault();\n          form.requestSubmit();\n        } else if (props.type.value === 'reset') {\n          e.preventDefault();\n          form.reset();\n        }\n      }\n\n      const path = e.composedPath();\n      const reachedHost = path.includes(host.el);\n\n      if (!reachedHost) {\n        fire.mouse(host.el, e.type, e);\n      }\n    };\n\n    return html`\n      ${when({\n        condition: isLink,\n        else: () =>\n          html`<button\n            part=\"button\"\n            type=\"button\"\n            ?disabled=${() => isDisabled()}\n            :aria-label=\"${() => props.label.value ?? null}\"\n            :aria-disabled=\"${() => (isDisabled() ? 'true' : null)}\"\n            :aria-busy=\"${() => (props.loading.value ? 'true' : null)}\"\n            @click=\"${handleClick}\">\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        then: () =>\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() ? 'true' : null)}\"\n            :aria-busy=\"${() => (props.loading.value ? 'true' : null)}\"\n            role=\"button\"\n            @click=\"${handleClick}\">\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    `;\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});\n"],"mappings":"4lBAiGA,IAAa,GAAA,EAAA,EAAA,QAAoC,aAAc,CAC7D,eAAgB,GAChB,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,cACH,GAAG,EAAA,iBACH,GAAG,EAAA,eACH,GAAG,EAAA,gBACH,UAAW,GACX,KAAM,IAAA,GACN,SAAU,GACV,MAAO,IAAA,GACP,QAAS,GACT,IAAK,IAAA,GACL,OAAQ,IAAA,GACR,KAAM,SACN,QAAS,QACV,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,cAAwB,CAAC,CAAC,EAAM,KAAK,MAAM,CAC3C,MAA4B,CAAC,EAAE,EAAM,SAAS,OAAS,EAAM,QAAQ,OAIrE,GAAA,EAAA,EAAA,aAAwB,CAC5B,UAAA,EAAA,EAAA,UAAmB,EAAW,CAC9B,gBAAmB,KACnB,OAAA,EAAA,EAAA,cAAsB,GAAG,CAC1B,CAAC,CAII,EAAe,GAAkB,CACrC,GAAI,GAAY,CAAE,CAChB,EAAE,gBAAgB,CAClB,EAAE,0BAA0B,CAE5B,OAIF,GAAI,EAAO,MAAO,OAElB,IAAM,EAAO,EAAU,UAAU,KAE7B,IACE,EAAM,KAAK,QAAU,UACvB,EAAE,gBAAgB,CAClB,EAAK,eAAe,EACX,EAAM,KAAK,QAAU,UAC9B,EAAE,gBAAgB,CAClB,EAAK,OAAO,GAIH,EAAE,cAAc,CACJ,SAAS,EAAK,GAAG,EAGxC,EAAA,KAAK,MAAM,EAAK,GAAI,EAAE,KAAM,EAAE,EAIlC,MAAO,GAAA,IAAI;QACP,EAAA,KAAK,CACL,UAAW,EACX,SACE,EAAA,IAAI;;;4BAGgB,GAAY,CAAC;+BACV,EAAM,MAAM,OAAS,KAAK;kCACtB,GAAY,CAAG,OAAS,KAAM;8BAClC,EAAM,QAAQ,MAAQ,OAAS,KAAM;sBAChD,EAAY;kFACkD,CAAC,EAAM,QAAQ,MAAM;;;;qBAKjG,SACE,EAAA,IAAI;;yBAEa,EAAM,KAAK,OAAS,KAAK;2BACvB,EAAM,OAAO,OAAS,KAAK;wBAC9B,EAAM,IAAI,OAAS,KAAK;+BACjB,EAAM,MAAM,OAAS,KAAK;kCACtB,GAAY,CAAG,OAAS,KAAM;8BAClC,EAAM,QAAQ,MAAQ,OAAS,KAAM;;sBAEhD,EAAY;kFACkD,CAAC,EAAM,QAAQ,MAAM;;;;gBAKlG,CAAC,CAAC;OAGP,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,CACF,CAAC"}

package/dist/button.js

@@ -1,90 +1,92 @@
-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";
+import { when as e } from "./packages/craftit/src/directives/when.js";
+import "./packages/craftit/src/directives/index.js";
+import { disablableBundle as t, loadableBundle as n, roundableBundle as r, sizableBundle as i, themableBundle as a } from "./inputs/shared/bundles.js";
+import { sizeVariantMixin as o } from "./styles/mixins/shape.css.js";
+import { disabledLoadingMixin as s } from "./styles/mixins/states.css.js";
+import { forcedColorsMixin as c } from "./styles/mixins/theme.css.js";
+import { rainbowEffectMixin as l } from "./styles/mixins/animation.css.js";
+import { frostVariantMixin as u } from "./styles/mixins/variants.css.js";
+import { formFieldMixins as d } from "./styles/index.js";
+import { BUTTON_GROUP_CTX as f } from "./button-group.js";
+import p from "./inputs/button/button.css?inline.js";
+import { computed as m, define as h, defineField as g, fire as _, html as v, inject as y, syncContextProps as b } from "@vielzeug/craftit";
 //#region src/inputs/button/button.ts
-var g = u({
+var x = h("bit-button", {
 	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" }
+		...a,
+		...i,
+		...t,
+		...n,
+		...r,
+		fullwidth: !1,
+		href: void 0,
+		iconOnly: !1,
+		label: void 0,
+		rainbow: !1,
+		rel: void 0,
+		target: void 0,
+		type: "button",
+		variant: "solid"
 	},
-	setup({ host: e, props: t }) {
-		h(m(s, void 0), t, [
+	setup({ host: t, props: n }) {
+		b(y(f, void 0), n, [
 			"color",
 			"size",
 			"variant"
 		]);
-		let n = l(() => t.disabled.value || t.loading.value || !1), r = l(() => !!t.href.value), i = d({
-			disabled: n,
+		let r = m(() => !!n.href.value), i = () => !!(n.disabled.value || n.loading.value), a = g({
+			disabled: m(i),
 			toFormValue: () => null,
-			value: l(() => "")
-		}), a = (t) => {
-			if (n.value) {
-				t.preventDefault(), t.stopPropagation();
+			value: m(() => "")
+		}), o = (e) => {
+			if (i()) {
+				e.preventDefault(), e.stopImmediatePropagation();
 				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);
+			if (r.value) return;
+			let o = a.internals.form;
+			o && (n.type.value === "submit" ? (e.preventDefault(), o.requestSubmit()) : n.type.value === "reset" && (e.preventDefault(), o.reset())), e.composedPath().includes(t.el) || _.mouse(t.el, e.type, e);
 		};
-		return p`
-      ${o(r, () => p`<a
+		return v`
+      ${e({
+			condition: r,
+			else: () => v`<button
             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>
+            type="button"
+            ?disabled=${() => i()}
+            :aria-label="${() => n.label.value ?? null}"
+            :aria-disabled="${() => i() ? "true" : null}"
+            :aria-busy="${() => n.loading.value ? "true" : null}"
+            @click="${o}">
+            <span class="loader" part="loader" aria-label="Loading" ?hidden=${() => !n.loading.value}></span>
             <slot name="prefix"></slot>
             <span class="content" part="content"><slot></slot></span>
             <slot name="suffix"></slot>
-          </a>`, () => p`<button
+          </button>`,
+			then: () => v`<a
             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>
+            :href="${() => n.href.value ?? null}"
+            :target="${() => n.target.value ?? null}"
+            :rel="${() => n.rel.value ?? null}"
+            :aria-label="${() => n.label.value ?? null}"
+            :aria-disabled="${() => i() ? "true" : null}"
+            :aria-busy="${() => n.loading.value ? "true" : null}"
+            role="button"
+            @click="${o}">
+            <span class="loader" part="loader" aria-label="Loading" ?hidden=${() => !n.loading.value}></span>
             <slot name="prefix"></slot>
             <span class="content" part="content"><slot></slot></span>
             <slot name="suffix"></slot>
-          </button>`)}
+          </a>`
+		})}
     `;
 	},
 	shadow: { delegatesFocus: !0 },
 	styles: [
-		...a,
-		n,
-		e({
+		...d,
+		c,
+		o({
 			lg: {
 				fontSize: "var(--text-base)",
 				gap: "var(--size-2-5)",
@@ -102,14 +104,13 @@ var g = u({
 				padding: "var(--size-1-5) var(--size-3)"
 			}
 		}),
-		i("button"),
-		r("button"),
-		t("button"),
-		c
-	],
-	tag: "bit-button"
+		u("button"),
+		l("button"),
+		s("button"),
+		p
+	]
 });
 //#endregion
-export { g as BUTTON_TAG };
+export { x as BUTTON_TAG };
 
 //# sourceMappingURL=button.js.map

package/dist/button.js.map

@@ -1 +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"}
+{"version":3,"file":"button.js","names":[],"sources":["../src/inputs/button/button.ts"],"sourcesContent":["import { define, computed, 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 {\n  disablableBundle,\n  loadableBundle,\n  type PropBundle,\n  roundableBundle,\n  sizableBundle,\n  themableBundle,\n} from '../shared/bundles';\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 = define<BitButtonProps>('bit-button', {\n  formAssociated: true,\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...disablableBundle,\n    ...loadableBundle,\n    ...roundableBundle,\n    fullwidth: false,\n    href: undefined,\n    iconOnly: false,\n    label: undefined,\n    rainbow: false,\n    rel: undefined,\n    target: undefined,\n    type: 'button',\n    variant: 'solid',\n  } satisfies PropBundle<BitButtonProps>,\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 isLink = computed(() => !!props.href.value);\n    const isDisabled = (): boolean => !!(props.disabled.value || props.loading.value);\n\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: computed(isDisabled),\n      toFormValue: () => null,\n      value: computed(() => ''),\n    });\n\n    // Unified click handler for both links and buttons.\n    // Forward only when native click didn't traverse to host (jsdom/shadow interop).\n    const handleClick = (e: MouseEvent) => {\n      if (isDisabled()) {\n        e.preventDefault();\n        e.stopImmediatePropagation();\n\n        return;\n      }\n\n      // If it's a form button, handle submit/reset\n      if (isLink.value) return;\n\n      const form = formField.internals.form;\n\n      if (form) {\n        if (props.type.value === 'submit') {\n          e.preventDefault();\n          form.requestSubmit();\n        } else if (props.type.value === 'reset') {\n          e.preventDefault();\n          form.reset();\n        }\n      }\n\n      const path = e.composedPath();\n      const reachedHost = path.includes(host.el);\n\n      if (!reachedHost) {\n        fire.mouse(host.el, e.type, e);\n      }\n    };\n\n    return html`\n      ${when({\n        condition: isLink,\n        else: () =>\n          html`<button\n            part=\"button\"\n            type=\"button\"\n            ?disabled=${() => isDisabled()}\n            :aria-label=\"${() => props.label.value ?? null}\"\n            :aria-disabled=\"${() => (isDisabled() ? 'true' : null)}\"\n            :aria-busy=\"${() => (props.loading.value ? 'true' : null)}\"\n            @click=\"${handleClick}\">\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        then: () =>\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() ? 'true' : null)}\"\n            :aria-busy=\"${() => (props.loading.value ? 'true' : null)}\"\n            role=\"button\"\n            @click=\"${handleClick}\">\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    `;\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});\n"],"mappings":";;;;;;;;;;;;;AAiGA,IAAa,IAAa,EAAuB,cAAc;CAC7D,gBAAgB;CAChB,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,GAAG;EACH,WAAW;EACX,MAAM,KAAA;EACN,UAAU;EACV,OAAO,KAAA;EACP,SAAS;EACT,KAAK,KAAA;EACL,QAAQ,KAAA;EACR,MAAM;EACN,SAAS;EACV;CACD,MAAM,EAAE,SAAM,YAAS;AAErB,IAAiB,EAAO,GAAkB,KAAA,EAAU,EAAE,GAAO;GAAC;GAAS;GAAQ;GAAU,CAAC;EAE1F,IAAM,IAAS,QAAe,CAAC,CAAC,EAAM,KAAK,MAAM,EAC3C,UAA4B,CAAC,EAAE,EAAM,SAAS,SAAS,EAAM,QAAQ,QAIrE,IAAY,EAAY;GAC5B,UAAU,EAAS,EAAW;GAC9B,mBAAmB;GACnB,OAAO,QAAe,GAAG;GAC1B,CAAC,EAII,KAAe,MAAkB;AACrC,OAAI,GAAY,EAAE;AAEhB,IADA,EAAE,gBAAgB,EAClB,EAAE,0BAA0B;AAE5B;;AAIF,OAAI,EAAO,MAAO;GAElB,IAAM,IAAO,EAAU,UAAU;AAejC,GAbI,MACE,EAAM,KAAK,UAAU,YACvB,EAAE,gBAAgB,EAClB,EAAK,eAAe,IACX,EAAM,KAAK,UAAU,YAC9B,EAAE,gBAAgB,EAClB,EAAK,OAAO,IAIH,EAAE,cAAc,CACJ,SAAS,EAAK,GAAG,IAGxC,EAAK,MAAM,EAAK,IAAI,EAAE,MAAM,EAAE;;AAIlC,SAAO,CAAI;QACP,EAAK;GACL,WAAW;GACX,YACE,CAAI;;;8BAGgB,GAAY,CAAC;iCACV,EAAM,MAAM,SAAS,KAAK;oCACtB,GAAY,GAAG,SAAS,KAAM;gCAClC,EAAM,QAAQ,QAAQ,SAAS,KAAM;sBAChD,EAAY;oFACkD,CAAC,EAAM,QAAQ,MAAM;;;;;GAKjG,YACE,CAAI;;2BAEa,EAAM,KAAK,SAAS,KAAK;6BACvB,EAAM,OAAO,SAAS,KAAK;0BAC9B,EAAM,IAAI,SAAS,KAAK;iCACjB,EAAM,MAAM,SAAS,KAAK;oCACtB,GAAY,GAAG,SAAS,KAAM;gCAClC,EAAM,QAAQ,QAAQ,SAAS,KAAM;;sBAEhD,EAAY;oFACkD,CAAC,EAAM,QAAQ,MAAM;;;;;GAKlG,CAAC,CAAC;;;CAGP,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;CACF,CAAC"}

package/dist/card.cjs

@@ -1,23 +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`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./inputs/shared/bundles.cjs`),t=require(`./styles/mixins/accessibility.css.cjs`),n=require(`./styles/mixins/variants.css.cjs`),r=require(`./styles/index.cjs`),i=require(`./packages/craftit/dist/controls/press-control.cjs`);require(`./packages/craftit/dist/controls.cjs`);const a=require(`./content/card/card.css?inline.cjs`);let o=require(`@vielzeug/craftit`);var s=`button, a[href], input, select, textarea, summary, [role="button"], [role="link"], [contenteditable=""], [contenteditable="true"]`;function c(e,t){for(let n of t.composedPath())if(n instanceof HTMLElement){if(n===e)return!1;if(n.matches(s)||n.closest(s))return!0}return!1}var l=(0,o.define)(`bit-card`,{props:{...e.themableBundle,...e.disablableBundle,...e.loadableBundle,elevation:void 0,interactive:!1,orientation:void 0,padding:void 0,variant:void 0},setup({emit:e,host:t,props:n,slots:r}){t.bind(`attr`,{ariaBusy:()=>n.loading.value?`true`:`false`,ariaDisabled:()=>n.interactive.value?String(n.disabled.value):null,role:()=>n.interactive.value?`button`:null}),(0,o.effect)(()=>{n.interactive.value?t.el.setAttribute(`tabindex`,n.disabled.value?`-1`:`0`):t.el.removeAttribute(`tabindex`)});let a=i.t({disabled:()=>!n.interactive.value||!!n.disabled.value,onPress:(t,n)=>{e(`activate`,{originalEvent:t,trigger:n})}}),s=e=>{!n.interactive.value||n.disabled.value||c(t.el,e)||a.handleClick(e)},l=e=>{a.handleKeydown(e)};return t.bind(`on`,{click:e=>s(e),keydown:e=>l(e)}),o.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 class="card-media" part="media" ?hidden="${()=>!r.has(`media`).value}">
+          <slot 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 class="card-header" part="header" ?hidden="${()=>!r.has(`header`).value}">
+            <slot name="header"></slot>
           </div>
-          <div class="card-content" part="content" ?hidden="${()=>!p.value}">
-            <slot ref=${c}></slot>
+          <div class="card-content" part="content" ?hidden="${()=>!r.has().value}">
+            <slot></slot>
           </div>
-          <div class="card-footer" part="footer" ?hidden="${()=>!m.value}">
-            <slot ref=${l} name="footer"></slot>
+          <div class="card-footer" part="footer" ?hidden="${()=>!r.has(`footer`).value}">
+            <slot name="footer"></slot>
           </div>
-          <div class="card-actions" part="actions" ?hidden="${()=>!h.value}">
-            <slot ref=${u} name="actions"></slot>
+          <div class="card-actions" part="actions" ?hidden="${()=>!r.has(`actions`).value}">
+            <slot name="actions"></slot>
           </div>
         </div>
       </div>
-    `},styles:[...n.surfaceMixins,t.frostVariantMixin(`.card`),e.reducedMotionMixin,r.default],tag:`bit-card`});exports.CARD_TAG=c;
+    `},styles:[...r.surfaceMixins,n.frostVariantMixin(`.card`),t.reducedMotionMixin,a.default]});exports.CARD_TAG=l;
 //# sourceMappingURL=card.cjs.map

package/dist/card.cjs.map

@@ -1 +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":"6RAMA,IAAM,EACJ,oIAEF,SAAS,EAAyB,EAAmD,CAGnF,OAFK,EAEE,EAAK,cAAc,CAAE,QAAS,GAAM,CAAC,CAAC,KAAM,GAC7C,EAAK,WAAa,KAAK,aAAqB,GAE5C,EAAK,WAAa,KAAK,UAAkB,CAAC,CAAC,EAAK,aAAa,MAAM,CAEhE,GACP,CARgB,GAWpB,SAAS,EAA0B,EAAmB,EAAuB,CAC3E,IAAK,IAAM,KAAQ,EAAM,cAAc,CAC/B,gBAAgB,YAEtB,IAAI,IAAS,EAAM,MAAO,GAE1B,GAAI,EAAK,QAAQ,EAAgC,EAAM,EAAK,QAAQ,EAAgC,CAClG,MAAO,GAIX,MAAO,GAoET,IAAa,GAAA,EAAA,EAAA,iBAAwD,CACnE,MAAO,CACL,MAAO,CAAE,QAAS,IAAA,GAAW,CAC7B,SAAU,CAAE,QAAS,GAAO,KAAM,QAAS,CAC3C,UAAW,CAAE,QAAS,IAAA,GAAW,CACjC,YAAa,CAAE,QAAS,GAAO,KAAM,QAAS,CAC9C,QAAS,CAAE,QAAS,GAAO,KAAM,QAAS,CAC1C,YAAa,CAAE,QAAS,IAAA,GAAW,CACnC,QAAS,CAAE,QAAS,IAAA,GAAW,CAC/B,QAAS,CAAE,QAAS,IAAA,GAAW,CAChC,CACD,MAAM,CAAE,OAAM,OAAM,SAAS,CAC3B,IAAM,GAAA,EAAA,EAAA,MAAkC,CAClC,GAAA,EAAA,EAAA,MAAmC,CACnC,GAAA,EAAA,EAAA,MAAoC,CACpC,GAAA,EAAA,EAAA,MAAmC,CACnC,GAAA,EAAA,EAAA,MAAoC,CACpC,GAAA,EAAA,EAAA,QAAkB,GAAM,CACxB,GAAA,EAAA,EAAA,QAAmB,GAAM,CACzB,GAAA,EAAA,EAAA,QAAoB,GAAM,CAC1B,GAAA,EAAA,EAAA,QAAmB,GAAM,CACzB,GAAA,EAAA,EAAA,QAAoB,GAAM,CAEhC,SAAS,GAAkB,CACzB,EAAS,MAAQ,EAAyB,EAAU,MAAM,CAC1D,EAAU,MAAQ,EAAyB,EAAW,MAAM,CAC5D,EAAW,MAAQ,EAAyB,EAAY,MAAM,CAC9D,EAAU,MAAQ,EAAyB,EAAW,MAAM,CAC5D,EAAW,MAAQ,EAAyB,EAAY,MAAM,CA8ChE,OA5CA,EAAA,EAAA,aAAc,EACZ,EAAA,EAAA,cAAa,QAAS,EAAgB,EACtC,EAAA,EAAA,cAAa,SAAU,EAAgB,EACvC,EAAA,EAAA,cAAa,UAAW,EAAgB,EACxC,EAAA,EAAA,cAAa,SAAU,EAAgB,EACvC,EAAA,EAAA,cAAa,UAAW,EAAgB,EACxC,EACF,EAAA,EAAA,OACE,CAAC,EAAM,YAAa,EAAM,SAAU,EAAM,QAAS,EAAM,QAAS,EAAM,MAAO,EAAM,QAAS,EAAM,YAAY,KAC1G,CACA,EAAM,YAAY,OACpB,EAAK,aAAa,OAAQ,SAAS,CACnC,EAAK,aAAa,WAAY,EAAM,SAAS,MAAQ,KAAO,IAAI,CAChE,EAAK,aAAa,gBAAiB,OAAO,EAAM,SAAS,MAAM,CAAC,GAEhE,EAAK,gBAAgB,OAAO,CAC5B,EAAK,gBAAgB,WAAW,CAChC,EAAK,gBAAgB,gBAAgB,EAGvC,EAAK,aAAa,YAAa,EAAM,QAAQ,MAAQ,OAAS,QAAQ,EAExE,CAAE,UAAW,GAAM,CACpB,EAkBD,EAAA,EAAA,QAAO,EAAM,QAhBQ,GAAkB,CACjC,CAAC,EAAM,YAAY,OAAS,EAAM,SAAS,OAE3C,EAA0B,EAAM,EAAE,EAEtC,EAAK,WAAY,CAAE,cAAe,EAAG,QAAS,UAAW,CAAC,EAW1B,EAClC,EAAA,EAAA,QAAO,EAAM,UAVU,GAAqB,CACtC,CAAC,EAAM,YAAY,OAAS,EAAM,SAAS,QAE3C,EAAE,MAAQ,SAAW,EAAE,MAAQ,OACjC,EAAE,gBAAgB,CAClB,EAAK,WAAY,CAAE,cAAe,EAAG,QAAS,WAAY,CAAC,GAKzB,CAE/B,EAAA,IAAI;;;4DAG+C,CAAC,EAAS,MAAM;sBACxD,EAAU;;;gEAGkC,CAAC,EAAU,MAAM;wBAC3D,EAAW;;kEAEiC,CAAC,EAAW,MAAM;wBAC9D,EAAY;;gEAE8B,CAAC,EAAU,MAAM;wBAC3D,EAAW;;kEAEiC,CAAC,EAAW,MAAM;wBAC9D,EAAY;;;;OAMlC,OAAQ,CAAC,GAAG,EAAA,cAAe,EAAA,kBAAkB,QAAQ,CAAE,EAAA,mBAAoB,EAAA,QAAgB,CAC3F,IAAK,WACN,CAAC"}
+{"version":3,"file":"card.cjs","names":[],"sources":["../src/content/card/card.ts"],"sourcesContent":["import { define, effect, html } from '@vielzeug/craftit';\nimport { createPressControl } from '@vielzeug/craftit/controls';\n\nimport type { ElevationLevel, PaddingSize, ThemeColor } from '../../types';\n\nimport { disablableBundle, loadableBundle, type PropBundle, themableBundle } from '../../inputs/shared/bundles';\nimport { frostVariantMixin, reducedMotionMixin, surfaceMixins } from '../../styles';\nimport componentStyles from './card.css?inline';\n\nconst INTERACTIVE_DESCENDANT_SELECTOR =\n  'button, a[href], input, select, textarea, summary, [role=\"button\"], [role=\"link\"], [contenteditable=\"\"], [contenteditable=\"true\"]';\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\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 = define<BitCardProps, BitCardEvents>('bit-card', {\n  props: {\n    ...themableBundle,\n    ...disablableBundle,\n    ...loadableBundle,\n    elevation: undefined,\n    interactive: false,\n    orientation: undefined,\n    padding: undefined,\n    variant: undefined,\n  } satisfies PropBundle<BitCardProps>,\n  setup({ emit, host, props, slots }) {\n    host.bind('attr', {\n      ariaBusy: () => (props.loading.value ? 'true' : 'false'),\n      ariaDisabled: () => (props.interactive.value ? String(props.disabled.value) : null),\n      role: () => (props.interactive.value ? 'button' : null),\n    });\n\n    effect(() => {\n      if (props.interactive.value) {\n        host.el.setAttribute('tabindex', props.disabled.value ? '-1' : '0');\n      } else {\n        host.el.removeAttribute('tabindex');\n      }\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Event Handlers\n    // ────────────────────────────────────────────────────────────────\n\n    const pressControl = createPressControl({\n      disabled: () => !props.interactive.value || Boolean(props.disabled.value),\n      onPress: (originalEvent, trigger) => {\n        emit('activate', { originalEvent, trigger });\n      },\n    });\n\n    const handleClick = (e: MouseEvent) => {\n      if (!props.interactive.value || props.disabled.value) return;\n\n      if (isNestedInteractiveTarget(host.el, e)) return;\n\n      pressControl.handleClick(e);\n    };\n\n    const handleKeydown = (e: KeyboardEvent) => {\n      pressControl.handleKeydown(e);\n    };\n\n    host.bind('on', {\n      click: (e) => handleClick(e),\n      keydown: (e) => handleKeydown(e),\n    });\n\n    // ────────────────────────────────────────────────────────────────\n    // Template\n    // ────────────────────────────────────────────────────────────────\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=\"${() => !slots.has('media').value}\">\n          <slot name=\"media\"></slot>\n        </div>\n        <div class=\"card-body\" part=\"body\">\n          <div class=\"card-header\" part=\"header\" ?hidden=\"${() => !slots.has('header').value}\">\n            <slot name=\"header\"></slot>\n          </div>\n          <div class=\"card-content\" part=\"content\" ?hidden=\"${() => !slots.has().value}\">\n            <slot></slot>\n          </div>\n          <div class=\"card-footer\" part=\"footer\" ?hidden=\"${() => !slots.has('footer').value}\">\n            <slot name=\"footer\"></slot>\n          </div>\n          <div class=\"card-actions\" part=\"actions\" ?hidden=\"${() => !slots.has('actions').value}\">\n            <slot name=\"actions\"></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  },\n  styles: [...surfaceMixins, frostVariantMixin('.card'), reducedMotionMixin, componentStyles],\n});\n"],"mappings":"4bASA,IAAM,EACJ,oIAEF,SAAS,EAA0B,EAAmB,EAAuB,CAC3E,IAAK,IAAM,KAAQ,EAAM,cAAc,CAC/B,gBAAgB,YAEtB,IAAI,IAAS,EAAM,MAAO,GAE1B,GAAI,EAAK,QAAQ,EAAgC,EAAM,EAAK,QAAQ,EAAgC,CAClG,MAAO,GAIX,MAAO,GAkET,IAAa,GAAA,EAAA,EAAA,QAA+C,WAAY,CACtE,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,iBACH,GAAG,EAAA,eACH,UAAW,IAAA,GACX,YAAa,GACb,YAAa,IAAA,GACb,QAAS,IAAA,GACT,QAAS,IAAA,GACV,CACD,MAAM,CAAE,OAAM,OAAM,QAAO,SAAS,CAClC,EAAK,KAAK,OAAQ,CAChB,aAAiB,EAAM,QAAQ,MAAQ,OAAS,QAChD,iBAAqB,EAAM,YAAY,MAAQ,OAAO,EAAM,SAAS,MAAM,CAAG,KAC9E,SAAa,EAAM,YAAY,MAAQ,SAAW,KACnD,CAAC,EAEF,EAAA,EAAA,YAAa,CACP,EAAM,YAAY,MACpB,EAAK,GAAG,aAAa,WAAY,EAAM,SAAS,MAAQ,KAAO,IAAI,CAEnE,EAAK,GAAG,gBAAgB,WAAW,EAErC,CAMF,IAAM,EAAe,EAAA,EAAmB,CACtC,aAAgB,CAAC,EAAM,YAAY,OAAS,EAAQ,EAAM,SAAS,MACnE,SAAU,EAAe,IAAY,CACnC,EAAK,WAAY,CAAE,gBAAe,UAAS,CAAC,EAE/C,CAAC,CAEI,EAAe,GAAkB,CACjC,CAAC,EAAM,YAAY,OAAS,EAAM,SAAS,OAE3C,EAA0B,EAAK,GAAI,EAAE,EAEzC,EAAa,YAAY,EAAE,EAGvB,EAAiB,GAAqB,CAC1C,EAAa,cAAc,EAAE,EAY/B,OATA,EAAK,KAAK,KAAM,CACd,MAAQ,GAAM,EAAY,EAAE,CAC5B,QAAU,GAAM,EAAc,EAAE,CACjC,CAAC,CAMK,EAAA,IAAI;;;4DAG+C,CAAC,EAAM,IAAI,QAAQ,CAAC,MAAM;;;;gEAItB,CAAC,EAAM,IAAI,SAAS,CAAC,MAAM;;;kEAGzB,CAAC,EAAM,KAAK,CAAC,MAAM;;;gEAGrB,CAAC,EAAM,IAAI,SAAS,CAAC,MAAM;;;kEAGzB,CAAC,EAAM,IAAI,UAAU,CAAC,MAAM;;;;;OAO9F,OAAQ,CAAC,GAAG,EAAA,cAAe,EAAA,kBAAkB,QAAQ,CAAE,EAAA,mBAAoB,EAAA,QAAgB,CAC5F,CAAC"}