@vielzeug/refine 1.1.1

package/dist/async.cjs

@@ -0,0 +1,55 @@
+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`
+      <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`
+            <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>
+              <ore-skeleton variant="text" lines="1" width="60%"></ore-skeleton>
+            </div>
+          `)}
+      </div>
+
+      <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`
+            <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`])}
+            </div>
+          `)}
+      </div>
+
+      <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`
+            <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.when(()=>!!t.retryable.value,()=>r.html`
+                  <button class="retry-btn" type="button" @click=${()=>a(`retry`)}>
+                    <ore-icon name="refresh-cw" size="1em" stroke-width="2" aria-hidden="true"></ore-icon>
+                    Try again
+                  </button>
+                `)}
+            </div>
+          `)}
+      </div>
+
+      <div class="region region-success" role="presentation">
+        <slot></slot>
+      </div>
+    `},styles:[t.reducedMotionMixin,n.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, 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"}

package/dist/async.js

@@ -0,0 +1,99 @@
+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";
+//#region src/feedback/async/async.ts
+var s = "ore-async";
+r(s, {
+	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([
+			"idle",
+			"loading",
+			"empty",
+			"error",
+			"success"
+		], "success")
+	},
+	setup(t, { bind: n, emit: r }) {
+		let a = o(!1), s = o(!1), c = o(!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 ? i`<p class="${e}">${t}</p>` : "";
+		return i`
+      <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;
+		}}></slot>
+        ${e(a, () => i``, () => i`
+            <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>
+              <ore-skeleton variant="text" lines="1" width="60%"></ore-skeleton>
+            </div>
+          `)}
+      </div>
+
+      <div class="region region-empty">
+        <slot
+          name="empty"
+          @slotchange=${(e) => {
+			s.value = e.target.assignedNodes().length > 0;
+		}}></slot>
+        ${e(s, () => i``, () => i`
+            <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"])}
+            </div>
+          `)}
+      </div>
+
+      <div class="region region-error">
+        <slot
+          name="error"
+          @slotchange=${(e) => {
+			c.value = e.target.assignedNodes().length > 0;
+		}}></slot>
+        ${e(c, () => i``, () => i`
+            <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")}>
+                    <ore-icon name="refresh-cw" size="1em" stroke-width="2" aria-hidden="true"></ore-icon>
+                    Try again
+                  </button>
+                `)}
+            </div>
+          `)}
+      </div>
+
+      <div class="region region-success" role="presentation">
+        <slot></slot>
+      </div>
+    `;
+	},
+	styles: [t, n]
+});
+//#endregion
+export { s 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, 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"}

package/dist/avatar.cjs

@@ -0,0 +1,18 @@
+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`
+      <span class="avatar" part="avatar" :aria-label="${u}" :role="${()=>u()?`img`:null}">
+        ${()=>e.src.value?a.html`<img
+                ref="${n}"
+                part="img"
+                :src="${e.src}"
+                :alt="${e.alt}"
+                ?hidden="${()=>!i.value}"
+                aria-hidden="true" />`:``}
+        ${()=>c.value?a.html`<span class="initials" part="initials" aria-hidden="true">${r}</span>`:``}
+        ${()=>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`
+      <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;
+//# sourceMappingURL=avatar.cjs.map

package/dist/avatar.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.cjs","names":[],"sources":["../src/content/avatar/avatar.ts"],"sourcesContent":["import { 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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"}

package/dist/avatar.js

@@ -0,0 +1,108 @@
+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";
+//#region src/content/avatar/avatar.ts
+var m = {
+	away: "Away",
+	busy: "Busy",
+	offline: "Offline",
+	online: "Online"
+}, h = "ore-avatar";
+c(h, {
+	props: {
+		...a,
+		...i,
+		...r,
+		alt: u.string(),
+		initials: u.string(),
+		src: u.string(),
+		status: u.string()
+	},
+	setup(e) {
+		let t = f(!1);
+		p(e.src, () => {
+			t.value = !1;
+		});
+		let n = (e) => {
+			e && (e.addEventListener("error", () => {
+				t.value = !0;
+			}), e.addEventListener("load", () => {
+				t.value = !1;
+			}));
+		}, r = d(() => {
+			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;
+			return !t && !r ? null : t ? r ? `${t}, ${r}` : t : `Status: ${r}`;
+		};
+		return l`
+      <span class="avatar" part="avatar" :aria-label="${s}" :role="${() => s() ? "img" : null}">
+        ${() => e.src.value ? l`<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>` : ""}
+      </span>
+      ${() => e.status.value ? l`<span class="status" part="status" :data-status="${e.status}" aria-hidden="true"></span>` : ""}
+    `;
+	},
+	styles: [
+		n,
+		e,
+		t({
+			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))"
+			}
+		}),
+		s
+	]
+});
+var g = "ore-avatar-group";
+c(g, {
+	props: {
+		max: u.number(5),
+		total: u.number()
+	},
+	setup(e, { el: t, slots: n, watch: r }) {
+		let i = f(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");
+			});
+		};
+		r(() => {
+			n.elements().value, a();
+		});
+		let o = () => `+${i.value} more`, s = () => `+${i.value}`;
+		return l`
+      <slot></slot>
+      ${() => i.value > 0 ? l`<span class="overflow-badge" part="overflow" aria-label="${o}"> ${s} </span>` : ""}
+    `;
+	},
+	styles: [o]
+});
+//#endregion
+export { g as AVATAR_GROUP_TAG, h as AVATAR_TAG };
+
+//# sourceMappingURL=avatar.js.map

package/dist/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","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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"}

package/dist/badge.cjs

