@threadlabs/looma 0.27.0 → 0.27.2

package/components/ui-badge/ui-badge.html

@@ -1,9 +1,10 @@
 <template component="ui-badge">
   <defs>
-    <prop name="variant" type="keyword" values="solid, subtle, outline, inverse" default="subtle"
+    <prop name="variant" type="keyword" values="solid, subtle, outline, inverse, overlay" default="subtle"
     >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.
       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
-      subtle. When space is constrained, the label truncates with an ellipsis while its full text remains available.</prop>
+      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
+      20px. When space is constrained, the label truncates with an ellipsis while its full text remains available.</prop>
     <prop name="tone" type="keyword" values="neutral, accent, info, success, warning, danger" default="neutral"
     >Which colour the badge speaks in. neutral is a quiet grey for plain labels; accent draws the eye in the accent colour; info, success, warning, and danger
       mark a status, so match the tone to what the badge says. For a category rather than a status, set the --ui-badge-color hook on the badge instead: any CSS
@@ -16,7 +17,7 @@
     <prop name="size" type="keyword" values="xs, sm, md, lg" default="md"
     >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
       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,
-      24px at sm and md, and 32px at lg.</prop>
+      24px at sm and md, and 32px at lg. A small overlay circle is 20px.</prop>
   </defs>
   <span>
     <span class="icon" aria-hidden="true"><slot name="icon"></slot></span>
@@ -315,6 +316,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. */
+    :host([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, 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. */
     :host([variant="inverse"][tone="neutral"]) {
@@ -406,6 +416,10 @@
       text-box-trim: none;
     }
 
+    :host([shape="circle"][size="sm"][variant="overlay"]) {
+      --_badge-circle-size: var(--ui-badge-circle-size, calc(var(--ui-space-4) + var(--ui-space-1)));
+    }
+
     :host([shape="circle"][size="xs"]) {
       --_badge-circle-size: var(--ui-badge-circle-size, var(--ui-space-4));
     }