@vielzeug/buildit 2.0.0

package/dist/avatar.js

@@ -0,0 +1,123 @@
+import { roundedVariantMixin as e, sizeVariantMixin as t } from "./styles/mixins/shape.css.js";
+import { colorThemeMixin as n } 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";
+//#region src/content/avatar/avatar.ts
+var f = {
+	away: "Away",
+	busy: "Busy",
+	offline: "Offline",
+	online: "Online"
+}, p = o({
+	props: {
+		alt: { default: void 0 },
+		color: { default: void 0 },
+		initials: { default: void 0 },
+		rounded: { default: void 0 },
+		size: { default: void 0 },
+		src: { default: void 0 },
+		status: { default: void 0 }
+	},
+	setup({ props: e }) {
+		let t = u(!1);
+		d(e.src, () => {
+			t.value = !1;
+		});
+		let n = (e) => {
+			e && (e.addEventListener("error", () => {
+				t.value = !0;
+			}), e.addEventListener("load", () => {
+				t.value = !1;
+			}));
+		}, r = a(() => {
+			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;
+			return !t && !r ? null : t ? r ? `${t}, ${r}` : t : `Status: ${r}`;
+		});
+		return s`
+      <span
+        class="avatar"
+        part="avatar"
+        :aria-label="${() => l.value}"
+        :role="${() => l.value ? "img" : null}">
+        ${() => e.src.value ? s`<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>` : ""}
+      </span>
+      ${() => e.status.value ? s`<span
+              class="status"
+              part="status"
+              :data-status="${() => e.status.value}"
+              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))"
+			}
+		}),
+		r
+	],
+	tag: "bit-avatar"
+}), m = o({
+	props: {
+		max: { default: 5 },
+		total: { default: 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");
+				});
+			});
+		}), s`
+      <slot></slot>
+      ${() => n.value > 0 ? s`<span class="overflow-badge" part="overflow" aria-label="${() => `+${n.value} more`}">
+              +${() => n.value}
+            </span>` : ""}
+    `;
+	},
+	styles: [i],
+	tag: "bit-avatar-group"
+});
+//#endregion
+export { m as AVATAR_GROUP_TAG, p 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 { 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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"}

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`);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}>
+        <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;
+//# 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 { 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"}

package/dist/badge.js

@@ -0,0 +1,60 @@
+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 "./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";
+//#region src/feedback/badge/badge.ts
+var c = o({
+	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 = a(() => {
+			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}>
+        <slot name="icon"></slot>
+        <span ?hidden=${() => t.value == null}>${() => t.value}</span>
+        <slot ?hidden=${() => t.value != null}></slot>
+      </span>
+      <slot name="target"></slot>`;
+	},
+	styles: [
+		n,
+		e,
+		r(".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)"
+			}
+		}),
+		i
+	],
+	tag: "bit-badge"
+});
+//#endregion
+export { c 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 { 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"}

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/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;
+//# 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 { 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"}

package/dist/box.js

@@ -0,0 +1,22 @@
+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";
+//#region src/layout/box/box.ts
+var o = i({
+	setup() {
+		return a`<div class="box" part="box"><slot></slot></div>`;
+	},
+	styles: [
+		...n,
+		e(".box"),
+		t(".box"),
+		r
+	],
+	tag: "bit-box"
+});
+//#endregion
+export { o 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 { 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"}

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/craftit`);var r=(0,n.defineComponent)({props:{active:{default:!1},href:{default:``},separator:{default:`/`}},setup({props:e}){return n.html`
+      <li class="item" role="listitem">
+        <span class="separator" part="separator" aria-hidden="true">${()=>e.separator.value||`/`}</span>
+        <a
+          class="link"
+          href="${()=>e.href.value||void 0}"
+          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],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`
+      <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;
+//# 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 { 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"}

package/dist/breadcrumb.js

@@ -0,0 +1,58 @@
+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";
+//#region src/content/breadcrumb/breadcrumb.ts
+var s = n({
+	props: {
+		active: { default: !1 },
+		href: { default: "" },
+		separator: { default: "/" }
+	},
+	setup({ props: e }) {
+		return i`
+      <li class="item" role="listitem">
+        <span class="separator" part="separator" aria-hidden="true">${() => e.separator.value || "/"}</span>
+        <a
+          class="link"
+          href="${() => e.href.value || void 0}"
+          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],
+	tag: "bit-breadcrumb-item"
+}), c = n({
+	props: {
+		label: { default: "Breadcrumb" },
+		separator: { default: "" }
+	},
+	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", "");
+		};
+		return a(() => {
+			o("default", c), c();
+		}), r(s), r(c), i`
+      <nav aria-label="${() => t.label.value}" part="nav">
+        <ol role="list" part="list">
+          <slot></slot>
+        </ol>
+      </nav>
+    `;
+	},
+	styles: [t],
+	tag: "bit-breadcrumb"
+});
+//#endregion
+export { s as BREADCRUMB_ITEM_TAG, c as BREADCRUMB_TAG };
+
+//# sourceMappingURL=breadcrumb.js.map

package/dist/breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.js","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":";;;;AAgCA,IAAa,IAAsB,EAAwC;CACzE,OAAO;EACL,QAAQ,EAAE,SAAS,IAAO;EAC1B,MAAM,EAAE,SAAS,IAAI;EACrB,WAAW,EAAE,SAAS,KAAK;EAC5B;CACD,MAAM,EAAE,YAAS;AACf,SAAO,CAAI;;4EAE6D,EAAM,UAAU,SAAS,IAAI;;;wBAGjF,EAAM,KAAK,SAAS,KAAA,EAAU;gCACrB,EAAM,OAAO,QAAQ,SAAS,KAAM;4BACxC,EAAM,OAAO,QAAQ,OAAO,KAAM;;;;;;;;CAQ7D,QAAQ,CAAC,EAAW;CACpB,KAAK;CACN,CAAC,EAuBW,IAAiB,EAAoC;CAChE,OAAO;EACL,OAAO,EAAE,SAAS,cAAc;EAChC,WAAW,EAAE,SAAS,IAAI;EAC3B;CACD,MAAM,EAAE,SAAM,YAAS;EACrB,IAAM,UAAgC,MAAM,KAAK,EAAK,qBAAqB,sBAAsB,CAAC,EAC5F,UAAyB;GAC7B,IAAM,IAAM,EAAM,UAAU;AAE5B,GAAI,IACF,EAAK,MAAM,YAAY,0BAA0B,IAAI,EAAI,GAAG,GAE5D,EAAK,MAAM,eAAe,yBAAyB;KAGjD,UAAkB;GACtB,IAAM,IAAM,EAAM,UAAU,SAAS,KAC/B,IAAQ,GAAU;AAExB,QAAK,IAAI,IAAI,GAAG,IAAI,EAAM,QAAQ,KAAK,EAGrC,CAFA,EAAM,GAAG,aAAa,aAAa,EAAI,EAEnC,MAAM,IACR,EAAM,GAAG,gBAAgB,sBAAsB,GAE/C,EAAM,GAAG,aAAa,uBAAuB,GAAG;;AAatD,SARA,QAAc;AAGZ,GAFA,EAAa,WAAW,EAAU,EAElC,GAAW;IACX,EACF,EAAO,EAAiB,EACxB,EAAO,EAAU,EAEV,CAAI;+BACgB,EAAM,MAAM,MAAM;;;;;;;CAO/C,QAAQ,CAAC,EAAgB;CACzB,KAAK;CACN,CAAC"}