@threadlabs/looma 0.25.5 → 0.25.7

package/package.json

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

package/styles/ui-cluster.css

@@ -63,6 +63,9 @@
     :scope[data-ui-cluster-state~="align=end"] {
       align-items: flex-end;
     }
+    :scope[data-ui-cluster-state~="align=baseline"] {
+      align-items: baseline;
+    }
     :scope[data-ui-cluster-state~="align=stretch"] {
       align-items: stretch;
     }

package/styles/ui-list-item.css

@@ -53,11 +53,11 @@
       background: var(--ui-surface-raised);
     }
 
-    :scope:has(.title a[href]:hover) {
-      background: var(--ui-surface-hover);
+    :scope:where(:has(.title a[href])):hover {
+      background: var(--ui-selection-surface);
     }
 
-    :scope[data-ui-list-item-state~="variant=card"]:has(.title a[href]:hover) {
+    :scope[data-ui-list-item-state~="variant=card"]:where(:has(.title a[href])):hover {
       border-color: var(--ui-border-strong);
     }
 
@@ -91,6 +91,12 @@
       color: var(--ui-selection-text);
     }
 
+    /* An explicitly independent leading control sits above the stretched row link. */
+    :scope[data-ui-list-item-state~="leadingInteractive"] .leading {
+      position: relative;
+      z-index: 1;
+    }
+
     /* Trailing controls take their own clicks, above the title link's stretched hit area. */
     .trailing {
       position: relative;
@@ -170,6 +176,8 @@
        a router, a modified click, and "open in new tab" all work. Trailing controls sit above it and
        stay their own. */
 
+    /* An explicitly independent leading control sits above the stretched row link. */
+
     /* Trailing controls take their own clicks, above the title link's stretched hit area. */
 
     .title > :where([data-slotted], [data-slotted] *):is(a) {

package/styles/ui-tree-item.css

@@ -253,6 +253,7 @@
        the truncation mark while it shows: an ellipsis under it would read as a second one. */
     .row:hover > .label,
     .row:focus-within > .label,
+    :scope[data-ui-tree-item-state~="actionsVisible"] > .row > .label,
     :scope[data-move-source] > .row > .label {
       text-overflow: clip;
       mask-image: linear-gradient(
@@ -264,6 +265,7 @@
 
     .row:hover > .label:dir(rtl),
     .row:focus-within > .label:dir(rtl),
+    :scope[data-ui-tree-item-state~="actionsVisible"] > .row > .label:dir(rtl),
     :scope[data-move-source] > .row > .label:dir(rtl) {
       mask-image: linear-gradient(
         to left,
@@ -331,6 +333,7 @@
 
     .row:hover > .actions,
     .row:focus-within > .actions,
+    :scope[data-ui-tree-item-state~="actionsVisible"] > .row > .actions,
     :scope[data-move-source] > .row > .actions {
       opacity: 1;
       pointer-events: auto;
@@ -367,6 +370,14 @@
         );
       }
 
+      /* Persistent content has its own column on touch. Fade only the label's end. */
+      :scope[data-ui-tree-item-state~="actionsVisible"] > .row > .label {
+        mask-image: linear-gradient(to right, #000 calc(100% - var(--ui-space-1)), transparent 100%);
+      }
+      :scope[data-ui-tree-item-state~="actionsVisible"] > .row > .label:dir(rtl) {
+        mask-image: linear-gradient(to left, #000 calc(100% - var(--ui-space-1)), transparent 100%);
+      }
+
       .row[data-ui-marquee] > .label:dir(rtl) {
         mask-image: linear-gradient(
           to left,
@@ -620,6 +631,8 @@
 
     /* Without hover there is no reveal, so the controls keep their own column. */
     @media (hover: none), (pointer: coarse) {
+
+      /* Persistent content has its own column on touch. Fade only the label's end. */
     }
 
     /* The handle sits beside what it drags. A leaf row has no disclosure, so the handle takes that

package/vanilla/UiCheckbox.d.ts

@@ -11,6 +11,7 @@ export interface UiCheckboxProps {
   disabled?: boolean | null;
   indeterminate?: boolean | null;
   invalid?: boolean | null;
+  label?: string | null;
   name?: string | null;
   required?: boolean | null;
   size?: "sm" | "md" | "lg" | null;

package/vanilla/UiCheckbox.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-checkbox/ui-checkbox.js";
 import "../styles/ui-checkbox.css";
 
-const definition = {...{"contract":{"tag":"ui-checkbox","props":{"checked":{"type":"boolean","required":false,"target":{"attribute":"checked"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"indeterminate":{"type":"boolean","required":false,"target":{"property":"indeterminate"},"default":false},"invalid":{"type":"boolean","required":false,"target":{"attribute":"aria-invalid"},"default":false},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["sm","md","lg"],"required":false,"target":{"attribute":"size"},"default":"md"},"value":{"type":"string","required":false,"target":{"attribute":"value"},"default":"on"}}},"template":{"kind":"element","name":"label","attributes":[],"children":[{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"type","value":"checkbox"},{"kind":"property","key":"checked","name":"checked","expression":"internalChecked","expressionPlan":{"source":"internalChecked","ast":{"kind":"id","name":"internalChecked"},"dependencies":["internalChecked"]}},{"kind":"property","key":"indeterminate","name":"indeterminate","expression":"indeterminate","expressionPlan":{"source":"indeterminate","ast":{"kind":"id","name":"indeterminate"},"dependencies":["indeterminate"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"aria-invalid","expression":"invalid","expressionPlan":{"source":"invalid","ast":{"kind":"id","name":"invalid"},"dependencies":["invalid"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"name","expression":"name","expressionPlan":{"source":"name","ast":{"kind":"id","name":"name"},"dependencies":["name"]}},{"kind":"attribute","name":"value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}}],"children":[],"ref":"input"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"text"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"description"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"slot","fallback":[],"name":"description"}],"ref":"description"}]}]},"declarations":[{"kind":"state","name":"internalChecked","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"change","type":"object","shape":{"kind":"object","fields":[{"name":"checked","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"value","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"label","choices":["label"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-checkbox","props":{"checked":{"type":"boolean","required":false,"target":{"attribute":"checked"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"indeterminate":{"type":"boolean","required":false,"target":{"property":"indeterminate"},"default":false},"invalid":{"type":"boolean","required":false,"target":{"attribute":"aria-invalid"},"default":false},"label":{"type":"string","required":false,"target":{"attribute":"aria-label"},"default":""},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["sm","md","lg"],"required":false,"target":{"attribute":"size"},"default":"md"},"value":{"type":"string","required":false,"target":{"attribute":"value"},"default":"on"}}},"template":{"kind":"element","name":"label","attributes":[],"children":[{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"type","value":"checkbox"},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}},{"kind":"property","key":"checked","name":"checked","expression":"internalChecked","expressionPlan":{"source":"internalChecked","ast":{"kind":"id","name":"internalChecked"},"dependencies":["internalChecked"]}},{"kind":"property","key":"indeterminate","name":"indeterminate","expression":"indeterminate","expressionPlan":{"source":"indeterminate","ast":{"kind":"id","name":"indeterminate"},"dependencies":["indeterminate"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"aria-invalid","expression":"invalid","expressionPlan":{"source":"invalid","ast":{"kind":"id","name":"invalid"},"dependencies":["invalid"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"name","expression":"name","expressionPlan":{"source":"name","ast":{"kind":"id","name":"name"},"dependencies":["name"]}},{"kind":"attribute","name":"value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}}],"children":[],"ref":"input"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"text"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"description"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"slot","fallback":[],"name":"description"}],"ref":"description"}]}]},"declarations":[{"kind":"state","name":"internalChecked","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"change","type":"object","shape":{"kind":"object","fields":[{"name":"checked","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"value","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"label","choices":["label"]}},source:{file:import.meta.url},css:""};
 
 export function createUiCheckbox(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -16,23 +16,26 @@ export function createUiCheckbox(options = {}) {
   element.setAttribute("data-component", "ui-checkbox");
   const element0 = document.createElement("input");
   element0.setAttribute("type", "checkbox");
-  const value0 = componentProps["indeterminate"] === undefined ? false : componentProps["indeterminate"];
-  if (value0 !== undefined) element0["indeterminate"] = value0;
-  const value1 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
-  if (value1 === true) element0.setAttribute("disabled", "");
+  const value0 = componentProps["label"] === undefined ? "" : componentProps["label"];
+  if (value0 === null || value0 === undefined) element0.removeAttribute("aria-label");
+  else element0.setAttribute("aria-label", String(value0));
+  const value1 = componentProps["indeterminate"] === undefined ? false : componentProps["indeterminate"];
+  if (value1 !== undefined) element0["indeterminate"] = value1;
+  const value2 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
+  if (value2 === true) element0.setAttribute("disabled", "");
   else element0.removeAttribute("disabled");
-  const value2 = componentProps["invalid"] === undefined ? false : componentProps["invalid"];
-  if (typeof value2 === "boolean") element0.setAttribute("aria-invalid", String(value2));
+  const value3 = componentProps["invalid"] === undefined ? false : componentProps["invalid"];
+  if (typeof value3 === "boolean") element0.setAttribute("aria-invalid", String(value3));
   else element0.removeAttribute("aria-invalid");
-  const value3 = componentProps["required"] === undefined ? false : componentProps["required"];
-  if (value3 === true) element0.setAttribute("required", "");
+  const value4 = componentProps["required"] === undefined ? false : componentProps["required"];
+  if (value4 === true) element0.setAttribute("required", "");
   else element0.removeAttribute("required");
-  const value4 = componentProps["name"] === undefined ? "" : componentProps["name"];
-  if (value4 === null || value4 === undefined) element0.removeAttribute("name");
-  else element0.setAttribute("name", String(value4));
-  const value5 = componentProps["value"] === undefined ? "on" : componentProps["value"];
-  if (value5 === null || value5 === undefined) element0.removeAttribute("value");
-  else element0.setAttribute("value", String(value5));
+  const value5 = componentProps["name"] === undefined ? "" : componentProps["name"];
+  if (value5 === null || value5 === undefined) element0.removeAttribute("name");
+  else element0.setAttribute("name", String(value5));
+  const value6 = componentProps["value"] === undefined ? "on" : componentProps["value"];
+  if (value6 === null || value6 === undefined) element0.removeAttribute("value");
+  else element0.setAttribute("value", String(value6));
   element.append(element0);
   const element1 = document.createElement("span");
   element1.setAttribute("class", "text");

package/vanilla/UiCluster.d.ts

@@ -6,7 +6,7 @@ export interface UiClusterElement extends HTMLDivElement {
   removeEventListener<K extends keyof UiClusterEventMap>(type: K, listener: (this: UiClusterElement, event: UiClusterEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
 }
 export interface UiClusterProps {
-  align?: "start" | "center" | "end" | "stretch" | null;
+  align?: "start" | "center" | "end" | "stretch" | "baseline" | null;
   fixed?: boolean | null;
   gap?: "xs" | "s" | "m" | "l" | "xl" | null;
   justify?: "start" | "center" | "end" | "between" | null;

package/vanilla/UiCluster.js

@@ -28,7 +28,7 @@ export function createUiCluster(options = {}) {
   } else {
   }
   manageGeneratedProps(element, [
-    { name: "align", attribute: "data-align", value: componentProps["align"], type: ["start","center","end","stretch"], required: false },
+    { name: "align", attribute: "data-align", value: componentProps["align"], type: ["start","center","end","stretch","baseline"], required: false },
     { name: "fixed", attribute: "data-fixed", value: componentProps["fixed"], default: false, type: "boolean", required: false },
     { name: "gap", attribute: "data-gap", value: componentProps["gap"], type: ["xs","s","m","l","xl"], required: false },
     { name: "justify", attribute: "data-justify", value: componentProps["justify"], type: ["start","center","end","between"], required: false },

package/vanilla/UiListItem.d.ts

@@ -8,6 +8,7 @@ export interface UiListItemElement extends HTMLLIElement {
 export interface UiListItemProps {
   current?: boolean | null;
   highlighted?: boolean | null;
+  leadingInteractive?: boolean | null;
   variant?: "row" | "card" | null;
   wrap?: boolean | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;

package/vanilla/UiListItem.js

@@ -7,8 +7,9 @@ export function createUiListItem(options = {}) {
   const projected = [];
   const prop0 = componentProps["current"] === undefined ? false : componentProps["current"];
   const prop1 = componentProps["highlighted"] === undefined ? false : componentProps["highlighted"];
-  const prop2 = componentProps["variant"] === undefined ? "row" : componentProps["variant"];
-  const prop3 = componentProps["wrap"] === undefined ? false : componentProps["wrap"];
+  const prop2 = componentProps["leadingInteractive"] === undefined ? false : componentProps["leadingInteractive"];
+  const prop3 = componentProps["variant"] === undefined ? "row" : componentProps["variant"];
+  const prop4 = componentProps["wrap"] === undefined ? false : componentProps["wrap"];
   const element = document.createElement("li");
   for (const [name, value] of Object.entries(attributes)) {
     if (value === null || value === undefined || value === false) continue;
@@ -72,6 +73,7 @@ export function createUiListItem(options = {}) {
   manageGeneratedProps(element, [
     { name: "current", attribute: "data-current", value: componentProps["current"], default: false, type: "boolean", required: false },
     { name: "highlighted", attribute: "data-highlighted", value: componentProps["highlighted"], default: false, type: "boolean", required: false },
+    { name: "leadingInteractive", attribute: "data-leading-interactive", value: componentProps["leadingInteractive"], default: false, type: "boolean", required: false },
     { name: "variant", attribute: "data-variant", value: componentProps["variant"], default: "row", type: ["row","card"], required: false },
     { name: "wrap", attribute: "data-wrap", value: componentProps["wrap"], default: false, type: "boolean", required: false },
   ], (name, value) => {

package/vanilla/UiTreeItem.d.ts

@@ -8,6 +8,7 @@ export interface UiTreeItemElement extends HTMLDivElement {
 }
 export interface UiTreeItemProps {
   accepts?: string | null;
+  actionsVisible?: boolean | null;
   container?: boolean | null;
   disabled?: boolean | null;
   dragType?: string | null;

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":""},"lazy":{"type":"boolean","required":false,"target":{"attribute":"lazy"},"default":false},"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":"{ true: concat('Cancel moving ', label), false: concat('Drag ', label, ' to reorder') }[concat(moving)]","expressionPlan":{"source":"{ true: concat('Cancel moving ', label), false: concat('Drag ', label, ' to reorder') }[concat(moving)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"call","fn":"concat","args":[{"kind":"literal","value":"Cancel moving "},{"kind":"id","name":"label"}]}},{"key":"false","value":{"kind":"call","fn":"concat","args":[{"kind":"literal","value":"Drag "},{"kind":"id","name":"label"},{"kind":"literal","value":" to reorder"}]}}]},"index":{"kind":"call","fn":"concat","args":[{"kind":"id","name":"moving"}]}},"dependencies":["label","moving"]}}],"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":"label","attributes":[{"kind":"literal","name":"class","value":"selection-hit"}],"children":[{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"class","value":"selection-checkbox"},{"kind":"literal","name":"type","value":"checkbox"},{"kind":"literal","name":"tabindex","value":"-1"},{"kind":"attribute","name":"checked","expression":"selected","expressionPlan":{"source":"selected","ast":{"kind":"id","name":"selected"},"dependencies":["selected"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"aria-label","expression":"concat('Select ', label)","expressionPlan":{"source":"concat('Select ', label)","ast":{"kind":"call","fn":"concat","args":[{"kind":"literal","value":"Select "},{"kind":"id","name":"label"}]},"dependencies":["label"]}}],"children":[]}]},{"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":"text","value":"$label","expressionPlan":{"source":"$label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"name":"label"}],"ref":"labelText"}],"ref":"label"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"actions"}],"children":[{"kind":"element","name":"ui-button","attributes":[{"kind":"literal","name":"data-tree-cancel-move","value":""},{"kind":"literal","name":"variant","value":"ghost"},{"kind":"literal","name":"tone","value":"neutral"},{"kind":"literal","name":"size","value":"sm"},{"kind":"literal","name":"aria-label","value":"Cancel move"}],"children":[{"kind":"text","value":"Cancel"}],"flow":{"kind":"if","test":"moving","testPlan":{"source":"moving","ast":{"kind":"id","name":"moving"},"dependencies":["moving"]}}},{"kind":"element","name":"span","attributes":[],"children":[{"kind":"slot","fallback":[],"name":"actions"}],"flow":{"kind":"else"}}],"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","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"structuralLevel","type":"integer","value":"1","expression":{"source":"1","ast":{"kind":"literal","value":1},"dependencies":[]}},{"kind":"state","name":"tabStop","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"isContainer","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"moving","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"expand","type":"object","shape":{"kind":"object","fields":[{"name":"id","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"expanded","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"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":""},"actionsVisible":{"type":"boolean","required":false,"target":{"attribute":"actionsvisible"},"default":false},"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":""},"lazy":{"type":"boolean","required":false,"target":{"attribute":"lazy"},"default":false},"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":"{ true: concat('Cancel moving ', label), false: concat('Drag ', label, ' to reorder') }[concat(moving)]","expressionPlan":{"source":"{ true: concat('Cancel moving ', label), false: concat('Drag ', label, ' to reorder') }[concat(moving)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"call","fn":"concat","args":[{"kind":"literal","value":"Cancel moving "},{"kind":"id","name":"label"}]}},{"key":"false","value":{"kind":"call","fn":"concat","args":[{"kind":"literal","value":"Drag "},{"kind":"id","name":"label"},{"kind":"literal","value":" to reorder"}]}}]},"index":{"kind":"call","fn":"concat","args":[{"kind":"id","name":"moving"}]}},"dependencies":["label","moving"]}}],"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":"label","attributes":[{"kind":"literal","name":"class","value":"selection-hit"}],"children":[{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"class","value":"selection-checkbox"},{"kind":"literal","name":"type","value":"checkbox"},{"kind":"literal","name":"tabindex","value":"-1"},{"kind":"attribute","name":"checked","expression":"selected","expressionPlan":{"source":"selected","ast":{"kind":"id","name":"selected"},"dependencies":["selected"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"aria-label","expression":"concat('Select ', label)","expressionPlan":{"source":"concat('Select ', label)","ast":{"kind":"call","fn":"concat","args":[{"kind":"literal","value":"Select "},{"kind":"id","name":"label"}]},"dependencies":["label"]}}],"children":[]}]},{"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":"text","value":"$label","expressionPlan":{"source":"$label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"name":"label"}],"ref":"labelText"}],"ref":"label"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"actions"}],"children":[{"kind":"element","name":"ui-button","attributes":[{"kind":"literal","name":"data-tree-cancel-move","value":""},{"kind":"literal","name":"variant","value":"ghost"},{"kind":"literal","name":"tone","value":"neutral"},{"kind":"literal","name":"size","value":"sm"},{"kind":"literal","name":"aria-label","value":"Cancel move"}],"children":[{"kind":"text","value":"Cancel"}],"flow":{"kind":"if","test":"moving","testPlan":{"source":"moving","ast":{"kind":"id","name":"moving"},"dependencies":["moving"]}}},{"kind":"element","name":"span","attributes":[],"children":[{"kind":"slot","fallback":[],"name":"actions"}],"flow":{"kind":"else"}}],"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","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"structuralLevel","type":"integer","value":"1","expression":{"source":"1","ast":{"kind":"literal","value":1},"dependencies":[]}},{"kind":"state","name":"tabStop","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"isContainer","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"moving","type":"boolean","value":"false","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"expand","type":"object","shape":{"kind":"object","fields":[{"name":"id","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"expanded","type":{"kind":"terminal","name":"boolean"},"optional":false},{"name":"trigger","type":{"kind":"constrained","base":{"kind":"terminal","name":"keyword"},"values":["keyboard","pointer","programmatic"]},"optional":false}],"open":false},"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 = {}, ...componentProps } = options;

package/vue/UiCheckbox.d.ts

@@ -18,6 +18,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
         type: PropType<boolean | null>;
         default: boolean;
     };
+    label: {
+        type: PropType<string | null>;
+        default: string;
+    };
     name: {
         type: PropType<string | null>;
         default: string;
@@ -59,6 +63,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
         type: PropType<boolean | null>;
         default: boolean;
     };
+    label: {
+        type: PropType<string | null>;
+        default: string;
+    };
     name: {
         type: PropType<string | null>;
         default: string;
@@ -84,6 +92,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
     "onUpdate:checked"?: ((value: boolean) => any) | undefined;
     "onUpdate:value"?: ((value: string) => any) | undefined;
 }>, {
+    label: string | null;
     name: string | null;
     value: string | null;
     invalid: boolean | null;

package/vue/UiCheckbox.vue

@@ -53,6 +53,14 @@ const propValidityContract = {
         'Exposes an externally validated error and styles the checkbox with the field danger colour.',
       default: false,
     },
+    label: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'aria-label' },
+      description:
+        'An accessible name for a checkbox without a visible label slot. It names the native input.',
+      default: '',
+    },
     name: {
       type: { kind: 'terminal', name: 'string' },
       required: false,
@@ -93,6 +101,7 @@ const props = defineProps({
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
   indeterminate: { type: null as unknown as PropType<boolean | null>, default: false },
   invalid: { type: null as unknown as PropType<boolean | null>, default: false },
+  label: { type: null as unknown as PropType<string | null>, default: '' },
   name: { type: null as unknown as PropType<string | null>, default: '' },
   required: { type: null as unknown as PropType<boolean | null>, default: false },
   size: { type: null as unknown as PropType<'sm' | 'md' | 'lg' | null>, default: 'md' },
@@ -103,6 +112,7 @@ const acceptedProps: Record<string, unknown> = {
   disabled: false,
   indeterminate: false,
   invalid: false,
+  label: '',
   name: '',
   required: false,
   size: 'md',
@@ -137,6 +147,13 @@ const checkedProps = computed(() => ({
     'invalid',
     acceptedProps,
   ) as boolean,
+  label: checkedProp<string>(
+    props['label'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'label',
+    acceptedProps,
+  ) as string,
   name: checkedProp<string>(
     props['name'],
     { kind: 'terminal', name: 'string' },
@@ -302,6 +319,7 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
     'disabled',
     'indeterminate',
     'invalid',
+    'label',
     'name',
     'required',
     'size',
@@ -323,6 +341,7 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-indeterminate="reflectedProp('indeterminate', 'indeterminate', checkedProps.indeterminate, undefined, false)"
     :data-invalid="reflectedProp('invalid', 'invalid', checkedProps.invalid, undefined, false)"
+    :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
     :data-name="reflectedProp('name', 'name', checkedProps.name, undefined, false)"
     :data-required="reflectedProp('required', 'required', checkedProps.required, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
@@ -338,6 +357,7 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
         nativeProperty: true,
         defaultChecked: false,
       }"
+      :aria-label="checkedProps.label ?? undefined"
       :indeterminate.prop="checkedProps.indeterminate as any"
       :disabled="checkedProps.disabled ?? undefined"
       :aria-invalid="checkedProps.invalid ?? undefined"

package/vue/UiCluster.d.ts

@@ -5,7 +5,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     align: {
-        type: PropType<"start" | "center" | "end" | "stretch" | null>;
+        type: PropType<"start" | "center" | "end" | "stretch" | "baseline" | null>;
         default: null;
     };
     fixed: {
@@ -34,7 +34,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     align: {
-        type: PropType<"start" | "center" | "end" | "stretch" | null>;
+        type: PropType<"start" | "center" | "end" | "stretch" | "baseline" | null>;
         default: null;
     };
     fixed: {
@@ -62,7 +62,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: null;
     };
 }>> & Readonly<{}>, {
-    align: "center" | "start" | "stretch" | "end" | null;
+    align: "center" | "start" | "stretch" | "end" | "baseline" | null;
     padding: "s" | "none" | "m" | "l" | null;
     fixed: boolean | null;
     gap: "s" | "xs" | "m" | "l" | "xl" | null;

package/vue/UiCluster.vue

@@ -13,8 +13,8 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'align' },
       description:
-        'How items line up within each row: center (the default) aligns their middles, start their tops, end their bottoms, and stretch makes every item as tall as\n      its row.',
-      values: ['start', 'center', 'end', 'stretch'],
+        'How items line up within each row: center (the default) aligns their middles, start their tops, end their bottoms, and stretch makes every item as tall as\n      its row. baseline aligns the first text baselines, including multiline columns.',
+      values: ['start', 'center', 'end', 'stretch', 'baseline'],
     },
     fixed: {
       type: { kind: 'terminal', name: 'boolean' },
@@ -68,7 +68,7 @@ const propValidityContract = {
 } as const
 const props = defineProps({
   align: {
-    type: null as unknown as PropType<'start' | 'center' | 'end' | 'stretch' | null>,
+    type: null as unknown as PropType<'start' | 'center' | 'end' | 'stretch' | 'baseline' | null>,
     default: null,
   },
   fixed: { type: null as unknown as PropType<boolean | null>, default: false },
@@ -94,7 +94,7 @@ const acceptedProps: Record<string, unknown> = {
   wrap: null,
 }
 const checkedProps = computed(() => ({
-  align: checkedProp<'start' | 'center' | 'end' | 'stretch'>(
+  align: checkedProp<'start' | 'center' | 'end' | 'stretch' | 'baseline'>(
     props['align'],
     { kind: 'terminal', name: 'keyword' },
     false,
@@ -304,6 +304,9 @@ const hostState = computed(() =>
 [data-component~="ui-cluster"][data-ui-cluster-state~="align=end"] {
   align-items: flex-end;
 }
+[data-component~="ui-cluster"][data-ui-cluster-state~="align=baseline"] {
+  align-items: baseline;
+}
 [data-component~="ui-cluster"][data-ui-cluster-state~="align=stretch"] {
   align-items: stretch;
 }

package/vue/UiListItem.d.ts

@@ -18,6 +18,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<boolean | null>;
         default: boolean;
     };
+    leadingInteractive: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     variant: {
         type: PropType<"row" | "card" | null>;
         default: string;
@@ -35,6 +39,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<boolean | null>;
         default: boolean;
     };
+    leadingInteractive: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     variant: {
         type: PropType<"row" | "card" | null>;
         default: string;
@@ -48,6 +56,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     current: boolean | null;
     wrap: boolean | null;
     highlighted: boolean | null;
+    leadingInteractive: boolean | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;