@threadlabs/looma 0.22.12 → 0.22.14

package/components/shared/icons.js

@@ -20,6 +20,7 @@ export const icons = {
   "credit-card": [["rect",{"width":"20","height":"14","x":"2","y":"5","rx":"2"}],["line",{"x1":"2","x2":"22","y1":"10","y2":"10"}]],
   "ellipsis": [["circle",{"cx":"12","cy":"12","r":"1"}],["circle",{"cx":"19","cy":"12","r":"1"}],["circle",{"cx":"5","cy":"12","r":"1"}]],
   "eraser": [["path",{"d":"M21 21H8a2 2 0 0 1-1.42-.587l-3.994-3.999a2 2 0 0 1 0-2.828l10-10a2 2 0 0 1 2.829 0l5.999 6a2 2 0 0 1 0 2.828L12.834 21"}],["path",{"d":"m5.082 11.09 8.828 8.828"}]],
+  "external-link": [["path",{"d":"M15 3h6v6"}],["path",{"d":"M10 14 21 3"}],["path",{"d":"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"}]],
   "file-text": [["path",{"d":"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"}],["path",{"d":"M14 2v5a1 1 0 0 0 1 1h5"}],["path",{"d":"M10 9H8"}],["path",{"d":"M16 13H8"}],["path",{"d":"M16 17H8"}]],
   "folder": [["path",{"d":"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"}]],
   "grip-horizontal": [["circle",{"cx":"12","cy":"9","r":"1"}],["circle",{"cx":"19","cy":"9","r":"1"}],["circle",{"cx":"5","cy":"9","r":"1"}],["circle",{"cx":"12","cy":"15","r":"1"}],["circle",{"cx":"19","cy":"15","r":"1"}],["circle",{"cx":"5","cy":"15","r":"1"}]],
@@ -46,12 +47,14 @@ export const icons = {
   "panel-left": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M9 3v18"}]],
   "panel-right": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M15 3v18"}]],
   "panel-top": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M3 9h18"}]],
+  "pencil": [["path",{"d":"M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"}],["path",{"d":"m15 5 4 4"}]],
   "pilcrow": [["path",{"d":"M13 4v16"}],["path",{"d":"M17 4v16"}],["path",{"d":"M19 4H9.5a4.5 4.5 0 0 0 0 9H13"}]],
   "plus": [["path",{"d":"M5 12h14"}],["path",{"d":"M12 5v14"}]],
   "quote": [["path",{"d":"M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"}],["path",{"d":"M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z"}]],
   "receipt": [["path",{"d":"M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z"}],["path",{"d":"M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"}],["path",{"d":"M12 17.5v-11"}]],
   "redo": [["path",{"d":"m15 14 5-5-5-5"}],["path",{"d":"M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13"}]],
   "rows": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M21 9H3"}],["path",{"d":"M21 15H3"}]],
+  "search": [["path",{"d":"m21 21-4.34-4.34"}],["circle",{"cx":"11","cy":"11","r":"8"}]],
   "settings": [["path",{"d":"M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"}],["circle",{"cx":"12","cy":"12","r":"3"}]],
   "split": [["path",{"d":"M16 3h5v5"}],["path",{"d":"M8 3H3v5"}],["path",{"d":"M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3"}],["path",{"d":"m15 9 6-6"}]],
   "strikethrough": [["path",{"d":"M16 4H9a3 3 0 0 0-2.83 4"}],["path",{"d":"M14 12a4 4 0 0 1 0 8H6"}],["line",{"x1":"4","x2":"20","y1":"12","y2":"12"}]],
@@ -62,6 +65,7 @@ export const icons = {
   "truck": [["path",{"d":"M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2"}],["path",{"d":"M15 18H9"}],["path",{"d":"M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14"}],["circle",{"cx":"17","cy":"18","r":"2"}],["circle",{"cx":"7","cy":"18","r":"2"}]],
   "underline": [["path",{"d":"M6 4v6a6 6 0 0 0 12 0V4"}],["line",{"x1":"4","x2":"20","y1":"20","y2":"20"}]],
   "undo": [["path",{"d":"M9 14 4 9l5-5"}],["path",{"d":"M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11"}]],
+  "unlink": [["path",{"d":"m18.84 12.25 1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07 5.006 5.006 0 0 0-6.95 0l-1.72 1.71"}],["path",{"d":"m5.17 11.75-1.71 1.71a5.004 5.004 0 0 0 .12 7.07 5.006 5.006 0 0 0 6.95 0l1.71-1.71"}],["line",{"x1":"8","x2":"8","y1":"2","y2":"5"}],["line",{"x1":"2","x2":"5","y1":"8","y2":"8"}],["line",{"x1":"16","x2":"16","y1":"19","y2":"22"}],["line",{"x1":"19","x2":"22","y1":"16","y2":"16"}]],
   "user-round": [["circle",{"cx":"12","cy":"8","r":"5"}],["path",{"d":"M20 21a8 8 0 0 0-16 0"}]],
   "users": [["path",{"d":"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"}],["path",{"d":"M16 3.128a4 4 0 0 1 0 7.744"}],["path",{"d":"M22 21v-2a4 4 0 0 0-3-3.87"}],["circle",{"cx":"9","cy":"7","r":"4"}]],
   "x": [["path",{"d":"M18 6 6 18"}],["path",{"d":"m6 6 12 12"}]],

package/components/ui-card/ui-card.html

@@ -1,10 +1,12 @@
 <template component="ui-card">
   <defs>
+    <prop name="size" type="keyword" values="content, sm, md, lg" default="content"
+    >Optional size preset. content keeps the existing intrinsic sizing; the other sizes constrain the surface for compact, medium, or large content.</prop>
     <prop name="variant" type="keyword" values="outlined, subtle, elevated" default="outlined"
     >The surface. outlined is a bordered panel on the page; subtle is a quiet filled one with no border, for supporting details set apart from the flow;
       elevated floats above the page with a shadow, for a view's one card, such as sign-in.</prop>
-    <prop name="padding" type="keyword" values="sm, md, lg" default="md"
-    >The space inside the card: sm is snug (0.75rem), md is the default (1.5rem), and lg is roomy (2rem).</prop>
+    <prop name="padding" type="keyword" values="xs, sm, md, lg" default="md"
+    >The space inside the card: xs is compact (0.5rem), sm is snug (0.75rem), md is the default (1.5rem), and lg is roomy (2rem).</prop>
     <prop name="tone" type="keyword" values="neutral, danger" default="neutral"
     >danger adds a soft danger surface and a strong leading edge for consequential content.</prop>
     <prop name="as" type="keyword" values="div, section, article, aside" default="div"
@@ -32,6 +34,10 @@
       color: var(--ui-text-primary);
     }
 
+    :host-state([padding="xs"]) {
+      gap: var(--ui-space-1);
+      padding: var(--ui-space-2);
+    }
     :host-state([padding="sm"]) {
       gap: var(--ui-space-2);
       padding: var(--ui-space-3);
@@ -57,6 +63,19 @@
       background: var(--ui-danger-soft);
     }
 
+    :host-state([size="sm"]) {
+      inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
+      max-inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
+    }
+    :host-state([size="md"]) {
+      inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
+      max-inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
+    }
+    :host-state([size="lg"]) {
+      inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
+      max-inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
       display: none;

package/components/ui-icon/ui-icon.html

@@ -27,6 +27,7 @@
         'credit-card': [{ tag: 'rect', width: '20', height: '14', x: '2', y: '5', rx: '2' }, { tag: 'line', x1: '2', x2: '22', y1: '10', y2: '10' }],
         'ellipsis': [{ tag: 'circle', cx: '12', cy: '12', r: '1' }, { tag: 'circle', cx: '19', cy: '12', r: '1' }, { tag: 'circle', cx: '5', cy: '12', r: '1' }],
         'eraser': [{ tag: 'path', d: 'M21 21H8a2 2 0 0 1-1.42-.587l-3.994-3.999a2 2 0 0 1 0-2.828l10-10a2 2 0 0 1 2.829 0l5.999 6a2 2 0 0 1 0 2.828L12.834 21' }, { tag: 'path', d: 'm5.082 11.09 8.828 8.828' }],
+        'external-link': [{ tag: 'path', d: 'M15 3h6v6' }, { tag: 'path', d: 'M10 14 21 3' }, { tag: 'path', d: 'M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6' }],
         'file-text': [{ tag: 'path', d: 'M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z' }, { tag: 'path', d: 'M14 2v5a1 1 0 0 0 1 1h5' }, { tag: 'path', d: 'M10 9H8' }, { tag: 'path', d: 'M16 13H8' }, { tag: 'path', d: 'M16 17H8' }],
         'folder': [{ tag: 'path', d: 'M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z' }],
         'grip-horizontal': [{ tag: 'circle', cx: '12', cy: '9', r: '1' }, { tag: 'circle', cx: '19', cy: '9', r: '1' }, { tag: 'circle', cx: '5', cy: '9', r: '1' }, { tag: 'circle', cx: '12', cy: '15', r: '1' }, { tag: 'circle', cx: '19', cy: '15', r: '1' }, { tag: 'circle', cx: '5', cy: '15', r: '1' }],
@@ -53,12 +54,14 @@
         'panel-left': [{ tag: 'rect', width: '18', height: '18', x: '3', y: '3', rx: '2' }, { tag: 'path', d: 'M9 3v18' }],
         'panel-right': [{ tag: 'rect', width: '18', height: '18', x: '3', y: '3', rx: '2' }, { tag: 'path', d: 'M15 3v18' }],
         'panel-top': [{ tag: 'rect', width: '18', height: '18', x: '3', y: '3', rx: '2' }, { tag: 'path', d: 'M3 9h18' }],
+        'pencil': [{ tag: 'path', d: 'M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z' }, { tag: 'path', d: 'm15 5 4 4' }],
         'pilcrow': [{ tag: 'path', d: 'M13 4v16' }, { tag: 'path', d: 'M17 4v16' }, { tag: 'path', d: 'M19 4H9.5a4.5 4.5 0 0 0 0 9H13' }],
         'plus': [{ tag: 'path', d: 'M5 12h14' }, { tag: 'path', d: 'M12 5v14' }],
         'quote': [{ tag: 'path', d: 'M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z' }, { tag: 'path', d: 'M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z' }],
         'receipt': [{ tag: 'path', d: 'M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z' }, { tag: 'path', d: 'M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8' }, { tag: 'path', d: 'M12 17.5v-11' }],
         'redo': [{ tag: 'path', d: 'm15 14 5-5-5-5' }, { tag: 'path', d: 'M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13' }],
         'rows': [{ tag: 'rect', width: '18', height: '18', x: '3', y: '3', rx: '2' }, { tag: 'path', d: 'M21 9H3' }, { tag: 'path', d: 'M21 15H3' }],
+        'search': [{ tag: 'path', d: 'm21 21-4.34-4.34' }, { tag: 'circle', cx: '11', cy: '11', r: '8' }],
         'settings': [{ tag: 'path', d: 'M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915' }, { tag: 'circle', cx: '12', cy: '12', r: '3' }],
         'split': [{ tag: 'path', d: 'M16 3h5v5' }, { tag: 'path', d: 'M8 3H3v5' }, { tag: 'path', d: 'M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3' }, { tag: 'path', d: 'm15 9 6-6' }],
         'strikethrough': [{ tag: 'path', d: 'M16 4H9a3 3 0 0 0-2.83 4' }, { tag: 'path', d: 'M14 12a4 4 0 0 1 0 8H6' }, { tag: 'line', x1: '4', x2: '20', y1: '12', y2: '12' }],
@@ -69,6 +72,7 @@
         'truck': [{ tag: 'path', d: 'M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2' }, { tag: 'path', d: 'M15 18H9' }, { tag: 'path', d: 'M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14' }, { tag: 'circle', cx: '17', cy: '18', r: '2' }, { tag: 'circle', cx: '7', cy: '18', r: '2' }],
         'underline': [{ tag: 'path', d: 'M6 4v6a6 6 0 0 0 12 0V4' }, { tag: 'line', x1: '4', x2: '20', y1: '20', y2: '20' }],
         'undo': [{ tag: 'path', d: 'M9 14 4 9l5-5' }, { tag: 'path', d: 'M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11' }],
+        'unlink': [{ tag: 'path', d: 'm18.84 12.25 1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07 5.006 5.006 0 0 0-6.95 0l-1.72 1.71' }, { tag: 'path', d: 'm5.17 11.75-1.71 1.71a5.004 5.004 0 0 0 .12 7.07 5.006 5.006 0 0 0 6.95 0l1.71-1.71' }, { tag: 'line', x1: '8', x2: '8', y1: '2', y2: '5' }, { tag: 'line', x1: '2', x2: '5', y1: '8', y2: '8' }, { tag: 'line', x1: '16', x2: '16', y1: '19', y2: '22' }, { tag: 'line', x1: '19', x2: '22', y1: '16', y2: '16' }],
         'user-round': [{ tag: 'circle', cx: '12', cy: '8', r: '5' }, { tag: 'path', d: 'M20 21a8 8 0 0 0-16 0' }],
         'users': [{ tag: 'path', d: 'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' }, { tag: 'path', d: 'M16 3.128a4 4 0 0 1 0 7.744' }, { tag: 'path', d: 'M22 21v-2a4 4 0 0 0-3-3.87' }, { tag: 'circle', cx: '9', cy: '7', r: '4' }],
         'x': [{ tag: 'path', d: 'M18 6 6 18' }, { tag: 'path', d: 'm6 6 12 12' }],

package/components/ui-input/ui-input.html

@@ -102,6 +102,7 @@
       margin: 0;
       padding: var(--ui-space-2) var(--ui-space-3);
       appearance: none;
+      padding-inline-start: var(--_ui-default-input-padding-inline-start, var(--ui-space-3));
       border: var(--ui-input-border-width, var(--_ui-default-input-border-width, 1px)) solid
         var(--ui-input-border, var(--_ui-default-input-border, var(--ui-control-border, var(--ui-border-strong))));
       border-radius: var(--ui-input-radius, var(--_ui-default-input-radius, var(--ui-field-radius, var(--ui-radius-md))));

package/components/ui-input-group/ui-input-group.html

@@ -1,5 +1,7 @@
 <template component="ui-input-group" controller="./ui-input-group.js">
   <defs>
+    <prop name="prefixKind" type="keyword" values="text, icon" default="text"
+    >Text affixes have their own framing. An icon prefix shares the field surface and uses one compact icon-to-value gap.</prop>
     <prop name="disabled" type="boolean" default="false">Fades the group's framing to match a disabled input inside it. Disable the input itself too.</prop>
   </defs>
   <div>
@@ -148,6 +150,15 @@
       border-inline-start: 1px solid var(--ui-border-divider);
     }
 
+    :host-state([prefixKind="icon"]) {
+      --_ui-default-input-padding-inline-start: var(--ui-space-2);
+    }
+    :host-state([prefixKind="icon"]) .affix:first-child {
+      padding-inline-end: 0;
+      border-inline-end: 0;
+      background: transparent;
+    }
+
     /* Centred rather than padded above and below: the group is exactly a lone Input's height, so a
        small button sits inside it with the difference split evenly, and the field keeps its height. */
     .action {

package/components/ui-popover/ui-popover.html

@@ -1,5 +1,7 @@
 <template component="ui-popover" controller="./ui-popover.js">
   <defs>
+    <prop name="size" type="keyword" values="content, sm, md, lg" default="content"
+    >Optional size preset. content keeps the existing intrinsic sizing; the other sizes constrain the surface for compact, medium, or large content.</prop>
     <prop name="open" type="boolean" default="false">Whether the popover is open initially or when set externally.</prop>
     <prop name="for" type="string" default="">ID of the control that toggles and anchors the popover.</prop>
     <prop
@@ -120,6 +122,19 @@
       }
     }
 
+    :host-state([size="sm"]) {
+      inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
+      max-inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
+    }
+    :host-state([size="md"]) {
+      inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
+      max-inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
+    }
+    :host-state([size="lg"]) {
+      inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
+      max-inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
+    }
+
     :host[hidden] {
       display: none;
     }

package/components/ui-scroll-area/ui-scroll-area.html

@@ -1,5 +1,7 @@
 <template component="ui-scroll-area" controller="./ui-scroll-area.js">
   <defs>
+    <prop name="size" type="keyword" values="content, sm, md, lg" default="content"
+    >Optional height preset. content keeps intrinsic sizing; sm fits three compact 3.125rem result rows, md is 20rem, and lg is 30rem.</prop>
     <prop name="orientation" type="keyword" values="vertical, horizontal" default="vertical"
     >The direction the content scrolls. Vertical scrolls up and down and clips sideways overflow; horizontal scrolls sideways and clips vertical
       overflow.</prop>
@@ -43,6 +45,16 @@
       --_ui-scroll-fade-inline: to left;
     }
 
