@threadlabs/looma 0.10.10 → 0.10.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.10.10",
+  "version": "0.10.12",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-list-item.css

@@ -0,0 +1,146 @@
+/* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@scope ([data-component~="ui-list-item"]) to ([data-component], [data-slotted]) {
+/* One entry in a list: something to recognise (leading, usually an icon), its name (the default
+       slot), one line about it (description), and what it offers (trailing, such as a button or a
+       badge). The title and description are one line each and end in an ellipsis, so every item in a
+       list has the same height.
+
+       A link in the title is the whole item: its hit area stretches over the item, so the icon and the
+       padding follow it too, and the item takes the link's focus ring. The link stays a real link, so
+       a router, a modified click, and "open in new tab" all work. Trailing controls sit above it and
+       stay their own. */
+    :scope {
+      position: relative;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      gap: var(--ui-list-item-gap, var(--ui-space-3));
+      min-inline-size: 0;
+      min-block-size: var(--ui-control-size, 2.5rem);
+      padding-block: var(--ui-list-item-padding-block, var(--ui-space-2));
+      padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-3));
+      border-radius: var(--ui-radius-md);
+      color: var(--ui-text-primary);
+      transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), border-color var(--ui-motion-fast) var(--ui-motion-ease);
+    }
+
+    :scope[data-ui-list-item-state~="variant=card"] {
+      padding-block: var(--ui-list-item-padding-block, var(--ui-space-3));
+      padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-4));
+      border: 1px solid var(--ui-border-default);
+      border-radius: var(--ui-radius-lg);
+      background: var(--ui-surface-raised);
+    }
+
+    :scope:has(.title a[href]:hover) {
+      background: var(--ui-surface-hover);
+    }
+
+    :scope[data-ui-list-item-state~="variant=card"]:has(.title a[href]:hover) {
+      border-color: var(--ui-border-strong);
+    }
+
+    :scope[data-ui-list-item-state~="current"] {
+      background: var(--ui-surface-hover);
+    }
+
+    :scope:has(.title a[href]:focus-visible) {
+      box-shadow: 0 0 0 2px var(--ui-focus-ring);
+    }
+
+    .leading,
+    .trailing {
+      display: inline-flex;
+      flex: none;
+      align-items: center;
+      gap: var(--ui-space-2);
+    }
+
+    .leading {
+      color: var(--ui-text-muted);
+      font-size: var(--ui-list-item-icon-size, var(--ui-font-size-lg));
+    }
+
+    /* Trailing controls take their own clicks, above the title link's stretched hit area. */
+    .trailing {
+      position: relative;
+      z-index: 1;
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-sm);
+    }
+
+    .content {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      gap: var(--ui-space-0-5, 2px);
+      min-inline-size: 0;
+    }
+
+    .title,
+    .description {
+      display: block;
+      min-inline-size: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .title {
+      font-size: var(--ui-font-size-md);
+      font-weight: var(--ui-font-medium);
+      line-height: var(--ui-line-height-tight);
+    }
+
+    .description {
+      color: var(--ui-text-muted);
+      font-size: var(--ui-font-size-sm);
+      line-height: var(--ui-line-height-tight);
+    }
+
+    /* An unused region takes no space. */
+    .leading:empty,
+    .description:empty,
+    .trailing:empty {
+      display: none;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-list-item"]) to ([data-component]) {
+/* One entry in a list: something to recognise (leading, usually an icon), its name (the default
+       slot), one line about it (description), and what it offers (trailing, such as a button or a
+       badge). The title and description are one line each and end in an ellipsis, so every item in a
+       list has the same height.
+
+       A link in the title is the whole item: its hit area stretches over the item, so the icon and the
+       padding follow it too, and the item takes the link's focus ring. The link stays a real link, so
+       a router, a modified click, and "open in new tab" all work. Trailing controls sit above it and
+       stay their own. */
+
+    /* Trailing controls take their own clicks, above the title link's stretched hit area. */
+
+    .title > :where([data-slotted], [data-slotted] *):is(a) {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    .title > :where([data-slotted], [data-slotted] *):is(a:focus-visible) {
+      outline: none;
+      box-shadow: none;
+    }
+
+    .title > :where([data-slotted], [data-slotted] *):is(a[href])::after {
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      content: "";
+    }
+
+    /* An unused region takes no space. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-list.css

@@ -0,0 +1,33 @@
+/* Generated by HTML Next 1.0.0-alpha.5. Do not edit. */
+@scope ([data-component~="ui-list"]) to ([data-component], [data-slotted]) {
+/* A list of items (ui-list-item). It owns the spacing between them, so a view never sets it. The
+       explicit list role keeps the list announced as one: some browsers drop it from a list with no
+       markers. */
+    :scope {
+      display: flex;
+      flex-direction: column;
+      gap: var(--ui-list-gap, var(--ui-space-1));
+      min-inline-size: 0;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    :scope[data-ui-list-state~="layout=grid"] {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ui-list-min-item-width, 14rem)), 1fr));
+      gap: var(--ui-list-gap, var(--ui-space-3));
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-list"]) to ([data-component]) {
+/* A list of items (ui-list-item). It owns the spacing between them, so a view never sets it. The
+       explicit list role keeps the list announced as one: some browsers drop it from a list with no
+       markers. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}

package/styles/ui-tree-item.css

@@ -136,6 +136,9 @@
       block-size: 1em;
       margin-inline-start: var(--ui-space-1);
       color: var(--ui-text-muted);
+      /* Above the label, so a sliding name passes under the icon. */
+      position: relative;
+      z-index: 1;
     }
 
     .leading:empty {
@@ -156,6 +159,9 @@
       /* The cell clips: a name longer than the row slides inside it rather than over its icons. */
       overflow: hidden;
       padding: var(--ui-tree-item-label-padding-block, var(--ui-space-1)) var(--ui-tree-item-label-padding-inline, var(--ui-space-2));
+      /* The length of the fade before the controls. The label's one flex child lays out no gap; this
+         is where the controller reads the length in pixels to stop a sliding name before the fade. */
+      column-gap: var(--ui-space-3);
     }
 
     /* Slotted label content fills the cell, so a link is the row's hit area rather than sizing to
@@ -171,6 +177,27 @@
       white-space: nowrap;
     }
 
+    /* The controls sit over the label's end, so the text fades out where they begin. The fade is
+       the truncation mark while it shows: an ellipsis under it would read as a second one. */
+    .row:hover > .label,
+    .row:focus-within > .label {
+      text-overflow: clip;
+      mask-image: linear-gradient(
+        to right,
+        #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
+        transparent calc(100% - var(--_tree-actions-width, 1.75rem))
+      );
+    }
+
+    .row:hover > .label:dir(rtl),
+    .row:focus-within > .label:dir(rtl) {
+      mask-image: linear-gradient(
+        to left,
+        #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
+        transparent calc(100% - var(--_tree-actions-width, 1.75rem))
+      );
+    }
+
     /* A hovered row reads its whole name: the label slides far enough to show the end, waits
        there, and comes back. Only when it actually overflows — the controller measures by how
        much — after the controls have taken their place over its end — and hands over the distance
@@ -182,13 +209,17 @@
       will-change: transform;
     }
 
-    /* While it slides, the start fades too: the name is leaving the cell at both ends, and a hard
-       edge beside the icon reads as a collision rather than as more text. */
+    /* This comes after the hover fade, which it replaces at the same specificity. While the name
+       slides, the label reaches back under the icon (the controller measures how far) with its text
+       where it was, and fades out across that stretch, gone by the icon's middle: the name slips
+       under the icon rather than stopping at a hard edge beside it. */
     .row[data-ui-marquee] > .label {
+      margin-inline-start: calc(-1 * var(--_marquee-lead, 0px));
+      padding-inline-start: calc(var(--_marquee-lead, 0px) + var(--ui-tree-item-label-padding-inline, var(--ui-space-2)));
       mask-image: linear-gradient(
         to right,
-        transparent 0,
-        #000 var(--ui-space-2),
+        transparent calc(var(--_marquee-lead, 0px) / 2),
+        #000 calc(var(--_marquee-lead, 0px) + var(--ui-tree-item-label-padding-inline, var(--ui-space-2))),
         #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
         transparent calc(100% - var(--_tree-actions-width, 1.75rem))
       );
@@ -197,8 +228,8 @@
     .row[data-ui-marquee] > .label:dir(rtl) {
       mask-image: linear-gradient(
         to left,
-        transparent 0,
-        #000 var(--ui-space-2),
+        transparent calc(var(--_marquee-lead, 0px) / 2),
+        #000 calc(var(--_marquee-lead, 0px) + var(--ui-tree-item-label-padding-inline, var(--ui-space-2))),
         #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
         transparent calc(100% - var(--_tree-actions-width, 1.75rem))
       );
@@ -211,27 +242,6 @@
       }
     }
 
-    /* The controls sit over the label's end, so the text fades out where they begin. The fade is
-       the truncation mark while it shows: an ellipsis under it would read as a second one. */
-    .row:hover > .label,
-    .row:focus-within > .label {
-      text-overflow: clip;
-      mask-image: linear-gradient(
-        to right,
-        #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
-        transparent calc(100% - var(--_tree-actions-width, 1.75rem))
-      );
-    }
-
-    .row:hover > .label:dir(rtl),
-    .row:focus-within > .label:dir(rtl) {
-      mask-image: linear-gradient(
-        to left,
-        #000 calc(100% - var(--_tree-actions-width, 1.75rem) - var(--ui-space-3)),
-        transparent calc(100% - var(--_tree-actions-width, 1.75rem))
-      );
-    }
-
     .actions {
       position: absolute;
       z-index: 1;
@@ -408,21 +418,23 @@
       min-inline-size: 0;
     }
 
+    /* The controls sit over the label's end, so the text fades out where they begin. The fade is
+       the truncation mark while it shows: an ellipsis under it would read as a second one. */
+
     /* A hovered row reads its whole name: the label slides far enough to show the end, waits
        there, and comes back. Only when it actually overflows — the controller measures by how
        much — after the controls have taken their place over its end — and hands over the distance
        and a duration from it, so a longer name travels no faster. */
 
-    /* While it slides, the start fades too: the name is leaving the cell at both ends, and a hard
-       edge beside the icon reads as a collision rather than as more text. */
+    /* This comes after the hover fade, which it replaces at the same specificity. While the name
+       slides, the label reaches back under the icon (the controller measures how far) with its text
+       where it was, and fades out across that stretch, gone by the icon's middle: the name slips
+       under the icon rather than stopping at a hard edge beside it. */
 
     /* Reduced motion keeps the fade, which already says the name continues. */
     @media (prefers-reduced-motion: reduce) {
     }
 
-    /* The controls sit over the label's end, so the text fades out where they begin. The fade is
-       the truncation mark while it shows: an ellipsis under it would read as a second one. */
-
     .row:hover > .label > :where([data-slotted], [data-slotted] *):is(*),
     .row:focus-within > .label > :where([data-slotted], [data-slotted] *):is(*) {
       text-overflow: clip;

package/vanilla/UiList.d.ts

@@ -0,0 +1,14 @@
+// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+export interface UiListEventMap {
+}
+export interface UiListElement extends HTMLUListElement {
+  addEventListener<K extends keyof UiListEventMap>(type: K, listener: (this: UiListElement, event: UiListEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiListEventMap>(type: K, listener: (this: UiListElement, event: UiListEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiListProps {
+  layout?: "rows" | "grid" | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiList(props?: UiListProps): UiListElement;

package/vanilla/UiList.js

@@ -0,0 +1,29 @@
+// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
+import "../styles/ui-list.css";
+
+export function createUiList(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const prop0 = componentProps["layout"] === undefined ? "rows" : componentProps["layout"];
+  const element = document.createElement("ul");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === undefined || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  if (!element.hasAttribute("role")) element.setAttribute("role", "list");
+  element.setAttribute("data-component", "ui-list");
+  if (children.length > 0) {
+    for (const child of children) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, ""]);
+      element.append(node);
+    }
+  } else {
+  }
+  manageGeneratedProps(element, [
+    { name: "layout", attribute: "data-layout", value: componentProps["layout"], default: "rows", type: ["rows","grid"], required: false },
+  ]);
+  return element;
+}
+

package/vanilla/UiListItem.d.ts

@@ -0,0 +1,15 @@
+// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+export interface UiListItemEventMap {
+}
+export interface UiListItemElement extends HTMLLIElement {
+  addEventListener<K extends keyof UiListItemEventMap>(type: K, listener: (this: UiListItemElement, event: UiListItemEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
+  removeEventListener<K extends keyof UiListItemEventMap>(type: K, listener: (this: UiListItemElement, event: UiListItemEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
+}
+export interface UiListItemProps {
+  current?: boolean | null;
+  variant?: "row" | "card" | null;
+  attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  children?: readonly (string | Node)[];
+  slots?: Readonly<Record<string, readonly (string | Node)[]>>;
+}
+export declare function createUiListItem(props?: UiListItemProps): UiListItemElement;

package/vanilla/UiListItem.js

@@ -0,0 +1,77 @@
+// Generated by HTML Next 1.0.0-alpha.5 for Vanilla DOM. Do not edit.
+import { manageGeneratedProps } from "@nextwebwg/html-next/generated-runtime";
+import "../styles/ui-list-item.css";
+
+export function createUiListItem(options = {}) {
+  const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;
+  const projected = [];
+  const prop0 = componentProps["current"] === undefined ? false : componentProps["current"];
+  const prop1 = componentProps["variant"] === undefined ? "row" : componentProps["variant"];
+  const element = document.createElement("li");
+  for (const [name, value] of Object.entries(attributes)) {
+    if (value === null || value === undefined || value === false) continue;
+    element.setAttribute(name, value === true ? "" : String(value));
+  }
+  const value0 = prop0;
+  if (typeof value0 === "boolean") element.setAttribute("aria-current", String(value0));
+  else element.removeAttribute("aria-current");
+  element.setAttribute("data-component", "ui-list-item");
+  const element0 = document.createElement("span");
+  element0.setAttribute("class", "leading");
+  if (slots["leading"] ?? [].length > 0) {
+    for (const child of slots["leading"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "leading"]);
+      element0.append(node);
+    }
+  } else {
+  }
+  element.append(element0);
+  const element1 = document.createElement("span");
+  element1.setAttribute("class", "content");
+  const element2 = document.createElement("span");
+  element2.setAttribute("class", "title");
+  if (children.length > 0) {
+    for (const child of children) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, ""]);
+      element2.append(node);
+    }
+  } else {
+  }
+  element1.append(element2);
+  const element3 = document.createElement("span");
+  element3.setAttribute("class", "description");
+  if (slots["description"] ?? [].length > 0) {
+    for (const child of slots["description"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "description"]);
+      element3.append(node);
+    }
+  } else {
+  }
+  element1.append(element3);
+  element.append(element1);
+  const element4 = document.createElement("span");
+  element4.setAttribute("class", "trailing");
+  if (slots["trailing"] ?? [].length > 0) {
+    for (const child of slots["trailing"] ?? []) {
+      const node = typeof child === "string" ? document.createTextNode(child) : child;
+      projected.push([node, "trailing"]);
+      element4.append(node);
+    }
+  } else {
+  }
+  element.append(element4);
+  manageGeneratedProps(element, [
+    { name: "current", attribute: "data-current", value: componentProps["current"], default: false, type: "boolean", required: false },
+    { name: "variant", attribute: "data-variant", value: componentProps["variant"], default: "row", type: ["row","card"], required: false },
+  ], (name, value) => {
+    if (name === "current") {
+      if (value === null || value === undefined) element.removeAttribute("aria-current");
+      else element.setAttribute("aria-current", String(value));
+    }
+  });
+  return element;
+}
+

package/vanilla/UiTreeItem.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-tree-item/ui-tree-item.js";
 import "../styles/ui-tree-item.css";
 
-const definition = {...{"contract":{"tag":"ui-tree-item","props":{"accepts":{"type":"string","required":false,"target":{"attribute":"data-accepts"},"default":""},"container":{"type":"boolean","required":false,"target":{"attribute":"container"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"aria-disabled"},"default":false},"dragType":{"type":"string","required":false,"target":{"attribute":"data-drag-type"},"default":"item"},"dropDepth":{"type":"number","required":false,"target":{"attribute":"data-drop-depth"}},"dropScope":{"type":"string","required":false,"target":{"attribute":"data-drop-scope"},"default":""},"expanded":{"type":"boolean","required":false,"target":{"attribute":"expanded"},"default":false},"itemId":{"type":"string","required":false,"target":{"attribute":"data-item-id"},"default":""},"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":""},"marquee":{"type":"boolean","required":false,"target":{"attribute":"marquee"},"default":false},"selected":{"type":"boolean","required":false,"target":{"attribute":"aria-selected"},"default":false},"sortable":{"type":"boolean","required":false,"target":{"attribute":"sortable"},"default":false},"subtreeDepth":{"type":"number","required":false,"target":{"attribute":"data-subtree-depth"}}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"treeitem"},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}},{"kind":"attribute","name":"aria-level","expression":"structuralLevel","expressionPlan":{"source":"structuralLevel","ast":{"kind":"id","name":"structuralLevel"},"dependencies":["structuralLevel"]}},{"kind":"attribute","name":"aria-selected","expression":"selected","expressionPlan":{"source":"selected","ast":{"kind":"id","name":"selected"},"dependencies":["selected"]}},{"kind":"attribute","name":"aria-disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"data-item-id","expression":"itemId","expressionPlan":{"source":"itemId","ast":{"kind":"id","name":"itemId"},"dependencies":["itemId"]}},{"kind":"attribute","name":"data-drag-type","expression":"dragType","expressionPlan":{"source":"dragType","ast":{"kind":"id","name":"dragType"},"dependencies":["dragType"]}},{"kind":"attribute","name":"data-drop-scope","expression":"dropScope","expressionPlan":{"source":"dropScope","ast":{"kind":"id","name":"dropScope"},"dependencies":["dropScope"]}},{"kind":"attribute","name":"data-accepts","expression":"accepts","expressionPlan":{"source":"accepts","ast":{"kind":"id","name":"accepts"},"dependencies":["accepts"]}},{"kind":"attribute","name":"data-drop-depth","expression":"dropDepth","expressionPlan":{"source":"dropDepth","ast":{"kind":"id","name":"dropDepth"},"dependencies":["dropDepth"]}},{"kind":"attribute","name":"data-subtree-depth","expression":"subtreeDepth","expressionPlan":{"source":"subtreeDepth","ast":{"kind":"id","name":"subtreeDepth"},"dependencies":["subtreeDepth"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"row"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"drag-handle"},{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"draggable","value":"true"},{"kind":"attribute","name":"aria-label","expression":"format('Drag %s to reorder', label)","expressionPlan":{"source":"format('Drag %s to reorder', label)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"Drag %s to reorder"},{"kind":"id","name":"label"}]},"dependencies":["label"]}}],"children":[{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"aria-hidden","value":"true"},{"kind":"literal","name":"focusable","value":"false"},{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2"},{"kind":"literal","name":"stroke-linecap","value":"round"},{"kind":"literal","name":"stroke-linejoin","value":"round"}],"children":[{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"9"},{"kind":"literal","name":"cy","value":"12"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"9"},{"kind":"literal","name":"cy","value":"5"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"9"},{"kind":"literal","name":"cy","value":"19"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"15"},{"kind":"literal","name":"cy","value":"12"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"15"},{"kind":"literal","name":"cy","value":"5"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"15"},{"kind":"literal","name":"cy","value":"19"},{"kind":"literal","name":"r","value":"1"}],"children":[]}]}],"flow":{"kind":"if","test":"sortable and not disabled","testPlan":{"source":"sortable and not disabled","ast":{"kind":"binary","op":"and","left":{"kind":"id","name":"sortable"},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"disabled"}}},"dependencies":["disabled","sortable"]}},"ref":"dragHandle"},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"disclosure"},{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"hidden","expression":"not isContainer","expressionPlan":{"source":"not isContainer","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"isContainer"}},"dependencies":["isContainer"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"disclosure-icon"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}],"ref":"disclosure"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"leading"}],"children":[{"kind":"slot","fallback":[],"name":"leading"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label-text"}],"children":[{"kind":"slot","fallback":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[]}],"name":"label"}],"ref":"labelText"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"actions"}],"children":[{"kind":"slot","fallback":[],"name":"actions"}],"ref":"actions"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"drop-indicator row-drop-indicator"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}],"ref":"row"},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"children"},{"kind":"literal","name":"role","value":"group"},{"kind":"attribute","name":"hidden","expression":"not (isContainer and internalExpanded)","expressionPlan":{"source":"not (isContainer and internalExpanded)","ast":{"kind":"unary","op":"not","operand":{"kind":"binary","op":"and","left":{"kind":"id","name":"isContainer"},"right":{"kind":"id","name":"internalExpanded"}}},"dependencies":["internalExpanded","isContainer"]}}],"children":[{"kind":"slot"}],"ref":"children"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"drop-indicator subtree-drop-indicator"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}]},"declarations":[{"kind":"state","name":"internalExpanded","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"structuralLevel","expression":{"source":"1","ast":{"kind":"literal","value":1},"dependencies":[]}},{"kind":"state","name":"tabStop","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"isContainer","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"expand","type":"object({ id: string, expanded: boolean, trigger: keyboard | pointer | programmatic })","bubbles":false,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-tree-item","props":{"accepts":{"type":"string","required":false,"target":{"attribute":"data-accepts"},"default":""},"container":{"type":"boolean","required":false,"target":{"attribute":"container"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"aria-disabled"},"default":false},"dragType":{"type":"string","required":false,"target":{"attribute":"data-drag-type"},"default":"item"},"dropDepth":{"type":"number","required":false,"target":{"attribute":"data-drop-depth"}},"dropScope":{"type":"string","required":false,"target":{"attribute":"data-drop-scope"},"default":""},"expanded":{"type":"boolean","required":false,"target":{"attribute":"expanded"},"default":false},"itemId":{"type":"string","required":false,"target":{"attribute":"data-item-id"},"default":""},"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":""},"marquee":{"type":"boolean","required":false,"target":{"attribute":"marquee"},"default":false},"selected":{"type":"boolean","required":false,"target":{"attribute":"aria-selected"},"default":false},"sortable":{"type":"boolean","required":false,"target":{"attribute":"sortable"},"default":false},"subtreeDepth":{"type":"number","required":false,"target":{"attribute":"data-subtree-depth"}}}},"template":{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"treeitem"},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}},{"kind":"attribute","name":"aria-level","expression":"structuralLevel","expressionPlan":{"source":"structuralLevel","ast":{"kind":"id","name":"structuralLevel"},"dependencies":["structuralLevel"]}},{"kind":"attribute","name":"aria-selected","expression":"selected","expressionPlan":{"source":"selected","ast":{"kind":"id","name":"selected"},"dependencies":["selected"]}},{"kind":"attribute","name":"aria-disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"data-item-id","expression":"itemId","expressionPlan":{"source":"itemId","ast":{"kind":"id","name":"itemId"},"dependencies":["itemId"]}},{"kind":"attribute","name":"data-drag-type","expression":"dragType","expressionPlan":{"source":"dragType","ast":{"kind":"id","name":"dragType"},"dependencies":["dragType"]}},{"kind":"attribute","name":"data-drop-scope","expression":"dropScope","expressionPlan":{"source":"dropScope","ast":{"kind":"id","name":"dropScope"},"dependencies":["dropScope"]}},{"kind":"attribute","name":"data-accepts","expression":"accepts","expressionPlan":{"source":"accepts","ast":{"kind":"id","name":"accepts"},"dependencies":["accepts"]}},{"kind":"attribute","name":"data-drop-depth","expression":"dropDepth","expressionPlan":{"source":"dropDepth","ast":{"kind":"id","name":"dropDepth"},"dependencies":["dropDepth"]}},{"kind":"attribute","name":"data-subtree-depth","expression":"subtreeDepth","expressionPlan":{"source":"subtreeDepth","ast":{"kind":"id","name":"subtreeDepth"},"dependencies":["subtreeDepth"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"row"}],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"drag-handle"},{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"draggable","value":"true"},{"kind":"attribute","name":"aria-label","expression":"format('Drag %s to reorder', label)","expressionPlan":{"source":"format('Drag %s to reorder', label)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"Drag %s to reorder"},{"kind":"id","name":"label"}]},"dependencies":["label"]}}],"children":[{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"aria-hidden","value":"true"},{"kind":"literal","name":"focusable","value":"false"},{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2"},{"kind":"literal","name":"stroke-linecap","value":"round"},{"kind":"literal","name":"stroke-linejoin","value":"round"}],"children":[{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"9"},{"kind":"literal","name":"cy","value":"12"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"9"},{"kind":"literal","name":"cy","value":"5"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"9"},{"kind":"literal","name":"cy","value":"19"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"15"},{"kind":"literal","name":"cy","value":"12"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"15"},{"kind":"literal","name":"cy","value":"5"},{"kind":"literal","name":"r","value":"1"}],"children":[]},{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"15"},{"kind":"literal","name":"cy","value":"19"},{"kind":"literal","name":"r","value":"1"}],"children":[]}]}],"flow":{"kind":"if","test":"sortable and not disabled","testPlan":{"source":"sortable and not disabled","ast":{"kind":"binary","op":"and","left":{"kind":"id","name":"sortable"},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"disabled"}}},"dependencies":["disabled","sortable"]}},"ref":"dragHandle"},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"disclosure"},{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"hidden","expression":"not isContainer","expressionPlan":{"source":"not isContainer","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"isContainer"}},"dependencies":["isContainer"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"disclosure-icon"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}],"ref":"disclosure"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"leading"}],"children":[{"kind":"slot","fallback":[],"name":"leading"}],"ref":"leading"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label-text"}],"children":[{"kind":"slot","fallback":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[]}],"name":"label"}],"ref":"labelText"}],"ref":"label"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"actions"}],"children":[{"kind":"slot","fallback":[],"name":"actions"}],"ref":"actions"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"drop-indicator row-drop-indicator"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}],"ref":"row"},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"children"},{"kind":"literal","name":"role","value":"group"},{"kind":"attribute","name":"hidden","expression":"not (isContainer and internalExpanded)","expressionPlan":{"source":"not (isContainer and internalExpanded)","ast":{"kind":"unary","op":"not","operand":{"kind":"binary","op":"and","left":{"kind":"id","name":"isContainer"},"right":{"kind":"id","name":"internalExpanded"}}},"dependencies":["internalExpanded","isContainer"]}}],"children":[{"kind":"slot"}],"ref":"children"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"drop-indicator subtree-drop-indicator"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[]}]},"declarations":[{"kind":"state","name":"internalExpanded","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"structuralLevel","expression":{"source":"1","ast":{"kind":"literal","value":1},"dependencies":[]}},{"kind":"state","name":"tabStop","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"isContainer","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"expand","type":"object({ id: string, expanded: boolean, trigger: keyboard | pointer | programmatic })","bubbles":false,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
 
 export function createUiTreeItem(options = {}) {
   const { attributes = {}, children = [], slots = {}, as, ...componentProps } = options;

package/vanilla/index.js

@@ -25,6 +25,8 @@ export * from "./UiGrid.js";
 export * from "./UiIcon.js";
 export * from "./UiIconButton.js";
 export * from "./UiInput.js";
+export * from "./UiList.js";
+export * from "./UiListItem.js";
 export * from "./UiMenu.js";
 export * from "./UiMenuItem.js";
 export * from "./UiPopover.js";

package/vue/UiList.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    layout?: 'rows' | 'grid';
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    layout: "rows" | "grid";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/vue/UiList.js

@@ -0,0 +1,2 @@
+import { t as UiList_default } from "./chunks/UiList.js";
+export { UiList_default as default };

package/vue/UiList.vue

@@ -0,0 +1,60 @@
+<!-- Generated by HTML Next 1.0.0-alpha.5 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed } from 'vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    layout?: 'rows' | 'grid'
+  }>(),
+  {
+    layout: 'rows',
+  },
+)
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.layout && `layout layout=${props.layout}`,
+  ].filter(Boolean).join(' ')
+)
+</script>
+
+<template>
+  <ul
+    data-component="ui-list"
+    role="list"
+    v-bind="$attrs"
+    :data-ui-list-state="hostState || undefined"
+  >
+    <slot />
+  </ul>
+</template>
+
+<style scoped>
+/* A list of items (ui-list-item). It owns the spacing between them, so a view never sets it. The
+       explicit list role keeps the list announced as one: some browsers drop it from a list with no
+       markers. */
+[data-component~="ui-list"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-list-gap, var(--ui-space-1));
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+[data-component~="ui-list"][data-ui-list-state~="layout=grid"] {
+  display: grid;
+  grid-template-columns:
+    repeat(auto-fill, minmax(min(100%, var(--ui-list-min-item-width, 14rem)), 1fr));
+  gap: var(--ui-list-gap, var(--ui-space-3));
+}
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+[data-component~="ui-list"][hidden] {
+  display: none;
+}
+</style>