@threadlabs/looma 0.27.3 → 0.27.4

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

@@ -3,7 +3,7 @@
     <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. overlay inherits the containing filled control's text colour on a faint translucent fill, without a visible rim or shadow. Its small circle is
+      subtle. overlay inherits the containing filled control's text colour on a faint translucent fill, with a quiet single-pixel boundary and no 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
@@ -317,11 +317,11 @@
     }
 
     /* 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. */
+       The faint fill preserves text contrast; a quiet boundary separates the count from its control. */
     :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);
+      border-color: var(--ui-badge-border, color-mix(in srgb, currentColor 20%, transparent));
       box-shadow: none;
     }