@vielzeug/buildit 2.0.0

package/README.md

@@ -0,0 +1,124 @@
+# @vielzeug/buildit
+
+> Accessible, themeable web components built with Craftit for apps that want framework-agnostic UI primitives.
+
+[![npm version](https://img.shields.io/npm/v/@vielzeug/buildit)](https://www.npmjs.com/package/@vielzeug/buildit) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+**Buildit** is the Vielzeug component library. It ships accessible custom elements for inputs, content, overlays, layout, and feedback — all built on top of `@vielzeug/craftit`, styled with CSS custom properties, and published as side-effect entry points for explicit runtime registration.
+
+## Installation
+
+```sh
+pnpm add @vielzeug/buildit
+# npm install @vielzeug/buildit
+# yarn add @vielzeug/buildit
+```
+
+## Quick Start
+
+```ts
+// Required once: design tokens + base component styles
+import '@vielzeug/buildit/styles';
+
+// Register only the components you use
+import '@vielzeug/buildit/button';
+import '@vielzeug/buildit/card';
+import '@vielzeug/buildit/input';
+```
+
+```html
+<bit-button variant="solid" color="primary">Save</bit-button>
+
+<bit-input label="Email" type="email" required></bit-input>
+
+<bit-card padding="lg">
+  <span slot="header">Account</span>
+  <p>Build forms, layouts, overlays, and feedback UI with native custom elements.</p>
+</bit-card>
+```
+
+To register everything at once:
+
+```ts
+import '@vielzeug/buildit/styles';
+import '@vielzeug/buildit';
+```
+
+## Features
+
+- ✅ **Framework-agnostic custom elements** — works with vanilla DOM, React, Vue, Svelte, Angular, and SSR-friendly client hydration flows
+- ✅ **Accessible by default** — keyboard navigation, ARIA wiring, focus management, and form-associated controls
+- ✅ **Granular runtime imports** — register only the elements you need via subpath imports like `@vielzeug/buildit/button`
+- ✅ **Design-token based styling** — global styles plus CSS custom properties for local overrides
+- ✅ **Domain-organized package surface** — inputs, content, disclosure, feedback, layout, and overlay primitives
+- ✅ **Published subpaths** — components, `styles`, and shared `types` are exposed directly
+
+## Package Structure
+
+### Global entry points
+
+| Import | Purpose |
+|---|---|
+| `@vielzeug/buildit` | Register all published components and re-export shared symbols/types |
+| `@vielzeug/buildit/styles` | Global design tokens and shared component styles |
+| `@vielzeug/buildit/types` | Shared TypeScript types |
+
+### Component entry points
+
+**Content**
+
+`avatar`, `breadcrumb`, `card`, `pagination`, `separator`, `table`, `text`
+
+**Disclosure**
+
+`accordion`, `accordion-item`, `tabs`, `tab-item`, `tab-panel`
+
+**Feedback**
+
+`alert`, `badge`, `chip`, `progress`, `skeleton`, `toast`
+
+**Inputs**
+
+`button`, `button-group`, `checkbox`, `checkbox-group`, `combobox`, `file-input`, `form`, `input`, `number-input`, `otp-input`, `radio`, `radio-group`, `rating`, `select`, `slider`, `switch`, `textarea`
+
+**Layout**
+
+`box`, `grid`, `grid-item`, `sidebar`
+
+**Overlay**
+
+`dialog`, `drawer`, `menu`, `popover`, `tooltip`
+
+## Usage Notes
+
+- Import `@vielzeug/buildit/styles` before registering components.
+- Component subpaths are **side-effect imports** that register one published custom element entry point.
+- The root package both **registers all published components** and re-exports tags, types, and shared symbols.
+- Prefer subpath imports for application code when you want tighter control over registration and bundle size.
+- Prefer declarative attributes and slots over manual DOM mutation.
+
+## API Summary
+
+| Area | Notes |
+|---|---|
+| Components | Registered via subpath imports like `@vielzeug/buildit/button` |
+| Styles | `@vielzeug/buildit/styles`, plus `styles/theme.css`, `styles/animation.css`, and `styles/layers.css` |
+| Types | Shared types via `@vielzeug/buildit/types`; component prop types are re-exported from the package root |
+
+## Documentation
+
+Full docs at **[vielzeug.dev/buildit](https://vielzeug.dev/buildit)**
+
+| | |
+|---|---|
+| [Overview](https://vielzeug.dev/buildit/) | Installation, import strategy, component domains |
+| [Usage Guide](https://vielzeug.dev/buildit/usage) | Slots, events, accessibility, and best practices |
+| [Framework Integration](https://vielzeug.dev/buildit/frameworks) | React, Vue, Svelte, Angular, and SSR notes |
+| [Theming](https://vielzeug.dev/buildit/theming) | Tokens, dark mode, and customization |
+| [API Reference](https://vielzeug.dev/buildit/api) | Import paths, component APIs, and styling hooks |
+| [Examples](https://vielzeug.dev/buildit/examples) | Real-world usage patterns |
+
+## License
+
+MIT © [Helmuth Saatkamp](https://github.com/helmuthdu) — Part of the [Vielzeug](https://github.com/helmuthdu/vielzeug) monorepo.
+

package/dist/accordion-item.cjs

@@ -0,0 +1,32 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/accessibility.css.cjs`);require(`./styles/index.cjs`);const t=require(`./accordion.cjs`),n=require(`./disclosure/accordion-item/accordion-item.css?inline.cjs`);let r=require(`@vielzeug/craftit`);var i=(0,r.defineComponent)({props:{disabled:(0,r.typed)(!1),expanded:(0,r.typed)(!1),size:(0,r.typed)(void 0),variant:(0,r.typed)(void 0)},setup({emit:e,host:n,props:i}){(0,r.syncContextProps)((0,r.inject)(t.ACCORDION_CTX,void 0),i,[`size`,`variant`]);let a=`accordion-item-title`,o=(0,r.ref)(),s=(0,r.ref)(),c=()=>{let t=o.value?.open??!1;t&&!n.hasAttribute(`expanded`)?(n.setAttribute(`expanded`,``),e(`expand`,{expanded:!0,item:n})):!t&&n.hasAttribute(`expanded`)&&(n.removeAttribute(`expanded`),e(`collapse`,{expanded:!1,item:n}))};(0,r.onMount)(()=>{let e=o.value,t=s.value;!e||!t||((0,r.watch)(i.expanded,n=>{let r=!!n;e.open=r,t.setAttribute(`aria-expanded`,r?`true`:`false`)},{immediate:!0}),(0,r.handle)(e,`toggle`,c))});let l=(0,r.computed)(()=>i.expanded.value?`true`:`false`),u=(0,r.computed)(()=>i.disabled.value?`true`:`false`);return r.html` <details part="item" ?open=${i.expanded} ref=${o}>
+      <summary part="summary" :aria-expanded=${l} :aria-disabled=${u} ref=${s}>
+        <slot name="prefix"></slot>
+        <div class="header-content" part="header">
+          <span class="title" part="title" id="${a}">
+            <slot name="title"></slot>
+          </span>
+          <span class="subtitle" part="subtitle">
+            <slot name="subtitle"></slot>
+          </span>
+        </div>
+        <slot name="suffix"></slot>
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="chevron"
+          part="chevron"
+          xmlns="http://www.w3.org/2000/svg">
+          <path d="m 14.999979,5.9999793 -5.9999997,5.9999997 5.9999997,6" />
+        </svg>
+      </summary>
+      <div class="content-wrapper" part="content" role="region" aria-labelledby="${a}">
+        <div class="content-inner">
+          <slot></slot>
+        </div>
+      </div>
+    </details>`},styles:[e.coarsePointerMixin,n.default],tag:`bit-accordion-item`});exports.ACCORDION_ITEM_TAG=i;
+//# sourceMappingURL=accordion-item.cjs.map

package/dist/accordion-item.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-item.cjs","names":[],"sources":["../src/disclosure/accordion-item/accordion-item.ts"],"sourcesContent":["import {\n  computed,\n  defineComponent,\n  handle,\n  html,\n  typed,\n  inject,\n  onMount,\n  ref,\n  syncContextProps,\n  watch,\n} from '@vielzeug/craftit';\n\nimport type { ComponentSize, VisualVariant } from '../../types';\n\nimport { coarsePointerMixin } from '../../styles';\nimport { ACCORDION_CTX } from '../accordion/accordion';\nimport styles from './accordion-item.css?inline';\n\n/** Accordion item component properties */\n\nexport type BitAccordionItemEvents = {\n  collapse: { expanded: boolean; item: HTMLElement };\n  expand: { expanded: boolean; item: HTMLElement };\n};\n\nexport type BitAccordionItemProps = {\n  /** Disable accordion item interaction */\n  disabled?: boolean;\n  /** Whether the item is expanded/open */\n  expanded?: boolean;\n  /** Item size */\n  size?: ComponentSize;\n  /** Visual style variant */\n  variant?: VisualVariant;\n};\n\n/**\n * An individual accordion item with expand/collapse functionality using native details/summary.\n *\n * @element bit-accordion-item\n *\n * @attr {boolean} expanded - Whether the item is expanded/open\n * @attr {boolean} disabled - Disable accordion item interaction\n * @attr {string} size - Item size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text' | 'glass' | 'frost'\n *\n * @fires expand - Emitted when item expands\n * @fires collapse - Emitted when item collapses\n *\n * @slot prefix - Content before the title (e.g., icons)\n * @slot title - Main accordion item title\n * @slot subtitle - Optional subtitle text\n * @slot suffix - Content after the title (e.g., badges)\n * @slot - Accordion item content (shown when expanded)\n *\n * @cssprop --accordion-item-bg - Background color\n * @cssprop --accordion-item-border-color - Border color\n * @cssprop --accordion-item-title-color - Title text color\n * @cssprop --accordion-item-subtitle-color - Subtitle text color\n * @cssprop --accordion-item-body-color - Body text color\n * @cssprop --accordion-item-radius - Border radius\n * @cssprop --accordion-item-transition - Transition duration\n * @cssprop --accordion-item-title - Title font size\n * @cssprop --accordion-item-subtitle-size - Subtitle font size\n * @cssprop --accordion-item-body - Body font size\n * @cssprop --accordion-item-details-padding - Summary/header padding\n * @cssprop --accordion-item-summary-padding - Content padding\n *\n * @example\n * ```html\n * <bit-accordion-item><span slot=\"title\">Click to expand</span><p>Content</p></bit-accordion-item>\n * <bit-accordion-item expanded variant=\"bordered\"><span slot=\"title\">Title</span><p>Content</p></bit-accordion-item>\n * ```\n */\n\nexport const ACCORDION_ITEM_TAG = defineComponent<BitAccordionItemProps, BitAccordionItemEvents>({\n  props: {\n    disabled: typed<boolean>(false),\n    expanded: typed<boolean>(false),\n    size: typed<BitAccordionItemProps['size']>(undefined),\n    variant: typed<BitAccordionItemProps['variant']>(undefined),\n  },\n  setup({ emit, host, props }) {\n    // Inherit size/variant from a parent bit-accordion when present.\n    const accordionCtx = inject(ACCORDION_CTX, undefined);\n\n    syncContextProps(accordionCtx, props, ['size', 'variant']);\n\n    const titleId = 'accordion-item-title';\n    const detailsRef = ref<HTMLDetailsElement>();\n    const summaryRef = ref<HTMLElement>();\n    const handleToggle = () => {\n      const isOpen = detailsRef.value?.open ?? false;\n\n      // Notify accordion parent for single-selection management\n      if (isOpen && !host.hasAttribute('expanded')) {\n        host.setAttribute('expanded', '');\n        emit('expand', { expanded: true, item: host });\n      } else if (!isOpen && host.hasAttribute('expanded')) {\n        host.removeAttribute('expanded');\n        emit('collapse', { expanded: false, item: host });\n      }\n    };\n\n    onMount(() => {\n      const details = detailsRef.value;\n      const summary = summaryRef.value;\n\n      if (!details || !summary) return;\n\n      // Sync details.open when expanded prop changes (needs live DOM refs)\n      watch(\n        props.expanded,\n        (v) => {\n          const expanded = Boolean(v);\n\n          details.open = expanded;\n          summary.setAttribute('aria-expanded', expanded ? 'true' : 'false');\n        },\n        { immediate: true },\n      );\n      handle(details, 'toggle', handleToggle);\n    });\n\n    const ariaExpanded = computed(() => (props.expanded.value ? 'true' : 'false'));\n    const ariaDisabled = computed(() => (props.disabled.value ? 'true' : 'false'));\n\n    return html` <details part=\"item\" ?open=${props.expanded} ref=${detailsRef}>\n      <summary part=\"summary\" :aria-expanded=${ariaExpanded} :aria-disabled=${ariaDisabled} ref=${summaryRef}>\n        <slot name=\"prefix\"></slot>\n        <div class=\"header-content\" part=\"header\">\n          <span class=\"title\" part=\"title\" id=\"${titleId}\">\n            <slot name=\"title\"></slot>\n          </span>\n          <span class=\"subtitle\" part=\"subtitle\">\n            <slot name=\"subtitle\"></slot>\n          </span>\n        </div>\n        <slot name=\"suffix\"></slot>\n        <svg\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          class=\"chevron\"\n          part=\"chevron\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"m 14.999979,5.9999793 -5.9999997,5.9999997 5.9999997,6\" />\n        </svg>\n      </summary>\n      <div class=\"content-wrapper\" part=\"content\" role=\"region\" aria-labelledby=\"${titleId}\">\n        <div class=\"content-inner\">\n          <slot></slot>\n        </div>\n      </div>\n    </details>`;\n  },\n  styles: [coarsePointerMixin, styles],\n  tag: 'bit-accordion-item',\n});\n"],"mappings":"uSA4EA,IAAa,GAAA,EAAA,EAAA,iBAAoF,CAC/F,MAAO,CACL,UAAA,EAAA,EAAA,OAAyB,GAAM,CAC/B,UAAA,EAAA,EAAA,OAAyB,GAAM,CAC/B,MAAA,EAAA,EAAA,OAA2C,IAAA,GAAU,CACrD,SAAA,EAAA,EAAA,OAAiD,IAAA,GAAU,CAC5D,CACD,MAAM,CAAE,OAAM,OAAM,SAAS,EAI3B,EAAA,EAAA,mBAAA,EAAA,EAAA,QAF4B,EAAA,cAAe,IAAA,GAAU,CAEtB,EAAO,CAAC,OAAQ,UAAU,CAAC,CAE1D,IAAM,EAAU,uBACV,GAAA,EAAA,EAAA,MAAsC,CACtC,GAAA,EAAA,EAAA,MAA+B,CAC/B,MAAqB,CACzB,IAAM,EAAS,EAAW,OAAO,MAAQ,GAGrC,GAAU,CAAC,EAAK,aAAa,WAAW,EAC1C,EAAK,aAAa,WAAY,GAAG,CACjC,EAAK,SAAU,CAAE,SAAU,GAAM,KAAM,EAAM,CAAC,EACrC,CAAC,GAAU,EAAK,aAAa,WAAW,GACjD,EAAK,gBAAgB,WAAW,CAChC,EAAK,WAAY,CAAE,SAAU,GAAO,KAAM,EAAM,CAAC,IAIrD,EAAA,EAAA,aAAc,CACZ,IAAM,EAAU,EAAW,MACrB,EAAU,EAAW,MAEvB,CAAC,GAAW,CAAC,KAGjB,EAAA,EAAA,OACE,EAAM,SACL,GAAM,CACL,IAAM,EAAW,EAAQ,EAEzB,EAAQ,KAAO,EACf,EAAQ,aAAa,gBAAiB,EAAW,OAAS,QAAQ,EAEpE,CAAE,UAAW,GAAM,CACpB,EACD,EAAA,EAAA,QAAO,EAAS,SAAU,EAAa,GACvC,CAEF,IAAM,GAAA,EAAA,EAAA,cAA+B,EAAM,SAAS,MAAQ,OAAS,QAAS,CACxE,GAAA,EAAA,EAAA,cAA+B,EAAM,SAAS,MAAQ,OAAS,QAAS,CAE9E,MAAO,GAAA,IAAI,+BAA+B,EAAM,SAAS,OAAO,EAAW;+CAChC,EAAa,kBAAkB,EAAa,OAAO,EAAW;;;iDAG5D,EAAQ;;;;;;;;;;;;;;;;;;;;;mFAqB0B,EAAQ;;;;;iBAOzF,OAAQ,CAAC,EAAA,mBAAoB,EAAA,QAAO,CACpC,IAAK,qBACN,CAAC"}

package/dist/accordion-item.js

@@ -0,0 +1,72 @@
+import { coarsePointerMixin as e } from "./styles/mixins/accessibility.css.js";
+import "./styles/index.js";
+import { ACCORDION_CTX as t } from "./accordion.js";
+import n from "./disclosure/accordion-item/accordion-item.css?inline.js";
+import { computed as r, defineComponent as i, handle as a, html as o, inject as s, onMount as c, ref as l, syncContextProps as u, typed as d, watch as f } from "@vielzeug/craftit";
+//#region src/disclosure/accordion-item/accordion-item.ts
+var p = i({
+	props: {
+		disabled: d(!1),
+		expanded: d(!1),
+		size: d(void 0),
+		variant: d(void 0)
+	},
+	setup({ emit: e, host: n, props: i }) {
+		u(s(t, void 0), i, ["size", "variant"]);
+		let d = "accordion-item-title", p = l(), m = l(), h = () => {
+			let t = p.value?.open ?? !1;
+			t && !n.hasAttribute("expanded") ? (n.setAttribute("expanded", ""), e("expand", {
+				expanded: !0,
+				item: n
+			})) : !t && n.hasAttribute("expanded") && (n.removeAttribute("expanded"), e("collapse", {
+				expanded: !1,
+				item: n
+			}));
+		};
+		c(() => {
+			let e = p.value, t = m.value;
+			!e || !t || (f(i.expanded, (n) => {
+				let r = !!n;
+				e.open = r, t.setAttribute("aria-expanded", r ? "true" : "false");
+			}, { immediate: !0 }), a(e, "toggle", h));
+		});
+		let g = r(() => i.expanded.value ? "true" : "false"), _ = r(() => i.disabled.value ? "true" : "false");
+		return o` <details part="item" ?open=${i.expanded} ref=${p}>
+      <summary part="summary" :aria-expanded=${g} :aria-disabled=${_} ref=${m}>
+        <slot name="prefix"></slot>
+        <div class="header-content" part="header">
+          <span class="title" part="title" id="${d}">
+            <slot name="title"></slot>
+          </span>
+          <span class="subtitle" part="subtitle">
+            <slot name="subtitle"></slot>
+          </span>
+        </div>
+        <slot name="suffix"></slot>
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="chevron"
+          part="chevron"
+          xmlns="http://www.w3.org/2000/svg">
+          <path d="m 14.999979,5.9999793 -5.9999997,5.9999997 5.9999997,6" />
+        </svg>
+      </summary>
+      <div class="content-wrapper" part="content" role="region" aria-labelledby="${d}">
+        <div class="content-inner">
+          <slot></slot>
+        </div>
+      </div>
+    </details>`;
+	},
+	styles: [e, n],
+	tag: "bit-accordion-item"
+});
+//#endregion
+export { p as ACCORDION_ITEM_TAG };
+
+//# sourceMappingURL=accordion-item.js.map

package/dist/accordion-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-item.js","names":[],"sources":["../src/disclosure/accordion-item/accordion-item.ts"],"sourcesContent":["import {\n  computed,\n  defineComponent,\n  handle,\n  html,\n  typed,\n  inject,\n  onMount,\n  ref,\n  syncContextProps,\n  watch,\n} from '@vielzeug/craftit';\n\nimport type { ComponentSize, VisualVariant } from '../../types';\n\nimport { coarsePointerMixin } from '../../styles';\nimport { ACCORDION_CTX } from '../accordion/accordion';\nimport styles from './accordion-item.css?inline';\n\n/** Accordion item component properties */\n\nexport type BitAccordionItemEvents = {\n  collapse: { expanded: boolean; item: HTMLElement };\n  expand: { expanded: boolean; item: HTMLElement };\n};\n\nexport type BitAccordionItemProps = {\n  /** Disable accordion item interaction */\n  disabled?: boolean;\n  /** Whether the item is expanded/open */\n  expanded?: boolean;\n  /** Item size */\n  size?: ComponentSize;\n  /** Visual style variant */\n  variant?: VisualVariant;\n};\n\n/**\n * An individual accordion item with expand/collapse functionality using native details/summary.\n *\n * @element bit-accordion-item\n *\n * @attr {boolean} expanded - Whether the item is expanded/open\n * @attr {boolean} disabled - Disable accordion item interaction\n * @attr {string} size - Item size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'text' | 'glass' | 'frost'\n *\n * @fires expand - Emitted when item expands\n * @fires collapse - Emitted when item collapses\n *\n * @slot prefix - Content before the title (e.g., icons)\n * @slot title - Main accordion item title\n * @slot subtitle - Optional subtitle text\n * @slot suffix - Content after the title (e.g., badges)\n * @slot - Accordion item content (shown when expanded)\n *\n * @cssprop --accordion-item-bg - Background color\n * @cssprop --accordion-item-border-color - Border color\n * @cssprop --accordion-item-title-color - Title text color\n * @cssprop --accordion-item-subtitle-color - Subtitle text color\n * @cssprop --accordion-item-body-color - Body text color\n * @cssprop --accordion-item-radius - Border radius\n * @cssprop --accordion-item-transition - Transition duration\n * @cssprop --accordion-item-title - Title font size\n * @cssprop --accordion-item-subtitle-size - Subtitle font size\n * @cssprop --accordion-item-body - Body font size\n * @cssprop --accordion-item-details-padding - Summary/header padding\n * @cssprop --accordion-item-summary-padding - Content padding\n *\n * @example\n * ```html\n * <bit-accordion-item><span slot=\"title\">Click to expand</span><p>Content</p></bit-accordion-item>\n * <bit-accordion-item expanded variant=\"bordered\"><span slot=\"title\">Title</span><p>Content</p></bit-accordion-item>\n * ```\n */\n\nexport const ACCORDION_ITEM_TAG = defineComponent<BitAccordionItemProps, BitAccordionItemEvents>({\n  props: {\n    disabled: typed<boolean>(false),\n    expanded: typed<boolean>(false),\n    size: typed<BitAccordionItemProps['size']>(undefined),\n    variant: typed<BitAccordionItemProps['variant']>(undefined),\n  },\n  setup({ emit, host, props }) {\n    // Inherit size/variant from a parent bit-accordion when present.\n    const accordionCtx = inject(ACCORDION_CTX, undefined);\n\n    syncContextProps(accordionCtx, props, ['size', 'variant']);\n\n    const titleId = 'accordion-item-title';\n    const detailsRef = ref<HTMLDetailsElement>();\n    const summaryRef = ref<HTMLElement>();\n    const handleToggle = () => {\n      const isOpen = detailsRef.value?.open ?? false;\n\n      // Notify accordion parent for single-selection management\n      if (isOpen && !host.hasAttribute('expanded')) {\n        host.setAttribute('expanded', '');\n        emit('expand', { expanded: true, item: host });\n      } else if (!isOpen && host.hasAttribute('expanded')) {\n        host.removeAttribute('expanded');\n        emit('collapse', { expanded: false, item: host });\n      }\n    };\n\n    onMount(() => {\n      const details = detailsRef.value;\n      const summary = summaryRef.value;\n\n      if (!details || !summary) return;\n\n      // Sync details.open when expanded prop changes (needs live DOM refs)\n      watch(\n        props.expanded,\n        (v) => {\n          const expanded = Boolean(v);\n\n          details.open = expanded;\n          summary.setAttribute('aria-expanded', expanded ? 'true' : 'false');\n        },\n        { immediate: true },\n      );\n      handle(details, 'toggle', handleToggle);\n    });\n\n    const ariaExpanded = computed(() => (props.expanded.value ? 'true' : 'false'));\n    const ariaDisabled = computed(() => (props.disabled.value ? 'true' : 'false'));\n\n    return html` <details part=\"item\" ?open=${props.expanded} ref=${detailsRef}>\n      <summary part=\"summary\" :aria-expanded=${ariaExpanded} :aria-disabled=${ariaDisabled} ref=${summaryRef}>\n        <slot name=\"prefix\"></slot>\n        <div class=\"header-content\" part=\"header\">\n          <span class=\"title\" part=\"title\" id=\"${titleId}\">\n            <slot name=\"title\"></slot>\n          </span>\n          <span class=\"subtitle\" part=\"subtitle\">\n            <slot name=\"subtitle\"></slot>\n          </span>\n        </div>\n        <slot name=\"suffix\"></slot>\n        <svg\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          class=\"chevron\"\n          part=\"chevron\"\n          xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"m 14.999979,5.9999793 -5.9999997,5.9999997 5.9999997,6\" />\n        </svg>\n      </summary>\n      <div class=\"content-wrapper\" part=\"content\" role=\"region\" aria-labelledby=\"${titleId}\">\n        <div class=\"content-inner\">\n          <slot></slot>\n        </div>\n      </div>\n    </details>`;\n  },\n  styles: [coarsePointerMixin, styles],\n  tag: 'bit-accordion-item',\n});\n"],"mappings":";;;;;;AA4EA,IAAa,IAAqB,EAA+D;CAC/F,OAAO;EACL,UAAU,EAAe,GAAM;EAC/B,UAAU,EAAe,GAAM;EAC/B,MAAM,EAAqC,KAAA,EAAU;EACrD,SAAS,EAAwC,KAAA,EAAU;EAC5D;CACD,MAAM,EAAE,SAAM,SAAM,YAAS;AAI3B,IAFqB,EAAO,GAAe,KAAA,EAAU,EAEtB,GAAO,CAAC,QAAQ,UAAU,CAAC;EAE1D,IAAM,IAAU,wBACV,IAAa,GAAyB,EACtC,IAAa,GAAkB,EAC/B,UAAqB;GACzB,IAAM,IAAS,EAAW,OAAO,QAAQ;AAGzC,GAAI,KAAU,CAAC,EAAK,aAAa,WAAW,IAC1C,EAAK,aAAa,YAAY,GAAG,EACjC,EAAK,UAAU;IAAE,UAAU;IAAM,MAAM;IAAM,CAAC,IACrC,CAAC,KAAU,EAAK,aAAa,WAAW,KACjD,EAAK,gBAAgB,WAAW,EAChC,EAAK,YAAY;IAAE,UAAU;IAAO,MAAM;IAAM,CAAC;;AAIrD,UAAc;GACZ,IAAM,IAAU,EAAW,OACrB,IAAU,EAAW;AAEvB,IAAC,KAAW,CAAC,MAGjB,EACE,EAAM,WACL,MAAM;IACL,IAAM,IAAW,EAAQ;AAGzB,IADA,EAAQ,OAAO,GACf,EAAQ,aAAa,iBAAiB,IAAW,SAAS,QAAQ;MAEpE,EAAE,WAAW,IAAM,CACpB,EACD,EAAO,GAAS,UAAU,EAAa;IACvC;EAEF,IAAM,IAAe,QAAgB,EAAM,SAAS,QAAQ,SAAS,QAAS,EACxE,IAAe,QAAgB,EAAM,SAAS,QAAQ,SAAS,QAAS;AAE9E,SAAO,CAAI,+BAA+B,EAAM,SAAS,OAAO,EAAW;+CAChC,EAAa,kBAAkB,EAAa,OAAO,EAAW;;;iDAG5D,EAAQ;;;;;;;;;;;;;;;;;;;;;mFAqB0B,EAAQ;;;;;;;CAOzF,QAAQ,CAAC,GAAoB,EAAO;CACpC,KAAK;CACN,CAAC"}

package/dist/accordion.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./disclosure/accordion/accordion.css?inline.cjs`);let t=require(`@vielzeug/craftit`);var n=(0,t.createContext)(`AccordionContext`),r=(0,t.defineComponent)({props:{selectionMode:(0,t.typed)(void 0),size:(0,t.typed)(void 0),variant:(0,t.typed)(void 0)},setup({emit:e,host:r,props:i}){let a=t=>{i.selectionMode.value===`single`&&(r.querySelectorAll(`bit-accordion-item`).forEach(e=>{e!==t&&e.hasAttribute(`expanded`)&&e.removeAttribute(`expanded`)}),e(`change`,{expandedItem:t}))};return(0,t.provide)(n,{notifyExpand:a,selectionMode:(0,t.computed)(()=>i.selectionMode.value),size:i.size,variant:i.variant}),(0,t.handle)(r,`expand`,e=>a(e.target)),(0,t.handle)(r,`keydown`,e=>{if(e.key!==`ArrowDown`&&e.key!==`ArrowUp`&&e.key!==`Home`&&e.key!==`End`)return;let t=[...r.querySelectorAll(`bit-accordion-item:not([disabled])`)].map(e=>e.shadowRoot?.querySelector(`summary`)).filter(Boolean);if(!t.length)return;let n=t.indexOf(document.activeElement);if(n===-1)return;let i=n;e.key===`ArrowDown`?i=(n+1)%t.length:e.key===`ArrowUp`?i=(n-1+t.length)%t.length:e.key===`Home`?i=0:e.key===`End`&&(i=t.length-1),e.preventDefault(),t[i]?.focus()}),t.html`<slot></slot>`},styles:[e.default],tag:`bit-accordion`});exports.ACCORDION_CTX=n,exports.ACCORDION_TAG=r;
+//# sourceMappingURL=accordion.cjs.map

package/dist/accordion.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.cjs","names":[],"sources":["../src/disclosure/accordion/accordion.ts"],"sourcesContent":["import {\n  computed,\n  createContext,\n  defineComponent,\n  handle,\n  html,\n  typed,\n  provide,\n  type ReadonlySignal,\n} from '@vielzeug/craftit';\n\nimport type { ComponentSize, VisualVariant } from '../../types';\n\n/** Context provided by bit-accordion to its bit-accordion-item children. */\nexport type AccordionContext = {\n  notifyExpand: (expandedItem: HTMLElement) => void;\n  selectionMode: ReadonlySignal<'single' | 'multiple' | undefined>;\n  size: ReadonlySignal<ComponentSize | undefined>;\n  variant: ReadonlySignal<VisualVariant | undefined>;\n};\n/** Injection key for the accordion context. */\nexport const ACCORDION_CTX = createContext<AccordionContext>('AccordionContext');\n\nimport styles from './accordion.css?inline';\n\n/** Accordion component properties */\n\nexport type BitAccordionEvents = {\n  change: { expandedItem: HTMLElement };\n};\n\nexport type BitAccordionProps = {\n  /** Selection mode (single = only one opens, multiple = multiple can be open) */\n  selectionMode?: 'single' | 'multiple';\n  /** Size for all items (propagated via context) */\n  size?: ComponentSize;\n  /** Visual variant for all items (propagated via context) */\n  variant?: VisualVariant;\n};\n\n/**\n * A container for accordion items with single or multiple selection modes.\n *\n * @element bit-accordion\n *\n * @attr {string} selection-mode - Selection mode: 'single' | 'multiple'\n * @attr {string} size - Size for all items: 'sm' | 'md' | 'lg' (propagated to children)\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'text' | 'glass' | 'frost' (propagated to children)\n *\n * @fires expand - Emitted when an item expands\n * @fires change - Emitted when selection changes (single mode)\n *\n * @slot - Accordion item elements (bit-accordion-item)\n *\n * @example\n * ```html\n * <bit-accordion selection-mode=\"single\"><bit-accordion-item>...</bit-accordion-item></bit-accordion>\n * <bit-accordion variant=\"frost\" size=\"lg\"><bit-accordion-item>...</bit-accordion-item></bit-accordion>\n * ```\n */\n\nexport const ACCORDION_TAG = defineComponent<BitAccordionProps, BitAccordionEvents>({\n  props: {\n    selectionMode: typed<BitAccordionProps['selectionMode']>(undefined),\n    size: typed<BitAccordionProps['size']>(undefined),\n    variant: typed<BitAccordionProps['variant']>(undefined),\n  },\n  setup({ emit, host, props }) {\n    const notifyExpand = (expandedItem: HTMLElement) => {\n      if (props.selectionMode.value === 'single') {\n        host.querySelectorAll('bit-accordion-item').forEach((item) => {\n          if (item !== expandedItem && item.hasAttribute('expanded')) {\n            item.removeAttribute('expanded');\n          }\n        });\n        emit('change', { expandedItem });\n      }\n    };\n\n    provide(ACCORDION_CTX, {\n      notifyExpand,\n      selectionMode: computed(() => props.selectionMode.value),\n      size: props.size,\n      variant: props.variant,\n    });\n\n    // Listen for expanded events bubbling up from child accordion-items.\n    // This allows single-selection management without tight coupling via context calls.\n    const handleExpand = (e: Event) => notifyExpand(e.target as HTMLElement);\n\n    handle(host, 'expand', handleExpand);\n    // Group-level arrow-key navigation between accordion item summaries (WAI-ARIA Accordion pattern).\n    handle(host, 'keydown', (e: KeyboardEvent) => {\n      if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp' && e.key !== 'Home' && e.key !== 'End') return;\n\n      const items = [...host.querySelectorAll<HTMLElement>('bit-accordion-item:not([disabled])')];\n      const summaries = items\n        .map((item) => item.shadowRoot?.querySelector<HTMLElement>('summary'))\n        .filter(Boolean) as HTMLElement[];\n\n      if (!summaries.length) return;\n\n      const focused = summaries.indexOf(document.activeElement as HTMLElement);\n\n      if (focused === -1) return; // the focus is not on a summary — let native handling proceed\n\n      let next = focused;\n\n      if (e.key === 'ArrowDown') next = (focused + 1) % summaries.length;\n      else if (e.key === 'ArrowUp') next = (focused - 1 + summaries.length) % summaries.length;\n      else if (e.key === 'Home') next = 0;\n      else if (e.key === 'End') next = summaries.length - 1;\n\n      e.preventDefault();\n      summaries[next]?.focus();\n    });\n\n    return html`<slot></slot>`;\n  },\n  styles: [styles],\n  tag: 'bit-accordion',\n});\n"],"mappings":"yKAqBA,IAAa,GAAA,EAAA,EAAA,eAAgD,mBAAmB,CAwCnE,GAAA,EAAA,EAAA,iBAAuE,CAClF,MAAO,CACL,eAAA,EAAA,EAAA,OAAyD,IAAA,GAAU,CACnE,MAAA,EAAA,EAAA,OAAuC,IAAA,GAAU,CACjD,SAAA,EAAA,EAAA,OAA6C,IAAA,GAAU,CACxD,CACD,MAAM,CAAE,OAAM,OAAM,SAAS,CAC3B,IAAM,EAAgB,GAA8B,CAC9C,EAAM,cAAc,QAAU,WAChC,EAAK,iBAAiB,qBAAqB,CAAC,QAAS,GAAS,CACxD,IAAS,GAAgB,EAAK,aAAa,WAAW,EACxD,EAAK,gBAAgB,WAAW,EAElC,CACF,EAAK,SAAU,CAAE,eAAc,CAAC,GA0CpC,OAtCA,EAAA,EAAA,SAAQ,EAAe,CACrB,eACA,eAAA,EAAA,EAAA,cAA8B,EAAM,cAAc,MAAM,CACxD,KAAM,EAAM,KACZ,QAAS,EAAM,QAChB,CAAC,EAMF,EAAA,EAAA,QAAO,EAAM,SAFS,GAAa,EAAa,EAAE,OAAsB,CAEpC,EAEpC,EAAA,EAAA,QAAO,EAAM,UAAY,GAAqB,CAC5C,GAAI,EAAE,MAAQ,aAAe,EAAE,MAAQ,WAAa,EAAE,MAAQ,QAAU,EAAE,MAAQ,MAAO,OAGzF,IAAM,EADQ,CAAC,GAAG,EAAK,iBAA8B,qCAAqC,CAAC,CAExF,IAAK,GAAS,EAAK,YAAY,cAA2B,UAAU,CAAC,CACrE,OAAO,QAAQ,CAElB,GAAI,CAAC,EAAU,OAAQ,OAEvB,IAAM,EAAU,EAAU,QAAQ,SAAS,cAA6B,CAExE,GAAI,IAAY,GAAI,OAEpB,IAAI,EAAO,EAEP,EAAE,MAAQ,YAAa,GAAQ,EAAU,GAAK,EAAU,OACnD,EAAE,MAAQ,UAAW,GAAQ,EAAU,EAAI,EAAU,QAAU,EAAU,OACzE,EAAE,MAAQ,OAAQ,EAAO,EACzB,EAAE,MAAQ,QAAO,EAAO,EAAU,OAAS,GAEpD,EAAE,gBAAgB,CAClB,EAAU,IAAO,OAAO,EACxB,CAEK,EAAA,IAAI,iBAEb,OAAQ,CAAC,EAAA,QAAO,CAChB,IAAK,gBACN,CAAC"}

package/dist/accordion.js

@@ -0,0 +1,37 @@
+import e from "./disclosure/accordion/accordion.css?inline.js";
+import { computed as t, createContext as n, defineComponent as r, handle as i, html as a, provide as o, typed as s } from "@vielzeug/craftit";
+//#region src/disclosure/accordion/accordion.ts
+var c = n("AccordionContext"), l = r({
+	props: {
+		selectionMode: s(void 0),
+		size: s(void 0),
+		variant: s(void 0)
+	},
+	setup({ emit: e, host: n, props: r }) {
+		let s = (t) => {
+			r.selectionMode.value === "single" && (n.querySelectorAll("bit-accordion-item").forEach((e) => {
+				e !== t && e.hasAttribute("expanded") && e.removeAttribute("expanded");
+			}), e("change", { expandedItem: t }));
+		};
+		return o(c, {
+			notifyExpand: s,
+			selectionMode: t(() => r.selectionMode.value),
+			size: r.size,
+			variant: r.variant
+		}), i(n, "expand", (e) => s(e.target)), i(n, "keydown", (e) => {
+			if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Home" && e.key !== "End") return;
+			let t = [...n.querySelectorAll("bit-accordion-item:not([disabled])")].map((e) => e.shadowRoot?.querySelector("summary")).filter(Boolean);
+			if (!t.length) return;
+			let r = t.indexOf(document.activeElement);
+			if (r === -1) return;
+			let i = r;
+			e.key === "ArrowDown" ? i = (r + 1) % t.length : e.key === "ArrowUp" ? i = (r - 1 + t.length) % t.length : e.key === "Home" ? i = 0 : e.key === "End" && (i = t.length - 1), e.preventDefault(), t[i]?.focus();
+		}), a`<slot></slot>`;
+	},
+	styles: [e],
+	tag: "bit-accordion"
+});
+//#endregion
+export { c as ACCORDION_CTX, l as ACCORDION_TAG };
+
+//# sourceMappingURL=accordion.js.map

package/dist/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","names":[],"sources":["../src/disclosure/accordion/accordion.ts"],"sourcesContent":["import {\n  computed,\n  createContext,\n  defineComponent,\n  handle,\n  html,\n  typed,\n  provide,\n  type ReadonlySignal,\n} from '@vielzeug/craftit';\n\nimport type { ComponentSize, VisualVariant } from '../../types';\n\n/** Context provided by bit-accordion to its bit-accordion-item children. */\nexport type AccordionContext = {\n  notifyExpand: (expandedItem: HTMLElement) => void;\n  selectionMode: ReadonlySignal<'single' | 'multiple' | undefined>;\n  size: ReadonlySignal<ComponentSize | undefined>;\n  variant: ReadonlySignal<VisualVariant | undefined>;\n};\n/** Injection key for the accordion context. */\nexport const ACCORDION_CTX = createContext<AccordionContext>('AccordionContext');\n\nimport styles from './accordion.css?inline';\n\n/** Accordion component properties */\n\nexport type BitAccordionEvents = {\n  change: { expandedItem: HTMLElement };\n};\n\nexport type BitAccordionProps = {\n  /** Selection mode (single = only one opens, multiple = multiple can be open) */\n  selectionMode?: 'single' | 'multiple';\n  /** Size for all items (propagated via context) */\n  size?: ComponentSize;\n  /** Visual variant for all items (propagated via context) */\n  variant?: VisualVariant;\n};\n\n/**\n * A container for accordion items with single or multiple selection modes.\n *\n * @element bit-accordion\n *\n * @attr {string} selection-mode - Selection mode: 'single' | 'multiple'\n * @attr {string} size - Size for all items: 'sm' | 'md' | 'lg' (propagated to children)\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'text' | 'glass' | 'frost' (propagated to children)\n *\n * @fires expand - Emitted when an item expands\n * @fires change - Emitted when selection changes (single mode)\n *\n * @slot - Accordion item elements (bit-accordion-item)\n *\n * @example\n * ```html\n * <bit-accordion selection-mode=\"single\"><bit-accordion-item>...</bit-accordion-item></bit-accordion>\n * <bit-accordion variant=\"frost\" size=\"lg\"><bit-accordion-item>...</bit-accordion-item></bit-accordion>\n * ```\n */\n\nexport const ACCORDION_TAG = defineComponent<BitAccordionProps, BitAccordionEvents>({\n  props: {\n    selectionMode: typed<BitAccordionProps['selectionMode']>(undefined),\n    size: typed<BitAccordionProps['size']>(undefined),\n    variant: typed<BitAccordionProps['variant']>(undefined),\n  },\n  setup({ emit, host, props }) {\n    const notifyExpand = (expandedItem: HTMLElement) => {\n      if (props.selectionMode.value === 'single') {\n        host.querySelectorAll('bit-accordion-item').forEach((item) => {\n          if (item !== expandedItem && item.hasAttribute('expanded')) {\n            item.removeAttribute('expanded');\n          }\n        });\n        emit('change', { expandedItem });\n      }\n    };\n\n    provide(ACCORDION_CTX, {\n      notifyExpand,\n      selectionMode: computed(() => props.selectionMode.value),\n      size: props.size,\n      variant: props.variant,\n    });\n\n    // Listen for expanded events bubbling up from child accordion-items.\n    // This allows single-selection management without tight coupling via context calls.\n    const handleExpand = (e: Event) => notifyExpand(e.target as HTMLElement);\n\n    handle(host, 'expand', handleExpand);\n    // Group-level arrow-key navigation between accordion item summaries (WAI-ARIA Accordion pattern).\n    handle(host, 'keydown', (e: KeyboardEvent) => {\n      if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp' && e.key !== 'Home' && e.key !== 'End') return;\n\n      const items = [...host.querySelectorAll<HTMLElement>('bit-accordion-item:not([disabled])')];\n      const summaries = items\n        .map((item) => item.shadowRoot?.querySelector<HTMLElement>('summary'))\n        .filter(Boolean) as HTMLElement[];\n\n      if (!summaries.length) return;\n\n      const focused = summaries.indexOf(document.activeElement as HTMLElement);\n\n      if (focused === -1) return; // the focus is not on a summary — let native handling proceed\n\n      let next = focused;\n\n      if (e.key === 'ArrowDown') next = (focused + 1) % summaries.length;\n      else if (e.key === 'ArrowUp') next = (focused - 1 + summaries.length) % summaries.length;\n      else if (e.key === 'Home') next = 0;\n      else if (e.key === 'End') next = summaries.length - 1;\n\n      e.preventDefault();\n      summaries[next]?.focus();\n    });\n\n    return html`<slot></slot>`;\n  },\n  styles: [styles],\n  tag: 'bit-accordion',\n});\n"],"mappings":";;;AAqBA,IAAa,IAAgB,EAAgC,mBAAmB,EAwCnE,IAAgB,EAAuD;CAClF,OAAO;EACL,eAAe,EAA0C,KAAA,EAAU;EACnE,MAAM,EAAiC,KAAA,EAAU;EACjD,SAAS,EAAoC,KAAA,EAAU;EACxD;CACD,MAAM,EAAE,SAAM,SAAM,YAAS;EAC3B,IAAM,KAAgB,MAA8B;AAClD,GAAI,EAAM,cAAc,UAAU,aAChC,EAAK,iBAAiB,qBAAqB,CAAC,SAAS,MAAS;AAC5D,IAAI,MAAS,KAAgB,EAAK,aAAa,WAAW,IACxD,EAAK,gBAAgB,WAAW;KAElC,EACF,EAAK,UAAU,EAAE,iBAAc,CAAC;;AA0CpC,SAtCA,EAAQ,GAAe;GACrB;GACA,eAAe,QAAe,EAAM,cAAc,MAAM;GACxD,MAAM,EAAM;GACZ,SAAS,EAAM;GAChB,CAAC,EAMF,EAAO,GAAM,WAFS,MAAa,EAAa,EAAE,OAAsB,CAEpC,EAEpC,EAAO,GAAM,YAAY,MAAqB;AAC5C,OAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,aAAa,EAAE,QAAQ,UAAU,EAAE,QAAQ,MAAO;GAGzF,IAAM,IADQ,CAAC,GAAG,EAAK,iBAA8B,qCAAqC,CAAC,CAExF,KAAK,MAAS,EAAK,YAAY,cAA2B,UAAU,CAAC,CACrE,OAAO,QAAQ;AAElB,OAAI,CAAC,EAAU,OAAQ;GAEvB,IAAM,IAAU,EAAU,QAAQ,SAAS,cAA6B;AAExE,OAAI,MAAY,GAAI;GAEpB,IAAI,IAAO;AAQX,GANI,EAAE,QAAQ,cAAa,KAAQ,IAAU,KAAK,EAAU,SACnD,EAAE,QAAQ,YAAW,KAAQ,IAAU,IAAI,EAAU,UAAU,EAAU,SACzE,EAAE,QAAQ,SAAQ,IAAO,IACzB,EAAE,QAAQ,UAAO,IAAO,EAAU,SAAS,IAEpD,EAAE,gBAAgB,EAClB,EAAU,IAAO,OAAO;IACxB,EAEK,CAAI;;CAEb,QAAQ,CAAC,EAAO;CAChB,KAAK;CACN,CAAC"}

package/dist/alert.cjs

@@ -0,0 +1,31 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/shape.css.cjs`),t=require(`./styles/mixins/theme.css.cjs`),n=require(`./styles/index.cjs`),r=require(`./icons.cjs`),i=require(`./utils/animation.cjs`),a=require(`./feedback/alert/alert.css?inline.cjs`);let o=require(`@vielzeug/craftit`);var s=(0,o.defineComponent)({props:{accented:{default:!1},color:{default:void 0},dismissible:{default:!1},heading:{default:``},horizontal:{default:!1},rounded:{default:void 0},size:{default:void 0},variant:{default:void 0}},setup({emit:e,host:t,props:n}){let a=(0,o.guard)(()=>n.dismissible.value,n=>{t.setAttribute(`dismissing`,``),i.awaitExit(t,()=>{t.removeAttribute(`dismissing`),t.setAttribute(`dismissed`,``),e(`dismiss`,{originalEvent:n})})}),s=(0,o.signal)(!1),c=(0,o.signal)(!1);return(0,o.onMount)(()=>{(0,o.onSlotChange)(`icon`,e=>{s.value=e.length>0}),(0,o.onSlotChange)(`actions`,e=>{c.value=e.length>0})}),o.html`
+      <div class="alert" :role="${()=>n.color.value===`error`?`alert`:`status`}" part="alert">
+        <span class="icon" part="icon" aria-hidden="true" ?hidden=${()=>!s.value}>
+          <slot name="icon"></slot>
+        </span>
+        <div class="header" part="header" ?hidden=${()=>!n.heading.value}>
+          <span class="heading" part="heading">${()=>n.heading.value}</span>
+          <span class="meta" part="meta">
+            <slot name="meta"></slot>
+          </span>
+        </div>
+        <div class="body" part="body">
+          <div class="content" part="content">
+            <slot></slot>
+          </div>
+        </div>
+        <div class="actions" part="actions" ?hidden=${()=>!c.value}>
+          <slot name="actions"></slot>
+        </div>
+        <button
+          class="close"
+          part="close"
+          type="button"
+          aria-label="Dismiss alert"
+          ?hidden=${()=>!n.dismissible.value}
+          @click=${a}>
+          ${r.closeIcon}
+        </button>
+      </div>
+    `},styles:[...n.formFieldMixins,t.forcedColorsMixin,e.sizeVariantMixin({lg:{"--_padding":`var(--size-4) var(--size-5)`,fontSize:`var(--text-base)`,gap:`var(--size-3-5)`},sm:{"--_padding":`var(--size-2) var(--size-3)`,fontSize:`var(--text-xs)`,gap:`var(--size-2)`}}),a.default],tag:`bit-alert`});exports.ALERT_TAG=s;
+//# sourceMappingURL=alert.cjs.map

package/dist/alert.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.cjs","names":[],"sources":["../src/feedback/alert/alert.ts"],"sourcesContent":["import { defineComponent, guard, html, onMount, onSlotChange, signal } from '@vielzeug/craftit';\n\nimport type { ComponentSize, RoundedSize, ThemeColor } from '../../types';\n\nimport { closeIcon } from '../../icons';\nimport { forcedColorsMixin, formFieldMixins, sizeVariantMixin } from '../../styles';\nimport { awaitExit } from '../../utils/animation';\nimport componentStyles from './alert.css?inline';\n\nexport type BitAlertEvents = {\n  dismiss: { originalEvent: MouseEvent };\n};\n\nexport type BitAlertProps = {\n  /** Show a left accent border (for flat/bordered variants) */\n  accented?: boolean;\n  /** Theme color */\n  color?: ThemeColor;\n  /** Show a dismissable (×) button */\n  dismissible?: boolean;\n  /** Heading text shown above the content */\n  heading?: string;\n  /** Position action buttons to the right instead of below */\n  horizontal?: boolean;\n  /** Border radius */\n  rounded?: RoundedSize | '';\n  /** Alert size */\n  size?: ComponentSize;\n  /** Visual style variant */\n  variant?: 'solid' | 'flat' | 'bordered';\n};\n\n/**\n * A status/feedback banner with optional heading, icon slot, and dismiss button.\n *\n * @element bit-alert\n *\n * @attr {string} color - Theme color (primary/success/warning/error…)\n * @attr {string} variant - Visual style: 'flat' | 'solid' | 'bordered'\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius size\n * @attr {string} heading - Bold heading text above the content\n * @attr {boolean} dismissible - Show a close (×) button\n * @attr {boolean} accented - Add a left accent border (flat/bordered only)\n * @attr {boolean} horizontal - Position action buttons to the right instead of below\n *\n * @fires dismiss - Fired when the alert is dismissed\n *\n * @slot - Default slot for the alert message content\n * @slot icon - Icon on the left side\n * @slot meta - Metadata displayed alongside the heading (lighter, right-aligned)\n * @slot actions - Action buttons shown below the message\n *\n * @cssprop --alert-bg - Background color\n * @cssprop --alert-color - Text/icon color\n * @cssprop --alert-border-color - Border color\n * @cssprop --alert-radius - Border radius\n * @cssprop --alert-padding - Padding\n * @cssprop --alert-gap - Gap between icon, body, and close button\n * @cssprop --alert-font-size - Font size\n *\n * @example\n * ```html\n * <bit-alert color=\"success\">Your changes have been saved.</bit-alert>\n * <bit-alert color=\"error\" variant=\"solid\" dismissible heading=\"Something went wrong\">\n *   Please try again later.\n * </bit-alert>\n * ```\n */\nexport const ALERT_TAG = defineComponent<BitAlertProps, BitAlertEvents>({\n  props: {\n    accented: { default: false },\n    color: { default: undefined },\n    dismissible: { default: false },\n    heading: { default: '' },\n    horizontal: { default: false },\n    rounded: { default: undefined },\n    size: { default: undefined },\n    variant: { default: undefined },\n  },\n  setup({ emit, host, props }) {\n    const handleDismiss = guard(\n      () => props.dismissible.value,\n      (e: MouseEvent) => {\n        host.setAttribute('dismissing', '');\n        awaitExit(host, () => {\n          host.removeAttribute('dismissing');\n          host.setAttribute('dismissed', '');\n          emit('dismiss', { originalEvent: e });\n        });\n      },\n    );\n    const hasIcon = signal(false);\n    const hasActions = signal(false);\n\n    onMount(() => {\n      onSlotChange('icon', (els) => {\n        hasIcon.value = els.length > 0;\n      });\n      onSlotChange('actions', (els) => {\n        hasActions.value = els.length > 0;\n      });\n    });\n\n    return html`\n      <div class=\"alert\" :role=\"${() => (props.color.value === 'error' ? 'alert' : 'status')}\" part=\"alert\">\n        <span class=\"icon\" part=\"icon\" aria-hidden=\"true\" ?hidden=${() => !hasIcon.value}>\n          <slot name=\"icon\"></slot>\n        </span>\n        <div class=\"header\" part=\"header\" ?hidden=${() => !props.heading.value}>\n          <span class=\"heading\" part=\"heading\">${() => props.heading.value}</span>\n          <span class=\"meta\" part=\"meta\">\n            <slot name=\"meta\"></slot>\n          </span>\n        </div>\n        <div class=\"body\" part=\"body\">\n          <div class=\"content\" part=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n        <div class=\"actions\" part=\"actions\" ?hidden=${() => !hasActions.value}>\n          <slot name=\"actions\"></slot>\n        </div>\n        <button\n          class=\"close\"\n          part=\"close\"\n          type=\"button\"\n          aria-label=\"Dismiss alert\"\n          ?hidden=${() => !props.dismissible.value}\n          @click=${handleDismiss}>\n          ${closeIcon}\n        </button>\n      </div>\n    `;\n  },\n  styles: [\n    ...formFieldMixins,\n    forcedColorsMixin,\n    sizeVariantMixin({\n      lg: { '--_padding': 'var(--size-4) var(--size-5)', fontSize: 'var(--text-base)', gap: 'var(--size-3-5)' },\n      sm: { '--_padding': 'var(--size-2) var(--size-3)', fontSize: 'var(--text-xs)', gap: 'var(--size-2)' },\n    }),\n    componentStyles,\n  ],\n  tag: 'bit-alert',\n});\n"],"mappings":"iVAqEA,IAAa,GAAA,EAAA,EAAA,iBAA2D,CACtE,MAAO,CACL,SAAU,CAAE,QAAS,GAAO,CAC5B,MAAO,CAAE,QAAS,IAAA,GAAW,CAC7B,YAAa,CAAE,QAAS,GAAO,CAC/B,QAAS,CAAE,QAAS,GAAI,CACxB,WAAY,CAAE,QAAS,GAAO,CAC9B,QAAS,CAAE,QAAS,IAAA,GAAW,CAC/B,KAAM,CAAE,QAAS,IAAA,GAAW,CAC5B,QAAS,CAAE,QAAS,IAAA,GAAW,CAChC,CACD,MAAM,CAAE,OAAM,OAAM,SAAS,CAC3B,IAAM,GAAA,EAAA,EAAA,WACE,EAAM,YAAY,MACvB,GAAkB,CACjB,EAAK,aAAa,aAAc,GAAG,CACnC,EAAA,UAAU,MAAY,CACpB,EAAK,gBAAgB,aAAa,CAClC,EAAK,aAAa,YAAa,GAAG,CAClC,EAAK,UAAW,CAAE,cAAe,EAAG,CAAC,EACrC,EAEL,CACK,GAAA,EAAA,EAAA,QAAiB,GAAM,CACvB,GAAA,EAAA,EAAA,QAAoB,GAAM,CAWhC,OATA,EAAA,EAAA,aAAc,EACZ,EAAA,EAAA,cAAa,OAAS,GAAQ,CAC5B,EAAQ,MAAQ,EAAI,OAAS,GAC7B,EACF,EAAA,EAAA,cAAa,UAAY,GAAQ,CAC/B,EAAW,MAAQ,EAAI,OAAS,GAChC,EACF,CAEK,EAAA,IAAI;sCAC0B,EAAM,MAAM,QAAU,QAAU,QAAU,SAAU;wEACnB,CAAC,EAAQ,MAAM;;;wDAG/B,CAAC,EAAM,QAAQ,MAAM;qDACxB,EAAM,QAAQ,MAAM;;;;;;;;;;0DAUf,CAAC,EAAW,MAAM;;;;;;;;wBAQpD,CAAC,EAAM,YAAY,MAAM;mBAChC,EAAc;YACrB,EAAA,UAAU;;;OAKpB,OAAQ,CACN,GAAG,EAAA,gBACH,EAAA,kBACA,EAAA,iBAAiB,CACf,GAAI,CAAE,aAAc,8BAA+B,SAAU,mBAAoB,IAAK,kBAAmB,CACzG,GAAI,CAAE,aAAc,8BAA+B,SAAU,iBAAkB,IAAK,gBAAiB,CACtG,CAAC,CACF,EAAA,QACD,CACD,IAAK,YACN,CAAC"}

package/dist/alert.js

@@ -0,0 +1,85 @@
+import { sizeVariantMixin as e } from "./styles/mixins/shape.css.js";
+import { forcedColorsMixin as t } from "./styles/mixins/theme.css.js";
+import { formFieldMixins as n } from "./styles/index.js";
+import { closeIcon as r } from "./icons.js";
+import { awaitExit as i } from "./utils/animation.js";
+import a from "./feedback/alert/alert.css?inline.js";
+import { defineComponent as o, guard as s, html as c, onMount as l, onSlotChange as u, signal as d } from "@vielzeug/craftit";
+//#region src/feedback/alert/alert.ts
+var f = o({
+	props: {
+		accented: { default: !1 },
+		color: { default: void 0 },
+		dismissible: { default: !1 },
+		heading: { default: "" },
+		horizontal: { default: !1 },
+		rounded: { default: void 0 },
+		size: { default: void 0 },
+		variant: { default: void 0 }
+	},
+	setup({ emit: e, host: t, props: n }) {
+		let a = s(() => n.dismissible.value, (n) => {
+			t.setAttribute("dismissing", ""), i(t, () => {
+				t.removeAttribute("dismissing"), t.setAttribute("dismissed", ""), e("dismiss", { originalEvent: n });
+			});
+		}), o = d(!1), f = d(!1);
+		return l(() => {
+			u("icon", (e) => {
+				o.value = e.length > 0;
+			}), u("actions", (e) => {
+				f.value = e.length > 0;
+			});
+		}), c`
+      <div class="alert" :role="${() => n.color.value === "error" ? "alert" : "status"}" part="alert">
+        <span class="icon" part="icon" aria-hidden="true" ?hidden=${() => !o.value}>
+          <slot name="icon"></slot>
+        </span>
+        <div class="header" part="header" ?hidden=${() => !n.heading.value}>
+          <span class="heading" part="heading">${() => n.heading.value}</span>
+          <span class="meta" part="meta">
+            <slot name="meta"></slot>
+          </span>
+        </div>
+        <div class="body" part="body">
+          <div class="content" part="content">
+            <slot></slot>
+          </div>
+        </div>
+        <div class="actions" part="actions" ?hidden=${() => !f.value}>
+          <slot name="actions"></slot>
+        </div>
+        <button
+          class="close"
+          part="close"
+          type="button"
+          aria-label="Dismiss alert"
+          ?hidden=${() => !n.dismissible.value}
+          @click=${a}>
+          ${r}
+        </button>
+      </div>
+    `;
+	},
+	styles: [
+		...n,
+		t,
+		e({
+			lg: {
+				"--_padding": "var(--size-4) var(--size-5)",
+				fontSize: "var(--text-base)",
+				gap: "var(--size-3-5)"
+			},
+			sm: {
+				"--_padding": "var(--size-2) var(--size-3)",
+				fontSize: "var(--text-xs)",
+				gap: "var(--size-2)"
+			}
+		}),
+		a
+	],
+	tag: "bit-alert"
+});
+//#endregion
+export { f as ALERT_TAG };
+
+//# sourceMappingURL=alert.js.map

package/dist/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","names":[],"sources":["../src/feedback/alert/alert.ts"],"sourcesContent":["import { defineComponent, guard, html, onMount, onSlotChange, signal } from '@vielzeug/craftit';\n\nimport type { ComponentSize, RoundedSize, ThemeColor } from '../../types';\n\nimport { closeIcon } from '../../icons';\nimport { forcedColorsMixin, formFieldMixins, sizeVariantMixin } from '../../styles';\nimport { awaitExit } from '../../utils/animation';\nimport componentStyles from './alert.css?inline';\n\nexport type BitAlertEvents = {\n  dismiss: { originalEvent: MouseEvent };\n};\n\nexport type BitAlertProps = {\n  /** Show a left accent border (for flat/bordered variants) */\n  accented?: boolean;\n  /** Theme color */\n  color?: ThemeColor;\n  /** Show a dismissable (×) button */\n  dismissible?: boolean;\n  /** Heading text shown above the content */\n  heading?: string;\n  /** Position action buttons to the right instead of below */\n  horizontal?: boolean;\n  /** Border radius */\n  rounded?: RoundedSize | '';\n  /** Alert size */\n  size?: ComponentSize;\n  /** Visual style variant */\n  variant?: 'solid' | 'flat' | 'bordered';\n};\n\n/**\n * A status/feedback banner with optional heading, icon slot, and dismiss button.\n *\n * @element bit-alert\n *\n * @attr {string} color - Theme color (primary/success/warning/error…)\n * @attr {string} variant - Visual style: 'flat' | 'solid' | 'bordered'\n * @attr {string} size - Size: 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius size\n * @attr {string} heading - Bold heading text above the content\n * @attr {boolean} dismissible - Show a close (×) button\n * @attr {boolean} accented - Add a left accent border (flat/bordered only)\n * @attr {boolean} horizontal - Position action buttons to the right instead of below\n *\n * @fires dismiss - Fired when the alert is dismissed\n *\n * @slot - Default slot for the alert message content\n * @slot icon - Icon on the left side\n * @slot meta - Metadata displayed alongside the heading (lighter, right-aligned)\n * @slot actions - Action buttons shown below the message\n *\n * @cssprop --alert-bg - Background color\n * @cssprop --alert-color - Text/icon color\n * @cssprop --alert-border-color - Border color\n * @cssprop --alert-radius - Border radius\n * @cssprop --alert-padding - Padding\n * @cssprop --alert-gap - Gap between icon, body, and close button\n * @cssprop --alert-font-size - Font size\n *\n * @example\n * ```html\n * <bit-alert color=\"success\">Your changes have been saved.</bit-alert>\n * <bit-alert color=\"error\" variant=\"solid\" dismissible heading=\"Something went wrong\">\n *   Please try again later.\n * </bit-alert>\n * ```\n */\nexport const ALERT_TAG = defineComponent<BitAlertProps, BitAlertEvents>({\n  props: {\n    accented: { default: false },\n    color: { default: undefined },\n    dismissible: { default: false },\n    heading: { default: '' },\n    horizontal: { default: false },\n    rounded: { default: undefined },\n    size: { default: undefined },\n    variant: { default: undefined },\n  },\n  setup({ emit, host, props }) {\n    const handleDismiss = guard(\n      () => props.dismissible.value,\n      (e: MouseEvent) => {\n        host.setAttribute('dismissing', '');\n        awaitExit(host, () => {\n          host.removeAttribute('dismissing');\n          host.setAttribute('dismissed', '');\n          emit('dismiss', { originalEvent: e });\n        });\n      },\n    );\n    const hasIcon = signal(false);\n    const hasActions = signal(false);\n\n    onMount(() => {\n      onSlotChange('icon', (els) => {\n        hasIcon.value = els.length > 0;\n      });\n      onSlotChange('actions', (els) => {\n        hasActions.value = els.length > 0;\n      });\n    });\n\n    return html`\n      <div class=\"alert\" :role=\"${() => (props.color.value === 'error' ? 'alert' : 'status')}\" part=\"alert\">\n        <span class=\"icon\" part=\"icon\" aria-hidden=\"true\" ?hidden=${() => !hasIcon.value}>\n          <slot name=\"icon\"></slot>\n        </span>\n        <div class=\"header\" part=\"header\" ?hidden=${() => !props.heading.value}>\n          <span class=\"heading\" part=\"heading\">${() => props.heading.value}</span>\n          <span class=\"meta\" part=\"meta\">\n            <slot name=\"meta\"></slot>\n          </span>\n        </div>\n        <div class=\"body\" part=\"body\">\n          <div class=\"content\" part=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n        <div class=\"actions\" part=\"actions\" ?hidden=${() => !hasActions.value}>\n          <slot name=\"actions\"></slot>\n        </div>\n        <button\n          class=\"close\"\n          part=\"close\"\n          type=\"button\"\n          aria-label=\"Dismiss alert\"\n          ?hidden=${() => !props.dismissible.value}\n          @click=${handleDismiss}>\n          ${closeIcon}\n        </button>\n      </div>\n    `;\n  },\n  styles: [\n    ...formFieldMixins,\n    forcedColorsMixin,\n    sizeVariantMixin({\n      lg: { '--_padding': 'var(--size-4) var(--size-5)', fontSize: 'var(--text-base)', gap: 'var(--size-3-5)' },\n      sm: { '--_padding': 'var(--size-2) var(--size-3)', fontSize: 'var(--text-xs)', gap: 'var(--size-2)' },\n    }),\n    componentStyles,\n  ],\n  tag: 'bit-alert',\n});\n"],"mappings":";;;;;;;;AAqEA,IAAa,IAAY,EAA+C;CACtE,OAAO;EACL,UAAU,EAAE,SAAS,IAAO;EAC5B,OAAO,EAAE,SAAS,KAAA,GAAW;EAC7B,aAAa,EAAE,SAAS,IAAO;EAC/B,SAAS,EAAE,SAAS,IAAI;EACxB,YAAY,EAAE,SAAS,IAAO;EAC9B,SAAS,EAAE,SAAS,KAAA,GAAW;EAC/B,MAAM,EAAE,SAAS,KAAA,GAAW;EAC5B,SAAS,EAAE,SAAS,KAAA,GAAW;EAChC;CACD,MAAM,EAAE,SAAM,SAAM,YAAS;EAC3B,IAAM,IAAgB,QACd,EAAM,YAAY,QACvB,MAAkB;AAEjB,GADA,EAAK,aAAa,cAAc,GAAG,EACnC,EAAU,SAAY;AAGpB,IAFA,EAAK,gBAAgB,aAAa,EAClC,EAAK,aAAa,aAAa,GAAG,EAClC,EAAK,WAAW,EAAE,eAAe,GAAG,CAAC;KACrC;IAEL,EACK,IAAU,EAAO,GAAM,EACvB,IAAa,EAAO,GAAM;AAWhC,SATA,QAAc;AAIZ,GAHA,EAAa,SAAS,MAAQ;AAC5B,MAAQ,QAAQ,EAAI,SAAS;KAC7B,EACF,EAAa,YAAY,MAAQ;AAC/B,MAAW,QAAQ,EAAI,SAAS;KAChC;IACF,EAEK,CAAI;wCAC0B,EAAM,MAAM,UAAU,UAAU,UAAU,SAAU;0EACnB,CAAC,EAAQ,MAAM;;;0DAG/B,CAAC,EAAM,QAAQ,MAAM;uDACxB,EAAM,QAAQ,MAAM;;;;;;;;;;4DAUf,CAAC,EAAW,MAAM;;;;;;;;0BAQpD,CAAC,EAAM,YAAY,MAAM;mBAChC,EAAc;YACrB,EAAU;;;;;CAKpB,QAAQ;EACN,GAAG;EACH;EACA,EAAiB;GACf,IAAI;IAAE,cAAc;IAA+B,UAAU;IAAoB,KAAK;IAAmB;GACzG,IAAI;IAAE,cAAc;IAA+B,UAAU;IAAkB,KAAK;IAAiB;GACtG,CAAC;EACF;EACD;CACD,KAAK;CACN,CAAC"}

package/dist/avatar.cjs

@@ -0,0 +1,37 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./styles/mixins/shape.css.cjs`),t=require(`./styles/mixins/theme.css.cjs`);require(`./styles/index.cjs`);const n=require(`./content/avatar/avatar.css?inline.cjs`),r=require(`./content/avatar/avatar-group.css?inline.cjs`);let i=require(`@vielzeug/craftit`);var a={away:`Away`,busy:`Busy`,offline:`Offline`,online:`Online`},o=(0,i.defineComponent)({props:{alt:{default:void 0},color:{default:void 0},initials:{default:void 0},rounded:{default:void 0},size:{default:void 0},src:{default:void 0},status:{default:void 0}},setup({props:e}){let t=(0,i.signal)(!1);(0,i.watch)(e.src,()=>{t.value=!1});let n=e=>{e&&(e.addEventListener(`error`,()=>{t.value=!0}),e.addEventListener(`load`,()=>{t.value=!1}))},r=(0,i.computed)(()=>{if(e.initials.value)return e.initials.value.slice(0,2);let t=e.alt.value;if(!t)return``;let n=t.trim().split(/\s+/);return n.length>=2?(n[0][0]+n[n.length-1][0]).toUpperCase():n[0].slice(0,2).toUpperCase()}),o=(0,i.computed)(()=>!!e.src.value&&!t.value),s=(0,i.computed)(()=>!o.value&&!!r.value),c=(0,i.computed)(()=>!o.value&&!s.value),l=(0,i.computed)(()=>{let t=e.alt.value||null,n=e.status.value,r=n?a[n]:null;return!t&&!r?null:t?r?`${t}, ${r}`:t:`Status: ${r}`});return i.html`
+      <span
+        class="avatar"
+        part="avatar"
+        :aria-label="${()=>l.value}"
+        :role="${()=>l.value?`img`:null}">
+        ${()=>e.src.value?i.html`<img
+                ref=${n}
+                part="img"
+                :src="${()=>e.src.value}"
+                :alt="${()=>e.alt.value||``}"
+                ?hidden="${()=>!o.value}"
+                aria-hidden="true" />`:``}
+        ${()=>s.value?i.html`<span class="initials" part="initials" aria-hidden="true">${()=>r.value}</span>`:``}
+        ${()=>c.value?i.html`<span class="icon-fallback" part="fallback" aria-hidden="true">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  width="55%"
+                  height="55%">
+                  <path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5.33 0-8 2.67-8 4v1h16v-1c0-1.33-2.67-4-8-4Z" />
+                </svg>
+              </span>`:``}
+      </span>
+      ${()=>e.status.value?i.html`<span
+              class="status"
+              part="status"
+              :data-status="${()=>e.status.value}"
+              aria-hidden="true"></span>`:``}
+    `},styles:[t.colorThemeMixin,e.roundedVariantMixin,e.sizeVariantMixin({lg:{fontSize:`var(--avatar-font-size, var(--text-base))`,size:`var(--avatar-size, var(--size-14))`},md:{fontSize:`var(--avatar-font-size, var(--text-sm))`,size:`var(--avatar-size, var(--size-10))`},sm:{fontSize:`var(--avatar-font-size, var(--text-xs))`,size:`var(--avatar-size, var(--size-7))`}}),n.default],tag:`bit-avatar`}),s=(0,i.defineComponent)({props:{max:{default:5},total:{default:void 0}},setup({host:e,props:t}){let n=(0,i.signal)(0);return(0,i.onMount)(()=>{(0,i.onSlotChange)(`default`,()=>{let r=[...e.querySelectorAll(`bit-avatar`)],i=Number(t.max.value)||5,a=Math.max(0,r.length-i);n.value=t.total.value==null?a:Number(t.total.value)-i,r.forEach((e,t)=>{t>=i?e.setAttribute(`data-avatar-group-hidden`,``):e.removeAttribute(`data-avatar-group-hidden`)})})}),i.html`
+      <slot></slot>
+      ${()=>n.value>0?i.html`<span class="overflow-badge" part="overflow" aria-label="${()=>`+${n.value} more`}">
+              +${()=>n.value}
+            </span>`:``}
+    `},styles:[r.default],tag:`bit-avatar-group`});exports.AVATAR_GROUP_TAG=s,exports.AVATAR_TAG=o;
+//# sourceMappingURL=avatar.cjs.map

package/dist/avatar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.cjs","names":[],"sources":["../src/content/avatar/avatar.ts"],"sourcesContent":["import { computed, defineComponent, html, onMount, onSlotChange, signal, watch } from '@vielzeug/craftit';\n\nimport type { ComponentSize, RoundedSize, ThemeColor } from '../../types';\n\nimport { colorThemeMixin, roundedVariantMixin, sizeVariantMixin } from '../../styles';\n// ============================================\n// Styles\n// ============================================\nimport componentStyles from './avatar.css?inline';\n\n// ============================================\n// Types\n// ============================================\n\nexport type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';\n\nconst STATUS_LABELS: Record<AvatarStatus, string> = {\n  away: 'Away',\n  busy: 'Busy',\n  offline: 'Offline',\n  online: 'Online',\n};\n\n/** Avatar component properties */\nexport type BitAvatarProps = {\n  /** Alt text for the image; also used to derive initials when no `initials` prop is given */\n  alt?: string;\n  /** Theme color (used for initials background) */\n  color?: ThemeColor;\n  /** Explicit initials to display when no image is available (e.g. \"JD\") */\n  initials?: string;\n  /** Border radius */\n  rounded?: RoundedSize | '';\n  /** Component size */\n  size?: ComponentSize;\n  /** Image source URL */\n  src?: string;\n  /** Online presence indicator */\n  status?: AvatarStatus;\n};\n\n// ============================================\n// Component\n// ============================================\n\n/**\n * Displays a user avatar: image → initials → generic fallback icon, in that priority order.\n *\n * @element bit-avatar\n *\n * @attr {string} src - Image source URL\n * @attr {string} alt - Image alt text (also used to derive initials)\n * @attr {string} initials - Explicit initials (up to 2 chars)\n * @attr {string} color - Theme color for initials background\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius\n * @attr {string} status - 'online' | 'offline' | 'busy' | 'away'\n *\n * @cssprop --avatar-size - Diameter of the avatar\n * @cssprop --avatar-bg - Background color\n * @cssprop --avatar-color - Text/icon color\n * @cssprop --avatar-radius - Border radius\n * @cssprop --avatar-border - Border shorthand\n * @cssprop --avatar-border-color - Border color (also controls status dot border)\n *\n * @example\n * ```html\n * <bit-avatar src=\"/jane.jpg\" alt=\"Jane Doe\"></bit-avatar>\n * <bit-avatar initials=\"JD\" color=\"primary\"></bit-avatar>\n * <bit-avatar alt=\"John Smith\" status=\"online\"></bit-avatar>\n * ```\n */\nexport const AVATAR_TAG = defineComponent<BitAvatarProps>({\n  props: {\n    alt: { default: undefined },\n    color: { default: undefined },\n    initials: { default: undefined },\n    rounded: { default: undefined },\n    size: { default: undefined },\n    src: { default: undefined },\n    status: { default: undefined },\n  },\n  setup({ props }) {\n    const imgFailed = signal(false);\n\n    // Reset stale error state whenever src changes\n    watch(props.src, () => {\n      imgFailed.value = false;\n    });\n\n    // Attach load/error listeners reactively when the img element mounts\n    const attachImgListeners = (el: HTMLImageElement | null) => {\n      if (!el) return;\n\n      el.addEventListener('error', () => {\n        imgFailed.value = true;\n      });\n      el.addEventListener('load', () => {\n        imgFailed.value = false;\n      });\n    };\n    const derivedInitials = computed(() => {\n      if (props.initials.value) return props.initials.value.slice(0, 2);\n\n      const alt = props.alt.value;\n\n      if (!alt) return '';\n\n      const parts = alt.trim().split(/\\s+/);\n\n      if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();\n\n      return parts[0].slice(0, 2).toUpperCase();\n    });\n    const showImage = computed(() => !!props.src.value && !imgFailed.value);\n    const showInitials = computed(() => !showImage.value && !!derivedInitials.value);\n    const showFallback = computed(() => !showImage.value && !showInitials.value);\n    // Combines name and status into a single accessible label so AT announces them together\n    const avatarLabel = computed(() => {\n      const name = (props.alt.value as string | undefined) || null;\n      const statusKey = props.status.value as AvatarStatus | undefined;\n      const status = statusKey ? STATUS_LABELS[statusKey] : null;\n\n      if (!name && !status) return null;\n\n      if (!name) return `Status: ${status}`;\n\n      if (!status) return name;\n\n      return `${name}, ${status}`;\n    });\n\n    return html`\n      <span\n        class=\"avatar\"\n        part=\"avatar\"\n        :aria-label=\"${() => avatarLabel.value}\"\n        :role=\"${() => (avatarLabel.value ? 'img' : null)}\">\n        ${() =>\n          props.src.value\n            ? html`<img\n                ref=${attachImgListeners}\n                part=\"img\"\n                :src=\"${() => props.src.value}\"\n                :alt=\"${() => props.alt.value || ''}\"\n                ?hidden=\"${() => !showImage.value}\"\n                aria-hidden=\"true\" />`\n            : ''}\n        ${() =>\n          showInitials.value\n            ? html`<span class=\"initials\" part=\"initials\" aria-hidden=\"true\">${() => derivedInitials.value}</span>`\n            : ''}\n        ${() =>\n          showFallback.value\n            ? html`<span class=\"icon-fallback\" part=\"fallback\" aria-hidden=\"true\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"currentColor\"\n                  width=\"55%\"\n                  height=\"55%\">\n                  <path d=\"M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5.33 0-8 2.67-8 4v1h16v-1c0-1.33-2.67-4-8-4Z\" />\n                </svg>\n              </span>`\n            : ''}\n      </span>\n      ${() =>\n        props.status.value\n          ? html`<span\n              class=\"status\"\n              part=\"status\"\n              :data-status=\"${() => props.status.value}\"\n              aria-hidden=\"true\"></span>`\n          : ''}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    roundedVariantMixin,\n    sizeVariantMixin({\n      lg: { fontSize: 'var(--avatar-font-size, var(--text-base))', size: 'var(--avatar-size, var(--size-14))' },\n      md: { fontSize: 'var(--avatar-font-size, var(--text-sm))', size: 'var(--avatar-size, var(--size-10))' },\n      sm: { fontSize: 'var(--avatar-font-size, var(--text-xs))', size: 'var(--avatar-size, var(--size-7))' },\n    }),\n    componentStyles,\n  ],\n  tag: 'bit-avatar',\n});\n\n// ============================================\n// AvatarGroup\n// ============================================\n\nimport groupStyles from './avatar-group.css?inline';\n\n/** AvatarGroup component properties */\nexport type BitAvatarGroupProps = {\n  /** Maximum number of avatars to show before showing a +N badge */\n  max?: number;\n  /** Total count shown in the overflow badge (defaults to the actual hidden count) */\n  total?: number;\n};\n\n/**\n * Groups multiple `bit-avatar` elements in a stacked, overlapping row.\n *\n * @element bit-avatar-group\n *\n * @attr {number} max - Max visible avatars before overflow badge (default: 5)\n * @attr {number} total - Override the total count displayed in the badge\n *\n * @slot - `bit-avatar` elements\n *\n * @cssprop --avatar-group-overlap - Negative margin creating the overlap (default: -0.75rem)\n *\n * @example\n * ```html\n * <bit-avatar-group max=\"3\">\n *   <bit-avatar src=\"/a.jpg\" alt=\"Alice\"></bit-avatar>\n *   <bit-avatar src=\"/b.jpg\" alt=\"Bob\"></bit-avatar>\n *   <bit-avatar src=\"/c.jpg\" alt=\"Carol\"></bit-avatar>\n *   <bit-avatar src=\"/d.jpg\" alt=\"Dave\"></bit-avatar>\n * </bit-avatar-group>\n * ```\n */\nexport const AVATAR_GROUP_TAG = defineComponent<BitAvatarGroupProps>({\n  props: {\n    max: { default: 5 },\n    total: { default: undefined },\n  },\n  setup({ host, props }) {\n    const overflowCount = signal(0);\n\n    onMount(() => {\n      const updateVisibility = () => {\n        const avatars = [...host.querySelectorAll('bit-avatar')];\n        const max = Number(props.max.value) || 5;\n        const hidden = Math.max(0, avatars.length - max);\n\n        overflowCount.value = props.total.value != null ? Number(props.total.value) - max : hidden;\n        avatars.forEach((a, i) => {\n          if (i >= max) a.setAttribute('data-avatar-group-hidden', '');\n          else a.removeAttribute('data-avatar-group-hidden');\n        });\n      };\n\n      onSlotChange('default', updateVisibility);\n    });\n\n    return html`\n      <slot></slot>\n      ${() =>\n        overflowCount.value > 0\n          ? html`<span class=\"overflow-badge\" part=\"overflow\" aria-label=\"${() => `+${overflowCount.value} more`}\">\n              +${() => overflowCount.value}\n            </span>`\n          : ''}\n    `;\n  },\n  styles: [groupStyles],\n  tag: 'bit-avatar-group',\n});\n"],"mappings":"oVAgBA,IAAM,EAA8C,CAClD,KAAM,OACN,KAAM,OACN,QAAS,UACT,OAAQ,SACT,CAmDY,GAAA,EAAA,EAAA,iBAA6C,CACxD,MAAO,CACL,IAAK,CAAE,QAAS,IAAA,GAAW,CAC3B,MAAO,CAAE,QAAS,IAAA,GAAW,CAC7B,SAAU,CAAE,QAAS,IAAA,GAAW,CAChC,QAAS,CAAE,QAAS,IAAA,GAAW,CAC/B,KAAM,CAAE,QAAS,IAAA,GAAW,CAC5B,IAAK,CAAE,QAAS,IAAA,GAAW,CAC3B,OAAQ,CAAE,QAAS,IAAA,GAAW,CAC/B,CACD,MAAM,CAAE,SAAS,CACf,IAAM,GAAA,EAAA,EAAA,QAAmB,GAAM,EAG/B,EAAA,EAAA,OAAM,EAAM,QAAW,CACrB,EAAU,MAAQ,IAClB,CAGF,IAAM,EAAsB,GAAgC,CACrD,IAEL,EAAG,iBAAiB,YAAe,CACjC,EAAU,MAAQ,IAClB,CACF,EAAG,iBAAiB,WAAc,CAChC,EAAU,MAAQ,IAClB,GAEE,GAAA,EAAA,EAAA,cAAiC,CACrC,GAAI,EAAM,SAAS,MAAO,OAAO,EAAM,SAAS,MAAM,MAAM,EAAG,EAAE,CAEjE,IAAM,EAAM,EAAM,IAAI,MAEtB,GAAI,CAAC,EAAK,MAAO,GAEjB,IAAM,EAAQ,EAAI,MAAM,CAAC,MAAM,MAAM,CAIrC,OAFI,EAAM,QAAU,GAAW,EAAM,GAAG,GAAK,EAAM,EAAM,OAAS,GAAG,IAAI,aAAa,CAE/E,EAAM,GAAG,MAAM,EAAG,EAAE,CAAC,aAAa,EACzC,CACI,GAAA,EAAA,EAAA,cAA2B,CAAC,CAAC,EAAM,IAAI,OAAS,CAAC,EAAU,MAAM,CACjE,GAAA,EAAA,EAAA,cAA8B,CAAC,EAAU,OAAS,CAAC,CAAC,EAAgB,MAAM,CAC1E,GAAA,EAAA,EAAA,cAA8B,CAAC,EAAU,OAAS,CAAC,EAAa,MAAM,CAEtE,GAAA,EAAA,EAAA,cAA6B,CACjC,IAAM,EAAQ,EAAM,IAAI,OAAgC,KAClD,EAAY,EAAM,OAAO,MACzB,EAAS,EAAY,EAAc,GAAa,KAQtD,MANI,CAAC,GAAQ,CAAC,EAAe,KAExB,EAEA,EAEE,GAAG,EAAK,IAAI,IAFC,EAFF,WAAW,KAK7B,CAEF,MAAO,GAAA,IAAI;;;;2BAIc,EAAY,MAAM;qBACvB,EAAY,MAAQ,MAAQ,KAAM;cAEhD,EAAM,IAAI,MACN,EAAA,IAAI;sBACI,EAAmB;;4BAEX,EAAM,IAAI,MAAM;4BAChB,EAAM,IAAI,OAAS,GAAG;+BACnB,CAAC,EAAU,MAAM;uCAEpC,GAAG;cAEP,EAAa,MACT,EAAA,IAAI,iEAAmE,EAAgB,MAAM,SAC7F,GAAG;cAEP,EAAa,MACT,EAAA,IAAI;;;;;;;;;uBAUJ,GAAG;;YAGT,EAAM,OAAO,MACT,EAAA,IAAI;;;kCAGoB,EAAM,OAAO,MAAM;0CAE3C,GAAG;OAGb,OAAQ,CACN,EAAA,gBACA,EAAA,oBACA,EAAA,iBAAiB,CACf,GAAI,CAAE,SAAU,4CAA6C,KAAM,qCAAsC,CACzG,GAAI,CAAE,SAAU,0CAA2C,KAAM,qCAAsC,CACvG,GAAI,CAAE,SAAU,0CAA2C,KAAM,oCAAqC,CACvG,CAAC,CACF,EAAA,QACD,CACD,IAAK,aACN,CAAC,CAsCW,GAAA,EAAA,EAAA,iBAAwD,CACnE,MAAO,CACL,IAAK,CAAE,QAAS,EAAG,CACnB,MAAO,CAAE,QAAS,IAAA,GAAW,CAC9B,CACD,MAAM,CAAE,OAAM,SAAS,CACrB,IAAM,GAAA,EAAA,EAAA,QAAuB,EAAE,CAkB/B,OAhBA,EAAA,EAAA,aAAc,EAaZ,EAAA,EAAA,cAAa,cAZkB,CAC7B,IAAM,EAAU,CAAC,GAAG,EAAK,iBAAiB,aAAa,CAAC,CAClD,EAAM,OAAO,EAAM,IAAI,MAAM,EAAI,EACjC,EAAS,KAAK,IAAI,EAAG,EAAQ,OAAS,EAAI,CAEhD,EAAc,MAAQ,EAAM,MAAM,OAAS,KAAyC,EAAlC,OAAO,EAAM,MAAM,MAAM,CAAG,EAC9E,EAAQ,SAAS,EAAG,IAAM,CACpB,GAAK,EAAK,EAAE,aAAa,2BAA4B,GAAG,CACvD,EAAE,gBAAgB,2BAA2B,EAClD,EAGqC,EACzC,CAEK,EAAA,IAAI;;YAGP,EAAc,MAAQ,EAClB,EAAA,IAAI,gEAAkE,IAAI,EAAc,MAAM,OAAO;qBAC1F,EAAc,MAAM;qBAE/B,GAAG;OAGb,OAAQ,CAAC,EAAA,QAAY,CACrB,IAAK,mBACN,CAAC"}