@threadlabs/looma 0.26.26 → 0.27.0

package/vue/UiScrollArea.vue

@@ -26,6 +26,15 @@ const propValidityContract = {
       values: ['vertical', 'horizontal'],
       default: 'vertical',
     },
+    padding: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'padding' },
+      description:
+        'The space inside the scrolling region, on Card\'s scale: xs is 0.5rem, sm 0.75rem, md 1.5rem, and lg 2rem. It scrolls with the content, so the scrollbar and\n      fades stay at the edges.',
+      values: ['none', 'xs', 'sm', 'md', 'lg'],
+      default: 'none',
+    },
     size: {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
@@ -51,6 +60,10 @@ const props = defineProps({
     type: null as unknown as PropType<'vertical' | 'horizontal' | null>,
     default: 'vertical',
   },
+  padding: {
+    type: null as unknown as PropType<'none' | 'xs' | 'sm' | 'md' | 'lg' | null>,
+    default: 'none',
+  },
   size: {
     type: null as unknown as PropType<'content' | 'sm' | 'md' | 'lg' | null>,
     default: 'content',
@@ -60,6 +73,7 @@ const props = defineProps({
 const acceptedProps: Record<string, unknown> = {
   fill: false,
   orientation: 'vertical',
+  padding: 'none',
   size: 'content',
   trim: false,
 }
@@ -78,6 +92,13 @@ const checkedProps = computed(() => ({
     'orientation',
     acceptedProps,
   ) as 'vertical' | 'horizontal',
+  padding: checkedProp<'none' | 'xs' | 'sm' | 'md' | 'lg'>(
+    props['padding'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'padding',
+    acceptedProps,
+  ) as 'none' | 'xs' | 'sm' | 'md' | 'lg',
   size: checkedProp<'content' | 'sm' | 'md' | 'lg'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
@@ -160,6 +181,9 @@ const hostState = computed(() =>
     && `orientation=${encodeURIComponent(checkedProps.value.orientation)}`,
     checkedProps.value.size && 'size',
     checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
+    checkedProps.value.padding && 'padding',
+    checkedProps.value.padding != null
+    && `padding=${encodeURIComponent(checkedProps.value.padding)}`,
   ].filter(Boolean).join(' ')
 )
 
@@ -180,7 +204,7 @@ useComponentHost(() => import('../components/ui-scroll-area/ui-scroll-area.js'),
       ? (incoming[name] ?? incoming[kebab] ?? null)
       : null
   },
-  propNames: ['fill', 'orientation', 'size', 'trim'],
+  propNames: ['fill', 'orientation', 'padding', 'size', 'trim'],
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   refs: { content: contentElement },
@@ -194,6 +218,7 @@ useComponentHost(() => import('../components/ui-scroll-area/ui-scroll-area.js'),
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-fill="reflectedProp('fill', 'fill', checkedProps.fill, undefined, false)"
     :data-orientation="reflectedProp('orientation', 'orientation', checkedProps.orientation, undefined, false)"
+    :data-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
     :data-ui-scroll-area-state="hostState || undefined"
@@ -268,6 +293,19 @@ useComponentHost(() => import('../components/ui-scroll-area/ui-scroll-area.js'),
   max-block-size: 30rem;
 }
 
+[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="padding=xs"] {
+  padding: var(--ui-space-2);
+}
+[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="padding=sm"] {
+  padding: var(--ui-space-3);
+}
+[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="padding=md"] {
+  padding: var(--ui-space-5);
+}
+[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="padding=lg"] {
+  padding: var(--ui-space-6);
+}
+
 /* A component that sets its display still honours the hidden attribute on its root. */
 [data-component~="ui-scroll-area"][hidden] {
   display: none;

package/vue/UiSearchShell.vue

@@ -302,7 +302,7 @@ dialog {
   color: var(--ui-text-primary);
 }
 
-dialog::backdrop {
+dialog:modal::backdrop {
   background: var(--ui-overlay-backdrop);
 }
 

package/vue/UiSection.vue

@@ -191,6 +191,9 @@ const hostState = computed(() =>
   --_ui-selection-context-text: var(--ui-text-primary);
   border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
   border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);
+  /* An accent edge keeps the corners on its side straight. */
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
   background: var(--ui-danger-soft);
 }
 

package/vue/UiToast.vue

@@ -16,7 +16,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'duration' },
       description:
-        'Milliseconds before requesting dismissal; 0 keeps the toast until an action dismisses it. The timer pauses on hover or focus.',
+        'Milliseconds the toast is shown before it dismisses itself; 0 keeps it until an action dismisses it. The timer starts when the toast is shown, starts again\n      each time it is shown, and pauses on hover or focus.',
       default: 0,
     },
     tone: {

package/vue/chunks/UiCard.js

@@ -274,6 +274,6 @@ var UiCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-150bfc3d"]]);
+}), [["__scopeId", "data-v-b5f8424c"]]);
 //#endregion
 export { UiCard_default as t };

package/vue/chunks/UiDialog.js

@@ -20,7 +20,6 @@ var _hoisted_2 = {
 	key: 0,
 	class: "title"
 };
-var _hoisted_3 = { class: "body" };
 var htmlNextAuthoredCheck2Reported = /* @__PURE__ */ new Set();
 function htmlNextAuthoredCheck2(accepted, location, message) {
 	if (!accepted && !htmlNextAuthoredCheck2Reported.has(location)) {
@@ -229,7 +228,10 @@ var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		const hydrationInstance = getCurrentInstance();
 		const emit = __emit;
 		const root = ref(null);
+		const headerElement = useTemplateRef("headerElement");
 		const closeElement = useTemplateRef("closeElement");
+		const bodyElement = useTemplateRef("bodyElement");
+		const footerElement = useTemplateRef("footerElement");
 		const internalOpen = ref(false);
 		const accessibleLabel = ref("Dialog");
 		let guardedPrevious;
@@ -307,7 +309,12 @@ var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				contract: propValidityContract,
 				values: { ...props }
 			}, name),
-			refs: { close: closeElement },
+			refs: {
+				header: headerElement,
+				close: closeElement,
+				body: bodyElement,
+				footer: footerElement
+			},
 			state: {
 				internalOpen,
 				accessibleLabel
@@ -328,24 +335,34 @@ var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				ref_key: "root",
 				ref: root
 			}), [
-				createElementVNode("header", null, [checkedProps.value.label ? (openBlock(), createElementBlock("h2", _hoisted_2, toDisplayString(checkedProps.value.label), 1)) : createCommentVNode("v-if", true), createElementVNode("button", {
+				createElementVNode("header", {
+					ref_key: "headerElement",
+					ref: headerElement
+				}, [checkedProps.value.label ? (openBlock(), createElementBlock("h2", _hoisted_2, toDisplayString(checkedProps.value.label), 1)) : createCommentVNode("v-if", true), createElementVNode("button", {
 					class: "close",
 					type: "button",
 					"aria-label": "Close",
 					ref_key: "closeElement",
 					ref: closeElement
-				}, null, 512)]),
-				createElementVNode("div", _hoisted_3, [createVNode(UiScrollArea_default, { trim: true }, {
+				}, null, 512)], 512),
+				createElementVNode("div", {
+					class: "body",
+					ref_key: "bodyElement",
+					ref: bodyElement
+				}, [createVNode(UiScrollArea_default, { trim: true }, {
 					default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
 					_: 3
-				})]),
-				createElementVNode("footer", null, [renderSlot(_ctx.$slots, "actions", {}, void 0, true)])
+				})], 512),
+				createElementVNode("footer", {
+					ref_key: "footerElement",
+					ref: footerElement
+				}, [renderSlot(_ctx.$slots, "actions", {}, void 0, true)], 512)
 			], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...props }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-6d90ae32"]]);
+}), [["__scopeId", "data-v-1ec9644b"]]);
 //#endregion
 export { UiDialog_default as t };

