@threadlabs/looma 0.31.2 → 0.31.3

package/package.json

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

package/styles/ui-editor-toolbar.css

@@ -64,6 +64,7 @@
     }
 
     :scope:where([data-component~="ui-editor-toolbar"])[data-ui-editor-toolbar-state~="floating"] {
+      box-sizing: border-box;
       position: relative;
       top: auto;
       width: max-content;

package/styles/ui-popover.css

@@ -70,6 +70,15 @@
       box-shadow: var(--_ui-popover-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
     }
 
+    /* A toolbar or card can supply its own surface, including an unclipped shadow. */
+    :scope:where([data-component~="ui-popover"])[data-ui-popover-state~="bare"] .surface {
+      overflow: visible;
+      padding: 0;
+      border: 0;
+      background: transparent;
+      box-shadow: none;
+    }
+
     :scope:where([data-component~="ui-popover"]):not([data-ui-popover-state~="internalOpen"]) {
       display: none;
     }
@@ -125,6 +134,8 @@
 @scope ([data-component~="ui-popover"]) to ([data-component]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
+    /* A toolbar or card can supply its own surface, including an unclipped shadow. */
+
     @starting-style {
     }
 

package/vanilla/UiPopover.d.ts

@@ -12,6 +12,7 @@ export interface UiPopoverElement extends HTMLSpanElement {
   removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
 }
 export interface UiPopoverProps {
+  bare?: boolean | null;
   for?: string | null;
   open?: boolean | null;
   placement?: "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end" | null;

package/vanilla/UiPopover.js

@@ -7,7 +7,7 @@ const T0 = ["",[],["div",["class","surface"],4]];
 const T1 = ["",[]];
 let P0, P1;
 const S = { n: ["internalOpen"], t: ["b"], f: import.meta.url, g: "ui-popover", d: { "open": [detailCheck(checkObject([["open", checkBoolean, false], ["reason", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["action","programmatic","light-dismiss","escape"]}), false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false], "close": [detailCheck(checkObject([["open", checkBoolean, false], ["reason", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["action","programmatic","light-dismiss","escape"]}), false], ["trigger", checkConstrained(checkFormat("keyword", keywordFormat), "keyword", {"values":["keyboard","pointer","programmatic"]}), false]], false)), true, true, false] }, x: dispatchDeclared, a: (host, I) => C(host, I), b: generatedInputs, i: [false] };
-const D = { g: "ui-popover", props: { "for": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "open": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "placement": { "required":false,"values":["top","top-start","top-end","bottom","bottom-start","bottom-end","left","left-start","left-end","right","right-start","right-end"],"default":"bottom-start", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "size": { "required":false,"values":["content","sm","md","lg"],"default":"content", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] } } };
+const D = { g: "ui-popover", props: { "bare": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "for": { "required":false,"default":"", c: checkString, t: "string", j: 0, m: "s" }, "open": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "placement": { "required":false,"values":["top","top-start","top-end","bottom","bottom-start","bottom-end","left","left-start","left-end","right","right-start","right-end"],"default":"bottom-start", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] }, "size": { "required":false,"values":["content","sm","md","lg"],"default":"content", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat)] } } };
 const C = (host) => activateModule(controller, host);
 
 export function createUiPopover(options = {}, html) {
@@ -19,7 +19,7 @@ export function createUiPopover(options = {}, html) {
   }
   element.setAttribute("data-component", "ui-popover");
   element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
-  const v = [false, null, null, null, null];
+  const v = [false, null, 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 createUiPopover(options = {}, html) {
   const p1 = (r, c, d) => {
   };
   const p0 = (r, c, d) => {
-    if (c & 17) {
-      const x0 = hostState(["internalOpen","size"], [v[0], v[4]]);
+    if (c & 35) {
+      const x0 = hostState(["bare","internalOpen","size"], [v[1], v[0], v[5]]);
       const s0 = x0;
       if (s0 !== r.v0) writeAttribute(r.n, "data-ui-popover-state", (r.v0 = s0) === "" ? null : s0);
     }
@@ -48,4 +48,4 @@ export function createUiPopover(options = {}, html) {
   manageProps(I);
   return element;
 }
-defineComponent("ui-popover", createUiPopover, ["for","open","placement","size"]);
+defineComponent("ui-popover", createUiPopover, ["bare","for","open","placement","size"]);

package/vue/UiEditorToolbar.vue

@@ -217,6 +217,7 @@ useComponentHost(() => import('../components/ui-editor-toolbar/ui-editor-toolbar
   }
 
   :global(:scope[data-ui-editor-toolbar-state~="floating"]:where([data-hn-ui-editor-toolbar])) {
+    box-sizing: border-box;
     position: relative;
     top: auto;
     width: max-content;

package/vue/UiPopover.d.ts

@@ -5,6 +5,9 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    bare: {
+        type: PropType<boolean | null>;
+    };
     for: {
         type: PropType<string | null>;
     };
@@ -33,6 +36,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     }>) => any;
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    bare: {
+        type: PropType<boolean | null>;
+    };
     for: {
         type: PropType<string | null>;
     };

package/vue/UiPopover.vue

@@ -27,6 +27,14 @@ defineOptions({ inheritAttrs: false })
 
 const propValidityContract = {
   props: {
+    bare: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'bare' },
+      description:
+        'Delegates the surface to its content, with no padding, border, background, shadow, or overflow clipping.',
+      default: false,
+    },
     for: {
       type: { kind: 'terminal', name: 'string' },
       required: false,
@@ -75,6 +83,7 @@ const propValidityContract = {
   },
 } as const
 const props = defineProps({
+  bare: { type: null as unknown as PropType<boolean | null> },
   for: { type: null as unknown as PropType<string | null> },
   open: { type: null as unknown as PropType<boolean | null> },
   placement: {
@@ -98,18 +107,22 @@ const props = defineProps({
   [BINDING_INPUTS_PROP]: { type: null as unknown as PropType<InputBindings> },
 })
 const acceptedProps: Record<string, unknown> = {
+  bare: false,
   for: '',
   open: false,
   placement: 'bottom-start',
   size: 'content',
 }
 const inputTracking = vuePropInputs(acceptedProps, {
+  bare: false,
   for: '',
   open: false,
   placement: 'bottom-start',
   size: 'content',
 }, (name, value, source, values) => {
   switch (name) {
+    case 'bare':
+      return checkPropInput(value, { kind: 'terminal', name: 'boolean' }, true, true)
     case 'for':
       return checkPropInput(value, { kind: 'terminal', name: 'string' }, true, true)
     case 'open':
@@ -128,6 +141,11 @@ const propInputs = inputTracking.inputs
 const checkedProps = computed(() => {
   void inputTracking.version.value
   return ({
+    bare: propInputs.value<boolean | null>(
+      'bare',
+      props['bare'],
+      props[BINDING_INPUTS_PROP],
+    ) as boolean,
     for: propInputs.value<string | null>('for', props['for'], props[BINDING_INPUTS_PROP]) as string,
     open: propInputs.value<boolean | null>(
       'open',
@@ -209,6 +227,7 @@ checkHydratedRoot('span', 'ui-popover')
 /** The values the styles' :host() and :state() rules test. */
 const hostState = computed(() =>
   [
+    checkedProps.value.bare && 'bare',
     internalOpen.value && 'internalOpen',
     checkedProps.value.size && 'size',
     checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
@@ -260,7 +279,7 @@ useComponentHost(() => import('../components/ui-popover/ui-popover.js'), {
       ? (incoming[name] ?? incoming[kebab] ?? null)
       : null
   },
-  propNames: ['for', 'open', 'placement', 'size'],
+  propNames: ['bare', 'for', 'open', 'placement', 'size'],
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   state: { internalOpen },
@@ -274,6 +293,7 @@ useComponentHost(() => import('../components/ui-popover/ui-popover.js'), {
     data-hn
     data-hn-ui-popover
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
+    :data-ui-popover-prop-bare="reflectedProp('bare', 'bare', checkedProps.bare, undefined, false)"
     :data-ui-popover-prop-for="reflectedProp('for', 'for', checkedProps.for, undefined, false)"
     :data-ui-popover-prop-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
     :data-ui-popover-prop-placement="reflectedProp('placement', 'placement', checkedProps.placement, undefined, false)"
@@ -313,6 +333,9 @@ useComponentHost(() => import('../components/ui-popover/ui-popover.js'), {
   syntax: "*";
   inherits: false;
 }
+
+/* A toolbar or card can supply its own surface, including an unclipped shadow. */
+
 @scope (.ui-popover) to ([data-hn]) {
   :global(:scope:where([data-hn-ui-popover])) {
     --_ui-popover-surface: var(--ui-popover-surface);
@@ -350,6 +373,13 @@ useComponentHost(() => import('../components/ui-popover/ui-popover.js'), {
       var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
     );
   }
+  :global(:scope[data-ui-popover-state~="bare"] .surface:where([data-hn-ui-popover])) {
+    overflow: visible;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    box-shadow: none;
+  }
 
   :global(:scope:not([data-ui-popover-state~="internalOpen"]):where([data-hn-ui-popover])) {
     display: none;

package/vue/chunks/UiEditorToolbar.js

@@ -98,6 +98,6 @@ var UiEditorToolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-01110420"]]);
+}), [["__scopeId", "data-v-a75db733"]]);
 //#endregion
 export { UiEditorToolbar_default as t };

package/vue/chunks/UiPopover.js

@@ -3,6 +3,7 @@ import { f as vPropValidity, i as checkPropInput, l as propValidityState, p as v
 import { computed, createElementBlock, createElementVNode, defineComponent, getCurrentInstance, mergeProps, openBlock, provide, ref, renderSlot, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiPopover.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
+	"data-ui-popover-prop-bare",
 	"data-ui-popover-prop-for",
 	"data-ui-popover-prop-open",
 	"data-ui-popover-prop-placement",
@@ -19,6 +20,7 @@ var UiPopover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 	inheritAttrs: false,
 	__name: "UiPopover",
 	props: {
+		bare: { type: null },
 		for: { type: null },
 		open: { type: null },
 		placement: { type: null },
@@ -32,6 +34,16 @@ var UiPopover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 	],
 	setup(__props, { emit: __emit }) {
 		const propValidityContract = { props: {
+			bare: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "bare" },
+				description: "Delegates the surface to its content, with no padding, border, background, shadow, or overflow clipping.",
+				default: false
+			},
 			for: {
 				type: {
 					kind: "terminal",
@@ -95,17 +107,23 @@ var UiPopover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		} };
 		const props = __props;
 		const inputTracking = vuePropInputs({
+			bare: false,
 			for: "",
 			open: false,
 			placement: "bottom-start",
 			size: "content"
 		}, {
+			bare: false,
 			for: "",
 			open: false,
 			placement: "bottom-start",
 			size: "content"
 		}, (name, value, source, values) => {
 			switch (name) {
+				case "bare": return checkPropInput(value, {
+					kind: "terminal",
+					name: "boolean"
+				}, true, true);
 				case "for": return checkPropInput(value, {
 					kind: "terminal",
 					name: "string"
@@ -131,6 +149,7 @@ var UiPopover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		const checkedProps = computed(() => {
 			inputTracking.version.value;
 			return {
+				bare: propInputs.value("bare", props["bare"], props[BINDING_INPUTS_PROP]),
 				for: propInputs.value("for", props["for"], props[BINDING_INPUTS_PROP]),
 				open: propInputs.value("open", props["open"], props[BINDING_INPUTS_PROP]),
 				placement: propInputs.value("placement", props["placement"], props[BINDING_INPUTS_PROP]),
@@ -150,6 +169,7 @@ var UiPopover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 		checkHydratedRoot("span", "ui-popover");
 		/** The values the styles' :host() and :state() rules test. */
 		const hostState = computed(() => [
+			checkedProps.value.bare && "bare",
 			internalOpen.value && "internalOpen",
 			checkedProps.value.size && "size",
 			checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`
@@ -188,6 +208,7 @@ var UiPopover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 				return incoming !== null && incoming !== void 0 ? incoming[name] ?? incoming[kebab] ?? null : null;
 			},
 			propNames: [
+				"bare",
 				"for",
 				"open",
 				"placement",
@@ -203,6 +224,7 @@ var UiPopover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			return withDirectives((openBlock(), createElementBlock("span", mergeProps({ class: "ui-popover" }, unref(nativeAttrs)(_ctx.$attrs), {
 				"data-hn": "",
 				"data-hn-ui-popover": "",
+				"data-ui-popover-prop-bare": unref(reflectedProp)("bare", "bare", checkedProps.value.bare, void 0, false),
 				"data-ui-popover-prop-for": unref(reflectedProp)("for", "for", checkedProps.value.for, void 0, false),
 				"data-ui-popover-prop-open": unref(reflectedProp)("open", "open", checkedProps.value.open, void 0, false),
 				"data-ui-popover-prop-placement": unref(reflectedProp)("placement", "placement", checkedProps.value.placement, void 0, false),
@@ -216,6 +238,6 @@ var UiPopover_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-b924204e"]]);
+}), [["__scopeId", "data-v-b4881cc1"]]);
 //#endregion
 export { UiPopover_default as t };

package/vue/components.css

@@ -4843,6 +4843,7 @@ legend.sr-only:where([data-hn-ui-radio-group]) {
     margin: 0 var(--ui-editor-toolbar-divider-margin, 4px);
 }
 :scope[data-ui-editor-toolbar-state~="floating"]:where([data-hn-ui-editor-toolbar]) {
+    box-sizing: border-box;
     position: relative;
     top: auto;
     width: max-content;
@@ -5389,6 +5390,8 @@ html[data-ui-input-modality="touch"] :scope:where([data-hn-ui-icon-button])::aft
   syntax: "*";
   inherits: false;
 }
+
+/* A toolbar or card can supply its own surface, including an unclipped shadow. */
 @scope (.ui-popover) to ([data-hn]) {
 :scope:where([data-hn-ui-popover]) {
     --_ui-popover-surface: var(--ui-popover-surface);
@@ -5425,6 +5428,13 @@ html[data-ui-input-modality="touch"] :scope:where([data-hn-ui-icon-button])::aft
       var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
     );
 }
+:scope[data-ui-popover-state~="bare"] .surface:where([data-hn-ui-popover]) {
+    overflow: visible;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    box-shadow: none;
+}
 :scope:not([data-ui-popover-state~="internalOpen"]):where([data-hn-ui-popover]) {
     display: none;
 }
@@ -10773,15 +10783,6 @@ html[data-ui-input-modality="touch"]
   background: transparent;
 }
 
-/* The floating toolbar supplies the surface; the containing popover only
-   positions it beside the app-owned trigger. */
-.looma-editor__formatting-popover {
-  --ui-popover-padding: 0;
-  --ui-popover-surface: transparent;
-  --ui-popover-border: transparent;
-  --ui-popover-shadow: none;
-}
-
 .looma-editor__chip-popover {
   inline-size: min(15rem, calc(100vw - 2rem));
 }
@@ -12877,6 +12878,15 @@ html[data-ui-input-modality="touch"]
       box-shadow: var(--_ui-popover-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
     }
 
+    /* A toolbar or card can supply its own surface, including an unclipped shadow. */
+    :scope:where([data-component~="ui-popover"])[data-ui-popover-state~="bare"] .surface {
+      overflow: visible;
+      padding: 0;
+      border: 0;
+      background: transparent;
+      box-shadow: none;
+    }
+
     :scope:where([data-component~="ui-popover"]):not([data-ui-popover-state~="internalOpen"]) {
       display: none;
     }
@@ -12932,6 +12942,8 @@ html[data-ui-input-modality="touch"]
 @scope ([data-component~="ui-popover"]) to ([data-component]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
 
+    /* A toolbar or card can supply its own surface, including an unclipped shadow. */
+
     @starting-style {
     }
 

package/vue/editor/index.js

@@ -427,7 +427,8 @@ function createViewportSurface$1(surface, options = {}) {
 		else Object.assign(surface.style, {
 			padding: "0",
 			border: "0",
-			background: "transparent"
+			background: "transparent",
+			overflow: "visible"
 		});
 	}
 	const hideSurface = () => {
@@ -4764,7 +4765,8 @@ function createViewportSurface(surface, options = {}) {
 		else Object.assign(surface.style, {
 			padding: "0",
 			border: "0",
-			background: "transparent"
+			background: "transparent",
+			overflow: "visible"
 		});
 	}
 	const hideSurface = () => {
@@ -8978,6 +8980,14 @@ var S$9 = {
 var D$9 = {
 	g: "ui-popover",
 	props: {
+		"bare": {
+			"required": false,
+			"default": false,
+			c: checkBoolean,
+			t: "boolean",
+			j: 0,
+			m: "b"
+		},
 		"for": {
 			"required": false,
 			"default": "",
@@ -9047,6 +9057,7 @@ function createUiPopover(options = {}, html) {
 		null,
 		null,
 		null,
+		null,
 		null
 	];
 	const B = acceptProps(element, D$9, S$9.n, v, componentProps, [], html);
@@ -9054,8 +9065,16 @@ function createUiPopover(options = {}, html) {
 		return { n: (P1$7 ??= buildTemplate(T1$7)).cloneNode(true) };
 	};
 	const p0 = (r, c, d) => {
-		if (c & 17) {
-			const s0 = hostState(["internalOpen", "size"], [v[0], v[4]]);
+		if (c & 35) {
+			const s0 = hostState([
+				"bare",
+				"internalOpen",
+				"size"
+			], [
+				v[1],
+				v[0],
+				v[5]
+			]);
 			if (s0 !== r.v0) writeAttribute(r.n, "data-ui-popover-state", (r.v0 = s0) === "" ? null : s0);
 		}
 		if (r.f0 === void 0) {
@@ -9091,6 +9110,7 @@ function createUiPopover(options = {}, html) {
 	return element;
 }
 defineComponent$1("ui-popover", createUiPopover, [
+	"bare",
 	"for",
 	"open",
 	"placement",
@@ -16064,6 +16084,7 @@ var LoomaEditor = defineComponent({
 				}, [props.toolbarMode === "contextual" && floatingFormattingMode() && formattingActive() ? null : renderLinkContextCard(instance)])]) : null,
 				instance && props.editable && !mobile.value && props.toolbarMode === "popover" && props.toolbarTriggerId ? h(Popover, {
 					class: "looma-editor__formatting-popover",
+					bare: true,
 					role: "region",
 					"aria-label": "Formatting tools",
 					open: props.toolbarOpen,
@@ -16193,6 +16214,7 @@ var LoomaEditor = defineComponent({
 				props.editable && props.compactToolbar && !mobile.value ? h(Popover, {
 					class: "looma-editor__compact-formatting",
 					for: formatAnchorId,
+					bare: true,
 					open: formatOpen.value,
 					placement: "bottom-start",
 					onOpen: () => {