@threadlabs/looma 0.23.7 → 0.23.8

package/vue/UiSidebar.vue

@@ -224,6 +224,7 @@ const root = ref<HTMLElement | null>(null)
 const resizerElement = useTemplateRef<HTMLElement>('resizer')
 const internalCollapsed = ref(false)
 const drawer = ref(false)
+const resizing = ref(false)
 let guardedPrevious: any
 const guarded = computed(() => {
   if (
@@ -234,6 +235,7 @@ const guarded = computed(() => {
 })
 provide('html-next:ui-sidebar:internalCollapsed', internalCollapsed)
 provide('html-next:ui-sidebar:drawer', drawer)
+provide('html-next:ui-sidebar:resizing', resizing)
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -257,6 +259,7 @@ const hostState = computed(() =>
     checkedProps.value.side && 'side',
     checkedProps.value.side != null && `side=${encodeURIComponent(checkedProps.value.side)}`,
     internalCollapsed.value && 'internalCollapsed',
+    resizing.value && 'resizing',
   ].filter(Boolean).join(' ')
 )
 
@@ -314,7 +317,7 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   refs: { resizer: resizerElement },
-  state: { internalCollapsed, drawer },
+  state: { internalCollapsed, drawer, resizing },
 })
 </script>
 
@@ -335,7 +338,7 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
     :data-ui-sidebar-state="hostState || undefined"
     ref="root"
   >
-    <div class="content"><slot /></div>
+    <div class="viewport"><div class="content"><slot /></div></div>
     <div
       class="resizer"
       role="separator"
@@ -369,10 +372,15 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
   syntax: "*";
   inherits: false;
 }
+@property --ui-sidebar-collapsed-width {
+  syntax: "*";
+  inherits: false;
+}
 
 [data-component~="ui-sidebar"] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-sidebar-backdrop: var(--ui-sidebar-backdrop);
+  --_ui-sidebar-expanded-width: var(--_sidebar-width, var(--ui-sidebar-width, 280px));
 
   position: relative;
   box-sizing: border-box;
@@ -385,6 +393,9 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
   background: var(--ui-sidebar-surface, var(--ui-surface-default));
   border-inline-end: var(--ui-border-width) solid
     var(--ui-sidebar-border, var(--ui-border-divider));