package/vue/chunks/UiEditorMentionMenu.js

@@ -613,6 +613,6 @@ var UiEditorMentionMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_defaul
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-ba581126"]]);
+}), [["__scopeId", "data-v-f27cd779"]]);
 //#endregion
 export { UiEditorMentionMenu_default as t };

package/vue/chunks/UiEditorSlashMenu.js

@@ -538,6 +538,6 @@ var UiEditorSlashMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-cedd7cd4"]]);
+}), [["__scopeId", "data-v-a85c3b18"]]);
 //#endregion
 export { UiEditorSlashMenu_default as t };

package/vue/chunks/UiEditorTableContextMenu.js

@@ -547,6 +547,6 @@ var UiEditorTableContextMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_d
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-d311fe5d"]]);
+}), [["__scopeId", "data-v-f2ebbbc8"]]);
 //#endregion
 export { UiEditorTableContextMenu_default as t };

package/vue/chunks/UiEditorTableToolbar.js

@@ -737,6 +737,6 @@ var UiEditorTableToolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-b9979342"]]);
+}), [["__scopeId", "data-v-8c2d4497"]]);
 //#endregion
 export { UiEditorTableToolbar_default as t };

package/vue/chunks/UiListbox.js

@@ -19,22 +19,23 @@ var _hoisted_1 = [
 	"data-value",
 	"data-values"
 ];