+    :host-state([size="sm"]) {
+      max-block-size: 9.375rem;
+    }
+    :host-state([size="md"]) {
+      max-block-size: 20rem;
+    }
+    :host-state([size="lg"]) {
+      max-block-size: 30rem;
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
       display: none;

package/components/ui-search-result-row/ui-search-result-row.html

@@ -1,5 +1,7 @@
 <template component="ui-search-result-row">
   <defs>
+    <prop name="density" type="keyword" values="comfortable, compact" default="comfortable"
+    >Compact keeps a title and location together in a 3.125rem row for small destination pickers; comfortable preserves the existing rich result spacing.</prop>
     <prop name="disabled" type="boolean" default="false"
     >Disables the row's button, so it cannot be chosen or focused, and gives it a flat muted treatment.</prop>
     <prop name="selected" type="boolean" default="false"
@@ -69,6 +71,15 @@
       transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
+    :host-state([density="compact"]) {
+      min-block-size: var(--ui-search-result-row-min-height, 3.125rem);
+      padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-1));
+      padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-2));
+      gap: var(--ui-search-result-row-gap, var(--ui-space-2));
+      align-items: center;
+      font-family: var(--ui-font-family-sans, sans-serif);
+    }
+
     :host:hover:enabled {
       background: var(--ui-search-result-row-hover-surface, color-mix(in srgb, var(--ui-surface) 85%, black 3%));
     }

