@threadlabs/looma 0.28.4 → 0.28.6

package/vue/UiBadge.vue

@@ -1,7 +1,8 @@
-<!-- Generated by HTML Next 1.0.0-alpha.35 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.51 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
+import { computed, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'
+import { checkHydratedRoot, nativeAttrs, useReflectedProp } from './host'
 import { checkedProp, vPropValidity } from './props'
 
 defineOptions({ inheritAttrs: false })
@@ -105,53 +106,9 @@ void checkedProps.value
 watchSyncEffect(() => {
   void checkedProps.value
 })
-function nativeAttrs(attrs: Record<string, unknown>): Record<string, unknown> {
-  const names = Object.keys(attrs)
-  if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs
-  return Object.fromEntries(names.map((name) => [
-    Object.hasOwn(Object.prototype, name)
-      ? name === '__proto__' ? '__Proto__' : name[0]!.toUpperCase() + name.slice(1)
-      : name,
-    attrs[name],
-  ]))
-}
-const componentInstance = getCurrentInstance()
-function reflectedProp(
-  name: string,
-  kebab: string,
-  value: unknown,
-  fallback: string | undefined,
-  bound: boolean,
-  separator?: string,
-): string | undefined {
-  const incoming = componentInstance?.vnode.props
-  if (
-    !bound
-    && (incoming === null || incoming === undefined
-      || (!Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab)))
-  ) return fallback
-  if (value === null || value === undefined) return undefined
-  return Array.isArray(value) && separator !== undefined
-    ? value.join(separator)
-    : typeof value === 'object'
-    ? JSON.stringify(value)
-    : String(value)
-}
-const hydrationInstance = getCurrentInstance()
-
-const hydrationNode = hydrationInstance?.vnode.el
-if (
-  typeof window !== 'undefined' && hydrationNode != null
-  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('span'))
-) {
-  throw Object.assign(new Error('HR005: Server markup for <ui-badge> has an incompatible root.'), {
-    name: 'HtmlDiagnosticError',
-    diagnostic: Object.freeze({
-      code: 'HR005',
-      message: 'Server markup for <ui-badge> has an incompatible root.',
-    }),
-  })
-}
+const reflectedProp = useReflectedProp()
+
+checkHydratedRoot('span', 'ui-badge')
 
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
@@ -171,7 +128,7 @@ const hostState = computed(() =>
 
 <template>
   <span
-    data-component="ui-badge"
+    class="ui-badge"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-shape="reflectedProp('shape', 'shape', checkedProps.shape, undefined, false)"
@@ -246,536 +203,542 @@ const hostState = computed(() =>
   inherits: false;
 }
 
-[data-component~="ui-badge"] {
-  --_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. */
-  --_badge-border: color-mix(in srgb, var(--_badge-surface) 75%, var(--_badge-text) 25%);
-  /* --ui-badge-color derives a wash and an ink from one colour, between the tone and the explicit
-     surface, text, and border hooks. Each value is invalid, so the tone shows, while it is unset. The
-     mixes keep 4.5:1 text contrast for any colour, in a light theme or a dark one. */
-  --_ui-badge-color: var(--ui-badge-color);
-  --_badge-color-wash: color-mix(in oklab, var(--_ui-badge-color) 13%, var(--ui-surface-default));
-  --_badge-color-ink: color-mix(in oklab, var(--_ui-badge-color) 35%, var(--ui-text-primary));
-  --_badge-color-surface: var(--_badge-color-wash);
-  --_badge-color-border: color-mix(
-    in srgb,
-    var(--_badge-color-wash) 75%,
-    var(--_badge-color-ink) 25%
-  );
-  --_badge-color-text: var(--_badge-color-ink);
-  --_badge-outline-surface: var(
-    --ui-badge-surface,
-    var(--_badge-color-surface, var(--_badge-surface))
-  );
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--ui-space-1);
-  box-sizing: border-box;
-  min-inline-size: 0;
-  max-inline-size: 100%;
-  padding: var(--ui-badge-padding-block, var(--ui-space-0-5))
-    var(--ui-badge-padding-inline, var(--ui-space-2));
-  border: var(--ui-border-width) solid
-    var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
-  border-radius: var(--ui-radius-round);
-  background: var(--_badge-outline-surface);
-  color: var(--ui-badge-text, var(--_badge-color-text, var(--_badge-text)));
-  font-family: var(--ui-font-family-sans);
-  font-size: var(--ui-badge-font-size, var(--ui-font-size-sm));
-  font-weight: var(--ui-badge-font-weight, var(--ui-font-medium));
-  line-height: var(--ui-badge-line-height, var(--ui-line-height-tight));
-  white-space: nowrap;
-}
-
 /* 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 {
-  display: block;
-  min-inline-size: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.label:empty {
-  display: none;
-}
 
 /* Icon content has its own flex item so label ellipsis never clips its strokes. */
