@threadlabs/looma 0.27.1 → 0.27.2

package/package.json

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

package/styles/ui-badge.css

@@ -282,7 +282,7 @@
     /* A count can keep its containing control's contrasting ink instead of reversing it.
        The faint fill is painted over that control; no second rim or shadow competes with it. */
     :scope[data-ui-badge-state~="variant=overlay"] {
-      --_badge-outline-surface: var(--ui-badge-surface, color-mix(in srgb, currentColor 10%, transparent));
+      --_badge-outline-surface: var(--ui-badge-surface, color-mix(in srgb, currentColor 6%, transparent));
       color: var(--ui-badge-text, inherit);
       border-color: var(--ui-badge-border, transparent);
       box-shadow: none;

package/vue/UiBadge.vue

@@ -540,7 +540,7 @@ const hostState = computed(() =>
 [data-component~="ui-badge"][data-ui-badge-state~="variant=overlay"] {
   --_badge-outline-surface: var(
     --ui-badge-surface,
-    color-mix(in srgb, currentColor 10%, transparent)
+    color-mix(in srgb, currentColor 6%, transparent)
   );
   color: var(--ui-badge-text, inherit);
   border-color: var(--ui-badge-border, transparent);

package/vue/chunks/UiBadge.js

@@ -181,6 +181,6 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-3a29482a"]]);
+}), [["__scopeId", "data-v-380f0aab"]]);
 //#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-3a29482a] {