@@ -0,0 +1,7 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/shape.css.cjs"),t=require("./styles/mixins/theme.css.cjs"),n=require("./styles/mixins/variants.css.cjs"),r=require("./shared/prop-bundles.cjs"),i=require("./feedback/badge/badge.css?inline.cjs");let a=require("@vielzeug/ore"),o=require("@vielzeug/ripple");var s=`ore-badge`;(0,a.define)(s,{props:{...r.themableBundle,size:a.prop.string(),...r.roundableBundle,anchor:a.prop.string(),count:a.prop.number(),dot:a.prop.bool(!1),label:a.prop.string(),max:a.prop.number(),variant:a.prop.string()},setup(e){let t=(0,o.computed)(()=>{let t=e.count.value==null?void 0:Number(e.count.value),n=e.max.value==null?void 0:Number(e.max.value);if(!(t===void 0||Number.isNaN(t)))return n!==void 0&&!Number.isNaN(n)&&t>n?`${n}+`:String(t)});return a.html`<span class="badge" part="badge" :aria-label="${(0,o.computed)(()=>{if(e.label.value)return e.label.value;if(!e.dot.value&&t.value!=null)return`${t.value} notifications`})}">
+        <slot name="icon"></slot>
+        <span ?hidden="${()=>t.value==null}">${t}</span>
+        <span class="badge-label" ?hidden="${()=>t.value!=null}"><slot></slot></span>
+      </span>
+      <slot name="target"></slot>`},styles:[t.colorThemeMixin,t.forcedColorsMixin,e.roundedVariantMixin,n.frostVariantMixin(`.badge`),e.sizeVariantMixin({lg:{"--_padding-x":`var(--size-2-5)`,"--_padding-y":`var(--size-1)`,fontSize:`var(--text-sm)`},md:{"--_padding-x":`var(--size-2)`,"--_padding-y":`var(--size-0-5)`,fontSize:`var(--text-xs)`},sm:{"--_padding-x":`var(--size-1-5)`,"--_padding-y":`var(--size-px)`,fontSize:`var(--text-xs)`}}),i.default]}),exports.BADGE_TAG=s;
+//# sourceMappingURL=badge.cjs.map

package/dist/badge.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.cjs","names":[],"sources":["../src/feedback/badge/badge.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { RoundedSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { roundableBundle, themableBundle } from '../../shared';\nimport {\n  colorThemeMixin,\n  forcedColorsMixin,\n  frostVariantMixin,\n  roundedVariantMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport componentStyles from './badge.css?inline';\n\ntype BadgeVariant = Extract<VisualVariant, 'solid' | 'flat' | 'bordered' | 'outline' | 'frost'>;\ntype BadgeSize = 'xs' | 'sm' | 'md' | 'lg';\n\n/** Badge component properties */\nexport type OreBadgeProps = {\n  /**\n   * When set, switches to overlay mode: the host becomes `position:relative`\n   * and the badge pins to a corner over the slotted content.\n   * Value controls which corner: 'top-end' (default) | 'top-start' | 'bottom-end' | 'bottom-start'\n   */\n  anchor?: 'top-end' | 'top-start' | 'bottom-end' | 'bottom-start';\n  /** Theme color */\n  color?: ThemeColor;\n  /** Numeric count to display */\n  count?: number;\n  /** Render as a small dot with no label */\n  dot?: boolean;\n  /** Accessible label for assistive technology. Recommended for count-only and dot mode. */\n  label?: string;\n  /** Max count — displays \"<max>+\" when count exceeds this value */\n  max?: number;\n  /** Border radius override */\n  rounded?: RoundedSize;\n  /** Badge size */\n  size?: BadgeSize;\n  /** Visual style variant */\n  variant?: BadgeVariant;\n};\n\n/**\n * A compact badge/chip for counts, statuses, and labels.\n * Supports numeric counts with overflow, dot mode, and icon slots.\n *\n * @element ore-badge\n *\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'frost'\n * @attr {string} size - Component size: 'xs' | 'sm' | 'md' | 'lg'\n * @attr {number} count - Numeric count to display\n * @attr {number} max - Max count before showing \"<max>+\"\n * @attr {boolean} dot - Render as a dot indicator (no text)\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'full' etc.\n *\n * @slot - Badge label text\n * @slot icon - Icon displayed before the label\n * @slot target - Element the badge is anchored to (used with the anchor attribute)\n *\n * @cssprop --badge-bg - Badge background color\n * @cssprop --badge-color - Badge text color\n * @cssprop --badge-border-color - Badge border color\n * @cssprop --badge-radius - Border radius\n * @cssprop --badge-font-size - Font size\n * @cssprop --badge-font-weight - Font weight\n * @cssprop --badge-padding-x - Horizontal padding\n * @cssprop --badge-padding-y - Vertical padding\n * @cssprop --badge-gap - Gap between icon and label\n *\n * @part badge - Shadow part for the `badge` element.\n * @example\n * ```html\n * <ore-badge color=\"primary\">New</ore-badge>\n * <ore-badge color=\"error\" count=\"5\"></ore-badge>\n * <ore-badge color=\"error\" count=\"120\" max=\"99\"></ore-badge>\n * <ore-badge color=\"success\" dot></ore-badge>\n * <ore-badge color=\"warning\" variant=\"flat\">Beta</ore-badge>\n * ```\n */\nexport const BADGE_TAG = 'ore-badge' as const;\ndefine<OreBadgeProps>(BADGE_TAG, {\n  props: {\n    ...themableBundle,\n    size: prop.string<BadgeSize>(),\n    ...roundableBundle,\n    anchor: prop.string<'top-end' | 'top-start' | 'bottom-end' | 'bottom-start'>(),\n    count: prop.number(),\n    dot: prop.bool(false),\n    label: prop.string(),\n    max: prop.number(),\n    variant: prop.string<BadgeVariant>(),\n  },\n  setup(props) {\n    const label = computed(() => {\n      const count = props.count.value != null ? Number(props.count.value) : undefined;\n      const max = props.max.value != null ? Number(props.max.value) : undefined;\n\n      if (count === undefined || Number.isNaN(count)) return undefined;\n\n      if (max !== undefined && !Number.isNaN(max) && count > max) return `${max}+`;\n\n      return String(count);\n    });\n\n    const ariaLabel = computed(() => {\n      if (props.label.value) return props.label.value;\n\n      if (props.dot.value) return undefined;\n\n      if (label.value != null) return `${label.value} notifications`;\n\n      return undefined;\n    });\n\n    return html`<span class=\"badge\" part=\"badge\" :aria-label=\"${ariaLabel}\">\n        <slot name=\"icon\"></slot>\n        <span ?hidden=\"${() => label.value == null}\">${label}</span>\n        <span class=\"badge-label\" ?hidden=\"${() => label.value != null}\"><slot></slot></span>\n      </span>\n      <slot name=\"target\"></slot>`;\n  },\n  styles: [\n    colorThemeMixin,\n    forcedColorsMixin,\n    roundedVariantMixin,\n    frostVariantMixin('.badge'),\n    sizeVariantMixin({\n      lg: { '--_padding-x': 'var(--size-2-5)', '--_padding-y': 'var(--size-1)', fontSize: 'var(--text-sm)' },\n      md: { '--_padding-x': 'var(--size-2)', '--_padding-y': 'var(--size-0-5)', fontSize: 'var(--text-xs)' },\n      sm: { '--_padding-x': 'var(--size-1-5)', '--_padding-y': 'var(--size-px)', fontSize: 'var(--text-xs)' },\n    }),\n    componentStyles,\n  ],\n});\n"],"mappings":"oWAkFA,IAAa,EAAY,yBACH,EAAW,CAC/B,MAAO,CACL,GAAG,EAAA,eACH,KAAM,EAAA,KAAK,OAAkB,EAC7B,GAAG,EAAA,gBACH,OAAQ,EAAA,KAAK,OAAgE,EAC7E,MAAO,EAAA,KAAK,OAAO,EACnB,IAAK,EAAA,KAAK,KAAK,EAAK,EACpB,MAAO,EAAA,KAAK,OAAO,EACnB,IAAK,EAAA,KAAK,OAAO,EACjB,QAAS,EAAA,KAAK,OAAqB,CACrC,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAA,EAAA,SAAA,KAAuB,CAC3B,IAAM,EAAQ,EAAM,MAAM,OAAS,KAAmC,IAAA,GAA5B,OAAO,EAAM,MAAM,KAAK,EAC5D,EAAM,EAAM,IAAI,OAAS,KAAiC,IAAA,GAA1B,OAAO,EAAM,IAAI,KAAK,EAExD,SAAU,IAAA,IAAa,OAAO,MAAM,CAAK,GAI7C,OAFI,IAAQ,IAAA,IAAa,CAAC,OAAO,MAAM,CAAG,GAAK,EAAQ,EAAY,GAAG,EAAI,GAEnE,OAAO,CAAK,CACrB,CAAC,EAYD,MAAO,GAAA,IAAI,kDAAA,EAAA,EAAA,SAAA,KAVsB,CAC/B,GAAI,EAAM,MAAM,MAAO,OAAO,EAAM,MAAM,MAEtC,MAAM,IAAI,OAEV,EAAM,OAAS,KAAM,MAAO,GAAG,EAAM,MAAM,eAGjD,CAE4D,EAAU;;6BAE3C,EAAM,OAAS,KAAK,IAAI,EAAM;iDACV,EAAM,OAAS,KAAK;;kCAGrE,EACA,OAAQ,CACN,EAAA,gBACA,EAAA,kBACA,EAAA,oBACA,EAAA,kBAAkB,QAAQ,EAC1B,EAAA,iBAAiB,CACf,GAAI,CAAE,eAAgB,kBAAmB,eAAgB,gBAAiB,SAAU,gBAAiB,EACrG,GAAI,CAAE,eAAgB,gBAAiB,eAAgB,kBAAmB,SAAU,gBAAiB,EACrG,GAAI,CAAE,eAAgB,kBAAmB,eAAgB,iBAAkB,SAAU,gBAAiB,CACxG,CAAC,EACD,EAAA,OACF,CACF,CAAC"}