-.icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: none;
-}
-
-.icon:empty {
-  display: none;
-}
-
-.icon :slotted(svg) {
-  display: block;
-  inline-size: 1em;
-  block-size: 1em;
-  flex: none;
-}
 
 /* Ordinary icon-plus-text children keep inline ellipsis, with explicit glyph spacing. */
-.label :slotted(svg) {
-  inline-size: 1em;
-  block-size: 1em;
-  vertical-align: middle;
-  margin-inline-end: var(--ui-space-1);
-}
-
-.label: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"] {
-    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"]:has(.icon:not(:empty)),
-  [data-component~="ui-badge"]:has(.label svg) {
-    display: inline-flex;
-    text-box-trim: none;
-  }
-  .label: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"] {
-  box-sizing: border-box;
-  min-inline-size: 1rem;
-  min-block-size: var(--ui-badge-min-block-size, 1rem);
-  /* 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);
-}
+/* 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~="size=sm"] {
-  font-size: var(--ui-badge-font-size, var(--ui-font-size-2xs));
-  line-height: var(--ui-badge-line-height, 1);
-}
+/* 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~="tone=accent"] {
-  --_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));
-}
+/* 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~="tone=danger"] {
-  --_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));
-}
+/* A count can keep its containing control's contrasting ink instead of reversing it.
+   The faint fill preserves text contrast; a quiet boundary separates the count from its control. */
 
-[data-component~="ui-badge"][data-ui-badge-state~="tone=success"] {
-  --_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));
-}
+/* 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~="tone=warning"] {
-  --_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));
-}
+/* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
 
-[data-component~="ui-badge"][data-ui-badge-state~="tone=info"] {
-  --_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));
-}
+/* A visible glyph needs fixed geometry, unlike a content-sized pill or a hidden-label dot. */
 
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"] {
-  --_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));
-}
+/* 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. */
 
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"] {
-  --_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));
-}
+/* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
 
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"] {
-  --_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));
-}
+/* 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~="variant=subtle"][data-ui-badge-state~="tone=warning"] {
-  --_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));
-}
+/* A component that sets its display still honours the hidden attribute on its root. */
 
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"] {
-  --_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));
-}
+@scope (.ui-badge) {
+  :scope:where(:scope) {
+    --_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. */
+    --_badge-border: color-mix(in srgb, var(--_badge-surface) 75%, var(--_badge-text) 25%);
+    /* --ui-badge-color derives a wash and an ink from one colour, between the tone and the explicit
+       surface, text, and border hooks. Each value is invalid, so the tone shows, while it is unset. The
+       mixes keep 4.5:1 text contrast for any colour, in a light theme or a dark one. */
+    --_ui-badge-color: var(--ui-badge-color);
+    --_badge-color-wash: color-mix(in oklab, var(--_ui-badge-color) 13%, var(--ui-surface-default));
+    --_badge-color-ink: color-mix(in oklab, var(--_ui-badge-color) 35%, var(--ui-text-primary));
+    --_badge-color-surface: var(--_badge-color-wash);
+    --_badge-color-border: color-mix(
+      in srgb,
+      var(--_badge-color-wash) 75%,
+      var(--_badge-color-ink) 25%
+    );
+    --_badge-color-text: var(--_badge-color-ink);
+    --_badge-outline-surface: var(
+      --ui-badge-surface,
+      var(--_badge-color-surface, var(--_badge-surface))
+    );
 
-/* 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"] {
-  --_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));
-}
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--ui-space-1);
+    box-sizing: border-box;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    padding: var(--ui-badge-padding-block, var(--ui-space-0-5))
+      var(--ui-badge-padding-inline, var(--ui-space-2));
+    border: var(--ui-border-width) solid
+      var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
+    border-radius: var(--ui-radius-round);
+    background: var(--_badge-outline-surface);
+    color: var(--ui-badge-text, var(--_badge-color-text, var(--_badge-text)));
+    font-family: var(--ui-font-family-sans);
+    font-size: var(--ui-badge-font-size, var(--ui-font-size-sm));
+    font-weight: var(--ui-badge-font-weight, var(--ui-font-medium));
+    line-height: var(--ui-badge-line-height, var(--ui-line-height-tight));
+    white-space: nowrap;
+  }
+  .label {
+    display: block;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 
-/* 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"] {
-  --_badge-color-surface: color-mix(
-    in srgb,
-    color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) 88%,
-    transparent
-  );
-  --_badge-color-border: var(--_badge-color-surface);
-  --_badge-color-text: color-mix(in srgb, var(--_badge-color-ink) 85%, var(--ui-text-primary));
-  --_badge-outline-surface: var(
-    --ui-badge-surface,
-    var(--_badge-color-surface, color-mix(in srgb, var(--_badge-text) 88%, transparent))
-  );
-  border-color: var(
-    --ui-badge-border,
-    var(--_badge-color-border, color-mix(in srgb, var(--_badge-text) 88%, transparent))
-  );
-  color: var(
-    --ui-badge-text,
-    var(--_badge-color-text, color-mix(in srgb, var(--_badge-surface) 85%, var(--ui-text-primary)))
-  );
-  /* Paint each translucent layer once, including the border, without a bright double-painted ring. */
-  background-clip: padding-box;
-}
+  .label:empty {
+    display: none;
+  }
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+  }
 
