@threadlabs/looma 0.25.5 → 0.25.7

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/UiTreeItem.d.ts

@@ -6,6 +6,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
         type: PropType<string | null>;
         default: string;
     };
+    actionsVisible: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     container: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -70,6 +74,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
         type: PropType<string | null>;
         default: string;
     };
+    actionsVisible: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     container: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -136,6 +144,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
     disabled: boolean | null;
     expanded: boolean | null;
     accepts: string | null;
+    actionsVisible: boolean | null;
     container: boolean | null;
     dragType: string | null;
     dropDepth: number | null;

package/vue/UiTreeItem.vue

@@ -30,6 +30,14 @@ const propValidityContract = {
         'A comma-separated list of the dragType values this branch accepts dropped inside it. Empty accepts any type. It does not affect drops before or after the\n      item.',
       default: '',
     },
+    actionsVisible: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'actionsvisible' },
+      description:
+        'Keeps the actions slot visible before hover or focus, for persistent status or controls. The label fades beneath its measured width on pointer devices;\n      touch rows retain a separate actions column with a short end fade. Does not change keyboard navigation or start the marquee.',
+      default: false,
+    },
     container: {
       type: { kind: 'terminal', name: 'boolean' },
       required: false,
@@ -136,6 +144,7 @@ const propValidityContract = {
 } as const
 const props = defineProps({
   accepts: { type: null as unknown as PropType<string | null>, default: '' },
+  actionsVisible: { type: null as unknown as PropType<boolean | null>, default: false },
   container: { type: null as unknown as PropType<boolean | null>, default: false },
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
   dragType: { type: null as unknown as PropType<string | null>, default: 'item' },
@@ -152,6 +161,7 @@ const props = defineProps({
 })
 const acceptedProps: Record<string, unknown> = {
   accepts: '',
+  actionsVisible: false,
   container: false,
   disabled: false,
   dragType: 'item',
@@ -174,6 +184,13 @@ const checkedProps = computed(() => ({
     'accepts',
     acceptedProps,
   ) as string,
+  actionsVisible: checkedProp<boolean>(
+    props['actionsVisible'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'actionsVisible',
+    acceptedProps,
+  ) as boolean,
   container: checkedProp<boolean>(
     props['container'],
     { kind: 'terminal', name: 'boolean' },
@@ -486,6 +503,7 @@ const hostState = computed(() =>
   [
     checkedProps.value.selected && 'selected',
     checkedProps.value.disabled && 'disabled',
+    checkedProps.value.actionsVisible && 'actionsVisible',
     isContainer.value && 'isContainer',
   ].filter(Boolean).join(' ')
 )
@@ -536,6 +554,7 @@ useComponentHost(() => import('../components/ui-tree-item/ui-tree-item.js'), {
   },
   propNames: [
     'accepts',
+    'actionsVisible',
     'container',
     'disabled',
     'dragType',
@@ -608,6 +627,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
     :aria-disabled="checkedProps.disabled ?? undefined"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-accepts="reflectedProp('accepts', 'accepts', checkedProps.accepts, undefined, true)"
+    :data-actions-visible="reflectedProp('actionsVisible', 'actions-visible', checkedProps.actionsVisible, undefined, false)"
     :data-container="reflectedProp('container', 'container', checkedProps.container, undefined, false)"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-drag-type="reflectedProp('dragType', 'drag-type', checkedProps.dragType, undefined, true)"
@@ -957,6 +977,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
    the truncation mark while it shows: an ellipsis under it would read as a second one. */
 .row:hover > .label,
 .row:focus-within > .label,
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="actionsVisible"] > .row > .label,
 [data-component~="ui-tree-item"][data-move-source] > .row > .label {
   text-overflow: clip;
   mask-image: linear-gradient(
@@ -968,6 +989,9 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
 
 .row:hover > .label:dir(rtl),
 .row:focus-within > .label:dir(rtl),
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="actionsVisible"]
+  > .row
+  > .label:dir(rtl),
 [data-component~="ui-tree-item"][data-move-source] > .row > .label:dir(rtl) {
   mask-image: linear-gradient(
     to left,
@@ -1056,6 +1080,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
 
 .row:hover > .actions,
 .row:focus-within > .actions,
+[data-component~="ui-tree-item"][data-ui-tree-item-state~="actionsVisible"] > .row > .actions,
 [data-component~="ui-tree-item"][data-move-source] > .row > .actions {
   opacity: 1;
   pointer-events: auto;
@@ -1094,6 +1119,16 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
     );
   }
 
+  /* Persistent content has its own column on touch. Fade only the label's end. */
+  [data-component~="ui-tree-item"][data-ui-tree-item-state~="actionsVisible"] > .row > .label {
+    mask-image: linear-gradient(to right, #000 calc(100% - var(--ui-space-1)), transparent 100%);
+  }
+  [data-component~="ui-tree-item"][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,

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 };

package/vue/chunks/UiListItem.js

@@ -6,6 +6,7 @@ var _hoisted_1 = [
 	"aria-current",
 	"data-current",
 	"data-highlighted",
+	"data-leading-interactive",
 	"data-variant",
 	"data-wrap",
 	"data-ui-list-item-state"
@@ -29,6 +30,10 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			type: null,
 			default: false
 		},
+		leadingInteractive: {
+			type: null,
+			default: false
+		},
 		variant: {
 			type: null,
 			default: "row"
@@ -60,6 +65,16 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				description: "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",
@@ -86,6 +101,7 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		const acceptedProps = {
 			current: false,
 			highlighted: false,
+			leadingInteractive: false,
 			variant: "row",
 			wrap: false
 		};
@@ -98,6 +114,10 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				kind: "terminal",
 				name: "boolean"
 			}, false, "highlighted", acceptedProps),
+			leadingInteractive: checkedProp(props["leadingInteractive"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "leadingInteractive", acceptedProps),
 			variant: checkedProp(props["variant"], {
 				kind: "terminal",
 				name: "keyword"
@@ -137,6 +157,7 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			checkedProps.value.variant != null && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
 			checkedProps.value.highlighted && "highlighted",
 			checkedProps.value.current && "current",
+			checkedProps.value.leadingInteractive && "leadingInteractive",
 			checkedProps.value.wrap && "wrap"
 		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
@@ -144,6 +165,7 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				"aria-current": checkedProps.value.current ?? void 0,
 				"data-current": reflectedProp("current", "current", checkedProps.value.current, void 0, false),
 				"data-highlighted": reflectedProp("highlighted", "highlighted", checkedProps.value.highlighted, void 0, false),
+				"data-leading-interactive": reflectedProp("leadingInteractive", "leading-interactive", checkedProps.value.leadingInteractive, void 0, false),
 				"data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
 				"data-wrap": reflectedProp("wrap", "wrap", checkedProps.value.wrap, void 0, false),
 				"data-ui-list-item-state": hostState.value || void 0
@@ -157,6 +179,6 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-9f16562f"]]);
+}), [["__scopeId", "data-v-8b9a3e2b"]]);
 //#endregion
 export { UiListItem_default as t };

package/vue/chunks/UiTreeItem.js

@@ -10,6 +10,7 @@ var _hoisted_1 = [
 	"aria-selected",
 	"aria-disabled",
 	"data-accepts",
+	"data-actions-visible",
 	"data-container",
 	"data-disabled",
 	"data-drag-type",
@@ -52,6 +53,10 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			type: null,
 			default: ""
 		},
+		actionsVisible: {
+			type: null,
+			default: false
+		},
 		container: {
 			type: null,
 			default: false
@@ -118,6 +123,16 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				description: "A comma-separated list of the dragType values this branch accepts dropped inside it. Empty accepts any type. It does not affect drops before or after the\n      item.",
 				default: ""
 			},
+			actionsVisible: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "actionsvisible" },
+				description: "Keeps the actions slot visible before hover or focus, for persistent status or controls. The label fades beneath its measured width on pointer devices;\n      touch rows retain a separate actions column with a short end fade. Does not change keyboard navigation or start the marquee.",
+				default: false
+			},
 			container: {
 				type: {
 					kind: "terminal",
@@ -250,6 +265,7 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		const props = __props;
 		const acceptedProps = {
 			accepts: "",
+			actionsVisible: false,
 			container: false,
 			disabled: false,
 			dragType: "item",
@@ -269,6 +285,10 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				kind: "terminal",
 				name: "string"
 			}, false, "accepts", acceptedProps),
+			actionsVisible: checkedProp(props["actionsVisible"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "actionsVisible", acceptedProps),
 			container: checkedProp(props["container"], {
 				kind: "terminal",
 				name: "boolean"
@@ -422,6 +442,7 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		const hostState = computed(() => [
 			checkedProps.value.selected && "selected",
 			checkedProps.value.disabled && "disabled",
+			checkedProps.value.actionsVisible && "actionsVisible",
 			isContainer.value && "isContainer"
 		].filter(Boolean).join(" "));
 		const isExpandDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["id"] === "string" && typeof detail["expanded"] === "boolean" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
@@ -475,6 +496,7 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			},
 			propNames: [
 				"accepts",
+				"actionsVisible",
 				"container",
 				"disabled",
 				"dragType",
@@ -535,6 +557,7 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				"aria-selected": checkedProps.value.selected ?? void 0,
 				"aria-disabled": checkedProps.value.disabled ?? void 0,
 				"data-accepts": reflectedProp("accepts", "accepts", checkedProps.value.accepts, void 0, true),
+				"data-actions-visible": reflectedProp("actionsVisible", "actions-visible", checkedProps.value.actionsVisible, void 0, false),
 				"data-container": reflectedProp("container", "container", checkedProps.value.container, void 0, false),
 				"data-disabled": reflectedProp("disabled", "disabled", checkedProps.value.disabled, void 0, false),
 				"data-drag-type": reflectedProp("dragType", "drag-type", checkedProps.value.dragType, void 0, true),
@@ -676,6 +699,6 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-f2ec0a81"]]);
+}), [["__scopeId", "data-v-dc15f210"]]);
 //#endregion
 export { UiTreeItem_default as t };