@threadlabs/looma 0.26.13 → 0.26.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.26.13",
+  "version": "0.26.14",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-badge.css

@@ -155,7 +155,9 @@
       box-sizing: border-box;
       min-inline-size: 1rem;
       min-block-size: var(--ui-badge-min-block-size, 1rem);
-      padding: var(--ui-badge-padding-block, 0) var(--ui-badge-padding-inline, 0.125rem);
+      /* Compact text still needs room at both rounded edges. Fixed marks override this
+         padding below; ordinary text badges retain their larger spacing. */
+      padding: var(--ui-badge-padding-block, 0) var(--ui-badge-padding-inline, var(--ui-space-1));
       font-size: var(--ui-badge-font-size, var(--ui-font-size-2xs));
       line-height: var(--ui-badge-line-height, 1);
     }

package/vue/UiBadge.vue

@@ -359,7 +359,9 @@ const hostState = computed(() =>
   box-sizing: border-box;
   min-inline-size: 1rem;
   min-block-size: var(--ui-badge-min-block-size, 1rem);
-  padding: var(--ui-badge-padding-block, 0) var(--ui-badge-padding-inline, 0.125rem);
+  /* Compact text still needs room at both rounded edges. Fixed marks override this
+     padding below; ordinary text badges retain their larger spacing. */
+  padding: var(--ui-badge-padding-block, 0) var(--ui-badge-padding-inline, var(--ui-space-1));
   font-size: var(--ui-badge-font-size, var(--ui-font-size-2xs));
   line-height: var(--ui-badge-line-height, 1);
 }

package/vue/chunks/UiBadge.js

@@ -180,6 +180,6 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-57826cf9"]]);
+}), [["__scopeId", "data-v-491791b3"]]);
 //#endregion
 export { UiBadge_default as t };

package/vue/components.css

@@ -360,7 +360,7 @@ svg[data-v-abaeb064] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-badge"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-v-491791b3] {
   --_badge-surface: color-mix(in srgb, var(--ui-surface-subtle) 80%, var(--ui-surface-default));
   --_badge-text: var(--ui-text-secondary);
   /* Sit between the soft fill and its stronger theme ink. */
