@threadlabs/looma 0.23.4 → 0.23.6

package/components/shared/icons.js

@@ -4,6 +4,7 @@ export const icons = {
   "align-left": [["path",{"d":"M21 5H3"}],["path",{"d":"M15 12H3"}],["path",{"d":"M17 19H3"}]],
   "align-right": [["path",{"d":"M21 5H3"}],["path",{"d":"M21 12H9"}],["path",{"d":"M21 19H7"}]],
   "arrow-left": [["path",{"d":"m12 19-7-7 7-7"}],["path",{"d":"M19 12H5"}]],
+  "bell": [["path",{"d":"M10.268 21a2 2 0 0 0 3.464 0"}],["path",{"d":"M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"}]],
   "bold": [["path",{"d":"M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"}]],
   "book-user": [["path",{"d":"M15 13a3 3 0 1 0-6 0"}],["path",{"d":"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20"}],["circle",{"cx":"12","cy":"8","r":"2"}]],
   "braces": [["path",{"d":"M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1"}],["path",{"d":"M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1"}]],

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-icon/ui-icon.html

@@ -11,6 +11,7 @@
         'align-left': [{ tag: 'path', d: 'M21 5H3' }, { tag: 'path', d: 'M15 12H3' }, { tag: 'path', d: 'M17 19H3' }],
         'align-right': [{ tag: 'path', d: 'M21 5H3' }, { tag: 'path', d: 'M21 12H9' }, { tag: 'path', d: 'M21 19H7' }],
         'arrow-left': [{ tag: 'path', d: 'm12 19-7-7 7-7' }, { tag: 'path', d: 'M19 12H5' }],
+        'bell': [{ tag: 'path', d: 'M10.268 21a2 2 0 0 0 3.464 0' }, { tag: 'path', d: 'M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326' }],
         'bold': [{ tag: 'path', d: 'M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8' }],
         'book-user': [{ tag: 'path', d: 'M15 13a3 3 0 1 0-6 0' }, { tag: 'path', d: 'M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20' }, { tag: 'circle', cx: '12', cy: '8', r: '2' }],
         'braces': [{ tag: 'path', d: 'M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1' }, { tag: 'path', d: 'M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1' }],

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

@@ -3,9 +3,14 @@
     <prop name="variant" type="keyword" values="row, card" default="row"
     >How the item is drawn. A row is flat and takes a hover surface when it is a link, for items read down a list. A card sits on a raised, bordered surface,
       for items set in a grid (a List with layout="grid"). Both have the same parts: leading, title, description, and trailing.</prop>
+    <prop name="wrap" type="boolean" default="false"
+    >Lets the title and description wrap so explanatory text stays readable on narrow screens. Omit it for the default equal-height, one-line rows.</prop>
     <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 +82,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);
@@ -128,6 +137,12 @@
       white-space: nowrap;
     }
 
+    :host-state([wrap]) .title,
+    :host-state([wrap]) .description {
+      white-space: normal;
+      overflow-wrap: anywhere;
+    }
+
     .title {
       font-size: var(--ui-font-size-md);
       font-weight: var(--_ui-list-item-title-weight, var(--ui-font-medium));
@@ -169,7 +184,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));
       }