@threadlabs/looma 0.23.4 → 0.23.5

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

@@ -7,17 +7,22 @@
     >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
       colour, which overrides the tone.</prop>
-    <prop name="shape" type="keyword" values="pill, tag" default="pill"
-    >Silhouette. pill is rounded at both ends; tag is a label: flat at the start and coming to a point at the end, for a tag or a chosen chip.</prop>
+    <prop name="shape" type="keyword" values="pill, tag, dot" default="pill"
+    >Silhouette. pill is rounded at both ends; tag is a pointed label. dot is a compact circular signal with visually hidden text: include a state label, or set
+      aria-hidden when the surrounding control already names that state.</prop>
     <prop name="size" type="keyword" values="xs, md" default="md">Scale. xs is a compact count beside small controls; md is the usual text badge.</prop>
   </defs>
-  <span><slot></slot></span>
+  <span><span class="label"><slot></slot></span></span>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */
     @property --ui-badge-border {
       syntax: "*";
       inherits: false;
     }
+    @property --ui-badge-dot-size {
+      syntax: "*";
+      inherits: false;
+    }
     @property --ui-badge-color {
       syntax: "*";
       inherits: false;
@@ -216,6 +221,29 @@
       --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
     }
 
+    /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
+    :host-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;
+    }
+
+    :host-state([shape="dot"]) .label {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+
     /* 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. */
     :host-state([shape="tag"]) {
@@ -251,6 +279,12 @@
     }
 
     @media (forced-colors: active) {
+      :host-state([shape="dot"]) {
+        forced-color-adjust: none;
+        border-color: CanvasText;
+        background: CanvasText;
+      }
+
       :host-state([shape="tag"]) {
         forced-color-adjust: none;
         background: CanvasText;

package/components/ui-list-item/ui-list-item.html

@@ -6,6 +6,9 @@
     <prop name="current" type="boolean" default="false"
     >Marks the item as the current one, such as the site you are in: it takes the selected surface and aria-current="true", which assistive technology
       announces. Set it on one item at a time.</prop>
+    <prop name="highlighted" type="boolean" default="false"
+    >Gives an item a quiet accent wash without changing its text or announcing selection. Several items may be highlighted, such as new messages. Describe the
+      reason in the item's text; use current only for the current destination.</prop>
   </defs>
   <li from:aria-current="current">
     <span class="leading"><slot name="leading"></slot></span>
@@ -77,6 +80,10 @@
       border-color: var(--ui-border-strong);
     }
 
+    :host-state([highlighted]) {
+      background: var(--ui-selection-surface);
+    }
+
     :host-state([current]) {
       background: var(--ui-selection-surface);
       color: var(--ui-selection-text);
@@ -169,7 +176,7 @@
         outline: var(--ui-focus-width) solid Highlight;
         outline-offset: calc(-1 * var(--ui-focus-width));
       }
-      :host-state([current]):not(:has(a:focus-visible)) {
+      :is(:host-state([current]), :host-state([highlighted])):not(:has(a:focus-visible)) {
         outline: var(--ui-border-width) solid Highlight;
         outline-offset: calc(-1 * var(--ui-border-width));
       }