package/components/ui-stack/ui-stack.html

@@ -1,8 +1,8 @@
 <template component="ui-stack">
   <defs>
-    <prop name="gap" type="keyword" values="xs, s, m, l, xl"
-    >Space between items, on the spacing scale: xs is 0.5rem, s 0.75rem, m 1rem (also the default), l 1.5rem, and xl 2rem. The --ui-stack-gap custom property,
-      set on the stack itself, overrides it; set on an ancestor, it does nothing.</prop>
+    <prop name="gap" type="keyword" values="none, xs, s, m, l, xl"
+    >Space between items, on the spacing scale: none is zero, xs is 0.5rem, s 0.75rem, m 1rem (also the default), l 1.5rem, and xl 2rem. The --ui-stack-gap
+      custom property, set on the stack itself, overrides it; set on an ancestor, it does nothing.</prop>
     <prop name="align" type="keyword" values="start, center, end, stretch"
     >How items sit across the stack: stretch (the default) makes each fill the stack's width; start, center, and end keep each at its own width, against the
       start, in the middle, or against the end.</prop>
@@ -29,6 +29,9 @@
       margin: 0;
     }
 
+    :host-state([gap="none"]) {
+      --_layout-gap: 0px;
+    }
     :host-state([gap="xs"]) {
       --_layout-gap: var(--ui-space-2);
     }

package/components/ui-text/ui-text.html

@@ -1,5 +1,9 @@
 <template component="ui-text">
   <defs>
+    <prop name="font" type="keyword" values="inherit, sans" default="inherit"
+    >Use sans for UI text rendered outside its original font context; inherit preserves the surrounding typeface.</prop>
+    <prop name="wrap" type="keyword" values="normal, anywhere" default="normal"
+    >Use anywhere for unbroken values such as long destinations; ordinary prose keeps its normal wrapping.</prop>
     <prop name="size" type="keyword" values="inherit, xs, sm, md, lg" default="inherit"
     >The step on the type scale. inherit (the default) keeps the size of the text around it; xs is for fine print, sm for supporting text such as help and
       metadata, md is body text, and lg is a lead paragraph.</prop>
@@ -129,6 +133,14 @@
       text-align: center;
     }
 
+    :host-state([font="sans"]) {
+      font-family: var(--ui-font-family-sans, sans-serif);
+    }
+
+    :host-state([wrap="anywhere"]) {
+      overflow-wrap: anywhere;
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
       display: none;