-/* 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"] {
-  --_badge-color-surface: light-dark(
-    color-mix(
-      in srgb,
-      color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) var(
-        --ui-badge-circle-opacity,
-        66%
-      ),
-      transparent
-    ),
-    color-mix(
-      in srgb,
-      color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) var(
-        --ui-badge-circle-opacity,
-        56%
-      ),
-      transparent
-    )
-  );
-  --_badge-color-border: light-dark(
-    color-mix(
-      in srgb,
-      color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) 88%,
-      transparent
-    ),
-    color-mix(
-      in srgb,
-      color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) 44%,
-      transparent
-    )
-  );
-  --_badge-color-text: light-dark(
-    color-mix(in srgb, var(--_badge-color-ink) 65%, var(--ui-text-primary)),
-    color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-text-primary))
-  );
-  --_badge-count-surface: light-dark(
-    color-mix(in srgb, var(--_badge-text) var(--ui-badge-circle-opacity, 66%), transparent),
-    color-mix(in srgb, var(--_badge-text) var(--ui-badge-circle-opacity, 56%), transparent)
-  );
-  --_badge-outline-surface: var(
-    --ui-badge-surface,
-    var(--_badge-color-surface, var(--_badge-count-surface))
-  );
-  border-color: var(
-    --ui-badge-border,
-    var(
-      --_badge-color-border,
-      light-dark(
-        color-mix(in srgb, var(--_badge-text) 88%, transparent),
-        color-mix(in srgb, var(--_badge-text) 44%, transparent)
-      )
-    )
-  );
-  color: var(
-    --ui-badge-text,
-    var(
-      --_badge-color-text,
-      light-dark(
-        color-mix(in srgb, var(--_badge-surface) 65%, var(--ui-text-primary)),
-        var(--ui-text-primary)
-      )
-    )
-  );
-  box-shadow: 0 1px 1px light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.12));
-}
+  .icon:empty {
+    display: none;
+  }
 
-/* A count can keep its containing control's contrasting ink instead of reversing it.
-   The faint fill preserves text contrast; a quiet boundary separates the count from its control. */
-[data-component~="ui-badge"][data-ui-badge-state~="variant=overlay"] {
-  --_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, color-mix(in srgb, currentColor 20%, transparent));
-  box-shadow: none;
-}
+  .icon :slotted(svg) {
+    display: block;
+    inline-size: 1em;
+    block-size: 1em;
+    flex: none;
+  }
+  .label :slotted(svg) {
+    inline-size: 1em;
+    block-size: 1em;
+    vertical-align: middle;
+    margin-inline-end: var(--ui-space-1);
+  }
 
