@threadlabs/looma 0.29.16 → 0.29.18

package/vue/chunks/UiIcon.js

@@ -2,7 +2,11 @@ import { d as list, i as checkHydratedRoot, p as nativeAttrs, r as attribute, s
 import { a as vPropValidity, n as checkedProp } from "./props.js";
 import { Fragment, computed, createCommentVNode, createElementBlock, defineComponent, mergeProps, openBlock, renderList, unref, watchSyncEffect, withDirectives } from "vue";
 //#region .build/vue/UiIcon.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = ["data-ui-icon-prop-name"];
+var _hoisted_1 = [
+	"data-ui-icon-prop-name",
+	"data-ui-icon-prop-tone",
+	"data-ui-icon-state"
+];
 var _hoisted_2 = {
 	viewBox: "0 0 24 24",
 	fill: "none",
@@ -37,27 +41,59 @@ var _hoisted_6 = [
 var UiIcon_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	inheritAttrs: false,
 	__name: "UiIcon",
-	props: { name: {
-		type: null,
-		default: ""
-	} },
+	props: {
+		name: {
+			type: null,
+			default: ""
+		},
+		tone: {
+			type: null,
+			default: "inherit"
+		}
+	},
 	setup(__props) {
-		const propValidityContract = { props: { name: {
-			type: {
-				kind: "terminal",
-				name: "string"
+		const propValidityContract = { props: {
+			name: {
+				type: {
+					kind: "terminal",
+					name: "string"
+				},
+				required: false,
+				target: { attribute: "name" },
+				description: "Which icon to draw, by its name in Looma's icon set (LOOMA_ICONS), such as \"align-left\". An unknown or empty name draws nothing. The icon is hidden from\n      assistive technology, so name the control it sits in.",
+				default: ""
 			},
-			required: false,
-			target: { attribute: "name" },
-			description: "Which icon to draw, by its name in Looma's icon set (LOOMA_ICONS), such as \"align-left\". An unknown or empty name draws nothing. The icon is hidden from\n      assistive technology, so name the control it sits in.",
-			default: ""
-		} } };
+			tone: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "tone" },
+				description: "Icon colour. inherit follows its control; secondary and muted keep a supporting icon quiet without a text wrapper.",
+				values: [
+					"inherit",
+					"secondary",
+					"muted"
+				],
+				default: "inherit"
+			}
+		} };
 		const props = __props;
-		const acceptedProps = { name: "" };
-		const checkedProps = computed(() => ({ name: checkedProp(props["name"], {
-			kind: "terminal",
-			name: "string"
-		}, false, "name", acceptedProps) }));
+		const acceptedProps = {
+			name: "",
+			tone: "inherit"
+		};
+		const checkedProps = computed(() => ({
+			name: checkedProp(props["name"], {
+				kind: "terminal",
+				name: "string"
+			}, false, "name", acceptedProps),
+			tone: checkedProp(props["tone"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "tone", acceptedProps)
+		}));
 		checkedProps.value;
 		watchSyncEffect(() => {
 			checkedProps.value;
@@ -1157,13 +1193,17 @@ var UiIcon_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}]
 		})[checkedProps.value.name]);
 		checkHydratedRoot("span", "ui-icon");
+		/** The values the styles' :host() prop and state rules test. */
+		const hostState = computed(() => [checkedProps.value.tone && "tone", checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
 			return withDirectives((openBlock(), createElementBlock("span", mergeProps({
 				class: "ui-icon",
 				"aria-hidden": "true"
 			}, unref(nativeAttrs)(_ctx.$attrs), {
 				"data-hn": "",
-				"data-ui-icon-prop-name": unref(reflectedProp)("name", "name", checkedProps.value.name, void 0, false)
+				"data-ui-icon-prop-name": unref(reflectedProp)("name", "name", checkedProps.value.name, void 0, false),
+				"data-ui-icon-prop-tone": unref(reflectedProp)("tone", "tone", checkedProps.value.tone, void 0, false),
+				"data-ui-icon-state": hostState.value || void 0
 			}), [(openBlock(), createElementBlock("svg", _hoisted_2, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(list)(unref(shapes)), (shape, index) => {
 				return openBlock(), createElementBlock("g", { key: index }, [
 					shape.tag === "path" ? (openBlock(), createElementBlock("path", {
@@ -1199,6 +1239,6 @@ var UiIcon_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-effc7962"]]);
+}), [["__scopeId", "data-v-39bdd7d1"]]);
 //#endregion
 export { UiIcon_default as t };

package/vue/chunks/UiIconButton.js

@@ -16,6 +16,7 @@ var _hoisted_1 = [
 	"data-ui-icon-button-prop-loading",
 	"data-ui-icon-button-prop-match-button",
 	"data-ui-icon-button-prop-pending",
+	"data-ui-icon-button-prop-revealed",
 	"data-ui-icon-button-prop-round",
 	"data-ui-icon-button-prop-size",
 	"data-ui-icon-button-prop-tone",
@@ -60,6 +61,10 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			type: null,
 			default: false
 		},
+		revealed: {
+			type: null,
+			default: false
+		},
 		round: {
 			type: null,
 			default: false
@@ -149,6 +154,16 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				description: "Deprecated alias for loading.",
 				default: false
 			},
+			revealed: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "revealed" },
+				description: "Keeps an anticipatory button visible while its context is active, such as a selected block or an open popup. It does not imply a pressed or expanded state.",
+				default: false
+			},
 			round: {
 				type: {
 					kind: "terminal",
@@ -209,6 +224,7 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			loading: false,
 			matchButton: false,
 			pending: false,
+			revealed: false,
 			round: false,
 			size: "md",
 			tone: null,
@@ -243,6 +259,10 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				kind: "terminal",
 				name: "boolean"
 			}, false, "pending", acceptedProps),
+			revealed: checkedProp(props["revealed"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "revealed", acceptedProps),
 			round: checkedProp(props["round"], {
 				kind: "terminal",
 				name: "boolean"
@@ -292,6 +312,7 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			checkedProps.value.anticipatory && "anticipatory",
 			checkedProps.value.guide && "guide",
 			checkedProps.value.guide != null && `guide=${encodeURIComponent(checkedProps.value.guide)}`,
+			checkedProps.value.revealed && "revealed",
 			checkedProps.value.variant && "variant",
 			checkedProps.value.variant != null && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
 			checkedProps.value.loading && "loading",
@@ -323,6 +344,7 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				"loading",
 				"matchButton",
 				"pending",
+				"revealed",
 				"round",
 				"size",
 				"tone",
@@ -352,6 +374,7 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				"data-ui-icon-button-prop-loading": unref(reflectedProp)("loading", "loading", checkedProps.value.loading, void 0, false),
 				"data-ui-icon-button-prop-match-button": unref(reflectedProp)("matchButton", "match-button", checkedProps.value.matchButton, void 0, false),
 				"data-ui-icon-button-prop-pending": unref(reflectedProp)("pending", "pending", checkedProps.value.pending, void 0, false),
+				"data-ui-icon-button-prop-revealed": unref(reflectedProp)("revealed", "revealed", checkedProps.value.revealed, void 0, false),
 				"data-ui-icon-button-prop-round": unref(reflectedProp)("round", "round", checkedProps.value.round, void 0, false),
 				"data-ui-icon-button-prop-size": unref(reflectedProp)("size", "size", checkedProps.value.size, void 0, false),
 				"data-ui-icon-button-prop-tone": unref(reflectedProp)("tone", "tone", checkedProps.value.tone, void 0, false),
@@ -373,6 +396,6 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-5994f52f"]]);
+}), [["__scopeId", "data-v-213e5302"]]);
 //#endregion
 export { UiIconButton_default as t };

package/vue/components.css

@@ -100,6 +100,12 @@
     inline-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
     block-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
 }
+:scope[data-ui-icon-state~="tone=secondary"] {
+    color: var(--ui-text-secondary);
+}
+:scope[data-ui-icon-state~="tone=muted"] {
+    color: var(--ui-text-muted);
+}
 svg {
     inline-size: 100%;
     block-size: 100%;
@@ -4656,19 +4662,19 @@ legend.sr-only:where([data-hn-ui-radio-group]) {
       transform calc(var(--ui-motion-fast) * 2) cubic-bezier(0.2, 1.4, 0.35, 1);
 }
 @media (hover: hover) and (pointer: fine) {
-:scope[data-ui-icon-button-state~="anticipatory"]:not(:scope[data-ui-icon-button-state~="variant=solid"], :scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible):where([data-hn-ui-icon-button]) {
+:scope[data-ui-icon-button-state~="anticipatory"]:not(:scope[data-ui-icon-button-state~="revealed"], :scope[data-ui-icon-button-state~="variant=solid"], :scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible):where([data-hn-ui-icon-button]) {
       border-color: transparent;
       background-color: transparent;
       box-shadow: none;
 }
-:scope[data-ui-icon-button-state~="anticipatory"]:not(:scope[data-ui-icon-button-state~="variant=solid"], :scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)
+:scope[data-ui-icon-button-state~="anticipatory"]:not(:scope[data-ui-icon-button-state~="revealed"], :scope[data-ui-icon-button-state~="variant=solid"], :scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)
       .content:where([data-hn-ui-icon-button]) {
       opacity: 0;
       transform: scale(0.65);
       transition-duration: var(--ui-motion-fast);
 }
 }
-:scope[data-ui-icon-button-state~="anticipatory"]:is(:scope[data-ui-icon-button-state~="variant=solid"], [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible):where([data-hn-ui-icon-button])::before {
+:scope[data-ui-icon-button-state~="anticipatory"]:is(:scope[data-ui-icon-button-state~="revealed"], :scope[data-ui-icon-button-state~="variant=solid"], [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible):where([data-hn-ui-icon-button])::before {
     opacity: 0;
 }
 :scope:where([data-hn-ui-icon-button]) {
@@ -10361,11 +10367,30 @@ html[data-ui-input-modality="touch"]
 }
 @media (pointer: coarse) { .looma-compact-editor { font-size: var(--ui-font-size-md); } }
 /* The editor surface owns its renderer canvas. Existing hooks retain their defaults. */
+/* Native TOC wrappers position the composed control beyond the active-block guide.
+   The IconButton itself owns its dot, motion, focus and touch treatment. */
+.looma-editor .ProseMirror nav[data-looma-toc] {
+  position: relative;
+}
+
+.looma-editor .ProseMirror [data-looma-toc-gutter] {
+  position: absolute;
+  inset-block-start: calc(-1 * var(--ui-space-1));
+  inset-inline-end: calc(100% + var(--ui-editor-active-block-offset, var(--ui-space-3)) + var(--ui-space-1));
+  display: flex;
+}
+
+/* Default canvases reserve the author gutter; consumers with their own outer
+   gutter retain their explicit content-padding hook. Compact readers need none. */
+.looma-editor .ProseMirror:has([data-looma-toc-gutter]:not([hidden])) {
+  --_ui-editor-toc-gutter: calc(var(--ui-space-6) + var(--ui-space-4));
+}
+
 :is([data-component~="ui-editor-surface"], .ui-editor-surface) .ProseMirror {
   min-height: var(--ui-editor-content-min-height, var(--_ui-editor-content-min-height, 300px));
   padding:
     var(--ui-editor-content-padding-block, var(--_ui-editor-content-padding-block, var(--ui-space-4)))
-    var(--ui-editor-content-padding-inline, var(--_ui-editor-content-padding-inline, var(--ui-space-6)));
+    var(--ui-editor-content-padding-inline, var(--_ui-editor-content-padding-inline, var(--_ui-editor-toc-gutter, var(--ui-space-6))));
   outline: none;
   color: var(--ui-editor-content-color, var(--ui-text-primary));
   caret-color: var(--ui-editor-caret-color, var(--ui-accent-solid));
@@ -11520,6 +11545,40 @@ html[data-ui-input-modality="touch"]
 :where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
 }
 @supports (-moz-appearance: none) {
+[data-component~="ui-affordance-scope"] { --html-next-scope-owner: "ui-affordance-scope" !important; }
+}
+@scope ([data-component~="ui-affordance-scope"]) to ([data-component], [data-slotted]) {
+:scope:where([data-component~="ui-affordance-scope"]) {
+      display: contents;
+      --ui-affordance-scope-engaged: 0;
+      --ui-affordance-scope-guide: 1;
+    }
+
+    :scope:where([data-component~="ui-affordance-scope"])[data-ui-affordance-scope-state~="engaged"] {
+      --ui-affordance-scope-engaged: 1;
+    }
+
+    /* Published to descendants: each guide multiplies its opacity by it, so none reaches them all. */
+    :scope:where([data-component~="ui-affordance-scope"])[data-ui-affordance-scope-state~="guide=none"] {
+      --ui-affordance-scope-guide: 0;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :scope:where([data-component~="ui-affordance-scope"])[hidden] {
+      display: none;
+    }
+}
+@scope ([data-component~="ui-affordance-scope"]) to ([data-component]) {
+/* Published to descendants: each guide multiplies its opacity by it, so none reaches them all. */
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+}
+/* Generated by HTML Next 1.0.0-alpha.57. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
 [data-component~="ui-cluster"] { --html-next-scope-owner: "ui-cluster" !important; }
 }
 @scope ([data-component~="ui-cluster"]) to ([data-component], [data-slotted]) {
@@ -11776,6 +11835,14 @@ html[data-ui-input-modality="touch"]
       block-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
     }
 
+    :scope:where([data-component~="ui-icon"])[data-ui-icon-state~="tone=secondary"] {
+      color: var(--ui-text-secondary);
+    }
+
+    :scope:where([data-component~="ui-icon"])[data-ui-icon-state~="tone=muted"] {
+      color: var(--ui-text-muted);
+    }
+
     svg {
       inline-size: 100%;
       block-size: 100%;
@@ -11956,13 +12023,13 @@ html[data-ui-input-modality="touch"]
     }
 
     @media (hover: hover) and (pointer: fine) {
-      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]:not(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="loading"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible) {
+      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]:not(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="revealed"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="loading"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible) {
         border-color: transparent;
         background-color: transparent;
         box-shadow: none;
       }
 
-      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]:not(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="loading"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)
+      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]:not(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="revealed"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="loading"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)
         .content {
         opacity: 0;
         transform: scale(0.65);
@@ -11970,7 +12037,7 @@ html[data-ui-input-modality="touch"]
       }
     }
 
-    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]:is(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"], [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]:is(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="revealed"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"], [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
       opacity: 0;
     }