-var _hoisted_2 = [
+var _hoisted_2 = { class: "choices" };
+var _hoisted_3 = [
 	"data-multiple",
 	"id",
 	"data-index",
 	"aria-selected",
 	"aria-disabled"
 ];
-var _hoisted_3 = [
+var _hoisted_4 = [
 	"size",
 	"multiple",
 	"disabled",
 	"required",
 	"name"
 ];
-var _hoisted_4 = ["name", "^value"];
-var _hoisted_5 = [
+var _hoisted_5 = ["name", "^value"];
+var _hoisted_6 = [
 	"required",
 	"^checked",
 	"disabled"
@@ -498,8 +499,7 @@ var UiListbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 				ref_key: "root",
 				ref: root
 			}), [
-				createVNode(UiScrollArea_default, {
-					class: "choices",
+				createElementVNode("div", _hoisted_2, [createVNode(UiScrollArea_default, {
 					ref_key: "choicesElement",
 					ref: choicesElement
 				}, {
@@ -515,12 +515,12 @@ var UiListbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 								"data-index": choice.index,
 								"aria-selected": choice.selected,
 								"aria-disabled": choice.disabled
-							}, [createElementVNode("span", null, toDisplayString(choice.label), 1)], 10, _hoisted_2);
+							}, [createElementVNode("span", null, toDisplayString(choice.label), 1)], 10, _hoisted_3);
 						}), 128))]),
 						_: 1
 					})]),
 					_: 1
-				}, 512),
+				}, 512)]),
 				createElementVNode("select", {
 					class: "fallback",
 					"aria-label": "Choices",
@@ -531,14 +531,14 @@ var UiListbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					name: checkedProps.value.name ?? void 0,
 					ref_key: "optionsElement",
 					ref: optionsElement
-				}, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 8, _hoisted_3),
+				}, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 8, _hoisted_4),
 				checkedProps.value.name && !checkedProps.value.disabled ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(selection.value, (selected, indexLoop) => {
 					return openBlock(), createElementBlock("input", {
 						key: indexLoop,
 						type: "hidden",
 						name: checkedProps.value.name ?? void 0,
 						"^value": selected
-					}, null, 8, _hoisted_4);
+					}, null, 8, _hoisted_5);
 				}), 128)) : createCommentVNode("v-if", true),
 				createElementVNode("input", {
 					class: "validity",
@@ -550,13 +550,13 @@ var UiListbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					disabled: checkedProps.value.disabled ?? void 0,
 					ref_key: "validityElement",
 					ref: validityElement
-				}, null, 8, _hoisted_5)
+				}, null, 8, _hoisted_6)
 			], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...props }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-1ba46396"]]);
+}), [["__scopeId", "data-v-e7a8688c"]]);
 //#endregion
 export { UiListbox_default as t };

package/vue/chunks/UiScrollArea.js