@@ -406,27 +406,27 @@ svg[data-v-abaeb064] {
 
 /* A constrained badge keeps its surface intact and ellipsizes only its label. The full
    text stays in the DOM for accessible names and consumers' selected values. */
-.label[data-v-57826cf9] {
+.label[data-v-491791b3] {
   display: block;
   min-inline-size: 0;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.label[data-v-57826cf9]:empty {
+.label[data-v-491791b3]:empty {
   display: none;
 }
 
 /* Icon content has its own flex item so label ellipsis never clips its strokes. */
-.icon[data-v-57826cf9] {
+.icon[data-v-491791b3] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: none;
 }
-.icon[data-v-57826cf9]:empty {
+.icon[data-v-491791b3]:empty {
   display: none;
 }
-.icon svg[data-v-57826cf9-s] {
+.icon svg[data-v-491791b3-s] {
   display: block;
   inline-size: 1em;
   block-size: 1em;
@@ -434,96 +434,98 @@ svg[data-v-abaeb064] {
 }
 
 /* Ordinary icon-plus-text children keep inline ellipsis, with explicit glyph spacing. */
-.label svg[data-v-57826cf9-s] {
+.label svg[data-v-491791b3-s] {
   inline-size: 1em;
   block-size: 1em;
   vertical-align: middle;
   margin-inline-end: var(--ui-space-1);
 }
-.label[data-v-57826cf9]:has(svg) {
+.label[data-v-491791b3]:has(svg) {
   text-box-trim: none;
 }
 
 /* Center the capital/baseline text box, while clipping only inline overflow for ellipsis.
    Vertical ink remains visible so trimming never cuts off ascenders or descenders. */
 @supports (text-box-trim: trim-both) {
-[data-component~="ui-badge"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-v-491791b3] {
     display: inline-block;
     min-block-size: var(--ui-badge-min-block-size, 1.5rem);
     text-align: center;
     align-content: center;
     text-box-trim: none;
 }
-[data-component~="ui-badge"][data-v-57826cf9]:has(.icon:not(:empty)),
-  [data-component~="ui-badge"][data-v-57826cf9]:has(.label svg) {
+[data-component~="ui-badge"][data-v-491791b3]:has(.icon:not(:empty)),
+  [data-component~="ui-badge"][data-v-491791b3]:has(.label svg) {
     display: inline-flex;
     text-box-trim: none;
 }
-.label[data-v-57826cf9]:not(:has(svg)) {
+.label[data-v-491791b3]:not(:has(svg)) {
     text-box-trim: trim-both;
     text-box-edge: cap alphabetic;
     overflow-x: clip;
     overflow-y: visible;
 }
 }
-[data-component~="ui-badge"][data-ui-badge-state~="size=xs"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="size=xs"][data-v-491791b3] {
   box-sizing: border-box;
   min-inline-size: 1rem;
   min-block-size: var(--ui-badge-min-block-size, 1rem);
-  padding: var(--ui-badge-padding-block, 0) var(--ui-badge-padding-inline, 0.125rem);
+  /* Compact text still needs room at both rounded edges. Fixed marks override this
+     padding below; ordinary text badges retain their larger spacing. */
+  padding: var(--ui-badge-padding-block, 0) var(--ui-badge-padding-inline, var(--ui-space-1));
   font-size: var(--ui-badge-font-size, var(--ui-font-size-2xs));
   line-height: var(--ui-badge-line-height, 1);
 }
-[data-component~="ui-badge"][data-ui-badge-state~="size=sm"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="size=sm"][data-v-491791b3] {
   font-size: var(--ui-badge-font-size, var(--ui-font-size-2xs));
   line-height: var(--ui-badge-line-height, 1);
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-491791b3] {
   --_badge-surface: var(--ui-accent-strong-surface, var(--ui-accent-solid));
   --_badge-border: var(--ui-accent-strong-surface, var(--ui-accent-solid));
   --_badge-text: var(--ui-accent-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-491791b3] {
   --_badge-surface: var(--ui-danger-strong-surface, var(--ui-danger-solid));
   --_badge-border: var(--ui-danger-strong-surface, var(--ui-danger-solid));
   --_badge-text: var(--ui-danger-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-491791b3] {
   --_badge-surface: var(--ui-success-strong-surface, var(--ui-success-solid));
   --_badge-border: var(--ui-success-strong-surface, var(--ui-success-solid));
   --_badge-text: var(--ui-success-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-491791b3] {
   --_badge-surface: var(--ui-warning-strong-surface, var(--ui-warning-solid));
   --_badge-border: var(--ui-warning-strong-surface, var(--ui-warning-solid));
   --_badge-text: var(--ui-warning-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-491791b3] {
   --_badge-surface: var(--ui-info-strong-surface, var(--ui-info-solid));
   --_badge-border: var(--ui-info-strong-surface, var(--ui-info-solid));
   --_badge-text: var(--ui-info-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-491791b3] {
   --_badge-surface: color-mix(in srgb, var(--ui-accent-solid) 19%, var(--ui-surface-default));
   --_badge-border: color-mix(in srgb, var(--ui-accent-solid) 25%, var(--ui-surface-default));
   --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-491791b3] {
   --_badge-surface: color-mix(in srgb, var(--ui-danger-solid) 19%, var(--ui-surface-default));
   --_badge-border: color-mix(in srgb, var(--ui-danger-solid) 25%, var(--ui-surface-default));
   --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-491791b3] {
   --_badge-surface: color-mix(in srgb, var(--ui-success-solid) 19%, var(--ui-surface-default));
   --_badge-border: color-mix(in srgb, var(--ui-success-solid) 25%, var(--ui-surface-default));
   --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-491791b3] {
   --_badge-surface: color-mix(in srgb, var(--ui-warning-solid) 19%, var(--ui-surface-default));
   --_badge-border: color-mix(in srgb, var(--ui-warning-solid) 25%, var(--ui-surface-default));
   --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-491791b3] {
   --_badge-surface: color-mix(in srgb, var(--ui-info-solid) 19%, var(--ui-surface-default));
   --_badge-border: color-mix(in srgb, var(--ui-info-solid) 25%, var(--ui-surface-default));
   --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
@@ -531,7 +533,7 @@ svg[data-v-abaeb064] {
 
 /* A solid colour fills with the ink. Its text is the page surface, mixed at 0% only so that it too is
    invalid while the hook is unset. */
-[data-component~="ui-badge"][data-ui-badge-state~="variant=solid"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=solid"][data-v-491791b3] {
   --_badge-color-surface: var(--_badge-color-ink);
   --_badge-color-border: var(--_badge-color-ink);
   --_badge-color-text: color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default));
@@ -539,7 +541,7 @@ svg[data-v-abaeb064] {
 
 /* A translucent inverse surface picks up its filled control's tone. Deepen the tone ink
    toward the theme text to retain contrast against that composed surface. */
-[data-component~="ui-badge"][data-ui-badge-state~="variant=inverse"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=inverse"][data-v-491791b3] {
   --_badge-color-surface: color-mix(
     in srgb,
     color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) 88%,
@@ -565,7 +567,7 @@ svg[data-v-abaeb064] {
 
 /* A circular count has a tone-tinted surface, a separate lighter rim and readable tone ink.
    Dark controls retain a shaded surface and theme ink with a quieter rim. */
-[data-component~="ui-badge"][data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="shape=circle"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="shape=circle"][data-v-491791b3] {
   --_badge-color-surface: light-dark(
     color-mix(
       in srgb,
@@ -633,10 +635,10 @@ svg[data-v-abaeb064] {
 
 /* Neutral reverses a subtle surface/ink pair rather than a strong tone. Keep its original
    surface ink: moving it toward dark-theme primary text would reduce overlay contrast. */
-[data-component~="ui-badge"][data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="tone=neutral"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="tone=neutral"][data-v-491791b3] {
   color: var(--ui-badge-text, var(--_badge-color-text, var(--_badge-surface)));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-491791b3] {
   --_badge-surface: var(--ui-surface-default);
   --_badge-border: var(--ui-border-strong);
   --_badge-text: var(--ui-text-secondary);
@@ -644,29 +646,29 @@ svg[data-v-abaeb064] {
   --_badge-color-surface: initial;
   --_badge-color-border: var(--_badge-color-ink);
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-491791b3] {
   --_badge-border: var(--ui-accent-solid);
   --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-491791b3] {
   --_badge-border: var(--ui-danger-solid);
   --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-491791b3] {
   --_badge-border: var(--ui-success-solid);
   --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-491791b3] {
   --_badge-border: var(--ui-warning-solid);
   --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-491791b3] {
   --_badge-border: var(--ui-info-solid);
   --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
 }
 
 /* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
-[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-v-491791b3] {
   --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-4) * 2));
   display: inline-flex;
   box-sizing: border-box;
@@ -679,29 +681,29 @@ svg[data-v-abaeb064] {
   border-radius: var(--ui-radius-md);
   text-box-trim: none;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=xs"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=xs"][data-v-491791b3] {
   --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-3) * 2));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=lg"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=lg"][data-v-491791b3] {
   --_badge-square-size: var(
     --ui-badge-square-size,
     calc(var(--ui-space-4) * 2 + var(--ui-space-2))
   );
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-491791b3] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label svg[data-v-57826cf9-s] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label svg[data-v-491791b3-s] {
   margin-inline-end: 0;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-57826cf9]:empty {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-491791b3]:empty {
   display: none;
 }
 
 /* A visible glyph needs fixed geometry, unlike a content-sized pill or a hidden-label dot. */
-[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-v-491791b3] {
   --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-3) * 2));
   display: inline-flex;
   flex: none;
@@ -713,31 +715,31 @@ svg[data-v-abaeb064] {
   border-radius: var(--ui-radius-round);
   text-box-trim: none;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=xs"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=xs"][data-v-491791b3] {
   --_badge-circle-size: var(--ui-badge-circle-size, var(--ui-space-4));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=lg"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=lg"][data-v-491791b3] {
   --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-4) * 2));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label[data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label[data-v-491791b3] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   line-height: 1;
   text-box-trim: none;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label svg[data-v-57826cf9-s] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label svg[data-v-491791b3-s] {
   margin-inline-end: 0;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label[data-v-57826cf9]:empty {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label[data-v-491791b3]:empty {
   display: none;
 }
 
 /* Center capital and numeral ink, rather than the font's ascent/descent line box.
    Icon labels retain flex geometry; untrimmed browsers keep that fallback too. */
 @supports (text-box-trim: trim-both) {
-[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label[data-v-57826cf9]:not(:has(svg)),
-  [data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-57826cf9]:not(:has(svg)) {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label[data-v-491791b3]:not(:has(svg)),
+  [data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-491791b3]:not(:has(svg)) {
     display: block;
     text-box-trim: trim-both;
     text-box-edge: cap alphabetic;
@@ -746,7 +748,7 @@ svg[data-v-abaeb064] {
 }
 
 /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
-[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-491791b3] {
   position: relative;
   box-sizing: border-box;
   flex: none;
@@ -758,7 +760,7 @@ svg[data-v-abaeb064] {
   border-radius: var(--ui-radius-round);
   text-box-trim: none;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] .label[data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] .label[data-v-491791b3] {
   position: absolute;
   inline-size: 1px;
   block-size: 1px;
@@ -769,7 +771,7 @@ svg[data-v-abaeb064] {
 
 /* The clipped point needs an inset surface over an outer border-colour shape: a native border
    has no diagonal edge to follow. Keep this edge for every tag variant. */
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-491791b3] {
   --_badge-point: var(--ui-badge-point, var(--ui-space-2));
 
   position: relative;
@@ -786,7 +788,7 @@ svg[data-v-abaeb064] {
     0 100%
   );
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-57826cf9]::before {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-491791b3]::before {
   content: "";
   position: absolute;
   inset: 0;
@@ -801,37 +803,37 @@ svg[data-v-abaeb064] {
   );
   pointer-events: none;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-ui-badge-state~="variant=inverse"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-ui-badge-state~="variant=inverse"][data-v-491791b3] {
   background: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-text)));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-57826cf9]:dir(rtl) {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-491791b3]:dir(rtl) {
   padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
   padding-inline-start: calc(
     var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point)
   );
   clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-57826cf9]:dir(rtl)::before {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-491791b3]:dir(rtl)::before {
   clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
 }
 @media (forced-colors: active) {
-[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-491791b3] {
     forced-color-adjust: none;
     border-color: CanvasText;
     background: CanvasText;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-57826cf9] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-491791b3] {
     forced-color-adjust: none;
     background: CanvasText;
     color: CanvasText;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-57826cf9]::before {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-491791b3]::before {
     background: Canvas;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-badge"][hidden][data-v-57826cf9] {
+[data-component~="ui-badge"][hidden][data-v-491791b3] {
   display: none;
 }