-/* 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"] {
-  color: var(--ui-badge-text, var(--_badge-color-text, var(--_badge-surface)));
-}
+  .label:has(svg) {
+    text-box-trim: none;
+  }
+  @supports (text-box-trim: trim-both) {
+    :scope:where(:scope) {
+      display: inline-block;
+      min-block-size: var(--ui-badge-min-block-size, 1.5rem);
+      text-align: center;
+      align-content: center;
+      text-box-trim: none;
+    }
+    :scope:where(:scope):is(:has(.icon:not(:empty))), :scope:where(:scope):is(:has(.label svg)) {
+      display: inline-flex;
+      text-box-trim: none;
+    }
+    .label: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~="variant=outline"] {
-  --_badge-surface: var(--ui-surface-default);
-  --_badge-border: var(--ui-border-strong);
-  --_badge-text: var(--ui-text-secondary);
-  /* An outline colour keeps the surface and draws its edge and text in the ink. */
-  --_badge-color-surface: initial;
-  --_badge-color-border: var(--_badge-color-ink);
-}
+  :scope:where(:scope):is([data-ui-badge-state~="size=xs"]) {
+    box-sizing: border-box;
+    min-inline-size: 1rem;
+    min-block-size: var(--ui-badge-min-block-size, 1rem);
+    /* 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~="variant=outline"][data-ui-badge-state~="tone=accent"] {
-  --_badge-border: var(--ui-accent-solid);
-  --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
-}
+  :scope:where(:scope):is([data-ui-badge-state~="size=sm"]) {
+    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~="variant=outline"][data-ui-badge-state~="tone=danger"] {
-  --_badge-border: var(--ui-danger-solid);
-  --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
-}
+  :scope:where(:scope):is([data-ui-badge-state~="tone=accent"]) {
+    --_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~="variant=outline"][data-ui-badge-state~="tone=success"] {
-  --_badge-border: var(--ui-success-solid);
-  --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
-}
+  :scope:where(:scope):is([data-ui-badge-state~="tone=danger"]) {
+    --_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~="variant=outline"][data-ui-badge-state~="tone=warning"] {
-  --_badge-border: var(--ui-warning-solid);
-  --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
-}
+  :scope:where(:scope):is([data-ui-badge-state~="tone=success"]) {
+    --_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~="variant=outline"][data-ui-badge-state~="tone=info"] {
-  --_badge-border: var(--ui-info-solid);
-  --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
-}
+  :scope:where(:scope):is([data-ui-badge-state~="tone=warning"]) {
+    --_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));
+  }
 
-/* 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"] {
-  --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-4) * 2));
-  display: inline-flex;
-  box-sizing: border-box;
-  flex: none;
-  inline-size: var(--_badge-square-size);
-  block-size: var(--_badge-square-size);
-  min-inline-size: var(--_badge-square-size);
-  min-block-size: var(--_badge-square-size);
-  padding: 0;
-  border-radius: var(--ui-radius-md);
-  text-box-trim: none;
-}
+  :scope:where(:scope):is([data-ui-badge-state~="tone=info"]) {
+    --_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~="shape=square"][data-ui-badge-state~="size=xs"] {
-  --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-3) * 2));
-}
+  :scope:where(:scope):is([data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"]) {
+    --_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~="shape=square"][data-ui-badge-state~="size=lg"] {
-  --_badge-square-size: var(
-    --ui-badge-square-size,
-    calc(var(--ui-space-4) * 2 + var(--ui-space-2))
-  );
-}
+  :scope:where(:scope):is([data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"]) {
+    --_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~="shape=square"] .label {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
+  :scope:where(:scope):is([data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"]) {
+    --_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~="shape=square"] .label :slotted(svg) {
-  margin-inline-end: 0;
-}
+  :scope:where(:scope):is([data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"]) {
+    --_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~="shape=square"] .label:empty {
-  display: none;
-}
+  :scope:where(:scope):is([data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"]) {
+    --_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));
+  }
+  :scope:where(:scope):is([data-ui-badge-state~="variant=solid"]) {
+    --_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));
+  }
+  :scope:where(:scope):is([data-ui-badge-state~="variant=inverse"]) {
+    --_badge-color-surface: color-mix(
+      in srgb,
+      color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) 88%,
+      transparent
+    );
+    --_badge-color-border: var(--_badge-color-surface);
+    --_badge-color-text: color-mix(in srgb, var(--_badge-color-ink) 85%, var(--ui-text-primary));
+    --_badge-outline-surface: var(
+      --ui-badge-surface,
+      var(--_badge-color-surface, color-mix(in srgb, var(--_badge-text) 88%, transparent))
+    );
+    border-color: var(
+      --ui-badge-border,
+      var(--_badge-color-border, color-mix(in srgb, var(--_badge-text) 88%, transparent))
+    );
+    color: var(
+      --ui-badge-text,
+      var(
+        --_badge-color-text,
+        color-mix(in srgb, var(--_badge-surface) 85%, var(--ui-text-primary))
+      )
+    );
+    /* Paint each translucent layer once, including the border, without a bright double-painted ring. */
+    background-clip: padding-box;
+  }
+  :scope:where(:scope):is([data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="shape=circle"]) {
+    --_badge-color-surface: light-dark(
+      color-mix(
+        in srgb,
+        color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) var(
+          --ui-badge-circle-opacity,
+          66%
+        ),
+        transparent
+      ),
+      color-mix(
+        in srgb,
+        color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) var(
+          --ui-badge-circle-opacity,
+          56%
+        ),
+        transparent
+      )
+    );
+    --_badge-color-border: light-dark(
+      color-mix(
+        in srgb,
+        color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) 88%,
+        transparent
+      ),
+      color-mix(
+        in srgb,
+        color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default)) 44%,
+        transparent
+      )
+    );
+    --_badge-color-text: light-dark(
+      color-mix(in srgb, var(--_badge-color-ink) 65%, var(--ui-text-primary)),
+      color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-text-primary))
+    );
+    --_badge-count-surface: light-dark(
+      color-mix(in srgb, var(--_badge-text) var(--ui-badge-circle-opacity, 66%), transparent),
+      color-mix(in srgb, var(--_badge-text) var(--ui-badge-circle-opacity, 56%), transparent)
+    );
+    --_badge-outline-surface: var(
+      --ui-badge-surface,
+      var(--_badge-color-surface, var(--_badge-count-surface))
+    );
+    border-color: var(
+      --ui-badge-border,
+      var(
+        --_badge-color-border,
+        light-dark(
+          color-mix(in srgb, var(--_badge-text) 88%, transparent),
+          color-mix(in srgb, var(--_badge-text) 44%, transparent)
+        )
+      )
+    );
+    color: var(
+      --ui-badge-text,
+      var(
+        --_badge-color-text,
+        light-dark(
+          color-mix(in srgb, var(--_badge-surface) 65%, var(--ui-text-primary)),
+          var(--ui-text-primary)
+        )
+      )
+    );
+    box-shadow: 0 1px 1px light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.12));
+  }
+  :scope:where(:scope):is([data-ui-badge-state~="variant=overlay"]) {
+    --_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, color-mix(in srgb, currentColor 20%, transparent));
+    box-shadow: none;
+  }
+  :scope:where(:scope):is([data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="tone=neutral"]) {
+    color: var(--ui-badge-text, var(--_badge-color-text, var(--_badge-surface)));
+  }
 
