@threadlabs/looma 0.26.25 → 0.27.0

package/vue/UiEditorTableContextMenu.vue

@@ -654,10 +654,16 @@ function uniqueKeys<T>(
 </template>
 
 <style scoped>
+[data-component~="ui-editor-table-context-menu"][popover] {
+  position: fixed;
+  inset: auto;
+  margin: 0;
+}
+
 [data-component~="ui-editor-table-context-menu"] {
   /* The max-width is a promise about the menu's footprint, so it counts padding and border. */
   box-sizing: border-box;
-  min-width: 14rem;
+  min-width: min(14rem, calc(100vw - 24px));
   max-width: min(17rem, calc(100vw - 24px));
   max-height: min(28rem, calc(100vh - 24px));
   padding: var(--ui-space-2);
@@ -712,16 +718,22 @@ function uniqueKeys<T>(
   color: var(--ui-danger);
 }
 
+/* Swatches wrap like words: the row asks for the menu's full width, and a narrower menu fits fewer. */
 .swatches {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  display: flex;
+  flex-wrap: wrap;
   gap: 3px;
 }
 
-.swatch-button {
+/* Three to a row at the menu's full width; 5rem keeps the longest label, "Default", whole. */
+[data-component~="ui-editor-table-context-menu"] .swatch-button {
   display: inline-flex;
   align-items: center;
   gap: var(--ui-space-2);
+  flex: 1 0 5rem;
+  min-width: 5rem;
+  max-width: calc((100% - 6px) / 3);
+  padding-inline-end: var(--ui-space-1);
 }
 
 .swatch {
@@ -768,6 +780,11 @@ function uniqueKeys<T>(
   margin: var(--ui-space-1) 0;
 }
 
+/* Separators divide sections, so none sits above the first. */
+.sep:first-child {
+  display: none;
+}
+
 [data-component~="ui-editor-table-context-menu"][hidden] {
   display: none;
 }

package/vue/UiEditorTableToolbar.vue

@@ -796,14 +796,6 @@ function uniqueKeys<T>(
   background: var(--ui-accent-soft, var(--ui-accent-subtle));
 }
 
-.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] .menu {
-  top: auto;
-  right: 0;
-  bottom: calc(100% + var(--ui-space-2));
-  max-height: min(50dvh, 22rem);
-  overflow-y: auto;
-  overscroll-behavior: contain;
-}
 [data-component~="ui-editor-table-toolbar"] {
   display: inline-flex;
   align-items: center;
@@ -894,9 +886,9 @@ function uniqueKeys<T>(
 
 .menu {
   box-sizing: border-box;
-  position: absolute;
-  top: calc(100% + var(--ui-space-2));
-  right: 0;
+  position: fixed;
+  inset: auto;
+  margin: 0;
   min-width: 12rem;
   max-width: min(17rem, calc(100vw - 24px));
   padding: var(--ui-space-1);

package/vue/UiIconButton.d.ts

@@ -12,6 +12,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<boolean | null>;
         default: boolean;
     };
+    guide: {
+        type: PropType<"dot" | "bar" | null>;
+        default: string;
+    };
     label: {
         type: PropType<string | null>;
         default: null;
@@ -53,6 +57,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<boolean | null>;
         default: boolean;
     };
+    guide: {
+        type: PropType<"dot" | "bar" | null>;
+        default: string;
+    };
     label: {
         type: PropType<string | null>;
         default: null;
@@ -87,6 +95,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>> & Readonly<{}>, {
     label: string | null;
+    guide: "bar" | "dot" | null;
     round: boolean | null;
     size: "sm" | "md" | "lg" | null;
     tone: "neutral" | "accent" | null;

package/vue/UiIconButton.vue

@@ -26,6 +26,15 @@ const propValidityContract = {
         'Disables the button, so it cannot be pressed or focused, and gives it a flat neutral surface and muted icon.',
       default: false,
     },
+    guide: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'guide' },
+      description:
+        'The idle marker of an anticipatory button: dot for contextual actions, or a slim neutral rounded bar for a panel-edge control. The icon appears on hover or\n      keyboard focus; touch always shows the icon.',
+      values: ['dot', 'bar'],
+      default: 'dot',
+    },
     label: {
       type: { kind: 'terminal', name: 'string' },
       required: false,
@@ -93,6 +102,7 @@ const propValidityContract = {
 const props = defineProps({
   anticipatory: { type: null as unknown as PropType<boolean | null>, default: false },
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
+  guide: { type: null as unknown as PropType<'dot' | 'bar' | null>, default: 'dot' },
   label: { type: null as unknown as PropType<string | null>, default: null },
   loading: { type: null as unknown as PropType<boolean | null>, default: false },
   matchButton: { type: null as unknown as PropType<boolean | null>, default: false },
@@ -108,6 +118,7 @@ const props = defineProps({
 const acceptedProps: Record<string, unknown> = {
   anticipatory: false,
   disabled: false,
+  guide: 'dot',
   label: null,
   loading: false,
   matchButton: false,
@@ -132,6 +143,13 @@ const checkedProps = computed(() => ({
     'disabled',
     acceptedProps,
   ) as boolean,
+  guide: checkedProp<'dot' | 'bar'>(
+    props['guide'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'guide',
+    acceptedProps,
+  ) as 'dot' | 'bar',
   label: checkedProp<string>(
     props['label'],
     { kind: 'terminal', name: 'string' },
@@ -289,6 +307,8 @@ const hostState = computed(() =>
     checkedProps.value.tone && 'tone',
     checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`,
     checkedProps.value.anticipatory && 'anticipatory',
+    checkedProps.value.guide && 'guide',
+    checkedProps.value.guide != null && `guide=${encodeURIComponent(checkedProps.value.guide)}`,
     checkedProps.value.variant && 'variant',
     checkedProps.value.variant != null
     && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
@@ -321,6 +341,7 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
   propNames: [
     'anticipatory',
     'disabled',
+    'guide',
     'label',
     'loading',
     'matchButton',
@@ -378,6 +399,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-anticipatory="reflectedProp('anticipatory', 'anticipatory', checkedProps.anticipatory, undefined, false)"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
+    :data-guide="reflectedProp('guide', 'guide', checkedProps.guide, undefined, false)"
     :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
     :data-loading="reflectedProp('loading', 'loading', checkedProps.loading, undefined, false)"
     :data-match-button="reflectedProp('matchButton', 'match-button', checkedProps.matchButton, undefined, true)"
@@ -539,6 +561,13 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
   pointer-events: none;
 }
 
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-ui-icon-button-state~="guide=bar"]::before {
+  inline-size: 2px;
+  block-size: 20px;
+  background: var(--ui-border-strong);
+  opacity: 1;
+}
+
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"]:disabled::before {
   opacity: 0;
 }
@@ -595,7 +624,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
     border-color var(--ui-motion-fast) var(--ui-motion-ease),
     color var(--ui-motion-fast) var(--ui-motion-ease),
     box-shadow var(--ui-motion-base) var(--ui-motion-ease),
-    transform var(--ui-motion-fast) var(--ui-motion-ease);
+    scale var(--ui-motion-fast) var(--ui-motion-ease);
 }
 
 @media (hover: none), (pointer: coarse) {
@@ -752,7 +781,7 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
 }
 
 [data-component~="ui-icon-button"]:active:enabled:not([aria-disabled="true"]) {
-  transform: scale(var(--ui-icon-button-active-scale, 0.96));
+  scale: var(--ui-icon-button-active-scale, 0.96);
 }
 
 :is([data-component~="ui-icon-button"][data-ui-icon-button-state~="loading"], [data-component~="ui-icon-button"][data-ui-icon-button-state~="pending"]) {

package/vue/UiListbox.vue

@@ -479,21 +479,23 @@ function uniqueKeys<T>(
     :data-values="reflectedProp('values', 'values', checkedProps.values, undefined, false)"
     ref="root"
   >
-    <UiScrollArea class="choices" ref="choicesElement"><KeyedBoundary><div
-          v-for="choice in uniqueKeys(choices, (choice, index, loop) => choice.index)"
-          :key="choice.index"
-          class="option"
-          role="option"
-          data-ui-choice-option=""
-          :data-multiple="checkedProps.multiple ? '' : undefined"
-          :id="concat(uid, '-option-', choice.index)"
-          :data-index="choice.index"
-          :aria-selected="choice.selected"
-          :aria-disabled="choice.disabled"
-          :class="{ active: choice.index === active }"
-        >
-          <span>{{ choice.label }}</span>
-        </div></KeyedBoundary></UiScrollArea>
+    <div class="choices">
+      <UiScrollArea ref="choicesElement"><KeyedBoundary><div
+            v-for="choice in uniqueKeys(choices, (choice, index, loop) => choice.index)"
+            :key="choice.index"
+            class="option"
+            role="option"
+            data-ui-choice-option=""
+            :data-multiple="checkedProps.multiple ? '' : undefined"
+            :id="concat(uid, '-option-', choice.index)"
+            :data-index="choice.index"
+            :aria-selected="choice.selected"
+            :aria-disabled="choice.disabled"
+            :class="{ active: choice.index === active }"
+          >
+            <span>{{ choice.label }}</span>
+          </div></KeyedBoundary></UiScrollArea>
+    </div>
     <select
       class="fallback"
       aria-label="Choices"
@@ -566,7 +568,10 @@ function uniqueKeys<T>(
   outline: none;
 }
 
+/* Its own box around the nested Scroll Area, which it shrinks into so the choices scroll. */
 .choices {
+  display: flex;
+  flex-direction: column;
   max-block-size: calc(max(2, var(--_rows, 5)) * var(--ui-control-size-md));
 }
 

package/vue/UiScrollArea.d.ts

@@ -12,6 +12,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"vertical" | "horizontal" | null>;
         default: string;
     };
+    padding: {
+        type: PropType<"none" | "xs" | "sm" | "md" | "lg" | null>;
+        default: string;
+    };
     size: {
         type: PropType<"content" | "sm" | "md" | "lg" | null>;
         default: string;
@@ -29,6 +33,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"vertical" | "horizontal" | null>;
         default: string;
     };
+    padding: {
+        type: PropType<"none" | "xs" | "sm" | "md" | "lg" | null>;
+        default: string;
+    };
     size: {
         type: PropType<"content" | "sm" | "md" | "lg" | null>;
         default: string;
@@ -40,6 +48,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{}>, {
     fill: boolean | null;
     size: "sm" | "md" | "lg" | "content" | null;
+    padding: "none" | "xs" | "sm" | "md" | "lg" | null;
     trim: boolean | null;
     orientation: "vertical" | "horizontal" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/vue/UiScrollArea.vue

@@ -26,6 +26,15 @@ const propValidityContract = {
       values: ['vertical', 'horizontal'],
       default: 'vertical',
     },
+    padding: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'padding' },
+      description:
+        'The space inside the scrolling region, on Card\'s scale: xs is 0.5rem, sm 0.75rem, md 1.5rem, and lg 2rem. It scrolls with the content, so the scrollbar and\n      fades stay at the edges.',
+      values: ['none', 'xs', 'sm', 'md', 'lg'],
+      default: 'none',
+    },
     size: {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
@@ -51,6 +60,10 @@ const props = defineProps({
     type: null as unknown as PropType<'vertical' | 'horizontal' | null>,
     default: 'vertical',
   },
+  padding: {
+    type: null as unknown as PropType<'none' | 'xs' | 'sm' | 'md' | 'lg' | null>,
+    default: 'none',
+  },
   size: {
     type: null as unknown as PropType<'content' | 'sm' | 'md' | 'lg' | null>,
     default: 'content',
@@ -60,6 +73,7 @@ const props = defineProps({
 const acceptedProps: Record<string, unknown> = {
   fill: false,
   orientation: 'vertical',
+  padding: 'none',
   size: 'content',
   trim: false,
 }
@@ -78,6 +92,13 @@ const checkedProps = computed(() => ({
     'orientation',
     acceptedProps,
   ) as 'vertical' | 'horizontal',
+  padding: checkedProp<'none' | 'xs' | 'sm' | 'md' | 'lg'>(
+    props['padding'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'padding',
+    acceptedProps,
+  ) as 'none' | 'xs' | 'sm' | 'md' | 'lg',
   size: checkedProp<'content' | 'sm' | 'md' | 'lg'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
@@ -160,6 +181,9 @@ const hostState = computed(() =>
     && `orientation=${encodeURIComponent(checkedProps.value.orientation)}`,
     checkedProps.value.size && 'size',
     checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
+    checkedProps.value.padding && 'padding',
+    checkedProps.value.padding != null
+    && `padding=${encodeURIComponent(checkedProps.value.padding)}`,
   ].filter(Boolean).join(' ')
 )
 
@@ -180,7 +204,7 @@ useComponentHost(() => import('../components/ui-scroll-area/ui-scroll-area.js'),
       ? (incoming[name] ?? incoming[kebab] ?? null)
       : null
   },
-  propNames: ['fill', 'orientation', 'size', 'trim'],
+  propNames: ['fill', 'orientation', 'padding', 'size', 'trim'],
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   refs: { content: contentElement },
@@ -194,6 +218,7 @@ useComponentHost(() => import('../components/ui-scroll-area/ui-scroll-area.js'),
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-fill="reflectedProp('fill', 'fill', checkedProps.fill, undefined, false)"
     :data-orientation="reflectedProp('orientation', 'orientation', checkedProps.orientation, undefined, false)"
+    :data-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, undefined, false)"
     :data-ui-scroll-area-state="hostState || undefined"
@@ -268,6 +293,19 @@ useComponentHost(() => import('../components/ui-scroll-area/ui-scroll-area.js'),
   max-block-size: 30rem;
 }
 
+[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="padding=xs"] {
+  padding: var(--ui-space-2);
+}
+[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="padding=sm"] {
+  padding: var(--ui-space-3);
+}
+[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="padding=md"] {
+  padding: var(--ui-space-5);
+}
+[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="padding=lg"] {
+  padding: var(--ui-space-6);
+}
+
 /* A component that sets its display still honours the hidden attribute on its root. */
 [data-component~="ui-scroll-area"][hidden] {
   display: none;

package/vue/UiSearchShell.vue

@@ -302,7 +302,7 @@ dialog {
   color: var(--ui-text-primary);
 }
 
-dialog::backdrop {
+dialog:modal::backdrop {
   background: var(--ui-overlay-backdrop);
 }
 

package/vue/UiSection.vue

@@ -191,6 +191,9 @@ const hostState = computed(() =>
   --_ui-selection-context-text: var(--ui-text-primary);
   border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
   border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);
+  /* An accent edge keeps the corners on its side straight. */
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
   background: var(--ui-danger-soft);
 }
 

package/vue/UiToast.vue

@@ -16,7 +16,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'duration' },
       description:
-        'Milliseconds before requesting dismissal; 0 keeps the toast until an action dismisses it. The timer pauses on hover or focus.',
+        'Milliseconds the toast is shown before it dismisses itself; 0 keeps it until an action dismisses it. The timer starts when the toast is shown, starts again\n      each time it is shown, and pauses on hover or focus.',
       default: 0,
     },
     tone: {

package/vue/UiTooltip.vue

@@ -84,7 +84,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'trigger' },
       description:
-        'How the trigger opens it. hover also opens on keyboard focus; click toggles it and suits a help button, where hovering a question mark says nothing; focus\n      opens only while the trigger holds focus.',
+        'How the trigger opens it. hover also opens on keyboard focus; click toggles it and suits a help button, where hovering a question mark says nothing; focus\n      opens only on keyboard-visible focus. Action activation dismisses hover/focus hints without removing focus; a fresh hover or keyboard focus can open them\n      again.',
       values: ['hover', 'click', 'focus'],
       default: 'hover',
     },

package/vue/chunks/UiCard.js

@@ -274,6 +274,6 @@ var UiCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-150bfc3d"]]);
+}), [["__scopeId", "data-v-b5f8424c"]]);
 //#endregion
 export { UiCard_default as t };

package/vue/chunks/UiDialog.js

@@ -20,7 +20,6 @@ var _hoisted_2 = {
 	key: 0,
 	class: "title"
 };
-var _hoisted_3 = { class: "body" };
 var htmlNextAuthoredCheck2Reported = /* @__PURE__ */ new Set();
 function htmlNextAuthoredCheck2(accepted, location, message) {
 	if (!accepted && !htmlNextAuthoredCheck2Reported.has(location)) {
@@ -229,7 +228,10 @@ var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 		const hydrationInstance = getCurrentInstance();
 		const emit = __emit;
 		const root = ref(null);
+		const headerElement = useTemplateRef("headerElement");
 		const closeElement = useTemplateRef("closeElement");
+		const bodyElement = useTemplateRef("bodyElement");
+		const footerElement = useTemplateRef("footerElement");
 		const internalOpen = ref(false);
 		const accessibleLabel = ref("Dialog");
 		let guardedPrevious;
@@ -307,7 +309,12 @@ var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				contract: propValidityContract,
 				values: { ...props }
 			}, name),
-			refs: { close: closeElement },
+			refs: {
+				header: headerElement,
+				close: closeElement,
+				body: bodyElement,
+				footer: footerElement
+			},
 			state: {
 				internalOpen,
 				accessibleLabel
@@ -328,24 +335,34 @@ var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				ref_key: "root",
 				ref: root
 			}), [
-				createElementVNode("header", null, [checkedProps.value.label ? (openBlock(), createElementBlock("h2", _hoisted_2, toDisplayString(checkedProps.value.label), 1)) : createCommentVNode("v-if", true), createElementVNode("button", {
+				createElementVNode("header", {
+					ref_key: "headerElement",
+					ref: headerElement
+				}, [checkedProps.value.label ? (openBlock(), createElementBlock("h2", _hoisted_2, toDisplayString(checkedProps.value.label), 1)) : createCommentVNode("v-if", true), createElementVNode("button", {
 					class: "close",
 					type: "button",
 					"aria-label": "Close",
 					ref_key: "closeElement",
 					ref: closeElement
-				}, null, 512)]),
-				createElementVNode("div", _hoisted_3, [createVNode(UiScrollArea_default, { trim: true }, {
+				}, null, 512)], 512),
+				createElementVNode("div", {
+					class: "body",
+					ref_key: "bodyElement",
+					ref: bodyElement
+				}, [createVNode(UiScrollArea_default, { trim: true }, {
 					default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, void 0, true)]),
 					_: 3
-				})]),
-				createElementVNode("footer", null, [renderSlot(_ctx.$slots, "actions", {}, void 0, true)])
+				})], 512),
+				createElementVNode("footer", {
+					ref_key: "footerElement",
+					ref: footerElement
+				}, [renderSlot(_ctx.$slots, "actions", {}, void 0, true)], 512)
 			], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...props }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-6d90ae32"]]);
+}), [["__scopeId", "data-v-1ec9644b"]]);
 //#endregion
 export { UiDialog_default as t };

package/vue/chunks/UiEditorMentionMenu.js

@@ -613,6 +613,6 @@ var UiEditorMentionMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_defaul
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-ba581126"]]);
+}), [["__scopeId", "data-v-f27cd779"]]);
 //#endregion
 export { UiEditorMentionMenu_default as t };

package/vue/chunks/UiEditorSlashMenu.js

@@ -538,6 +538,6 @@ var UiEditorSlashMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_default(
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-cedd7cd4"]]);
+}), [["__scopeId", "data-v-a85c3b18"]]);
 //#endregion
 export { UiEditorSlashMenu_default as t };

package/vue/chunks/UiEditorTableContextMenu.js

@@ -547,6 +547,6 @@ var UiEditorTableContextMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_d
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-d311fe5d"]]);
+}), [["__scopeId", "data-v-f2ebbbc8"]]);
 //#endregion
 export { UiEditorTableContextMenu_default as t };

package/vue/chunks/UiEditorTableToolbar.js

@@ -737,6 +737,6 @@ var UiEditorTableToolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-b9979342"]]);
+}), [["__scopeId", "data-v-8c2d4497"]]);
 //#endregion
 export { UiEditorTableToolbar_default as t };

package/vue/chunks/UiIconButton.js

@@ -11,6 +11,7 @@ var _hoisted_1 = [
 	"aria-busy",
 	"data-anticipatory",
 	"data-disabled",
+	"data-guide",
 	"data-label",
 	"data-loading",
 	"data-match-button",
@@ -36,6 +37,10 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			type: null,
 			default: false
 		},
+		guide: {
+			type: null,
+			default: "dot"
+		},
 		label: {
 			type: null,
 			default: null
@@ -91,6 +96,17 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				description: "Disables the button, so it cannot be pressed or focused, and gives it a flat neutral surface and muted icon.",
 				default: false
 			},
+			guide: {
+				type: {
+					kind: "terminal",
+					name: "keyword"
+				},
+				required: false,
+				target: { attribute: "guide" },
+				description: "The idle marker of an anticipatory button: dot for contextual actions, or a slim neutral rounded bar for a panel-edge control. The icon appears on hover or\n      keyboard focus; touch always shows the icon.",
+				values: ["dot", "bar"],
+				default: "dot"
+			},
 			label: {
 				type: {
 					kind: "terminal",
@@ -185,6 +201,7 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 		const acceptedProps = {
 			anticipatory: false,
 			disabled: false,
+			guide: "dot",
 			label: null,
 			loading: false,
 			matchButton: false,
@@ -203,6 +220,10 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				kind: "terminal",
 				name: "boolean"
 			}, false, "disabled", acceptedProps),
+			guide: checkedProp(props["guide"], {
+				kind: "terminal",
+				name: "keyword"
+			}, false, "guide", acceptedProps),
 			label: checkedProp(props["label"], {
 				kind: "terminal",
 				name: "string"
@@ -284,6 +305,8 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			checkedProps.value.tone && "tone",
 			checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`,
 			checkedProps.value.anticipatory && "anticipatory",
+			checkedProps.value.guide && "guide",
+			checkedProps.value.guide != null && `guide=${encodeURIComponent(checkedProps.value.guide)}`,
 			checkedProps.value.variant && "variant",
 			checkedProps.value.variant != null && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
 			checkedProps.value.loading && "loading",
@@ -310,6 +333,7 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			propNames: [
 				"anticipatory",
 				"disabled",
+				"guide",
 				"label",
 				"loading",
 				"matchButton",
@@ -349,6 +373,7 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				"aria-busy": checkedProps.value.loading || checkedProps.value.pending,
 				"data-anticipatory": reflectedProp("anticipatory", "anticipatory", checkedProps.value.anticipatory, void 0, false),
 				"data-disabled": reflectedProp("disabled", "disabled", checkedProps.value.disabled, void 0, false),
+				"data-guide": reflectedProp("guide", "guide", checkedProps.value.guide, void 0, false),
 				"data-label": reflectedProp("label", "label", checkedProps.value.label, void 0, false),
 				"data-loading": reflectedProp("loading", "loading", checkedProps.value.loading, void 0, false),
 				"data-match-button": reflectedProp("matchButton", "match-button", checkedProps.value.matchButton, void 0, true),
@@ -369,6 +394,6 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-219fa683"]]);
+}), [["__scopeId", "data-v-ea2a5496"]]);
 //#endregion
 export { UiIconButton_default as t };