@vielzeug/refine 1.1.3 → 1.3.0

package/dist/alert.js

@@ -3,37 +3,37 @@ import { roundedVariantMixin as n, sizeVariantMixin as r } from "./styles/mixins
 import { colorThemeMixin as i, forcedColorsMixin as a } from "./styles/mixins/theme.css.js";
 import { roundableBundle as o, sizableBundle as s, themableBundle as c } from "./shared/prop-bundles.js";
 import { awaitExit as l } from "./overlay/shared/await-exit.js";
-import u from "./feedback/alert/alert.css?inline.js";
-import { define as d, html as f, prop as p } from "@vielzeug/ore";
+import u from "./feedback/alert/alert.css.js";
+import { define as d, getHost as f, html as p, prop as m, useEmit as h, useSlots as g } from "@vielzeug/ore";
 //#region src/feedback/alert/alert.ts
-var m = "ore-alert";
-d(m, {
+var _ = "ore-alert";
+d(_, {
 	props: {
 		...c,
 		...s,
 		...o,
-		accented: p.bool(!1),
-		dismissible: p.bool(!1),
-		heading: p.string(),
-		horizontal: p.bool(!1),
-		variant: p.string()
+		accented: m.bool(!1),
+		dismissible: m.bool(!1),
+		heading: m.string(),
+		horizontal: m.bool(!1),
+		variant: m.string()
 	},
-	setup(e, { bind: t, el: n, emit: r, slots: i }) {
-		let a = null, o = (e) => {
-			a && (a.textContent = "", requestAnimationFrame(() => {
-				a && (a.textContent = e);
+	setup(e) {
+		let t = f(), n = h(), r = g(), i = null, a = (e) => {
+			i && (i.textContent = "", requestAnimationFrame(() => {
+				i && (i.textContent = e);
 			}));
 		};
-		return f`
+		return p`
       <span
         class="sr-announce"
         aria-live="polite"
         aria-atomic="true"
         ref="${(e) => {
-			a = e;
+			i = e;
 		}}"></span>
       <div class="alert" :role="${() => e.color.value === "error" ? "alert" : "status"}" part="alert">
-        <span class="icon" part="icon" aria-hidden="true" ?hidden="${() => !i.has("icon").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="${() => !e.heading.value}">
@@ -47,7 +47,7 @@ d(m, {
             <slot></slot>
           </div>
         </div>
-        <div class="actions" part="actions" ?hidden="${() => !i.has("actions").value}">
+        <div class="actions" part="actions" ?hidden="${() => !r.has("actions").value}">
           <slot name="actions"></slot>
         </div>
         <button
@@ -56,9 +56,9 @@ d(m, {
           type="button"
           aria-label="Dismiss alert"
           ?hidden="${() => !e.dismissible.value}"
-          @click="${(t) => {
-			e.dismissible.value && (n.setAttribute("dismissing", ""), l(n, () => {
-				n.removeAttribute("dismissing"), n.setAttribute("dismissed", ""), o("Alert dismissed"), r("dismiss", { originalEvent: t });
+          @click="${(r) => {
+			e.dismissible.value && (t.setAttribute("dismissing", ""), l(t, () => {
+				t.removeAttribute("dismissing"), t.setAttribute("dismissed", ""), a("Alert dismissed"), n("dismiss", { originalEvent: r });
 			}));
 		}}">
           <ore-icon name="x" size="16" stroke-width="2.5" aria-hidden="true"></ore-icon>
@@ -88,6 +88,6 @@ d(m, {
 	]
 });
 //#endregion
-export { m as ALERT_TAG };
+export { _ 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 { define, html, prop } from '@vielzeug/ore';\n\nimport type { ComponentSize, RoundedSize, ThemeColor } from '../../types';\n\nimport '../../content/icon/icon';\nimport { awaitExit } from '../../overlay/shared/await-exit';\nimport { roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  forcedColorsMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport componentStyles from './alert.css?inline';\n\nexport type OreAlertEvents = {\n  dismiss: { originalEvent: MouseEvent };\n};\n\nexport type OreAlertProps = {\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 ore-alert\n *\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | '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: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\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. detail: { originalEvent: MouseEvent }\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-shadow - Box shadow\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 * @part alert - Alert root container.\n * @part icon - Icon container.\n * @part header - Header container.\n * @part heading - Heading text element.\n * @part meta - Meta text container.\n * @part body - Body content container.\n * @part content - Content container.\n * @part actions - Actions slot container.\n * @part close - Close action control.\n * @example\n * ```html\n * <ore-alert color=\"success\">Your changes have been saved.</ore-alert>\n * <ore-alert color=\"error\" variant=\"solid\" dismissible heading=\"Something went wrong\">\n *   Please try again later.\n * </ore-alert>\n * ```\n */\nexport const ALERT_TAG = 'ore-alert' as const;\ndefine<OreAlertProps, OreAlertEvents>(ALERT_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...roundableBundle,\n    accented: prop.bool(false),\n    dismissible: prop.bool(false),\n    heading: prop.string(),\n    horizontal: prop.bool(false),\n    variant: prop.string<'solid' | 'flat' | 'bordered'>(),\n  },\n  setup(props, { bind: _bind, el, emit, slots }) {\n    let announceEl: HTMLElement | null = null;\n\n    const announce = (message: string) => {\n      if (!announceEl) return;\n\n      announceEl.textContent = '';\n      requestAnimationFrame(() => {\n        if (announceEl) announceEl.textContent = message;\n      });\n    };\n\n    const handleDismiss = (e: MouseEvent) => {\n      if (!props.dismissible.value) return;\n\n      el.setAttribute('dismissing', '');\n      awaitExit(el, () => {\n        el.removeAttribute('dismissing');\n        el.setAttribute('dismissed', '');\n        announce('Alert dismissed');\n        emit('dismiss', { originalEvent: e });\n      });\n    };\n\n    const alertRole = () => (props.color.value === 'error' ? 'alert' : 'status');\n\n    return html`\n      <span\n        class=\"sr-announce\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        ref=\"${(ref: HTMLElement) => {\n          announceEl = ref;\n        }}\"></span>\n      <div class=\"alert\" :role=\"${alertRole}\" 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}</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          <ore-icon name=\"x\" size=\"16\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n        </button>\n      </div>\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    coarsePointerMixin,\n    reducedMotionMixin,\n    roundedVariantMixin,\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":";;;;;;;;AAuFA,IAAa,IAAY;AACzB,EAAsC,GAAW;CAC/C,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,UAAU,EAAK,KAAK,EAAK;EACzB,aAAa,EAAK,KAAK,EAAK;EAC5B,SAAS,EAAK,OAAO;EACrB,YAAY,EAAK,KAAK,EAAK;EAC3B,SAAS,EAAK,OAAsC;CACtD;CACA,MAAM,GAAO,EAAE,MAAM,GAAO,OAAI,SAAM,YAAS;EAC7C,IAAI,IAAiC,MAE/B,KAAY,MAAoB;GAC/B,MAEL,EAAW,cAAc,IACzB,4BAA4B;IAC1B,AAAI,MAAY,EAAW,cAAc;GAC3C,CAAC;EACH;EAgBA,OAAO,CAAI;;;;;gBAKC,MAAqB;GAC3B,IAAa;EACf,EAAE;wCATmB,EAAM,MAAM,UAAU,UAAU,UAAU,SAU3B;2EAC+B,CAAC,EAAM,IAAI,MAAM,CAAC,CAAC,MAAM;;;2DAGzC,CAAC,EAAM,QAAQ,MAAM;iDAC/B,EAAM,QAAQ;;;;;;;;;;6DAUF,CAAC,EAAM,IAAI,SAAS,CAAC,CAAC,MAAM;;;;;;;;2BAQ9D,CAAC,EAAM,YAAY,MAAM;qBA7CzB,MAAkB;GAClC,EAAM,YAAY,UAEvB,EAAG,aAAa,cAAc,EAAE,GAChC,EAAU,SAAU;IAIlB,AAHA,EAAG,gBAAgB,YAAY,GAC/B,EAAG,aAAa,aAAa,EAAE,GAC/B,EAAS,iBAAiB,GAC1B,EAAK,WAAW,EAAE,eAAe,EAAE,CAAC;GACtC,CAAC;EACH,EAoC8B;;;;;CAKhC;CACA,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA,EAAiB;GACf,IAAI;IAAE,cAAc;IAA+B,UAAU;IAAoB,KAAK;GAAkB;GACxG,IAAI;IAAE,cAAc;IAA+B,UAAU;IAAkB,KAAK;GAAgB;EACtG,CAAC;EACD;CACF;AACF,CAAC"}
+{"version":3,"file":"alert.js","names":[],"sources":["../src/feedback/alert/alert.ts"],"sourcesContent":["import { define, html, prop, getHost, useEmit, useSlots } from '@vielzeug/ore';\n\nimport type { ComponentSize, RoundedSize, ThemeColor } from '../../types';\n\nimport '../../content/icon/icon';\nimport { awaitExit } from '../../overlay/shared/await-exit';\nimport { roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport {\n  coarsePointerMixin,\n  colorThemeMixin,\n  forcedColorsMixin,\n  reducedMotionMixin,\n  roundedVariantMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport componentStyles from './alert.css?inline';\n\nexport type OreAlertEvents = {\n  dismiss: { originalEvent: MouseEvent };\n};\n\nexport type OreAlertProps = {\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 ore-alert\n *\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | '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: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\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. detail: { originalEvent: MouseEvent }\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-shadow - Box shadow\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 * @part alert - Alert root container.\n * @part icon - Icon container.\n * @part header - Header container.\n * @part heading - Heading text element.\n * @part meta - Meta text container.\n * @part body - Body content container.\n * @part content - Content container.\n * @part actions - Actions slot container.\n * @part close - Close action control.\n * @example\n * ```html\n * <ore-alert color=\"success\">Your changes have been saved.</ore-alert>\n * <ore-alert color=\"error\" variant=\"solid\" dismissible heading=\"Something went wrong\">\n *   Please try again later.\n * </ore-alert>\n * ```\n */\nexport const ALERT_TAG = 'ore-alert' as const;\ndefine<OreAlertProps>(ALERT_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...roundableBundle,\n    accented: prop.bool(false),\n    dismissible: prop.bool(false),\n    heading: prop.string(),\n    horizontal: prop.bool(false),\n    variant: prop.string<'solid' | 'flat' | 'bordered'>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreAlertEvents>();\n    const slots = useSlots();\n\n    let announceEl: HTMLElement | null = null;\n\n    const announce = (message: string) => {\n      if (!announceEl) return;\n\n      announceEl.textContent = '';\n      requestAnimationFrame(() => {\n        if (announceEl) announceEl.textContent = message;\n      });\n    };\n\n    const handleDismiss = (e: MouseEvent) => {\n      if (!props.dismissible.value) return;\n\n      el.setAttribute('dismissing', '');\n      awaitExit(el, () => {\n        el.removeAttribute('dismissing');\n        el.setAttribute('dismissed', '');\n        announce('Alert dismissed');\n        emit('dismiss', { originalEvent: e });\n      });\n    };\n\n    const alertRole = () => (props.color.value === 'error' ? 'alert' : 'status');\n\n    return html`\n      <span\n        class=\"sr-announce\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        ref=\"${(ref: HTMLElement) => {\n          announceEl = ref;\n        }}\"></span>\n      <div class=\"alert\" :role=\"${alertRole}\" 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}</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          <ore-icon name=\"x\" size=\"16\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n        </button>\n      </div>\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    coarsePointerMixin,\n    reducedMotionMixin,\n    roundedVariantMixin,\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":";;;;;;;;AAuFA,IAAa,IAAY;AACzB,EAAsB,GAAW;CAC/B,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,UAAU,EAAK,KAAK,EAAK;EACzB,aAAa,EAAK,KAAK,EAAK;EAC5B,SAAS,EAAK,OAAO;EACrB,YAAY,EAAK,KAAK,EAAK;EAC3B,SAAS,EAAK,OAAsC;CACtD;CACA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAO,EAAwB,GAC/B,IAAQ,EAAS,GAEnB,IAAiC,MAE/B,KAAY,MAAoB;GAC/B,MAEL,EAAW,cAAc,IACzB,4BAA4B;IAC1B,AAAI,MAAY,EAAW,cAAc;GAC3C,CAAC;EACH;EAgBA,OAAO,CAAI;;;;;gBAKC,MAAqB;GAC3B,IAAa;EACf,EAAE;wCATmB,EAAM,MAAM,UAAU,UAAU,UAAU,SAU3B;2EAC+B,CAAC,EAAM,IAAI,MAAM,CAAC,CAAC,MAAM;;;2DAGzC,CAAC,EAAM,QAAQ,MAAM;iDAC/B,EAAM,QAAQ;;;;;;;;;;6DAUF,CAAC,EAAM,IAAI,SAAS,CAAC,CAAC,MAAM;;;;;;;;2BAQ9D,CAAC,EAAM,YAAY,MAAM;qBA7CzB,MAAkB;GAClC,EAAM,YAAY,UAEvB,EAAG,aAAa,cAAc,EAAE,GAChC,EAAU,SAAU;IAIlB,AAHA,EAAG,gBAAgB,YAAY,GAC/B,EAAG,aAAa,aAAa,EAAE,GAC/B,EAAS,iBAAiB,GAC1B,EAAK,WAAW,EAAE,eAAe,EAAE,CAAC;GACtC,CAAC;EACH,EAoC8B;;;;;CAKhC;CACA,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA,EAAiB;GACf,IAAI;IAAE,cAAc;IAA+B,UAAU;IAAoB,KAAK;GAAkB;GACxG,IAAI;IAAE,cAAc;IAA+B,UAAU;IAAkB,KAAK;GAAgB;EACtG,CAAC;EACD;CACF;AACF,CAAC"}

package/dist/async.cjs

@@ -1,11 +1,11 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./ore/dist/directives/when.cjs");require("./ore/dist/directives.cjs");const t=require("./styles/mixins/accessibility.css.cjs"),n=require("./feedback/async/async.css?inline.cjs");let r=require("@vielzeug/ore"),i=require("@vielzeug/ripple");var a=`ore-async`;(0,r.define)(a,{props:{"empty-description":r.prop.string(),"empty-label":r.prop.string(`No content yet`),"error-description":r.prop.string(),"error-label":r.prop.string(`Something went wrong`),retryable:r.prop.bool(!1),status:r.prop.oneOf([`idle`,`loading`,`empty`,`error`,`success`],`success`)},setup(t,{bind:n,emit:a}){let o=(0,i.signal)(!1),s=(0,i.signal)(!1),c=(0,i.signal)(!1);n({attr:{ariaBusy:()=>t.status.value===`loading`?`true`:`false`,ariaLabel:()=>t.status.value===`loading`?`Loading…`:null,ariaLive:()=>t.status.value===`error`?`assertive`:`polite`,status:t.status}});let l=(e,t)=>()=>t?.value?r.html`<p class="${e}">${t}</p>`:``;return r.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./ore/dist/directives/when.cjs");require("./ore/dist/directives.cjs");const t=require("./styles/mixins/accessibility.css.cjs"),n=require("./feedback/async/async.css.cjs");let r=require("@vielzeug/ore"),i=require("@vielzeug/ripple");var a=`ore-async`;(0,r.define)(a,{props:{"empty-description":r.prop.string(),"empty-label":r.prop.string(`No content yet`),"error-description":r.prop.string(),"error-label":r.prop.string(`Something went wrong`),retryable:r.prop.bool(!1),status:r.prop.oneOf([`idle`,`loading`,`empty`,`error`,`success`],`success`)},setup(t){let n=(0,r.useEmit)(),a=(0,i.signal)(!1),o=(0,i.signal)(!1),s=(0,i.signal)(!1);(0,r.bind)({attr:{ariaBusy:()=>t.status.value===`loading`?`true`:`false`,ariaLabel:()=>t.status.value===`loading`?`Loading…`:null,ariaLive:()=>t.status.value===`error`?`assertive`:`polite`,status:t.status}});let c=(e,t)=>()=>t?.value?r.html`<p class="${e}">${t}</p>`:``;return r.html`
       <div class="region region-idle" role="presentation"></div>
 
       <div class="region region-loading" role="status">
         <slot
           name="loading"
-          @slotchange=${e=>{o.value=e.target.assignedNodes().length>0}}></slot>
-        ${e.when(o,()=>r.html``,()=>r.html`
+          @slotchange=${e=>{a.value=e.target.assignedNodes().length>0}}></slot>
+        ${e.when(a,()=>r.html``,()=>r.html`
             <div class="loading-default" aria-hidden="true">
               <ore-skeleton variant="text" lines="1" width="40%"></ore-skeleton>
               <ore-skeleton variant="text" lines="3" width="100%"></ore-skeleton>
@@ -17,13 +17,13 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
       <div class="region region-empty">
         <slot
           name="empty"
-          @slotchange=${e=>{s.value=e.target.assignedNodes().length>0}}></slot>
-        ${e.when(s,()=>r.html``,()=>r.html`
+          @slotchange=${e=>{o.value=e.target.assignedNodes().length>0}}></slot>
+        ${e.when(o,()=>r.html``,()=>r.html`
             <div class="empty-state" role="status">
               <div class="icon">
                 <ore-icon name="inbox" size="100%" stroke-width="1.75" aria-hidden="true"></ore-icon>
               </div>
-              ${l(`title`,t[`empty-label`])} ${l(`description`,t[`empty-description`])}
+              ${c(`title`,t[`empty-label`])} ${c(`description`,t[`empty-description`])}
             </div>
           `)}
       </div>
@@ -31,15 +31,15 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
       <div class="region region-error">
         <slot
           name="error"
-          @slotchange=${e=>{c.value=e.target.assignedNodes().length>0}}></slot>
-        ${e.when(c,()=>r.html``,()=>r.html`
+          @slotchange=${e=>{s.value=e.target.assignedNodes().length>0}}></slot>
+        ${e.when(s,()=>r.html``,()=>r.html`
             <div class="error-state" role="alert">
               <div class="icon">
                 <ore-icon name="triangle-alert" size="100%" stroke-width="1.75" aria-hidden="true"></ore-icon>
               </div>
-              ${l(`title`,t[`error-label`])} ${l(`description`,t[`error-description`])}
+              ${c(`title`,t[`error-label`])} ${c(`description`,t[`error-description`])}
               ${e.when(()=>!!t.retryable.value,()=>r.html`
-                  <button class="retry-btn" type="button" @click=${()=>a(`retry`)}>
+                  <button class="retry-btn" type="button" @click=${()=>n(`retry`)}>
                     <ore-icon name="refresh-cw" size="1em" stroke-width="2" aria-hidden="true"></ore-icon>
                     Try again
                   </button>

package/dist/async.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"async.cjs","names":[],"sources":["../src/feedback/async/async.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { when } from '@vielzeug/ore/directives';\nimport { type Readable, signal } from '@vielzeug/ripple';\n\nimport { reducedMotionMixin } from '../../styles';\nimport componentStyles from './async.css?inline';\n\nexport type AsyncStatus = 'idle' | 'loading' | 'empty' | 'error' | 'success';\n\nexport type OreAsyncEvents = {\n  retry: void;\n};\n\nexport type OreAsyncProps = {\n  'empty-description'?: string;\n  'empty-label'?: string;\n  'error-description'?: string;\n  'error-label'?: string;\n  retryable?: boolean;\n  status?: AsyncStatus;\n};\n\n/**\n * A container for handling asynchronous states (loading, empty, error, success).\n * Simplifies data fetching UI by providing consistent fallbacks.\n *\n * @element ore-async\n *\n * @attr {string} status - current state: 'idle' | 'loading' | 'empty' | 'error' | 'success' (default: 'success')\n * @attr {boolean} retryable - show retry button in error state (default: false)\n * @attr {string} empty-label - title for empty state (default: 'No content yet')\n * @attr {string} empty-description - optional text for empty state\n * @attr {string} error-label - title for error state (default: 'Something went wrong')\n * @attr {string} error-description - optional text for error state\n *\n * @fires retry - Emitted when the retry button is clicked (no detail payload)\n *\n * @slot - default content shown in 'success' state\n * @slot loading - custom loading UI (overrides default skeletons)\n * @slot empty - custom empty UI (overrides default icon/label)\n * @slot error - custom error UI (overrides default icon/label)\n *\n * @cssprop --async-color - Text/icon color used by default async state content\n * @cssprop --async-gap - Vertical spacing between icon, title, description, and actions\n * @cssprop --async-icon-size - Icon size for built-in loading/empty/error visuals\n * @example\n * ```html\n * <!-- Success state: default slot is shown -->\n * <ore-async status=\"success\">\n *   <ul><li>Item one</li><li>Item two</li></ul>\n * </ore-async>\n *\n * <!-- Loading state: shows skeleton placeholders -->\n * <ore-async status=\"loading\"></ore-async>\n *\n * <!-- Empty state with custom message -->\n * <ore-async status=\"empty\" empty-label=\"No results\" empty-description=\"Try adjusting your filters.\"></ore-async>\n *\n * <!-- Error state with retry button -->\n * <ore-async status=\"error\" retryable error-label=\"Failed to load\" error-description=\"Check your connection.\"></ore-async>\n * ```\n */\nexport const ASYNC_TAG = 'ore-async' as const;\ndefine<OreAsyncProps, OreAsyncEvents>(ASYNC_TAG, {\n  props: {\n    'empty-description': prop.string(),\n    'empty-label': prop.string('No content yet'),\n    'error-description': prop.string(),\n    'error-label': prop.string('Something went wrong'),\n    retryable: prop.bool(false),\n    status: prop.oneOf(['idle', 'loading', 'empty', 'error', 'success'] as const, 'success'),\n  },\n  setup(props, { bind, emit }) {\n    const hasLoadingSlot = signal(false);\n    const hasEmptySlot = signal(false);\n    const hasErrorSlot = signal(false);\n\n    // Reflect status onto the host so CSS can show/hide each region.\n    // ARIA attributes are driven reactively by bind().\n    bind({\n      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        status: props.status,\n      },\n    });\n\n    const renderText = (className: 'title' | 'description', text: Readable<string | undefined> | undefined) => () =>\n      text?.value ? html`<p class=\"${className}\">${text}</p>` : '';\n\n    // All four regions are always in the shadow DOM — CSS on :host([status=\"…\"])\n    // toggles their visibility. This means:\n    // - No DOM churn on status transitions (no teardown/rebuild of slot elements).\n    // - Live regions are always present, so screen readers announce correctly.\n    // - focus is never lost across status changes.\n    return html`\n      <div class=\"region region-idle\" role=\"presentation\"></div>\n\n      <div class=\"region region-loading\" role=\"status\">\n        <slot\n          name=\"loading\"\n          @slotchange=${(e: Event) => {\n            hasLoadingSlot.value = (e.target as HTMLSlotElement).assignedNodes().length > 0;\n          }}></slot>\n        ${when(\n          hasLoadingSlot,\n          () => html``,\n          () => html`\n            <div class=\"loading-default\" aria-hidden=\"true\">\n              <ore-skeleton variant=\"text\" lines=\"1\" width=\"40%\"></ore-skeleton>\n              <ore-skeleton variant=\"text\" lines=\"3\" width=\"100%\"></ore-skeleton>\n              <ore-skeleton variant=\"text\" lines=\"1\" width=\"60%\"></ore-skeleton>\n            </div>\n          `,\n        )}\n      </div>\n\n      <div class=\"region region-empty\">\n        <slot\n          name=\"empty\"\n          @slotchange=${(e: Event) => {\n            hasEmptySlot.value = (e.target as HTMLSlotElement).assignedNodes().length > 0;\n          }}></slot>\n        ${when(\n          hasEmptySlot,\n          () => html``,\n          () => html`\n            <div class=\"empty-state\" role=\"status\">\n              <div class=\"icon\">\n                <ore-icon name=\"inbox\" size=\"100%\" stroke-width=\"1.75\" aria-hidden=\"true\"></ore-icon>\n              </div>\n              ${renderText('title', props['empty-label'])} ${renderText('description', props['empty-description'])}\n            </div>\n          `,\n        )}\n      </div>\n\n      <div class=\"region region-error\">\n        <slot\n          name=\"error\"\n          @slotchange=${(e: Event) => {\n            hasErrorSlot.value = (e.target as HTMLSlotElement).assignedNodes().length > 0;\n          }}></slot>\n        ${when(\n          hasErrorSlot,\n          () => html``,\n          () => html`\n            <div class=\"error-state\" role=\"alert\">\n              <div class=\"icon\">\n                <ore-icon name=\"triangle-alert\" size=\"100%\" stroke-width=\"1.75\" aria-hidden=\"true\"></ore-icon>\n              </div>\n              ${renderText('title', props['error-label'])} ${renderText('description', props['error-description'])}\n              ${when(\n                () => Boolean(props.retryable.value),\n                () => html`\n                  <button class=\"retry-btn\" type=\"button\" @click=${() => emit('retry')}>\n                    <ore-icon name=\"refresh-cw\" size=\"1em\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                    Try again\n                  </button>\n                `,\n              )}\n            </div>\n          `,\n        )}\n      </div>\n\n      <div class=\"region region-success\" role=\"presentation\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":"mUA8DA,IAAa,EAAY,yBACa,EAAW,CAC/C,MAAO,CACL,oBAAqB,EAAA,KAAK,OAAO,EACjC,cAAe,EAAA,KAAK,OAAO,gBAAgB,EAC3C,oBAAqB,EAAA,KAAK,OAAO,EACjC,cAAe,EAAA,KAAK,OAAO,sBAAsB,EACjD,UAAW,EAAA,KAAK,KAAK,EAAK,EAC1B,OAAQ,EAAA,KAAK,MAAM,CAAC,OAAQ,UAAW,QAAS,QAAS,SAAS,EAAY,SAAS,CACzF,EACA,MAAM,EAAO,CAAE,OAAM,QAAQ,CAC3B,IAAM,GAAA,EAAA,EAAA,OAAA,CAAwB,EAAK,EAC7B,GAAA,EAAA,EAAA,OAAA,CAAsB,EAAK,EAC3B,GAAA,EAAA,EAAA,OAAA,CAAsB,EAAK,EAIjC,EAAK,CACH,KAAM,CACJ,aAAiB,EAAM,OAAO,QAAU,UAAY,OAAS,QAC7D,cAAkB,EAAM,OAAO,QAAU,UAAY,WAAa,KAClE,aAAiB,EAAM,OAAO,QAAU,QAAU,YAAc,SAChE,OAAQ,EAAM,MAChB,CACF,CAAC,EAED,IAAM,GAAc,EAAoC,QACtD,GAAM,MAAQ,EAAA,IAAI,aAAa,EAAU,IAAI,EAAK,MAAQ,GAO5D,MAAO,GAAA,IAAI;;;;;;wBAMU,GAAa,CAC1B,EAAe,MAAS,EAAE,OAA2B,cAAc,CAAC,CAAC,OAAS,CAChF,EAAE;UACF,EAAA,KACA,MACM,EAAA,IAAI,OACJ,EAAA,IAAI;;;;;;WAOZ,EAAE;;;;;;wBAMe,GAAa,CAC1B,EAAa,MAAS,EAAE,OAA2B,cAAc,CAAC,CAAC,OAAS,CAC9E,EAAE;UACF,EAAA,KACA,MACM,EAAA,IAAI,OACJ,EAAA,IAAI;;;;;gBAKJ,EAAW,QAAS,EAAM,cAAc,EAAE,GAAG,EAAW,cAAe,EAAM,oBAAoB,EAAE;;WAG3G,EAAE;;;;;;wBAMe,GAAa,CAC1B,EAAa,MAAS,EAAE,OAA2B,cAAc,CAAC,CAAC,OAAS,CAC9E,EAAE;UACF,EAAA,KACA,MACM,EAAA,IAAI,OACJ,EAAA,IAAI;;;;;gBAKJ,EAAW,QAAS,EAAM,cAAc,EAAE,GAAG,EAAW,cAAe,EAAM,oBAAoB,EAAE;gBACnG,EAAA,SACM,EAAQ,EAAM,UAAU,UACxB,EAAA,IAAI;uEAC+C,EAAK,OAAO,EAAE;;;;iBAKzE,EAAE;;WAGR,EAAE;;;;;;KAOR,EACA,OAAQ,CAAC,EAAA,mBAAoB,EAAA,OAAe,CAC9C,CAAC"}
+{"version":3,"file":"async.cjs","names":[],"sources":["../src/feedback/async/async.ts"],"sourcesContent":["import { define, html, prop, bind, useEmit } from '@vielzeug/ore';\nimport { when } from '@vielzeug/ore/directives';\nimport { type Readable, signal } from '@vielzeug/ripple';\n\nimport { reducedMotionMixin } from '../../styles';\nimport componentStyles from './async.css?inline';\n\nexport type AsyncStatus = 'idle' | 'loading' | 'empty' | 'error' | 'success';\n\nexport type OreAsyncEvents = {\n  retry: void;\n};\n\nexport type OreAsyncProps = {\n  'empty-description'?: string;\n  'empty-label'?: string;\n  'error-description'?: string;\n  'error-label'?: string;\n  retryable?: boolean;\n  status?: AsyncStatus;\n};\n\n/**\n * A container for handling asynchronous states (loading, empty, error, success).\n * Simplifies data fetching UI by providing consistent fallbacks.\n *\n * @element ore-async\n *\n * @attr {string} status - current state: 'idle' | 'loading' | 'empty' | 'error' | 'success' (default: 'success')\n * @attr {boolean} retryable - show retry button in error state (default: false)\n * @attr {string} empty-label - title for empty state (default: 'No content yet')\n * @attr {string} empty-description - optional text for empty state\n * @attr {string} error-label - title for error state (default: 'Something went wrong')\n * @attr {string} error-description - optional text for error state\n *\n * @fires retry - Emitted when the retry button is clicked (no detail payload)\n *\n * @slot - default content shown in 'success' state\n * @slot loading - custom loading UI (overrides default skeletons)\n * @slot empty - custom empty UI (overrides default icon/label)\n * @slot error - custom error UI (overrides default icon/label)\n *\n * @cssprop --async-color - Text/icon color used by default async state content\n * @cssprop --async-gap - Vertical spacing between icon, title, description, and actions\n * @cssprop --async-icon-size - Icon size for built-in loading/empty/error visuals\n * @example\n * ```html\n * <!-- Success state: default slot is shown -->\n * <ore-async status=\"success\">\n *   <ul><li>Item one</li><li>Item two</li></ul>\n * </ore-async>\n *\n * <!-- Loading state: shows skeleton placeholders -->\n * <ore-async status=\"loading\"></ore-async>\n *\n * <!-- Empty state with custom message -->\n * <ore-async status=\"empty\" empty-label=\"No results\" empty-description=\"Try adjusting your filters.\"></ore-async>\n *\n * <!-- Error state with retry button -->\n * <ore-async status=\"error\" retryable error-label=\"Failed to load\" error-description=\"Check your connection.\"></ore-async>\n * ```\n */\nexport const ASYNC_TAG = 'ore-async' as const;\ndefine<OreAsyncProps>(ASYNC_TAG, {\n  props: {\n    'empty-description': prop.string(),\n    'empty-label': prop.string('No content yet'),\n    'error-description': prop.string(),\n    'error-label': prop.string('Something went wrong'),\n    retryable: prop.bool(false),\n    status: prop.oneOf(['idle', 'loading', 'empty', 'error', 'success'] as const, 'success'),\n  },\n  setup(props) {\n    const emit = useEmit<OreAsyncEvents>();\n\n    const hasLoadingSlot = signal(false);\n    const hasEmptySlot = signal(false);\n    const hasErrorSlot = signal(false);\n\n    // Reflect status onto the host so CSS can show/hide each region.\n    // ARIA attributes are driven reactively by bind().\n    bind({\n      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        status: props.status,\n      },\n    });\n\n    const renderText = (className: 'title' | 'description', text: Readable<string | undefined> | undefined) => () =>\n      text?.value ? html`<p class=\"${className}\">${text}</p>` : '';\n\n    // All four regions are always in the shadow DOM — CSS on :host([status=\"…\"])\n    // toggles their visibility. This means:\n    // - No DOM churn on status transitions (no teardown/rebuild of slot elements).\n    // - Live regions are always present, so screen readers announce correctly.\n    // - focus is never lost across status changes.\n    return html`\n      <div class=\"region region-idle\" role=\"presentation\"></div>\n\n      <div class=\"region region-loading\" role=\"status\">\n        <slot\n          name=\"loading\"\n          @slotchange=${(e: Event) => {\n            hasLoadingSlot.value = (e.target as HTMLSlotElement).assignedNodes().length > 0;\n          }}></slot>\n        ${when(\n          hasLoadingSlot,\n          () => html``,\n          () => html`\n            <div class=\"loading-default\" aria-hidden=\"true\">\n              <ore-skeleton variant=\"text\" lines=\"1\" width=\"40%\"></ore-skeleton>\n              <ore-skeleton variant=\"text\" lines=\"3\" width=\"100%\"></ore-skeleton>\n              <ore-skeleton variant=\"text\" lines=\"1\" width=\"60%\"></ore-skeleton>\n            </div>\n          `,\n        )}\n      </div>\n\n      <div class=\"region region-empty\">\n        <slot\n          name=\"empty\"\n          @slotchange=${(e: Event) => {\n            hasEmptySlot.value = (e.target as HTMLSlotElement).assignedNodes().length > 0;\n          }}></slot>\n        ${when(\n          hasEmptySlot,\n          () => html``,\n          () => html`\n            <div class=\"empty-state\" role=\"status\">\n              <div class=\"icon\">\n                <ore-icon name=\"inbox\" size=\"100%\" stroke-width=\"1.75\" aria-hidden=\"true\"></ore-icon>\n              </div>\n              ${renderText('title', props['empty-label'])} ${renderText('description', props['empty-description'])}\n            </div>\n          `,\n        )}\n      </div>\n\n      <div class=\"region region-error\">\n        <slot\n          name=\"error\"\n          @slotchange=${(e: Event) => {\n            hasErrorSlot.value = (e.target as HTMLSlotElement).assignedNodes().length > 0;\n          }}></slot>\n        ${when(\n          hasErrorSlot,\n          () => html``,\n          () => html`\n            <div class=\"error-state\" role=\"alert\">\n              <div class=\"icon\">\n                <ore-icon name=\"triangle-alert\" size=\"100%\" stroke-width=\"1.75\" aria-hidden=\"true\"></ore-icon>\n              </div>\n              ${renderText('title', props['error-label'])} ${renderText('description', props['error-description'])}\n              ${when(\n                () => Boolean(props.retryable.value),\n                () => html`\n                  <button class=\"retry-btn\" type=\"button\" @click=${() => emit('retry')}>\n                    <ore-icon name=\"refresh-cw\" size=\"1em\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                    Try again\n                  </button>\n                `,\n              )}\n            </div>\n          `,\n        )}\n      </div>\n\n      <div class=\"region region-success\" role=\"presentation\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":"4TA8DA,IAAa,EAAY,yBACH,EAAW,CAC/B,MAAO,CACL,oBAAqB,EAAA,KAAK,OAAO,EACjC,cAAe,EAAA,KAAK,OAAO,gBAAgB,EAC3C,oBAAqB,EAAA,KAAK,OAAO,EACjC,cAAe,EAAA,KAAK,OAAO,sBAAsB,EACjD,UAAW,EAAA,KAAK,KAAK,EAAK,EAC1B,OAAQ,EAAA,KAAK,MAAM,CAAC,OAAQ,UAAW,QAAS,QAAS,SAAS,EAAY,SAAS,CACzF,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAA,EAAA,QAAA,CAA+B,EAE/B,GAAA,EAAA,EAAA,OAAA,CAAwB,EAAK,EAC7B,GAAA,EAAA,EAAA,OAAA,CAAsB,EAAK,EAC3B,GAAA,EAAA,EAAA,OAAA,CAAsB,EAAK,GAIjC,EAAA,EAAA,KAAA,CAAK,CACH,KAAM,CACJ,aAAiB,EAAM,OAAO,QAAU,UAAY,OAAS,QAC7D,cAAkB,EAAM,OAAO,QAAU,UAAY,WAAa,KAClE,aAAiB,EAAM,OAAO,QAAU,QAAU,YAAc,SAChE,OAAQ,EAAM,MAChB,CACF,CAAC,EAED,IAAM,GAAc,EAAoC,QACtD,GAAM,MAAQ,EAAA,IAAI,aAAa,EAAU,IAAI,EAAK,MAAQ,GAO5D,MAAO,GAAA,IAAI;;;;;;wBAMU,GAAa,CAC1B,EAAe,MAAS,EAAE,OAA2B,cAAc,CAAC,CAAC,OAAS,CAChF,EAAE;UACF,EAAA,KACA,MACM,EAAA,IAAI,OACJ,EAAA,IAAI;;;;;;WAOZ,EAAE;;;;;;wBAMe,GAAa,CAC1B,EAAa,MAAS,EAAE,OAA2B,cAAc,CAAC,CAAC,OAAS,CAC9E,EAAE;UACF,EAAA,KACA,MACM,EAAA,IAAI,OACJ,EAAA,IAAI;;;;;gBAKJ,EAAW,QAAS,EAAM,cAAc,EAAE,GAAG,EAAW,cAAe,EAAM,oBAAoB,EAAE;;WAG3G,EAAE;;;;;;wBAMe,GAAa,CAC1B,EAAa,MAAS,EAAE,OAA2B,cAAc,CAAC,CAAC,OAAS,CAC9E,EAAE;UACF,EAAA,KACA,MACM,EAAA,IAAI,OACJ,EAAA,IAAI;;;;;gBAKJ,EAAW,QAAS,EAAM,cAAc,EAAE,GAAG,EAAW,cAAe,EAAM,oBAAoB,EAAE;gBACnG,EAAA,SACM,EAAQ,EAAM,UAAU,UACxB,EAAA,IAAI;uEAC+C,EAAK,OAAO,EAAE;;;;iBAKzE,EAAE;;WAGR,EAAE;;;;;;KAOR,EACA,OAAQ,CAAC,EAAA,mBAAoB,EAAA,OAAe,CAC9C,CAAC"}

package/dist/async.js

@@ -1,19 +1,19 @@
 import { when as e } from "./ore/dist/directives/when.js";
 import "./ore/dist/directives.js";
 import { reducedMotionMixin as t } from "./styles/mixins/accessibility.css.js";
-import n from "./feedback/async/async.css?inline.js";
-import { define as r, html as i, prop as a } from "@vielzeug/ore";
-import { signal as o } from "@vielzeug/ripple";
+import n from "./feedback/async/async.css.js";
+import { bind as r, define as i, html as a, prop as o, useEmit as s } from "@vielzeug/ore";
+import { signal as c } from "@vielzeug/ripple";
 //#region src/feedback/async/async.ts
-var s = "ore-async";
-r(s, {
+var l = "ore-async";
+i(l, {
 	props: {
-		"empty-description": a.string(),
-		"empty-label": a.string("No content yet"),
-		"error-description": a.string(),
-		"error-label": a.string("Something went wrong"),
-		retryable: a.bool(!1),
-		status: a.oneOf([
+		"empty-description": o.string(),
+		"empty-label": o.string("No content yet"),
+		"error-description": o.string(),
+		"error-label": o.string("Something went wrong"),
+		retryable: o.bool(!1),
+		status: o.oneOf([
 			"idle",
 			"loading",
 			"empty",
@@ -21,25 +21,25 @@ r(s, {
 			"success"
 		], "success")
 	},
-	setup(t, { bind: n, emit: r }) {
-		let a = o(!1), s = o(!1), c = o(!1);
-		n({ attr: {
+	setup(t) {
+		let n = s(), i = c(!1), o = c(!1), l = c(!1);
+		r({ attr: {
 			ariaBusy: () => t.status.value === "loading" ? "true" : "false",
 			ariaLabel: () => t.status.value === "loading" ? "Loading…" : null,
 			ariaLive: () => t.status.value === "error" ? "assertive" : "polite",
 			status: t.status
 		} });
-		let l = (e, t) => () => t?.value ? i`<p class="${e}">${t}</p>` : "";
-		return i`
+		let u = (e, t) => () => t?.value ? a`<p class="${e}">${t}</p>` : "";
+		return a`
       <div class="region region-idle" role="presentation"></div>
 
       <div class="region region-loading" role="status">
         <slot
           name="loading"
           @slotchange=${(e) => {
-			a.value = e.target.assignedNodes().length > 0;
+			i.value = e.target.assignedNodes().length > 0;
 		}}></slot>
-        ${e(a, () => i``, () => i`
+        ${e(i, () => a``, () => a`
             <div class="loading-default" aria-hidden="true">
               <ore-skeleton variant="text" lines="1" width="40%"></ore-skeleton>
               <ore-skeleton variant="text" lines="3" width="100%"></ore-skeleton>
@@ -52,14 +52,14 @@ r(s, {
         <slot
           name="empty"
           @slotchange=${(e) => {
-			s.value = e.target.assignedNodes().length > 0;
+			o.value = e.target.assignedNodes().length > 0;
 		}}></slot>
-        ${e(s, () => i``, () => i`
+        ${e(o, () => a``, () => a`
             <div class="empty-state" role="status">
               <div class="icon">
                 <ore-icon name="inbox" size="100%" stroke-width="1.75" aria-hidden="true"></ore-icon>
               </div>
-              ${l("title", t["empty-label"])} ${l("description", t["empty-description"])}
+              ${u("title", t["empty-label"])} ${u("description", t["empty-description"])}
             </div>
           `)}
       </div>
@@ -68,16 +68,16 @@ r(s, {
         <slot
           name="error"
           @slotchange=${(e) => {
-			c.value = e.target.assignedNodes().length > 0;
+			l.value = e.target.assignedNodes().length > 0;
 		}}></slot>
-        ${e(c, () => i``, () => i`
+        ${e(l, () => a``, () => a`
             <div class="error-state" role="alert">
               <div class="icon">
                 <ore-icon name="triangle-alert" size="100%" stroke-width="1.75" aria-hidden="true"></ore-icon>
               </div>
-              ${l("title", t["error-label"])} ${l("description", t["error-description"])}
-              ${e(() => !!t.retryable.value, () => i`
-                  <button class="retry-btn" type="button" @click=${() => r("retry")}>
+              ${u("title", t["error-label"])} ${u("description", t["error-description"])}
+              ${e(() => !!t.retryable.value, () => a`
+                  <button class="retry-btn" type="button" @click=${() => n("retry")}>
                     <ore-icon name="refresh-cw" size="1em" stroke-width="2" aria-hidden="true"></ore-icon>
                     Try again
                   </button>
@@ -94,6 +94,6 @@ r(s, {
 	styles: [t, n]
 });
 //#endregion
-export { s as ASYNC_TAG };
+export { l as ASYNC_TAG };
 
 //# sourceMappingURL=async.js.map

package/dist/async.js.map

@@ -1 +1 @@
-{"version":3,"file":"async.js","names":[],"sources":["../src/feedback/async/async.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { when } from '@vielzeug/ore/directives';\nimport { type Readable, signal } from '@vielzeug/ripple';\n\nimport { reducedMotionMixin } from '../../styles';\nimport componentStyles from './async.css?inline';\n\nexport type AsyncStatus = 'idle' | 'loading' | 'empty' | 'error' | 'success';\n\nexport type OreAsyncEvents = {\n  retry: void;\n};\n\nexport type OreAsyncProps = {\n  'empty-description'?: string;\n  'empty-label'?: string;\n  'error-description'?: string;\n  'error-label'?: string;\n  retryable?: boolean;\n  status?: AsyncStatus;\n};\n\n/**\n * A container for handling asynchronous states (loading, empty, error, success).\n * Simplifies data fetching UI by providing consistent fallbacks.\n *\n * @element ore-async\n *\n * @attr {string} status - current state: 'idle' | 'loading' | 'empty' | 'error' | 'success' (default: 'success')\n * @attr {boolean} retryable - show retry button in error state (default: false)\n * @attr {string} empty-label - title for empty state (default: 'No content yet')\n * @attr {string} empty-description - optional text for empty state\n * @attr {string} error-label - title for error state (default: 'Something went wrong')\n * @attr {string} error-description - optional text for error state\n *\n * @fires retry - Emitted when the retry button is clicked (no detail payload)\n *\n * @slot - default content shown in 'success' state\n * @slot loading - custom loading UI (overrides default skeletons)\n * @slot empty - custom empty UI (overrides default icon/label)\n * @slot error - custom error UI (overrides default icon/label)\n *\n * @cssprop --async-color - Text/icon color used by default async state content\n * @cssprop --async-gap - Vertical spacing between icon, title, description, and actions\n * @cssprop --async-icon-size - Icon size for built-in loading/empty/error visuals\n * @example\n * ```html\n * <!-- Success state: default slot is shown -->\n * <ore-async status=\"success\">\n *   <ul><li>Item one</li><li>Item two</li></ul>\n * </ore-async>\n *\n * <!-- Loading state: shows skeleton placeholders -->\n * <ore-async status=\"loading\"></ore-async>\n *\n * <!-- Empty state with custom message -->\n * <ore-async status=\"empty\" empty-label=\"No results\" empty-description=\"Try adjusting your filters.\"></ore-async>\n *\n * <!-- Error state with retry button -->\n * <ore-async status=\"error\" retryable error-label=\"Failed to load\" error-description=\"Check your connection.\"></ore-async>\n * ```\n */\nexport const ASYNC_TAG = 'ore-async' as const;\ndefine<OreAsyncProps, OreAsyncEvents>(ASYNC_TAG, {\n  props: {\n    'empty-description': prop.string(),\n    'empty-label': prop.string('No content yet'),\n    'error-description': prop.string(),\n    'error-label': prop.string('Something went wrong'),\n    retryable: prop.bool(false),\n    status: prop.oneOf(['idle', 'loading', 'empty', 'error', 'success'] as const, 'success'),\n  },\n  setup(props, { bind, emit }) {\n    const hasLoadingSlot = signal(false);\n    const hasEmptySlot = signal(false);\n    const hasErrorSlot = signal(false);\n\n    // Reflect status onto the host so CSS can show/hide each region.\n    // ARIA attributes are driven reactively by bind().\n    bind({\n      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        status: props.status,\n      },\n    });\n\n    const renderText = (className: 'title' | 'description', text: Readable<string | undefined> | undefined) => () =>\n      text?.value ? html`<p class=\"${className}\">${text}</p>` : '';\n\n    // All four regions are always in the shadow DOM — CSS on :host([status=\"…\"])\n    // toggles their visibility. This means:\n    // - No DOM churn on status transitions (no teardown/rebuild of slot elements).\n    // - Live regions are always present, so screen readers announce correctly.\n    // - focus is never lost across status changes.\n    return html`\n      <div class=\"region region-idle\" role=\"presentation\"></div>\n\n      <div class=\"region region-loading\" role=\"status\">\n        <slot\n          name=\"loading\"\n          @slotchange=${(e: Event) => {\n            hasLoadingSlot.value = (e.target as HTMLSlotElement).assignedNodes().length > 0;\n          }}></slot>\n        ${when(\n          hasLoadingSlot,\n          () => html``,\n          () => html`\n            <div class=\"loading-default\" aria-hidden=\"true\">\n              <ore-skeleton variant=\"text\" lines=\"1\" width=\"40%\"></ore-skeleton>\n              <ore-skeleton variant=\"text\" lines=\"3\" width=\"100%\"></ore-skeleton>\n              <ore-skeleton variant=\"text\" lines=\"1\" width=\"60%\"></ore-skeleton>\n            </div>\n          `,\n        )}\n      </div>\n\n      <div class=\"region region-empty\">\n        <slot\n          name=\"empty\"\n          @slotchange=${(e: Event) => {\n            hasEmptySlot.value = (e.target as HTMLSlotElement).assignedNodes().length > 0;\n          }}></slot>\n        ${when(\n          hasEmptySlot,\n          () => html``,\n          () => html`\n            <div class=\"empty-state\" role=\"status\">\n              <div class=\"icon\">\n                <ore-icon name=\"inbox\" size=\"100%\" stroke-width=\"1.75\" aria-hidden=\"true\"></ore-icon>\n              </div>\n              ${renderText('title', props['empty-label'])} ${renderText('description', props['empty-description'])}\n            </div>\n          `,\n        )}\n      </div>\n\n      <div class=\"region region-error\">\n        <slot\n          name=\"error\"\n          @slotchange=${(e: Event) => {\n            hasErrorSlot.value = (e.target as HTMLSlotElement).assignedNodes().length > 0;\n          }}></slot>\n        ${when(\n          hasErrorSlot,\n          () => html``,\n          () => html`\n            <div class=\"error-state\" role=\"alert\">\n              <div class=\"icon\">\n                <ore-icon name=\"triangle-alert\" size=\"100%\" stroke-width=\"1.75\" aria-hidden=\"true\"></ore-icon>\n              </div>\n              ${renderText('title', props['error-label'])} ${renderText('description', props['error-description'])}\n              ${when(\n                () => Boolean(props.retryable.value),\n                () => html`\n                  <button class=\"retry-btn\" type=\"button\" @click=${() => emit('retry')}>\n                    <ore-icon name=\"refresh-cw\" size=\"1em\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                    Try again\n                  </button>\n                `,\n              )}\n            </div>\n          `,\n        )}\n      </div>\n\n      <div class=\"region region-success\" role=\"presentation\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":";;;;;;;AA8DA,IAAa,IAAY;AACzB,EAAsC,GAAW;CAC/C,OAAO;EACL,qBAAqB,EAAK,OAAO;EACjC,eAAe,EAAK,OAAO,gBAAgB;EAC3C,qBAAqB,EAAK,OAAO;EACjC,eAAe,EAAK,OAAO,sBAAsB;EACjD,WAAW,EAAK,KAAK,EAAK;EAC1B,QAAQ,EAAK,MAAM;GAAC;GAAQ;GAAW;GAAS;GAAS;EAAS,GAAY,SAAS;CACzF;CACA,MAAM,GAAO,EAAE,SAAM,WAAQ;EAC3B,IAAM,IAAiB,EAAO,EAAK,GAC7B,IAAe,EAAO,EAAK,GAC3B,IAAe,EAAO,EAAK;EAIjC,EAAK,EACH,MAAM;GACJ,gBAAiB,EAAM,OAAO,UAAU,YAAY,SAAS;GAC7D,iBAAkB,EAAM,OAAO,UAAU,YAAY,aAAa;GAClE,gBAAiB,EAAM,OAAO,UAAU,UAAU,cAAc;GAChE,QAAQ,EAAM;EAChB,EACF,CAAC;EAED,IAAM,KAAc,GAAoC,YACtD,GAAM,QAAQ,CAAI,aAAa,EAAU,IAAI,EAAK,QAAQ;EAO5D,OAAO,CAAI;;;;;;yBAMU,MAAa;GAC1B,EAAe,QAAS,EAAE,OAA2B,cAAc,CAAC,CAAC,SAAS;EAChF,EAAE;UACF,EACA,SACM,CAAI,UACJ,CAAI;;;;;;WAOZ,EAAE;;;;;;yBAMe,MAAa;GAC1B,EAAa,QAAS,EAAE,OAA2B,cAAc,CAAC,CAAC,SAAS;EAC9E,EAAE;UACF,EACA,SACM,CAAI,UACJ,CAAI;;;;;gBAKJ,EAAW,SAAS,EAAM,cAAc,EAAE,GAAG,EAAW,eAAe,EAAM,oBAAoB,EAAE;;WAG3G,EAAE;;;;;;yBAMe,MAAa;GAC1B,EAAa,QAAS,EAAE,OAA2B,cAAc,CAAC,CAAC,SAAS;EAC9E,EAAE;UACF,EACA,SACM,CAAI,UACJ,CAAI;;;;;gBAKJ,EAAW,SAAS,EAAM,cAAc,EAAE,GAAG,EAAW,eAAe,EAAM,oBAAoB,EAAE;gBACnG,QACM,EAAQ,EAAM,UAAU,aACxB,CAAI;yEAC+C,EAAK,OAAO,EAAE;;;;iBAKzE,EAAE;;WAGR,EAAE;;;;;;;CAOR;CACA,QAAQ,CAAC,GAAoB,CAAe;AAC9C,CAAC"}
+{"version":3,"file":"async.js","names":[],"sources":["../src/feedback/async/async.ts"],"sourcesContent":["import { define, html, prop, bind, useEmit } from '@vielzeug/ore';\nimport { when } from '@vielzeug/ore/directives';\nimport { type Readable, signal } from '@vielzeug/ripple';\n\nimport { reducedMotionMixin } from '../../styles';\nimport componentStyles from './async.css?inline';\n\nexport type AsyncStatus = 'idle' | 'loading' | 'empty' | 'error' | 'success';\n\nexport type OreAsyncEvents = {\n  retry: void;\n};\n\nexport type OreAsyncProps = {\n  'empty-description'?: string;\n  'empty-label'?: string;\n  'error-description'?: string;\n  'error-label'?: string;\n  retryable?: boolean;\n  status?: AsyncStatus;\n};\n\n/**\n * A container for handling asynchronous states (loading, empty, error, success).\n * Simplifies data fetching UI by providing consistent fallbacks.\n *\n * @element ore-async\n *\n * @attr {string} status - current state: 'idle' | 'loading' | 'empty' | 'error' | 'success' (default: 'success')\n * @attr {boolean} retryable - show retry button in error state (default: false)\n * @attr {string} empty-label - title for empty state (default: 'No content yet')\n * @attr {string} empty-description - optional text for empty state\n * @attr {string} error-label - title for error state (default: 'Something went wrong')\n * @attr {string} error-description - optional text for error state\n *\n * @fires retry - Emitted when the retry button is clicked (no detail payload)\n *\n * @slot - default content shown in 'success' state\n * @slot loading - custom loading UI (overrides default skeletons)\n * @slot empty - custom empty UI (overrides default icon/label)\n * @slot error - custom error UI (overrides default icon/label)\n *\n * @cssprop --async-color - Text/icon color used by default async state content\n * @cssprop --async-gap - Vertical spacing between icon, title, description, and actions\n * @cssprop --async-icon-size - Icon size for built-in loading/empty/error visuals\n * @example\n * ```html\n * <!-- Success state: default slot is shown -->\n * <ore-async status=\"success\">\n *   <ul><li>Item one</li><li>Item two</li></ul>\n * </ore-async>\n *\n * <!-- Loading state: shows skeleton placeholders -->\n * <ore-async status=\"loading\"></ore-async>\n *\n * <!-- Empty state with custom message -->\n * <ore-async status=\"empty\" empty-label=\"No results\" empty-description=\"Try adjusting your filters.\"></ore-async>\n *\n * <!-- Error state with retry button -->\n * <ore-async status=\"error\" retryable error-label=\"Failed to load\" error-description=\"Check your connection.\"></ore-async>\n * ```\n */\nexport const ASYNC_TAG = 'ore-async' as const;\ndefine<OreAsyncProps>(ASYNC_TAG, {\n  props: {\n    'empty-description': prop.string(),\n    'empty-label': prop.string('No content yet'),\n    'error-description': prop.string(),\n    'error-label': prop.string('Something went wrong'),\n    retryable: prop.bool(false),\n    status: prop.oneOf(['idle', 'loading', 'empty', 'error', 'success'] as const, 'success'),\n  },\n  setup(props) {\n    const emit = useEmit<OreAsyncEvents>();\n\n    const hasLoadingSlot = signal(false);\n    const hasEmptySlot = signal(false);\n    const hasErrorSlot = signal(false);\n\n    // Reflect status onto the host so CSS can show/hide each region.\n    // ARIA attributes are driven reactively by bind().\n    bind({\n      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        status: props.status,\n      },\n    });\n\n    const renderText = (className: 'title' | 'description', text: Readable<string | undefined> | undefined) => () =>\n      text?.value ? html`<p class=\"${className}\">${text}</p>` : '';\n\n    // All four regions are always in the shadow DOM — CSS on :host([status=\"…\"])\n    // toggles their visibility. This means:\n    // - No DOM churn on status transitions (no teardown/rebuild of slot elements).\n    // - Live regions are always present, so screen readers announce correctly.\n    // - focus is never lost across status changes.\n    return html`\n      <div class=\"region region-idle\" role=\"presentation\"></div>\n\n      <div class=\"region region-loading\" role=\"status\">\n        <slot\n          name=\"loading\"\n          @slotchange=${(e: Event) => {\n            hasLoadingSlot.value = (e.target as HTMLSlotElement).assignedNodes().length > 0;\n          }}></slot>\n        ${when(\n          hasLoadingSlot,\n          () => html``,\n          () => html`\n            <div class=\"loading-default\" aria-hidden=\"true\">\n              <ore-skeleton variant=\"text\" lines=\"1\" width=\"40%\"></ore-skeleton>\n              <ore-skeleton variant=\"text\" lines=\"3\" width=\"100%\"></ore-skeleton>\n              <ore-skeleton variant=\"text\" lines=\"1\" width=\"60%\"></ore-skeleton>\n            </div>\n          `,\n        )}\n      </div>\n\n      <div class=\"region region-empty\">\n        <slot\n          name=\"empty\"\n          @slotchange=${(e: Event) => {\n            hasEmptySlot.value = (e.target as HTMLSlotElement).assignedNodes().length > 0;\n          }}></slot>\n        ${when(\n          hasEmptySlot,\n          () => html``,\n          () => html`\n            <div class=\"empty-state\" role=\"status\">\n              <div class=\"icon\">\n                <ore-icon name=\"inbox\" size=\"100%\" stroke-width=\"1.75\" aria-hidden=\"true\"></ore-icon>\n              </div>\n              ${renderText('title', props['empty-label'])} ${renderText('description', props['empty-description'])}\n            </div>\n          `,\n        )}\n      </div>\n\n      <div class=\"region region-error\">\n        <slot\n          name=\"error\"\n          @slotchange=${(e: Event) => {\n            hasErrorSlot.value = (e.target as HTMLSlotElement).assignedNodes().length > 0;\n          }}></slot>\n        ${when(\n          hasErrorSlot,\n          () => html``,\n          () => html`\n            <div class=\"error-state\" role=\"alert\">\n              <div class=\"icon\">\n                <ore-icon name=\"triangle-alert\" size=\"100%\" stroke-width=\"1.75\" aria-hidden=\"true\"></ore-icon>\n              </div>\n              ${renderText('title', props['error-label'])} ${renderText('description', props['error-description'])}\n              ${when(\n                () => Boolean(props.retryable.value),\n                () => html`\n                  <button class=\"retry-btn\" type=\"button\" @click=${() => emit('retry')}>\n                    <ore-icon name=\"refresh-cw\" size=\"1em\" stroke-width=\"2\" aria-hidden=\"true\"></ore-icon>\n                    Try again\n                  </button>\n                `,\n              )}\n            </div>\n          `,\n        )}\n      </div>\n\n      <div class=\"region region-success\" role=\"presentation\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [reducedMotionMixin, componentStyles],\n});\n"],"mappings":";;;;;;;AA8DA,IAAa,IAAY;AACzB,EAAsB,GAAW;CAC/B,OAAO;EACL,qBAAqB,EAAK,OAAO;EACjC,eAAe,EAAK,OAAO,gBAAgB;EAC3C,qBAAqB,EAAK,OAAO;EACjC,eAAe,EAAK,OAAO,sBAAsB;EACjD,WAAW,EAAK,KAAK,EAAK;EAC1B,QAAQ,EAAK,MAAM;GAAC;GAAQ;GAAW;GAAS;GAAS;EAAS,GAAY,SAAS;CACzF;CACA,MAAM,GAAO;EACX,IAAM,IAAO,EAAwB,GAE/B,IAAiB,EAAO,EAAK,GAC7B,IAAe,EAAO,EAAK,GAC3B,IAAe,EAAO,EAAK;EAIjC,EAAK,EACH,MAAM;GACJ,gBAAiB,EAAM,OAAO,UAAU,YAAY,SAAS;GAC7D,iBAAkB,EAAM,OAAO,UAAU,YAAY,aAAa;GAClE,gBAAiB,EAAM,OAAO,UAAU,UAAU,cAAc;GAChE,QAAQ,EAAM;EAChB,EACF,CAAC;EAED,IAAM,KAAc,GAAoC,YACtD,GAAM,QAAQ,CAAI,aAAa,EAAU,IAAI,EAAK,QAAQ;EAO5D,OAAO,CAAI;;;;;;yBAMU,MAAa;GAC1B,EAAe,QAAS,EAAE,OAA2B,cAAc,CAAC,CAAC,SAAS;EAChF,EAAE;UACF,EACA,SACM,CAAI,UACJ,CAAI;;;;;;WAOZ,EAAE;;;;;;yBAMe,MAAa;GAC1B,EAAa,QAAS,EAAE,OAA2B,cAAc,CAAC,CAAC,SAAS;EAC9E,EAAE;UACF,EACA,SACM,CAAI,UACJ,CAAI;;;;;gBAKJ,EAAW,SAAS,EAAM,cAAc,EAAE,GAAG,EAAW,eAAe,EAAM,oBAAoB,EAAE;;WAG3G,EAAE;;;;;;yBAMe,MAAa;GAC1B,EAAa,QAAS,EAAE,OAA2B,cAAc,CAAC,CAAC,SAAS;EAC9E,EAAE;UACF,EACA,SACM,CAAI,UACJ,CAAI;;;;;gBAKJ,EAAW,SAAS,EAAM,cAAc,EAAE,GAAG,EAAW,eAAe,EAAM,oBAAoB,EAAE;gBACnG,QACM,EAAQ,EAAM,UAAU,aACxB,CAAI;yEAC+C,EAAK,OAAO,EAAE;;;;iBAKzE,EAAE;;WAGR,EAAE;;;;;;;CAOR;CACA,QAAQ,CAAC,GAAoB,CAAe;AAC9C,CAAC"}

package/dist/avatar.cjs

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

package/dist/avatar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.cjs","names":[],"sources":["../src/content/avatar/avatar.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport type { ComponentSize, RoundedSize, ThemeColor } from '../../types';\n\nimport '../icon/icon';\nimport { roundableBundle, sizableBundle, themableBundle } from '../../shared';\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 OreAvatarProps = {\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 ore-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: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} status - 'online' | 'offline' | 'busy' | 'away'\n *\n * @slot - Fallback content shown when image and initials are unavailable.\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 * @part avatar - Avatar root container.\n * @part img - Image element.\n * @part initials - Initials fallback element.\n * @part fallback - Shadow part for the `fallback` element.\n * @part status - Status indicator element.\n * @part overflow - Overflow indicator element.\n * @example\n * ```html\n * <ore-avatar src=\"/jane.jpg\" alt=\"Jane Doe\"></ore-avatar>\n * <ore-avatar initials=\"JD\" color=\"primary\"></ore-avatar>\n * <ore-avatar alt=\"John Smith\" status=\"online\"></ore-avatar>\n * ```\n */\nexport const AVATAR_TAG = 'ore-avatar' as const;\ndefine<OreAvatarProps>(AVATAR_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...roundableBundle,\n    alt: prop.string(),\n    initials: prop.string(),\n    src: prop.string(),\n    status: prop.string<AvatarStatus>(),\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    const avatarLabel = () => {\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    const avatarRole = () => (avatarLabel() ? 'img' : null);\n\n    return html`\n      <span class=\"avatar\" part=\"avatar\" :aria-label=\"${avatarLabel}\" :role=\"${avatarRole}\">\n        ${() =>\n          props.src.value\n            ? html`<img\n                ref=\"${attachImgListeners}\"\n                part=\"img\"\n                :src=\"${props.src}\"\n                :alt=\"${props.alt}\"\n                ?hidden=\"${() => !showImage.value}\"\n                aria-hidden=\"true\" />`\n            : ''}\n        ${() =>\n          showInitials.value\n            ? html`<span class=\"initials\" part=\"initials\" aria-hidden=\"true\">${derivedInitials}</span>`\n            : ''}\n        ${() =>\n          showFallback.value\n            ? html`<ore-icon class=\"icon-fallback\" part=\"fallback\" name=\"user\" size=\"50%\"></ore-icon>`\n            : ''}\n      </span>\n      ${() =>\n        props.status.value\n          ? html`<span class=\"status\" part=\"status\" :data-status=\"${props.status}\" 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 OreAvatarGroupProps = {\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 `ore-avatar` elements in a stacked, overlapping row.\n *\n * @element ore-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 - `ore-avatar` elements\n *\n * @cssprop --avatar-group-overlap - Negative margin creating the overlap (default: -0.75rem)\n *\n * @part overflow - Overflow count badge shown when avatars exceed `max`.\n *\n * @example\n * ```html\n * <ore-avatar-group max=\"3\">\n *   <ore-avatar src=\"/a.jpg\" alt=\"Alice\"></ore-avatar>\n *   <ore-avatar src=\"/b.jpg\" alt=\"Bob\"></ore-avatar>\n *   <ore-avatar src=\"/c.jpg\" alt=\"Carol\"></ore-avatar>\n *   <ore-avatar src=\"/d.jpg\" alt=\"Dave\"></ore-avatar>\n * </ore-avatar-group>\n * ```\n */\nexport const AVATAR_GROUP_TAG = 'ore-avatar-group' as const;\ndefine<OreAvatarGroupProps>(AVATAR_GROUP_TAG, {\n  props: {\n    max: prop.number(5),\n    total: prop.number(),\n  },\n  setup(props, { el, slots, watch }) {\n    const overflowCount = signal(0);\n\n    const updateVisibility = () => {\n      const avatars = [...el.querySelectorAll('ore-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    watch(() => {\n      void slots.elements().value;\n      updateVisibility();\n    });\n\n    const overflowLabel = () => `+${overflowCount.value} more`;\n    const overflowText = () => `+${overflowCount.value}`;\n\n    return html`\n      <slot></slot>\n      ${() =>\n        overflowCount.value > 0\n          ? html`<span class=\"overflow-badge\" part=\"overflow\" aria-label=\"${overflowLabel}\"> ${overflowText} </span>`\n          : ''}\n    `;\n  },\n  styles: [groupStyles],\n});\n"],"mappings":"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"}
+{"version":3,"file":"avatar.cjs","names":[],"sources":["../src/content/avatar/avatar.ts"],"sourcesContent":["import { define, html, prop, getHost, useSlots, watchEffect } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport type { ComponentSize, RoundedSize, ThemeColor } from '../../types';\n\nimport '../icon/icon';\nimport { roundableBundle, sizableBundle, themableBundle } from '../../shared';\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 OreAvatarProps = {\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 ore-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: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} status - 'online' | 'offline' | 'busy' | 'away'\n *\n * @slot - Fallback content shown when image and initials are unavailable.\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 * @part avatar - Avatar root container.\n * @part img - Image element.\n * @part initials - Initials fallback element.\n * @part fallback - Shadow part for the `fallback` element.\n * @part status - Status indicator element.\n * @part overflow - Overflow indicator element.\n * @example\n * ```html\n * <ore-avatar src=\"/jane.jpg\" alt=\"Jane Doe\"></ore-avatar>\n * <ore-avatar initials=\"JD\" color=\"primary\"></ore-avatar>\n * <ore-avatar alt=\"John Smith\" status=\"online\"></ore-avatar>\n * ```\n */\nexport const AVATAR_TAG = 'ore-avatar' as const;\ndefine<OreAvatarProps>(AVATAR_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...roundableBundle,\n    alt: prop.string(),\n    initials: prop.string(),\n    src: prop.string(),\n    status: prop.string<AvatarStatus>(),\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    const avatarLabel = () => {\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    const avatarRole = () => (avatarLabel() ? 'img' : null);\n\n    return html`\n      <span class=\"avatar\" part=\"avatar\" :aria-label=\"${avatarLabel}\" :role=\"${avatarRole}\">\n        ${() =>\n          props.src.value\n            ? html`<img\n                ref=\"${attachImgListeners}\"\n                part=\"img\"\n                :src=\"${props.src}\"\n                :alt=\"${props.alt}\"\n                ?hidden=\"${() => !showImage.value}\"\n                aria-hidden=\"true\" />`\n            : ''}\n        ${() =>\n          showInitials.value\n            ? html`<span class=\"initials\" part=\"initials\" aria-hidden=\"true\">${derivedInitials}</span>`\n            : ''}\n        ${() =>\n          showFallback.value\n            ? html`<ore-icon class=\"icon-fallback\" part=\"fallback\" name=\"user\" size=\"50%\"></ore-icon>`\n            : ''}\n      </span>\n      ${() =>\n        props.status.value\n          ? html`<span class=\"status\" part=\"status\" :data-status=\"${props.status}\" 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 OreAvatarGroupProps = {\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 `ore-avatar` elements in a stacked, overlapping row.\n *\n * @element ore-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 - `ore-avatar` elements\n *\n * @cssprop --avatar-group-overlap - Negative margin creating the overlap (default: -0.75rem)\n *\n * @part overflow - Overflow count badge shown when avatars exceed `max`.\n *\n * @example\n * ```html\n * <ore-avatar-group max=\"3\">\n *   <ore-avatar src=\"/a.jpg\" alt=\"Alice\"></ore-avatar>\n *   <ore-avatar src=\"/b.jpg\" alt=\"Bob\"></ore-avatar>\n *   <ore-avatar src=\"/c.jpg\" alt=\"Carol\"></ore-avatar>\n *   <ore-avatar src=\"/d.jpg\" alt=\"Dave\"></ore-avatar>\n * </ore-avatar-group>\n * ```\n */\nexport const AVATAR_GROUP_TAG = 'ore-avatar-group' as const;\ndefine<OreAvatarGroupProps>(AVATAR_GROUP_TAG, {\n  props: {\n    max: prop.number(5),\n    total: prop.number(),\n  },\n  setup(props) {\n    const el = getHost();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    const overflowCount = signal(0);\n\n    const updateVisibility = () => {\n      const avatars = [...el.querySelectorAll('ore-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    watch(() => {\n      void slots.elements().value;\n      updateVisibility();\n    });\n\n    const overflowLabel = () => `+${overflowCount.value} more`;\n    const overflowText = () => `+${overflowCount.value}`;\n\n    return html`\n      <slot></slot>\n      ${() =>\n        overflowCount.value > 0\n          ? html`<span class=\"overflow-badge\" part=\"overflow\" aria-label=\"${overflowLabel}\"> ${overflowText} </span>`\n          : ''}\n    `;\n  },\n  styles: [groupStyles],\n});\n"],"mappings":"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"}

package/dist/avatar.js

@@ -1,30 +1,30 @@
 import { roundedVariantMixin as e, sizeVariantMixin as t } from "./styles/mixins/shape.css.js";
 import { colorThemeMixin as n } from "./styles/mixins/theme.css.js";
 import { roundableBundle as r, sizableBundle as i, themableBundle as a } from "./shared/prop-bundles.js";
-import o from "./content/avatar/avatar-group.css?inline.js";
-import s from "./content/avatar/avatar.css?inline.js";
-import { define as c, html as l, prop as u } from "@vielzeug/ore";
-import { computed as d, signal as f, watch as p } from "@vielzeug/ripple";
+import o from "./content/avatar/avatar-group.css.js";
+import s from "./content/avatar/avatar.css.js";
+import { define as c, getHost as l, html as u, prop as d, useSlots as f, watchEffect as p } from "@vielzeug/ore";
+import { computed as m, signal as h, watch as g } from "@vielzeug/ripple";
 //#region src/content/avatar/avatar.ts
-var m = {
+var _ = {
 	away: "Away",
 	busy: "Busy",
 	offline: "Offline",
 	online: "Online"
-}, h = "ore-avatar";
-c(h, {
+}, v = "ore-avatar";
+c(v, {
 	props: {
 		...a,
 		...i,
 		...r,
-		alt: u.string(),
-		initials: u.string(),
-		src: u.string(),
-		status: u.string()
+		alt: d.string(),
+		initials: d.string(),
+		src: d.string(),
+		status: d.string()
 	},
 	setup(e) {
-		let t = f(!1);
-		p(e.src, () => {
+		let t = h(!1);
+		g(e.src, () => {
 			t.value = !1;
 		});
 		let n = (e) => {
@@ -33,29 +33,29 @@ c(h, {
 			}), e.addEventListener("load", () => {
 				t.value = !1;
 			}));
-		}, r = d(() => {
+		}, r = m(() => {
 			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 = d(() => !!e.src.value && !t.value), a = d(() => !i.value && !!r.value), o = d(() => !i.value && !a.value), s = () => {
-			let t = e.alt.value || null, n = e.status.value, r = n ? m[n] : null;
+		}), i = m(() => !!e.src.value && !t.value), a = m(() => !i.value && !!r.value), o = m(() => !i.value && !a.value), s = () => {
+			let t = e.alt.value || null, n = e.status.value, r = n ? _[n] : null;
 			return !t && !r ? null : t ? r ? `${t}, ${r}` : t : `Status: ${r}`;
 		};
-		return l`
+		return u`
       <span class="avatar" part="avatar" :aria-label="${s}" :role="${() => s() ? "img" : null}">
-        ${() => e.src.value ? l`<img
+        ${() => e.src.value ? u`<img
                 ref="${n}"
                 part="img"
                 :src="${e.src}"
                 :alt="${e.alt}"
                 ?hidden="${() => !i.value}"
                 aria-hidden="true" />` : ""}
-        ${() => a.value ? l`<span class="initials" part="initials" aria-hidden="true">${r}</span>` : ""}
-        ${() => o.value ? l`<ore-icon class="icon-fallback" part="fallback" name="user" size="50%"></ore-icon>` : ""}
+        ${() => a.value ? u`<span class="initials" part="initials" aria-hidden="true">${r}</span>` : ""}
+        ${() => o.value ? u`<ore-icon class="icon-fallback" part="fallback" name="user" size="50%"></ore-icon>` : ""}
       </span>
-      ${() => e.status.value ? l`<span class="status" part="status" :data-status="${e.status}" aria-hidden="true"></span>` : ""}
+      ${() => e.status.value ? u`<span class="status" part="status" :data-status="${e.status}" aria-hidden="true"></span>` : ""}
     `;
 	},
 	styles: [
@@ -78,14 +78,14 @@ c(h, {
 		s
 	]
 });
-var g = "ore-avatar-group";
-c(g, {
+var y = "ore-avatar-group";
+c(y, {
 	props: {
-		max: u.number(5),
-		total: u.number()
+		max: d.number(5),
+		total: d.number()
 	},
-	setup(e, { el: t, slots: n, watch: r }) {
-		let i = f(0), a = () => {
+	setup(e) {
+		let t = l(), n = f(), r = p, i = h(0), a = () => {
 			let n = [...t.querySelectorAll("ore-avatar")], r = Number(e.max.value) || 5, a = Math.max(0, n.length - r);
 			i.value = e.total.value == null ? a : Number(e.total.value) - r, n.forEach((e, t) => {
 				t >= r ? e.setAttribute("data-avatar-group-hidden", "") : e.removeAttribute("data-avatar-group-hidden");
@@ -95,14 +95,14 @@ c(g, {
 			n.elements().value, a();
 		});
 		let o = () => `+${i.value} more`, s = () => `+${i.value}`;
-		return l`
+		return u`
       <slot></slot>
-      ${() => i.value > 0 ? l`<span class="overflow-badge" part="overflow" aria-label="${o}"> ${s} </span>` : ""}
+      ${() => i.value > 0 ? u`<span class="overflow-badge" part="overflow" aria-label="${o}"> ${s} </span>` : ""}
     `;
 	},
 	styles: [o]
 });
 //#endregion
-export { g as AVATAR_GROUP_TAG, h as AVATAR_TAG };
+export { y as AVATAR_GROUP_TAG, v as AVATAR_TAG };
 
 //# sourceMappingURL=avatar.js.map