@@ -6,6 +6,7 @@ import { computed, createElementBlock, createElementVNode, defineComponent, getC
 var _hoisted_1 = [
 	"data-fill",
 	"data-orientation",
+	"data-padding",
 	"data-size",
 	"data-trim",
 	"data-ui-scroll-area-state"
@@ -24,6 +25,10 @@ var UiScrollArea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			type: null,
 			default: "vertical"
 		},
+		padding: {
+			type: null,
+			default: "none"
+		},
 		size: {
 			type: null,
 			default: "content"
@@ -56,6 +61,23 @@ var UiScrollArea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				values: ["vertical", "horizontal"],
 				default: "vertical"
 			},
+			padding: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "padding" },
+				description: "The space inside the scrolling region, on Card's scale: xs is 0.5rem, sm 0.75rem, md 1.5rem, and lg 2rem. It scrolls with the content, so the scrollbar and\n      fades stay at the edges.",
+				values: [
+					"none",
+					"xs",
+					"sm",
+					"md",
+					"lg"
+				],
+				default: "none"
+			},
 			size: {
 				type: {
 					kind: "terminal",
@@ -87,6 +109,7 @@ var UiScrollArea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		const acceptedProps = {
 			fill: false,
 			orientation: "vertical",
+			padding: "none",
 			size: "content",
 			trim: false
 		};
@@ -99,6 +122,10 @@ var UiScrollArea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				kind: "terminal",
 				name: "keyword"
 			}, false, "orientation", acceptedProps),
+			padding: checkedProp(props["padding"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "padding", acceptedProps),
 			size: checkedProp(props["size"], {
 				kind: "terminal",
 				name: "keyword"
@@ -142,7 +169,9 @@ var UiScrollArea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			checkedProps.value.orientation && "orientation",
 			checkedProps.value.orientation != null && `orientation=${encodeURIComponent(checkedProps.value.orientation)}`,
 			checkedProps.value.size && "size",
-			checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`
+			checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
+			checkedProps.value.padding && "padding",
+			checkedProps.value.padding != null && `padding=${encodeURIComponent(checkedProps.value.padding)}`
 		].filter(Boolean).join(" "));
 		const dispatch = createDispatch(root);
 		useComponentHost(() => import("@threadlabs/looma/components/ui-scroll-area/ui-scroll-area.js"), {
@@ -161,6 +190,7 @@ var UiScrollArea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			propNames: [
 				"fill",
 				"orientation",
+				"padding",
 				"size",
 				"trim"
 			],
@@ -174,6 +204,7 @@ var UiScrollArea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			return withDirectives((openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-scroll-area" }, nativeAttrs(_ctx.$attrs), {
 				"data-fill": reflectedProp("fill", "fill", checkedProps.value.fill, void 0, false),
 				"data-orientation": reflectedProp("orientation", "orientation", checkedProps.value.orientation, void 0, false),
+				"data-padding": reflectedProp("padding", "padding", checkedProps.value.padding, void 0, false),
 				"data-size": reflectedProp("size", "size", checkedProps.value.size, void 0, false),
 				"data-trim": reflectedProp("trim", "trim", checkedProps.value.trim, void 0, false),
 				"data-ui-scroll-area-state": hostState.value || void 0,
@@ -189,6 +220,6 @@ var UiScrollArea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-a1ccf697"]]);
+}), [["__scopeId", "data-v-9a5bb175"]]);
 //#endregion
 export { UiScrollArea_default as t };

package/vue/chunks/UiSearchShell.js

@@ -199,6 +199,6 @@ var UiSearchShell_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-0778ed20"]]);
+}), [["__scopeId", "data-v-62b2f3da"]]);
 //#endregion
 export { UiSearchShell_default as t };

package/vue/chunks/UiSection.js

@@ -138,6 +138,6 @@ var UiSection_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-93e8cb94"]]);
+}), [["__scopeId", "data-v-97cdaba4"]]);
 //#endregion
 export { UiSection_default as t };

package/vue/chunks/UiToast.js

@@ -37,7 +37,7 @@ var UiToast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 				},
 				required: false,
 				target: { attribute: "duration" },
-				description: "Milliseconds before requesting dismissal; 0 keeps the toast until an action dismisses it. The timer pauses on hover or focus.",
+				description: "Milliseconds the toast is shown before it dismisses itself; 0 keeps it until an action dismisses it. The timer starts when the toast is shown, starts again\n      each time it is shown, and pauses on hover or focus.",
 				default: 0
 			},
 			tone: {
@@ -174,6 +174,6 @@ var UiToast_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-af4b9641"]]);
+}), [["__scopeId", "data-v-0812e30e"]]);
 //#endregion
 export { UiToast_default as t };