@threadlabs/looma 0.24.1 → 0.25.0

package/components/ui-editor-mention-menu/ui-editor-mention-menu.js

@@ -1,7 +1,7 @@
 import { normalizeAnchor, positionMenu } from "../shared/editor.js";
 
 // Places the menu at the @ and derives its rows; the template renders them.
-export default function controller(host) {
+function connect(host) {
   const element = host.element;
   const authoredLabel = element.hasAttribute("aria-label") || element.hasAttribute("aria-labelledby");
   const place = () => {
@@ -70,3 +70,8 @@ export default function controller(host) {
     window.visualViewport?.removeEventListener("scroll", place);
   };
 }
+
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+export default function controller(host) {
+  host.on("connect", () => connect(host));
+}

package/components/ui-editor-slash-menu/ui-editor-slash-menu.js

@@ -1,7 +1,7 @@
 import { normalizeAnchor, positionMenu } from "../shared/editor.js";
 
 // Places the menu at the slash and tracks the highlighted item; the template renders the items.
-export default function controller(host) {
+function connect(host) {
   const element = host.element;
   const authoredLabel = element.hasAttribute("aria-label") || element.hasAttribute("aria-labelledby");
   const place = () => {
@@ -76,3 +76,8 @@ export default function controller(host) {
     window.visualViewport?.removeEventListener("scroll", place);
   };
 }
+
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+export default function controller(host) {
+  host.on("connect", () => connect(host));
+}

package/components/ui-editor-table-context-menu/ui-editor-table-context-menu.js

@@ -26,7 +26,7 @@ const sections = [
 ];
 
 // Lists the actions the selection permits, and nudges the open menu back inside the viewport.
-export default function controller(host) {
+function connect(host) {
   const element = host.element;
   let frame;
   const nudge = () => {
@@ -81,3 +81,8 @@ export default function controller(host) {
     if (frame) cancelAnimationFrame(frame);
   };
 }
+
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+export default function controller(host) {
+  host.on("connect", () => connect(host));
+}

package/components/ui-editor-table-overlay/ui-editor-table-overlay.js

@@ -49,7 +49,7 @@ function createProximity(scope, selector = ".handle[data-ui-affordance]", radius
   } };
 }
 
-export default function controller(host) {
+function connect(host) {
   const element = host.element;
   const proximity = createProximity(element);
   let drag = null;
@@ -175,3 +175,8 @@ export default function controller(host) {
     element.removeEventListener("focusout", leave);
   };
 }
+
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+export default function controller(host) {
+  host.on("connect", () => connect(host));
+}

package/components/ui-editor-table-toolbar/ui-editor-table-toolbar.js

@@ -7,7 +7,7 @@ const overflowSections = [
 ];
 
 // Lists the actions the table selection permits; the overflow menu opens and closes here.
-export default function controller(host) {
+function connect(host) {
   const element = host.element;
   const positionMenu = () => {
     const button = element.querySelector(".more");
@@ -81,3 +81,8 @@ export default function controller(host) {
     window.visualViewport?.removeEventListener("resize", positionMenu);
   };
 }
+
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+export default function controller(host) {
+  host.on("connect", () => connect(host));
+}

package/components/ui-editor-toolbar/ui-editor-toolbar.html

@@ -72,7 +72,7 @@
       margin: 0 var(--ui-editor-toolbar-divider-margin, 4px);
     }
 
-    :host-state([floating]) {
+    :host([floating]) {
       position: relative;
       top: auto;
       width: max-content;
@@ -99,7 +99,7 @@
         box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
       }
 
-      :host-state([floating]) {
+      :host([floating]) {
         position: relative;
         inset: auto;
         min-height: auto;
@@ -119,7 +119,7 @@
     }
 
     /* Inside LoomaEditor's mobile shell, the toolbar is a scroll-snapping strip. */
-    .looma-editor__mobile-toolbar-shell :host-state([floating]) {
+    .looma-editor__mobile-toolbar-shell :host([floating]) {
       width: 100%;
       max-width: none;
       min-height: 100%;
@@ -131,7 +131,7 @@
       backdrop-filter: none;
     }
 
-    .looma-editor__mobile-toolbar-shell :host-state([floating]) .strip {
+    .looma-editor__mobile-toolbar-shell :host([floating]) .strip {
       scroll-snap-type: x mandatory;
     }
 

package/components/ui-editor-toolbar/ui-editor-toolbar.js

@@ -1,7 +1,7 @@
 const selector = 'button, a[href], [role="button"], select, input:not([type="hidden"])';
 
 /** Keep one Tab stop in the toolbar; arrow keys move among its enabled authored controls. */
-export default function controller(host) {
+function connect(host) {
   const strip = host.refs.strip;
   let current = null;
   const controls = () => Array.from(strip.querySelectorAll(selector)).filter((element) =>
@@ -44,3 +44,8 @@ export default function controller(host) {
     strip.removeEventListener("keydown", onKeydown);
   };
 }
+
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+export default function controller(host) {
+  host.on("connect", () => connect(host));
+}

package/components/ui-floating-action-button/ui-floating-action-button.html

@@ -82,7 +82,7 @@
     }
 
     @media (min-width: 768px) {
-      :host-state([mobileOnly]) {
+      :host([mobileOnly]) {
         display: none;
       }
     }

package/components/ui-form-field/ui-form-field.html

@@ -112,7 +112,7 @@
       display: none;
     }
 
-    :host-state([invalid]) .error {
+    :host([invalid]) .error {
       display: contents;
     }
 

package/components/ui-form-field/ui-form-field.js

@@ -11,7 +11,7 @@ function descriptionIds(input) {
   return Array.from(new Set((input.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean)));
 }
 
-export default function controller(host) {
+function connect(host) {
   const element = host.element;
   let activeInput = null;
   let owned = new Set();
@@ -74,3 +74,8 @@ export default function controller(host) {
     removeOwned(activeInput);
   };
 }
+
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+export default function controller(host) {
+  host.on("connect", () => connect(host));
+}

package/components/ui-grid/ui-grid.html

@@ -45,25 +45,25 @@
       margin: 0;
     }
 
-    :host-state([gap="xs"]) {
+    :host([gap="xs"]) {
       --_grid-gap: var(--ui-space-2);
     }
-    :host-state([gap="s"]) {
+    :host([gap="s"]) {
       --_grid-gap: var(--ui-space-3);
     }
-    :host-state([gap="m"]) {
+    :host([gap="m"]) {
       --_grid-gap: var(--ui-space-4);
     }
-    :host-state([gap="l"]) {
+    :host([gap="l"]) {
       --_grid-gap: var(--ui-space-5);
     }
-    :host-state([gap="xl"]) {
+    :host([gap="xl"]) {
       --_grid-gap: var(--ui-space-6);
     }
-    :host-state([min="md"]) {
+    :host([min="md"]) {
       --_grid-min: 16rem;
     }
-    :host-state([min="lg"]) {
+    :host([min="lg"]) {
       --_grid-min: 20rem;
     }
 

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

@@ -121,11 +121,11 @@
       color: var(--ui-text-secondary);
     }
 
-    :host-state([anticipatory]) {
+    :host([anticipatory]) {
       position: relative;
     }
 
-    :host-state([anticipatory])::before {
+    :host([anticipatory])::before {
       content: "";
       position: absolute;
       inset: 50% auto auto 50%;
@@ -140,26 +140,26 @@
       pointer-events: none;
     }
 
-    :host-state([anticipatory]):disabled::before {
+    :host([anticipatory]):disabled::before {
       opacity: 0;
     }
 
     /* At rest an anticipatory button shows only its guide dot. The icon grows into place when
        proximity, hover, or focus reveals it; the button's hit area and guide remain stable. */
-    :host-state([anticipatory]) .content {
+    :host([anticipatory]) .content {
       opacity: 1;
       transform: scale(1);
       transition: opacity var(--ui-motion-fast) var(--ui-motion-ease), transform calc(var(--ui-motion-fast) * 2) cubic-bezier(0.2, 1.4, 0.35, 1);
     }
 
     @media (hover: hover) and (pointer: fine) {
-      :host-state([anticipatory]):not(:host-state([variant="solid"]), :host-state([loading]), :host-state([pending]), :disabled, [data-ui-proximity="near"], :hover, :focus-visible) {
+      :host([anticipatory]):not(:host([variant="solid"]), :host([loading]), :host([pending]), :disabled, [data-ui-proximity="near"], :hover, :focus-visible) {
         border-color: transparent;
         background-color: transparent;
         box-shadow: none;
       }
 
-      :host-state([anticipatory]):not(:host-state([variant="solid"]), :host-state([loading]), :host-state([pending]), :disabled, [data-ui-proximity="near"], :hover, :focus-visible)
+      :host([anticipatory]):not(:host([variant="solid"]), :host([loading]), :host([pending]), :disabled, [data-ui-proximity="near"], :hover, :focus-visible)
         .content {
         opacity: 0;
         transform: scale(0.65);
@@ -167,7 +167,7 @@
       }
     }
 
-    :host-state([anticipatory]):is(:host-state([variant="solid"]), [data-ui-proximity="near"], :hover, :focus-visible)::before {
+    :host([anticipatory]):is(:host([variant="solid"]), [data-ui-proximity="near"], :hover, :focus-visible)::before {
       opacity: 0;
     }
 
@@ -198,7 +198,7 @@
     }
 
     @media (hover: none), (pointer: coarse) {
-      :host-state([anticipatory])::before {
+      :host([anticipatory])::before {
         opacity: 0;
       }
     }
@@ -233,7 +233,7 @@
       transform: translate(-50%, -50%);
     }
 
-    :host-state([size="sm"]) {
+    :host([size="sm"]) {
       --_size: 1.75rem;
       inline-size: var(--ui-icon-button-size, var(--_size));
       block-size: var(--ui-icon-button-size, var(--_size));
@@ -241,7 +241,7 @@
       min-block-size: var(--ui-icon-button-size, var(--_size));
     }
 
-    :host-state([size="lg"]) {
+    :host([size="lg"]) {
       --_size: 2.5rem;
       inline-size: var(--ui-icon-button-size, var(--_size));
       block-size: var(--ui-icon-button-size, var(--_size));
@@ -250,33 +250,33 @@
     }
 
     /* A text button's companion uses control geometry; compact icon buttons keep their own density. */
-    :host-state([matchButton]) {
+    :host([matchButton]) {
       --_size: var(--ui-control-size-md);
       block-size: auto;
       align-self: stretch;
     }
 
-    :host-state([matchButton][size="sm"]) {
+    :host([matchButton][size="sm"]) {
       --_size: var(--ui-control-size-sm);
     }
 
-    :host-state([matchButton][size="lg"]) {
+    :host([matchButton][size="lg"]) {
       --_size: var(--ui-control-size-lg);
     }
 
     @media (pointer: coarse) {
-      :host-state([matchButton]) {
+      :host([matchButton]) {
         inline-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
         min-inline-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
         min-block-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
       }
     }
 
-    :host-state([round]) {
+    :host([round]) {
       border-radius: var(--ui-radius-round);
     }
 
-    :host-state([variant="outline"]) {
+    :host([variant="outline"]) {
       border-color: var(--ui-icon-button-border, var(--ui-control-border, var(--ui-border-strong)));
       background-color: var(--ui-icon-button-outline-surface, var(--ui-surface-default));
       background-image: var(--ui-raised-highlight);
@@ -284,7 +284,7 @@
       box-shadow: var(--ui-raised);
     }
 
-    :host-state([variant="solid"]) {
+    :host([variant="solid"]) {
       background-color: var(--ui-icon-button-solid-surface, var(--ui-accent-solid));
       background-image: var(--ui-raised-highlight);
       color: var(--ui-icon-button-solid-text, var(--ui-text-on-accent));
@@ -300,15 +300,15 @@
       color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
     }
 
-    :host-state([variant="outline"]):hover:enabled:not([aria-disabled="true"]) {
+    :host([variant="outline"]):hover:enabled:not([aria-disabled="true"]) {
       border-color: var(--ui-icon-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border)));
     }
 
-    :host-state([variant="solid"]):hover:enabled:not([aria-disabled="true"]) {
+    :host([variant="solid"]):hover:enabled:not([aria-disabled="true"]) {
       background-color: var(--ui-icon-button-solid-hover-surface, var(--ui-accent-hover));
     }
 
-    :host-state([variant="ghost"])[aria-expanded="true"]:enabled:not([aria-disabled="true"]) {
+    :host([variant="ghost"])[aria-expanded="true"]:enabled:not([aria-disabled="true"]) {
       background-color: var(--ui-icon-button-active-surface, color-mix(in srgb, currentColor 16%, transparent));
       color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
       box-shadow: var(--ui-pressed);
@@ -318,7 +318,7 @@
       transform: scale(var(--ui-icon-button-active-scale, 0.96));
     }
 
-    :is(:host-state([loading]), :host-state([pending])) {
+    :is(:host([loading]), :host([pending])) {
       cursor: progress;
     }
 
@@ -328,12 +328,12 @@
       justify-content: center;
     }
 
-    :is(:host-state([loading]), :host-state([pending])) .content {
+    :is(:host([loading]), :host([pending])) .content {
       display: none;
     }
 
     @media (prefers-reduced-motion: reduce) {
-      :host-state([anticipatory]) .content {
+      :host([anticipatory]) .content {
         transition: none;
       }
     }
@@ -355,7 +355,7 @@
       background-image: none;
     }
 
-    :host-state([variant="ghost"]):disabled {
+    :host([variant="ghost"]):disabled {
       border-color: transparent;
     }
 
@@ -367,11 +367,11 @@
       --_ui-default-icon-stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
     }
 
-    :host-state([size="sm"]) {
+    :host([size="sm"]) {
       --_icon-button-icon-default: var(--ui-icon-size-sm);
     }
 
-    :host-state([size="lg"]) {
+    :host([size="lg"]) {
       --_icon-button-icon-default: var(--ui-icon-size-lg);
     }
 

package/components/ui-icon-button/ui-icon-button.js

@@ -1,5 +1,5 @@
 // Marks an anticipatory button for the enclosing ui-affordance-scope, which reveals it on proximity.
-export default function controller(host) {
+function connect(host) {
   const stop = host.effect(() => {
     if (host.props.anticipatory.value) host.element.setAttribute("data-ui-affordance", "button");
     else host.element.removeAttribute("data-ui-affordance");
@@ -15,3 +15,8 @@ export default function controller(host) {
     host.element.removeEventListener("click", onClick, true);
   };
 }
+
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+export default function controller(host) {
+  host.on("connect", () => connect(host));
+}

package/components/ui-image/ui-image.html

@@ -40,25 +40,25 @@
       margin: 0;
       padding: var(--ui-space-3) 0;
     }
-    :host-state([placement="center"]) {
+    :host([placement="center"]) {
       justify-content: center;
     }
-    :host-state([placement="wrap-left"]) {
+    :host([placement="wrap-left"]) {
       float: left;
       padding-inline-end: var(--ui-space-4);
     }
-    :host-state([placement="wrap-right"]) {
+    :host([placement="wrap-right"]) {
       float: right;
       padding-inline-start: var(--ui-space-4);
     }
-    :host:is(:host-state([placement="wrap-left"]), :host-state([placement="wrap-right"])) {
+    :host:is(:host([placement="wrap-left"]), :host([placement="wrap-right"])) {
       inline-size: calc(var(--_ui-image-width, calc(100% / 3)) + var(--ui-space-4));
     }
-    :host:is(:host-state([placement="wrap-left"]), :host-state([placement="wrap-right"])) .frame {
+    :host:is(:host([placement="wrap-left"]), :host([placement="wrap-right"])) .frame {
       inline-size: 100%;
     }
-    :host:is(:host-state([placement="wrap-left"]), :host-state([placement="wrap-right"])) .frame img,
-    :host:is(:host-state([placement="wrap-left"]), :host-state([placement="wrap-right"])) .frame :slotted(img) {
+    :host:is(:host([placement="wrap-left"]), :host([placement="wrap-right"])) .frame img,
+    :host:is(:host([placement="wrap-left"]), :host([placement="wrap-right"])) .frame :slotted(img) {
       inline-size: 100%;
     }
     .frame {
@@ -80,7 +80,7 @@
     :host[data-resizing] .frame img, :host[data-resizing] .frame :slotted(img) {
       inline-size: 100%;
     }
-    :host-state([selected]) .frame {
+    :host([selected]) .frame {
       outline: var(--ui-focus-width) solid var(--ui-focus-ring);
       outline-offset: var(--ui-border-width);
     }
@@ -130,12 +130,12 @@
       display: none;
     }
     @media (max-width: 767px) {
-      :host:is(:host-state([placement="wrap-left"]), :host-state([placement="wrap-right"])) {
+      :host:is(:host([placement="wrap-left"]), :host([placement="wrap-right"])) {
         float: none;
         inline-size: 100%;
         padding-inline: 0;
       }
-      :host:is(:host-state([placement="wrap-left"]), :host-state([placement="wrap-right"])) .handles {
+      :host:is(:host([placement="wrap-left"]), :host([placement="wrap-right"])) .handles {
         display: none;
       }
     }
@@ -165,7 +165,7 @@
       }
     }
     @media (forced-colors: active) {
-      :host-state([selected]) .frame, .handle:focus-visible {
+      :host([selected]) .frame, .handle:focus-visible {
         outline-color: Highlight;
       }
       .handle::after {

package/components/ui-image/ui-image.js

@@ -2,7 +2,7 @@
  * @lifecycle Pointer capture ends on release, Escape, cancellation, or teardown.
  * Only release commits a drag, so consumers can make it one undo operation.
  */
-export default function controller(host) {
+function connect(host) {
   const root = host.element;
   const frame = host.refs.frame;
   const document = root.ownerDocument;
@@ -105,3 +105,8 @@ export default function controller(host) {
     document.removeEventListener("keydown", onEscape, true);
   };
 }
+
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+export default function controller(host) {
+  host.on("connect", () => connect(host));
+}

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

@@ -3,9 +3,10 @@
     <prop
       name="type"
       type="keyword"
-      values="text, search, tel, url, email, password, date, month, week, time, datetime-local, number, range, color"
+      values="text, search, tel, url, email, password, date, month, week, time, datetime-local, number, range, color, file"
       default="text"
-    >The native input mode. Number and range modes accept numeric values; the other supported modes accept strings.</prop>
+    >The native input mode. Number and range modes accept numeric values; the other supported modes accept strings. File inputs expose selected files through
+      the native change event's target.files. Their value can only be set to an empty string to clear the selection.</prop>
     <type name="input-value" from="type">
       <option value="text" type="string"></option>
       <option value="search" type="string"></option>
@@ -21,6 +22,7 @@
       <option value="number" type="number"></option>
       <option value="range" type="number"></option>
       <option value="color" type="string"></option>
+      <option value="file" type="string"></option>
     </type>
     <prop name="value" type="input-value"
     >The input's value: text, or a number for type="number" and type="range" fields. Setting or changing it replaces the live text; between changes the user's
@@ -118,13 +120,13 @@
     }
 
     /* Each size reads the hook and then an Input Group's default first, so a group, which draws the frame, can zero it. */
-    :host-state([size="sm"]) {
+    :host([size="sm"]) {
       min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-min-block-size, var(--ui-control-size-sm)));
       padding: var(--ui-space-1) var(--ui-space-2);
       font-size: var(--ui-font-size-sm);
     }
 
-    :host-state([size="lg"]) {
+    :host([size="lg"]) {
       min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-min-block-size, var(--ui-control-size-lg)));
       padding: var(--ui-space-3) var(--ui-space-4);
       font-size: var(--ui-font-size-md);
@@ -134,12 +136,12 @@
        body-size text: below 16px, iOS zooms the page into the focused field. */
     @media (pointer: coarse) {
       :host,
-      :host-state([size="sm"]),
-      :host-state([size="lg"]) {
+      :host([size="sm"]),
+      :host([size="lg"]) {
         font-size: var(--ui-font-size-md);
       }
 
-      :host-state([size="sm"]) {
+      :host([size="sm"]) {
         min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-min-block-size, var(--ui-control-min-block-size)));
       }
     }

package/components/ui-input/ui-input.js

@@ -1,6 +1,6 @@
 // The value attribute only sets the default; a controlled value is applied to the live input. The
 // value is also made the native default, so a form reset returns to it.
-export default function controller(host) {
+function connect(host) {
   return host.effect(() => {
     const value = host.props.value.value;
     if (value === undefined || value === null) return;
@@ -14,3 +14,8 @@ export default function controller(host) {
     input.value = text;
   });
 }
+
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+export default function controller(host) {
+  host.on("connect", () => connect(host));
+}

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

@@ -116,7 +116,7 @@
       }
     }
 
-    :host-state([disabled]),
+    :host([disabled]),
     :host:has(input:disabled) {
       background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
       box-shadow: none;
@@ -154,10 +154,10 @@
       border-inline-start: var(--ui-border-width) solid var(--ui-border-divider);
     }
 
-    :host-state([prefixKind="icon"]) {
+    :host([prefixKind="icon"]) {
       --_ui-default-input-padding-inline-start: var(--ui-space-2);
     }
-    :host-state([prefixKind="icon"]) .affix:first-child {
+    :host([prefixKind="icon"]) .affix:first-child {
       padding-inline-end: 0;
       border-inline-end: 0;
       background: transparent;

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

@@ -15,7 +15,7 @@ const affixProblem = (affix) =>
 // instead, so the input's name stays its label and the affix is read once, with the input. The
 // consumer's own aria-describedby (or a Form Field's) is kept. A press on an affix, or anywhere in
 // the box outside the input, focuses the input without moving its caret or selecting the affix.
-export default function controller(host) {
+function connect(host) {
   const element = host.element;
   let owned = [];
   let described = null;
@@ -65,3 +65,8 @@ export default function controller(host) {
     element.removeEventListener("click", onClick);
   };
 }
+
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+export default function controller(host) {
+  host.on("connect", () => connect(host));
+}

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

@@ -41,16 +41,16 @@
       list-style: none;
     }
 
-    :host-state([as="ol"]),
-    :host-state([markers="disc"]) {
+    :host([as="ol"]),
+    :host([markers="disc"]) {
       padding-inline-start: var(--ui-space-5);
     }
 
-    :host-state([as="ol"]) {
+    :host([as="ol"]) {
       list-style: decimal;
     }
 
-    :host-state([markers="disc"]) {
+    :host([markers="disc"]) {
       list-style: disc;
     }
 
@@ -72,7 +72,7 @@
     }
 
     /* Compact passes its size to the items through private properties, which cross into each item. */
-    :host-state([density="compact"]) {
+    :host([density="compact"]) {
       --_list-gap: var(--ui-list-gap, var(--ui-space-2));
       --_ui-list-item-min-size: 0;
       --_ui-list-item-padding-block: 0;
@@ -82,7 +82,7 @@
       --_ui-list-native-padding-inline: 0;
     }
 
-    :host-state([layout="grid"]) {
+    :host([layout="grid"]) {
       --_list-gap: var(--ui-list-gap, var(--ui-space-3));
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_list-min-item-width)), 1fr));