@threadlabs/looma 0.26.26 → 0.27.1

package/vue/UiEditorSlashMenu.vue

@@ -394,6 +394,12 @@ useComponentHost(() => import('../components/ui-editor-slash-menu/ui-editor-slas
 </template>
 
 <style scoped>
+[data-component~="ui-editor-slash-menu"][popover] {
+  position: fixed;
+  inset: auto;
+  margin: 0;
+}
+
 [data-component~="ui-editor-slash-menu"] {
   user-select: none;
 }

package/vue/UiEditorTableContextMenu.vue

@@ -654,10 +654,16 @@ function uniqueKeys<T>(
 </template>
 
 <style scoped>
+[data-component~="ui-editor-table-context-menu"][popover] {
+  position: fixed;
+  inset: auto;
+  margin: 0;
+}
+
 [data-component~="ui-editor-table-context-menu"] {
   /* The max-width is a promise about the menu's footprint, so it counts padding and border. */
   box-sizing: border-box;
-  min-width: 14rem;
+  min-width: min(14rem, calc(100vw - 24px));
   max-width: min(17rem, calc(100vw - 24px));
   max-height: min(28rem, calc(100vh - 24px));
   padding: var(--ui-space-2);
@@ -712,16 +718,22 @@ function uniqueKeys<T>(
   color: var(--ui-danger);
 }
 
+/* Swatches wrap like words: the row asks for the menu's full width, and a narrower menu fits fewer. */
 .swatches {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  display: flex;
+  flex-wrap: wrap;
   gap: 3px;
 }
 
-.swatch-button {
+/* Three to a row at the menu's full width; 5rem keeps the longest label, "Default", whole. */
+[data-component~="ui-editor-table-context-menu"] .swatch-button {
   display: inline-flex;
   align-items: center;
   gap: var(--ui-space-2);
+  flex: 1 0 5rem;
+  min-width: 5rem;
+  max-width: calc((100% - 6px) / 3);
+  padding-inline-end: var(--ui-space-1);
 }
 
 .swatch {
@@ -768,6 +780,11 @@ function uniqueKeys<T>(
   margin: var(--ui-space-1) 0;
 }
 
+/* Separators divide sections, so none sits above the first. */
+.sep:first-child {
+  display: none;
+}
+
 [data-component~="ui-editor-table-context-menu"][hidden] {
   display: none;
 }

package/vue/UiEditorTableToolbar.vue

@@ -796,14 +796,6 @@ function uniqueKeys<T>(
   background: var(--ui-accent-soft, var(--ui-accent-subtle));
 }
 
-.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] .menu {
-  top: auto;
-  right: 0;
-  bottom: calc(100% + var(--ui-space-2));
-  max-height: min(50dvh, 22rem);
-  overflow-y: auto;
-  overscroll-behavior: contain;
-}
 [data-component~="ui-editor-table-toolbar"] {
   display: inline-flex;
   align-items: center;
@@ -894,9 +886,9 @@ function uniqueKeys<T>(
 
 .menu {
   box-sizing: border-box;
-  position: absolute;
-  top: calc(100% + var(--ui-space-2));
-  right: 0;
+  position: fixed;
+  inset: auto;
+  margin: 0;
   min-width: 12rem;
   max-width: min(17rem, calc(100vw - 24px));
   padding: var(--ui-space-1);

package/vue/UiListbox.vue

@@ -479,21 +479,23 @@ function uniqueKeys<T>(
     :data-values="reflectedProp('values', 'values', checkedProps.values, undefined, false)"
     ref="root"
   >
-    <UiScrollArea class="choices" ref="choicesElement"><KeyedBoundary><div
-          v-for="choice in uniqueKeys(choices, (choice, index, loop) => choice.index)"
-          :key="choice.index"
-          class="option"
-          role="option"
-          data-ui-choice-option=""
-          :data-multiple="checkedProps.multiple ? '' : undefined"
-          :id="concat(uid, '-option-', choice.index)"
-          :data-index="choice.index"
-          :aria-selected="choice.selected"
-          :aria-disabled="choice.disabled"
-          :class="{ active: choice.index === active }"
-        >
-          <span>{{ choice.label }}</span>
-        </div></KeyedBoundary></UiScrollArea>
+    <div class="choices">
+      <UiScrollArea ref="choicesElement"><KeyedBoundary><div
+            v-for="choice in uniqueKeys(choices, (choice, index, loop) => choice.index)"
+            :key="choice.index"
+            class="option"
+            role="option"
+            data-ui-choice-option=""
+            :data-multiple="checkedProps.multiple ? '' : undefined"
+            :id="concat(uid, '-option-', choice.index)"
+            :data-index="choice.index"
+            :aria-selected="choice.selected"
+            :aria-disabled="choice.disabled"
+            :class="{ active: choice.index === active }"
+          >
+            <span>{{ choice.label }}</span>
+          </div></KeyedBoundary></UiScrollArea>
+    </div>
     <select
       class="fallback"
       aria-label="Choices"
@@ -566,7 +568,10 @@ function uniqueKeys<T>(
   outline: none;
 }
 
+/* Its own box around the nested Scroll Area, which it shrinks into so the choices scroll. */
 .choices {
+  display: flex;
+  flex-direction: column;
   max-block-size: calc(max(2, var(--_rows, 5)) * var(--ui-control-size-md));
 }
 

package/vue/UiScrollArea.d.ts

@@ -12,6 +12,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"vertical" | "horizontal" | null>;
         default: string;
     };
+    padding: {
+        type: PropType<"none" | "xs" | "sm" | "md" | "lg" | null>;
+        default: string;
+    };
     size: {
         type: PropType<"content" | "sm" | "md" | "lg" | null>;
         default: string;
@@ -29,6 +33,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"vertical" | "horizontal" | null>;
         default: string;
     };
+    padding: {
+        type: PropType<"none" | "xs" | "sm" | "md" | "lg" | null>;
+        default: string;
+    };
     size: {
         type: PropType<"content" | "sm" | "md" | "lg" | null>;
         default: string;
@@ -40,6 +48,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{}>, {
     fill: boolean | null;
     size: "sm" | "md" | "lg" | "content" | null;
+    padding: "none" | "xs" | "sm" | "md" | "lg" | null;
     trim: boolean | null;
     orientation: "vertical" | "horizontal" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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/UiBadge.js

@@ -63,7 +63,7 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 				},
 				required: false,
 				target: { attribute: "size" },
-				description: "Scale. xs is compact; sm keeps the usual badge geometry with compact text, fitting short counts such as 99+ inside a 24px circle. md is the usual text\n      badge; lg adds room to fixed marks while retaining the usual text size. A square is 24px at xs, 32px at sm and md, and 40px at lg. A circle is 16px at xs,\n      24px at sm and md, and 32px at lg.",
+				description: "Scale. xs is compact; sm keeps the usual badge geometry with compact text, fitting short counts such as 99+ inside a 24px circle. md is the usual text\n      badge; lg adds room to fixed marks while retaining the usual text size. A square is 24px at xs, 32px at sm and md, and 40px at lg. A circle is 16px at xs,\n      24px at sm and md, and 32px at lg. A small overlay circle is 20px.",
 				values: [
 					"xs",
 					"sm",
@@ -97,12 +97,13 @@ 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      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.",
+				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. overlay inherits the containing filled control's text colour on a faint translucent fill, without a visible rim or shadow. Its small circle is\n      20px. When space is constrained, the label truncates with an ellipsis while its full text remains available.",
 				values: [
 					"solid",
 					"subtle",
 					"outline",
-					"inverse"
+					"inverse",
+					"overlay"
 				],
 				default: "subtle"
 			}
@@ -180,6 +181,6 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-491791b3"]]);
+}), [["__scopeId", "data-v-3a29482a"]]);
 //#endregion
 export { UiBadge_default as t };

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