@threadlabs/looma 0.26.0 → 0.26.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.26.0",
+  "version": "0.26.1",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-dialog.css

@@ -104,7 +104,7 @@
       display: none;
     }
 
-    /* Header and actions stay pinned; only the body scrolls when content is long. */
+    /* Own the layout wrapper; nested component roots are outside these scoped rules. */
     header {
       display: flex;
       align-items: center;
@@ -183,9 +183,11 @@
     }
 
     .body {
+      display: flex;
+      flex-direction: column;
       flex: 1 1 auto;
       min-block-size: 0;
-      padding: var(--ui-space-5);
+      padding: var(--ui-space-3) var(--ui-space-5) var(--ui-space-5);
     }
 
     footer {
@@ -194,7 +196,7 @@
       flex-wrap: wrap;
       justify-content: flex-end;
       gap: var(--ui-space-2);
-      padding: var(--ui-space-3) var(--ui-space-5);
+      padding: 0 var(--ui-space-5) var(--ui-space-5);
     }
 
     footer:empty {
@@ -223,7 +225,7 @@
 @scope ([data-component~="ui-dialog"]) to ([data-component]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
-    /* Header and actions stay pinned; only the body scrolls when content is long. */
+    /* Own the layout wrapper; nested component roots are outside these scoped rules. */
 
     /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
 

package/styles/ui-scroll-area.css

@@ -31,6 +31,8 @@
       display: flow-root;
     }
 
+    /* Trim projected edges without changing spacing inside an item. */
+
     :scope[data-ui-scroll-area-state~="orientation=horizontal"] {
       overflow-x: auto;
       overflow-y: hidden;
@@ -61,5 +63,14 @@
        into whatever is behind the area without needing to know its colour. Before upgrade, its
        zero-length defaults leave the authored scroll area fully visible. */
 
+    /* Trim projected edges without changing spacing inside an item. */
+    :scope[data-ui-scroll-area-state~="trim"] .content > :where([data-slotted], [data-slotted] *):is(:first-child) {
+      margin-block-start: 0;
+    }
+
+    :scope[data-ui-scroll-area-state~="trim"] .content > :where([data-slotted], [data-slotted] *):is(:last-child) {
+      margin-block-end: 0;
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/vanilla/UiDialog.js

@@ -3,7 +3,7 @@ import { attachGeneratedController, buildTemplate, clearRegion, toAttribute, toT
 import * as controller from "../components/ui-dialog/ui-dialog.js";
 import "../styles/ui-dialog.css";
 
-const T0 = ["",[],["header",[],1,["button",["class","close","type","button","aria-label","Close"]]],["ui-scroll-area",["class","body"],4],["footer",[],4]];
+const T0 = ["",[],["header",[],1,["button",["class","close","type","button","aria-label","Close"]]],["div",["class","body"],["ui-scroll-area",[],4]],["footer",[],4]];
 const T1 = ["h2",["class","title"],0];
 const T2 = ["",[]];
 const T3 = ["",[]];
@@ -59,10 +59,15 @@ export function createUiDialog(options = {}, html) {
       const s0 = toAttribute(x0, "aria-label");
       if (s0 !== r.v0) writeAttribute(r.n, "aria-label", r.v0 = s0);
     }
+    if (c === -1) {
+      const x1 = true;
+      const s1 = toAttribute(x1, "trim");
+      if (s1 !== r.v1) writeAttribute(r.a3, "trim", r.v1 = s1);
+    }
     if (c & 516) {
-      const x1 = hostState(["size","alert"], [v[9], v[2]]);
-      const s1 = x1;
-      if (s1 !== r.v1) writeAttribute(r.n, "data-ui-dialog-state", (r.v1 = s1) === "" ? null : s1);
+      const x2 = hostState(["size","alert"], [v[9], v[2]]);
+      const s2 = x2;
+      if (s2 !== r.v2) writeAttribute(r.n, "data-ui-dialog-state", (r.v2 = s2) === "" ? null : s2);
     }
     if (c & 32) {
       const t0 = truthy(v[5]);
@@ -74,10 +79,10 @@ export function createUiDialog(options = {}, html) {
         }
       } else if (r.b0 !== undefined) p1(r.b0, c, d);
     } else if (r.b0 !== undefined) p1(r.b0, c, d);
-    if (r.f1 === undefined) { r.f1 = 1; const at = fillSlot(r.a3, r.e1, "", J, false, undefined, d);
+    if (r.f1 === undefined) { r.f1 = 1; const at = fillSlot(r.a4, r.e1, "", J, false, undefined, d);
       if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b1 = m2(d); at.before(r.b1.n); } }
     else if (r.b1 !== undefined) p2(r.b1, c, d);
-    if (r.f2 === undefined) { r.f2 = 1; const at = fillSlot(r.a4, r.e2, "actions", J, false, undefined, d);
+    if (r.f2 === undefined) { r.f2 = 1; const at = fillSlot(r.a5, r.e2, "actions", J, false, undefined, d);
       if (Array.isArray(at)) (r.z ??= []).push(() => { at[0].l.delete(at[1]); dispose(at[1]); }); else if (at !== undefined) { r.b2 = m3(d); at.before(r.b2.n); } }
     else if (r.b2 !== undefined) p3(r.b2, c, d);
   };
@@ -86,8 +91,9 @@ export function createUiDialog(options = {}, html) {
   const t2 = t1.nextSibling.nextSibling;
   const t3 = t0.nextSibling;
   const t4 = t3.firstChild;
-  const t5 = t3.nextSibling.firstChild;
-  const R = { n: element, v0: undefined, v1: undefined, a1: t1, e0: t1.nextSibling, b0: undefined, a3: t4, e1: t4.nextSibling, b1: undefined, f1: undefined, a4: t5, e2: t5.nextSibling, b2: undefined, f2: undefined };
+  const t5 = t4.firstChild;
+  const t6 = t3.nextSibling.firstChild;
+  const R = { n: element, a3: t4, v0: undefined, v1: null, v2: undefined, a1: t1, e0: t1.nextSibling, b0: undefined, a4: t5, e1: t5.nextSibling, b1: undefined, f1: undefined, a5: t6, e2: t6.nextSibling, b2: undefined, f2: undefined };
   const I = { B };
   const J = project(I, children, slots);
   I.R = new Set();

package/vanilla/UiScrollArea.d.ts

@@ -9,6 +9,7 @@ export interface UiScrollAreaProps {
   fill?: boolean | null;
   orientation?: "vertical" | "horizontal" | null;
   size?: "content" | "sm" | "md" | "lg" | null;
+  trim?: boolean | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiScrollArea.js

@@ -7,7 +7,7 @@ const T0 = ["",[],["div",["class","content"],4]];
 const T1 = ["",[]];
 let P0, P1;
 const S = { n: [], t: [], f: import.meta.url, g: "ui-scroll-area" };
-const D = { props: { "fill": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "orientation": { "required":false,"values":["vertical","horizontal"],"default":"vertical", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "size": { "required":false,"values":["content","sm","md","lg"],"default":"content", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
+const D = { props: { "fill": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "orientation": { "required":false,"values":["vertical","horizontal"],"default":"vertical", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "size": { "required":false,"values":["content","sm","md","lg"],"default":"content", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "trim": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" } } };
 const C = (host) => controller.default(host);
 
 export function createUiScrollArea(options = {}, html) {
@@ -19,7 +19,7 @@ export function createUiScrollArea(options = {}, html) {
   }
   element.setAttribute("data-component", "ui-scroll-area");
   element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
-  const v = [null, null, null];
+  const v = [null, null, null, null];
   const B = acceptProps(element, D, S.n, v, componentProps, [], html);
   const m1 = (d) => {
     const n = (P1 ??= buildTemplate(T1)).cloneNode(true);
@@ -30,8 +30,8 @@ export function createUiScrollArea(options = {}, html) {
   const p1 = (r, c, d) => {
   };
   const p0 = (r, c, d) => {
-    if (c & 7) {
-      const x0 = hostState(["fill","orientation","size"], [v[0], v[1], v[2]]);
+    if (c & 15) {
+      const x0 = hostState(["fill","orientation","size","trim"], [v[0], v[1], v[2], v[3]]);
       const s0 = x0;
       if (s0 !== r.v0) writeAttribute(r.n, "data-ui-scroll-area-state", (r.v0 = s0) === "" ? null : s0);
     }

package/vue/UiDialog.vue

@@ -350,7 +350,7 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
       <h2 v-if="checkedProps.label" class="title">{{ checkedProps.label }}</h2>
       <button class="close" type="button" aria-label="Close" ref="closeElement"></button>
     </header>
-    <UiScrollArea class="body"><slot /></UiScrollArea>
+    <div class="body"><UiScrollArea :trim="true"><slot /></UiScrollArea></div>
     <footer><slot name="actions" /></footer>
   </dialog>
 </template>
@@ -453,7 +453,7 @@ useComponentHost(() => import('../components/ui-dialog/ui-dialog.js'), {
   display: none;
 }
 
-/* Header and actions stay pinned; only the body scrolls when content is long. */
+/* Own the layout wrapper; nested component roots are outside these scoped rules. */
 header {
   display: flex;
   align-items: center;
@@ -534,9 +534,11 @@ html[data-ui-input-modality="touch"] [data-component~="ui-dialog"] .close {
 }
 
 .body {
+  display: flex;
+  flex-direction: column;
   flex: 1 1 auto;
   min-block-size: 0;
-  padding: var(--ui-space-5);
+  padding: var(--ui-space-3) var(--ui-space-5) var(--ui-space-5);
 }
 
 footer {
@@ -545,7 +547,7 @@ footer {
   flex-wrap: wrap;
   justify-content: flex-end;
   gap: var(--ui-space-2);
-  padding: var(--ui-space-3) var(--ui-space-5);
+  padding: 0 var(--ui-space-5) var(--ui-space-5);
 }
 
 footer:empty {

package/vue/UiScrollArea.d.ts

@@ -16,6 +16,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"content" | "sm" | "md" | "lg" | null>;
         default: string;
     };
+    trim: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     fill: {
         type: PropType<boolean | null>;
@@ -29,9 +33,14 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"content" | "sm" | "md" | "lg" | null>;
         default: string;
     };
+    trim: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
 }>> & Readonly<{}>, {
     fill: boolean | null;
     size: "sm" | "md" | "content" | "lg" | null;
+    trim: boolean | null;
     orientation: "vertical" | "horizontal" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/vue/UiScrollArea.vue

@@ -35,6 +35,14 @@ const propValidityContract = {
       values: ['content', 'sm', 'md', 'lg'],
       default: 'content',
     },
+    trim: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'trim' },
+      description:
+        'Removes the outer block margins of the first and last projected items when the surrounding panel owns its edge padding. Margins between items remain\n      intact.',
+      default: false,
+    },
   },
 } as const
 const props = defineProps({
@@ -47,11 +55,13 @@ const props = defineProps({
     type: null as unknown as PropType<'content' | 'sm' | 'md' | 'lg' | null>,
     default: 'content',
   },
+  trim: { type: null as unknown as PropType<boolean | null>, default: false },
 })
 const acceptedProps: Record<string, unknown> = {
   fill: false,
   orientation: 'vertical',
   size: 'content',
+  trim: false,
 }
 const checkedProps = computed(() => ({
   fill: checkedProp<boolean>(
@@ -75,6 +85,13 @@ const checkedProps = computed(() => ({
     'size',
     acceptedProps,
   ) as 'content' | 'sm' | 'md' | 'lg',
+  trim: checkedProp<boolean>(
+    props['trim'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'trim',
+    acceptedProps,
+  ) as boolean,
 }))
 void checkedProps.value
 watchSyncEffect(() => {
@@ -137,6 +154,7 @@ if (
 const hostState = computed(() =>
   [
     checkedProps.value.fill && 'fill',
+    checkedProps.value.trim && 'trim',
     checkedProps.value.orientation && 'orientation',
     checkedProps.value.orientation != null
     && `orientation=${encodeURIComponent(checkedProps.value.orientation)}`,
@@ -162,7 +180,7 @@ useComponentHost(() => import('../components/ui-scroll-area/ui-scroll-area.js'),
       ? (incoming[name] ?? incoming[kebab] ?? null)
       : null
   },
-  propNames: ['fill', 'orientation', 'size'],
+  propNames: ['fill', 'orientation', 'size', 'trim'],
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   refs: { content: contentElement },
@@ -177,6 +195,7 @@ useComponentHost(() => import('../components/ui-scroll-area/ui-scroll-area.js'),
     :data-fill="reflectedProp('fill', 'fill', checkedProps.fill, undefined, false)"
     :data-orientation="reflectedProp('orientation', 'orientation', checkedProps.orientation, 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"
     ref="root"
   >
@@ -216,6 +235,19 @@ useComponentHost(() => import('../components/ui-scroll-area/ui-scroll-area.js'),
   display: flow-root;
 }
 
+/* Trim projected edges without changing spacing inside an item. */
+[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="trim"]
+  .content
+  > :slotted(:first-child) {
+  margin-block-start: 0;
+}
+
+[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="trim"]
+  .content
+  > :slotted(:last-child) {
+  margin-block-end: 0;
+}
+
 [data-component~="ui-scroll-area"][data-ui-scroll-area-state~="orientation=horizontal"] {
   overflow-x: auto;
   overflow-y: hidden;

package/vue/chunks/UiDialog.js

@@ -20,6 +20,7 @@ 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)) {
@@ -334,10 +335,10 @@ var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 					ref_key: "closeElement",
 					ref: closeElement
 				}, null, 512)]),
-				createVNode(UiScrollArea_default, { class: "body" }, {
+				createElementVNode("div", _hoisted_3, [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)])
 			], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
@@ -345,6 +346,6 @@ var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-f11b295f"]]);
+}), [["__scopeId", "data-v-6d90ae32"]]);
 //#endregion
 export { UiDialog_default as t };

package/vue/chunks/UiScrollArea.js

@@ -7,6 +7,7 @@ var _hoisted_1 = [
 	"data-fill",
 	"data-orientation",
 	"data-size",
+	"data-trim",
 	"data-ui-scroll-area-state"
 ];
 //#endregion
@@ -26,6 +27,10 @@ var UiScrollArea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		size: {
 			type: null,
 			default: "content"
+		},
+		trim: {
+			type: null,
+			default: false
 		}
 	},
 	setup(__props) {
@@ -66,13 +71,24 @@ var UiScrollArea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 					"lg"
 				],
 				default: "content"
+			},
+			trim: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "trim" },
+				description: "Removes the outer block margins of the first and last projected items when the surrounding panel owns its edge padding. Margins between items remain\n      intact.",
+				default: false
 			}
 		} };
 		const props = __props;
 		const acceptedProps = {
 			fill: false,
 			orientation: "vertical",
-			size: "content"
+			size: "content",
+			trim: false
 		};
 		const checkedProps = computed(() => ({
 			fill: checkedProp(props["fill"], {
@@ -86,7 +102,11 @@ var UiScrollArea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			size: checkedProp(props["size"], {
 				kind: "terminal",
 				name: "keyword"
-			}, false, "size", acceptedProps)
+			}, false, "size", acceptedProps),
+			trim: checkedProp(props["trim"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "trim", acceptedProps)
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -118,6 +138,7 @@ var UiScrollArea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		/** The values the styles' :host-state() rules test. */
 		const hostState = computed(() => [
 			checkedProps.value.fill && "fill",
+			checkedProps.value.trim && "trim",
 			checkedProps.value.orientation && "orientation",
 			checkedProps.value.orientation != null && `orientation=${encodeURIComponent(checkedProps.value.orientation)}`,
 			checkedProps.value.size && "size",
@@ -140,7 +161,8 @@ var UiScrollArea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			propNames: [
 				"fill",
 				"orientation",
-				"size"
+				"size",
+				"trim"
 			],
 			propValidity: (name) => propValidityState({
 				contract: propValidityContract,
@@ -153,6 +175,7 @@ var UiScrollArea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				"data-fill": reflectedProp("fill", "fill", checkedProps.value.fill, void 0, false),
 				"data-orientation": reflectedProp("orientation", "orientation", checkedProps.value.orientation, 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,
 				ref_key: "root",
 				ref: root
@@ -160,12 +183,12 @@ var UiScrollArea_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				class: "content",
 				ref_key: "contentElement",
 				ref: contentElement
-			}, [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 512)], 16, _hoisted_1)), [[unref(vPropValidity), {
+			}, [renderSlot(_ctx.$slots, "default")], 512)], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...props }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-3aa9f4b3"]]);
+}), [["__scopeId", "data-v-a1ccf697"]]);
 //#endregion
 export { UiScrollArea_default as t };