@threadlabs/looma 0.31.1 → 0.31.3

package/editor/chunks/extensions.js

@@ -11155,6 +11155,26 @@ var TableHeader = Node$1.create({
 });
 //#endregion
 //#region src/editor/extensions/table-formatting.ts
+/** Table chrome lives outside the horizontal scroller, within the table's document block. */
+var LoomaTableView = class extends TableView {
+	toolbarHost;
+	constructor(node, cellMinWidth) {
+		super(node, cellMinWidth);
+		const scroller = this.dom;
+		this.dom = document.createElement("div");
+		this.dom.dataset.loomaTableBlock = "";
+		this.toolbarHost = document.createElement("div");
+		this.toolbarHost.dataset.loomaTableToolbarHost = "";
+		this.toolbarHost.contentEditable = "false";
+		this.dom.append(scroller, this.toolbarHost);
+	}
+	ignoreMutation(mutation) {
+		return mutation.type !== "selection" && this.toolbarHost.contains(mutation.target) || super.ignoreMutation(mutation);
+	}
+	stopEvent(event) {
+		return event.target instanceof globalThis.Node && this.toolbarHost.contains(event.target);
+	}
+};
 /**
 * Looma's table behavior policy: resizable columns, stable minimum cell width,
 * and no independently resizable trailing column. The narrow handle is also a
@@ -11165,6 +11185,7 @@ var TableHeader = Node$1.create({
 */
 var LoomaTable = Table.configure({
 	resizable: true,
+	View: LoomaTableView,
 	handleWidth: 3,
 	cellMinWidth: 112,
 	lastColumnResizable: false

package/editor/table-ui.d.ts

@@ -17,17 +17,8 @@ export declare const LOOMA_TABLE_CONTROLS_CLOSED: LoomaTableControls;
  * with nothing selected; narrow screens use the editing dock instead of the toolbar and overlay.
  */
 export declare function tableControls(state: ActiveTableUiState, selectionInTable: boolean, narrow: boolean): LoomaTableControls;
-/**
- * Centers the table toolbar on the table, at most 420px wide and 12px inside the viewport's sides,
- * above the table when there is room and below it otherwise.
- */
-export declare function tableToolbarPlacement(table: DOMRect, viewportWidth: number): {
-    top: string;
-    left: string;
-    maxWidth: string;
-};
-/** The overlay covers the table exactly. */
-export declare const tableOverlayPlacement: (table: DOMRect) => {
+/** Inline controls cover the table in the editor's coordinate system. */
+export declare const tableOverlayPlacement: (table: DOMRect, editor: DOMRect) => {
     top: string;
     left: string;
     width: string;

package/editor/toolbar-tooltip.d.ts

@@ -22,4 +22,4 @@ export interface LoomaToolbarTooltip {
     destroy(): void;
 }
 /** Calls `onChange` after every state change. */
-export declare function createToolbarTooltip(onChange: (state: LoomaToolbarTooltipState) => void): LoomaToolbarTooltip;
+export declare function createToolbarTooltip(onChange: (state: LoomaToolbarTooltipState) => void, delay?: () => number): LoomaToolbarTooltip;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.31.1",
+  "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;
 }
@@ -10438,6 +10448,30 @@ html[data-ui-input-modality="touch"]
 :is([data-component~="ui-editor-surface"], .ui-editor-surface) .ProseMirror[data-link-navigation] a[href] {
   cursor: pointer;
 }
+
+/* Inline table affordances share the document's scroll chain; popups use the top layer. */
+.looma-editor__table-overlay-shell {
+  position: absolute;
+  z-index: var(--ui-editor-overlay-z-index, 299);
+  overflow: visible;
+  pointer-events: none;
+}
+
+/* The toolbar follows its table, lifting inside the document scroller only when needed. */
+[data-looma-table-toolbar-host] { display: contents; }
+.looma-editor__table-toolbar-shell {
+  position: sticky;
+  bottom: var(--ui-space-3);
+  z-index: var(--ui-editor-popover-z-index, 300);
+  width: max-content;
+  max-width: 100%;
+  margin: var(--ui-space-3) auto 0;
+  overflow-x: auto;
+}
+
+.looma-editor .ProseMirror [data-looma-table-block] + p {
+  margin-top: var(--ui-editor-table-following-gap, var(--ui-space-4));
+}
 /**
  * Looma editor styles (tokens-based).
  * Tables, context menu, insert-table grid, slash menu. Use with ProseMirror/Tiptap content.
@@ -10738,7 +10772,6 @@ html[data-ui-input-modality="touch"]
 
 .looma-editor__table-picker-popover,
 .looma-editor__chip-popover,
-.looma-editor__table-toolbar-shell,
 .looma-editor__table-menu-shell {
   z-index: var(--ui-editor-popover-z-index, 300);
 }
@@ -10750,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));
 }
@@ -10768,9 +10792,7 @@ html[data-ui-input-modality="touch"]
   outline-offset: var(--ui-focus-width);
 }
 
-.looma-editor__table-toolbar-shell,
-.looma-editor__table-menu-shell,
-.looma-editor__table-overlay-shell {
+.looma-editor__table-menu-shell {
   position: fixed;
 }
 
@@ -10836,12 +10858,6 @@ html[data-ui-input-modality="touch"]
   color: var(--ui-text-primary, #111827);
 }
 
-.looma-editor__table-overlay-shell {
-  z-index: var(--ui-editor-overlay-z-index, 299);
-  overflow: visible;
-  pointer-events: none;
-}
-
 .looma-editor .ProseMirror .looma-mention {
   padding: 0.08em 0.28em;
   color: var(--ui-editor-mention-color, var(--ui-accent-active, var(--ui-accent-solid)));
@@ -12862,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;
     }
@@ -12917,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 {
     }