-/* 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"] {
-  --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-3) * 2));
-  display: inline-flex;
-  flex: none;
-  inline-size: var(--_badge-circle-size);
-  block-size: var(--_badge-circle-size);
-  min-inline-size: var(--_badge-circle-size);
-  min-block-size: var(--_badge-circle-size);
-  padding: 0;
-  border-radius: var(--ui-radius-round);
-  text-box-trim: none;
-}
+  :scope:where(:scope):is([data-ui-badge-state~="variant=outline"]) {
+    --_badge-surface: var(--ui-surface-default);
+    --_badge-border: var(--ui-border-strong);
+    --_badge-text: var(--ui-text-secondary);
+    /* An outline colour keeps the surface and draws its edge and text in the ink. */
+    --_badge-color-surface: initial;
+    --_badge-color-border: var(--_badge-color-ink);
+  }
 
-[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=sm"][data-ui-badge-state~="variant=overlay"] {
-  --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-4) + var(--ui-space-1)));
-}
+  :scope:where(:scope):is([data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"]) {
+    --_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~="shape=circle"][data-ui-badge-state~="size=xs"] {
-  --_badge-circle-size: var(--ui-badge-circle-size, var(--ui-space-4));
-}
+  :scope:where(:scope):is([data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"]) {
+    --_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~="shape=circle"][data-ui-badge-state~="size=lg"] {
-  --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-4) * 2));
-}
+  :scope:where(:scope):is([data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"]) {
+    --_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~="shape=circle"] .label {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
-  text-box-trim: none;
-}
+  :scope:where(:scope):is([data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"]) {
+    --_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~="shape=circle"] .label :slotted(svg) {
-  margin-inline-end: 0;
-}
+  :scope:where(:scope):is([data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"]) {
+    --_badge-border: var(--ui-info-solid);
+    --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
+  }
+  :scope:where(:scope):is([data-ui-badge-state~="shape=square"]) {
+    --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-4) * 2));
+    display: inline-flex;
+    box-sizing: border-box;
+    flex: none;
+    inline-size: var(--_badge-square-size);
+    block-size: var(--_badge-square-size);
+    min-inline-size: var(--_badge-square-size);
+    min-block-size: var(--_badge-square-size);
+    padding: 0;
+    border-radius: var(--ui-radius-md);
+    text-box-trim: none;
+  }
 
