@threadlabs/looma 0.26.2 → 0.26.3

package/vue/UiListItem.vue

@@ -8,6 +8,15 @@ defineOptions({ inheritAttrs: false })
 
 const propValidityContract = {
   props: {
+    align: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'align' },
+      description:
+        'Where the leading and trailing regions sit vertically. center aligns them with the whole row. title aligns them with the first title line, keeping an\n      identifying icon beside its name when the title or description wraps. Taller controls retain their natural height.',
+      values: ['center', 'title'],
+      default: 'center',
+    },
     current: {
       type: { kind: 'terminal', name: 'boolean' },
       required: false,
@@ -52,6 +61,7 @@ const propValidityContract = {
   },
 } as const
 const props = defineProps({
+  align: { type: null as unknown as PropType<'center' | 'title' | null>, default: 'center' },
   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 },
@@ -59,6 +69,7 @@ const props = defineProps({
   wrap: { type: null as unknown as PropType<boolean | null>, default: false },
 })
 const acceptedProps: Record<string, unknown> = {
+  align: 'center',
   current: false,
   highlighted: false,
   leadingInteractive: false,
@@ -66,6 +77,13 @@ const acceptedProps: Record<string, unknown> = {
   wrap: false,
 }
 const checkedProps = computed(() => ({
+  align: checkedProp<'center' | 'title'>(
+    props['align'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'align',
+    acceptedProps,
+  ) as 'center' | 'title',
   current: checkedProp<boolean>(
     props['current'],
     { kind: 'terminal', name: 'boolean' },
@@ -167,6 +185,8 @@ const hostState = computed(() =>
     checkedProps.value.current && 'current',
     checkedProps.value.leadingInteractive && 'leadingInteractive',
     checkedProps.value.wrap && 'wrap',
+    checkedProps.value.align && 'align',
+    checkedProps.value.align != null && `align=${encodeURIComponent(checkedProps.value.align)}`,
   ].filter(Boolean).join(' ')
 )
 </script>
@@ -177,6 +197,7 @@ const hostState = computed(() =>
     v-bind="nativeAttrs($attrs)"
     :aria-current="checkedProps.current ?? undefined"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
+    :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-current="reflectedProp('current', 'current', checkedProps.current, undefined, false)"
     :data-highlighted="reflectedProp('highlighted', 'highlighted', checkedProps.highlighted, undefined, false)"
     :data-leading-interactive="reflectedProp(
@@ -341,6 +362,16 @@ const hostState = computed(() =>
   line-height: var(--ui-line-height-tight);
 }
 
+/* Keep identity and disclosure marks beside the first line, even with a long description. */
+[data-component~="ui-list-item"][data-ui-list-item-state~="align=title"] {
+  align-items: flex-start;
+}
+
+[data-component~="ui-list-item"][data-ui-list-item-state~="align=title"] .leading,
+[data-component~="ui-list-item"][data-ui-list-item-state~="align=title"] .trailing {
+  min-block-size: calc(var(--ui-font-size-md) * var(--ui-line-height-tight));
+}
+
 .description {
   color: var(--ui-text-muted);
   font-size: var(--ui-font-size-sm);

package/vue/UiPopover.d.ts

@@ -63,7 +63,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     }>) => any) | undefined;
 }>, {
     open: boolean | null;
-    size: "sm" | "md" | "content" | "lg" | null;
+    size: "sm" | "md" | "lg" | "content" | null;
     for: string | null;
     placement: "left" | "right" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/vue/UiScrollArea.d.ts

@@ -39,7 +39,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>> & Readonly<{}>, {
     fill: boolean | null;
-    size: "sm" | "md" | "content" | "lg" | null;
+    size: "sm" | "md" | "lg" | "content" | null;
     trim: boolean | null;
     orientation: "vertical" | "horizontal" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/vue/UiTooltip.d.ts

@@ -87,10 +87,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
     }>) => any) | undefined;
 }>, {
     open: boolean | null;
+    inverse: boolean | null;
     trigger: "hover" | "click" | "focus" | null;
     for: string | null;
     hideDelay: number | null;
-    inverse: boolean | null;
     placement: "left" | "right" | "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left-start" | "left-end" | "right-start" | "right-end" | null;
     showDelay: number | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>, {

package/vue/chunks/UiAvatar.js

@@ -125,7 +125,7 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				},
 				required: false,
 				target: { attribute: "shape" },
-				description: "Circle by default; square uses the theme's medium radius.",
+				description: "Circle by default, with a shallow shadow; square uses the theme's medium radius.",
 				values: ["circle", "square"],
 				default: "circle"
 			},
@@ -362,6 +362,6 @@ var UiAvatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-8b3c5fb3"]]);
+}), [["__scopeId", "data-v-03720dc1"]]);
 //#endregion
 export { UiAvatar_default as t };

package/vue/chunks/UiBadge.js

@@ -46,7 +46,7 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 				},
 				required: false,
 				target: { attribute: "shape" },
