@threadlabs/looma 0.27.0 → 0.27.1

package/package.json

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

package/styles/ui-badge.css

@@ -279,6 +279,15 @@
       box-shadow: 0 1px 1px light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.12));
     }
 
+    /* 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));
+      color: var(--ui-badge-text, inherit);
+      border-color: var(--ui-badge-border, transparent);
+      box-shadow: none;
+    }
+
     /* 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. */
     :scope[data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="tone=neutral"] {
@@ -366,6 +375,10 @@
       text-box-trim: none;
     }
 
+    :scope[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[data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=xs"] {
       --_badge-circle-size: var(--ui-badge-circle-size, var(--ui-space-4));
     }
@@ -519,6 +532,9 @@
     /* 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. */
 
+    /* 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. */
+
     /* 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. */
 

package/vanilla/UiBadge.d.ts

@@ -9,7 +9,7 @@ export interface UiBadgeProps {
   shape?: "pill" | "tag" | "dot" | "square" | "circle" | null;
   size?: "xs" | "sm" | "md" | "lg" | null;
   tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger" | null;
-  variant?: "solid" | "subtle" | "outline" | "inverse" | null;
+  variant?: "solid" | "subtle" | "outline" | "inverse" | "overlay" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiBadge.js

@@ -7,7 +7,7 @@ const T1 = ["",[]];
 const T2 = ["",[]];
 let P0, P1, P2;
 const S = { n: [], t: [], f: import.meta.url, g: "ui-badge" };
-const D = { props: { "shape": { "required":false,"values":["pill","tag","dot","square","circle"],"default":"pill", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "size": { "required":false,"values":["xs","sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "tone": { "required":false,"values":["neutral","accent","info","success","warning","danger"],"default":"neutral", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "variant": { "required":false,"values":["solid","subtle","outline","inverse"],"default":"subtle", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
+const D = { props: { "shape": { "required":false,"values":["pill","tag","dot","square","circle"],"default":"pill", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "size": { "required":false,"values":["xs","sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "tone": { "required":false,"values":["neutral","accent","info","success","warning","danger"],"default":"neutral", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "variant": { "required":false,"values":["solid","subtle","outline","inverse","overlay"],"default":"subtle", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
 
 export function createUiBadge(options = {}, html) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vue/UiBadge.d.ts

@@ -19,7 +19,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
     variant: {
-        type: PropType<"solid" | "subtle" | "outline" | "inverse" | null>;
+        type: PropType<"solid" | "subtle" | "outline" | "inverse" | "overlay" | null>;
         default: string;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -36,14 +36,14 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
     variant: {
-        type: PropType<"solid" | "subtle" | "outline" | "inverse" | null>;
+        type: PropType<"solid" | "subtle" | "outline" | "inverse" | "overlay" | null>;
         default: string;
     };
 }>> & Readonly<{}>, {
     shape: "circle" | "dot" | "tag" | "square" | "pill" | null;
     size: "xs" | "sm" | "md" | "lg" | null;
     tone: "info" | "neutral" | "accent" | "success" | "warning" | "danger" | null;
-    variant: "solid" | "subtle" | "outline" | "inverse" | null;
+    variant: "solid" | "subtle" | "outline" | "inverse" | "overlay" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiBadge.vue

@@ -22,7 +22,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'size' },
       description:
-        'Scale. xs is compact; sm keeps the usual badge geometry with compact text, fitting short counts such as 99+ inside a 24px circle. md is the usual text\n      badge; lg adds room to fixed marks while retaining the usual text size. A square is 24px at xs, 32px at sm and md, and 40px at lg. A circle is 16px at xs,\n      24px at sm and md, and 32px at lg.',
+        'Scale. xs is compact; sm keeps the usual badge geometry with compact text, fitting short counts such as 99+ inside a 24px circle. md is the usual text\n      badge; lg adds room to fixed marks while retaining the usual text size. A square is 24px at xs, 32px at sm and md, and 40px at lg. A circle is 16px at xs,\n      24px at sm and md, and 32px at lg. A small overlay circle is 20px.',
       values: ['xs', 'sm', 'md', 'lg'],
       default: 'md',
     },
@@ -40,8 +40,8 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'variant' },
       description:
-        'Emphasis. subtle sets toned text over a soft wash; solid fills with the tone and uses contrasting text; outline keeps the surface with a toned edge.\n      inverse uses a translucent contrasting surface and toned ink for a count or label on a filled control of that tone. Neutral looks the same in solid and\n      subtle. When space is constrained, the label truncates with an ellipsis while its full text remains available.',
-      values: ['solid', 'subtle', 'outline', 'inverse'],
+        'Emphasis. subtle sets toned text over a soft wash; solid fills with the tone and uses contrasting text; outline keeps the surface with a toned edge.\n      inverse uses a translucent contrasting surface and toned ink for a count or label on a filled control of that tone. Neutral looks the same in solid and\n      subtle. overlay inherits the containing filled control\'s text colour on a faint translucent fill, without a visible rim or shadow. Its small circle is\n      20px. When space is constrained, the label truncates with an ellipsis while its full text remains available.',
+      values: ['solid', 'subtle', 'outline', 'inverse', 'overlay'],
       default: 'subtle',
     },
   },
@@ -59,7 +59,9 @@ const props = defineProps({
     default: 'neutral',
   },
   variant: {
-    type: null as unknown as PropType<'solid' | 'subtle' | 'outline' | 'inverse' | null>,
+    type: null as unknown as PropType<
+      'solid' | 'subtle' | 'outline' | 'inverse' | 'overlay' | null
+    >,
     default: 'subtle',
   },
 })
@@ -91,13 +93,13 @@ const checkedProps = computed(() => ({
     'tone',
     acceptedProps,
   ) as 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger',
-  variant: checkedProp<'solid' | 'subtle' | 'outline' | 'inverse'>(
+  variant: checkedProp<'solid' | 'subtle' | 'outline' | 'inverse' | 'overlay'>(
     props['variant'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'variant',
     acceptedProps,
-  ) as 'solid' | 'subtle' | 'outline' | 'inverse',
+  ) as 'solid' | 'subtle' | 'outline' | 'inverse' | 'overlay',
 }))
 void checkedProps.value
 watchSyncEffect(() => {
@@ -533,6 +535,18 @@ const hostState = computed(() =>
   box-shadow: 0 1px 1px light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.12));
 }
 
+/* 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"] {
+  --_badge-outline-surface: var(
+    --ui-badge-surface,
+    color-mix(in srgb, currentColor 10%, transparent)
+  );
+  color: var(--ui-badge-text, inherit);
+  border-color: var(--ui-badge-border, transparent);
+  box-shadow: none;
+}
+
 /* 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"] {
@@ -627,6 +641,10 @@ const hostState = computed(() =>
   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"] {
+  --_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"] {
   --_badge-circle-size: var(--ui-badge-circle-size, var(--ui-space-4));
 }

package/vue/chunks/UiBadge.js

@@ -63,7 +63,7 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 				},
 				required: false,
 				target: { attribute: "size" },
-				description: "Scale. xs is compact; sm keeps the usual badge geometry with compact text, fitting short counts such as 99+ inside a 24px circle. md is the usual text\n      badge; lg adds room to fixed marks while retaining the usual text size. A square is 24px at xs, 32px at sm and md, and 40px at lg. A circle is 16px at xs,\n      24px at sm and md, and 32px at lg.",
+				description: "Scale. xs is compact; sm keeps the usual badge geometry with compact text, fitting short counts such as 99+ inside a 24px circle. md is the usual text\n      badge; lg adds room to fixed marks while retaining the usual text size. A square is 24px at xs, 32px at sm and md, and 40px at lg. A circle is 16px at xs,\n      24px at sm and md, and 32px at lg. A small overlay circle is 20px.",
 				values: [
 					"xs",
 					"sm",
@@ -97,12 +97,13 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 				},
 				required: false,
 				target: { attribute: "variant" },
-				description: "Emphasis. subtle sets toned text over a soft wash; solid fills with the tone and uses contrasting text; outline keeps the surface with a toned edge.\n      inverse uses a translucent contrasting surface and toned ink for a count or label on a filled control of that tone. Neutral looks the same in solid and\n      subtle. When space is constrained, the label truncates with an ellipsis while its full text remains available.",
+				description: "Emphasis. subtle sets toned text over a soft wash; solid fills with the tone and uses contrasting text; outline keeps the surface with a toned edge.\n      inverse uses a translucent contrasting surface and toned ink for a count or label on a filled control of that tone. Neutral looks the same in solid and\n      subtle. overlay inherits the containing filled control's text colour on a faint translucent fill, without a visible rim or shadow. Its small circle is\n      20px. When space is constrained, the label truncates with an ellipsis while its full text remains available.",
 				values: [
 					"solid",
 					"subtle",
 					"outline",
-					"inverse"
+					"inverse",
+					"overlay"
 				],
 				default: "subtle"
 			}
@@ -180,6 +181,6 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-491791b3"]]);
+}), [["__scopeId", "data-v-3a29482a"]]);
 //#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-491791b3] {
+[data-component~="ui-badge"][data-v-3a29482a] {
   --_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-491791b3] {
+.label[data-v-3a29482a] {
   display: block;
   min-inline-size: 0;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.label[data-v-491791b3]:empty {
+.label[data-v-3a29482a]:empty {
   display: none;
 }
 
 /* Icon content has its own flex item so label ellipsis never clips its strokes. */
-.icon[data-v-491791b3] {
+.icon[data-v-3a29482a] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: none;
 }
-.icon[data-v-491791b3]:empty {
+.icon[data-v-3a29482a]:empty {
   display: none;
 }
-.icon svg[data-v-491791b3-s] {
+.icon svg[data-v-3a29482a-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-491791b3-s] {
+.label svg[data-v-3a29482a-s] {
   inline-size: 1em;
   block-size: 1em;
   vertical-align: middle;
   margin-inline-end: var(--ui-space-1);
 }
-.label[data-v-491791b3]:has(svg) {
+.label[data-v-3a29482a]: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-491791b3] {
+[data-component~="ui-badge"][data-v-3a29482a] {
     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-491791b3]:has(.icon:not(:empty)),
-  [data-component~="ui-badge"][data-v-491791b3]:has(.label svg) {
+[data-component~="ui-badge"][data-v-3a29482a]:has(.icon:not(:empty)),
+  [data-component~="ui-badge"][data-v-3a29482a]:has(.label svg) {
     display: inline-flex;
     text-box-trim: none;
 }
-.label[data-v-491791b3]:not(:has(svg)) {
+.label[data-v-3a29482a]: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-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="size=xs"][data-v-3a29482a] {
   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-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="size=sm"][data-v-3a29482a] {
   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-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-3a29482a] {
   --_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-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-3a29482a] {
   --_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-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-3a29482a] {
   --_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-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-3a29482a] {
   --_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-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-3a29482a] {
   --_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-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-3a29482a] {
   --_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-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-3a29482a] {
   --_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-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-3a29482a] {
   --_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-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-3a29482a] {
   --_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-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-3a29482a] {
   --_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-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=solid"][data-v-3a29482a] {
   --_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-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=inverse"][data-v-3a29482a] {
   --_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-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="shape=circle"][data-v-3a29482a] {
   --_badge-color-surface: light-dark(
     color-mix(
       in srgb,
@@ -633,12 +633,24 @@ svg[data-v-abaeb064] {
   box-shadow: 0 1px 1px light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.12));
 }
 
+/* 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] {
+  --_badge-outline-surface: var(
+    --ui-badge-surface,
+    color-mix(in srgb, currentColor 10%, transparent)
+  );
+  color: var(--ui-badge-text, inherit);
+  border-color: var(--ui-badge-border, transparent);
+  box-shadow: none;
+}
+
 /* 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-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="tone=neutral"][data-v-3a29482a] {
   color: var(--ui-badge-text, var(--_badge-color-text, var(--_badge-surface)));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-3a29482a] {
   --_badge-surface: var(--ui-surface-default);
   --_badge-border: var(--ui-border-strong);
   --_badge-text: var(--ui-text-secondary);
@@ -646,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-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-3a29482a] {
   --_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-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-3a29482a] {
   --_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-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-3a29482a] {
   --_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-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-3a29482a] {
   --_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-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-3a29482a] {
   --_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-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-v-3a29482a] {
   --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-4) * 2));
   display: inline-flex;
   box-sizing: border-box;
@@ -681,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-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=xs"][data-v-3a29482a] {
   --_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-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=lg"][data-v-3a29482a] {
   --_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-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-3a29482a] {
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label svg[data-v-491791b3-s] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label svg[data-v-3a29482a-s] {
   margin-inline-end: 0;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-491791b3]:empty {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-3a29482a]: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-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-v-3a29482a] {
   --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-3) * 2));
   display: inline-flex;
   flex: none;
@@ -715,31 +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=xs"][data-v-491791b3] {
+[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] {
+  --_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] {
   --_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-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"][data-ui-badge-state~="size=lg"][data-v-3a29482a] {
   --_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-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label[data-v-3a29482a] {
   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-491791b3-s] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label svg[data-v-3a29482a-s] {
   margin-inline-end: 0;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label[data-v-491791b3]:empty {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=circle"] .label[data-v-3a29482a]: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-491791b3]:not(:has(svg)),
-  [data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-491791b3]:not(:has(svg)) {
+[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)) {
     display: block;
     text-box-trim: trim-both;
     text-box-edge: cap alphabetic;
@@ -748,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-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-3a29482a] {
   position: relative;
   box-sizing: border-box;
   flex: none;
@@ -760,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-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] .label[data-v-3a29482a] {
   position: absolute;
   inline-size: 1px;
   block-size: 1px;
@@ -771,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-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-3a29482a] {
   --_badge-point: var(--ui-badge-point, var(--ui-space-2));
 
   position: relative;
@@ -788,7 +803,7 @@ svg[data-v-abaeb064] {
     0 100%
   );
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-491791b3]::before {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-3a29482a]::before {
   content: "";
   position: absolute;
   inset: 0;
@@ -803,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-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-ui-badge-state~="variant=inverse"][data-v-3a29482a] {
   background: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-text)));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-491791b3]:dir(rtl) {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-3a29482a]: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-491791b3]:dir(rtl)::before {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-3a29482a]: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-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-3a29482a] {
     forced-color-adjust: none;
     border-color: CanvasText;
     background: CanvasText;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-491791b3] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-3a29482a] {
     forced-color-adjust: none;
     background: CanvasText;
     color: CanvasText;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-491791b3]::before {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-3a29482a]::before {
     background: Canvas;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-badge"][hidden][data-v-491791b3] {
+[data-component~="ui-badge"][hidden][data-v-3a29482a] {
   display: none;
 }