-[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label:empty {
-  display: none;
-}
+  :scope:where(:scope):is([data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=xs"]) {
+    --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-3) * 2));
+  }
 
-/* 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:not(:has(svg)),
-  [data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label:not(:has(svg)) {
-    display: block;
-    text-box-trim: trim-both;
-    text-box-edge: cap alphabetic;
-    overflow: visible;
+  :scope:where(:scope):is([data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=lg"]) {
+    --_badge-square-size: var(
+      --ui-badge-square-size,
+      calc(var(--ui-space-4) * 2 + var(--ui-space-2))
+    );
   }
-}
 
-/* 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"] {
-  position: relative;
-  box-sizing: border-box;
-  flex: none;
-  inline-size: var(--ui-badge-dot-size, var(--ui-space-2));
-  block-size: var(--ui-badge-dot-size, var(--ui-space-2));
-  min-inline-size: var(--ui-badge-dot-size, var(--ui-space-2));
-  min-block-size: var(--ui-badge-dot-size, var(--ui-space-2));
-  padding: 0;
-  border-radius: var(--ui-radius-round);
-  text-box-trim: none;
-}
+  :scope[data-ui-badge-state~="shape=square"] .label {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
 
-[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] .label {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
+  :scope[data-ui-badge-state~="shape=square"] .label :slotted(svg) {
+    margin-inline-end: 0;
+  }
 
-/* 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"] {
-  --_badge-point: var(--ui-badge-point, var(--ui-space-2));
-
-  position: relative;
-  isolation: isolate;
-  border-color: transparent;
-  border-radius: 0;
-  background: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
-  padding-inline-end: calc(var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point));
-  clip-path: polygon(
-    0 0,
-    calc(100% - var(--_badge-point)) 0,
-    100% 50%,
-    calc(100% - var(--_badge-point)) 100%,
-    0 100%
-  );
-}
+  :scope[data-ui-badge-state~="shape=square"] .label:empty {
+    display: none;
+  }
+  :scope:where(:scope):is([data-ui-badge-state~="shape=circle"]) {
+    --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-3) * 2));
+    display: inline-flex;
+    flex: none;
+    inline-size: var(--_badge-circle-size);
+    block-size: var(--_badge-circle-size);
+    min-inline-size: var(--_badge-circle-size);
+    min-block-size: var(--_badge-circle-size);
+    padding: 0;
+    border-radius: var(--ui-radius-round);
+    text-box-trim: none;
+  }
 
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"]::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  background: var(--_badge-outline-surface);
-  clip-path: polygon(
-    0 0,
-    calc(100% - var(--_badge-point)) 0,
-    100% 50%,
-    calc(100% - var(--_badge-point)) 100%,
-    0 100%
-  );
-  pointer-events: none;
-}
+  :scope:where(:scope):is([data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=sm"][data-ui-badge-state~="variant=overlay"]) {
+    --_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=tag"][data-ui-badge-state~="variant=inverse"] {
-  background: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-text)));
-}
+  :scope:where(:scope):is([data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=xs"]) {
+    --_badge-circle-size: var(--ui-badge-circle-size, var(--ui-space-4));
+  }
 
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"]: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%);
-}
+  :scope:where(:scope):is([data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=lg"]) {
+    --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-4) * 2));
+  }
 
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"]:dir(rtl)::before {
-  clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
-}
+  :scope[data-ui-badge-state~="shape=circle"] .label {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    text-box-trim: none;
+  }
 
-@media (forced-colors: active) {
-  [data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] {
-    forced-color-adjust: none;
-    border-color: CanvasText;
-    background: CanvasText;
+  :scope[data-ui-badge-state~="shape=circle"] .label :slotted(svg) {
+    margin-inline-end: 0;
   }
 
-  [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"] {
-    forced-color-adjust: none;
-    background: CanvasText;
-    color: CanvasText;
+  :scope[data-ui-badge-state~="shape=circle"] .label:empty {
+    display: none;
+  }
+  @supports (text-box-trim: trim-both) {
+    :scope[data-ui-badge-state~="shape=circle"] .label:not(:has(svg)),
+    :scope[data-ui-badge-state~="shape=square"] .label:not(:has(svg)) {
+      display: block;
+      text-box-trim: trim-both;
+      text-box-edge: cap alphabetic;
+      overflow: visible;
+    }
+  }
+  :scope:where(:scope):is([data-ui-badge-state~="shape=dot"]) {
+    position: relative;
+    box-sizing: border-box;
+    flex: none;
+    inline-size: var(--ui-badge-dot-size, var(--ui-space-2));
+    block-size: var(--ui-badge-dot-size, var(--ui-space-2));
+    min-inline-size: var(--ui-badge-dot-size, var(--ui-space-2));
+    min-block-size: var(--ui-badge-dot-size, var(--ui-space-2));
+    padding: 0;
+    border-radius: var(--ui-radius-round);
+    text-box-trim: none;
   }
 
-  [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"]::before {
-    background: Canvas;
+  :scope[data-ui-badge-state~="shape=dot"] .label {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  :scope:where(:scope):is([data-ui-badge-state~="shape=tag"]) {
+    --_badge-point: var(--ui-badge-point, var(--ui-space-2));
+
+    position: relative;
+    isolation: isolate;
+    border-color: transparent;
+    border-radius: 0;
+    background: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
+    padding-inline-end: calc(
+      var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point)
+    );
+    clip-path: polygon(
+      0 0,
+      calc(100% - var(--_badge-point)) 0,
+      100% 50%,
+      calc(100% - var(--_badge-point)) 100%,
+      0 100%
+    );
   }
-}
 
-/* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-badge"][hidden] {
-  display: none;
+  :scope:where(:scope):is([data-ui-badge-state~="shape=tag"])::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background: var(--_badge-outline-surface);
+    clip-path: polygon(
+      0 0,
+      calc(100% - var(--_badge-point)) 0,
+      100% 50%,
+      calc(100% - var(--_badge-point)) 100%,
+      0 100%
+    );
+    pointer-events: none;
+  }
+
+  :scope:where(:scope):is([data-ui-badge-state~="shape=tag"][data-ui-badge-state~="variant=inverse"]) {
+    background: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-text)));
+  }
+
+  :scope:where(:scope):is([data-ui-badge-state~="shape=tag"]: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%);
+  }
+
+  :scope:where(:scope):is([data-ui-badge-state~="shape=tag"]:dir(rtl))::before {
+    clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
+  }
+
+  @media (forced-colors: active) {
+    :scope:where(:scope):is([data-ui-badge-state~="shape=dot"]) {
+      forced-color-adjust: none;
+      border-color: CanvasText;
+      background: CanvasText;
+    }
+
+    :scope:where(:scope):is([data-ui-badge-state~="shape=tag"]) {
+      forced-color-adjust: none;
+      background: CanvasText;
+      color: CanvasText;
+    }
+
+    :scope:where(:scope):is([data-ui-badge-state~="shape=tag"])::before {
+      background: Canvas;
+    }
+  }
+  :scope:where(:scope):is([hidden]) {
+    display: none;
+  }
 }
 </style>