@vielzeug/buildit 2.0.0 → 2.1.0

package/dist/alert.js

@@ -1,37 +1,27 @@
-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";
+import "./icon.js";
+import { roundableBundle as e, sizableBundle as t, themableBundle as n } from "./inputs/shared/bundles.js";
+import { sizeVariantMixin as r } from "./styles/mixins/shape.css.js";
+import { forcedColorsMixin as i } from "./styles/mixins/theme.css.js";
+import { formFieldMixins as a } from "./styles/index.js";
+import { awaitExit as o } from "./utils/animation.js";
+import s from "./feedback/alert/alert.css?inline.js";
+import { define as c, html as l } from "@vielzeug/craftit";
 //#region src/feedback/alert/alert.ts
-var f = o({
+var u = c("bit-alert", {
 	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 }
+		...n,
+		...t,
+		...e,
+		accented: !1,
+		dismissible: !1,
+		heading: "",
+		horizontal: !1,
+		variant: 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`
+	setup({ emit: e, host: t, props: n, slots: r }) {
+		return l`
       <div class="alert" :role="${() => n.color.value === "error" ? "alert" : "status"}" part="alert">
-        <span class="icon" part="icon" aria-hidden="true" ?hidden=${() => !o.value}>
+        <span class="icon" part="icon" aria-hidden="true" ?hidden=${() => !r.has("icon").value}>
           <slot name="icon"></slot>
         </span>
         <div class="header" part="header" ?hidden=${() => !n.heading.value}>
@@ -45,7 +35,7 @@ var f = o({
             <slot></slot>
           </div>
         </div>
-        <div class="actions" part="actions" ?hidden=${() => !f.value}>
+        <div class="actions" part="actions" ?hidden=${() => !r.has("actions").value}>
           <slot name="actions"></slot>
         </div>
         <button
@@ -54,16 +44,20 @@ var f = o({
           type="button"
           aria-label="Dismiss alert"
           ?hidden=${() => !n.dismissible.value}
-          @click=${a}>
-          ${r}
+          @click=${(r) => {
+			n.dismissible.value && (t.el.setAttribute("dismissing", ""), o(t.el, () => {
+				t.el.removeAttribute("dismissing"), t.el.setAttribute("dismissed", ""), e("dismiss", { originalEvent: r });
+			}));
+		}}>
+          <bit-icon name="x" size="16" stroke-width="2.5" aria-hidden="true"></bit-icon>
         </button>
       </div>
     `;
 	},
 	styles: [
-		...n,
-		t,
-		e({
+		...a,
+		i,
+		r({
 			lg: {
 				"--_padding": "var(--size-4) var(--size-5)",
 				fontSize: "var(--text-base)",
@@ -75,11 +69,10 @@ var f = o({
 				gap: "var(--size-2)"
 			}
 		}),
-		a
-	],
-	tag: "bit-alert"
+		s
+	]
 });
 //#endregion
-export { f as ALERT_TAG };
+export { u as ALERT_TAG };
 
 //# sourceMappingURL=alert.js.map

package/dist/alert.js.map

@@ -1 +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"}
+{"version":3,"file":"alert.js","names":[],"sources":["../src/feedback/alert/alert.ts"],"sourcesContent":["import { define, html } from '@vielzeug/craftit';\n\nimport type { ComponentSize, RoundedSize, ThemeColor } from '../../types';\n\nimport '../../content/icon/icon';\nimport { type PropBundle, roundableBundle, sizableBundle, themableBundle } from '../../inputs/shared/bundles';\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 dismissible (×) 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 = define<BitAlertProps, BitAlertEvents>('bit-alert', {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...roundableBundle,\n    accented: false,\n    dismissible: false,\n    heading: '',\n    horizontal: false,\n    variant: undefined,\n  } satisfies PropBundle<BitAlertProps>,\n  setup({ emit, host, props, slots }) {\n    const handleDismiss = (e: MouseEvent) => {\n      if (!props.dismissible.value) return;\n\n      host.el.setAttribute('dismissing', '');\n      awaitExit(host.el, () => {\n        host.el.removeAttribute('dismissing');\n        host.el.setAttribute('dismissed', '');\n        emit('dismiss', { originalEvent: e });\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=${() => !slots.has('icon').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=${() => !slots.has('actions').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          <bit-icon name=\"x\" size=\"16\" stroke-width=\"2.5\" aria-hidden=\"true\"></bit-icon>\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});\n"],"mappings":";;;;;;;;;AAsEA,IAAa,IAAY,EAAsC,aAAa;CAC1E,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,UAAU;EACV,aAAa;EACb,SAAS;EACT,YAAY;EACZ,SAAS,KAAA;EACV;CACD,MAAM,EAAE,SAAM,SAAM,UAAO,YAAS;AAYlC,SAAO,CAAI;wCAC0B,EAAM,MAAM,UAAU,UAAU,UAAU,SAAU;0EACnB,CAAC,EAAM,IAAI,OAAO,CAAC,MAAM;;;0DAGzC,CAAC,EAAM,QAAQ,MAAM;uDACxB,EAAM,QAAQ,MAAM;;;;;;;;;;4DAUf,CAAC,EAAM,IAAI,UAAU,CAAC,MAAM;;;;;;;;0BAQ9D,CAAC,EAAM,YAAY,MAAM;oBAnCxB,MAAkB;AAClC,KAAM,YAAY,UAEvB,EAAK,GAAG,aAAa,cAAc,GAAG,EACtC,EAAU,EAAK,UAAU;AAGvB,IAFA,EAAK,GAAG,gBAAgB,aAAa,EACrC,EAAK,GAAG,aAAa,aAAa,GAAG,EACrC,EAAK,WAAW,EAAE,eAAe,GAAG,CAAC;KACrC;IA4ByB;;;;;;CAM/B,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;CACF,CAAC"}

package/dist/async.cjs

@@ -0,0 +1,36 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./packages/craftit/src/directives/choose.cjs`),t=require(`./packages/craftit/src/directives/when.cjs`);require(`./packages/craftit/src/directives/index.cjs`),require(`./icon.cjs`);const n=require(`./styles/mixins/accessibility.css.cjs`);require(`./styles/index.cjs`),require(`./skeleton.cjs`);const r=require(`./feedback/async/async.css?inline.cjs`);let i=require(`@vielzeug/craftit`);var a=(0,i.define)(`bit-async`,{props:{"empty-description":void 0,"empty-label":`No content yet`,"error-description":void 0,"error-label":`Something went wrong`,retryable:!1,status:`success`},setup({emit:n,host:r,props:a}){let o=(0,i.signal)(!1),s=(0,i.signal)(!1),c=(0,i.signal)(!1),l=()=>{let e=Array.from(r.el.children);o.value=e.some(e=>e.getAttribute(`slot`)===`loading`),s.value=e.some(e=>e.getAttribute(`slot`)===`empty`),c.value=e.some(e=>e.getAttribute(`slot`)===`error`)};l(),(0,i.onMount)(()=>{l();let e=new MutationObserver(()=>l());return e.observe(r.el,{attributeFilter:[`slot`],attributes:!0,childList:!0,subtree:!0}),()=>e.disconnect()}),r.bind(`attr`,{ariaBusy:()=>a.status.value===`loading`?`true`:`false`,ariaLabel:()=>a.status.value===`loading`?`Loading…`:null,ariaLive:()=>a.status.value===`error`?`assertive`:`polite`});let u=(e,n)=>t.when({condition:()=>!!n.value,then:()=>i.html`<p class="${e}">${()=>n.value}</p>`}),d=({action:e,description:t,icon:n,label:r,role:a,stateClass:o})=>i.html`
+      <div class="${o}" role="${a}">
+        <div class="icon">
+          <bit-icon name="${n}" size="100%" stroke-width="1.75" aria-hidden="true"></bit-icon>
+        </div>
+        ${u(`title`,r)} ${u(`description`,t)} ${e?.()}
+      </div>
+    `,f=()=>i.html`
+      <div class="loading-default" aria-hidden="true">
+        <bit-skeleton variant="text" lines="1" width="40%"></bit-skeleton>
+        <bit-skeleton variant="text" lines="3" width="100%"></bit-skeleton>
+        <bit-skeleton variant="text" lines="1" width="60%"></bit-skeleton>
+      </div>
+    `,p=()=>i.html`
+      <div class="region" role="presentation">
+        <slot></slot>
+      </div>
+    `;return i.html`${e.choose({cases:[[`idle`,()=>i.html`<div class="region" role="presentation"></div>`],[`loading`,()=>i.html`
+            <div class="region" role="status">
+              ${t.when({condition:()=>o.value,else:f,then:()=>i.html`<slot name="loading"></slot>`})}
+            </div>
+          `],[`empty`,()=>i.html`
+            <div class="region">
+              ${t.when({condition:()=>s.value,else:()=>d({description:a[`empty-description`],icon:`inbox`,label:a[`empty-label`],role:`status`,stateClass:`empty-state`}),then:()=>i.html`<slot name="empty"></slot>`})}
+            </div>
+          `],[`error`,()=>i.html`
+            <div class="region">
+              ${t.when({condition:()=>c.value,else:()=>d({action:()=>t.when({condition:()=>a.retryable.value,then:()=>i.html`
+                          <button class="retry-btn" type="button" @click=${()=>n(`retry`)}>
+                            <bit-icon name="refresh-cw" size="1em" stroke-width="2" aria-hidden="true"></bit-icon>
+                            Try again
+                          </button>
+                        `}),description:a[`error-description`],icon:`triangle-alert`,label:a[`error-label`],role:`alert`,stateClass:`error-state`}),then:()=>i.html`<slot name="error"></slot>`})}
+            </div>
+          `],[`success`,p]],fallback:p,value:a.status})}`},styles:[n.reducedMotionMixin,r.default]});exports.ASYNC_TAG=a;
+//# sourceMappingURL=async.cjs.map

package/dist/async.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"async.cjs","names":[],"sources":["../src/feedback/async/async.ts"],"sourcesContent":["import { define, html, onMount, signal } from '@vielzeug/craftit';\nimport { choose, when } from '@vielzeug/craftit/directives';\n\nimport '../../content/icon/icon';\nimport { reducedMotionMixin } from '../../styles';\nimport '../skeleton/skeleton';\nimport componentStyles from './async.css?inline';\n\nexport type AsyncStatus = 'idle' | 'loading' | 'empty' | 'error' | 'success';\n\nexport type BitAsyncEvents = {\n  retry: void;\n};\n\nexport type BitAsyncProps = {\n  /** Description shown below the empty label in the default empty state */\n  'empty-description'?: string;\n  /** Descriptive label for the empty state, shown when no custom `empty` slot is provided */\n  'empty-label'?: string;\n  /** Detailed error text shown below the error label in the default error state */\n  'error-description'?: string;\n  /** Descriptive label for the error state, shown when no custom `error` slot is provided */\n  'error-label'?: string;\n  /** Whether to show the retry button in the default error state */\n  retryable?: boolean;\n  /**\n   * Current data-fetch status.\n   * - `idle`    — not yet started; renders nothing\n   * - `loading` — shows the `loading` slot (or a default skeleton stack)\n   * - `empty`   — shows the `empty` slot (or a built-in empty-state illustration)\n   * - `error`   — shows the `error` slot (or a built-in error state with optional retry)\n   * - `success` — shows the default slot (the actual content)\n   */\n  status: AsyncStatus;\n};\n\n/**\n * A composable wrapper that renders the correct UI for each async data-fetch status.\n * Drives `aria-live` and `aria-busy` automatically so screen readers stay informed.\n *\n * @element bit-async\n *\n * @attr {string} status - Data status: 'idle' | 'loading' | 'empty' | 'error' | 'success'\n * @attr {string} empty-label - Heading for the default empty state\n * @attr {string} empty-description - Description for the default empty state\n * @attr {string} error-label - Heading for the default error state\n * @attr {string} error-description - Description for the default error state\n * @attr {boolean} retryable - Show a retry button in the default error state\n *\n * @fires retry - Emitted when the retry button is clicked\n *\n * @slot - Shown when `status=\"success\"` (default)\n * @slot loading - Shown when `status=\"loading\"` (defaults to skeleton stack)\n * @slot empty - Shown when `status=\"empty\"` (defaults to built-in illustration)\n * @slot error - Shown when `status=\"error\"` (defaults to built-in error view)\n *\n * @cssprop --async-color - Icon/text color for default empty/error states\n * @cssprop --async-icon-size - Icon size in default states (default: var(--size-12))\n * @cssprop --async-gap - Gap between elements in default states (default: var(--size-3))\n *\n * @example\n * ```html\n * <!-- Simple usage — let buildit handle empty and error UI -->\n * <bit-async status=\"loading\" empty-label=\"No results\" error-label=\"Failed to load\" retryable>\n *   <my-data-table></my-data-table>\n * </bit-async>\n *\n * <!-- Custom empty slot -->\n * <bit-async status=\"empty\">\n *   <div slot=\"empty\">\n *     <img src=\"/no-results.svg\" alt=\"\" />\n *     <p>Try adjusting your filters.</p>\n *   </div>\n * </bit-async>\n * ```\n */\nexport const ASYNC_TAG = define<BitAsyncProps, BitAsyncEvents>('bit-async', {\n  props: {\n    'empty-description': undefined,\n    'empty-label': 'No content yet',\n    'error-description': undefined,\n    'error-label': 'Something went wrong',\n    retryable: false,\n    // Default to success so slotted content is visible without extra wiring.\n    status: 'success',\n  },\n  setup({ emit, host, props }) {\n    const hasLoadingSlot = signal(false);\n    const hasEmptySlot = signal(false);\n    const hasErrorSlot = signal(false);\n\n    const updateNamedSlotPresence = () => {\n      const children = Array.from(host.el.children);\n\n      hasLoadingSlot.value = children.some((child) => child.getAttribute('slot') === 'loading');\n      hasEmptySlot.value = children.some((child) => child.getAttribute('slot') === 'empty');\n      hasErrorSlot.value = children.some((child) => child.getAttribute('slot') === 'error');\n    };\n\n    updateNamedSlotPresence();\n\n    onMount(() => {\n      updateNamedSlotPresence();\n\n      const observer = new MutationObserver(() => updateNamedSlotPresence());\n\n      observer.observe(host.el, { attributeFilter: ['slot'], attributes: true, childList: true, subtree: true });\n\n      return () => observer.disconnect();\n    });\n\n    // Keep host accessibility state in sync with async status.\n    host.bind('attr', {\n      ariaBusy: () => (props.status.value === 'loading' ? 'true' : 'false'),\n      ariaLabel: () => (props.status.value === 'loading' ? 'Loading…' : null),\n      ariaLive: () => (props.status.value === 'error' ? 'assertive' : 'polite'),\n    });\n\n    const renderText = (className: 'title' | 'description', text: { value: string | undefined }) =>\n      when({\n        condition: () => !!text.value,\n        then: () => html`<p class=\"${className}\">${() => text.value}</p>`,\n      });\n\n    const renderDefaultState = ({\n      action,\n      description,\n      icon,\n      label,\n      role,\n      stateClass,\n    }: {\n      action?: () => unknown;\n      description: { value: string | undefined };\n      icon: string;\n      label: { value: string | undefined };\n      role: 'alert' | 'status';\n      stateClass: 'empty-state' | 'error-state';\n    }) => html`\n      <div class=\"${stateClass}\" role=\"${role}\">\n        <div class=\"icon\">\n          <bit-icon name=\"${icon}\" size=\"100%\" stroke-width=\"1.75\" aria-hidden=\"true\"></bit-icon>\n        </div>\n        ${renderText('title', label)} ${renderText('description', description)} ${action?.()}\n      </div>\n    `;\n\n    const renderLoadingFallback = () => html`\n      <div class=\"loading-default\" aria-hidden=\"true\">\n        <bit-skeleton variant=\"text\" lines=\"1\" width=\"40%\"></bit-skeleton>\n        <bit-skeleton variant=\"text\" lines=\"3\" width=\"100%\"></bit-skeleton>\n        <bit-skeleton variant=\"text\" lines=\"1\" width=\"60%\"></bit-skeleton>\n      </div>\n    `;\n\n    const renderSuccess = () => html`\n      <div class=\"region\" role=\"presentation\">\n        <slot></slot>\n      </div>\n    `;\n\n    return html`${choose({\n      cases: [\n        ['idle', () => html`<div class=\"region\" role=\"presentation\"></div>`],\n\n        [\n          'loading',\n          () => html`\n            <div class=\"region\" role=\"status\">\n              ${when({\n                condition: () => hasLoadingSlot.value,\n                else: renderLoadingFallback,\n                then: () => html`<slot name=\"loading\"></slot>`,\n              })}\n            </div>\n          `,\n        ],\n\n        [\n          'empty',\n          () => html`\n            <div class=\"region\">\n              ${when({\n                condition: () => hasEmptySlot.value,\n                else: () =>\n                  renderDefaultState({\n                    description: props['empty-description'],\n                    icon: 'inbox',\n                    label: props['empty-label'],\n                    role: 'status',\n                    stateClass: 'empty-state',\n                  }),\n                then: () => html`<slot name=\"empty\"></slot>`,\n              })}\n            </div>\n          `,\n        ],\n\n        [\n          'error',\n          () => html`\n            <div class=\"region\">\n              ${when({\n                condition: () => hasErrorSlot.value,\n                else: () =>\n                  renderDefaultState({\n                    action: () =>\n                      when({\n                        condition: () => props.retryable.value,\n                        then: () => html`\n                          <button class=\"retry-btn\" type=\"button\" @click=${() => emit('retry')}>\n                            <bit-icon name=\"refresh-cw\" size=\"1em\" stroke-width=\"2\" aria-hidden=\"true\"></bit-icon>\n                            Try again\n                          </button>\n                        `,\n                      }),\n                    description: props['error-description'],\n                    icon: 'triangle-alert',\n                    label: props['error-label'],\n                    role: 'alert',\n                    stateClass: 'error-state',\n                  }),\n                then: () => html`<slot name=\"error\"></slot>`,\n              })}\n            </div>\n          `,\n        ],\n\n        ['success', renderSuccess],\n      ],\n      fallback: renderSuccess,\n      value: props.status,\n    })}`;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":"qdA4EA,IAAa,GAAA,EAAA,EAAA,QAAkD,YAAa,CAC1E,MAAO,CACL,oBAAqB,IAAA,GACrB,cAAe,iBACf,oBAAqB,IAAA,GACrB,cAAe,uBACf,UAAW,GAEX,OAAQ,UACT,CACD,MAAM,CAAE,OAAM,OAAM,SAAS,CAC3B,IAAM,GAAA,EAAA,EAAA,QAAwB,GAAM,CAC9B,GAAA,EAAA,EAAA,QAAsB,GAAM,CAC5B,GAAA,EAAA,EAAA,QAAsB,GAAM,CAE5B,MAAgC,CACpC,IAAM,EAAW,MAAM,KAAK,EAAK,GAAG,SAAS,CAE7C,EAAe,MAAQ,EAAS,KAAM,GAAU,EAAM,aAAa,OAAO,GAAK,UAAU,CACzF,EAAa,MAAQ,EAAS,KAAM,GAAU,EAAM,aAAa,OAAO,GAAK,QAAQ,CACrF,EAAa,MAAQ,EAAS,KAAM,GAAU,EAAM,aAAa,OAAO,GAAK,QAAQ,EAGvF,GAAyB,EAEzB,EAAA,EAAA,aAAc,CACZ,GAAyB,CAEzB,IAAM,EAAW,IAAI,qBAAuB,GAAyB,CAAC,CAItE,OAFA,EAAS,QAAQ,EAAK,GAAI,CAAE,gBAAiB,CAAC,OAAO,CAAE,WAAY,GAAM,UAAW,GAAM,QAAS,GAAM,CAAC,KAE7F,EAAS,YAAY,EAClC,CAGF,EAAK,KAAK,OAAQ,CAChB,aAAiB,EAAM,OAAO,QAAU,UAAY,OAAS,QAC7D,cAAkB,EAAM,OAAO,QAAU,UAAY,WAAa,KAClE,aAAiB,EAAM,OAAO,QAAU,QAAU,YAAc,SACjE,CAAC,CAEF,IAAM,GAAc,EAAoC,IACtD,EAAA,KAAK,CACH,cAAiB,CAAC,CAAC,EAAK,MACxB,SAAY,EAAA,IAAI,aAAa,EAAU,QAAU,EAAK,MAAM,MAC7D,CAAC,CAEE,GAAsB,CAC1B,SACA,cACA,OACA,QACA,OACA,gBAQI,EAAA,IAAI;oBACM,EAAW,UAAU,EAAK;;4BAElB,EAAK;;UAEvB,EAAW,QAAS,EAAM,CAAC,GAAG,EAAW,cAAe,EAAY,CAAC,GAAG,KAAU,CAAC;;MAInF,MAA8B,EAAA,IAAI;;;;;;MAQlC,MAAsB,EAAA,IAAI;;;;MAMhC,MAAO,GAAA,IAAI,GAAG,EAAA,OAAO,CACnB,MAAO,CACL,CAAC,WAAc,EAAA,IAAI,iDAAiD,CAEpE,CACE,cACM,EAAA,IAAI;;gBAEJ,EAAA,KAAK,CACL,cAAiB,EAAe,MAChC,KAAM,EACN,SAAY,EAAA,IAAI,+BACjB,CAAC,CAAC;;YAGR,CAED,CACE,YACM,EAAA,IAAI;;gBAEJ,EAAA,KAAK,CACL,cAAiB,EAAa,MAC9B,SACE,EAAmB,CACjB,YAAa,EAAM,qBACnB,KAAM,QACN,MAAO,EAAM,eACb,KAAM,SACN,WAAY,cACb,CAAC,CACJ,SAAY,EAAA,IAAI,6BACjB,CAAC,CAAC;;YAGR,CAED,CACE,YACM,EAAA,IAAI;;gBAEJ,EAAA,KAAK,CACL,cAAiB,EAAa,MAC9B,SACE,EAAmB,CACjB,WACE,EAAA,KAAK,CACH,cAAiB,EAAM,UAAU,MACjC,SAAY,EAAA,IAAI;+EACyC,EAAK,QAAQ,CAAC;;;;0BAKxE,CAAC,CACJ,YAAa,EAAM,qBACnB,KAAM,iBACN,MAAO,EAAM,eACb,KAAM,QACN,WAAY,cACb,CAAC,CACJ,SAAY,EAAA,IAAI,6BACjB,CAAC,CAAC;;YAGR,CAED,CAAC,UAAW,EAAc,CAC3B,CACD,SAAU,EACV,MAAO,EAAM,OACd,CAAC,IAEJ,OAAQ,CAAC,EAAA,mBAAoB,EAAA,QAAgB,CAC9C,CAAC"}

package/dist/async.js

@@ -0,0 +1,122 @@
+import { choose as e } from "./packages/craftit/src/directives/choose.js";
+import { when as t } from "./packages/craftit/src/directives/when.js";
+import "./packages/craftit/src/directives/index.js";
+import "./icon.js";
+import { reducedMotionMixin as n } from "./styles/mixins/accessibility.css.js";
+import "./styles/index.js";
+import "./skeleton.js";
+import r from "./feedback/async/async.css?inline.js";
+import { define as i, html as a, onMount as o, signal as s } from "@vielzeug/craftit";
+//#region src/feedback/async/async.ts
+var c = i("bit-async", {
+	props: {
+		"empty-description": void 0,
+		"empty-label": "No content yet",
+		"error-description": void 0,
+		"error-label": "Something went wrong",
+		retryable: !1,
+		status: "success"
+	},
+	setup({ emit: n, host: r, props: i }) {
+		let c = s(!1), l = s(!1), u = s(!1), d = () => {
+			let e = Array.from(r.el.children);
+			c.value = e.some((e) => e.getAttribute("slot") === "loading"), l.value = e.some((e) => e.getAttribute("slot") === "empty"), u.value = e.some((e) => e.getAttribute("slot") === "error");
+		};
+		d(), o(() => {
+			d();
+			let e = new MutationObserver(() => d());
+			return e.observe(r.el, {
+				attributeFilter: ["slot"],
+				attributes: !0,
+				childList: !0,
+				subtree: !0
+			}), () => e.disconnect();
+		}), r.bind("attr", {
+			ariaBusy: () => i.status.value === "loading" ? "true" : "false",
+			ariaLabel: () => i.status.value === "loading" ? "Loading…" : null,
+			ariaLive: () => i.status.value === "error" ? "assertive" : "polite"
+		});
+		let f = (e, n) => t({
+			condition: () => !!n.value,
+			then: () => a`<p class="${e}">${() => n.value}</p>`
+		}), p = ({ action: e, description: t, icon: n, label: r, role: i, stateClass: o }) => a`
+      <div class="${o}" role="${i}">
+        <div class="icon">
+          <bit-icon name="${n}" size="100%" stroke-width="1.75" aria-hidden="true"></bit-icon>
+        </div>
+        ${f("title", r)} ${f("description", t)} ${e?.()}
+      </div>
+    `, m = () => a`
+      <div class="loading-default" aria-hidden="true">
+        <bit-skeleton variant="text" lines="1" width="40%"></bit-skeleton>
+        <bit-skeleton variant="text" lines="3" width="100%"></bit-skeleton>
+        <bit-skeleton variant="text" lines="1" width="60%"></bit-skeleton>
+      </div>
+    `, h = () => a`
+      <div class="region" role="presentation">
+        <slot></slot>
+      </div>
+    `;
+		return a`${e({
+			cases: [
+				["idle", () => a`<div class="region" role="presentation"></div>`],
+				["loading", () => a`
+            <div class="region" role="status">
+              ${t({
+					condition: () => c.value,
+					else: m,
+					then: () => a`<slot name="loading"></slot>`
+				})}
+            </div>
+          `],
+				["empty", () => a`
+            <div class="region">
+              ${t({
+					condition: () => l.value,
+					else: () => p({
+						description: i["empty-description"],
+						icon: "inbox",
+						label: i["empty-label"],
+						role: "status",
+						stateClass: "empty-state"
+					}),
+					then: () => a`<slot name="empty"></slot>`
+				})}
+            </div>
+          `],
+				["error", () => a`
+            <div class="region">
+              ${t({
+					condition: () => u.value,
+					else: () => p({
+						action: () => t({
+							condition: () => i.retryable.value,
+							then: () => a`
+                          <button class="retry-btn" type="button" @click=${() => n("retry")}>
+                            <bit-icon name="refresh-cw" size="1em" stroke-width="2" aria-hidden="true"></bit-icon>
+                            Try again
+                          </button>
+                        `
+						}),
+						description: i["error-description"],
+						icon: "triangle-alert",
+						label: i["error-label"],
+						role: "alert",
+						stateClass: "error-state"
+					}),
+					then: () => a`<slot name="error"></slot>`
+				})}
+            </div>
+          `],
+				["success", h]
+			],
+			fallback: h,
+			value: i.status
+		})}`;
+	},
+	styles: [n, r]
+});
+//#endregion
+export { c as ASYNC_TAG };
+
+//# sourceMappingURL=async.js.map

package/dist/async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"async.js","names":[],"sources":["../src/feedback/async/async.ts"],"sourcesContent":["import { define, html, onMount, signal } from '@vielzeug/craftit';\nimport { choose, when } from '@vielzeug/craftit/directives';\n\nimport '../../content/icon/icon';\nimport { reducedMotionMixin } from '../../styles';\nimport '../skeleton/skeleton';\nimport componentStyles from './async.css?inline';\n\nexport type AsyncStatus = 'idle' | 'loading' | 'empty' | 'error' | 'success';\n\nexport type BitAsyncEvents = {\n  retry: void;\n};\n\nexport type BitAsyncProps = {\n  /** Description shown below the empty label in the default empty state */\n  'empty-description'?: string;\n  /** Descriptive label for the empty state, shown when no custom `empty` slot is provided */\n  'empty-label'?: string;\n  /** Detailed error text shown below the error label in the default error state */\n  'error-description'?: string;\n  /** Descriptive label for the error state, shown when no custom `error` slot is provided */\n  'error-label'?: string;\n  /** Whether to show the retry button in the default error state */\n  retryable?: boolean;\n  /**\n   * Current data-fetch status.\n   * - `idle`    — not yet started; renders nothing\n   * - `loading` — shows the `loading` slot (or a default skeleton stack)\n   * - `empty`   — shows the `empty` slot (or a built-in empty-state illustration)\n   * - `error`   — shows the `error` slot (or a built-in error state with optional retry)\n   * - `success` — shows the default slot (the actual content)\n   */\n  status: AsyncStatus;\n};\n\n/**\n * A composable wrapper that renders the correct UI for each async data-fetch status.\n * Drives `aria-live` and `aria-busy` automatically so screen readers stay informed.\n *\n * @element bit-async\n *\n * @attr {string} status - Data status: 'idle' | 'loading' | 'empty' | 'error' | 'success'\n * @attr {string} empty-label - Heading for the default empty state\n * @attr {string} empty-description - Description for the default empty state\n * @attr {string} error-label - Heading for the default error state\n * @attr {string} error-description - Description for the default error state\n * @attr {boolean} retryable - Show a retry button in the default error state\n *\n * @fires retry - Emitted when the retry button is clicked\n *\n * @slot - Shown when `status=\"success\"` (default)\n * @slot loading - Shown when `status=\"loading\"` (defaults to skeleton stack)\n * @slot empty - Shown when `status=\"empty\"` (defaults to built-in illustration)\n * @slot error - Shown when `status=\"error\"` (defaults to built-in error view)\n *\n * @cssprop --async-color - Icon/text color for default empty/error states\n * @cssprop --async-icon-size - Icon size in default states (default: var(--size-12))\n * @cssprop --async-gap - Gap between elements in default states (default: var(--size-3))\n *\n * @example\n * ```html\n * <!-- Simple usage — let buildit handle empty and error UI -->\n * <bit-async status=\"loading\" empty-label=\"No results\" error-label=\"Failed to load\" retryable>\n *   <my-data-table></my-data-table>\n * </bit-async>\n *\n * <!-- Custom empty slot -->\n * <bit-async status=\"empty\">\n *   <div slot=\"empty\">\n *     <img src=\"/no-results.svg\" alt=\"\" />\n *     <p>Try adjusting your filters.</p>\n *   </div>\n * </bit-async>\n * ```\n */\nexport const ASYNC_TAG = define<BitAsyncProps, BitAsyncEvents>('bit-async', {\n  props: {\n    'empty-description': undefined,\n    'empty-label': 'No content yet',\n    'error-description': undefined,\n    'error-label': 'Something went wrong',\n    retryable: false,\n    // Default to success so slotted content is visible without extra wiring.\n    status: 'success',\n  },\n  setup({ emit, host, props }) {\n    const hasLoadingSlot = signal(false);\n    const hasEmptySlot = signal(false);\n    const hasErrorSlot = signal(false);\n\n    const updateNamedSlotPresence = () => {\n      const children = Array.from(host.el.children);\n\n      hasLoadingSlot.value = children.some((child) => child.getAttribute('slot') === 'loading');\n      hasEmptySlot.value = children.some((child) => child.getAttribute('slot') === 'empty');\n      hasErrorSlot.value = children.some((child) => child.getAttribute('slot') === 'error');\n    };\n\n    updateNamedSlotPresence();\n\n    onMount(() => {\n      updateNamedSlotPresence();\n\n      const observer = new MutationObserver(() => updateNamedSlotPresence());\n\n      observer.observe(host.el, { attributeFilter: ['slot'], attributes: true, childList: true, subtree: true });\n\n      return () => observer.disconnect();\n    });\n\n    // Keep host accessibility state in sync with async status.\n    host.bind('attr', {\n      ariaBusy: () => (props.status.value === 'loading' ? 'true' : 'false'),\n      ariaLabel: () => (props.status.value === 'loading' ? 'Loading…' : null),\n      ariaLive: () => (props.status.value === 'error' ? 'assertive' : 'polite'),\n    });\n\n    const renderText = (className: 'title' | 'description', text: { value: string | undefined }) =>\n      when({\n        condition: () => !!text.value,\n        then: () => html`<p class=\"${className}\">${() => text.value}</p>`,\n      });\n\n    const renderDefaultState = ({\n      action,\n      description,\n      icon,\n      label,\n      role,\n      stateClass,\n    }: {\n      action?: () => unknown;\n      description: { value: string | undefined };\n      icon: string;\n      label: { value: string | undefined };\n      role: 'alert' | 'status';\n      stateClass: 'empty-state' | 'error-state';\n    }) => html`\n      <div class=\"${stateClass}\" role=\"${role}\">\n        <div class=\"icon\">\n          <bit-icon name=\"${icon}\" size=\"100%\" stroke-width=\"1.75\" aria-hidden=\"true\"></bit-icon>\n        </div>\n        ${renderText('title', label)} ${renderText('description', description)} ${action?.()}\n      </div>\n    `;\n\n    const renderLoadingFallback = () => html`\n      <div class=\"loading-default\" aria-hidden=\"true\">\n        <bit-skeleton variant=\"text\" lines=\"1\" width=\"40%\"></bit-skeleton>\n        <bit-skeleton variant=\"text\" lines=\"3\" width=\"100%\"></bit-skeleton>\n        <bit-skeleton variant=\"text\" lines=\"1\" width=\"60%\"></bit-skeleton>\n      </div>\n    `;\n\n    const renderSuccess = () => html`\n      <div class=\"region\" role=\"presentation\">\n        <slot></slot>\n      </div>\n    `;\n\n    return html`${choose({\n      cases: [\n        ['idle', () => html`<div class=\"region\" role=\"presentation\"></div>`],\n\n        [\n          'loading',\n          () => html`\n            <div class=\"region\" role=\"status\">\n              ${when({\n                condition: () => hasLoadingSlot.value,\n                else: renderLoadingFallback,\n                then: () => html`<slot name=\"loading\"></slot>`,\n              })}\n            </div>\n          `,\n        ],\n\n        [\n          'empty',\n          () => html`\n            <div class=\"region\">\n              ${when({\n                condition: () => hasEmptySlot.value,\n                else: () =>\n                  renderDefaultState({\n                    description: props['empty-description'],\n                    icon: 'inbox',\n                    label: props['empty-label'],\n                    role: 'status',\n                    stateClass: 'empty-state',\n                  }),\n                then: () => html`<slot name=\"empty\"></slot>`,\n              })}\n            </div>\n          `,\n        ],\n\n        [\n          'error',\n          () => html`\n            <div class=\"region\">\n              ${when({\n                condition: () => hasErrorSlot.value,\n                else: () =>\n                  renderDefaultState({\n                    action: () =>\n                      when({\n                        condition: () => props.retryable.value,\n                        then: () => html`\n                          <button class=\"retry-btn\" type=\"button\" @click=${() => emit('retry')}>\n                            <bit-icon name=\"refresh-cw\" size=\"1em\" stroke-width=\"2\" aria-hidden=\"true\"></bit-icon>\n                            Try again\n                          </button>\n                        `,\n                      }),\n                    description: props['error-description'],\n                    icon: 'triangle-alert',\n                    label: props['error-label'],\n                    role: 'alert',\n                    stateClass: 'error-state',\n                  }),\n                then: () => html`<slot name=\"error\"></slot>`,\n              })}\n            </div>\n          `,\n        ],\n\n        ['success', renderSuccess],\n      ],\n      fallback: renderSuccess,\n      value: props.status,\n    })}`;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":";;;;;;;;;;AA4EA,IAAa,IAAY,EAAsC,aAAa;CAC1E,OAAO;EACL,qBAAqB,KAAA;EACrB,eAAe;EACf,qBAAqB,KAAA;EACrB,eAAe;EACf,WAAW;EAEX,QAAQ;EACT;CACD,MAAM,EAAE,SAAM,SAAM,YAAS;EAC3B,IAAM,IAAiB,EAAO,GAAM,EAC9B,IAAe,EAAO,GAAM,EAC5B,IAAe,EAAO,GAAM,EAE5B,UAAgC;GACpC,IAAM,IAAW,MAAM,KAAK,EAAK,GAAG,SAAS;AAI7C,GAFA,EAAe,QAAQ,EAAS,MAAM,MAAU,EAAM,aAAa,OAAO,KAAK,UAAU,EACzF,EAAa,QAAQ,EAAS,MAAM,MAAU,EAAM,aAAa,OAAO,KAAK,QAAQ,EACrF,EAAa,QAAQ,EAAS,MAAM,MAAU,EAAM,aAAa,OAAO,KAAK,QAAQ;;AAgBvF,EAbA,GAAyB,EAEzB,QAAc;AACZ,MAAyB;GAEzB,IAAM,IAAW,IAAI,uBAAuB,GAAyB,CAAC;AAItE,UAFA,EAAS,QAAQ,EAAK,IAAI;IAAE,iBAAiB,CAAC,OAAO;IAAE,YAAY;IAAM,WAAW;IAAM,SAAS;IAAM,CAAC,QAE7F,EAAS,YAAY;IAClC,EAGF,EAAK,KAAK,QAAQ;GAChB,gBAAiB,EAAM,OAAO,UAAU,YAAY,SAAS;GAC7D,iBAAkB,EAAM,OAAO,UAAU,YAAY,aAAa;GAClE,gBAAiB,EAAM,OAAO,UAAU,UAAU,cAAc;GACjE,CAAC;EAEF,IAAM,KAAc,GAAoC,MACtD,EAAK;GACH,iBAAiB,CAAC,CAAC,EAAK;GACxB,YAAY,CAAI,aAAa,EAAU,UAAU,EAAK,MAAM;GAC7D,CAAC,EAEE,KAAsB,EAC1B,WACA,gBACA,SACA,UACA,SACA,oBAQI,CAAI;oBACM,EAAW,UAAU,EAAK;;4BAElB,EAAK;;UAEvB,EAAW,SAAS,EAAM,CAAC,GAAG,EAAW,eAAe,EAAY,CAAC,GAAG,KAAU,CAAC;;OAInF,UAA8B,CAAI;;;;;;OAQlC,UAAsB,CAAI;;;;;AAMhC,SAAO,CAAI,GAAG,EAAO;GACnB,OAAO;IACL,CAAC,cAAc,CAAI,iDAAiD;IAEpE,CACE,iBACM,CAAI;;gBAEJ,EAAK;KACL,iBAAiB,EAAe;KAChC,MAAM;KACN,YAAY,CAAI;KACjB,CAAC,CAAC;;YAGR;IAED,CACE,eACM,CAAI;;gBAEJ,EAAK;KACL,iBAAiB,EAAa;KAC9B,YACE,EAAmB;MACjB,aAAa,EAAM;MACnB,MAAM;MACN,OAAO,EAAM;MACb,MAAM;MACN,YAAY;MACb,CAAC;KACJ,YAAY,CAAI;KACjB,CAAC,CAAC;;YAGR;IAED,CACE,eACM,CAAI;;gBAEJ,EAAK;KACL,iBAAiB,EAAa;KAC9B,YACE,EAAmB;MACjB,cACE,EAAK;OACH,iBAAiB,EAAM,UAAU;OACjC,YAAY,CAAI;iFACyC,EAAK,QAAQ,CAAC;;;;;OAKxE,CAAC;MACJ,aAAa,EAAM;MACnB,MAAM;MACN,OAAO,EAAM;MACb,MAAM;MACN,YAAY;MACb,CAAC;KACJ,YAAY,CAAI;KACjB,CAAC,CAAC;;YAGR;IAED,CAAC,WAAW,EAAc;IAC3B;GACD,UAAU;GACV,OAAO,EAAM;GACd,CAAC;;CAEJ,QAAQ,CAAC,GAAoB,EAAgB;CAC9C,CAAC"}

package/dist/avatar.cjs

@@ -1,37 +1,28 @@
-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`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./icon.cjs`);const e=require(`./inputs/shared/bundles.cjs`),t=require(`./styles/mixins/shape.css.cjs`),n=require(`./styles/mixins/theme.css.cjs`);require(`./styles/index.cjs`);const r=require(`./content/avatar/avatar-group.css?inline.cjs`),i=require(`./content/avatar/avatar.css?inline.cjs`);let a=require(`@vielzeug/craftit`);var o={away:`Away`,busy:`Busy`,offline:`Offline`,online:`Online`},s=(0,a.define)(`bit-avatar`,{props:{...e.themableBundle,...e.sizableBundle,...e.roundableBundle,alt:void 0,initials:void 0,src:void 0,status:void 0},setup({props:e}){let t=(0,a.signal)(!1);(0,a.watch)(e.src,()=>{t.value=!1});let n=e=>{e&&(e.addEventListener(`error`,()=>{t.value=!0}),e.addEventListener(`load`,()=>{t.value=!1}))},r=(0,a.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()}),i=(0,a.computed)(()=>!!e.src.value&&!t.value),s=(0,a.computed)(()=>!i.value&&!!r.value),c=(0,a.computed)(()=>!i.value&&!s.value),l=(0,a.computed)(()=>{let t=e.alt.value||null,n=e.status.value,r=n?o[n]:null;return!t&&!r?null:t?r?`${t}, ${r}`:t:`Status: ${r}`});return a.html`
       <span
         class="avatar"
         part="avatar"
         :aria-label="${()=>l.value}"
         :role="${()=>l.value?`img`:null}">
-        ${()=>e.src.value?i.html`<img
+        ${()=>e.src.value?a.html`<img
                 ref=${n}
                 part="img"
                 :src="${()=>e.src.value}"
                 :alt="${()=>e.alt.value||``}"
-                ?hidden="${()=>!o.value}"
+                ?hidden="${()=>!i.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>`:``}
+        ${()=>s.value?a.html`<span class="initials" part="initials" aria-hidden="true">${()=>r.value}</span>`:``}
+        ${()=>c.value?a.html`<bit-icon class="icon-fallback" part="fallback" name="user" size="50%"></bit-icon>`:``}
       </span>
-      ${()=>e.status.value?i.html`<span
+      ${()=>e.status.value?a.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`
+    `},styles:[n.colorThemeMixin,t.roundedVariantMixin,t.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))`}}),i.default]}),c=(0,a.define)(`bit-avatar-group`,{props:{max:5,total:void 0},setup({host:e,props:t,slots:n}){let r=(0,a.signal)(0),i=()=>{let n=[...e.el.querySelectorAll(`bit-avatar`)],i=Number(t.max.value)||5,a=Math.max(0,n.length-i);r.value=t.total.value==null?a:Number(t.total.value)-i,n.forEach((e,t)=>{t>=i?e.setAttribute(`data-avatar-group-hidden`,``):e.removeAttribute(`data-avatar-group-hidden`)})};return(0,a.effect)(()=>{n.elements().value,i()}),a.html`
       <slot></slot>
-      ${()=>n.value>0?i.html`<span class="overflow-badge" part="overflow" aria-label="${()=>`+${n.value} more`}">
-              +${()=>n.value}
+      ${()=>r.value>0?a.html`<span class="overflow-badge" part="overflow" aria-label="${()=>`+${r.value} more`}">
+              +${()=>r.value}
             </span>`:``}
-    `},styles:[r.default],tag:`bit-avatar-group`});exports.AVATAR_GROUP_TAG=s,exports.AVATAR_TAG=o;
+    `},styles:[r.default]});exports.AVATAR_GROUP_TAG=c,exports.AVATAR_TAG=s;
 //# sourceMappingURL=avatar.cjs.map

package/dist/avatar.cjs.map

@@ -1 +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":"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"}
+{"version":3,"file":"avatar.cjs","names":[],"sources":["../src/content/avatar/avatar.ts"],"sourcesContent":["import { define, computed, effect, html, signal, watch } from '@vielzeug/craftit';\n\nimport type { ComponentSize, RoundedSize, ThemeColor } from '../../types';\n\nimport '../icon/icon';\nimport { type PropBundle, roundableBundle, sizableBundle, themableBundle } from '../../inputs/shared/bundles';\nimport { colorThemeMixin, roundedVariantMixin, sizeVariantMixin } from '../../styles';\nimport groupStyles from './avatar-group.css?inline';\nimport componentStyles from './avatar.css?inline';\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 = define<BitAvatarProps>('bit-avatar', {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...roundableBundle,\n    alt: undefined,\n    initials: undefined,\n    src: undefined,\n    status: undefined,\n  } satisfies PropBundle<BitAvatarProps>,\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`<bit-icon class=\"icon-fallback\" part=\"fallback\" name=\"user\" size=\"50%\"></bit-icon>`\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});\n\n// ============================================\n// AvatarGroup\n// ============================================\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 = define<{ max?: number; total?: number }>('bit-avatar-group', {\n  props: {\n    max: 5,\n    total: undefined,\n  },\n  setup({ host, props, slots }) {\n    const overflowCount = signal(0);\n\n    const updateVisibility = () => {\n      const avatars = [...host.el.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    effect(() => {\n      void slots.elements().value;\n      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});\n"],"mappings":"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"}