@threadlabs/looma 0.13.3 → 0.13.5

package/vue/chunks/UiCombobox.js

@@ -123,12 +123,14 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			type: Boolean,
 			default: false
 		},
+		selectedValues: {},
 		size: { default: "md" },
 		tokenSeparators: {},
 		value: {}
 	},
 	emits: [
 		"update:query",
+		"update:selectedValues",
 		"update:value",
 		"query-change",
 		"value-change",
@@ -138,7 +140,8 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 		"options-change",
 		"add-item",
 		"remove-item",
-		"create-item"
+		"create-item",
+		"selected-values-change"
 	],
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
@@ -247,6 +250,7 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			"trigger"
 		].includes(key));
 		const isCreateItemDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && typeof detail["query"] === "string" && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => ["query", "trigger"].includes(key));
+		const isSelectedValuesChangeDetail = (detail) => detail !== null && typeof detail === "object" && !Array.isArray(detail) && Array.isArray(detail["selectedValues"]) && detail["selectedValues"].every((item) => typeof item === "string") && (detail["trigger"] === "keyboard" || detail["trigger"] === "pointer" || detail["trigger"] === "programmatic") && Object.keys(detail).every((key) => ["selectedValues", "trigger"].includes(key));
 		const dispatch = createDispatch(root, emit, {
 			checks: {
 				"query-change": isQueryChangeDetail,
@@ -257,9 +261,14 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				"options-change": isOptionsChangeDetail,
 				"add-item": isAddItemDetail,
 				"remove-item": isAddItemDetail,
-				"create-item": isCreateItemDetail
+				"create-item": isCreateItemDetail,
+				"selected-values-change": isSelectedValuesChangeDetail
 			},
-			modeled: ["query", "value"]
+			modeled: [
+				"query",
+				"selectedValues",
+				"value"
+			]
 		});
 		const { host, ready } = useComponentHost(controllerModule.default, {
 			root,
@@ -479,6 +488,6 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-7616cc1c"]]);
+}), [["__scopeId", "data-v-1482f333"]]);
 //#endregion
 export { UiCombobox_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;
 }
 