+  transition:
+    inline-size var(--ui-motion-layout) var(--ui-motion-layout-ease),
+    visibility var(--ui-motion-layout);
 }
 
 [data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"] {
@@ -395,10 +406,17 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
 
 /* The panel's content scrolls, and each edge that hides content fades: the scroll fade every
    Looma scroller uses (see ui-scroll-area). */
-.content {
+.viewport {
   flex: 1;
   min-block-size: 0;
+  overflow: clip;
+}
+.content {
+  block-size: 100%;
+  inline-size: calc(var(--_ui-sidebar-expanded-width) - var(--ui-border-width));
+  min-block-size: 0;
   overflow: auto;
+  transition: transform var(--ui-motion-layout) var(--ui-motion-layout-ease);
   --_ui-scroll-fade-direction: to bottom;
   --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
   mask-image: linear-gradient(
@@ -423,7 +441,18 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
 
 /* Collapsed while docked. */
 [data-component~="ui-sidebar"][data-ui-sidebar-state~="internalCollapsed"]:not([popover]) {
-  display: none;
+  inline-size: var(--ui-sidebar-collapsed-width, 0px);
+  visibility: hidden;
+}
+[data-component~="ui-sidebar"][data-ui-sidebar-state~="resizing"] {
+  transition: none;
+}
+[data-component~="ui-sidebar"][data-ui-sidebar-state~="internalCollapsed"]:not([popover]) .content {
+  transform: translateX(-100%);
+}
+[data-component~="ui-sidebar"][data-ui-sidebar-state~="side=end"][data-ui-sidebar-state~="internalCollapsed"]:not([popover])
+  .content {
+  transform: translateX(100%);
 }
 
 .resizer {
@@ -506,9 +535,9 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
   box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
   transform: translateX(0);
   transition:
-    transform var(--ui-motion-base) var(--ui-motion-ease-out),
-    display var(--ui-motion-base) allow-discrete,
-    overlay var(--ui-motion-base) allow-discrete;
+    transform var(--ui-motion-reveal) var(--ui-motion-reveal-ease),
+    display var(--ui-motion-reveal) allow-discrete,
+    overlay var(--ui-motion-reveal) allow-discrete;
 }
 
 /* The author display above would otherwise override the UA rule that hides a closed popover. */
@@ -538,9 +567,14 @@ useComponentHost(() => import('../components/ui-sidebar/ui-sidebar.js'), {
 [data-component~="ui-sidebar"][popover]::backdrop {
   background: var(--_ui-sidebar-backdrop, rgb(0 0 0 / 0.32));
 }
+[data-component~="ui-sidebar"][popover] .content {
+  inline-size: 100%;
+}
 
 @media (prefers-reduced-motion: reduce) {
-  [data-component~="ui-sidebar"][popover] {
+  [data-component~="ui-sidebar"],
+  [data-component~="ui-sidebar"][popover],
+  .content {
     transition: none;
   }
 }

package/vue/chunks/UiDisclosure.js

@@ -10,7 +10,9 @@ var _hoisted_1 = [
 	"data-heading-level",
 	"data-name",
 	"data-open",
+	"data-required-open",
 	"data-summary",
+	"data-variant",
 	"data-ui-disclosure-state"
 ];
 var _hoisted_2 = ["role", "aria-level"];
@@ -19,9 +21,14 @@ var _hoisted_3 = [
 	"aria-expanded",
 	"disabled"
 ];
-var _hoisted_4 = { class: "summary" };
-var _hoisted_5 = ["id"];
-var _hoisted_6 = { class: "panel-inner" };
+var _hoisted_4 = { class: "leading" };
+var _hoisted_5 = { class: "summary" };
+var _hoisted_6 = {
+	class: "indicator",
+	"aria-hidden": "true"
+};
+var _hoisted_7 = ["id"];
+var _hoisted_8 = { class: "panel-inner" };
 //#endregion
 //#region .build/vue/UiDisclosure.vue
 var UiDisclosure_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -52,9 +59,17 @@ var UiDisclosure_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			type: null,
 			default: false
 		},
+		requiredOpen: {
+			type: null,
+			default: false
+		},
 		summary: {
 			type: null,
 			default: "Details"
+		},
+		variant: {
+			type: null,
+			default: "plain"
 		}
 	},
 	emits: [
@@ -125,6 +140,16 @@ var UiDisclosure_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				description: "Whether the disclosure is open initially or when set externally. The trigger toggles it from there, reporting each change as an open or close event.",
 				default: false
 			},
+			requiredOpen: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "requiredopen" },
+				description: "In a named exclusive group, keeps at least one member open. Clicking the last open trigger does not close it; opening another member transfers the open\n      state.",
+				default: false
+			},
 			summary: {
 				type: {
 					kind: "terminal",
@@ -134,6 +159,17 @@ var UiDisclosure_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				target: { attribute: "summary" },
 				description: "The text of the trigger row that opens and closes the disclosure. It is the trigger button's accessible name, so name what the content is.",
 				default: "Details"
+			},
+			variant: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "variant" },
+				description: "Navigation shares icon columns, spacing, type, hover, and corners with Nav Item. Plain retains the standard disclosure treatment.",
+				values: ["plain", "navigation"],
+				default: "plain"
 			}
 		} };
 		const props = __props;
@@ -144,7 +180,9 @@ var UiDisclosure_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			headingLevel: 0,
 			name: "",
 			open: false,
-			summary: "Details"
+			requiredOpen: false,
+			summary: "Details",
+			variant: "plain"
 		};
 		const checkedProps = computed(() => ({
 			density: checkedProp(props["density"], {
@@ -171,10 +209,18 @@ var UiDisclosure_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				kind: "terminal",
 				name: "boolean"
 			}, false, "open", acceptedProps),
+			requiredOpen: checkedProp(props["requiredOpen"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "requiredOpen", acceptedProps),
 			summary: checkedProp(props["summary"], {
 				kind: "terminal",
 				name: "string"
-			}, false, "summary", acceptedProps)
+			}, false, "summary", acceptedProps),
+			variant: checkedProp(props["variant"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "variant", acceptedProps)
 		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
@@ -195,6 +241,7 @@ var UiDisclosure_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		const hydrationInstance = getCurrentInstance();
 		const emit = __emit;
 		const root = ref(null);
+		const headingElement = useTemplateRef("heading");
 		const triggerElement = useTemplateRef("trigger");
 		const panelElement = useTemplateRef("panel");
 		const internalOpen = ref(false);
@@ -242,7 +289,9 @@ var UiDisclosure_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			checkedProps.value.density && "density",
 			checkedProps.value.density != null && `density=${encodeURIComponent(checkedProps.value.density)}`,
 			internalOpen.value && "internalOpen",
-			checkedProps.value.fill && "fill"
+			checkedProps.value.fill && "fill",
+			checkedProps.value.variant && "variant",
+			checkedProps.value.variant != null && `variant=${encodeURIComponent(checkedProps.value.variant)}`
 		].filter(Boolean).join(" "));
 		const isOpenDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["open"] === "boolean" && (detail["reason"] === "action" || detail["reason"] === "programmatic" || detail["reason"] === "light-dismiss" || detail["reason"] === "escape") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
 			"open",
@@ -276,13 +325,16 @@ var UiDisclosure_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				"headingLevel",
 				"name",
 				"open",
-				"summary"
+				"requiredOpen",
+				"summary",
+				"variant"
 			],
 			propValidity: (name) => propValidityState({
 				contract: propValidityContract,
 				values: { ...props }
 			}, name),
 			refs: {
+				heading: headingElement,
 				trigger: triggerElement,
 				panel: panelElement
 			},
