@threadlabs/looma 0.25.5 → 0.25.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.25.5",
+  "version": "0.25.6",
   "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/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/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;

package/vue/UiListItem.vue

@@ -24,6 +24,14 @@ const propValidityContract = {
         'Gives an item a quiet accent wash without changing its text or announcing selection. Several items may be highlighted, such as new messages. Describe the\n      reason in the item\'s text; use current only for the current destination.',
       default: false,
     },
+    leadingInteractive: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'leadinginteractive' },
+      description:
+        'Makes the leading region an independent control above the row link. Use it for a checkbox or button; keep noninteractive row icons in the title link when\n      combining them with a leading control.',
+      default: false,
+    },
     variant: {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
@@ -46,12 +54,14 @@ const propValidityContract = {
 const props = defineProps({
   current: { type: null as unknown as PropType<boolean | null>, default: false },
   highlighted: { type: null as unknown as PropType<boolean | null>, default: false },
+  leadingInteractive: { type: null as unknown as PropType<boolean | null>, default: false },
   variant: { type: null as unknown as PropType<'row' | 'card' | null>, default: 'row' },
   wrap: { type: null as unknown as PropType<boolean | null>, default: false },
 })
 const acceptedProps: Record<string, unknown> = {
   current: false,
   highlighted: false,
+  leadingInteractive: false,
   variant: 'row',
   wrap: false,
 }
@@ -70,6 +80,13 @@ const checkedProps = computed(() => ({
     'highlighted',
     acceptedProps,
   ) as boolean,
+  leadingInteractive: checkedProp<boolean>(
+    props['leadingInteractive'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'leadingInteractive',
+    acceptedProps,
+  ) as boolean,
   variant: checkedProp<'row' | 'card'>(
     props['variant'],
     { kind: 'terminal', name: 'keyword' },
@@ -148,6 +165,7 @@ const hostState = computed(() =>
     && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
     checkedProps.value.highlighted && 'highlighted',
     checkedProps.value.current && 'current',
+    checkedProps.value.leadingInteractive && 'leadingInteractive',
     checkedProps.value.wrap && 'wrap',
   ].filter(Boolean).join(' ')
 )
@@ -161,6 +179,13 @@ const hostState = computed(() =>
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-current="reflectedProp('current', 'current', checkedProps.current, undefined, false)"
     :data-highlighted="reflectedProp('highlighted', 'highlighted', checkedProps.highlighted, undefined, false)"
+    :data-leading-interactive="reflectedProp(
+      'leadingInteractive',
+      'leading-interactive',
+      checkedProps.leadingInteractive,
+      undefined,
+      false,
+    )"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-list-item-state="hostState || undefined"
@@ -234,12 +259,12 @@ const hostState = computed(() =>
   background: var(--ui-surface-raised);
 }
 
-[data-component~="ui-list-item"]:has(.title a[href]:hover) {
-  background: var(--ui-surface-hover);
+[data-component~="ui-list-item"]:where(:has(.title a[href])):hover {
+  background: var(--ui-selection-surface);
 }
 
-[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"]:has(.title
-  a[href]:hover) {
+[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"]:where(:has(.title
+  a[href])):hover {
   border-color: var(--ui-border-strong);
 }
 
@@ -273,6 +298,12 @@ const hostState = computed(() =>
   color: var(--ui-selection-text);
 }
 
+/* An explicitly independent leading control sits above the stretched row link. */
+[data-component~="ui-list-item"][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;

package/vue/chunks/UiCheckbox.js

@@ -9,6 +9,7 @@ var _hoisted_1 = [
 	"data-disabled",
 	"data-indeterminate",
 	"data-invalid",
+	"data-label",
 	"data-name",
 	"data-required",
 	"data-size",
@@ -16,6 +17,7 @@ var _hoisted_1 = [
 	"data-ui-checkbox-state"
 ];
 var _hoisted_2 = [
+	"aria-label",
 	".indeterminate",
 	"disabled",
 	"aria-invalid",
@@ -55,6 +57,10 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			type: null,
 			default: false
 		},
+		label: {
+			type: null,
+			default: ""
+		},
 		name: {
 			type: null,
 			default: ""
@@ -119,6 +125,16 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				description: "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",
@@ -171,6 +187,7 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			disabled: false,
 			indeterminate: false,
 			invalid: false,
+			label: "",
 			name: "",
 			required: false,
 			size: "md",
@@ -193,6 +210,10 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				kind: "terminal",
 				name: "boolean"
 			}, false, "invalid", acceptedProps),
+			label: checkedProp(props["label"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "label", acceptedProps),
 			name: checkedProp(props["name"], {
 				kind: "terminal",
 				name: "string"
@@ -284,6 +305,7 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				"disabled",
 				"indeterminate",
 				"invalid",
+				"label",
 				"name",
 				"required",
 				"size",
@@ -305,6 +327,7 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				"data-disabled": reflectedProp("disabled", "disabled", checkedProps.value.disabled, void 0, false),
 				"data-indeterminate": reflectedProp("indeterminate", "indeterminate", checkedProps.value.indeterminate, void 0, false),
 				"data-invalid": reflectedProp("invalid", "invalid", checkedProps.value.invalid, void 0, false),
+				"data-label": reflectedProp("label", "label", checkedProps.value.label, void 0, false),
 				"data-name": reflectedProp("name", "name", checkedProps.value.name, void 0, false),
 				"data-required": reflectedProp("required", "required", checkedProps.value.required, void 0, false),
 				"data-size": reflectedProp("size", "size", checkedProps.value.size, void 0, false),
@@ -314,6 +337,7 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				ref: root
 			}), [withDirectives(createElementVNode("input", {
 				type: "checkbox",
+				"aria-label": checkedProps.value.label ?? void 0,
 				".indeterminate": checkedProps.value.indeterminate,
 				disabled: checkedProps.value.disabled ?? void 0,
 				"aria-invalid": checkedProps.value.invalid ?? void 0,
@@ -339,6 +363,6 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-ce204e6e"]]);
+}), [["__scopeId", "data-v-3bebca63"]]);
 //#endregion
 export { UiCheckbox_default as t };

package/vue/chunks/UiCluster.js

@@ -56,12 +56,13 @@ var UiCluster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 				},
 				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.",
+				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. baseline aligns the first text baselines, including multiline columns.",
 				values: [
 					"start",
 					"center",
 					"end",
-					"stretch"
+					"stretch",
+					"baseline"
 				]
 			},
 			fixed: {
@@ -245,6 +246,6 @@ var UiCluster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-e3a64464"]]);
+}), [["__scopeId", "data-v-acd23e4a"]]);
 //#endregion
 export { UiCluster_default as t };