@vielzeug/buildit 2.0.0 → 2.1.0

package/dist/avatar.js

@@ -1,28 +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 "./icon.js";
+import { roundableBundle as e, sizableBundle as t, themableBundle as n } from "./inputs/shared/bundles.js";
+import { roundedVariantMixin as r, sizeVariantMixin as i } from "./styles/mixins/shape.css.js";
+import { colorThemeMixin as a } from "./styles/mixins/theme.css.js";
 import "./styles/index.js";
-import r from "./content/avatar/avatar.css?inline.js";
-import i from "./content/avatar/avatar-group.css?inline.js";
-import { computed as a, defineComponent as o, html as s, onMount as c, onSlotChange as l, signal as u, watch as d } from "@vielzeug/craftit";
+import o from "./content/avatar/avatar-group.css?inline.js";
+import s from "./content/avatar/avatar.css?inline.js";
+import { computed as c, define as l, effect as u, html as d, signal as f, watch as p } from "@vielzeug/craftit";
 //#region src/content/avatar/avatar.ts
-var f = {
+var m = {
 	away: "Away",
 	busy: "Busy",
 	offline: "Offline",
 	online: "Online"
-}, p = o({
+}, h = l("bit-avatar", {
 	props: {
-		alt: { default: void 0 },
-		color: { default: void 0 },
-		initials: { default: void 0 },
-		rounded: { default: void 0 },
-		size: { default: void 0 },
-		src: { default: void 0 },
-		status: { default: void 0 }
+		...n,
+		...t,
+		...e,
+		alt: void 0,
+		initials: void 0,
+		src: void 0,
+		status: void 0
 	},
 	setup({ props: e }) {
-		let t = u(!1);
-		d(e.src, () => {
+		let t = f(!1);
+		p(e.src, () => {
 			t.value = !1;
 		});
 		let n = (e) => {
@@ -31,42 +33,33 @@ var f = {
 			}), e.addEventListener("load", () => {
 				t.value = !1;
 			}));
-		}, r = a(() => {
+		}, r = c(() => {
 			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 = a(() => !!e.src.value && !t.value), o = a(() => !i.value && !!r.value), c = a(() => !i.value && !o.value), l = a(() => {
-			let t = e.alt.value || null, n = e.status.value, r = n ? f[n] : null;
+		}), i = c(() => !!e.src.value && !t.value), a = c(() => !i.value && !!r.value), o = c(() => !i.value && !a.value), s = c(() => {
+			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 s`
+		return d`
       <span
         class="avatar"
         part="avatar"
-        :aria-label="${() => l.value}"
-        :role="${() => l.value ? "img" : null}">
-        ${() => e.src.value ? s`<img
+        :aria-label="${() => s.value}"
+        :role="${() => s.value ? "img" : null}">
+        ${() => e.src.value ? d`<img
                 ref=${n}
                 part="img"
                 :src="${() => e.src.value}"
                 :alt="${() => e.alt.value || ""}"
                 ?hidden="${() => !i.value}"
                 aria-hidden="true" />` : ""}
-        ${() => o.value ? s`<span class="initials" part="initials" aria-hidden="true">${() => r.value}</span>` : ""}
-        ${() => c.value ? s`<span class="icon-fallback" part="fallback" aria-hidden="true">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="currentColor"
-                  width="55%"
-                  height="55%">
-                  <path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5.33 0-8 2.67-8 4v1h16v-1c0-1.33-2.67-4-8-4Z" />
-                </svg>
-              </span>` : ""}
+        ${() => a.value ? d`<span class="initials" part="initials" aria-hidden="true">${() => r.value}</span>` : ""}
+        ${() => o.value ? d`<bit-icon class="icon-fallback" part="fallback" name="user" size="50%"></bit-icon>` : ""}
       </span>
-      ${() => e.status.value ? s`<span
+      ${() => e.status.value ? d`<span
               class="status"
               part="status"
               :data-status="${() => e.status.value}"
@@ -74,9 +67,9 @@ var f = {
     `;
 	},
 	styles: [
-		n,
-		e,
-		t({
+		a,
+		r,
+		i({
 			lg: {
 				fontSize: "var(--avatar-font-size, var(--text-base))",
 				size: "var(--avatar-size, var(--size-14))"
@@ -90,34 +83,32 @@ var f = {
 				size: "var(--avatar-size, var(--size-7))"
 			}
 		}),
-		r
-	],
-	tag: "bit-avatar"
-}), m = o({
+		s
+	]
+}), g = l("bit-avatar-group", {
 	props: {
-		max: { default: 5 },
-		total: { default: void 0 }
+		max: 5,
+		total: void 0
 	},
-	setup({ host: e, props: t }) {
-		let n = u(0);
-		return c(() => {
-			l("default", () => {
-				let r = [...e.querySelectorAll("bit-avatar")], i = Number(t.max.value) || 5, a = Math.max(0, r.length - i);
-				n.value = t.total.value == null ? a : Number(t.total.value) - i, r.forEach((e, t) => {
-					t >= i ? e.setAttribute("data-avatar-group-hidden", "") : e.removeAttribute("data-avatar-group-hidden");
-				});
+	setup({ host: e, props: t, slots: n }) {
+		let r = f(0), i = () => {
+			let n = [...e.el.querySelectorAll("bit-avatar")], i = Number(t.max.value) || 5, a = Math.max(0, n.length - i);
+			r.value = t.total.value == null ? a : Number(t.total.value) - i, n.forEach((e, t) => {
+				t >= i ? e.setAttribute("data-avatar-group-hidden", "") : e.removeAttribute("data-avatar-group-hidden");
 			});
-		}), s`
+		};
+		return u(() => {
+			n.elements().value, i();
+		}), d`
       <slot></slot>
-      ${() => n.value > 0 ? s`<span class="overflow-badge" part="overflow" aria-label="${() => `+${n.value} more`}">
-              +${() => n.value}
+      ${() => r.value > 0 ? d`<span class="overflow-badge" part="overflow" aria-label="${() => `+${r.value} more`}">
+              +${() => r.value}
             </span>` : ""}
     `;
 	},
-	styles: [i],
-	tag: "bit-avatar-group"
+	styles: [o]
 });
 //#endregion
-export { m as AVATAR_GROUP_TAG, p as AVATAR_TAG };
+export { g as AVATAR_GROUP_TAG, h as AVATAR_TAG };
 
 //# sourceMappingURL=avatar.js.map

package/dist/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","names":[],"sources":["../src/content/avatar/avatar.ts"],"sourcesContent":["import { computed, defineComponent, html, onMount, onSlotChange, signal, watch } from '@vielzeug/craftit';\n\nimport type { ComponentSize, RoundedSize, ThemeColor } from '../../types';\n\nimport { colorThemeMixin, roundedVariantMixin, sizeVariantMixin } from '../../styles';\n// ============================================\n// Styles\n// ============================================\nimport componentStyles from './avatar.css?inline';\n\n// ============================================\n// Types\n// ============================================\n\nexport type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';\n\nconst STATUS_LABELS: Record<AvatarStatus, string> = {\n  away: 'Away',\n  busy: 'Busy',\n  offline: 'Offline',\n  online: 'Online',\n};\n\n/** Avatar component properties */\nexport type BitAvatarProps = {\n  /** Alt text for the image; also used to derive initials when no `initials` prop is given */\n  alt?: string;\n  /** Theme color (used for initials background) */\n  color?: ThemeColor;\n  /** Explicit initials to display when no image is available (e.g. \"JD\") */\n  initials?: string;\n  /** Border radius */\n  rounded?: RoundedSize | '';\n  /** Component size */\n  size?: ComponentSize;\n  /** Image source URL */\n  src?: string;\n  /** Online presence indicator */\n  status?: AvatarStatus;\n};\n\n// ============================================\n// Component\n// ============================================\n\n/**\n * Displays a user avatar: image → initials → generic fallback icon, in that priority order.\n *\n * @element bit-avatar\n *\n * @attr {string} src - Image source URL\n * @attr {string} alt - Image alt text (also used to derive initials)\n * @attr {string} initials - Explicit initials (up to 2 chars)\n * @attr {string} color - Theme color for initials background\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius\n * @attr {string} status - 'online' | 'offline' | 'busy' | 'away'\n *\n * @cssprop --avatar-size - Diameter of the avatar\n * @cssprop --avatar-bg - Background color\n * @cssprop --avatar-color - Text/icon color\n * @cssprop --avatar-radius - Border radius\n * @cssprop --avatar-border - Border shorthand\n * @cssprop --avatar-border-color - Border color (also controls status dot border)\n *\n * @example\n * ```html\n * <bit-avatar src=\"/jane.jpg\" alt=\"Jane Doe\"></bit-avatar>\n * <bit-avatar initials=\"JD\" color=\"primary\"></bit-avatar>\n * <bit-avatar alt=\"John Smith\" status=\"online\"></bit-avatar>\n * ```\n */\nexport const AVATAR_TAG = defineComponent<BitAvatarProps>({\n  props: {\n    alt: { default: undefined },\n    color: { default: undefined },\n    initials: { default: undefined },\n    rounded: { default: undefined },\n    size: { default: undefined },\n    src: { default: undefined },\n    status: { default: undefined },\n  },\n  setup({ props }) {\n    const imgFailed = signal(false);\n\n    // Reset stale error state whenever src changes\n    watch(props.src, () => {\n      imgFailed.value = false;\n    });\n\n    // Attach load/error listeners reactively when the img element mounts\n    const attachImgListeners = (el: HTMLImageElement | null) => {\n      if (!el) return;\n\n      el.addEventListener('error', () => {\n        imgFailed.value = true;\n      });\n      el.addEventListener('load', () => {\n        imgFailed.value = false;\n      });\n    };\n    const derivedInitials = computed(() => {\n      if (props.initials.value) return props.initials.value.slice(0, 2);\n\n      const alt = props.alt.value;\n\n      if (!alt) return '';\n\n      const parts = alt.trim().split(/\\s+/);\n\n      if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();\n\n      return parts[0].slice(0, 2).toUpperCase();\n    });\n    const showImage = computed(() => !!props.src.value && !imgFailed.value);\n    const showInitials = computed(() => !showImage.value && !!derivedInitials.value);\n    const showFallback = computed(() => !showImage.value && !showInitials.value);\n    // Combines name and status into a single accessible label so AT announces them together\n    const avatarLabel = computed(() => {\n      const name = (props.alt.value as string | undefined) || null;\n      const statusKey = props.status.value as AvatarStatus | undefined;\n      const status = statusKey ? STATUS_LABELS[statusKey] : null;\n\n      if (!name && !status) return null;\n\n      if (!name) return `Status: ${status}`;\n\n      if (!status) return name;\n\n      return `${name}, ${status}`;\n    });\n\n    return html`\n      <span\n        class=\"avatar\"\n        part=\"avatar\"\n        :aria-label=\"${() => avatarLabel.value}\"\n        :role=\"${() => (avatarLabel.value ? 'img' : null)}\">\n        ${() =>\n          props.src.value\n            ? html`<img\n                ref=${attachImgListeners}\n                part=\"img\"\n                :src=\"${() => props.src.value}\"\n                :alt=\"${() => props.alt.value || ''}\"\n                ?hidden=\"${() => !showImage.value}\"\n                aria-hidden=\"true\" />`\n            : ''}\n        ${() =>\n          showInitials.value\n            ? html`<span class=\"initials\" part=\"initials\" aria-hidden=\"true\">${() => derivedInitials.value}</span>`\n            : ''}\n        ${() =>\n          showFallback.value\n            ? html`<span class=\"icon-fallback\" part=\"fallback\" aria-hidden=\"true\">\n                <svg\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  viewBox=\"0 0 24 24\"\n                  fill=\"currentColor\"\n                  width=\"55%\"\n                  height=\"55%\">\n                  <path d=\"M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5.33 0-8 2.67-8 4v1h16v-1c0-1.33-2.67-4-8-4Z\" />\n                </svg>\n              </span>`\n            : ''}\n      </span>\n      ${() =>\n        props.status.value\n          ? html`<span\n              class=\"status\"\n              part=\"status\"\n              :data-status=\"${() => props.status.value}\"\n              aria-hidden=\"true\"></span>`\n          : ''}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    roundedVariantMixin,\n    sizeVariantMixin({\n      lg: { fontSize: 'var(--avatar-font-size, var(--text-base))', size: 'var(--avatar-size, var(--size-14))' },\n      md: { fontSize: 'var(--avatar-font-size, var(--text-sm))', size: 'var(--avatar-size, var(--size-10))' },\n      sm: { fontSize: 'var(--avatar-font-size, var(--text-xs))', size: 'var(--avatar-size, var(--size-7))' },\n    }),\n    componentStyles,\n  ],\n  tag: 'bit-avatar',\n});\n\n// ============================================\n// AvatarGroup\n// ============================================\n\nimport groupStyles from './avatar-group.css?inline';\n\n/** AvatarGroup component properties */\nexport type BitAvatarGroupProps = {\n  /** Maximum number of avatars to show before showing a +N badge */\n  max?: number;\n  /** Total count shown in the overflow badge (defaults to the actual hidden count) */\n  total?: number;\n};\n\n/**\n * Groups multiple `bit-avatar` elements in a stacked, overlapping row.\n *\n * @element bit-avatar-group\n *\n * @attr {number} max - Max visible avatars before overflow badge (default: 5)\n * @attr {number} total - Override the total count displayed in the badge\n *\n * @slot - `bit-avatar` elements\n *\n * @cssprop --avatar-group-overlap - Negative margin creating the overlap (default: -0.75rem)\n *\n * @example\n * ```html\n * <bit-avatar-group max=\"3\">\n *   <bit-avatar src=\"/a.jpg\" alt=\"Alice\"></bit-avatar>\n *   <bit-avatar src=\"/b.jpg\" alt=\"Bob\"></bit-avatar>\n *   <bit-avatar src=\"/c.jpg\" alt=\"Carol\"></bit-avatar>\n *   <bit-avatar src=\"/d.jpg\" alt=\"Dave\"></bit-avatar>\n * </bit-avatar-group>\n * ```\n */\nexport const AVATAR_GROUP_TAG = defineComponent<BitAvatarGroupProps>({\n  props: {\n    max: { default: 5 },\n    total: { default: undefined },\n  },\n  setup({ host, props }) {\n    const overflowCount = signal(0);\n\n    onMount(() => {\n      const updateVisibility = () => {\n        const avatars = [...host.querySelectorAll('bit-avatar')];\n        const max = Number(props.max.value) || 5;\n        const hidden = Math.max(0, avatars.length - max);\n\n        overflowCount.value = props.total.value != null ? Number(props.total.value) - max : hidden;\n        avatars.forEach((a, i) => {\n          if (i >= max) a.setAttribute('data-avatar-group-hidden', '');\n          else a.removeAttribute('data-avatar-group-hidden');\n        });\n      };\n\n      onSlotChange('default', updateVisibility);\n    });\n\n    return html`\n      <slot></slot>\n      ${() =>\n        overflowCount.value > 0\n          ? html`<span class=\"overflow-badge\" part=\"overflow\" aria-label=\"${() => `+${overflowCount.value} more`}\">\n              +${() => overflowCount.value}\n            </span>`\n          : ''}\n    `;\n  },\n  styles: [groupStyles],\n  tag: 'bit-avatar-group',\n});\n"],"mappings":"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"}
+{"version":3,"file":"avatar.js","names":[],"sources":["../src/content/avatar/avatar.ts"],"sourcesContent":["import { define, computed, effect, html, signal, watch } from '@vielzeug/craftit';\n\nimport type { ComponentSize, RoundedSize, ThemeColor } from '../../types';\n\nimport '../icon/icon';\nimport { type PropBundle, roundableBundle, sizableBundle, themableBundle } from '../../inputs/shared/bundles';\nimport { colorThemeMixin, roundedVariantMixin, sizeVariantMixin } from '../../styles';\nimport groupStyles from './avatar-group.css?inline';\nimport componentStyles from './avatar.css?inline';\n\nexport type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';\n\nconst STATUS_LABELS: Record<AvatarStatus, string> = {\n  away: 'Away',\n  busy: 'Busy',\n  offline: 'Offline',\n  online: 'Online',\n};\n\n/** Avatar component properties */\nexport type BitAvatarProps = {\n  /** Alt text for the image; also used to derive initials when no `initials` prop is given */\n  alt?: string;\n  /** Theme color (used for initials background) */\n  color?: ThemeColor;\n  /** Explicit initials to display when no image is available (e.g. \"JD\") */\n  initials?: string;\n  /** Border radius */\n  rounded?: RoundedSize | '';\n  /** Component size */\n  size?: ComponentSize;\n  /** Image source URL */\n  src?: string;\n  /** Online presence indicator */\n  status?: AvatarStatus;\n};\n\n// ============================================\n// Component\n// ============================================\n\n/**\n * Displays a user avatar: image → initials → generic fallback icon, in that priority order.\n *\n * @element bit-avatar\n *\n * @attr {string} src - Image source URL\n * @attr {string} alt - Image alt text (also used to derive initials)\n * @attr {string} initials - Explicit initials (up to 2 chars)\n * @attr {string} color - Theme color for initials background\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius\n * @attr {string} status - 'online' | 'offline' | 'busy' | 'away'\n *\n * @cssprop --avatar-size - Diameter of the avatar\n * @cssprop --avatar-bg - Background color\n * @cssprop --avatar-color - Text/icon color\n * @cssprop --avatar-radius - Border radius\n * @cssprop --avatar-border - Border shorthand\n * @cssprop --avatar-border-color - Border color (also controls status dot border)\n *\n * @example\n * ```html\n * <bit-avatar src=\"/jane.jpg\" alt=\"Jane Doe\"></bit-avatar>\n * <bit-avatar initials=\"JD\" color=\"primary\"></bit-avatar>\n * <bit-avatar alt=\"John Smith\" status=\"online\"></bit-avatar>\n * ```\n */\nexport const AVATAR_TAG = define<BitAvatarProps>('bit-avatar', {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...roundableBundle,\n    alt: undefined,\n    initials: undefined,\n    src: undefined,\n    status: undefined,\n  } satisfies PropBundle<BitAvatarProps>,\n  setup({ props }) {\n    const imgFailed = signal(false);\n\n    // Reset stale error state whenever src changes\n    watch(props.src, () => {\n      imgFailed.value = false;\n    });\n\n    // Attach load/error listeners reactively when the img element mounts\n    const attachImgListeners = (el: HTMLImageElement | null) => {\n      if (!el) return;\n\n      el.addEventListener('error', () => {\n        imgFailed.value = true;\n      });\n      el.addEventListener('load', () => {\n        imgFailed.value = false;\n      });\n    };\n    const derivedInitials = computed(() => {\n      if (props.initials.value) return props.initials.value.slice(0, 2);\n\n      const alt = props.alt.value;\n\n      if (!alt) return '';\n\n      const parts = alt.trim().split(/\\s+/);\n\n      if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();\n\n      return parts[0].slice(0, 2).toUpperCase();\n    });\n    const showImage = computed(() => !!props.src.value && !imgFailed.value);\n    const showInitials = computed(() => !showImage.value && !!derivedInitials.value);\n    const showFallback = computed(() => !showImage.value && !showInitials.value);\n    // Combines name and status into a single accessible label so AT announces them together\n    const avatarLabel = computed(() => {\n      const name = (props.alt.value as string | undefined) || null;\n      const statusKey = props.status.value as AvatarStatus | undefined;\n      const status = statusKey ? STATUS_LABELS[statusKey] : null;\n\n      if (!name && !status) return null;\n\n      if (!name) return `Status: ${status}`;\n\n      if (!status) return name;\n\n      return `${name}, ${status}`;\n    });\n\n    return html`\n      <span\n        class=\"avatar\"\n        part=\"avatar\"\n        :aria-label=\"${() => avatarLabel.value}\"\n        :role=\"${() => (avatarLabel.value ? 'img' : null)}\">\n        ${() =>\n          props.src.value\n            ? html`<img\n                ref=${attachImgListeners}\n                part=\"img\"\n                :src=\"${() => props.src.value}\"\n                :alt=\"${() => props.alt.value || ''}\"\n                ?hidden=\"${() => !showImage.value}\"\n                aria-hidden=\"true\" />`\n            : ''}\n        ${() =>\n          showInitials.value\n            ? html`<span class=\"initials\" part=\"initials\" aria-hidden=\"true\">${() => derivedInitials.value}</span>`\n            : ''}\n        ${() =>\n          showFallback.value\n            ? html`<bit-icon class=\"icon-fallback\" part=\"fallback\" name=\"user\" size=\"50%\"></bit-icon>`\n            : ''}\n      </span>\n      ${() =>\n        props.status.value\n          ? html`<span\n              class=\"status\"\n              part=\"status\"\n              :data-status=\"${() => props.status.value}\"\n              aria-hidden=\"true\"></span>`\n          : ''}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    roundedVariantMixin,\n    sizeVariantMixin({\n      lg: { fontSize: 'var(--avatar-font-size, var(--text-base))', size: 'var(--avatar-size, var(--size-14))' },\n      md: { fontSize: 'var(--avatar-font-size, var(--text-sm))', size: 'var(--avatar-size, var(--size-10))' },\n      sm: { fontSize: 'var(--avatar-font-size, var(--text-xs))', size: 'var(--avatar-size, var(--size-7))' },\n    }),\n    componentStyles,\n  ],\n});\n\n// ============================================\n// AvatarGroup\n// ============================================\n\n/** AvatarGroup component properties */\nexport type BitAvatarGroupProps = {\n  /** Maximum number of avatars to show before showing a +N badge */\n  max?: number;\n  /** Total count shown in the overflow badge (defaults to the actual hidden count) */\n  total?: number;\n};\n\n/**\n * Groups multiple `bit-avatar` elements in a stacked, overlapping row.\n *\n * @element bit-avatar-group\n *\n * @attr {number} max - Max visible avatars before overflow badge (default: 5)\n * @attr {number} total - Override the total count displayed in the badge\n *\n * @slot - `bit-avatar` elements\n *\n * @cssprop --avatar-group-overlap - Negative margin creating the overlap (default: -0.75rem)\n *\n * @example\n * ```html\n * <bit-avatar-group max=\"3\">\n *   <bit-avatar src=\"/a.jpg\" alt=\"Alice\"></bit-avatar>\n *   <bit-avatar src=\"/b.jpg\" alt=\"Bob\"></bit-avatar>\n *   <bit-avatar src=\"/c.jpg\" alt=\"Carol\"></bit-avatar>\n *   <bit-avatar src=\"/d.jpg\" alt=\"Dave\"></bit-avatar>\n * </bit-avatar-group>\n * ```\n */\nexport const AVATAR_GROUP_TAG = define<{ max?: number; total?: number }>('bit-avatar-group', {\n  props: {\n    max: 5,\n    total: undefined,\n  },\n  setup({ host, props, slots }) {\n    const overflowCount = signal(0);\n\n    const updateVisibility = () => {\n      const avatars = [...host.el.querySelectorAll('bit-avatar')];\n      const max = Number(props.max.value) || 5;\n      const hidden = Math.max(0, avatars.length - max);\n\n      overflowCount.value = props.total.value != null ? Number(props.total.value) - max : hidden;\n      avatars.forEach((a, i) => {\n        if (i >= max) a.setAttribute('data-avatar-group-hidden', '');\n        else a.removeAttribute('data-avatar-group-hidden');\n      });\n    };\n\n    effect(() => {\n      void slots.elements().value;\n      updateVisibility();\n    });\n\n    return html`\n      <slot></slot>\n      ${() =>\n        overflowCount.value > 0\n          ? html`<span class=\"overflow-badge\" part=\"overflow\" aria-label=\"${() => `+${overflowCount.value} more`}\">\n              +${() => overflowCount.value}\n            </span>`\n          : ''}\n    `;\n  },\n  styles: [groupStyles],\n});\n"],"mappings":"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"}

package/dist/badge.cjs

@@ -1,7 +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`);require(`./styles/index.cjs`);const r=require(`./feedback/badge/badge.css?inline.cjs`);let i=require(`@vielzeug/craftit`);var a=(0,i.defineComponent)({props:{anchor:{default:void 0},ariaLabel:{default:void 0},color:{default:void 0},count:{default:void 0},dot:{default:!1},max:{default:void 0},rounded:{default:void 0},size:{default:void 0},variant:{default:void 0}},setup({props:e}){let t=(0,i.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 i.html`<span class="badge" part="badge" aria-label=${()=>e.ariaLabel.value}>
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./inputs/shared/bundles.cjs`),t=require(`./styles/mixins/shape.css.cjs`),n=require(`./styles/mixins/theme.css.cjs`),r=require(`./styles/mixins/variants.css.cjs`);require(`./styles/index.cjs`);const i=require(`./feedback/badge/badge.css?inline.cjs`);let a=require(`@vielzeug/craftit`);var o=(0,a.define)(`bit-badge`,{props:{...e.themableBundle,...e.sizableBundle,...e.roundableBundle,anchor:void 0,count:void 0,dot:!1,label:void 0,max:void 0,variant:void 0},setup({props:e}){let t=(0,a.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=${()=>e.label.value}>
         <slot name="icon"></slot>
         <span ?hidden=${()=>t.value==null}>${()=>t.value}</span>
         <slot ?hidden=${()=>t.value!=null}></slot>
       </span>
-      <slot name="target"></slot>`},styles:[t.colorThemeMixin,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)`}}),r.default],tag:`bit-badge`});exports.BADGE_TAG=a;
+      <slot name="target"></slot>`},styles:[n.colorThemeMixin,t.roundedVariantMixin,r.frostVariantMixin(`.badge`),t.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=o;
 //# sourceMappingURL=badge.cjs.map

package/dist/badge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"badge.cjs","names":[],"sources":["../src/feedback/badge/badge.ts"],"sourcesContent":["import { computed, defineComponent, html } from '@vielzeug/craftit';\n\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { colorThemeMixin, frostVariantMixin, roundedVariantMixin, sizeVariantMixin } from '../../styles';\nimport componentStyles from './badge.css?inline';\n\ntype BadgeVariant = Extract<VisualVariant, 'solid' | 'flat' | 'bordered' | 'outline' | 'frost'>;\n\n/** Badge component properties */\nexport type BitBadgeProps = {\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  /** Accessible label for assistive technology. Recommended for count-only and dot mode. */\n  ariaLabel?: string;\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  /** Max count — displays \"<max>+\" when count exceeds this value */\n  max?: number;\n  /** Border radius override */\n  rounded?: RoundedSize;\n  /** Badge size */\n  size?: ComponentSize;\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 bit-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: '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 * @example\n * ```html\n * <bit-badge color=\"primary\">New</bit-badge>\n * <bit-badge color=\"error\" count=\"5\"></bit-badge>\n * <bit-badge color=\"error\" count=\"120\" max=\"99\"></bit-badge>\n * <bit-badge color=\"success\" dot></bit-badge>\n * <bit-badge color=\"warning\" variant=\"flat\">Beta</bit-badge>\n * ```\n */\nexport const BADGE_TAG = defineComponent<BitBadgeProps>({\n  props: {\n    anchor: { default: undefined },\n    ariaLabel: { default: undefined },\n    color: { default: undefined },\n    count: { default: undefined },\n    dot: { default: false },\n    max: { default: undefined },\n    rounded: { default: undefined },\n    size: { default: undefined },\n    variant: { default: undefined },\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    return html`<span class=\"badge\" part=\"badge\" aria-label=${() => props.ariaLabel.value}>\n        <slot name=\"icon\"></slot>\n        <span ?hidden=${() => label.value == null}>${() => label.value}</span>\n        <slot ?hidden=${() => label.value != null}></slot>\n      </span>\n      <slot name=\"target\"></slot>`;\n  },\n  styles: [\n    colorThemeMixin,\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  tag: 'bit-badge',\n});\n"],"mappings":"uUAwEA,IAAa,GAAA,EAAA,EAAA,iBAA2C,CACtD,MAAO,CACL,OAAQ,CAAE,QAAS,IAAA,GAAW,CAC9B,UAAW,CAAE,QAAS,IAAA,GAAW,CACjC,MAAO,CAAE,QAAS,IAAA,GAAW,CAC7B,MAAO,CAAE,QAAS,IAAA,GAAW,CAC7B,IAAK,CAAE,QAAS,GAAO,CACvB,IAAK,CAAE,QAAS,IAAA,GAAW,CAC3B,QAAS,CAAE,QAAS,IAAA,GAAW,CAC/B,KAAM,CAAE,QAAS,IAAA,GAAW,CAC5B,QAAS,CAAE,QAAS,IAAA,GAAW,CAChC,CACD,MAAM,CAAE,SAAS,CACf,IAAM,GAAA,EAAA,EAAA,cAAuB,CAC3B,IAAM,EAAQ,EAAM,MAAM,OAAS,KAAmC,IAAA,GAA5B,OAAO,EAAM,MAAM,MAAM,CAC7D,EAAM,EAAM,IAAI,OAAS,KAAiC,IAAA,GAA1B,OAAO,EAAM,IAAI,MAAM,CAEzD,SAAU,IAAA,IAAa,OAAO,MAAM,EAAM,EAI9C,OAFI,IAAQ,IAAA,IAAa,CAAC,OAAO,MAAM,EAAI,EAAI,EAAQ,EAAY,GAAG,EAAI,GAEnE,OAAO,EAAM,EACpB,CAEF,MAAO,GAAA,IAAI,mDAAqD,EAAM,UAAU,MAAM;;4BAE5D,EAAM,OAAS,KAAK,OAAS,EAAM,MAAM;4BACzC,EAAM,OAAS,KAAK;;oCAIhD,OAAQ,CACN,EAAA,gBACA,EAAA,oBACA,EAAA,kBAAkB,SAAS,CAC3B,EAAA,iBAAiB,CACf,GAAI,CAAE,eAAgB,kBAAmB,eAAgB,gBAAiB,SAAU,iBAAkB,CACtG,GAAI,CAAE,eAAgB,gBAAiB,eAAgB,kBAAmB,SAAU,iBAAkB,CACtG,GAAI,CAAE,eAAgB,kBAAmB,eAAgB,iBAAkB,SAAU,iBAAkB,CACxG,CAAC,CACF,EAAA,QACD,CACD,IAAK,YACN,CAAC"}
+{"version":3,"file":"badge.cjs","names":[],"sources":["../src/feedback/badge/badge.ts"],"sourcesContent":["import { define, computed, html } from '@vielzeug/craftit';\n\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { type PropBundle, roundableBundle, sizableBundle, themableBundle } from '../../inputs/shared/bundles';\nimport { colorThemeMixin, frostVariantMixin, roundedVariantMixin, sizeVariantMixin } from '../../styles';\nimport componentStyles from './badge.css?inline';\n\ntype BadgeVariant = Extract<VisualVariant, 'solid' | 'flat' | 'bordered' | 'outline' | 'frost'>;\n\n/** Badge component properties */\nexport type BitBadgeProps = {\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?: ComponentSize;\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 bit-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: '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 * @example\n * ```html\n * <bit-badge color=\"primary\">New</bit-badge>\n * <bit-badge color=\"error\" count=\"5\"></bit-badge>\n * <bit-badge color=\"error\" count=\"120\" max=\"99\"></bit-badge>\n * <bit-badge color=\"success\" dot></bit-badge>\n * <bit-badge color=\"warning\" variant=\"flat\">Beta</bit-badge>\n * ```\n */\nexport const BADGE_TAG = define<BitBadgeProps>('bit-badge', {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...roundableBundle,\n    anchor: undefined,\n    count: undefined,\n    dot: false,\n    label: undefined,\n    max: undefined,\n    variant: undefined,\n  } satisfies PropBundle<BitBadgeProps>,\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    return html`<span class=\"badge\" part=\"badge\" aria-label=${() => props.label.value}>\n        <slot name=\"icon\"></slot>\n        <span ?hidden=${() => label.value == null}>${() => label.value}</span>\n        <slot ?hidden=${() => label.value != null}></slot>\n      </span>\n      <slot name=\"target\"></slot>`;\n  },\n  styles: [\n    colorThemeMixin,\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":"gXAyEA,IAAa,GAAA,EAAA,EAAA,QAAkC,YAAa,CAC1D,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,cACH,GAAG,EAAA,gBACH,OAAQ,IAAA,GACR,MAAO,IAAA,GACP,IAAK,GACL,MAAO,IAAA,GACP,IAAK,IAAA,GACL,QAAS,IAAA,GACV,CACD,MAAM,CAAE,SAAS,CACf,IAAM,GAAA,EAAA,EAAA,cAAuB,CAC3B,IAAM,EAAQ,EAAM,MAAM,OAAS,KAAmC,IAAA,GAA5B,OAAO,EAAM,MAAM,MAAM,CAC7D,EAAM,EAAM,IAAI,OAAS,KAAiC,IAAA,GAA1B,OAAO,EAAM,IAAI,MAAM,CAEzD,SAAU,IAAA,IAAa,OAAO,MAAM,EAAM,EAI9C,OAFI,IAAQ,IAAA,IAAa,CAAC,OAAO,MAAM,EAAI,EAAI,EAAQ,EAAY,GAAG,EAAI,GAEnE,OAAO,EAAM,EACpB,CAEF,MAAO,GAAA,IAAI,mDAAqD,EAAM,MAAM,MAAM;;4BAExD,EAAM,OAAS,KAAK,OAAS,EAAM,MAAM;4BACzC,EAAM,OAAS,KAAK;;oCAIhD,OAAQ,CACN,EAAA,gBACA,EAAA,oBACA,EAAA,kBAAkB,SAAS,CAC3B,EAAA,iBAAiB,CACf,GAAI,CAAE,eAAgB,kBAAmB,eAAgB,gBAAiB,SAAU,iBAAkB,CACtG,GAAI,CAAE,eAAgB,gBAAiB,eAAgB,kBAAmB,SAAU,iBAAkB,CACtG,GAAI,CAAE,eAAgB,kBAAmB,eAAgB,iBAAkB,SAAU,iBAAkB,CACxG,CAAC,CACF,EAAA,QACD,CACF,CAAC"}

package/dist/badge.js

@@ -1,28 +1,29 @@
-import { roundedVariantMixin as e, sizeVariantMixin as t } from "./styles/mixins/shape.css.js";
-import { colorThemeMixin as n } from "./styles/mixins/theme.css.js";
-import { frostVariantMixin as r } from "./styles/mixins/variants.css.js";
+import { roundableBundle as e, sizableBundle as t, themableBundle as n } from "./inputs/shared/bundles.js";
+import { roundedVariantMixin as r, sizeVariantMixin as i } from "./styles/mixins/shape.css.js";
+import { colorThemeMixin as a } from "./styles/mixins/theme.css.js";
+import { frostVariantMixin as o } from "./styles/mixins/variants.css.js";
 import "./styles/index.js";
-import i from "./feedback/badge/badge.css?inline.js";
-import { computed as a, defineComponent as o, html as s } from "@vielzeug/craftit";
+import s from "./feedback/badge/badge.css?inline.js";
+import { computed as c, define as l, html as u } from "@vielzeug/craftit";
 //#region src/feedback/badge/badge.ts
-var c = o({
+var d = l("bit-badge", {
 	props: {
-		anchor: { default: void 0 },
-		ariaLabel: { default: void 0 },
-		color: { default: void 0 },
-		count: { default: void 0 },
-		dot: { default: !1 },
-		max: { default: void 0 },
-		rounded: { default: void 0 },
-		size: { default: void 0 },
-		variant: { default: void 0 }
+		...n,
+		...t,
+		...e,
+		anchor: void 0,
+		count: void 0,
+		dot: !1,
+		label: void 0,
+		max: void 0,
+		variant: void 0
 	},
 	setup({ props: e }) {
-		let t = a(() => {
+		let t = c(() => {
 			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 s`<span class="badge" part="badge" aria-label=${() => e.ariaLabel.value}>
+		return u`<span class="badge" part="badge" aria-label=${() => e.label.value}>
         <slot name="icon"></slot>
         <span ?hidden=${() => t.value == null}>${() => t.value}</span>
         <slot ?hidden=${() => t.value != null}></slot>
@@ -30,10 +31,10 @@ var c = o({
       <slot name="target"></slot>`;
 	},
 	styles: [
-		n,
-		e,
-		r(".badge"),
-		t({
+		a,
+		r,
+		o(".badge"),
+		i({
 			lg: {
 				"--_padding-x": "var(--size-2-5)",
 				"--_padding-y": "var(--size-1)",
@@ -50,11 +51,10 @@ var c = o({
 				fontSize: "var(--text-xs)"
 			}
 		}),
-		i
-	],
-	tag: "bit-badge"
+		s
+	]
 });
 //#endregion
-export { c as BADGE_TAG };
+export { d as BADGE_TAG };
 
 //# sourceMappingURL=badge.js.map

package/dist/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","names":[],"sources":["../src/feedback/badge/badge.ts"],"sourcesContent":["import { computed, defineComponent, html } from '@vielzeug/craftit';\n\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { colorThemeMixin, frostVariantMixin, roundedVariantMixin, sizeVariantMixin } from '../../styles';\nimport componentStyles from './badge.css?inline';\n\ntype BadgeVariant = Extract<VisualVariant, 'solid' | 'flat' | 'bordered' | 'outline' | 'frost'>;\n\n/** Badge component properties */\nexport type BitBadgeProps = {\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  /** Accessible label for assistive technology. Recommended for count-only and dot mode. */\n  ariaLabel?: string;\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  /** Max count — displays \"<max>+\" when count exceeds this value */\n  max?: number;\n  /** Border radius override */\n  rounded?: RoundedSize;\n  /** Badge size */\n  size?: ComponentSize;\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 bit-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: '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 * @example\n * ```html\n * <bit-badge color=\"primary\">New</bit-badge>\n * <bit-badge color=\"error\" count=\"5\"></bit-badge>\n * <bit-badge color=\"error\" count=\"120\" max=\"99\"></bit-badge>\n * <bit-badge color=\"success\" dot></bit-badge>\n * <bit-badge color=\"warning\" variant=\"flat\">Beta</bit-badge>\n * ```\n */\nexport const BADGE_TAG = defineComponent<BitBadgeProps>({\n  props: {\n    anchor: { default: undefined },\n    ariaLabel: { default: undefined },\n    color: { default: undefined },\n    count: { default: undefined },\n    dot: { default: false },\n    max: { default: undefined },\n    rounded: { default: undefined },\n    size: { default: undefined },\n    variant: { default: undefined },\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    return html`<span class=\"badge\" part=\"badge\" aria-label=${() => props.ariaLabel.value}>\n        <slot name=\"icon\"></slot>\n        <span ?hidden=${() => label.value == null}>${() => label.value}</span>\n        <slot ?hidden=${() => label.value != null}></slot>\n      </span>\n      <slot name=\"target\"></slot>`;\n  },\n  styles: [\n    colorThemeMixin,\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  tag: 'bit-badge',\n});\n"],"mappings":";;;;;;;AAwEA,IAAa,IAAY,EAA+B;CACtD,OAAO;EACL,QAAQ,EAAE,SAAS,KAAA,GAAW;EAC9B,WAAW,EAAE,SAAS,KAAA,GAAW;EACjC,OAAO,EAAE,SAAS,KAAA,GAAW;EAC7B,OAAO,EAAE,SAAS,KAAA,GAAW;EAC7B,KAAK,EAAE,SAAS,IAAO;EACvB,KAAK,EAAE,SAAS,KAAA,GAAW;EAC3B,SAAS,EAAE,SAAS,KAAA,GAAW;EAC/B,MAAM,EAAE,SAAS,KAAA,GAAW;EAC5B,SAAS,EAAE,SAAS,KAAA,GAAW;EAChC;CACD,MAAM,EAAE,YAAS;EACf,IAAM,IAAQ,QAAe;GAC3B,IAAM,IAAQ,EAAM,MAAM,SAAS,OAAmC,KAAA,IAA5B,OAAO,EAAM,MAAM,MAAM,EAC7D,IAAM,EAAM,IAAI,SAAS,OAAiC,KAAA,IAA1B,OAAO,EAAM,IAAI,MAAM;AAEzD,eAAU,KAAA,KAAa,OAAO,MAAM,EAAM,EAI9C,QAFI,MAAQ,KAAA,KAAa,CAAC,OAAO,MAAM,EAAI,IAAI,IAAQ,IAAY,GAAG,EAAI,KAEnE,OAAO,EAAM;IACpB;AAEF,SAAO,CAAI,qDAAqD,EAAM,UAAU,MAAM;;8BAE5D,EAAM,SAAS,KAAK,SAAS,EAAM,MAAM;8BACzC,EAAM,SAAS,KAAK;;;;CAIhD,QAAQ;EACN;EACA;EACA,EAAkB,SAAS;EAC3B,EAAiB;GACf,IAAI;IAAE,gBAAgB;IAAmB,gBAAgB;IAAiB,UAAU;IAAkB;GACtG,IAAI;IAAE,gBAAgB;IAAiB,gBAAgB;IAAmB,UAAU;IAAkB;GACtG,IAAI;IAAE,gBAAgB;IAAmB,gBAAgB;IAAkB,UAAU;IAAkB;GACxG,CAAC;EACF;EACD;CACD,KAAK;CACN,CAAC"}
+{"version":3,"file":"badge.js","names":[],"sources":["../src/feedback/badge/badge.ts"],"sourcesContent":["import { define, computed, html } from '@vielzeug/craftit';\n\nimport type { ComponentSize, RoundedSize, ThemeColor, VisualVariant } from '../../types';\n\nimport { type PropBundle, roundableBundle, sizableBundle, themableBundle } from '../../inputs/shared/bundles';\nimport { colorThemeMixin, frostVariantMixin, roundedVariantMixin, sizeVariantMixin } from '../../styles';\nimport componentStyles from './badge.css?inline';\n\ntype BadgeVariant = Extract<VisualVariant, 'solid' | 'flat' | 'bordered' | 'outline' | 'frost'>;\n\n/** Badge component properties */\nexport type BitBadgeProps = {\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?: ComponentSize;\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 bit-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: '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 * @example\n * ```html\n * <bit-badge color=\"primary\">New</bit-badge>\n * <bit-badge color=\"error\" count=\"5\"></bit-badge>\n * <bit-badge color=\"error\" count=\"120\" max=\"99\"></bit-badge>\n * <bit-badge color=\"success\" dot></bit-badge>\n * <bit-badge color=\"warning\" variant=\"flat\">Beta</bit-badge>\n * ```\n */\nexport const BADGE_TAG = define<BitBadgeProps>('bit-badge', {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...roundableBundle,\n    anchor: undefined,\n    count: undefined,\n    dot: false,\n    label: undefined,\n    max: undefined,\n    variant: undefined,\n  } satisfies PropBundle<BitBadgeProps>,\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    return html`<span class=\"badge\" part=\"badge\" aria-label=${() => props.label.value}>\n        <slot name=\"icon\"></slot>\n        <span ?hidden=${() => label.value == null}>${() => label.value}</span>\n        <slot ?hidden=${() => label.value != null}></slot>\n      </span>\n      <slot name=\"target\"></slot>`;\n  },\n  styles: [\n    colorThemeMixin,\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":";;;;;;;;AAyEA,IAAa,IAAY,EAAsB,aAAa;CAC1D,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,QAAQ,KAAA;EACR,OAAO,KAAA;EACP,KAAK;EACL,OAAO,KAAA;EACP,KAAK,KAAA;EACL,SAAS,KAAA;EACV;CACD,MAAM,EAAE,YAAS;EACf,IAAM,IAAQ,QAAe;GAC3B,IAAM,IAAQ,EAAM,MAAM,SAAS,OAAmC,KAAA,IAA5B,OAAO,EAAM,MAAM,MAAM,EAC7D,IAAM,EAAM,IAAI,SAAS,OAAiC,KAAA,IAA1B,OAAO,EAAM,IAAI,MAAM;AAEzD,eAAU,KAAA,KAAa,OAAO,MAAM,EAAM,EAI9C,QAFI,MAAQ,KAAA,KAAa,CAAC,OAAO,MAAM,EAAI,IAAI,IAAQ,IAAY,GAAG,EAAI,KAEnE,OAAO,EAAM;IACpB;AAEF,SAAO,CAAI,qDAAqD,EAAM,MAAM,MAAM;;8BAExD,EAAM,SAAS,KAAK,SAAS,EAAM,MAAM;8BACzC,EAAM,SAAS,KAAK;;;;CAIhD,QAAQ;EACN;EACA;EACA,EAAkB,SAAS;EAC3B,EAAiB;GACf,IAAI;IAAE,gBAAgB;IAAmB,gBAAgB;IAAiB,UAAU;IAAkB;GACtG,IAAI;IAAE,gBAAgB;IAAiB,gBAAgB;IAAmB,UAAU;IAAkB;GACtG,IAAI;IAAE,gBAAgB;IAAmB,gBAAgB;IAAkB,UAAU;IAAkB;GACxG,CAAC;EACF;EACD;CACF,CAAC"}

package/dist/box.cjs

@@ -1,2 +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/craftit`);var a=(0,i.defineComponent)({setup(){return i.html`<div class="box" part="box"><slot></slot></div>`},styles:[...n.surfaceMixins,e.rainbowEffectMixin(`.box`),t.frostVariantMixin(`.box`),r.default],tag:`bit-box`});exports.BOX_TAG=a;
+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/craftit`);var a=(0,i.define)(`bit-box`,{setup(){return i.html`<div class="box" part="box"><slot></slot></div>`},styles:[...n.surfaceMixins,e.rainbowEffectMixin(`.box`),t.frostVariantMixin(`.box`),r.default]});exports.BOX_TAG=a;
 //# sourceMappingURL=box.cjs.map

package/dist/box.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"box.cjs","names":[],"sources":["../src/layout/box/box.ts"],"sourcesContent":["import { defineComponent, html } from '@vielzeug/craftit';\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 BitBoxProps = {\n  /** Theme color */\n  color?: ThemeColor;\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  /** Enable animated rainbow border effect */\n  rainbow?: boolean;\n  /** Border radius size */\n  rounded?: RoundedSize;\n  /** Visual style variant */\n  variant?: 'solid' | 'flat' | 'glass' | 'frost';\n};\n\n/**\n * bit-box — A foundational layout primitive with theming support.\n *\n * @element bit-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 {boolean} rainbow - Enable animated rainbow border effect\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 * <bit-box padding=\"lg\" elevation=\"2\">Simple content</bit-box>\n * <bit-box variant=\"glass\" color=\"primary\">Glass effect</bit-box>\n * <bit-box variant=\"frost\" rainbow>Frosted glass</bit-box>\n * ```\n */\nexport const BOX_TAG = defineComponent({\n  setup() {\n    return html`<div class=\"box\" part=\"box\"><slot></slot></div>`;\n  },\n  styles: [...surfaceMixins, rainbowEffectMixin('.box'), frostVariantMixin('.box'), componentStyles],\n  tag: 'bit-box',\n});\n"],"mappings":"sRAyDA,IAAa,GAAA,EAAA,EAAA,iBAA0B,CACrC,OAAQ,CACN,MAAO,GAAA,IAAI,mDAEb,OAAQ,CAAC,GAAG,EAAA,cAAe,EAAA,mBAAmB,OAAO,CAAE,EAAA,kBAAkB,OAAO,CAAE,EAAA,QAAgB,CAClG,IAAK,UACN,CAAC"}
+{"version":3,"file":"box.cjs","names":[],"sources":["../src/layout/box/box.ts"],"sourcesContent":["import { define, html } from '@vielzeug/craftit';\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 BitBoxProps = {\n  /** Theme color */\n  color?: ThemeColor;\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  /** Enable animated rainbow border effect */\n  rainbow?: boolean;\n  /** Border radius size */\n  rounded?: RoundedSize;\n  /** Visual style variant */\n  variant?: 'solid' | 'flat' | 'glass' | 'frost';\n};\n\n/**\n * bit-box — A foundational layout primitive with theming support.\n *\n * @element bit-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 {boolean} rainbow - Enable animated rainbow border effect\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 * <bit-box padding=\"lg\" elevation=\"2\">Simple content</bit-box>\n * <bit-box variant=\"glass\" color=\"primary\">Glass effect</bit-box>\n * <bit-box variant=\"frost\" rainbow>Frosted glass</bit-box>\n * ```\n */\nexport const BOX_TAG = define('bit-box', {\n  setup() {\n    return html`<div class=\"box\" part=\"box\"><slot></slot></div>`;\n  },\n  styles: [...surfaceMixins, rainbowEffectMixin('.box'), frostVariantMixin('.box'), componentStyles],\n});\n"],"mappings":"sRAyDA,IAAa,GAAA,EAAA,EAAA,QAAiB,UAAW,CACvC,OAAQ,CACN,MAAO,GAAA,IAAI,mDAEb,OAAQ,CAAC,GAAG,EAAA,cAAe,EAAA,mBAAmB,OAAO,CAAE,EAAA,kBAAkB,OAAO,CAAE,EAAA,QAAgB,CACnG,CAAC"}

package/dist/box.js

@@ -2,9 +2,9 @@ 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 { defineComponent as i, html as a } from "@vielzeug/craftit";
+import { define as i, html as a } from "@vielzeug/craftit";
 //#region src/layout/box/box.ts
-var o = i({
+var o = i("bit-box", {
 	setup() {
 		return a`<div class="box" part="box"><slot></slot></div>`;
 	},
@@ -13,8 +13,7 @@ var o = i({
 		e(".box"),
 		t(".box"),
 		r
-	],
-	tag: "bit-box"
+	]
 });
 //#endregion
 export { o as BOX_TAG };

package/dist/box.js.map

@@ -1 +1 @@
-{"version":3,"file":"box.js","names":[],"sources":["../src/layout/box/box.ts"],"sourcesContent":["import { defineComponent, html } from '@vielzeug/craftit';\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 BitBoxProps = {\n  /** Theme color */\n  color?: ThemeColor;\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  /** Enable animated rainbow border effect */\n  rainbow?: boolean;\n  /** Border radius size */\n  rounded?: RoundedSize;\n  /** Visual style variant */\n  variant?: 'solid' | 'flat' | 'glass' | 'frost';\n};\n\n/**\n * bit-box — A foundational layout primitive with theming support.\n *\n * @element bit-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 {boolean} rainbow - Enable animated rainbow border effect\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 * <bit-box padding=\"lg\" elevation=\"2\">Simple content</bit-box>\n * <bit-box variant=\"glass\" color=\"primary\">Glass effect</bit-box>\n * <bit-box variant=\"frost\" rainbow>Frosted glass</bit-box>\n * ```\n */\nexport const BOX_TAG = defineComponent({\n  setup() {\n    return html`<div class=\"box\" part=\"box\"><slot></slot></div>`;\n  },\n  styles: [...surfaceMixins, rainbowEffectMixin('.box'), frostVariantMixin('.box'), componentStyles],\n  tag: 'bit-box',\n});\n"],"mappings":";;;;;;AAyDA,IAAa,IAAU,EAAgB;CACrC,QAAQ;AACN,SAAO,CAAI;;CAEb,QAAQ;EAAC,GAAG;EAAe,EAAmB,OAAO;EAAE,EAAkB,OAAO;EAAE;EAAgB;CAClG,KAAK;CACN,CAAC"}
+{"version":3,"file":"box.js","names":[],"sources":["../src/layout/box/box.ts"],"sourcesContent":["import { define, html } from '@vielzeug/craftit';\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 BitBoxProps = {\n  /** Theme color */\n  color?: ThemeColor;\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  /** Enable animated rainbow border effect */\n  rainbow?: boolean;\n  /** Border radius size */\n  rounded?: RoundedSize;\n  /** Visual style variant */\n  variant?: 'solid' | 'flat' | 'glass' | 'frost';\n};\n\n/**\n * bit-box — A foundational layout primitive with theming support.\n *\n * @element bit-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 {boolean} rainbow - Enable animated rainbow border effect\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 * <bit-box padding=\"lg\" elevation=\"2\">Simple content</bit-box>\n * <bit-box variant=\"glass\" color=\"primary\">Glass effect</bit-box>\n * <bit-box variant=\"frost\" rainbow>Frosted glass</bit-box>\n * ```\n */\nexport const BOX_TAG = define('bit-box', {\n  setup() {\n    return html`<div class=\"box\" part=\"box\"><slot></slot></div>`;\n  },\n  styles: [...surfaceMixins, rainbowEffectMixin('.box'), frostVariantMixin('.box'), componentStyles],\n});\n"],"mappings":";;;;;;AAyDA,IAAa,IAAU,EAAO,WAAW;CACvC,QAAQ;AACN,SAAO,CAAI;;CAEb,QAAQ;EAAC,GAAG;EAAe,EAAmB,OAAO;EAAE,EAAkB,OAAO;EAAE;EAAgB;CACnG,CAAC"}

package/dist/breadcrumb.cjs

@@ -1,4 +1,4 @@
-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/craftit`);var r=(0,n.defineComponent)({props:{active:{default:!1},href:{default:``},separator:{default:`/`}},setup({props:e}){return n.html`
+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/craftit`);var r=(0,n.define)(`bit-breadcrumb-item`,{props:{active:!1,href:``,separator:`/`},setup({props:e}){return n.html`
       <li class="item" role="listitem">
         <span class="separator" part="separator" aria-hidden="true">${()=>e.separator.value||`/`}</span>
         <a
@@ -11,11 +11,11 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
           <span class="label"><slot></slot></span>
         </a>
       </li>
-    `},styles:[e.default],tag:`bit-breadcrumb-item`}),i=(0,n.defineComponent)({props:{label:{default:`Breadcrumb`},separator:{default:``}},setup({host:e,props:t}){let r=()=>Array.from(e.getElementsByTagName(`bit-breadcrumb-item`)),i=()=>{let n=t.separator.value;n?e.style.setProperty(`--breadcrumb-separator`,`'${n}'`):e.style.removeProperty(`--breadcrumb-separator`)},a=()=>{let e=t.separator.value||`/`,n=r();for(let t=0;t<n.length;t+=1)n[t].setAttribute(`separator`,e),t===0?n[t].removeAttribute(`data-show-separator`):n[t].setAttribute(`data-show-separator`,``)};return(0,n.onMount)(()=>{(0,n.onSlotChange)(`default`,a),a()}),(0,n.effect)(i),(0,n.effect)(a),n.html`
+    `},styles:[e.default]}),i=(0,n.define)(`bit-breadcrumb`,{props:{label:`Breadcrumb`,separator:``},setup({host:e,props:t,slots:r}){let i=()=>Array.from(e.el.getElementsByTagName(`bit-breadcrumb-item`)),a=()=>{let n=t.separator.value||`/`,r=i();for(let e=0;e<r.length;e++)r[e].setAttribute(`separator`,n),r[e].toggleAttribute(`data-show-separator`,e>0);n?e.el.style.setProperty(`--breadcrumb-separator`,`'${n}'`):e.el.style.removeProperty(`--breadcrumb-separator`)};return(0,n.effect)(()=>{r.elements().value,a()}),n.html`
       <nav aria-label="${()=>t.label.value}" part="nav">
         <ol role="list" part="list">
           <slot></slot>
         </ol>
       </nav>
-    `},styles:[t.default],tag:`bit-breadcrumb`});exports.BREADCRUMB_ITEM_TAG=r,exports.BREADCRUMB_TAG=i;
+    `},styles:[t.default]});exports.BREADCRUMB_ITEM_TAG=r,exports.BREADCRUMB_TAG=i;
 //# sourceMappingURL=breadcrumb.cjs.map

package/dist/breadcrumb.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.cjs","names":[],"sources":["../src/content/breadcrumb/breadcrumb.ts"],"sourcesContent":["import { defineComponent, effect, html, onMount, onSlotChange } from '@vielzeug/craftit';\n\n// ============================================\n// Types\n// ============================================\n\nexport type BitBreadcrumbProps = {\n  label?: string;\n  separator?: string;\n};\n\nexport type BitBreadcrumbItemProps = {\n  active?: boolean;\n  href?: string;\n  separator?: string;\n};\n\n// ============================================\n// Breadcrumb Item Component\n// ============================================\n\nimport itemStyles from './breadcrumb-item.css?inline';\n\n/**\n * `bit-breadcrumb-item` — A single crumb within a `<bit-breadcrumb>` list.\n *\n * @example\n * ```html\n * <bit-breadcrumb-item href=\"/\">Home</bit-breadcrumb-item>\n * <bit-breadcrumb-item active>Current Page</bit-breadcrumb-item>\n * ```\n */\nexport const BREADCRUMB_ITEM_TAG = defineComponent<BitBreadcrumbItemProps>({\n  props: {\n    active: { default: false },\n    href: { default: '' },\n    separator: { default: '/' },\n  },\n  setup({ props }) {\n    return html`\n      <li class=\"item\" role=\"listitem\">\n        <span class=\"separator\" part=\"separator\" aria-hidden=\"true\">${() => props.separator.value || '/'}</span>\n        <a\n          class=\"link\"\n          href=\"${() => props.href.value || undefined}\"\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  tag: 'bit-breadcrumb-item',\n});\n\n// ============================================\n// Breadcrumb Component\n// ============================================\n\nimport componentStyles from './breadcrumb.css?inline';\n\n/**\n * `bit-breadcrumb` — Accessible navigation breadcrumb.\n *\n * Wrap `<bit-breadcrumb-item>` elements as children.\n * The last/current item should have `active` attribute.\n *\n * @example\n * ```html\n * <bit-breadcrumb label=\"Page breadcrumb\">\n *   <bit-breadcrumb-item href=\"/\">Home</bit-breadcrumb-item>\n *   <bit-breadcrumb-item href=\"/blog\">Blog</bit-breadcrumb-item>\n *   <bit-breadcrumb-item active>My Post</bit-breadcrumb-item>\n * </bit-breadcrumb>\n * ```\n */\nexport const BREADCRUMB_TAG = defineComponent<BitBreadcrumbProps>({\n  props: {\n    label: { default: 'Breadcrumb' },\n    separator: { default: '' },\n  },\n  setup({ host, props }) {\n    const getItems = (): HTMLElement[] => Array.from(host.getElementsByTagName('bit-breadcrumb-item')) as HTMLElement[];\n    const syncSeparatorVar = () => {\n      const sep = props.separator.value;\n\n      if (sep) {\n        host.style.setProperty('--breadcrumb-separator', `'${sep}'`);\n      } else {\n        host.style.removeProperty('--breadcrumb-separator');\n      }\n    };\n    const syncItems = () => {\n      const sep = props.separator.value || '/';\n      const items = getItems();\n\n      for (let i = 0; i < items.length; i += 1) {\n        items[i].setAttribute('separator', sep);\n\n        if (i === 0) {\n          items[i].removeAttribute('data-show-separator');\n        } else {\n          items[i].setAttribute('data-show-separator', '');\n        }\n      }\n    };\n\n    onMount(() => {\n      onSlotChange('default', syncItems);\n      // Ensure initial slotted items are normalized once on mount.\n      syncItems();\n    });\n    effect(syncSeparatorVar);\n    effect(syncItems);\n\n    return html`\n      <nav aria-label=\"${() => props.label.value}\" part=\"nav\">\n        <ol role=\"list\" part=\"list\">\n          <slot></slot>\n        </ol>\n      </nav>\n    `;\n  },\n  styles: [componentStyles],\n  tag: 'bit-breadcrumb',\n});\n"],"mappings":"yOAgCA,IAAa,GAAA,EAAA,EAAA,iBAA8D,CACzE,MAAO,CACL,OAAQ,CAAE,QAAS,GAAO,CAC1B,KAAM,CAAE,QAAS,GAAI,CACrB,UAAW,CAAE,QAAS,IAAK,CAC5B,CACD,MAAM,CAAE,SAAS,CACf,MAAO,GAAA,IAAI;;0EAE6D,EAAM,UAAU,OAAS,IAAI;;;sBAGjF,EAAM,KAAK,OAAS,IAAA,GAAU;8BACrB,EAAM,OAAO,MAAQ,OAAS,KAAM;0BACxC,EAAM,OAAO,MAAQ,KAAO,KAAM;;;;;;OAQ7D,OAAQ,CAAC,EAAA,QAAW,CACpB,IAAK,sBACN,CAAC,CAuBW,GAAA,EAAA,EAAA,iBAAqD,CAChE,MAAO,CACL,MAAO,CAAE,QAAS,aAAc,CAChC,UAAW,CAAE,QAAS,GAAI,CAC3B,CACD,MAAM,CAAE,OAAM,SAAS,CACrB,IAAM,MAAgC,MAAM,KAAK,EAAK,qBAAqB,sBAAsB,CAAC,CAC5F,MAAyB,CAC7B,IAAM,EAAM,EAAM,UAAU,MAExB,EACF,EAAK,MAAM,YAAY,yBAA0B,IAAI,EAAI,GAAG,CAE5D,EAAK,MAAM,eAAe,yBAAyB,EAGjD,MAAkB,CACtB,IAAM,EAAM,EAAM,UAAU,OAAS,IAC/B,EAAQ,GAAU,CAExB,IAAK,IAAI,EAAI,EAAG,EAAI,EAAM,OAAQ,GAAK,EACrC,EAAM,GAAG,aAAa,YAAa,EAAI,CAEnC,IAAM,EACR,EAAM,GAAG,gBAAgB,sBAAsB,CAE/C,EAAM,GAAG,aAAa,sBAAuB,GAAG,EAatD,OARA,EAAA,EAAA,aAAc,EACZ,EAAA,EAAA,cAAa,UAAW,EAAU,CAElC,GAAW,EACX,EACF,EAAA,EAAA,QAAO,EAAiB,EACxB,EAAA,EAAA,QAAO,EAAU,CAEV,EAAA,IAAI;6BACgB,EAAM,MAAM,MAAM;;;;;OAO/C,OAAQ,CAAC,EAAA,QAAgB,CACzB,IAAK,iBACN,CAAC"}
+{"version":3,"file":"breadcrumb.cjs","names":[],"sources":["../src/content/breadcrumb/breadcrumb.ts"],"sourcesContent":["import { define, effect, html } from '@vielzeug/craftit';\n\nimport itemStyles from './breadcrumb-item.css?inline';\n\nexport type BitBreadcrumbProps = {\n  label?: string;\n  separator?: string;\n};\n\nexport type BitBreadcrumbItemProps = {\n  active?: boolean;\n  href?: string;\n  separator?: string;\n};\n\n/**\n * `bit-breadcrumb-item` — A single crumb within a `<bit-breadcrumb>` list.\n *\n * @example\n * ```html\n * <bit-breadcrumb-item href=\"/\">Home</bit-breadcrumb-item>\n * <bit-breadcrumb-item active>Current Page</bit-breadcrumb-item>\n * ```\n */\nexport const BREADCRUMB_ITEM_TAG = define<BitBreadcrumbItemProps>('bit-breadcrumb-item', {\n  props: {\n    active: false,\n    href: '',\n    separator: '/',\n  },\n  setup({ props }) {\n    return html`\n      <li class=\"item\" role=\"listitem\">\n        <span class=\"separator\" part=\"separator\" aria-hidden=\"true\">${() => props.separator.value || '/'}</span>\n        <a\n          class=\"link\"\n          href=\"${() => props.href.value || undefined}\"\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\nimport componentStyles from './breadcrumb.css?inline';\n\n/**\n * `bit-breadcrumb` — Accessible navigation breadcrumb.\n *\n * Wrap `<bit-breadcrumb-item>` elements as children.\n * The last/current item should have `active` attribute.\n *\n * @example\n * ```html\n * <bit-breadcrumb label=\"Page breadcrumb\">\n *   <bit-breadcrumb-item href=\"/\">Home</bit-breadcrumb-item>\n *   <bit-breadcrumb-item href=\"/blog\">Blog</bit-breadcrumb-item>\n *   <bit-breadcrumb-item active>My Post</bit-breadcrumb-item>\n * </bit-breadcrumb>\n * ```\n */\nexport const BREADCRUMB_TAG = define<BitBreadcrumbProps>('bit-breadcrumb', {\n  props: {\n    label: 'Breadcrumb',\n    separator: '',\n  },\n  setup({ host, props, slots }) {\n    // ────────────────────────────────────────────────────────────────\n    // Item & Separator Synchronization\n    // ────────────────────────────────────────────────────────────────\n\n    const getItems = (): HTMLElement[] => Array.from(host.el.getElementsByTagName('bit-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) host.el.style.setProperty('--breadcrumb-separator', `'${sep}'`);\n      else host.el.style.removeProperty('--breadcrumb-separator');\n    };\n\n    // ────────────────────────────────────────────────────────────────\n    // Lifecycle\n    // ────────────────────────────────────────────────────────────────\n\n    effect(() => {\n      void slots.elements().value;\n      syncItems();\n    });\n\n    return html`\n      <nav aria-label=\"${() => props.label.value}\" part=\"nav\">\n        <ol role=\"list\" part=\"list\">\n          <slot></slot>\n        </ol>\n      </nav>\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":"yOAwBA,IAAa,GAAA,EAAA,EAAA,QAAqD,sBAAuB,CACvF,MAAO,CACL,OAAQ,GACR,KAAM,GACN,UAAW,IACZ,CACD,MAAM,CAAE,SAAS,CACf,MAAO,GAAA,IAAI;;0EAE6D,EAAM,UAAU,OAAS,IAAI;;;sBAGjF,EAAM,KAAK,OAAS,IAAA,GAAU;8BACrB,EAAM,OAAO,MAAQ,OAAS,KAAM;0BACxC,EAAM,OAAO,MAAQ,KAAO,KAAM;;;;;;OAQ7D,OAAQ,CAAC,EAAA,QAAW,CACrB,CAAC,CAuBW,GAAA,EAAA,EAAA,QAA4C,iBAAkB,CACzE,MAAO,CACL,MAAO,aACP,UAAW,GACZ,CACD,MAAM,CAAE,OAAM,QAAO,SAAS,CAK5B,IAAM,MAAgC,MAAM,KAAK,EAAK,GAAG,qBAAqB,sBAAsB,CAAC,CAE/F,MAAkB,CACtB,IAAM,EAAM,EAAM,UAAU,OAAS,IAC/B,EAAQ,GAAU,CAExB,IAAK,IAAI,EAAI,EAAG,EAAI,EAAM,OAAQ,IAChC,EAAM,GAAG,aAAa,YAAa,EAAI,CACvC,EAAM,GAAG,gBAAgB,sBAAuB,EAAI,EAAE,CAIpD,EAAK,EAAK,GAAG,MAAM,YAAY,yBAA0B,IAAI,EAAI,GAAG,CACnE,EAAK,GAAG,MAAM,eAAe,yBAAyB,EAY7D,OALA,EAAA,EAAA,YAAa,CACN,EAAM,UAAU,CAAC,MACtB,GAAW,EACX,CAEK,EAAA,IAAI;6BACgB,EAAM,MAAM,MAAM;;;;;OAO/C,OAAQ,CAAC,EAAA,QAAgB,CAC1B,CAAC"}

package/dist/breadcrumb.js

@@ -1,12 +1,12 @@
 import e from "./content/breadcrumb/breadcrumb-item.css?inline.js";
 import t from "./content/breadcrumb/breadcrumb.css?inline.js";
-import { defineComponent as n, effect as r, html as i, onMount as a, onSlotChange as o } from "@vielzeug/craftit";
+import { define as n, effect as r, html as i } from "@vielzeug/craftit";
 //#region src/content/breadcrumb/breadcrumb.ts
-var s = n({
+var a = n("bit-breadcrumb-item", {
 	props: {
-		active: { default: !1 },
-		href: { default: "" },
-		separator: { default: "/" }
+		active: !1,
+		href: "",
+		separator: "/"
 	},
 	setup({ props: e }) {
 		return i`
@@ -24,24 +24,21 @@ var s = n({
       </li>
     `;
 	},
-	styles: [e],
-	tag: "bit-breadcrumb-item"
-}), c = n({
+	styles: [e]
+}), o = n("bit-breadcrumb", {
 	props: {
-		label: { default: "Breadcrumb" },
-		separator: { default: "" }
+		label: "Breadcrumb",
+		separator: ""
 	},
-	setup({ host: e, props: t }) {
-		let n = () => Array.from(e.getElementsByTagName("bit-breadcrumb-item")), s = () => {
-			let n = t.separator.value;
-			n ? e.style.setProperty("--breadcrumb-separator", `'${n}'`) : e.style.removeProperty("--breadcrumb-separator");
-		}, c = () => {
-			let e = t.separator.value || "/", r = n();
-			for (let t = 0; t < r.length; t += 1) r[t].setAttribute("separator", e), t === 0 ? r[t].removeAttribute("data-show-separator") : r[t].setAttribute("data-show-separator", "");
+	setup({ host: e, props: t, slots: n }) {
+		let a = () => Array.from(e.el.getElementsByTagName("bit-breadcrumb-item")), o = () => {
+			let n = t.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 ? e.el.style.setProperty("--breadcrumb-separator", `'${n}'`) : e.el.style.removeProperty("--breadcrumb-separator");
 		};
-		return a(() => {
-			o("default", c), c();
-		}), r(s), r(c), i`
+		return r(() => {
+			n.elements().value, o();
+		}), i`
       <nav aria-label="${() => t.label.value}" part="nav">
         <ol role="list" part="list">
           <slot></slot>
@@ -49,10 +46,9 @@ var s = n({
       </nav>
     `;
 	},
-	styles: [t],
-	tag: "bit-breadcrumb"
+	styles: [t]
 });
 //#endregion
-export { s as BREADCRUMB_ITEM_TAG, c as BREADCRUMB_TAG };
+export { a as BREADCRUMB_ITEM_TAG, o as BREADCRUMB_TAG };
 
 //# sourceMappingURL=breadcrumb.js.map