package/dist/badge.js

@@ -0,0 +1,65 @@
+import { roundedVariantMixin as e, sizeVariantMixin as t } from "./styles/mixins/shape.css.js";
+import { colorThemeMixin as n, forcedColorsMixin as r } from "./styles/mixins/theme.css.js";
+import { frostVariantMixin as i } from "./styles/mixins/variants.css.js";
+import { roundableBundle as a, themableBundle as o } from "./shared/prop-bundles.js";
+import s from "./feedback/badge/badge.css?inline.js";
+import { define as c, html as l, prop as u } from "@vielzeug/ore";
+import { computed as d } from "@vielzeug/ripple";
+//#region src/feedback/badge/badge.ts
+var f = "ore-badge";
+c(f, {
+	props: {
+		...o,
+		size: u.string(),
+		...a,
+		anchor: u.string(),
+		count: u.number(),
+		dot: u.bool(!1),
+		label: u.string(),
+		max: u.number(),
+		variant: u.string()
+	},
+	setup(e) {
+		let t = d(() => {
+			let t = e.count.value == null ? void 0 : Number(e.count.value), n = e.max.value == null ? void 0 : Number(e.max.value);
+			if (!(t === void 0 || Number.isNaN(t))) return n !== void 0 && !Number.isNaN(n) && t > n ? `${n}+` : String(t);
+		});
+		return l`<span class="badge" part="badge" :aria-label="${d(() => {
+			if (e.label.value) return e.label.value;
+			if (!e.dot.value && t.value != null) return `${t.value} notifications`;
+		})}">
+        <slot name="icon"></slot>
+        <span ?hidden="${() => t.value == null}">${t}</span>
+        <span class="badge-label" ?hidden="${() => t.value != null}"><slot></slot></span>
+      </span>
+      <slot name="target"></slot>`;
+	},
+	styles: [
+		n,
+		r,
+		e,
+		i(".badge"),
+		t({
+			lg: {
+				"--_padding-x": "var(--size-2-5)",
+				"--_padding-y": "var(--size-1)",
+				fontSize: "var(--text-sm)"
+			},
+			md: {
+				"--_padding-x": "var(--size-2)",
+				"--_padding-y": "var(--size-0-5)",
+				fontSize: "var(--text-xs)"
+			},
+			sm: {
+				"--_padding-x": "var(--size-1-5)",
+				"--_padding-y": "var(--size-px)",
+				fontSize: "var(--text-xs)"
+			}
+		}),
+		s
+	]
+});
+//#endregion
+export { f as BADGE_TAG };
+
+//# sourceMappingURL=badge.js.map

