@vielzeug/refine 1.7.0 → 2.0.0

package/dist/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","names":[],"sources":["../src/content/avatar/avatar.ts"],"sourcesContent":["import { define, html, prop, getHost, useSlots, watchEffect } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport type { ComponentSize, RoundedSize, ThemeColor } from '../../types';\n\nimport '../icon/icon';\nimport { roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, roundedVariantMixin, sizeVariantMixin } from '../../styles';\nimport groupStyles from './avatar-group.css?inline';\nimport componentStyles from './avatar.css?inline';\n\nexport type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';\n\nconst STATUS_LABELS: Record<AvatarStatus, string> = {\n  away: 'Away',\n  busy: 'Busy',\n  offline: 'Offline',\n  online: 'Online',\n};\n\n/** Avatar component properties */\nexport type OreAvatarProps = {\n  /** Alt text for the image; also used to derive initials when no `initials` prop is given */\n  alt?: string;\n  /** Theme color (used for initials background) */\n  color?: ThemeColor;\n  /** Explicit initials to display when no image is available (e.g. \"JD\") */\n  initials?: string;\n  /** Border radius */\n  rounded?: RoundedSize | '';\n  /** Component size */\n  size?: ComponentSize;\n  /** Image source URL */\n  src?: string;\n  /** Online presence indicator */\n  status?: AvatarStatus;\n};\n\n// ============================================\n// Component\n// ============================================\n\n/**\n * Displays a user avatar: image → initials → generic fallback icon, in that priority order.\n *\n * @element ore-avatar\n *\n * @attr {string} src - Image source URL\n * @attr {string} alt - Image alt text (also used to derive initials)\n * @attr {string} initials - Explicit initials (up to 2 chars)\n * @attr {string} color - Theme color for initials background: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} status - 'online' | 'offline' | 'busy' | 'away'\n *\n * @slot - Fallback content shown when image and initials are unavailable.\n * @cssprop --avatar-size - Diameter of the avatar\n * @cssprop --avatar-bg - Background color\n * @cssprop --avatar-color - Text/icon color\n * @cssprop --avatar-radius - Border radius\n * @cssprop --avatar-border - Border shorthand\n * @cssprop --avatar-border-color - Border color (also controls status dot border)\n *\n * @part avatar - Avatar root container.\n * @part img - Image element.\n * @part initials - Initials fallback element.\n * @part fallback - Shadow part for the `fallback` element.\n * @part status - Status indicator element.\n * @part overflow - Overflow indicator element.\n * @example\n * ```html\n * <ore-avatar src=\"/jane.jpg\" alt=\"Jane Doe\"></ore-avatar>\n * <ore-avatar initials=\"JD\" color=\"primary\"></ore-avatar>\n * <ore-avatar alt=\"John Smith\" status=\"online\"></ore-avatar>\n * ```\n */\nexport const AVATAR_TAG = 'ore-avatar' as const;\ndefine<OreAvatarProps>(AVATAR_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...roundableBundle,\n    alt: prop.string(),\n    initials: prop.string(),\n    src: prop.string(),\n    status: prop.string<AvatarStatus>(),\n  },\n  setup(props) {\n    const imgFailed = signal(false);\n\n    // Reset stale error state whenever src changes\n    watch(props.src, () => {\n      imgFailed.value = false;\n    });\n\n    // Attach load/error listeners reactively when the img element mounts\n    const attachImgListeners = (el: HTMLImageElement | null) => {\n      if (!el) return;\n\n      el.addEventListener('error', () => {\n        imgFailed.value = true;\n      });\n      el.addEventListener('load', () => {\n        imgFailed.value = false;\n      });\n    };\n    const derivedInitials = computed(() => {\n      if (props.initials.value) return props.initials.value.slice(0, 2);\n\n      const alt = props.alt.value;\n\n      if (!alt) return '';\n\n      const parts = alt.trim().split(/\\s+/);\n\n      if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();\n\n      return parts[0].slice(0, 2).toUpperCase();\n    });\n    const showImage = computed(() => !!props.src.value && !imgFailed.value);\n    const showInitials = computed(() => !showImage.value && !!derivedInitials.value);\n    const showFallback = computed(() => !showImage.value && !showInitials.value);\n    const avatarLabel = () => {\n      const name = (props.alt.value as string | undefined) || null;\n      const statusKey = props.status.value as AvatarStatus | undefined;\n      const status = statusKey ? STATUS_LABELS[statusKey] : null;\n\n      if (!name && !status) return null;\n\n      if (!name) return `Status: ${status}`;\n\n      if (!status) return name;\n\n      return `${name}, ${status}`;\n    };\n    const avatarRole = () => (avatarLabel() ? 'img' : null);\n\n    return html`\n      <span class=\"avatar\" part=\"avatar\" :aria-label=\"${avatarLabel}\" :role=\"${avatarRole}\">\n        ${() =>\n          props.src.value\n            ? html`<img\n                ref=\"${attachImgListeners}\"\n                part=\"img\"\n                :src=\"${props.src}\"\n                :alt=\"${props.alt}\"\n                ?hidden=\"${() => !showImage.value}\"\n                aria-hidden=\"true\" />`\n            : ''}\n        ${() =>\n          showInitials.value\n            ? html`<span class=\"initials\" part=\"initials\" aria-hidden=\"true\">${derivedInitials}</span>`\n            : ''}\n        ${() =>\n          showFallback.value\n            ? html`<ore-icon class=\"icon-fallback\" part=\"fallback\" name=\"user\" size=\"50%\"></ore-icon>`\n            : ''}\n      </span>\n      ${() =>\n        props.status.value\n          ? html`<span class=\"status\" part=\"status\" :data-status=\"${props.status}\" aria-hidden=\"true\"></span>`\n          : ''}\n    `;\n  },\n  styles: [\n    colorThemeMixin,\n    roundedVariantMixin,\n    sizeVariantMixin({\n      lg: { fontSize: 'var(--avatar-font-size, var(--text-base))', size: 'var(--avatar-size, var(--size-14))' },\n      md: { fontSize: 'var(--avatar-font-size, var(--text-sm))', size: 'var(--avatar-size, var(--size-10))' },\n      sm: { fontSize: 'var(--avatar-font-size, var(--text-xs))', size: 'var(--avatar-size, var(--size-7))' },\n    }),\n    componentStyles,\n  ],\n});\n\n// ============================================\n// AvatarGroup\n// ============================================\n\n/** AvatarGroup component properties */\nexport type OreAvatarGroupProps = {\n  /** Maximum number of avatars to show before showing a +N badge */\n  max?: number;\n  /** Total count shown in the overflow badge (defaults to the actual hidden count) */\n  total?: number;\n};\n\n/**\n * Groups multiple `ore-avatar` elements in a stacked, overlapping row.\n *\n * @element ore-avatar-group\n *\n * @attr {number} max - Max visible avatars before overflow badge (default: 5)\n * @attr {number} total - Override the total count displayed in the badge\n *\n * @slot - `ore-avatar` elements\n *\n * @cssprop --avatar-group-overlap - Negative margin creating the overlap (default: -0.75rem)\n *\n * @part overflow - Overflow count badge shown when avatars exceed `max`.\n *\n * @example\n * ```html\n * <ore-avatar-group max=\"3\">\n *   <ore-avatar src=\"/a.jpg\" alt=\"Alice\"></ore-avatar>\n *   <ore-avatar src=\"/b.jpg\" alt=\"Bob\"></ore-avatar>\n *   <ore-avatar src=\"/c.jpg\" alt=\"Carol\"></ore-avatar>\n *   <ore-avatar src=\"/d.jpg\" alt=\"Dave\"></ore-avatar>\n * </ore-avatar-group>\n * ```\n */\nexport const AVATAR_GROUP_TAG = 'ore-avatar-group' as const;\ndefine<OreAvatarGroupProps>(AVATAR_GROUP_TAG, {\n  props: {\n    max: prop.number(5),\n    total: prop.number(),\n  },\n  setup(props) {\n    const el = getHost();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    const overflowCount = signal(0);\n\n    const updateVisibility = () => {\n      const avatars = [...el.querySelectorAll('ore-avatar')];\n      const max = Number(props.max.value) || 5;\n      const hidden = Math.max(0, avatars.length - max);\n\n      overflowCount.value = props.total.value != null ? Number(props.total.value) - max : hidden;\n      avatars.forEach((a, i) => {\n        if (i >= max) a.setAttribute('data-avatar-group-hidden', '');\n        else a.removeAttribute('data-avatar-group-hidden');\n      });\n    };\n\n    watch(() => {\n      void slots.elements().value;\n      updateVisibility();\n    });\n\n    const overflowLabel = () => `+${overflowCount.value} more`;\n    const overflowText = () => `+${overflowCount.value}`;\n\n    return html`\n      <slot></slot>\n      ${() =>\n        overflowCount.value > 0\n          ? html`<span class=\"overflow-badge\" part=\"overflow\" aria-label=\"${overflowLabel}\"> ${overflowText} </span>`\n          : ''}\n    `;\n  },\n  styles: [groupStyles],\n});\n"],"mappings":";;;;;;;;AAaA,IAAM,IAA8C;CAClD,MAAM;CACN,MAAM;CACN,SAAS;CACT,QAAQ;AACV,GA0Da,IAAa;AAC1B,EAAuB,GAAY;CACjC,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,KAAK,EAAK,OAAO;EACjB,UAAU,EAAK,OAAO;EACtB,KAAK,EAAK,OAAO;EACjB,QAAQ,EAAK,OAAqB;CACpC;CACA,MAAM,GAAO;EACX,IAAM,IAAY,EAAO,EAAK;EAG9B,EAAM,EAAM,WAAW;GACrB,EAAU,QAAQ;EACpB,CAAC;EAGD,IAAM,KAAsB,MAAgC;GACrD,MAEL,EAAG,iBAAiB,eAAe;IACjC,EAAU,QAAQ;GACpB,CAAC,GACD,EAAG,iBAAiB,cAAc;IAChC,EAAU,QAAQ;GACpB,CAAC;EACH,GACM,IAAkB,QAAe;GACrC,IAAI,EAAM,SAAS,OAAO,OAAO,EAAM,SAAS,MAAM,MAAM,GAAG,CAAC;GAEhE,IAAM,IAAM,EAAM,IAAI;GAEtB,IAAI,CAAC,GAAK,OAAO;GAEjB,IAAM,IAAQ,EAAI,KAAK,CAAC,CAAC,MAAM,KAAK;GAIpC,OAFI,EAAM,UAAU,KAAW,EAAM,EAAE,CAAC,KAAK,EAAM,EAAM,SAAS,EAAE,CAAC,GAAA,CAAI,YAAY,IAE9E,EAAM,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,YAAY;EAC1C,CAAC,GACK,IAAY,QAAe,CAAC,CAAC,EAAM,IAAI,SAAS,CAAC,EAAU,KAAK,GAChE,IAAe,QAAe,CAAC,EAAU,SAAS,CAAC,CAAC,EAAgB,KAAK,GACzE,IAAe,QAAe,CAAC,EAAU,SAAS,CAAC,EAAa,KAAK,GACrE,UAAoB;GACxB,IAAM,IAAQ,EAAM,IAAI,SAAgC,MAClD,IAAY,EAAM,OAAO,OACzB,IAAS,IAAY,EAAc,KAAa;GAQtD,OANI,CAAC,KAAQ,CAAC,IAAe,OAExB,IAEA,IAEE,GAAG,EAAK,IAAI,MAFC,IAFF,WAAW;EAK/B;EAGA,OAAO,CAAI;wDACyC,EAAY,iBAHtC,EAAY,IAAI,QAAQ,KAGoC;gBAEhF,EAAM,IAAI,QACN,CAAI;uBACK,EAAmB;;wBAElB,EAAM,IAAI;wBACV,EAAM,IAAI;iCACD,CAAC,EAAU,MAAM;yCAEpC,GAAG;gBAEP,EAAa,QACT,CAAI,6DAA6D,EAAgB,WACjF,GAAG;gBAEP,EAAa,QACT,CAAI,uFACJ,GAAG;;cAGT,EAAM,OAAO,QACT,CAAI,oDAAoD,EAAM,OAAO,gCACrE,GAAG;;CAEb;CACA,QAAQ;EACN;EACA;EACA,EAAiB;GACf,IAAI;IAAE,UAAU;IAA6C,MAAM;GAAqC;GACxG,IAAI;IAAE,UAAU;IAA2C,MAAM;GAAqC;GACtG,IAAI;IAAE,UAAU;IAA2C,MAAM;GAAoC;EACvG,CAAC;EACD;CACF;AACF,CAAC;AAsCD,IAAa,IAAmB;AAChC,EAA4B,GAAkB;CAC5C,OAAO;EACL,KAAK,EAAK,OAAO,CAAC;EAClB,OAAO,EAAK,OAAO;CACrB;CACA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAQ,EAAS,GACjB,IAAQ,GAER,IAAgB,EAAO,CAAC,GAExB,UAAyB;GAC7B,IAAM,IAAU,CAAC,GAAG,EAAG,iBAAiB,YAAY,CAAC,GAC/C,IAAM,OAAO,EAAM,IAAI,KAAK,KAAK,GACjC,IAAS,KAAK,IAAI,GAAG,EAAQ,SAAS,CAAG;GAG/C,AADA,EAAc,QAAQ,EAAM,MAAM,SAAS,OAAyC,IAAlC,OAAO,EAAM,MAAM,KAAK,IAAI,GAC9E,EAAQ,SAAS,GAAG,MAAM;IACxB,AAAI,KAAK,IAAK,EAAE,aAAa,4BAA4B,EAAE,IACtD,EAAE,gBAAgB,0BAA0B;GACnD,CAAC;EACH;EAEA,QAAY;GAEV,AADA,EAAW,SAAS,CAAC,CAAC,OACtB,EAAiB;EACnB,CAAC;EAED,IAAM,UAAsB,IAAI,EAAc,MAAM,QAC9C,UAAqB,IAAI,EAAc;EAE7C,OAAO,CAAI;;cAGP,EAAc,QAAQ,IAClB,CAAI,4DAA4D,EAAc,KAAK,EAAa,YAChG,GAAG;;CAEb;CACA,QAAQ,CAAC,CAAW;AACtB,CAAC"}
+{"version":3,"file":"avatar.js","names":[],"sources":["../src/content/avatar/avatar.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { computed, signal } from '@vielzeug/ripple';\nimport { watch } from '@vielzeug/ripple/watch';\n\nimport type { ComponentSize, RoundedSize, ThemeColor } from '../../types';\n\nimport '../icon/icon';\nimport { roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { colorThemeMixin, roundedVariantMixin, sizeVariantMixin } from '../../styles';\nimport componentStyles from './avatar.css?inline';\n\nexport type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';\n\nconst STATUS_LABELS: Record<AvatarStatus, string> = {\n  away: 'Away',\n  busy: 'Busy',\n  offline: 'Offline',\n  online: 'Online',\n};\n\n/** Avatar component properties */\nexport type OreAvatarProps = {\n  /** Alt text for the image; also used to derive initials when no `initials` prop is given */\n  alt?: string;\n  /** Theme color (used for initials background) */\n  color?: ThemeColor;\n  /** Explicit initials to display when no image is available (e.g. \"JD\") */\n  initials?: string;\n  /** Border radius */\n  rounded?: RoundedSize | '';\n  /** Component size */\n  size?: ComponentSize;\n  /** Image source URL */\n  src?: string;\n  /** Online presence indicator */\n  status?: AvatarStatus;\n};\n\n/**\n * Displays a user avatar: image → initials → generic fallback icon, in that priority order.\n *\n * @element ore-avatar\n *\n * @attr {string} src - Image source URL\n * @attr {string} alt - Image alt text (also used to derive initials)\n * @attr {string} initials - Explicit initials (up to 2 chars)\n * @attr {string} color - Theme color for initials background: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {string} size - 'sm' | 'md' | 'lg'\n * @attr {string} rounded - Border radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n * @attr {string} status - 'online' | 'offline' | 'busy' | 'away'\n *\n * @slot - Fallback content shown when image and initials are unavailable.\n * @cssprop --avatar-size - Diameter of the avatar\n * @cssprop --avatar-bg - Background color\n * @cssprop --avatar-color - Text/icon color\n * @cssprop --avatar-radius - Border radius\n * @cssprop --avatar-border - Border shorthand\n * @cssprop --avatar-border-color - Border color (also controls status dot border)\n *\n * @part avatar - Avatar root container.\n * @part img - Image element.\n * @part initials - Initials fallback element.\n * @part fallback - Shadow part for the `fallback` element.\n * @part status - Status indicator element.\n * @part overflow - Overflow indicator element.\n * @example\n * ```html\n * <ore-avatar src=\"/jane.jpg\" alt=\"Jane Doe\"></ore-avatar>\n * <ore-avatar initials=\"JD\" color=\"primary\"></ore-avatar>\n * <ore-avatar alt=\"John Smith\" status=\"online\"></ore-avatar>\n * ```\n */\nexport const AVATAR_TAG = 'ore-avatar' as const;\ndefine<OreAvatarProps>(AVATAR_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...roundableBundle,\n    alt: prop.string(),\n    initials: prop.string(),\n    src: prop.string(),\n    status: prop.string<AvatarStatus>(),\n  },\n  setup(props) {\n    const imgFailed = signal(false);\n\n    // Reset stale error state whenever src changes\n    watch(props.src, () => {\n      imgFailed.value = false;\n    });\n\n    // Attach load/error listeners reactively when the img element mounts\n    const attachImgListeners = (el: HTMLImageElement | null) => {\n      if (!el) return;\n\n      el.addEventListener('error', () => {\n        imgFailed.value = true;\n      });\n      el.addEventListener('load', () => {\n        imgFailed.value = false;\n      });\n    };\n    const derivedInitials = computed(() => {\n      if (props.initials.value) return props.initials.value.slice(0, 2);\n\n      const alt = props.alt.value;\n\n      if (!alt) return '';\n\n      const parts = alt.trim().split(/\\s+/);\n\n      if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();\n\n      return parts[0].slice(0, 2).toUpperCase();\n    });\n    const showImage = computed(() => !!props.src.value && !imgFailed.value);\n    const showInitials = computed(() => !showImage.value && !!derivedInitials.value);\n    const showFallback = computed(() => !showImage.value && !showInitials.value);\n    const avatarLabel = () => {\n      const name = (props.alt.value as string | undefined) || null;\n      const statusKey = props.status.value as AvatarStatus | undefined;\n      const status = statusKey ? STATUS_LABELS[statusKey] : null;\n\n      if (!name && !status) return null;\n\n      if (!name) return `Status: ${status}`;\n\n      if (!status) return name;\n\n      return `${name}, ${status}`;\n    };\n    const avatarRole = () => (avatarLabel() ? 'img' : null);\n\n    return html`\n      <span class=\"avatar\" part=\"avatar\" aria-label=\"${avatarLabel}\" role=\"${avatarRole}\">\n        ${() =>\n          props.src.value\n            ? html`\n                <img\n                  ref=\"${attachImgListeners}\"\n                  part=\"img\"\n                  src=\"${props.src}\"\n                  alt=\"${props.alt}\"\n                  ?hidden=\"${() => !showImage.value}\"\n                  aria-hidden=\"true\" />\n              `\n            : ''}\n        ${() =>\n          showInitials.value\n            ? html`\n                <span class=\"initials\" part=\"initials\" aria-hidden=\"true\">${derivedInitials}</span>\n              `\n            : ''}\n        ${() =>\n          showFallback.value\n            ? html`\n                <ore-icon class=\"icon-fallback\" part=\"fallback\" name=\"user\" size=\"50%\"></ore-icon>\n              `\n            : ''}\n      </span>\n      ${() =>\n        props.status.value\n          ? html`\n              <span class=\"status\" part=\"status\" data-status=\"${props.status}\" aria-hidden=\"true\"></span>\n            `\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"],"mappings":";;;;;;;;AAaA,IAAM,IAA8C;CAClD,MAAM;CACN,MAAM;CACN,SAAS;CACT,QAAQ;AACV,GAsDa,IAAa;AAC1B,EAAuB,GAAY;CACjC,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,KAAK,EAAK,OAAO;EACjB,UAAU,EAAK,OAAO;EACtB,KAAK,EAAK,OAAO;EACjB,QAAQ,EAAK,OAAqB;CACpC;CACA,MAAM,GAAO;EACX,IAAM,IAAY,EAAO,EAAK;EAG9B,EAAM,EAAM,WAAW;GACrB,EAAU,QAAQ;EACpB,CAAC;EAGD,IAAM,KAAsB,MAAgC;GACrD,MAEL,EAAG,iBAAiB,eAAe;IACjC,EAAU,QAAQ;GACpB,CAAC,GACD,EAAG,iBAAiB,cAAc;IAChC,EAAU,QAAQ;GACpB,CAAC;EACH,GACM,IAAkB,QAAe;GACrC,IAAI,EAAM,SAAS,OAAO,OAAO,EAAM,SAAS,MAAM,MAAM,GAAG,CAAC;GAEhE,IAAM,IAAM,EAAM,IAAI;GAEtB,IAAI,CAAC,GAAK,OAAO;GAEjB,IAAM,IAAQ,EAAI,KAAK,CAAC,CAAC,MAAM,KAAK;GAIpC,OAFI,EAAM,UAAU,KAAW,EAAM,EAAE,CAAC,KAAK,EAAM,EAAM,SAAS,EAAE,CAAC,GAAA,CAAI,YAAY,IAE9E,EAAM,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,YAAY;EAC1C,CAAC,GACK,IAAY,QAAe,CAAC,CAAC,EAAM,IAAI,SAAS,CAAC,EAAU,KAAK,GAChE,IAAe,QAAe,CAAC,EAAU,SAAS,CAAC,CAAC,EAAgB,KAAK,GACzE,IAAe,QAAe,CAAC,EAAU,SAAS,CAAC,EAAa,KAAK,GACrE,UAAoB;GACxB,IAAM,IAAQ,EAAM,IAAI,SAAgC,MAClD,IAAY,EAAM,OAAO,OACzB,IAAS,IAAY,EAAc,KAAa;GAQtD,OANI,CAAC,KAAQ,CAAC,IAAe,OAExB,IAEA,IAEE,GAAG,EAAK,IAAI,MAFC,IAFF,WAAW;EAK/B;EAGA,OAAO,CAAI;uDACwC,EAAY,gBAHrC,EAAY,IAAI,QAAQ,KAGkC;gBAE9E,EAAM,IAAI,QACN,CAAI;;yBAEO,EAAmB;;yBAEnB,EAAM,IAAI;yBACV,EAAM,IAAI;mCACA,CAAC,EAAU,MAAM;;kBAGtC,GAAG;gBAEP,EAAa,QACT,CAAI;4EAC0D,EAAgB;kBAE9E,GAAG;gBAEP,EAAa,QACT,CAAI;;kBAGJ,GAAG;;cAGT,EAAM,OAAO,QACT,CAAI;gEACgD,EAAM,OAAO;gBAEjE,GAAG;;CAEb;CACA,QAAQ;EACN;EACA;EACA,EAAiB;GACf,IAAI;IAAE,UAAU;IAA6C,MAAM;GAAqC;GACxG,IAAI;IAAE,UAAU;IAA2C,MAAM;GAAqC;GACtG,IAAI;IAAE,UAAU;IAA2C,MAAM;GAAoC;EACvG,CAAC;EACD;CACF;AACF,CAAC"}