@@ -301,14 +353,17 @@ var UiDisclosure_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				"data-heading-level": reflectedProp("headingLevel", "heading-level", checkedProps.value.headingLevel, void 0, false),
 				"data-name": reflectedProp("name", "name", checkedProps.value.name, void 0, false),
 				"data-open": reflectedProp("open", "open", checkedProps.value.open, void 0, false),
+				"data-required-open": reflectedProp("requiredOpen", "required-open", checkedProps.value.requiredOpen, void 0, false),
 				"data-summary": reflectedProp("summary", "summary", checkedProps.value.summary, void 0, false),
+				"data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
 				"data-ui-disclosure-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
 			}), [createElementVNode("div", {
 				class: "heading",
 				role: guarded.value,
-				"aria-level": guardedBinding.value
+				"aria-level": guardedBinding.value,
+				ref: "heading"
 			}, [createElementVNode("button", {
 				class: "trigger",
 				type: "button",
@@ -316,19 +371,20 @@ var UiDisclosure_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				"aria-expanded": guardedBinding3.value,
 				disabled: checkedProps.value.disabled ?? void 0,
 				ref: "trigger"
-			}, [createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "summary", {}, () => [createTextVNode(toDisplayString(checkedProps.value.summary), 1)], true)]), renderSlot(_ctx.$slots, "indicator", {}, () => [_cache[0] || (_cache[0] = createElementVNode("span", {
-				class: "chevron",
-				"aria-hidden": "true"
-			}, null, -1))], true)], 8, _hoisted_3)], 8, _hoisted_2), createElementVNode("div", {
+			}, [
+				createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "leading", {}, void 0, true)]),
+				createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "summary", {}, () => [createTextVNode(toDisplayString(checkedProps.value.summary), 1)], true)]),
+				createElementVNode("span", _hoisted_6, [renderSlot(_ctx.$slots, "indicator", {}, () => [_cache[0] || (_cache[0] = createElementVNode("span", { class: "chevron" }, null, -1))], true)])
+			], 8, _hoisted_3)], 8, _hoisted_2), createElementVNode("div", {
 				class: "panel",
 				id: guardedBinding4.value,
 				ref: "panel"
-			}, [createElementVNode("div", _hoisted_6, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 8, _hoisted_5)], 16, _hoisted_1)), [[unref(vPropValidity), {
+			}, [createElementVNode("div", _hoisted_8, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 8, _hoisted_7)], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...props }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-af326e00"]]);
+}), [["__scopeId", "data-v-a0b99707"]]);
 //#endregion
 export { UiDisclosure_default as t };

package/vue/chunks/UiNavItem.js

@@ -21,7 +21,8 @@ var _hoisted_2 = { class: "leading" };
 var _hoisted_3 = { class: "content" };
 var _hoisted_4 = { class: "label" };
 var _hoisted_5 = { class: "description" };
-var _hoisted_6 = [
+var _hoisted_6 = { class: "trailing" };
+var _hoisted_7 = [
 	"aria-current",
 	"data-as",
 	"data-current",
@@ -32,10 +33,11 @@ var _hoisted_6 = [
 	"data-variant",
 	"data-ui-nav-item-state"
 ];
-var _hoisted_7 = { class: "leading" };
-var _hoisted_8 = { class: "content" };
-var _hoisted_9 = { class: "label" };
-var _hoisted_10 = { class: "description" };
+var _hoisted_8 = { class: "leading" };
+var _hoisted_9 = { class: "content" };
+var _hoisted_10 = { class: "label" };
+var _hoisted_11 = { class: "description" };
+var _hoisted_12 = { class: "trailing" };
 //#endregion
 //#region .build/vue/UiNavItem.vue
 var UiNavItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -275,7 +277,8 @@ var UiNavItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					"aria-hidden": "true"
 				}, null, -1)),
 				createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "leading", {}, void 0, true)]),
-				createElementVNode("span", _hoisted_3, [createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]), createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "description", {}, void 0, true)])])
+				createElementVNode("span", _hoisted_3, [createElementVNode("span", _hoisted_4, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]), createElementVNode("span", _hoisted_5, [renderSlot(_ctx.$slots, "description", {}, void 0, true)])]),
+				createElementVNode("span", _hoisted_6, [renderSlot(_ctx.$slots, "trailing", {}, void 0, true)])
 			], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...props }