package/dist/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","names":[],"sources":["../src/feedback/badge/badge.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { RoundedSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { roundableBundle, themableBundle } from '../../shared';\nimport {\n  colorThemeMixin,\n  forcedColorsMixin,\n  frostVariantMixin,\n  roundedVariantMixin,\n  sizeVariantMixin,\n} from '../../styles';\nimport componentStyles from './badge.css?inline';\n\ntype BadgeVariant = Extract<VisualVariant, 'solid' | 'flat' | 'bordered' | 'outline' | 'frost'>;\ntype BadgeSize = 'xs' | 'sm' | 'md' | 'lg';\n\n/** Badge component properties */\nexport type OreBadgeProps = {\n  /**\n   * When set, switches to overlay mode: the host becomes `position:relative`\n   * and the badge pins to a corner over the slotted content.\n   * Value controls which corner: 'top-end' (default) | 'top-start' | 'bottom-end' | 'bottom-start'\n   */\n  anchor?: 'top-end' | 'top-start' | 'bottom-end' | 'bottom-start';\n  /** Theme color */\n  color?: ThemeColor;\n  /** Numeric count to display */\n  count?: number;\n  /** Render as a small dot with no label */\n  dot?: boolean;\n  /** Accessible label for assistive technology. Recommended for count-only and dot mode. */\n  label?: string;\n  /** Max count — displays \"<max>+\" when count exceeds this value */\n  max?: number;\n  /** Border radius override */\n  rounded?: RoundedSize;\n  /** Badge size */\n  size?: BadgeSize;\n  /** Visual style variant */\n  variant?: BadgeVariant;\n};\n\n/**\n * A compact badge/chip for counts, statuses, and labels.\n * Supports numeric counts with overflow, dot mode, and icon slots.\n *\n * @element ore-badge\n *\n * @attr {string} color - Theme color: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} variant - Visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'frost'\n * @attr {string} size - Component size: 'xs' | 'sm' | 'md' | 'lg'\n * @attr {number} count - Numeric count to display\n * @attr {number} max - Max count before showing \"<max>+\"\n * @attr {boolean} dot - Render as a dot indicator (no text)\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'full' etc.\n *\n * @slot - Badge label text\n * @slot icon - Icon displayed before the label\n * @slot target - Element the badge is anchored to (used with the anchor attribute)\n *\n * @cssprop --badge-bg - Badge background color\n * @cssprop --badge-color - Badge text color\n * @cssprop --badge-border-color - Badge border color\n * @cssprop --badge-radius - Border radius\n * @cssprop --badge-font-size - Font size\n * @cssprop --badge-font-weight - Font weight\n * @cssprop --badge-padding-x - Horizontal padding\n * @cssprop --badge-padding-y - Vertical padding\n * @cssprop --badge-gap - Gap between icon and label\n *\n * @part badge - Shadow part for the `badge` element.\n * @example\n * ```html\n * <ore-badge color=\"primary\">New</ore-badge>\n * <ore-badge color=\"error\" count=\"5\"></ore-badge>\n * <ore-badge color=\"error\" count=\"120\" max=\"99\"></ore-badge>\n * <ore-badge color=\"success\" dot></ore-badge>\n * <ore-badge color=\"warning\" variant=\"flat\">Beta</ore-badge>\n * ```\n */\nexport const BADGE_TAG = 'ore-badge' as const;\ndefine<OreBadgeProps>(BADGE_TAG, {\n  props: {\n    ...themableBundle,\n    size: prop.string<BadgeSize>(),\n    ...roundableBundle,\n    anchor: prop.string<'top-end' | 'top-start' | 'bottom-end' | 'bottom-start'>(),\n    count: prop.number(),\n    dot: prop.bool(false),\n    label: prop.string(),\n    max: prop.number(),\n    variant: prop.string<BadgeVariant>(),\n  },\n  setup(props) {\n    const label = computed(() => {\n      const count = props.count.value != null ? Number(props.count.value) : undefined;\n      const max = props.max.value != null ? Number(props.max.value) : undefined;\n\n      if (count === undefined || Number.isNaN(count)) return undefined;\n\n      if (max !== undefined && !Number.isNaN(max) && count > max) return `${max}+`;\n\n      return String(count);\n    });\n\n    const ariaLabel = computed(() => {\n      if (props.label.value) return props.label.value;\n\n      if (props.dot.value) return undefined;\n\n      if (label.value != null) return `${label.value} notifications`;\n\n      return undefined;\n    });\n\n    return html`<span class=\"badge\" part=\"badge\" :aria-label=\"${ariaLabel}\">\n        <slot name=\"icon\"></slot>\n        <span ?hidden=\"${() => label.value == null}\">${label}</span>\n        <span class=\"badge-label\" ?hidden=\"${() => label.value != null}\"><slot></slot></span>\n      </span>\n      <slot name=\"target\"></slot>`;\n  },\n  styles: [\n    colorThemeMixin,\n    forcedColorsMixin,\n    roundedVariantMixin,\n    frostVariantMixin('.badge'),\n    sizeVariantMixin({\n      lg: { '--_padding-x': 'var(--size-2-5)', '--_padding-y': 'var(--size-1)', fontSize: 'var(--text-sm)' },\n      md: { '--_padding-x': 'var(--size-2)', '--_padding-y': 'var(--size-0-5)', fontSize: 'var(--text-xs)' },\n      sm: { '--_padding-x': 'var(--size-1-5)', '--_padding-y': 'var(--size-px)', fontSize: 'var(--text-xs)' },\n    }),\n    componentStyles,\n  ],\n});\n"],"mappings":";;;;;;;;AAkFA,IAAa,IAAY;AACzB,EAAsB,GAAW;CAC/B,OAAO;EACL,GAAG;EACH,MAAM,EAAK,OAAkB;EAC7B,GAAG;EACH,QAAQ,EAAK,OAAgE;EAC7E,OAAO,EAAK,OAAO;EACnB,KAAK,EAAK,KAAK,EAAK;EACpB,OAAO,EAAK,OAAO;EACnB,KAAK,EAAK,OAAO;EACjB,SAAS,EAAK,OAAqB;CACrC;CACA,MAAM,GAAO;EACX,IAAM,IAAQ,QAAe;GAC3B,IAAM,IAAQ,EAAM,MAAM,SAAS,OAAmC,KAAA,IAA5B,OAAO,EAAM,MAAM,KAAK,GAC5D,IAAM,EAAM,IAAI,SAAS,OAAiC,KAAA,IAA1B,OAAO,EAAM,IAAI,KAAK;GAExD,YAAU,KAAA,KAAa,OAAO,MAAM,CAAK,IAI7C,OAFI,MAAQ,KAAA,KAAa,CAAC,OAAO,MAAM,CAAG,KAAK,IAAQ,IAAY,GAAG,EAAI,KAEnE,OAAO,CAAK;EACrB,CAAC;EAYD,OAAO,CAAI,iDAVO,QAAe;GAC/B,IAAI,EAAM,MAAM,OAAO,OAAO,EAAM,MAAM;GAEtC,OAAM,IAAI,SAEV,EAAM,SAAS,MAAM,OAAO,GAAG,EAAM,MAAM;EAGjD,CAE4D,EAAU;;+BAE3C,EAAM,SAAS,KAAK,IAAI,EAAM;mDACV,EAAM,SAAS,KAAK;;;CAGrE;CACA,QAAQ;EACN;EACA;EACA;EACA,EAAkB,QAAQ;EAC1B,EAAiB;GACf,IAAI;IAAE,gBAAgB;IAAmB,gBAAgB;IAAiB,UAAU;GAAiB;GACrG,IAAI;IAAE,gBAAgB;IAAiB,gBAAgB;IAAmB,UAAU;GAAiB;GACrG,IAAI;IAAE,gBAAgB;IAAmB,gBAAgB;IAAkB,UAAU;GAAiB;EACxG,CAAC;EACD;CACF;AACF,CAAC"}

package/dist/box.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/animation.css.cjs"),t=require("./styles/mixins/variants.css.cjs"),n=require("./styles/index.cjs"),r=require("./layout/box/box.css?inline.cjs");let i=require("@vielzeug/ore");var a=`ore-box`;(0,i.define)(a,{props:{color:i.prop.string(),effect:i.prop.string(),elevation:i.prop.number(),fullwidth:i.prop.bool(),padding:i.prop.string(),rounded:i.prop.string(),variant:i.prop.string()},setup(){return i.html`<div class="box" part="box"><slot></slot></div>`},styles:[...n.surfaceMixins,t.frostVariantMixin(`.box`),e.rainbowEffectMixin(`.box`),r.default]}),exports.BOX_TAG=a;
+//# sourceMappingURL=box.cjs.map

package/dist/box.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.cjs","names":[],"sources":["../src/layout/box/box.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\n\nimport type { ElevationLevel, PaddingSize, RoundedSize, ThemeColor } from '../../types';\n\nimport { frostVariantMixin, rainbowEffectMixin, surfaceMixins } from '../../styles';\nimport componentStyles from './box.css?inline';\n\n/** Box component properties */\nexport type OreBoxProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Animated border effect */\n  effect?: 'rainbow';\n  /** Shadow elevation level (0–5) */\n  elevation?: ElevationLevel;\n  /** Full width mode (100% of container) */\n  fullwidth?: boolean;\n  /** Internal padding size */\n  padding?: PaddingSize;\n  /** Border radius size */\n  rounded?: RoundedSize;\n  /** Visual style variant */\n  variant?: 'solid' | 'flat' | 'glass' | 'frost';\n};\n\n/**\n * ore-box — A foundational layout primitive with theming support.\n *\n * @element ore-box\n *\n * @attr {string} variant - Style variant: 'solid' | 'flat' | 'glass' | 'frost'\n * @attr {string} color - Color theme: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} padding - Padding size: 'none' | 'sm' | 'md' | 'lg' | 'xl'\n * @attr {string} elevation - Shadow elevation: '0' | '1' | '2' | '3' | '4' | '5'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} effect - Animated border effect: 'rainbow'\n * @attr {boolean} fullwidth - Expand to full width\n *\n * @slot - Default slot for content\n *\n * @part box - The inner box element\n *\n * @cssprop --box-bg - Background color\n * @cssprop --box-color - Text color\n * @cssprop --box-border - Border width\n * @cssprop --box-border-color - Border color\n * @cssprop --box-radius - Border radius\n * @cssprop --box-padding - Inner padding\n * @cssprop --box-shadow - Box shadow\n *\n * @example\n * ```html\n * <ore-box padding=\"lg\" elevation=\"2\">Simple content</ore-box>\n * <ore-box variant=\"glass\" color=\"primary\">Glass effect</ore-box>\n * <ore-box variant=\"frost\" effect=\"rainbow\">Frosted glass</ore-box>\n * ```\n */\nexport const BOX_TAG = 'ore-box' as const;\ndefine<OreBoxProps>(BOX_TAG, {\n  props: {\n    color: prop.string<ThemeColor>(),\n    effect: prop.string<'rainbow'>(),\n    elevation: prop.number<ElevationLevel>(),\n    fullwidth: prop.bool(),\n    padding: prop.string<PaddingSize>(),\n    rounded: prop.string<RoundedSize>(),\n    variant: prop.string<'flat' | 'solid' | 'frost' | 'glass'>(),\n  },\n  setup() {\n    return html`<div class=\"box\" part=\"box\"><slot></slot></div>`;\n  },\n\n  styles: [...surfaceMixins, frostVariantMixin('.box'), rainbowEffectMixin('.box'), componentStyles],\n});\n"],"mappings":"kRAyDA,IAAa,EAAU,uBACH,EAAS,CAC3B,MAAO,CACL,MAAO,EAAA,KAAK,OAAmB,EAC/B,OAAQ,EAAA,KAAK,OAAkB,EAC/B,UAAW,EAAA,KAAK,OAAuB,EACvC,UAAW,EAAA,KAAK,KAAK,EACrB,QAAS,EAAA,KAAK,OAAoB,EAClC,QAAS,EAAA,KAAK,OAAoB,EAClC,QAAS,EAAA,KAAK,OAA6C,CAC7D,EACA,OAAQ,CACN,MAAO,GAAA,IAAI,iDACb,EAEA,OAAQ,CAAC,GAAG,EAAA,cAAe,EAAA,kBAAkB,MAAM,EAAG,EAAA,mBAAmB,MAAM,EAAG,EAAA,OAAe,CACnG,CAAC"}