package/dist/badge.cjs

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

package/dist/badge.cjs.map

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

package/dist/badge.js

@@ -23,16 +23,18 @@ c(f, {
 		let t = d(() => {
 			let t = e.count.value == null ? void 0 : Number(e.count.value), n = e.max.value == null ? void 0 : Number(e.max.value);
 			if (!(t === void 0 || Number.isNaN(t))) return n !== void 0 && !Number.isNaN(n) && t > n ? `${n}+` : String(t);
-		});
-		return l`<span class="badge" part="badge" :aria-label="${d(() => {
+		}), n = d(() => {
 			if (e.label.value) return e.label.value;
 			if (!e.dot.value && t.value != null) return `${t.value} notifications`;
-		})}">
+		});
+		return l`
+      <span class="badge" part="badge" aria-label="${n}">
         <slot name="icon"></slot>
         <span ?hidden="${() => t.value == null}">${t}</span>
         <span class="badge-label" ?hidden="${() => t.value != null}"><slot></slot></span>
       </span>
-      <slot name="target"></slot>`;
+      <slot name="target"></slot>
+    `;
 	},
 	styles: [
 		n,

package/dist/badge.js.map

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

package/dist/box.cjs

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

package/dist/box.js

@@ -1,31 +1,37 @@
 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.js";
-import { define as i, html as a, prop as o } from "@vielzeug/ore";
+import { paddingMixin as t, roundedVariantMixin as n } from "./styles/mixins/shape.css.js";
+import { colorThemeMixin as r, elevationMixin as i } from "./styles/mixins/theme.css.js";
+import { frostVariantMixin as a } from "./styles/mixins/variants.css.js";
+import o from "./layout/box/box.css.js";
+import { define as s, html as c, prop as l } from "@vielzeug/ore";
 //#region src/layout/box/box.ts
-var s = "ore-box";
-i(s, {
+var u = "ore-box";
+s(u, {
 	props: {
-		color: o.string(),
-		effect: o.string(),
-		elevation: o.number(),
-		fullwidth: o.bool(),
-		padding: o.string(),
-		rounded: o.string(),
-		variant: o.string()
+		color: l.string(),
+		effect: l.string(),
+		elevation: l.number(),
+		fullwidth: l.bool(),
+		padding: l.string(),
+		rounded: l.string(),
+		variant: l.string()
 	},
 	setup() {
-		return a`<div class="box" part="box"><slot></slot></div>`;
+		return c`
+      <div class="box" part="box"><slot></slot></div>
+    `;
 	},
 	styles: [
-		...n,
-		t(".box"),
+		r,
+		i,
+		t,
+		n,
+		a(".box"),
 		e(".box"),
-		r
+		o
 	]
 });
 //#endregion
-export { s as BOX_TAG };
+export { u as BOX_TAG };
 
 //# sourceMappingURL=box.js.map

package/dist/box.js.map

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

package/dist/breadcrumb.cjs

@@ -3,16 +3,16 @@ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=requi
         <span class="separator" part="separator" aria-hidden="true">${e.separator}</span>
         <a
           class="link"
-          :href="${e.href}"
-          :aria-current="${()=>e.active.value?`page`:null}"
-          :tabindex="${()=>e.active.value?`-1`:null}"
+          href="${e.href}"
+          aria-current="${()=>e.active.value?`page`:null}"
+          tabindex="${()=>e.active.value?`-1`:null}"
           part="link">
           <span class="icon"><slot name="icon"></slot></span>
           <span class="label"><slot></slot></span>
         </a>
       </li>
     `},styles:[e.default]});var i=`ore-breadcrumb`;(0,n.define)(i,{props:{label:n.prop.string(`Breadcrumb`),separator:n.prop.string()},setup(e){let t=(0,n.getHost)(),r=(0,n.useSlots)(),i=n.watchEffect,a=()=>Array.from(t.getElementsByTagName(`ore-breadcrumb-item`)),o=()=>{let n=e.separator.value||`/`,r=a();for(let e=0;e<r.length;e++)r[e].setAttribute(`separator`,n),r[e].toggleAttribute(`data-show-separator`,e>0);n?t.style.setProperty(`--breadcrumb-separator`,`'${n}'`):t.style.removeProperty(`--breadcrumb-separator`)};return i(()=>{r.elements().value,o()}),n.html`
-      <nav part="nav" :aria-label="${e.label}">
+      <nav part="nav" aria-label="${e.label}">
         <ol role="list" part="list">
           <slot></slot>
         </ol>

package/dist/breadcrumb.cjs.map

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

package/dist/breadcrumb.js

@@ -15,9 +15,9 @@ n(c, {
         <span class="separator" part="separator" aria-hidden="true">${e.separator}</span>
         <a
           class="link"
-          :href="${e.href}"
-          :aria-current="${() => e.active.value ? "page" : null}"
-          :tabindex="${() => e.active.value ? "-1" : null}"
+          href="${e.href}"
+          aria-current="${() => e.active.value ? "page" : null}"
+          tabindex="${() => e.active.value ? "-1" : null}"
           part="link">
           <span class="icon"><slot name="icon"></slot></span>
           <span class="label"><slot></slot></span>
@@ -42,7 +42,7 @@ n(l, {
 		return a(() => {
 			n.elements().value, l();
 		}), i`
-      <nav part="nav" :aria-label="${e.label}">
+      <nav part="nav" aria-label="${e.label}">
         <ol role="list" part="list">
           <slot></slot>
         </ol>

package/dist/breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.js","names":[],"sources":["../src/content/breadcrumb/breadcrumb.ts"],"sourcesContent":["import { define, html, prop, getHost, useSlots, watchEffect } from '@vielzeug/ore';\n\nimport itemStyles from './breadcrumb-item.css?inline';\nimport componentStyles from './breadcrumb.css?inline';\n\nexport type OreBreadcrumbProps = {\n  label?: string;\n  separator?: string;\n};\n\nexport type OreBreadcrumbItemProps = {\n  active?: boolean;\n  href?: string;\n  separator?: string;\n};\n\n/**\n * A single breadcrumb entry rendered inside `<ore-breadcrumb>`.\n *\n * @element ore-breadcrumb-item\n *\n * @attr {boolean} active - Marks this item as the current page (`aria-current=\"page\"`)\n * @attr {string} href - Link target for this breadcrumb item\n * @attr {string} separator - Separator text shown before the item (except first item)\n *\n * @slot - Item label/content\n * @slot icon - Optional leading icon for the crumb\n *\n * @part separator - Separator element before the item label\n * @part link - The interactive anchor element\n *\n * @example\n * ```html\n * <ore-breadcrumb-item href=\"/\">Home</ore-breadcrumb-item>\n * <ore-breadcrumb-item active>Current Page</ore-breadcrumb-item>\n * ```\n */\nexport const BREADCRUMB_ITEM_TAG = 'ore-breadcrumb-item' as const;\ndefine<OreBreadcrumbItemProps>(BREADCRUMB_ITEM_TAG, {\n  props: {\n    active: prop.bool(),\n    href: prop.string(),\n    separator: prop.string('/'),\n  },\n  setup(props) {\n    return html`\n      <li class=\"item\" role=\"listitem\">\n        <span class=\"separator\" part=\"separator\" aria-hidden=\"true\">${props.separator}</span>\n        <a\n          class=\"link\"\n          :href=\"${props.href}\"\n          :aria-current=\"${() => (props.active.value ? 'page' : null)}\"\n          :tabindex=\"${() => (props.active.value ? '-1' : null)}\"\n          part=\"link\">\n          <span class=\"icon\"><slot name=\"icon\"></slot></span>\n          <span class=\"label\"><slot></slot></span>\n        </a>\n      </li>\n    `;\n  },\n  styles: [itemStyles],\n});\n\n// ============================================\n// Breadcrumb Component\n// ============================================\n\n/**\n * Accessible breadcrumb navigation container.\n *\n * @element ore-breadcrumb\n *\n * @attr {string} label - Accessible label for the internal `<nav>` landmark\n * @attr {string} separator - Separator text propagated to child `<ore-breadcrumb-item>` elements\n *\n * @slot - One or more `<ore-breadcrumb-item>` children\n *\n * @part nav - Internal navigation landmark element\n * @part list - Internal ordered list container\n *\n * @cssprop --breadcrumb-separator - Optional custom separator text synced to child items\n *\n * @example\n * ```html\n * <ore-breadcrumb label=\"Page breadcrumb\">\n *   <ore-breadcrumb-item href=\"/\">Home</ore-breadcrumb-item>\n *   <ore-breadcrumb-item href=\"/blog\">Blog</ore-breadcrumb-item>\n *   <ore-breadcrumb-item active>My Post</ore-breadcrumb-item>\n * </ore-breadcrumb>\n * ```\n */\nexport const BREADCRUMB_TAG = 'ore-breadcrumb' as const;\ndefine<OreBreadcrumbProps>(BREADCRUMB_TAG, {\n  props: {\n    label: prop.string('Breadcrumb'),\n    separator: prop.string(),\n  },\n  setup(props) {\n    const el = getHost();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    // ────────────────────────────────────────────────────────────────\n    // Item & Separator Synchronization\n    // ────────────────────────────────────────────────────────────────\n\n    const getItems = (): HTMLElement[] => Array.from(el.getElementsByTagName('ore-breadcrumb-item'));\n\n    const syncItems = () => {\n      const sep = props.separator.value || '/';\n      const items = getItems();\n\n      for (let i = 0; i < items.length; i++) {\n        items[i].setAttribute('separator', sep);\n        items[i].toggleAttribute('data-show-separator', i > 0);\n      }\n\n      // Sync CSS variable for CSS-based separator (if used)\n      if (sep) el.style.setProperty('--breadcrumb-separator', `'${sep}'`);\n      else el.style.removeProperty('--breadcrumb-separator');\n    };\n\n    // ────────────────────────────────────────────────────────────────\n    // Lifecycle\n    // ────────────────────────────────────────────────────────────────\n\n    watch(() => {\n      void slots.elements().value;\n      syncItems();\n    });\n\n    return html`\n      <nav part=\"nav\" :aria-label=\"${props.label}\">\n        <ol role=\"list\" part=\"list\">\n          <slot></slot>\n        </ol>\n      </nav>\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":";;;;AAqCA,IAAa,IAAsB;AACnC,EAA+B,GAAqB;CAClD,OAAO;EACL,QAAQ,EAAK,KAAK;EAClB,MAAM,EAAK,OAAO;EAClB,WAAW,EAAK,OAAO,GAAG;CAC5B;CACA,MAAM,GAAO;EACX,OAAO,CAAI;;sEAEuD,EAAM,UAAU;;;mBAGnE,EAAM,KAAK;iCACI,EAAM,OAAO,QAAQ,SAAS,KAAM;6BACxC,EAAM,OAAO,QAAQ,OAAO,KAAM;;;;;;;CAO9D;CACA,QAAQ,CAAC,CAAU;AACrB,CAAC;AA8BD,IAAa,IAAiB;AAC9B,EAA2B,GAAgB;CACzC,OAAO;EACL,OAAO,EAAK,OAAO,YAAY;EAC/B,WAAW,EAAK,OAAO;CACzB;CACA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAQ,EAAS,GACjB,IAAQ,GAMR,UAAgC,MAAM,KAAK,EAAG,qBAAqB,qBAAqB,CAAC,GAEzF,UAAkB;GACtB,IAAM,IAAM,EAAM,UAAU,SAAS,KAC/B,IAAQ,EAAS;GAEvB,KAAK,IAAI,IAAI,GAAG,IAAI,EAAM,QAAQ,KAEhC,AADA,EAAM,EAAE,CAAC,aAAa,aAAa,CAAG,GACtC,EAAM,EAAE,CAAC,gBAAgB,uBAAuB,IAAI,CAAC;GAIvD,AAAI,IAAK,EAAG,MAAM,YAAY,0BAA0B,IAAI,EAAI,EAAE,IAC7D,EAAG,MAAM,eAAe,wBAAwB;EACvD;EAWA,OALA,QAAY;GAEV,AADA,EAAW,SAAS,CAAC,CAAC,OACtB,EAAU;EACZ,CAAC,GAEM,CAAI;qCACsB,EAAM,MAAM;;;;;;CAM/C;CACA,QAAQ,CAAC,CAAe;AAC1B,CAAC"}
+{"version":3,"file":"breadcrumb.js","names":[],"sources":["../src/content/breadcrumb/breadcrumb.ts"],"sourcesContent":["import { define, html, prop, getHost, useSlots, watchEffect } from '@vielzeug/ore';\n\nimport itemStyles from './breadcrumb-item.css?inline';\nimport componentStyles from './breadcrumb.css?inline';\n\nexport type OreBreadcrumbProps = {\n  label?: string;\n  separator?: string;\n};\n\nexport type OreBreadcrumbItemProps = {\n  active?: boolean;\n  href?: string;\n  separator?: string;\n};\n\n/**\n * A single breadcrumb entry rendered inside `<ore-breadcrumb>`.\n *\n * @element ore-breadcrumb-item\n *\n * @attr {boolean} active - Marks this item as the current page (`aria-current=\"page\"`)\n * @attr {string} href - Link target for this breadcrumb item\n * @attr {string} separator - Separator text shown before the item (except first item)\n *\n * @slot - Item label/content\n * @slot icon - Optional leading icon for the crumb\n *\n * @part separator - Separator element before the item label\n * @part link - The interactive anchor element\n *\n * @example\n * ```html\n * <ore-breadcrumb-item href=\"/\">Home</ore-breadcrumb-item>\n * <ore-breadcrumb-item active>Current Page</ore-breadcrumb-item>\n * ```\n */\nexport const BREADCRUMB_ITEM_TAG = 'ore-breadcrumb-item' as const;\ndefine<OreBreadcrumbItemProps>(BREADCRUMB_ITEM_TAG, {\n  props: {\n    active: prop.bool(),\n    href: prop.string(),\n    separator: prop.string('/'),\n  },\n  setup(props) {\n    return html`\n      <li class=\"item\" role=\"listitem\">\n        <span class=\"separator\" part=\"separator\" aria-hidden=\"true\">${props.separator}</span>\n        <a\n          class=\"link\"\n          href=\"${props.href}\"\n          aria-current=\"${() => (props.active.value ? 'page' : null)}\"\n          tabindex=\"${() => (props.active.value ? '-1' : null)}\"\n          part=\"link\">\n          <span class=\"icon\"><slot name=\"icon\"></slot></span>\n          <span class=\"label\"><slot></slot></span>\n        </a>\n      </li>\n    `;\n  },\n  styles: [itemStyles],\n});\n\n// ============================================\n// Breadcrumb Component\n// ============================================\n\n/**\n * Accessible breadcrumb navigation container.\n *\n * @element ore-breadcrumb\n *\n * @attr {string} label - Accessible label for the internal `<nav>` landmark\n * @attr {string} separator - Separator text propagated to child `<ore-breadcrumb-item>` elements\n *\n * @slot - One or more `<ore-breadcrumb-item>` children\n *\n * @part nav - Internal navigation landmark element\n * @part list - Internal ordered list container\n *\n * @cssprop --breadcrumb-separator - Optional custom separator text synced to child items\n *\n * @example\n * ```html\n * <ore-breadcrumb label=\"Page breadcrumb\">\n *   <ore-breadcrumb-item href=\"/\">Home</ore-breadcrumb-item>\n *   <ore-breadcrumb-item href=\"/blog\">Blog</ore-breadcrumb-item>\n *   <ore-breadcrumb-item active>My Post</ore-breadcrumb-item>\n * </ore-breadcrumb>\n * ```\n */\nexport const BREADCRUMB_TAG = 'ore-breadcrumb' as const;\ndefine<OreBreadcrumbProps>(BREADCRUMB_TAG, {\n  props: {\n    label: prop.string('Breadcrumb'),\n    separator: prop.string(),\n  },\n  setup(props) {\n    const el = getHost();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    // ────────────────────────────────────────────────────────────────\n    // Item & Separator Synchronization\n    // ────────────────────────────────────────────────────────────────\n\n    const getItems = (): HTMLElement[] => Array.from(el.getElementsByTagName('ore-breadcrumb-item'));\n\n    const syncItems = () => {\n      const sep = props.separator.value || '/';\n      const items = getItems();\n\n      for (let i = 0; i < items.length; i++) {\n        items[i].setAttribute('separator', sep);\n        items[i].toggleAttribute('data-show-separator', i > 0);\n      }\n\n      // Sync CSS variable for CSS-based separator (if used)\n      if (sep) el.style.setProperty('--breadcrumb-separator', `'${sep}'`);\n      else el.style.removeProperty('--breadcrumb-separator');\n    };\n\n    // ────────────────────────────────────────────────────────────────\n    // Lifecycle\n    // ────────────────────────────────────────────────────────────────\n\n    watch(() => {\n      void slots.elements().value;\n      syncItems();\n    });\n\n    return html`\n      <nav part=\"nav\" aria-label=\"${props.label}\">\n        <ol role=\"list\" part=\"list\">\n          <slot></slot>\n        </ol>\n      </nav>\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":";;;;AAqCA,IAAa,IAAsB;AACnC,EAA+B,GAAqB;CAClD,OAAO;EACL,QAAQ,EAAK,KAAK;EAClB,MAAM,EAAK,OAAO;EAClB,WAAW,EAAK,OAAO,GAAG;CAC5B;CACA,MAAM,GAAO;EACX,OAAO,CAAI;;sEAEuD,EAAM,UAAU;;;kBAGpE,EAAM,KAAK;gCACI,EAAM,OAAO,QAAQ,SAAS,KAAM;4BACxC,EAAM,OAAO,QAAQ,OAAO,KAAM;;;;;;;CAO7D;CACA,QAAQ,CAAC,CAAU;AACrB,CAAC;AA8BD,IAAa,IAAiB;AAC9B,EAA2B,GAAgB;CACzC,OAAO;EACL,OAAO,EAAK,OAAO,YAAY;EAC/B,WAAW,EAAK,OAAO;CACzB;CACA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAQ,EAAS,GACjB,IAAQ,GAMR,UAAgC,MAAM,KAAK,EAAG,qBAAqB,qBAAqB,CAAC,GAEzF,UAAkB;GACtB,IAAM,IAAM,EAAM,UAAU,SAAS,KAC/B,IAAQ,EAAS;GAEvB,KAAK,IAAI,IAAI,GAAG,IAAI,EAAM,QAAQ,KAEhC,AADA,EAAM,EAAE,CAAC,aAAa,aAAa,CAAG,GACtC,EAAM,EAAE,CAAC,gBAAgB,uBAAuB,IAAI,CAAC;GAIvD,AAAI,IAAK,EAAG,MAAM,YAAY,0BAA0B,IAAI,EAAI,EAAE,IAC7D,EAAG,MAAM,eAAe,wBAAwB;EACvD;EAWA,OALA,QAAY;GAEV,AADA,EAAW,SAAS,CAAC,CAAC,OACtB,EAAU;EACZ,CAAC,GAEM,CAAI;oCACqB,EAAM,MAAM;;;;;;CAM9C;CACA,QAAQ,CAAC,CAAe;AAC1B,CAAC"}

package/dist/button-group.cjs

@@ -1,6 +1,6 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./shared/prop-bundles.cjs"),t=require("./inputs/button-group/button-group.css.cjs");let n=require("@vielzeug/ore");require("@vielzeug/ripple");var r=(0,n.createContext)(`OreButtonGroup`),i=`ore-button-group`;(0,n.define)(i,{props:{...e.themableBundle,...e.sizableBundle,attached:n.prop.bool(!1),fullwidth:n.prop.bool(!1),label:n.prop.string(),orientation:n.prop.string(),variant:n.prop.string()},setup(e){return(0,n.provide)(r,{color:e.color,size:e.size,variant:e.variant}),n.html`
-      <div class="button-group" part="group" role="group" :aria-label="${e.label}">
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/shape.css.cjs"),t=require("./shared/prop-bundles.cjs"),n=require("./inputs/button-group/button-group.css.cjs");let r=require("@vielzeug/ore");require("@vielzeug/ripple");var i=(0,r.createContext)(`OreButtonGroup`),a=`ore-button-group`;(0,r.define)(a,{props:{...t.themableBundle,...t.sizableBundle,...t.roundableBundle,attached:r.prop.bool(!1),fullwidth:r.prop.bool(!1),label:r.prop.string(),orientation:r.prop.string(),variant:r.prop.string()},setup(e){return(0,r.provide)(i,{color:e.color,size:e.size,variant:e.variant}),r.html`
+      <div class="button-group" part="group" role="group" aria-label="${e.label}">
         <slot></slot>
       </div>
-    `},styles:[t.default]}),exports.BUTTON_GROUP_CTX=r,exports.BUTTON_GROUP_TAG=i;
+    `},styles:[e.roundedVariantMixin,n.default]}),exports.BUTTON_GROUP_CTX=i,exports.BUTTON_GROUP_TAG=a;
 //# sourceMappingURL=button-group.cjs.map

package/dist/button-group.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.cjs","names":[],"sources":["../src/inputs/button-group/button-group.ts"],"sourcesContent":["import { createContext, define, html, prop, provide } from '@vielzeug/ore';\nimport { type Readable } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor } from '../../shared';\nimport type { ButtonVariant } from '../button/button';\n\nimport { sizableBundle, themableBundle } from '../../shared';\nimport componentStyles from './button-group.css?inline';\n\n/** Button group properties */\nexport type OreButtonGroupProps = {\n  /** Join buttons together into a single unit */\n  attached?: boolean;\n  /** Theme color tint for all child buttons */\n  color?: ThemeColor;\n  /** Group children span full width */\n  fullwidth?: boolean;\n  /** Label for screen readers */\n  label?: string;\n  /** Layout direction */\n  orientation?: 'horizontal' | 'vertical';\n  /** Shared size for all child buttons */\n  size?: ComponentSize;\n  /** Shared visual variant for all child buttons */\n  variant?: ButtonVariant;\n};\n\n/** Shared context propagated from ore-button-group to child ore-button elements */\nexport type ButtonGroupContext = {\n  color: Readable<ThemeColor | undefined>;\n  size: Readable<ComponentSize | undefined>;\n  variant: Readable<ButtonVariant | undefined>;\n};\n\nexport const BUTTON_GROUP_CTX = createContext<ButtonGroupContext | undefined>('OreButtonGroup');\n\n/**\n * A container for grouping related buttons.\n * Child `ore-button` components automatically inherit the group's color, size, and variant.\n *\n * @element ore-button-group\n *\n * @attr {boolean} attached - Join buttons together into a unit\n * @attr {string} color - Shared color tint: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {boolean} fullwidth - Group spans full width\n * @attr {string} label - Accessible label\n * @attr {string} orientation - 'horizontal' | 'vertical'\n * @attr {string} size - Shared size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Shared visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'frost'\n *\n * @slot - Place ore-button elements here\n *\n * @cssprop --group-gap - Gap between buttons (non-attached mode)\n * @cssprop --group-radius - Border radius of the group container\n * @cssprop --button-radius - Passed through to child buttons to control corner radius\n * @cssprop --button-border-start - Passed through to suppress start borders in attached mode\n * @cssprop --button-border-top - Passed through to suppress top borders in vertical attached mode\n * @part group - Group container.\n * @example\n * ```html\n * <ore-button-group attached>\n *   <ore-button variant=\"solid\" color=\"primary\">Save</ore-button>\n *   <ore-button variant=\"solid\" color=\"primary\">Save &amp; Continue</ore-button>\n * </ore-button-group>\n * <ore-button-group orientation=\"vertical\" size=\"sm\">\n *   <ore-button>Top</ore-button>\n *   <ore-button>Middle</ore-button>\n *   <ore-button>Bottom</ore-button>\n * </ore-button-group>\n * ```\n */\nexport const BUTTON_GROUP_TAG = 'ore-button-group' as const;\ndefine<OreButtonGroupProps>(BUTTON_GROUP_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    attached: prop.bool(false),\n    fullwidth: prop.bool(false),\n    label: prop.string(),\n    orientation: prop.string<'horizontal' | 'vertical'>(),\n    variant: prop.string(),\n  },\n  setup(props) {\n    provide(BUTTON_GROUP_CTX, {\n      color: props.color!,\n      size: props.size!,\n      variant: props.variant!,\n    });\n\n    return html`\n      <div class=\"button-group\" part=\"group\" role=\"group\" :aria-label=\"${props.label}\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":"mOAkCA,IAAa,GAAA,EAAA,EAAA,cAAA,CAAiE,gBAAgB,EAqCjF,EAAmB,gCACJ,EAAkB,CAC5C,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,cACH,SAAU,EAAA,KAAK,KAAK,EAAK,EACzB,UAAW,EAAA,KAAK,KAAK,EAAK,EAC1B,MAAO,EAAA,KAAK,OAAO,EACnB,YAAa,EAAA,KAAK,OAAkC,EACpD,QAAS,EAAA,KAAK,OAAO,CACvB,EACA,MAAM,EAAO,CAOX,OANA,EAAA,EAAA,QAAA,CAAQ,EAAkB,CACxB,MAAO,EAAM,MACb,KAAM,EAAM,KACZ,QAAS,EAAM,OACjB,CAAC,EAEM,EAAA,IAAI;yEAC0D,EAAM,MAAM;;;KAInF,EACA,OAAQ,CAAC,EAAA,OAAe,CAC1B,CAAC"}
+{"version":3,"file":"button-group.cjs","names":[],"sources":["../src/inputs/button-group/button-group.ts"],"sourcesContent":["import { createContext, define, html, prop, provide } from '@vielzeug/ore';\nimport { type Readable } from '@vielzeug/ripple';\n\nimport type { ComponentSize, RoundedSize, ThemeColor } from '../../shared';\nimport type { ButtonVariant } from '../button/button';\n\nimport { roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { roundedVariantMixin } from '../../styles';\nimport componentStyles from './button-group.css?inline';\n\n/** Button group properties */\nexport type OreButtonGroupProps = {\n  /** Join buttons together into a single unit */\n  attached?: boolean;\n  /** Theme color tint for all child buttons */\n  color?: ThemeColor;\n  /** Group children span full width */\n  fullwidth?: boolean;\n  /** Label for screen readers */\n  label?: string;\n  /** Layout direction */\n  orientation?: 'horizontal' | 'vertical';\n  /** Corner radius of the group container (and its attached-mode end buttons) */\n  rounded?: RoundedSize | '';\n  /** Shared size for all child buttons */\n  size?: ComponentSize;\n  /** Shared visual variant for all child buttons */\n  variant?: ButtonVariant;\n};\n\n/** Shared context propagated from ore-button-group to child ore-button elements */\nexport type ButtonGroupContext = {\n  color: Readable<ThemeColor | undefined>;\n  size: Readable<ComponentSize | undefined>;\n  variant: Readable<ButtonVariant | undefined>;\n};\n\nexport const BUTTON_GROUP_CTX = createContext<ButtonGroupContext | undefined>('OreButtonGroup');\n\n/**\n * A container for grouping related buttons.\n * Child `ore-button` components automatically inherit the group's color, size, and variant.\n *\n * @element ore-button-group\n *\n * @attr {boolean} attached - Join buttons together into a unit\n * @attr {string} color - Shared color tint: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {boolean} fullwidth - Group spans full width\n * @attr {string} label - Accessible label\n * @attr {string} orientation - 'horizontal' | 'vertical'\n * @attr {string} rounded - Corner radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' (bare attribute defaults to 'full')\n * @attr {string} size - Shared size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Shared visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'frost'\n *\n * @slot - Place ore-button elements here\n *\n * @cssprop --group-gap - Gap between buttons (non-attached mode)\n * @cssprop --group-radius - Border radius of the group container, defaults to the `rounded` attribute's token\n * @cssprop --button-radius - Passed through to child buttons to control corner radius\n * @cssprop --button-border-start - Passed through to suppress start borders in attached mode\n * @cssprop --button-border-top - Passed through to suppress top borders in vertical attached mode\n * @part group - Group container.\n * @example\n * ```html\n * <ore-button-group attached rounded=\"full\">\n *   <ore-button variant=\"solid\" color=\"primary\">Save</ore-button>\n *   <ore-button variant=\"solid\" color=\"primary\">Save &amp; Continue</ore-button>\n * </ore-button-group>\n * <ore-button-group orientation=\"vertical\" size=\"sm\">\n *   <ore-button>Top</ore-button>\n *   <ore-button>Middle</ore-button>\n *   <ore-button>Bottom</ore-button>\n * </ore-button-group>\n * ```\n */\nexport const BUTTON_GROUP_TAG = 'ore-button-group' as const;\ndefine<OreButtonGroupProps>(BUTTON_GROUP_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...roundableBundle,\n    attached: prop.bool(false),\n    fullwidth: prop.bool(false),\n    label: prop.string(),\n    orientation: prop.string<'horizontal' | 'vertical'>(),\n    variant: prop.string(),\n  },\n  setup(props) {\n    provide(BUTTON_GROUP_CTX, {\n      color: props.color!,\n      size: props.size!,\n      variant: props.variant!,\n    });\n\n    return html`\n      <div class=\"button-group\" part=\"group\" role=\"group\" aria-label=\"${props.label}\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [roundedVariantMixin, componentStyles],\n});\n"],"mappings":"8QAqCA,IAAa,GAAA,EAAmB,EAAA,cAAA,CAA8C,gBAAgB,EAsCjF,EAAmB,oBAChC,EAAA,EAAA,OAAA,CAA4B,EAAkB,CAC5C,MAAO,CACL,GAAG,EAAA,eACH,GAAG,EAAA,cACH,GAAG,EAAA,gBACH,SAAU,EAAA,KAAK,KAAK,EAAK,EACzB,UAAW,EAAA,KAAK,KAAK,EAAK,EAC1B,MAAO,EAAA,KAAK,OAAO,EACnB,YAAa,EAAA,KAAK,OAAkC,EACpD,QAAS,EAAA,KAAK,OAAO,CACvB,EACA,MAAM,EAAO,CAOX,OANA,EAAA,EAAA,QAAA,CAAQ,EAAkB,CACxB,MAAO,EAAM,MACb,KAAM,EAAM,KACZ,QAAS,EAAM,OACjB,CAAC,EAEM,EAAA,IAAI;wEACyD,EAAM,MAAM;;;KAIlF,EACA,OAAQ,CAAC,EAAA,oBAAqB,EAAA,OAAe,CAC/C,CAAC"}

package/dist/button-group.js

@@ -1,33 +1,35 @@
-import { sizableBundle as e, themableBundle as t } from "./shared/prop-bundles.js";
-import n from "./inputs/button-group/button-group.css.js";
-import { createContext as r, define as i, html as a, prop as o, provide as s } from "@vielzeug/ore";
+import { roundedVariantMixin as e } from "./styles/mixins/shape.css.js";
+import { roundableBundle as t, sizableBundle as n, themableBundle as r } from "./shared/prop-bundles.js";
+import i from "./inputs/button-group/button-group.css.js";
+import { createContext as a, define as o, html as s, prop as c, provide as l } from "@vielzeug/ore";
 import "@vielzeug/ripple";
 //#region src/inputs/button-group/button-group.ts
-var c = r("OreButtonGroup"), l = "ore-button-group";
-i(l, {
+var u = a("OreButtonGroup"), d = "ore-button-group";
+o(d, {
 	props: {
+		...r,
+		...n,
 		...t,
-		...e,
-		attached: o.bool(!1),
-		fullwidth: o.bool(!1),
-		label: o.string(),
-		orientation: o.string(),
-		variant: o.string()
+		attached: c.bool(!1),
+		fullwidth: c.bool(!1),
+		label: c.string(),
+		orientation: c.string(),
+		variant: c.string()
 	},
 	setup(e) {
-		return s(c, {
+		return l(u, {
 			color: e.color,
 			size: e.size,
 			variant: e.variant
-		}), a`
-      <div class="button-group" part="group" role="group" :aria-label="${e.label}">
+		}), s`
+      <div class="button-group" part="group" role="group" aria-label="${e.label}">
         <slot></slot>
       </div>
     `;
 	},
-	styles: [n]
+	styles: [e, i]
 });
 //#endregion
-export { c as BUTTON_GROUP_CTX, l as BUTTON_GROUP_TAG };
+export { u as BUTTON_GROUP_CTX, d as BUTTON_GROUP_TAG };
 
 //# sourceMappingURL=button-group.js.map

package/dist/button-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.js","names":[],"sources":["../src/inputs/button-group/button-group.ts"],"sourcesContent":["import { createContext, define, html, prop, provide } from '@vielzeug/ore';\nimport { type Readable } from '@vielzeug/ripple';\n\nimport type { ComponentSize, ThemeColor } from '../../shared';\nimport type { ButtonVariant } from '../button/button';\n\nimport { sizableBundle, themableBundle } from '../../shared';\nimport componentStyles from './button-group.css?inline';\n\n/** Button group properties */\nexport type OreButtonGroupProps = {\n  /** Join buttons together into a single unit */\n  attached?: boolean;\n  /** Theme color tint for all child buttons */\n  color?: ThemeColor;\n  /** Group children span full width */\n  fullwidth?: boolean;\n  /** Label for screen readers */\n  label?: string;\n  /** Layout direction */\n  orientation?: 'horizontal' | 'vertical';\n  /** Shared size for all child buttons */\n  size?: ComponentSize;\n  /** Shared visual variant for all child buttons */\n  variant?: ButtonVariant;\n};\n\n/** Shared context propagated from ore-button-group to child ore-button elements */\nexport type ButtonGroupContext = {\n  color: Readable<ThemeColor | undefined>;\n  size: Readable<ComponentSize | undefined>;\n  variant: Readable<ButtonVariant | undefined>;\n};\n\nexport const BUTTON_GROUP_CTX = createContext<ButtonGroupContext | undefined>('OreButtonGroup');\n\n/**\n * A container for grouping related buttons.\n * Child `ore-button` components automatically inherit the group's color, size, and variant.\n *\n * @element ore-button-group\n *\n * @attr {boolean} attached - Join buttons together into a unit\n * @attr {string} color - Shared color tint: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {boolean} fullwidth - Group spans full width\n * @attr {string} label - Accessible label\n * @attr {string} orientation - 'horizontal' | 'vertical'\n * @attr {string} size - Shared size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Shared visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'frost'\n *\n * @slot - Place ore-button elements here\n *\n * @cssprop --group-gap - Gap between buttons (non-attached mode)\n * @cssprop --group-radius - Border radius of the group container\n * @cssprop --button-radius - Passed through to child buttons to control corner radius\n * @cssprop --button-border-start - Passed through to suppress start borders in attached mode\n * @cssprop --button-border-top - Passed through to suppress top borders in vertical attached mode\n * @part group - Group container.\n * @example\n * ```html\n * <ore-button-group attached>\n *   <ore-button variant=\"solid\" color=\"primary\">Save</ore-button>\n *   <ore-button variant=\"solid\" color=\"primary\">Save &amp; Continue</ore-button>\n * </ore-button-group>\n * <ore-button-group orientation=\"vertical\" size=\"sm\">\n *   <ore-button>Top</ore-button>\n *   <ore-button>Middle</ore-button>\n *   <ore-button>Bottom</ore-button>\n * </ore-button-group>\n * ```\n */\nexport const BUTTON_GROUP_TAG = 'ore-button-group' as const;\ndefine<OreButtonGroupProps>(BUTTON_GROUP_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    attached: prop.bool(false),\n    fullwidth: prop.bool(false),\n    label: prop.string(),\n    orientation: prop.string<'horizontal' | 'vertical'>(),\n    variant: prop.string(),\n  },\n  setup(props) {\n    provide(BUTTON_GROUP_CTX, {\n      color: props.color!,\n      size: props.size!,\n      variant: props.variant!,\n    });\n\n    return html`\n      <div class=\"button-group\" part=\"group\" role=\"group\" :aria-label=\"${props.label}\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":";;;;;AAkCA,IAAa,IAAmB,EAA8C,gBAAgB,GAqCjF,IAAmB;AAChC,EAA4B,GAAkB;CAC5C,OAAO;EACL,GAAG;EACH,GAAG;EACH,UAAU,EAAK,KAAK,EAAK;EACzB,WAAW,EAAK,KAAK,EAAK;EAC1B,OAAO,EAAK,OAAO;EACnB,aAAa,EAAK,OAAkC;EACpD,SAAS,EAAK,OAAO;CACvB;CACA,MAAM,GAAO;EAOX,OANA,EAAQ,GAAkB;GACxB,OAAO,EAAM;GACb,MAAM,EAAM;GACZ,SAAS,EAAM;EACjB,CAAC,GAEM,CAAI;yEAC0D,EAAM,MAAM;;;;CAInF;CACA,QAAQ,CAAC,CAAe;AAC1B,CAAC"}
+{"version":3,"file":"button-group.js","names":[],"sources":["../src/inputs/button-group/button-group.ts"],"sourcesContent":["import { createContext, define, html, prop, provide } from '@vielzeug/ore';\nimport { type Readable } from '@vielzeug/ripple';\n\nimport type { ComponentSize, RoundedSize, ThemeColor } from '../../shared';\nimport type { ButtonVariant } from '../button/button';\n\nimport { roundableBundle, sizableBundle, themableBundle } from '../../shared';\nimport { roundedVariantMixin } from '../../styles';\nimport componentStyles from './button-group.css?inline';\n\n/** Button group properties */\nexport type OreButtonGroupProps = {\n  /** Join buttons together into a single unit */\n  attached?: boolean;\n  /** Theme color tint for all child buttons */\n  color?: ThemeColor;\n  /** Group children span full width */\n  fullwidth?: boolean;\n  /** Label for screen readers */\n  label?: string;\n  /** Layout direction */\n  orientation?: 'horizontal' | 'vertical';\n  /** Corner radius of the group container (and its attached-mode end buttons) */\n  rounded?: RoundedSize | '';\n  /** Shared size for all child buttons */\n  size?: ComponentSize;\n  /** Shared visual variant for all child buttons */\n  variant?: ButtonVariant;\n};\n\n/** Shared context propagated from ore-button-group to child ore-button elements */\nexport type ButtonGroupContext = {\n  color: Readable<ThemeColor | undefined>;\n  size: Readable<ComponentSize | undefined>;\n  variant: Readable<ButtonVariant | undefined>;\n};\n\nexport const BUTTON_GROUP_CTX = createContext<ButtonGroupContext | undefined>('OreButtonGroup');\n\n/**\n * A container for grouping related buttons.\n * Child `ore-button` components automatically inherit the group's color, size, and variant.\n *\n * @element ore-button-group\n *\n * @attr {boolean} attached - Join buttons together into a unit\n * @attr {string} color - Shared color tint: 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error'\n * @attr {boolean} fullwidth - Group spans full width\n * @attr {string} label - Accessible label\n * @attr {string} orientation - 'horizontal' | 'vertical'\n * @attr {string} rounded - Corner radius: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full' (bare attribute defaults to 'full')\n * @attr {string} size - Shared size: 'sm' | 'md' | 'lg'\n * @attr {string} variant - Shared visual variant: 'solid' | 'flat' | 'bordered' | 'outline' | 'ghost' | 'frost'\n *\n * @slot - Place ore-button elements here\n *\n * @cssprop --group-gap - Gap between buttons (non-attached mode)\n * @cssprop --group-radius - Border radius of the group container, defaults to the `rounded` attribute's token\n * @cssprop --button-radius - Passed through to child buttons to control corner radius\n * @cssprop --button-border-start - Passed through to suppress start borders in attached mode\n * @cssprop --button-border-top - Passed through to suppress top borders in vertical attached mode\n * @part group - Group container.\n * @example\n * ```html\n * <ore-button-group attached rounded=\"full\">\n *   <ore-button variant=\"solid\" color=\"primary\">Save</ore-button>\n *   <ore-button variant=\"solid\" color=\"primary\">Save &amp; Continue</ore-button>\n * </ore-button-group>\n * <ore-button-group orientation=\"vertical\" size=\"sm\">\n *   <ore-button>Top</ore-button>\n *   <ore-button>Middle</ore-button>\n *   <ore-button>Bottom</ore-button>\n * </ore-button-group>\n * ```\n */\nexport const BUTTON_GROUP_TAG = 'ore-button-group' as const;\ndefine<OreButtonGroupProps>(BUTTON_GROUP_TAG, {\n  props: {\n    ...themableBundle,\n    ...sizableBundle,\n    ...roundableBundle,\n    attached: prop.bool(false),\n    fullwidth: prop.bool(false),\n    label: prop.string(),\n    orientation: prop.string<'horizontal' | 'vertical'>(),\n    variant: prop.string(),\n  },\n  setup(props) {\n    provide(BUTTON_GROUP_CTX, {\n      color: props.color!,\n      size: props.size!,\n      variant: props.variant!,\n    });\n\n    return html`\n      <div class=\"button-group\" part=\"group\" role=\"group\" aria-label=\"${props.label}\">\n        <slot></slot>\n      </div>\n    `;\n  },\n  styles: [roundedVariantMixin, componentStyles],\n});\n"],"mappings":";;;;;;AAqCA,IAAa,IAAmB,EAA8C,gBAAgB,GAsCjF,IAAmB;AAChC,EAA4B,GAAkB;CAC5C,OAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACH,UAAU,EAAK,KAAK,EAAK;EACzB,WAAW,EAAK,KAAK,EAAK;EAC1B,OAAO,EAAK,OAAO;EACnB,aAAa,EAAK,OAAkC;EACpD,SAAS,EAAK,OAAO;CACvB;CACA,MAAM,GAAO;EAOX,OANA,EAAQ,GAAkB;GACxB,OAAO,EAAM;GACb,MAAM,EAAM;GACZ,SAAS,EAAM;EACjB,CAAC,GAEM,CAAI;wEACyD,EAAM,MAAM;;;;CAIlF;CACA,QAAQ,CAAC,GAAqB,CAAe;AAC/C,CAAC"}

package/dist/button.cjs

@@ -1,18 +1,22 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/shape.css.cjs"),n=require("./styles/mixins/states.css.cjs"),r=require("./styles/mixins/theme.css.cjs"),i=require("./styles/mixins/animation.css.cjs"),a=require("./styles/mixins/variants.css.cjs"),o=require("./shared/prop-bundles.cjs"),s=require("./utils/link.cjs"),c=require("./button-group.cjs"),l=require("./inputs/shared/use-form-action.cjs"),u=require("./inputs/button/button.css.cjs");let d=require("@vielzeug/ore"),f=require("@vielzeug/ripple"),p=require("@vielzeug/ore/forms");var m=[`solid`,`flat`,`bordered`,`outline`,`ghost`,`text`,`frost`],h=`ore-button`;(0,d.define)(h,{formAssociated:!0,props:{...o.commonProps,effect:d.prop.string(),fullheight:d.prop.bool(!1),fullwidth:d.prop.bool(!1),href:d.prop.string(),iconOnly:d.prop.bool(!1),label:d.prop.string(),rel:d.prop.string(),target:d.prop.string(),type:d.prop.oneOf([`button`,`submit`,`reset`],`button`),variant:d.prop.oneOf(m,`solid`)},setup(e){let t=(0,d.getHost)(),n=(0,d.inject)(c.BUTTON_GROUP_CTX),r=(0,f.computed)(()=>n?.color.value??e.color.value),i=(0,f.computed)(()=>n?.size.value??e.size.value),a=(0,f.computed)(()=>n?.variant.value??e.variant.value),o=(0,f.computed)(()=>!!(e.disabled.value||e.loading.value)),{effectiveRel:u,isLink:m}=s.useLinkProps(e.href,e.rel,e.target),h=(0,p.useField)({disabled:o,toFormValue:()=>null,value:(0,f.computed)(()=>``)}),g=n=>{if(o.value){n.preventDefault();return}l.useFormAction(()=>m.value?null:h.internals.form,e.type,o,t)(n)};(0,d.bind)({attr:{"aria-busy":e.loading,"aria-disabled":o,"aria-label":e.label,color:r,effect:e.effect,role:(0,f.computed)(()=>t.getAttribute(`role`)??(m.value?`link`:`button`)),size:i,tabindex:(0,f.computed)(()=>o.value?`-1`:`0`),variant:a},on:{keydown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),(t.shadowRoot?.querySelector(`[part="button"]`))?.click())}}});let _=d.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./styles/mixins/accessibility.css.cjs"),t=require("./styles/mixins/animation.css.cjs"),n=require("./styles/mixins/shape.css.cjs"),r=require("./styles/mixins/states.css.cjs"),i=require("./styles/mixins/theme.css.cjs"),a=require("./styles/mixins/variants.css.cjs"),o=require("./shared/prop-bundles.cjs"),s=require("./utils/link.cjs"),c=require("./button-group.cjs"),l=require("./inputs/shared/use-form-action.cjs"),u=require("./inputs/button/button.css.cjs");let d=require("@vielzeug/ore"),f=require("@vielzeug/ripple");var p=[`solid`,`flat`,`bordered`,`outline`,`ghost`,`text`,`frost`],m=`ore-button`;(0,d.define)(m,{formAssociated:!0,props:{...o.commonProps,effect:d.prop.string(),fullheight:d.prop.bool(!1),fullwidth:d.prop.bool(!1),href:d.prop.string(),iconOnly:d.prop.bool(!1),label:d.prop.string(),rel:d.prop.string(),target:d.prop.string(),type:d.prop.oneOf([`button`,`submit`,`reset`],`button`),variant:d.prop.oneOf(p,`solid`)},setup(e){let t=(0,d.getHost)(),n=(0,d.inject)(c.BUTTON_GROUP_CTX),r=(0,f.computed)(()=>n?.color.value??e.color.value),i=(0,f.computed)(()=>n?.size.value??e.size.value),a=(0,f.computed)(()=>n?.variant.value??e.variant.value),o=(0,f.computed)(()=>!!(e.disabled.value||e.loading.value)),{effectiveRel:u,isLink:p}=s.useLinkProps(e.href,e.rel,e.target),m=(0,d.useField)({disabled:o,toFormValue:()=>null,value:(0,f.computed)(()=>``)}),h=n=>{if(o.value){n.preventDefault();return}l.useFormAction(()=>p.value?null:m.internals.form,e.type,o,t)(n)};(0,d.bind)({attr:{"aria-busy":e.loading,"aria-disabled":o,"aria-label":e.label,color:r,effect:e.effect,role:(0,f.computed)(()=>t.getAttribute(`role`)??(p.value?`link`:`button`)),size:i,tabindex:(0,f.computed)(()=>o.value?`-1`:`0`),variant:a},on:{keydown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),(t.shadowRoot?.querySelector(`[part="button"]`))?.click())}}});let g=d.html`
       <span class="loader" part="loader" aria-label="Loading" ?hidden=${()=>!e.loading.value}></span>
       <slot name="prefix"></slot>
       <span class="content" part="content"><slot></slot></span>
       <slot name="suffix"></slot>
     `;return d.html`
-      ${()=>m.value?d.html`<a
-              part="button"
-              role="presentation"
-              tabindex="-1"
-              href="${e.href}"
-              :rel="${u}"
-              :target="${e.target}"
-              @click="${g}">
-              ${_}
-            </a>`:d.html`<span part="button" role="presentation" @click="${g}">${_}</span>`}
-    `},shadow:{delegatesFocus:!1},styles:[r.colorThemeMixin,e.coarsePointerMixin,e.reducedMotionMixin,t.roundedVariantMixin,r.forcedColorsMixin,t.sizeVariantMixin({lg:{fontSize:`var(--text-base)`,gap:`var(--size-2-5)`,height:`var(--size-12)`,iconSize:`var(--size-6)`,lineHeight:`var(--leading-relaxed)`,padding:`var(--size-2-5) var(--size-5)`},sm:{fontSize:`var(--text-sm)`,gap:`var(--size-1-5)`,height:`var(--size-8)`,iconSize:`var(--size-4)`,lineHeight:`var(--leading-tight)`,padding:`var(--size-1-5) var(--size-3)`}}),a.frostVariantMixin(`[part="button"]`),i.rainbowEffectMixin(`[part="button"]`),i.shineEffectMixin(`[part="button"]`),n.disabledLoadingMixin,u.default]}),exports.BUTTON_TAG=h,exports.BUTTON_VARIANTS=m;
+      ${()=>p.value?d.html`
+              <a
+                part="button"
+                role="presentation"
+                tabindex="-1"
+                href="${e.href}"
+                rel="${u}"
+                target="${e.target}"
+                @click="${h}">
+                ${g}
+              </a>
+            `:d.html`
+              <span part="button" role="presentation" @click="${h}">${g}</span>
+            `}
+    `},shadow:{delegatesFocus:!1},styles:[i.colorThemeMixin,e.coarsePointerMixin,e.reducedMotionMixin,n.roundedVariantMixin,i.forcedColorsMixin,n.sizeVariantMixin({lg:{fontSize:`var(--text-base)`,gap:`var(--size-2-5)`,height:`var(--size-12)`,iconSize:`var(--size-6)`,lineHeight:`var(--leading-relaxed)`,padding:`var(--size-2-5) var(--size-5)`},sm:{fontSize:`var(--text-sm)`,gap:`var(--size-1-5)`,height:`var(--size-8)`,iconSize:`var(--size-4)`,lineHeight:`var(--leading-tight)`,padding:`var(--size-1-5) var(--size-3)`}}),a.frostVariantMixin(`[part="button"]`),t.rainbowEffectMixin(`[part="button"]`),t.shineEffectMixin(`[part="button"]`),r.disabledLoadingMixin,u.default]}),exports.BUTTON_TAG=m,exports.BUTTON_VARIANTS=p;
 //# sourceMappingURL=button.cjs.map