@threadlabs/looma 0.13.3 → 0.13.4

package/editor/icons.d.ts

@@ -26,6 +26,7 @@ export declare const LOOMA_ICONS: {
     'heading-1': IconNode;
     'heading-2': IconNode;
     'heading-3': IconNode;
+    help: IconNode;
     highlighter: IconNode;
     image: IconNode;
     info: IconNode;

package/editor/index.js

@@ -1,7 +1,7 @@
 import { n as TABLE_CELL_BACKGROUND_PRESETS, t as TABLE_CELL_BACKGROUND_OPTIONS } from "./chunks/table-backgrounds.js";
 import { n as resolveTableCellAt, t as measureTableOverlayGeometry } from "./chunks/ui.js";
 import { A as LOOMA_ACTIVE_BLOCK_CLASS, C as DEFAULT_MENTION_RESULT_LIMIT, D as LOOMA_CALLOUT_TONES, E as normalizeMentionResultLimit, M as LoomaActiveBlock, N as LoomaActiveBlockPluginKey, O as LoomaCallout, S as createLoomaMentionExtension, T as filterLoomaMentionItems, _ as getActiveTableCellBackground, a as handleTableAction, b as LoomaSmartPaste, c as normalizeActiveTableColumnWidths, d as getDefaultEditorExtensions, f as getLoomaTableExtensions, g as getActiveTableCellAlignment, h as LoomaTableHeader, i as getActiveTableUiState, j as LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS, k as LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS, l as shouldShowTextFormattingToolbar, m as LoomaTableCell, n as createLoomaSlashCommandExtension, o as handleTableOverlayAction, p as LoomaTable, r as getDefaultSlashCommands, s as insertTableAtRange, t as LoomaSlashCommand, u as LoomaTableKit, v as setActiveTableCellAlignment, w as MAX_MENTION_RESULT_LIMIT, x as LoomaMentionSuggestionPluginKey, y as setActiveTableCellBackground } from "./chunks/extensions.js";
-import { AlignCenter, AlignLeft, AlignRight, ArrowLeft, Bold, BookUser, Braces, Calculator, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, CircleX, CodeXml, Columns3, CreditCard, Ellipsis, Eraser, FileText, Folder, GripHorizontal, GripVertical, Heading1, Heading2, Heading3, Highlighter, Image, Info, Italic, LayoutDashboard, List, ListOrdered, ListTodo, LoaderCircle, Merge, Minus, NotebookPen, PaintBucket, PanelBottom, PanelLeft, PanelRight, PanelTop, Pilcrow, Plus, Quote, Receipt, Redo2, Rows3, Settings, Split, Strikethrough, Table2, Trash2, TriangleAlert, Truck, Underline, Undo2, Users } from "lucide";
+import { AlignCenter, AlignLeft, AlignRight, ArrowLeft, Bold, BookUser, Braces, Calculator, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, CircleQuestionMark, CircleX, CodeXml, Columns3, CreditCard, Ellipsis, Eraser, FileText, Folder, GripHorizontal, GripVertical, Heading1, Heading2, Heading3, Highlighter, Image, Info, Italic, LayoutDashboard, List, ListOrdered, ListTodo, LoaderCircle, Merge, Minus, NotebookPen, PaintBucket, PanelBottom, PanelLeft, PanelRight, PanelTop, Pilcrow, Plus, Quote, Receipt, Redo2, Rows3, Settings, Split, Strikethrough, Table2, Trash2, TriangleAlert, Truck, Underline, Undo2, Users } from "lucide";
 //#region src/editor/icons.ts
 /** The opinionated Lucide set used by Looma's shipped interaction surfaces. */
 var LOOMA_ICONS = {
@@ -30,6 +30,7 @@ var LOOMA_ICONS = {
 	"heading-1": Heading1,
 	"heading-2": Heading2,
 	"heading-3": Heading3,
+	help: CircleQuestionMark,
 	highlighter: Highlighter,
 	image: Image,
 	info: Info,

package/package.json

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

package/styles/ui-cluster.css

@@ -41,6 +41,15 @@
     :scope[data-ui-cluster-state~="align=stretch"] {
       align-items: stretch;
     }
+    :scope[data-ui-cluster-state~="justify=center"] {
+      justify-content: center;
+    }
+    :scope[data-ui-cluster-state~="justify=end"] {
+      justify-content: flex-end;
+    }
+    :scope[data-ui-cluster-state~="justify=between"] {
+      justify-content: space-between;
+    }
 
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope[hidden] {

package/styles/ui-icon-button.css

@@ -249,6 +249,10 @@
 
     :scope {
       --_icon-button-icon-default: var(--ui-icon-size-md);
+      /* A slotted ui-icon is its own component, out of reach of the svg rule below; these are its
+         defaults, which its own --ui-icon-* hooks still override. */
+      --_ui-default-icon-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
+      --_ui-default-icon-stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
     }
 
     :scope[data-ui-icon-button-state~="size=sm"] {

package/vanilla/UiCluster.d.ts

@@ -8,6 +8,7 @@ export interface UiClusterElement extends HTMLDivElement {
 export interface UiClusterProps {
   align?: "start" | "center" | "end" | "stretch" | null;
   gap?: "xs" | "s" | "m" | "l" | "xl" | null;
+  justify?: "start" | "center" | "end" | "between" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiCluster.js

@@ -7,6 +7,7 @@ export function createUiCluster(options = {}) {
   const projected = [];
   const prop0 = componentProps["align"] === undefined ? undefined : componentProps["align"];
   const prop1 = componentProps["gap"] === undefined ? undefined : componentProps["gap"];
+  const prop2 = componentProps["justify"] === undefined ? undefined : componentProps["justify"];
   const element = document.createElement("div");
   for (const [name, value] of Object.entries(attributes)) {
     if (value === null || value === undefined || value === false) continue;
@@ -24,6 +25,7 @@ export function createUiCluster(options = {}) {
   manageGeneratedProps(element, [
     { name: "align", attribute: "data-align", value: componentProps["align"], type: ["start","center","end","stretch"], required: false },
     { name: "gap", attribute: "data-gap", value: componentProps["gap"], type: ["xs","s","m","l","xl"], required: false },
+    { name: "justify", attribute: "data-justify", value: componentProps["justify"], type: ["start","center","end","between"], required: false },
   ]);
   return element;
 }

package/vue/UiCluster.d.ts

@@ -1,6 +1,7 @@
 type __VLS_Props = {
     align?: 'start' | 'center' | 'end' | 'stretch';
     gap?: 'xs' | 's' | 'm' | 'l' | 'xl';
+    justify?: 'start' | 'center' | 'end' | 'between';
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {

package/vue/UiCluster.vue

@@ -7,6 +7,7 @@ defineOptions({ inheritAttrs: false })
 const props = defineProps<{
   align?: 'start' | 'center' | 'end' | 'stretch'
   gap?: 'xs' | 's' | 'm' | 'l' | 'xl'
+  justify?: 'start' | 'center' | 'end' | 'between'
 }>()
 
 /** The values the styles' :host-state() rules test. */
@@ -14,6 +15,7 @@ const hostState = computed(() =>
   [
     props.gap && `gap gap=${props.gap}`,
     props.align && `align align=${props.align}`,
+    props.justify && `justify justify=${props.justify}`,
   ].filter(Boolean).join(' ')
 )
 </script>
@@ -66,6 +68,15 @@ const hostState = computed(() =>
 [data-component~="ui-cluster"][data-ui-cluster-state~="align=stretch"] {
   align-items: stretch;
 }
+[data-component~="ui-cluster"][data-ui-cluster-state~="justify=center"] {
+  justify-content: center;
+}
+[data-component~="ui-cluster"][data-ui-cluster-state~="justify=end"] {
+  justify-content: flex-end;
+}
+[data-component~="ui-cluster"][data-ui-cluster-state~="justify=between"] {
+  justify-content: space-between;
+}
 
 /* A component that sets its display still honours the hidden attribute on its root. */
 [data-component~="ui-cluster"][hidden] {

package/vue/UiIconButton.vue

@@ -309,6 +309,10 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
 
 [data-component~="ui-icon-button"] {
   --_icon-button-icon-default: var(--ui-icon-size-md);
+  /* A slotted ui-icon is its own component, out of reach of the svg rule below; these are its
+     defaults, which its own --ui-icon-* hooks still override. */
+  --_ui-default-icon-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
+  --_ui-default-icon-stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
 }
 
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"] {

package/vue/chunks/UiCluster.js

@@ -9,16 +9,21 @@ var UiCluster_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 	__name: "UiCluster",
 	props: {
 		align: {},
-		gap: {}
+		gap: {},
+		justify: {}
 	},
 	setup(__props) {
 		const props = __props;
 		/** The values the styles' :host-state() rules test. */
-		const hostState = computed(() => [props.gap && `gap gap=${props.gap}`, props.align && `align align=${props.align}`].filter(Boolean).join(" "));
+		const hostState = computed(() => [
+			props.gap && `gap gap=${props.gap}`,
+			props.align && `align align=${props.align}`,
+			props.justify && `justify justify=${props.justify}`
+		].filter(Boolean).join(" "));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", mergeProps({ "data-component": "ui-cluster" }, _ctx.$attrs, { "data-ui-cluster-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-d749e74b"]]);
+}), [["__scopeId", "data-v-81b18ffc"]]);
 //#endregion
 export { UiCluster_default as t };

package/vue/chunks/UiIconButton.js

@@ -59,6 +59,6 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}), [renderSlot(_ctx.$slots, "default")], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-a20a82b7"]]);
+}), [["__scopeId", "data-v-006fa1b2"]]);
 //#endregion
 export { UiIconButton_default as t };

package/vue/components.css

@@ -1094,7 +1094,7 @@ input[data-v-e122df08]:focus-visible {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-cluster"][data-v-d749e74b] {
+[data-component~="ui-cluster"][data-v-81b18ffc] {
   --_layout-gap: var(--ui-space-3);
   display: flex;
   flex-wrap: wrap;
@@ -1104,33 +1104,42 @@ input[data-v-e122df08]:focus-visible {
   max-inline-size: 100%;
   margin: 0;
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xs"][data-v-d749e74b] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xs"][data-v-81b18ffc] {
   --_layout-gap: var(--ui-space-2);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=s"][data-v-d749e74b] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=s"][data-v-81b18ffc] {
   --_layout-gap: var(--ui-space-3);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=m"][data-v-d749e74b] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=m"][data-v-81b18ffc] {
   --_layout-gap: var(--ui-space-4);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=l"][data-v-d749e74b] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=l"][data-v-81b18ffc] {
   --_layout-gap: var(--ui-space-5);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xl"][data-v-d749e74b] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="gap=xl"][data-v-81b18ffc] {
   --_layout-gap: var(--ui-space-6);
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="align=start"][data-v-d749e74b] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="align=start"][data-v-81b18ffc] {
   align-items: flex-start;
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="align=end"][data-v-d749e74b] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="align=end"][data-v-81b18ffc] {
   align-items: flex-end;
 }
-[data-component~="ui-cluster"][data-ui-cluster-state~="align=stretch"][data-v-d749e74b] {
+[data-component~="ui-cluster"][data-ui-cluster-state~="align=stretch"][data-v-81b18ffc] {
   align-items: stretch;
 }
+[data-component~="ui-cluster"][data-ui-cluster-state~="justify=center"][data-v-81b18ffc] {
+  justify-content: center;
+}
+[data-component~="ui-cluster"][data-ui-cluster-state~="justify=end"][data-v-81b18ffc] {
+  justify-content: flex-end;
+}
+[data-component~="ui-cluster"][data-ui-cluster-state~="justify=between"][data-v-81b18ffc] {
+  justify-content: space-between;
+}
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-cluster"][hidden][data-v-d749e74b] {
+[data-component~="ui-cluster"][hidden][data-v-81b18ffc] {
   display: none;
 }
 
@@ -3484,7 +3493,7 @@ svg[data-v-03a5b772-s] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-icon-button"][data-v-a20a82b7] {
+[data-component~="ui-icon-button"][data-v-006fa1b2] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-icon-button-icon-size: var(--ui-icon-button-icon-size);
   --_ui-icon-button-icon-stroke-width: var(--ui-icon-button-icon-stroke-width);
@@ -3492,10 +3501,10 @@ svg[data-v-03a5b772-s] {
   display: inline-flex;
   color: var(--ui-text-secondary);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-a20a82b7] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-006fa1b2] {
   position: relative;
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-a20a82b7]::before {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-006fa1b2]::before {
   content: "";
   position: absolute;
   inset: 50% auto auto 50%;
@@ -3514,17 +3523,17 @@ svg[data-v-03a5b772-s] {
  * surface and icon. The root is the native button, so hiding it outright would hide the dot
  * too, and slotted icons sit outside this scope; `color: transparent` hides currentColor icons. */
 @media (hover: hover) and (pointer: fine) {
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-a20a82b7]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-ui-proximity="near"], :hover, :focus-visible) {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-006fa1b2]:not([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-ui-proximity="near"], :hover, :focus-visible) {
     border-color: transparent;
     background: transparent;
     box-shadow: none;
     color: transparent;
 }
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-a20a82b7]:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-006fa1b2]:is([data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
   opacity: 0;
 }
-[data-component~="ui-icon-button"][data-v-a20a82b7] {
+[data-component~="ui-icon-button"][data-v-006fa1b2] {
   /* The size prop resolves here; --ui-icon-button-size overrides it on an element. */
   --_size: 2rem;
   appearance: none;
@@ -3550,7 +3559,7 @@ svg[data-v-03a5b772-s] {
     transform var(--ui-motion-fast) var(--ui-motion-ease);
 }
 @media (hover: none), (pointer: coarse) {
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-a20a82b7]::before {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="anticipatory"][data-v-006fa1b2]::before {
     opacity: 0;
 }
 }
@@ -3558,10 +3567,10 @@ svg[data-v-03a5b772-s] {
 /* A touch target without a bigger button: an invisible hit area, at least the control
    minimum, centred on the button (::before is the anticipatory guide). */
 @media (pointer: coarse) {
-[data-component~="ui-icon-button"][data-v-a20a82b7] {
+[data-component~="ui-icon-button"][data-v-006fa1b2] {
     position: relative;
 }
-[data-component~="ui-icon-button"][data-v-a20a82b7]::after {
+[data-component~="ui-icon-button"][data-v-006fa1b2]::after {
     content: "";
     position: absolute;
     inset: 50% auto auto 50%;
@@ -3570,10 +3579,10 @@ svg[data-v-03a5b772-s] {
     transform: translate(-50%, -50%);
 }
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-a20a82b7] {
+html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-006fa1b2] {
   position: relative;
 }
-html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-a20a82b7]::after {
+html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-006fa1b2]::after {
   content: "";
   position: absolute;
   inset: 50% auto auto 50%;
@@ -3581,29 +3590,29 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-a
   block-size: max(100%, var(--ui-control-min-block-size));
   transform: translate(-50%, -50%);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"][data-v-a20a82b7] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"][data-v-006fa1b2] {
   --_size: 1.75rem;
   inline-size: var(--ui-icon-button-size, var(--_size));
   block-size: var(--ui-icon-button-size, var(--_size));
   min-inline-size: var(--ui-icon-button-size, var(--_size));
   min-block-size: var(--ui-icon-button-size, var(--_size));
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"][data-v-a20a82b7] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"][data-v-006fa1b2] {
   --_size: 2.5rem;
   inline-size: var(--ui-icon-button-size, var(--_size));
   block-size: var(--ui-icon-button-size, var(--_size));
   min-inline-size: var(--ui-icon-button-size, var(--_size));
   min-block-size: var(--ui-icon-button-size, var(--_size));
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="round"][data-v-a20a82b7] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="round"][data-v-006fa1b2] {
   border-radius: var(--ui-radius-round);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-a20a82b7] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-006fa1b2] {
   border-color: var(--ui-icon-button-border, var(--ui-border-default));
   background: var(--ui-icon-button-outline-surface, var(--ui-surface-default));
   color: var(--ui-icon-button-outline-text, var(--ui-text-primary));
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-a20a82b7] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-006fa1b2] {
   background: var(--ui-icon-button-solid-surface, var(--ui-accent-solid));
   color: var(--ui-icon-button-solid-text, var(--ui-text-on-accent));
   box-shadow: var(
@@ -3611,43 +3620,47 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"][data-v-a
     0 1px 2px color-mix(in srgb, var(--ui-accent-solid) 18%, transparent)
   );
 }
-[data-component~="ui-icon-button"][data-v-a20a82b7]:hover:enabled {
+[data-component~="ui-icon-button"][data-v-006fa1b2]:hover:enabled {
   /* Derived from the text colour so the ghost hover shows on any background. */
   background: var(--ui-icon-button-hover-surface, color-mix(in srgb, currentColor 8%, transparent));
   color: var(--ui-icon-button-hover-text, var(--ui-text-primary));
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-a20a82b7]:hover:enabled {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=outline"][data-v-006fa1b2]:hover:enabled {
   border-color: var(--ui-icon-button-hover-border, var(--ui-border-strong));
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-a20a82b7]:hover:enabled {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="variant=solid"][data-v-006fa1b2]:hover:enabled {
   background: var(--ui-icon-button-solid-hover-surface, var(--ui-accent-hover));
 }
-[data-component~="ui-icon-button"][data-v-a20a82b7]:active:enabled {
+[data-component~="ui-icon-button"][data-v-006fa1b2]:active:enabled {
   transform: scale(var(--ui-icon-button-active-scale, 0.96));
 }
-[data-component~="ui-icon-button"][data-v-a20a82b7]:focus-visible {
+[data-component~="ui-icon-button"][data-v-006fa1b2]:focus-visible {
   outline: none;
   box-shadow: var(--ui-focus-halo);
 }
 
 /* Disabled colours fall back to each variant's own; ghost takes only the icon colour. */
 /* Disabled washes the button out the way Button does: the same shape, one filter. */
-[data-component~="ui-icon-button"][data-v-a20a82b7]:disabled {
+[data-component~="ui-icon-button"][data-v-006fa1b2]:disabled {
   filter: var(--ui-icon-button-disabled-filter, var(--ui-disabled-filter));
   opacity: var(--ui-icon-button-disabled-opacity, 1);
   cursor: not-allowed;
   box-shadow: none;
 }
-[data-component~="ui-icon-button"][data-v-a20a82b7] {
+[data-component~="ui-icon-button"][data-v-006fa1b2] {
   --_icon-button-icon-default: var(--ui-icon-size-md);
+  /* A slotted ui-icon is its own component, out of reach of the svg rule below; these are its
+     defaults, which its own --ui-icon-* hooks still override. */
+  --_ui-default-icon-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
+  --_ui-default-icon-stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"][data-v-a20a82b7] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=sm"][data-v-006fa1b2] {
   --_icon-button-icon-default: var(--ui-icon-size-sm);
 }
-[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"][data-v-a20a82b7] {
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="size=lg"][data-v-006fa1b2] {
   --_icon-button-icon-default: var(--ui-icon-size-lg);
 }
-svg[data-v-a20a82b7-s] {
+svg[data-v-006fa1b2-s] {
   inline-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
   block-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
   flex-shrink: 0;
@@ -3655,7 +3668,7 @@ svg[data-v-a20a82b7-s] {
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-icon-button"][hidden][data-v-a20a82b7] {
+[data-component~="ui-icon-button"][hidden][data-v-006fa1b2] {
   display: none;
 }