@@ -1318,7 +1327,7 @@ input[data-v-e122df08]:focus-visible {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-combobox"][data-v-7616cc1c] {
+[data-component~="ui-combobox"][data-v-1482f333] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-combobox-label-text: var(--ui-combobox-label-text);
   --_ui-combobox-label-font-size: var(--ui-combobox-label-font-size);
@@ -1337,20 +1346,20 @@ input[data-v-e122df08]:focus-visible {
   color: var(--ui-text-primary);
   font: inherit;
 }
-label[data-v-7616cc1c] {
+label[data-v-1482f333] {
   color: var(--_ui-combobox-label-text, var(--ui-text-primary));
   font-size: var(--_ui-combobox-label-font-size, var(--ui-font-size-sm));
   font-weight: 500;
 }
 /* The field and anything that annotates it sit on one row; the help button is beside the box,
    not inside it, because a control's box holds its value. */
-.control[data-v-7616cc1c] {
+.control[data-v-1482f333] {
   display: flex;
   align-items: center;
   gap: var(--ui-space-2);
   min-inline-size: 0;
 }
-.field[data-v-7616cc1c] {
+.field[data-v-1482f333] {
   flex: 1 1 auto;
   display: flex;
   min-inline-size: 0;
@@ -1362,14 +1371,14 @@ label[data-v-7616cc1c] {
     border-color var(--ui-motion-fast) var(--ui-motion-ease),
     box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.field[data-v-7616cc1c]:focus-within {
+.field[data-v-1482f333]:focus-within {
   border-color: var(--ui-control-focus, var(--ui-accent-solid));
   box-shadow:
     var(--ui-control-inset),
     var(--ui-control-focus-halo-shadow);
 }
 /* A ghost icon button: the affordance is the mark, not a box around it. */
-.help[data-v-7616cc1c] {
+.help[data-v-1482f333] {
   flex: none;
   display: inline-flex;
   align-items: center;
@@ -1386,28 +1395,28 @@ label[data-v-7616cc1c] {
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
     color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.help[data-v-7616cc1c]:hover:enabled,
-.help[aria-expanded="true"][data-v-7616cc1c] {
+.help[data-v-1482f333]:hover:enabled,
+.help[aria-expanded="true"][data-v-1482f333] {
   background: color-mix(in srgb, currentColor 8%, transparent);
   color: var(--ui-text-primary);
 }
-.help[data-v-7616cc1c]:focus-visible {
+.help[data-v-1482f333]:focus-visible {
   outline: none;
   box-shadow: var(--ui-focus-halo);
 }
-.help[data-v-7616cc1c]:disabled {
+.help[data-v-1482f333]:disabled {
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-.help-icon[data-v-7616cc1c] {
+.help-icon[data-v-1482f333] {
   inline-size: var(--ui-icon-size-sm);
   block-size: var(--ui-icon-size-sm);
 }
-input[data-v-7616cc1c]::selection {
+input[data-v-1482f333]::selection {
   background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
   color: inherit;
 }
-input[data-v-7616cc1c] {
+input[data-v-1482f333] {
   appearance: none;
   width: 100%;
   min-inline-size: 0;
@@ -1423,11 +1432,11 @@ input[data-v-7616cc1c] {
   margin: 0;
   outline: none;
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-7616cc1c] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-1482f333] {
   min-block-size: calc(var(--ui-control-size-sm) - 2px);
   padding: var(--ui-space-1) var(--ui-space-2);
 }
-button[data-v-7616cc1c] {
+button[data-v-1482f333] {
   appearance: none;
   display: inline-grid;
   place-items: center;
@@ -1442,31 +1451,31 @@ button[data-v-7616cc1c] {
   padding: 0 var(--ui-space-1);
   cursor: pointer;
 }
-.affordance-icon[data-v-7616cc1c] {
+.affordance-icon[data-v-1482f333] {
   display: block;
   inline-size: var(--ui-icon-size-sm);
   block-size: var(--ui-icon-size-sm);
 }
-button[data-v-7616cc1c]:hover:enabled {
+button[data-v-1482f333]:hover:enabled {
   background: var(--ui-surface-muted);
   color: var(--ui-text-primary);
 }
-button[data-v-7616cc1c]:focus-visible {
+button[data-v-1482f333]:focus-visible {
   outline: none;
   background: var(--ui-surface-muted);
   box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
 }
-input[data-v-7616cc1c]:disabled, button[data-v-7616cc1c]:disabled {
+input[data-v-1482f333]:disabled, button[data-v-1482f333]:disabled {
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-.field[data-v-7616cc1c]:has(input:disabled) {
+.field[data-v-1482f333]:has(input:disabled) {
   background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="validationStatus=error"] .field[data-v-7616cc1c] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="validationStatus=error"] .field[data-v-1482f333] {
   border-color: var(--ui-danger-solid, var(--ui-accent-active));
 }
-.popup[data-v-7616cc1c] {
+.popup[data-v-1482f333] {
   box-sizing: border-box;
   min-inline-size: 12rem;
   max-inline-size: calc(100vw - 1rem);
@@ -1480,40 +1489,40 @@ input[data-v-7616cc1c]:disabled, button[data-v-7616cc1c]:disabled {
   color: var(--ui-text-primary);
   box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
 }
-[hidden][data-v-7616cc1c] {
+[hidden][data-v-1482f333] {
   display: none;
 }
-.option[data-v-7616cc1c] {
+.option[data-v-1482f333] {
   padding: var(--ui-space-2) var(--ui-space-3);
   border-radius: var(--ui-radius-sm);
   cursor: pointer;
   overflow-wrap: anywhere;
 }
-.option[data-v-7616cc1c]:hover, .option.active[data-v-7616cc1c] {
+.option[data-v-1482f333]:hover, .option.active[data-v-1482f333] {
   background: var(--ui-surface-muted);
   outline: 1px solid var(--ui-focus-ring);
   outline-offset: -1px;
 }
-.option[aria-disabled="true"][data-v-7616cc1c] {
+.option[aria-disabled="true"][data-v-1482f333] {
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-.primary[data-v-7616cc1c] {
+.primary[data-v-1482f333] {
   display: block;
   color: var(--_ui-combobox-option-text, var(--ui-text-primary));
   font-weight: 500;
 }
-.message[data-v-7616cc1c], .group[data-v-7616cc1c] {
+.message[data-v-1482f333], .group[data-v-1482f333] {
   color: var(--_ui-combobox-message-text, var(--ui-text-secondary));
   font-weight: 400;
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height-md);
   overflow-wrap: anywhere;
 }
-.group[data-v-7616cc1c], .popup .message[data-v-7616cc1c] {
+.group[data-v-1482f333], .popup .message[data-v-1482f333] {
   padding: var(--ui-space-2) var(--ui-space-3);
 }
-.sr-only[data-v-7616cc1c] {
+.sr-only[data-v-1482f333] {
   position: absolute;
   inline-size: 1px;
   block-size: 1px;
@@ -1522,16 +1531,16 @@ input[data-v-7616cc1c]:disabled, button[data-v-7616cc1c]:disabled {
   white-space: nowrap;
 }
 @media (pointer: coarse) {
-button[data-v-7616cc1c] {
+button[data-v-1482f333] {
     min-inline-size: 2.75rem;
     min-block-size: 2.75rem;
 }
 }
 @media (forced-colors: active) {
-.field[data-v-7616cc1c], .popup[data-v-7616cc1c] {
+.field[data-v-1482f333], .popup[data-v-1482f333] {
     border-color: CanvasText;
 }
-.option.active[data-v-7616cc1c] {
+.option.active[data-v-1482f333] {
     outline-color: Highlight;
 }
 }
@@ -1539,12 +1548,12 @@ button[data-v-7616cc1c] {
 /* Multiple mode: every option carries a checkbox, so a list that takes several answers says so
    before anything is picked. aria-selected is the state; this draws it.
    Longhands, not shorthands: lowering drops a shorthand that omits a component. */
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-7616cc1c] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-1482f333] {
   display: flex;
   gap: var(--ui-space-2);
   align-items: center;
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-7616cc1c]::before {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-1482f333]::before {
   content: "";
   flex: none;
   inline-size: 1.125rem;
@@ -1559,7 +1568,7 @@ button[data-v-7616cc1c] {
   background-size: 0.7rem;
 }
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"]
-  .option[aria-selected="true"][data-v-7616cc1c]::before {
+  .option[aria-selected="true"][data-v-1482f333]::before {
   border-color: var(--ui-accent-solid);
   background-color: var(--ui-accent-solid);
   background-image: var(
@@ -1569,20 +1578,20 @@ button[data-v-7616cc1c] {
 }
 
 /* Multiple mode: chips wrap before the cursor on one flexible field line. */
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field[data-v-7616cc1c] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field[data-v-1482f333] {
   flex-wrap: wrap;
   align-items: center;
   gap: var(--ui-space-1);
   min-block-size: var(--_ui-combobox-item-min-block-size, 2.5rem);
   padding: var(--ui-space-1);
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] input[data-v-7616cc1c] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] input[data-v-1482f333] {
   flex: 1 0 var(--_ui-combobox-item-input-min-inline-size, 5rem);
   width: auto;
   min-block-size: 1.75rem;
   padding: var(--ui-space-0-5) var(--ui-space-1);
 }
-.item[data-v-7616cc1c] {
+.item[data-v-1482f333] {
   appearance: none;
   display: inline-flex;
   min-inline-size: 0;
@@ -1596,16 +1605,16 @@ button[data-v-7616cc1c] {
   font: inherit;
   cursor: default;
 }
-.item[data-v-7616cc1c]:focus-visible {
+.item[data-v-1482f333]:focus-visible {
   outline: 2px solid var(--ui-focus-ring);
   outline-offset: 1px;
 }
-.item[data-v-7616cc1c]:disabled {
+.item[data-v-1482f333]:disabled {
   opacity: 0.6;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-combobox"][hidden][data-v-7616cc1c] {
+[data-component~="ui-combobox"][hidden][data-v-1482f333] {
   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;
 }