package/dist/box.js

@@ -0,0 +1,31 @@
+import { rainbowEffectMixin as e } from "./styles/mixins/animation.css.js";
+import { frostVariantMixin as t } from "./styles/mixins/variants.css.js";
+import { surfaceMixins as n } from "./styles/index.js";
+import r from "./layout/box/box.css?inline.js";
+import { define as i, html as a, prop as o } from "@vielzeug/ore";
+//#region src/layout/box/box.ts
+var s = "ore-box";
+i(s, {
+	props: {
+		color: o.string(),
+		effect: o.string(),
+		elevation: o.number(),
+		fullwidth: o.bool(),
+		padding: o.string(),
+		rounded: o.string(),
+		variant: o.string()
+	},
+	setup() {
+		return a`<div class="box" part="box"><slot></slot></div>`;
+	},
+	styles: [
+		...n,
+		t(".box"),
+		e(".box"),
+		r
+	]
+});
+//#endregion
+export { s as BOX_TAG };
+
+//# sourceMappingURL=box.js.map

package/dist/box.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.js","names":[],"sources":["../src/layout/box/box.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\n\nimport type { ElevationLevel, PaddingSize, RoundedSize, ThemeColor } from '../../types';\n\nimport { frostVariantMixin, rainbowEffectMixin, surfaceMixins } from '../../styles';\nimport componentStyles from './box.css?inline';\n\n/** Box component properties */\nexport type OreBoxProps = {\n  /** Theme color */\n  color?: ThemeColor;\n  /** Animated border effect */\n  effect?: 'rainbow';\n  /** Shadow elevation level (0–5) */\n  elevation?: ElevationLevel;\n  /** Full width mode (100% of container) */\n  fullwidth?: boolean;\n  /** Internal padding size */\n  padding?: PaddingSize;\n  /** Border radius size */\n  rounded?: RoundedSize;\n  /** Visual style variant */\n  variant?: 'solid' | 'flat' | 'glass' | 'frost';\n};\n\n/**\n * ore-box — A foundational layout primitive with theming support.\n *\n * @element ore-box\n *\n * @attr {string} variant - Style variant: 'solid' | 'flat' | 'glass' | 'frost'\n * @attr {string} color - Color theme: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} padding - Padding size: 'none' | 'sm' | 'md' | 'lg' | 'xl'\n * @attr {string} elevation - Shadow elevation: '0' | '1' | '2' | '3' | '4' | '5'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} effect - Animated border effect: 'rainbow'\n * @attr {boolean} fullwidth - Expand to full width\n *\n * @slot - Default slot for content\n *\n * @part box - The inner box element\n *\n * @cssprop --box-bg - Background color\n * @cssprop --box-color - Text color\n * @cssprop --box-border - Border width\n * @cssprop --box-border-color - Border color\n * @cssprop --box-radius - Border radius\n * @cssprop --box-padding - Inner padding\n * @cssprop --box-shadow - Box shadow\n *\n * @example\n * ```html\n * <ore-box padding=\"lg\" elevation=\"2\">Simple content</ore-box>\n * <ore-box variant=\"glass\" color=\"primary\">Glass effect</ore-box>\n * <ore-box variant=\"frost\" effect=\"rainbow\">Frosted glass</ore-box>\n * ```\n */\nexport const BOX_TAG = 'ore-box' as const;\ndefine<OreBoxProps>(BOX_TAG, {\n  props: {\n    color: prop.string<ThemeColor>(),\n    effect: prop.string<'rainbow'>(),\n    elevation: prop.number<ElevationLevel>(),\n    fullwidth: prop.bool(),\n    padding: prop.string<PaddingSize>(),\n    rounded: prop.string<RoundedSize>(),\n    variant: prop.string<'flat' | 'solid' | 'frost' | 'glass'>(),\n  },\n  setup() {\n    return html`<div class=\"box\" part=\"box\"><slot></slot></div>`;\n  },\n\n  styles: [...surfaceMixins, frostVariantMixin('.box'), rainbowEffectMixin('.box'), componentStyles],\n});\n"],"mappings":";;;;;;AAyDA,IAAa,IAAU;AACvB,EAAoB,GAAS;CAC3B,OAAO;EACL,OAAO,EAAK,OAAmB;EAC/B,QAAQ,EAAK,OAAkB;EAC/B,WAAW,EAAK,OAAuB;EACvC,WAAW,EAAK,KAAK;EACrB,SAAS,EAAK,OAAoB;EAClC,SAAS,EAAK,OAAoB;EAClC,SAAS,EAAK,OAA6C;CAC7D;CACA,QAAQ;EACN,OAAO,CAAI;CACb;CAEA,QAAQ;EAAC,GAAG;EAAe,EAAkB,MAAM;EAAG,EAAmB,MAAM;EAAG;CAAe;AACnG,CAAC"}