@@ -317,14 +320,15 @@ var UiNavItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 					class: "indicator",
 					"aria-hidden": "true"
 				}, null, -1)),
-				createElementVNode("span", _hoisted_7, [renderSlot(_ctx.$slots, "leading", {}, void 0, true)]),
-				createElementVNode("span", _hoisted_8, [createElementVNode("span", _hoisted_9, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]), createElementVNode("span", _hoisted_10, [renderSlot(_ctx.$slots, "description", {}, void 0, true)])])
-			], 16, _hoisted_6)), [[unref(vPropValidity), {
+				createElementVNode("span", _hoisted_8, [renderSlot(_ctx.$slots, "leading", {}, void 0, true)]),
+				createElementVNode("span", _hoisted_9, [createElementVNode("span", _hoisted_10, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]), createElementVNode("span", _hoisted_11, [renderSlot(_ctx.$slots, "description", {}, void 0, true)])]),
+				createElementVNode("span", _hoisted_12, [renderSlot(_ctx.$slots, "trailing", {}, void 0, true)])
+			], 16, _hoisted_7)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...props }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-d666b895"]]);
+}), [["__scopeId", "data-v-7ab7def5"]]);
 //#endregion
 export { UiNavItem_default as t };

package/vue/chunks/UiSidebar.js

@@ -15,8 +15,9 @@ var _hoisted_1 = [
 	"data-width",
 	"data-ui-sidebar-state"
 ];
-var _hoisted_2 = { class: "content" };
-var _hoisted_3 = ["aria-label", "hidden"];
+var _hoisted_2 = { class: "viewport" };
+var _hoisted_3 = { class: "content" };
+var _hoisted_4 = ["aria-label", "hidden"];
 //#endregion
 //#region .build/vue/UiSidebar.vue
 var UiSidebar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -236,6 +237,7 @@ var UiSidebar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		const resizerElement = useTemplateRef("resizer");
 		const internalCollapsed = ref(false);
 		const drawer = ref(false);
+		const resizing = ref(false);
 		let guardedPrevious;
 		const guarded = computed(() => {
 			if (!((drawer.value == null || typeof drawer.value === "boolean") && (internalCollapsed.value == null || typeof internalCollapsed.value === "boolean"))) return guardedPrevious;
@@ -243,6 +245,7 @@ var UiSidebar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		});
 		provide("html-next:ui-sidebar:internalCollapsed", internalCollapsed);
 		provide("html-next:ui-sidebar:drawer", drawer);
+		provide("html-next:ui-sidebar:resizing", resizing);
 		const hydrationNode = hydrationInstance?.vnode.el;
 		if (typeof window !== "undefined" && hydrationNode != null && (!(hydrationNode instanceof Element) || hydrationNode.localName !== "aside")) throw Object.assign(/* @__PURE__ */ new Error("HR005: Server markup for <ui-sidebar> has an incompatible root."), {
 			name: "HtmlDiagnosticError",
@@ -255,7 +258,8 @@ var UiSidebar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		const hostState = computed(() => [
 			checkedProps.value.side && "side",
 			checkedProps.value.side != null && `side=${encodeURIComponent(checkedProps.value.side)}`,
-			internalCollapsed.value && "internalCollapsed"
+			internalCollapsed.value && "internalCollapsed",
+			resizing.value && "resizing"
 		].filter(Boolean).join(" "));
 		const isResizeDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["width"] === "number" && Number.isFinite(detail["width"]) && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => ["width", "trigger"].includes(key));
 		const isToggleDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["open"] === "boolean" && (detail["mode"] === "docked" || detail["mode"] === "drawer") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => [
@@ -301,7 +305,8 @@ var UiSidebar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			refs: { resizer: resizerElement },
 			state: {
 				internalCollapsed,
-				drawer
+				drawer,
+				resizing
 			}
 		});
 		return (_ctx, _cache) => {
@@ -318,7 +323,7 @@ var UiSidebar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 				"data-ui-sidebar-state": hostState.value || void 0,
 				ref_key: "root",
 				ref: root
-			}), [createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]), createElementVNode("div", {
+			}), [createElementVNode("div", _hoisted_2, [createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])]), createElementVNode("div", {
 				class: "resizer",
 				role: "separator",
 				"aria-orientation": "vertical",
@@ -330,12 +335,12 @@ var UiSidebar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			}, [..._cache[0] || (_cache[0] = [createElementVNode("span", {
 				class: "guide",
 				"aria-hidden": "true"
-			}, null, -1)])], 8, _hoisted_3)], 16, _hoisted_1)), [[unref(vPropValidity), {
+			}, null, -1)])], 8, _hoisted_4)], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...props }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-2d6c1f5b"]]);
+}), [["__scopeId", "data-v-5d67aa4a"]]);
 //#endregion
 export { UiSidebar_default as t };