@threadlabs/looma 0.29.16 → 0.29.17

package/package.json

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

package/styles/ui-icon-button.css

@@ -162,13 +162,13 @@
     }
 
     @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);
@@ -176,7 +176,7 @@
       }
     }
 
-    :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;
     }
 

package/vanilla/UiIconButton.d.ts

@@ -13,6 +13,7 @@ export interface UiIconButtonProps {
   loading?: boolean | null;
   matchButton?: boolean | null;
   pending?: boolean | null;
+  revealed?: boolean | null;
   round?: boolean | null;
   size?: "sm" | "md" | "lg" | null;
   tone?: "accent" | "neutral" | null;

package/vanilla/UiIconButton.js

@@ -8,7 +8,7 @@ const T1 = ["ui-spinner",["size","sm"]];
 const T2 = ["",[]];
 let P0, P1, P2;
 const S = { n: [], t: [], f: import.meta.url, g: "ui-icon-button" };
-const D = { g: "ui-icon-button", props: { "anticipatory": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "guide": { "required":false,"values":["dot","bar"],"default":"dot", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "label": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "loading": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "matchButton": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "pending": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "round": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "size": { "required":false,"values":["sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "tone": { "required":false,"values":["accent","neutral"], c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "variant": { "required":false,"values":["ghost","outline","solid"],"default":"ghost", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
+const D = { g: "ui-icon-button", props: { "anticipatory": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "guide": { "required":false,"values":["dot","bar"],"default":"dot", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "label": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "loading": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "matchButton": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "pending": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "revealed": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "round": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "size": { "required":false,"values":["sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "tone": { "required":false,"values":["accent","neutral"], c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "variant": { "required":false,"values":["ghost","outline","solid"],"default":"ghost", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
 const C = (host) => controller.default(host);
 
 export function createUiIconButton(options = {}, html) {
@@ -21,7 +21,7 @@ export function createUiIconButton(options = {}, html) {
   if (!element.hasAttribute("type")) element.setAttribute("type", "button");
   element.setAttribute("data-component", "ui-icon-button");
   element.append((P0 ??= buildTemplate(T0)).cloneNode(true));
-  const v = [null, null, null, null, null, null, null, null, null, null, null];
+  const v = [null, null, null, null, null, null, null, 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);
@@ -67,8 +67,8 @@ export function createUiIconButton(options = {}, html) {
       const s4 = toAttribute(x4, "aria-busy");
       if (s4 !== r.v4) writeAttribute(r.n, "aria-busy", r.v4 = s4);
     }
-    if (c & 2037) {
-      const x5 = hostState(["tone","anticipatory","guide","variant","loading","pending","size","matchButton","round"], [v[9], v[0], v[2], v[10], v[4], v[6], v[8], v[5], v[7]]);
+    if (c & 4085) {
+      const x5 = hostState(["tone","anticipatory","guide","revealed","variant","loading","pending","size","matchButton","round"], [v[10], v[0], v[2], v[7], v[11], v[4], v[6], v[9], v[5], v[8]]);
       const s5 = x5;
       if (s5 !== r.v5) writeAttribute(r.n, "data-ui-icon-button-state", (r.v5 = s5) === "" ? null : s5);
     }

package/vue/UiIconButton.d.ts

@@ -32,6 +32,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<boolean | null>;
         default: boolean;
     };
+    revealed: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     round: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -77,6 +81,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<boolean | null>;
         default: boolean;
     };
+    revealed: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     round: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -104,6 +112,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     loading: boolean | null;
     pending: boolean | null;
     anticipatory: boolean | null;
+    revealed: boolean | null;
     matchButton: boolean | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/vue/UiIconButton.vue

@@ -72,6 +72,14 @@ const propValidityContract = {
       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', name: 'boolean' },
       required: false,
@@ -115,6 +123,7 @@ const props = defineProps({
   loading: { type: null as unknown as PropType<boolean | null>, default: false },
   matchButton: { type: null as unknown as PropType<boolean | null>, default: false },
   pending: { type: null as unknown as PropType<boolean | null>, default: false },
+  revealed: { type: null as unknown as PropType<boolean | null>, default: false },
   round: { type: null as unknown as PropType<boolean | null>, default: false },
   size: { type: null as unknown as PropType<'sm' | 'md' | 'lg' | null>, default: 'md' },
   tone: { type: null as unknown as PropType<'accent' | 'neutral' | null>, default: null },
@@ -131,6 +140,7 @@ const acceptedProps: Record<string, unknown> = {
   loading: false,
   matchButton: false,
   pending: false,
+  revealed: false,
   round: false,
   size: 'md',
   tone: null,
@@ -186,6 +196,13 @@ const checkedProps = computed(() => ({
     'pending',
     acceptedProps,
   ) as boolean,
+  revealed: checkedProp<boolean>(
+    props['revealed'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'revealed',
+    acceptedProps,
+  ) as boolean,
   round: checkedProp<boolean>(
     props['round'],
     { kind: 'terminal', name: 'boolean' },
@@ -271,6 +288,7 @@ const hostState = computed(() =>
     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)}`,
@@ -308,6 +326,7 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     'loading',
     'matchButton',
     'pending',
+    'revealed',
     'round',
     'size',
     'tone',
@@ -338,6 +357,7 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     :data-ui-icon-button-prop-loading="reflectedProp('loading', 'loading', checkedProps.loading, undefined, false)"
     :data-ui-icon-button-prop-match-button="reflectedProp('matchButton', 'match-button', checkedProps.matchButton, undefined, false)"
     :data-ui-icon-button-prop-pending="reflectedProp('pending', 'pending', checkedProps.pending, undefined, false)"
+    :data-ui-icon-button-prop-revealed="reflectedProp('revealed', 'revealed', checkedProps.revealed, undefined, false)"
     :data-ui-icon-button-prop-round="reflectedProp('round', 'round', checkedProps.round, undefined, false)"
     :data-ui-icon-button-prop-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-ui-icon-button-prop-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
@@ -534,13 +554,13 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
   }
 
   @media (hover: hover) and (pointer: fine) {
-    :global(: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])) {
+    :global(: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;
     }
 
-    :global(: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)
+    :global(: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);
@@ -548,7 +568,7 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     }
   }
 
-  :global(: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) {
+  :global(: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;
   }
 

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

@@ -4656,19 +4656,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 +10361,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 +11539,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]) {
@@ -11956,13 +12009,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 +12023,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;
     }