package/dist/breadcrumb.cjs

@@ -0,0 +1,21 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./content/breadcrumb/breadcrumb-item.css?inline.cjs"),t=require("./content/breadcrumb/breadcrumb.css?inline.cjs");let n=require("@vielzeug/ore");var r=`ore-breadcrumb-item`;(0,n.define)(r,{props:{active:n.prop.bool(),href:n.prop.string(),separator:n.prop.string(`/`)},setup(e){return n.html`
+      <li class="item" role="listitem">
+        <span class="separator" part="separator" aria-hidden="true">${e.separator}</span>
+        <a
+          class="link"
+          :href="${e.href}"
+          :aria-current="${()=>e.active.value?`page`:null}"
+          :tabindex="${()=>e.active.value?`-1`:null}"
+          part="link">
+          <span class="icon"><slot name="icon"></slot></span>
+          <span class="label"><slot></slot></span>
+        </a>
+      </li>
+    `},styles:[e.default]});var i=`ore-breadcrumb`;(0,n.define)(i,{props:{label:n.prop.string(`Breadcrumb`),separator:n.prop.string()},setup(e,{el:t,slots:r,watch:i}){let a=()=>Array.from(t.getElementsByTagName(`ore-breadcrumb-item`)),o=()=>{let n=e.separator.value||`/`,r=a();for(let e=0;e<r.length;e++)r[e].setAttribute(`separator`,n),r[e].toggleAttribute(`data-show-separator`,e>0);n?t.style.setProperty(`--breadcrumb-separator`,`'${n}'`):t.style.removeProperty(`--breadcrumb-separator`)};return i(()=>{r.elements().value,o()}),n.html`
+      <nav part="nav" :aria-label="${e.label}">
+        <ol role="list" part="list">
+          <slot></slot>
+        </ol>
+      </nav>
+    `},styles:[t.default]}),exports.BREADCRUMB_ITEM_TAG=r,exports.BREADCRUMB_TAG=i;
+//# sourceMappingURL=breadcrumb.cjs.map

package/dist/breadcrumb.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.cjs","names":[],"sources":["../src/content/breadcrumb/breadcrumb.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\n\nimport itemStyles from './breadcrumb-item.css?inline';\nimport componentStyles from './breadcrumb.css?inline';\n\nexport type OreBreadcrumbProps = {\n  label?: string;\n  separator?: string;\n};\n\nexport type OreBreadcrumbItemProps = {\n  active?: boolean;\n  href?: string;\n  separator?: string;\n};\n\n/**\n * A single breadcrumb entry rendered inside `<ore-breadcrumb>`.\n *\n * @element ore-breadcrumb-item\n *\n * @attr {boolean} active - Marks this item as the current page (`aria-current=\"page\"`)\n * @attr {string} href - Link target for this breadcrumb item\n * @attr {string} separator - Separator text shown before the item (except first item)\n *\n * @slot - Item label/content\n * @slot icon - Optional leading icon for the crumb\n *\n * @part separator - Separator element before the item label\n * @part link - The interactive anchor element\n *\n * @example\n * ```html\n * <ore-breadcrumb-item href=\"/\">Home</ore-breadcrumb-item>\n * <ore-breadcrumb-item active>Current Page</ore-breadcrumb-item>\n * ```\n */\nexport const BREADCRUMB_ITEM_TAG = 'ore-breadcrumb-item' as const;\ndefine<OreBreadcrumbItemProps>(BREADCRUMB_ITEM_TAG, {\n  props: {\n    active: prop.bool(),\n    href: prop.string(),\n    separator: prop.string('/'),\n  },\n  setup(props) {\n    return html`\n      <li class=\"item\" role=\"listitem\">\n        <span class=\"separator\" part=\"separator\" aria-hidden=\"true\">${props.separator}</span>\n        <a\n          class=\"link\"\n          :href=\"${props.href}\"\n          :aria-current=\"${() => (props.active.value ? 'page' : null)}\"\n          :tabindex=\"${() => (props.active.value ? '-1' : null)}\"\n          part=\"link\">\n          <span class=\"icon\"><slot name=\"icon\"></slot></span>\n          <span class=\"label\"><slot></slot></span>\n        </a>\n      </li>\n    `;\n  },\n  styles: [itemStyles],\n});\n\n// ============================================\n// Breadcrumb Component\n// ============================================\n\n/**\n * Accessible breadcrumb navigation container.\n *\n * @element ore-breadcrumb\n *\n * @attr {string} label - Accessible label for the internal `<nav>` landmark\n * @attr {string} separator - Separator text propagated to child `<ore-breadcrumb-item>` elements\n *\n * @slot - One or more `<ore-breadcrumb-item>` children\n *\n * @part nav - Internal navigation landmark element\n * @part list - Internal ordered list container\n *\n * @cssprop --breadcrumb-separator - Optional custom separator text synced to child items\n *\n * @example\n * ```html\n * <ore-breadcrumb label=\"Page breadcrumb\">\n *   <ore-breadcrumb-item href=\"/\">Home</ore-breadcrumb-item>\n *   <ore-breadcrumb-item href=\"/blog\">Blog</ore-breadcrumb-item>\n *   <ore-breadcrumb-item active>My Post</ore-breadcrumb-item>\n * </ore-breadcrumb>\n * ```\n */\nexport const BREADCRUMB_TAG = 'ore-breadcrumb' as const;\ndefine<OreBreadcrumbProps>(BREADCRUMB_TAG, {\n  props: {\n    label: prop.string('Breadcrumb'),\n    separator: prop.string(),\n  },\n  setup(props, { el, slots, watch }) {\n    // ────────────────────────────────────────────────────────────────\n    // Item & Separator Synchronization\n    // ────────────────────────────────────────────────────────────────\n\n    const getItems = (): HTMLElement[] => Array.from(el.getElementsByTagName('ore-breadcrumb-item'));\n\n    const syncItems = () => {\n      const sep = props.separator.value || '/';\n      const items = getItems();\n\n      for (let i = 0; i < items.length; i++) {\n        items[i].setAttribute('separator', sep);\n        items[i].toggleAttribute('data-show-separator', i > 0);\n      }\n\n      // Sync CSS variable for CSS-based separator (if used)\n      if (sep) el.style.setProperty('--breadcrumb-separator', `'${sep}'`);\n      else el.style.removeProperty('--breadcrumb-separator');\n    };\n\n    // ────────────────────────────────────────────────────────────────\n    // Lifecycle\n    // ────────────────────────────────────────────────────────────────\n\n    watch(() => {\n      void slots.elements().value;\n      syncItems();\n    });\n\n    return html`\n      <nav part=\"nav\" :aria-label=\"${props.label}\">\n        <ol role=\"list\" part=\"list\">\n          <slot></slot>\n        </ol>\n      </nav>\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":"qOAqCA,IAAa,EAAsB,mCACJ,EAAqB,CAClD,MAAO,CACL,OAAQ,EAAA,KAAK,KAAK,EAClB,KAAM,EAAA,KAAK,OAAO,EAClB,UAAW,EAAA,KAAK,OAAO,GAAG,CAC5B,EACA,MAAM,EAAO,CACX,MAAO,GAAA,IAAI;;sEAEuD,EAAM,UAAU;;;mBAGnE,EAAM,KAAK;+BACI,EAAM,OAAO,MAAQ,OAAS,KAAM;2BACxC,EAAM,OAAO,MAAQ,KAAO,KAAM;;;;;;KAO9D,EACA,OAAQ,CAAC,EAAA,OAAU,CACrB,CAAC,EA8BD,IAAa,EAAiB,8BACH,EAAgB,CACzC,MAAO,CACL,MAAO,EAAA,KAAK,OAAO,YAAY,EAC/B,UAAW,EAAA,KAAK,OAAO,CACzB,EACA,MAAM,EAAO,CAAE,KAAI,QAAO,SAAS,CAKjC,IAAM,MAAgC,MAAM,KAAK,EAAG,qBAAqB,qBAAqB,CAAC,EAEzF,MAAkB,CACtB,IAAM,EAAM,EAAM,UAAU,OAAS,IAC/B,EAAQ,EAAS,EAEvB,IAAK,IAAI,EAAI,EAAG,EAAI,EAAM,OAAQ,IAChC,EAAM,EAAE,CAAC,aAAa,YAAa,CAAG,EACtC,EAAM,EAAE,CAAC,gBAAgB,sBAAuB,EAAI,CAAC,EAInD,EAAK,EAAG,MAAM,YAAY,yBAA0B,IAAI,EAAI,EAAE,EAC7D,EAAG,MAAM,eAAe,wBAAwB,CACvD,EAWA,OALA,MAAY,CACV,EAAW,SAAS,CAAC,CAAC,MACtB,EAAU,CACZ,CAAC,EAEM,EAAA,IAAI;qCACsB,EAAM,MAAM;;;;;KAM/C,EACA,OAAQ,CAAC,EAAA,OAAe,CAC1B,CAAC"}