-				description: "Silhouette. pill is rounded at both ends; tag is a pointed label. dot is a compact circular signal with visually hidden text: include a state label, or set\n      aria-hidden when the surrounding control already names that state. square is a fixed rounded square for an icon or single glyph beside a heading; hide a\n      decorative icon when adjacent words name it. circle frames a visible single glyph or icon in a fixed circle, centered in both directions.",
+				description: "Silhouette. pill is rounded at both ends; tag is a pointed label. dot is a compact circular signal with visually hidden text: include a state label, or set\n      aria-hidden when the surrounding control already names that state. square is a fixed rounded square for an icon or single glyph beside a heading; hide a\n      decorative icon when adjacent words name it. circle frames a visible glyph, icon or short bounded count in a fixed circle, centered in both\n      directions.",
 				values: [
 					"pill",
 					"tag",
@@ -63,8 +63,12 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 				},
 				required: false,
 				target: { attribute: "size" },
-				description: "Scale. xs is a compact count beside small controls; md is the usual text badge. A square is 24px at xs and 32px at md with default spacing. A circle is\n      16px at xs and 24px at md.",
-				values: ["xs", "md"],
+				description: "Scale. xs is compact; md is the usual text badge; lg adds room to fixed marks while retaining the usual text size. A square is 24px at xs, 32px at md and\n      40px at lg. A circle is 16px at xs, 24px at md and 32px at lg; use lg for short counts such as 30 or 99+.",
+				values: [
+					"xs",
+					"md",
+					"lg"
+				],
 				default: "md"
 			},
 			tone: {
@@ -92,11 +96,12 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 				},
 				required: false,
 				target: { attribute: "variant" },
-				description: "Emphasis. subtle sets toned text over a soft wash; solid fills with the tone and uses contrasting text; outline keeps the surface with a toned edge.\n      Neutral looks the same in solid and subtle. When space is constrained, the label truncates with an ellipsis while its full text remains available.",
+				description: "Emphasis. subtle sets toned text over a soft wash; solid fills with the tone and uses contrasting text; outline keeps the surface with a toned edge.\n      inverse uses a translucent contrasting surface and toned ink for a count or label on a filled control of that tone. Neutral looks the same in solid and\n      subtle. When space is constrained, the label truncates with an ellipsis while its full text remains available.",
 				values: [
 					"solid",
 					"subtle",
-					"outline"
+					"outline",
+					"inverse"
 				],
 				default: "subtle"
 			}
@@ -174,6 +179,6 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-c96818e7"]]);
+}), [["__scopeId", "data-v-4d2f1396"]]);
 //#endregion
 export { UiBadge_default as t };

package/vue/chunks/UiListItem.js

@@ -4,6 +4,7 @@ import { computed, createElementBlock, createElementVNode, defineComponent, getC
 //#region .build/vue/UiListItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
 	"aria-current",
+	"data-align",
 	"data-current",
 	"data-highlighted",
 	"data-leading-interactive",
@@ -22,6 +23,10 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 	inheritAttrs: false,
 	__name: "UiListItem",
 	props: {
+		align: {
+			type: null,
+			default: "center"
+		},
 		current: {
 			type: null,
 			default: false
@@ -45,6 +50,17 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 	},
 	setup(__props) {
 		const propValidityContract = { props: {
+			align: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "align" },
+				description: "Where the leading and trailing regions sit vertically. center aligns them with the whole row. title aligns them with the first title line, keeping an\n      identifying icon beside its name when the title or description wraps. Taller controls retain their natural height.",
+				values: ["center", "title"],
+				default: "center"
+			},
 			current: {
 				type: {
 					kind: "terminal",
@@ -99,6 +115,7 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		} };
 		const props = __props;
 		const acceptedProps = {
+			align: "center",
 			current: false,
 			highlighted: false,
 			leadingInteractive: false,
@@ -106,6 +123,10 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			wrap: false
 		};
 		const checkedProps = computed(() => ({
+			align: checkedProp(props["align"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "align", acceptedProps),
 			current: checkedProp(props["current"], {
 				kind: "terminal",
 				name: "boolean"
@@ -158,11 +179,14 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			checkedProps.value.highlighted && "highlighted",
 			checkedProps.value.current && "current",
 			checkedProps.value.leadingInteractive && "leadingInteractive",
-			checkedProps.value.wrap && "wrap"
+			checkedProps.value.wrap && "wrap",
+			checkedProps.value.align && "align",
+			checkedProps.value.align != null && `align=${encodeURIComponent(checkedProps.value.align)}`
 		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
 			return withDirectives((openBlock(), createElementBlock("li", mergeProps({ "data-component": "ui-list-item" }, nativeAttrs(_ctx.$attrs), {
 				"aria-current": checkedProps.value.current ?? void 0,
+				"data-align": reflectedProp("align", "align", checkedProps.value.align, void 0, false),
 				"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),
@@ -179,6 +203,6 @@ var UiListItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-bb9ba09d"]]);
+}), [["__scopeId", "data-v-6c3bc8f3"]]);
 //#endregion
 export { UiListItem_default as t };