@threadlabs/looma 0.23.3 → 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));
       }

package/components/ui-tree/ui-tree.html

@@ -6,7 +6,8 @@
     <prop name="label" type="string" default="Tree">The tree's accessible name, announced when focus enters it. Name what the tree holds.</prop>
     <prop name="selection" type="keyword" values="none, single, multiple" default="none"
     >How selection works. None keeps rows for navigation and expansion; single requests one selected item; multiple shows checkboxes and requests an item with
-      its descendants. The application owns each Tree Item's selected state and responds to select.</prop>
+      its descendants. The application owns each Tree Item's selected state and responds to select. Single-selection rows also request activate on a row click
+      or Enter, including an already selected row. Space requests selection only; controls and disabled rows do not activate.</prop>
     <prop name="hoverExpandDelay" type="number" default="700"
     >How long, in milliseconds, a dragged item must hover over the middle of a collapsed branch before the branch opens to receive it. 0 opens it at
       once.</prop>
@@ -41,6 +42,10 @@
       <prop name="resultingDepth" required type="integer"></prop>
       <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
     </event>
+    <event name="activate" type="object">
+      <prop name="id" required type="string"></prop>
+      <prop name="trigger" required type="keyword" values="keyboard, pointer"></prop>
+    </event>
     <event name="select" type="object">
       <prop name="ids" required type="list">
         <prop type="string"></prop>

package/components/ui-tree/ui-tree.js

@@ -202,6 +202,7 @@ export default function controller(host) {
       event.stopPropagation();
       selectItem(item, "pointer");
       focusItem(item);
+      if (selectionMode() === "single" && !checkbox) host.dispatch("activate", { id: itemId(item), trigger: "pointer" });
       if (checkbox) requestAnimationFrame(syncSelection);
       return;
     }
@@ -382,6 +383,13 @@ export default function controller(host) {
     if (interactive(event)) return;
     const current = itemFromEvent(event);
     if (!current) return;
+    if (event.key === "Enter" && selectionMode() === "single" && !event.altKey && !event.ctrlKey && !event.metaKey) {
+      if (current.getAttribute("aria-disabled") === "true") return;
+      event.preventDefault();
+      selectItem(current, "keyboard");
+      host.dispatch("activate", { id: itemId(current), trigger: "keyboard" });
+      return;
+    }
     if (event.key === " " && selectionMode() !== "none") {
       event.preventDefault();
       selectItem(current, "keyboard");