+[data-component~="ui-badge"][data-v-380f0aab] {
   --_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-3a29482a] {
+.label[data-v-380f0aab] {
   display: block;
   min-inline-size: 0;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.label[data-v-3a29482a]:empty {
+.label[data-v-380f0aab]:empty {
   display: none;
 }
 
 /* Icon content has its own flex item so label ellipsis never clips its strokes. */
-.icon[data-v-3a29482a] {
+.icon[data-v-380f0aab] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: none;
 }
-.icon[data-v-3a29482a]:empty {
+.icon[data-v-380f0aab]:empty {
   display: none;
 }
-.icon svg[data-v-3a29482a-s] {
+.icon svg[data-v-380f0aab-s] {
   display: block;
   inline-size: 1em;
   block-size: 1em;
@@ -434,39 +434,39 @@ svg[data-v-abaeb064] {
 }
 
 /* Ordinary icon-plus-text children keep inline ellipsis, with explicit glyph spacing. */
-.label svg[data-v-3a29482a-s] {
+.label svg[data-v-380f0aab-s] {
   inline-size: 1em;
   block-size: 1em;
   vertical-align: middle;
   margin-inline-end: var(--ui-space-1);
 }
-.label[data-v-3a29482a]:has(svg) {
+.label[data-v-380f0aab]: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-3a29482a] {
+[data-component~="ui-badge"][data-v-380f0aab] {
     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-3a29482a]:has(.icon:not(:empty)),
-  [data-component~="ui-badge"][data-v-3a29482a]:has(.label svg) {
+[data-component~="ui-badge"][data-v-380f0aab]:has(.icon:not(:empty)),
+  [data-component~="ui-badge"][data-v-380f0aab]:has(.label svg) {
     display: inline-flex;
     text-box-trim: none;
 }
-.label[data-v-3a29482a]:not(:has(svg)) {
+.label[data-v-380f0aab]: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-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="size=xs"][data-v-380f0aab] {
   box-sizing: border-box;
   min-inline-size: 1rem;
   min-block-size: var(--ui-badge-min-block-size, 1rem);
@@ -476,56 +476,56 @@ svg[data-v-abaeb064] {
   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-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="size=sm"][data-v-380f0aab] {
   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-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-380f0aab] {
   --_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-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-380f0aab] {
   --_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-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-380f0aab] {
   --_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-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-380f0aab] {
   --_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-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-380f0aab] {
   --_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-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-380f0aab] {
   --_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-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-380f0aab] {
   --_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-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-380f0aab] {
   --_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-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-380f0aab] {
   --_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-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-380f0aab] {
   --_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));
@@ -533,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-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=solid"][data-v-380f0aab] {
   --_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));
@@ -541,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-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=inverse"][data-v-380f0aab] {
   --_badge-color-surface: color-mix(
     in srgb,
     color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) 88%,
@@ -567,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-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="shape=circle"][data-v-380f0aab] {
   --_badge-color-surface: light-dark(
     color-mix(
       in srgb,
@@ -635,10 +635,10 @@ svg[data-v-abaeb064] {
 
 /* A count can keep its containing control's contrasting ink instead of reversing it.
    The faint fill is painted over that control; no second rim or shadow competes with it. */
-[data-component~="ui-badge"][data-ui-badge-state~="variant=overlay"][data-v-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=overlay"][data-v-380f0aab] {
   --_badge-outline-surface: var(
     --ui-badge-surface,
-    color-mix(in srgb, currentColor 10%, transparent)
+    color-mix(in srgb, currentColor 6%, transparent)
   );
   color: var(--ui-badge-text, inherit);
   border-color: var(--ui-badge-border, transparent);
@@ -647,10 +647,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-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="tone=neutral"][data-v-380f0aab] {
   color: var(--ui-badge-text, var(--_badge-color-text, var(--_badge-surface)));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-380f0aab] {
   --_badge-surface: var(--ui-surface-default);
   --_badge-border: var(--ui-border-strong);
   --_badge-text: var(--ui-text-secondary);
@@ -658,29 +658,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-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-380f0aab] {
   --_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-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-380f0aab] {
   --_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-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-380f0aab] {
   --_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-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-380f0aab] {
   --_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-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-380f0aab] {
   --_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-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-v-380f0aab] {
   --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-4) * 2));
   display: inline-flex;
   box-sizing: border-box;
@@ -693,29 +693,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-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=xs"][data-v-380f0aab] {
   --_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-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=lg"][data-v-380f0aab] {
   --_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-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-380f0aab] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label svg[data-v-3a29482a-s] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label svg[data-v-380f0aab-s] {
   margin-inline-end: 0;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-3a29482a]:empty {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-380f0aab]: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-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-v-380f0aab] {
   --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-3) * 2));
   display: inline-flex;
   flex: none;
@@ -727,34 +727,34 @@ 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=sm"][data-ui-badge-state~="variant=overlay"][data-v-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=sm"][data-ui-badge-state~="variant=overlay"][data-v-380f0aab] {
   --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-4) + var(--ui-space-1)));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=xs"][data-v-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=xs"][data-v-380f0aab] {
   --_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-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=lg"][data-v-380f0aab] {
   --_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-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label[data-v-380f0aab] {
   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-3a29482a-s] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label svg[data-v-380f0aab-s] {
   margin-inline-end: 0;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label[data-v-3a29482a]:empty {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label[data-v-380f0aab]: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-3a29482a]:not(:has(svg)),
-  [data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-3a29482a]:not(:has(svg)) {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label[data-v-380f0aab]:not(:has(svg)),
+  [data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-380f0aab]:not(:has(svg)) {
     display: block;
     text-box-trim: trim-both;
     text-box-edge: cap alphabetic;
@@ -763,7 +763,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-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-380f0aab] {
   position: relative;
   box-sizing: border-box;
   flex: none;
@@ -775,7 +775,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-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] .label[data-v-380f0aab] {
   position: absolute;
   inline-size: 1px;
   block-size: 1px;
@@ -786,7 +786,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-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-380f0aab] {
   --_badge-point: var(--ui-badge-point, var(--ui-space-2));
 
   position: relative;
@@ -803,7 +803,7 @@ svg[data-v-abaeb064] {
     0 100%
   );
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-3a29482a]::before {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-380f0aab]::before {
   content: "";
   position: absolute;
   inset: 0;
@@ -818,37 +818,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-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-ui-badge-state~="variant=inverse"][data-v-380f0aab] {
   background: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-text)));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-3a29482a]:dir(rtl) {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-380f0aab]: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-3a29482a]:dir(rtl)::before {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-380f0aab]: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-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-380f0aab] {
     forced-color-adjust: none;
     border-color: CanvasText;
     background: CanvasText;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-3a29482a] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-380f0aab] {
     forced-color-adjust: none;
     background: CanvasText;
     color: CanvasText;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-3a29482a]::before {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-380f0aab]::before {
     background: Canvas;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-badge"][hidden][data-v-3a29482a] {
+[data-component~="ui-badge"][hidden][data-v-380f0aab] {
   display: none;
 }