@threadlabs/looma 0.23.14 → 0.23.16

package/package.json

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

package/styles/ui-icon-button.css

@@ -215,6 +215,29 @@
       min-block-size: var(--ui-icon-button-size, var(--_size));
     }
 
+    /* A text button's companion uses control geometry; compact icon buttons keep their own density. */
+    :scope[data-ui-icon-button-state~="matchButton"] {
+      --_size: var(--ui-control-size-md);
+      block-size: auto;
+      align-self: stretch;
+    }
+
+    :scope[data-ui-icon-button-state~="matchButton"][data-ui-icon-button-state~="size=sm"] {
+      --_size: var(--ui-control-size-sm);
+    }
+
+    :scope[data-ui-icon-button-state~="matchButton"][data-ui-icon-button-state~="size=lg"] {
+      --_size: var(--ui-control-size-lg);
+    }
+
+    @media (pointer: coarse) {
+      :scope[data-ui-icon-button-state~="matchButton"] {
+        inline-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
+        min-inline-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
+        min-block-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
+      }
+    }
+
     :scope[data-ui-icon-button-state~="round"] {
       border-radius: var(--ui-radius-round);
     }
@@ -340,6 +363,11 @@
     @media (pointer: coarse) {
     }
 
+    /* A text button's companion uses control geometry; compact icon buttons keep their own density. */
+
+    @media (pointer: coarse) {
+    }
+
     @media (prefers-reduced-motion: reduce) {
     }
 

package/styles/ui-input.css

@@ -95,9 +95,14 @@
     /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
        body-size text: below 16px, iOS zooms the page into the focused field. */
     @media (pointer: coarse) {
+      :scope,
+      :scope[data-ui-input-state~="size=sm"],
+      :scope[data-ui-input-state~="size=lg"] {
+        font-size: var(--ui-font-size-md);
+      }
+
       :scope[data-ui-input-state~="size=sm"] {
         min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-min-block-size, var(--ui-control-min-block-size)));
-        font-size: inherit;
       }
     }
 

package/styles/ui-tree-item.css

@@ -337,7 +337,7 @@
     }
 
     /* Without hover there is no reveal, so the controls keep their own column. */
-    @media (hover: none) {
+    @media (hover: none), (pointer: coarse) {
       .row {
         grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
       }
@@ -351,6 +351,37 @@
         opacity: 1;
         pointer-events: auto;
       }
+
+      .row:is(:hover, :focus-within) > .label,
+      .row:is(:hover, :focus-within) > .label:dir(rtl),
+      :scope[data-move-source] > .row > .label,
+      :scope[data-move-source] > .row > .label:dir(rtl) {
+        mask-image: none;
+      }
+
+      .row[data-ui-marquee] > .label {
+        mask-image: linear-gradient(
+          to right,
+          transparent var(--_marquee-icon-width, 0px),
+          #000 calc(var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2)))
+        );
+      }
+
+      .row[data-ui-marquee] > .label:dir(rtl) {
+        mask-image: linear-gradient(
+          to left,
+          transparent var(--_marquee-icon-width, 0px),
+          #000 calc(var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2)))
+        );
+      }
+
+      :scope[data-selection-mode="multiple"] > .row {
+        grid-template-columns: var(--_tree-disclosure-size) 1.25rem auto minmax(0, 1fr) auto;
+      }
+
+      :scope[data-selection-mode="multiple"] > .row > .actions {
+        grid-column: 5;
+      }
     }
 
     /* The handle sits beside what it drags. A leaf row has no disclosure, so the handle takes that
@@ -492,6 +523,24 @@
       grid-column: 5;
     }
 
+    @media (hover: none), (pointer: coarse) {
+      html[data-ui-input-modality="touch"] :scope .row {
+        grid-template-columns: 44px var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
+      }
+
+      html[data-ui-input-modality="touch"] :scope .actions {
+        grid-column: 5;
+      }
+
+      html[data-ui-input-modality="touch"] :scope[data-selection-mode="multiple"] > .row {
+        grid-template-columns: 44px var(--_tree-disclosure-size) 44px auto minmax(0, 1fr) auto;
+      }
+
+      html[data-ui-input-modality="touch"] :scope[data-selection-mode="multiple"] > .row > .actions {
+        grid-column: 6;
+      }
+    }
+
     @media (prefers-reduced-motion: reduce) {
       .row,
       .disclosure-icon,
@@ -570,7 +619,7 @@
     }
 
     /* Without hover there is no reveal, so the controls keep their own column. */
-    @media (hover: none) {
+    @media (hover: none), (pointer: coarse) {
     }
 
     /* The handle sits beside what it drags. A leaf row has no disclosure, so the handle takes that
@@ -578,6 +627,9 @@
        outside the row. It is bare until pointed at: a resting surface behind it read as a faint
        patch rather than as a control. */
 
+    @media (hover: none), (pointer: coarse) {
+    }
+
     @media (prefers-reduced-motion: reduce) {
     }
 

package/vanilla/UiIconButton.d.ts

@@ -10,6 +10,7 @@ export interface UiIconButtonProps {
   disabled?: boolean | null;
   label?: string | null;
   loading?: boolean | null;
+  matchButton?: boolean | null;
   pending?: boolean | null;
   round?: boolean | null;
   size?: "sm" | "md" | "lg" | null;

package/vanilla/UiIconButton.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-icon-button/ui-icon-button.js";
 import "../styles/ui-icon-button.css";
 
-const definition = {...{"contract":{"tag":"ui-icon-button","props":{"anticipatory":{"type":"boolean","required":false,"target":{"attribute":"anticipatory"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"label":{"type":"string","required":false,"target":{"attribute":"aria-label"}},"loading":{"type":"boolean","required":false,"target":{"attribute":"loading"},"default":false},"pending":{"type":"boolean","required":false,"target":{"attribute":"pending"},"default":false},"round":{"type":"boolean","required":false,"target":{"attribute":"round"},"default":false},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["sm","md","lg"],"required":false,"target":{"attribute":"size"},"default":"md"},"variant":{"type":{"kind":"terminal","name":"keyword"},"values":["ghost","outline","solid"],"required":false,"target":{"attribute":"variant"},"default":"ghost"}}},"template":{"kind":"element","name":"button","attributes":[{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}},{"kind":"attribute","name":"aria-disabled","expression":"{ true: 'true', false: null }[format('%s', loading or pending)]","expressionPlan":{"source":"{ true: 'true', false: null }[format('%s', loading or pending)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"true"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"or","left":{"kind":"id","name":"loading"},"right":{"kind":"id","name":"pending"}}]}},"dependencies":["loading","pending"]}},{"kind":"attribute","name":"aria-busy","expression":"loading or pending","expressionPlan":{"source":"loading or pending","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"loading"},"right":{"kind":"id","name":"pending"}},"dependencies":["loading","pending"]}}],"children":[{"kind":"element","name":"ui-spinner","attributes":[{"kind":"literal","name":"size","value":"sm"}],"children":[],"flow":{"kind":"if","test":"loading or pending","testPlan":{"source":"loading or pending","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"loading"},"right":{"kind":"id","name":"pending"}},"dependencies":["loading","pending"]}}},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"slot"}]}]},"declarations":[],"root":{"kind":"native","element":"button","choices":["button"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-icon-button","props":{"anticipatory":{"type":"boolean","required":false,"target":{"attribute":"anticipatory"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"label":{"type":"string","required":false,"target":{"attribute":"aria-label"}},"loading":{"type":"boolean","required":false,"target":{"attribute":"loading"},"default":false},"matchButton":{"type":"boolean","required":false,"target":{"attribute":"data-match-button"},"default":false},"pending":{"type":"boolean","required":false,"target":{"attribute":"pending"},"default":false},"round":{"type":"boolean","required":false,"target":{"attribute":"round"},"default":false},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["sm","md","lg"],"required":false,"target":{"attribute":"size"},"default":"md"},"variant":{"type":{"kind":"terminal","name":"keyword"},"values":["ghost","outline","solid"],"required":false,"target":{"attribute":"variant"},"default":"ghost"}}},"template":{"kind":"element","name":"button","attributes":[{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"literal","name":"type","value":"button"},{"kind":"attribute","name":"aria-label","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}},{"kind":"attribute","name":"data-match-button","expression":"matchButton","expressionPlan":{"source":"matchButton","ast":{"kind":"id","name":"matchButton"},"dependencies":["matchButton"]}},{"kind":"attribute","name":"aria-disabled","expression":"{ true: 'true', false: null }[format('%s', loading or pending)]","expressionPlan":{"source":"{ true: 'true', false: null }[format('%s', loading or pending)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"true"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"or","left":{"kind":"id","name":"loading"},"right":{"kind":"id","name":"pending"}}]}},"dependencies":["loading","pending"]}},{"kind":"attribute","name":"aria-busy","expression":"loading or pending","expressionPlan":{"source":"loading or pending","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"loading"},"right":{"kind":"id","name":"pending"}},"dependencies":["loading","pending"]}}],"children":[{"kind":"element","name":"ui-spinner","attributes":[{"kind":"literal","name":"size","value":"sm"}],"children":[],"flow":{"kind":"if","test":"loading or pending","testPlan":{"source":"loading or pending","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"loading"},"right":{"kind":"id","name":"pending"}},"dependencies":["loading","pending"]}}},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"content"}],"children":[{"kind":"slot"}]}]},"declarations":[],"root":{"kind":"native","element":"button","choices":["button"]}},source:{file:import.meta.url},css:""};
 
 export function createUiIconButton(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -20,6 +20,9 @@ export function createUiIconButton(options = {}) {
   const value1 = componentProps["label"] === undefined ? null : componentProps["label"];
   if (value1 === null || value1 === undefined) element.removeAttribute("aria-label");
   else element.setAttribute("aria-label", String(value1));
+  const value2 = componentProps["matchButton"] === undefined ? false : componentProps["matchButton"];
+  if (value2 === true) element.setAttribute("data-match-button", "");
+  else element.removeAttribute("data-match-button");
   element.setAttribute("data-component", "ui-icon-button");
   const element0 = document.createElement("ui-spinner");
   element0.setAttribute("size", "sm");

package/vue/UiIconButton.d.ts

@@ -20,6 +20,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<boolean | null>;
         default: boolean;
     };
+    matchButton: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     pending: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -53,6 +57,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<boolean | null>;
         default: boolean;
     };
+    matchButton: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     pending: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -78,6 +86,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     loading: boolean | null;
     pending: boolean | null;
     anticipatory: boolean | null;
+    matchButton: boolean | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiIconButton.vue

@@ -40,6 +40,14 @@ const propValidityContract = {
         'Keeps the button focusable and named while work is in progress. It shows a spinner, states aria-disabled and aria-busy, and prevents activation until\n      cleared.',
       default: false,
     },
+    matchButton: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'data-match-button' },
+      description:
+        'Matches a boxed Button of the same size when the two share a flex row. Uses the control-size theme tokens and stretches to the row\'s height, including\n      touch-sized controls. Leave it off for compact toolbar and inline icon buttons.',
+      default: false,
+    },
     pending: {
       type: { kind: 'terminal', name: 'boolean' },
       required: false,
@@ -79,6 +87,7 @@ const props = defineProps({
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
   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 },
   pending: { 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' },
@@ -92,6 +101,7 @@ const acceptedProps: Record<string, unknown> = {
   disabled: false,
   label: null,
   loading: false,
+  matchButton: false,
   pending: false,
   round: false,
   size: 'md',
@@ -126,6 +136,13 @@ const checkedProps = computed(() => ({
     'loading',
     acceptedProps,
   ) as boolean,
+  matchButton: checkedProp<boolean>(
+    props['matchButton'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'matchButton',
+    acceptedProps,
+  ) as boolean,
   pending: checkedProp<boolean>(
     props['pending'],
     { kind: 'terminal', name: 'boolean' },
@@ -222,6 +239,7 @@ const hostState = computed(() =>
     checkedProps.value.pending && 'pending',
     checkedProps.value.size && 'size',
     checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
+    checkedProps.value.matchButton && 'matchButton',
     checkedProps.value.round && 'round',
   ].filter(Boolean).join(' ')
 )
@@ -248,6 +266,7 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     'disabled',
     'label',
     'loading',
+    'matchButton',
     'pending',
     'round',
     'size',
@@ -297,6 +316,7 @@ function attribute(value: unknown): any {
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, 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)"
     :data-pending="reflectedProp('pending', 'pending', checkedProps.pending, undefined, false)"
     :data-round="reflectedProp('round', 'round', checkedProps.round, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
@@ -527,6 +547,32 @@ html[data-ui-input-modality="touch"] [data-component~="ui-icon-button"]::after {
   min-block-size: var(--ui-icon-button-size, var(--_size));
 }
 
+/* A text button's companion uses control geometry; compact icon buttons keep their own density. */
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="matchButton"] {
+  --_size: var(--ui-control-size-md);
+  block-size: auto;
+  align-self: stretch;
+}
+
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="matchButton"][data-ui-icon-button-state~="size=sm"] {
+  --_size: var(--ui-control-size-sm);
+}
+
+[data-component~="ui-icon-button"][data-ui-icon-button-state~="matchButton"][data-ui-icon-button-state~="size=lg"] {
+  --_size: var(--ui-control-size-lg);
+}
+
+@media (pointer: coarse) {
+  [data-component~="ui-icon-button"][data-ui-icon-button-state~="matchButton"] {
+    inline-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
+    min-inline-size: max(
+      var(--ui-icon-button-size, var(--_size)),
+      var(--ui-control-min-block-size)
+    );
+    min-block-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
+  }
+}
+
 [data-component~="ui-icon-button"][data-ui-icon-button-state~="round"] {
   border-radius: var(--ui-radius-round);
 }

package/vue/UiInput.vue

@@ -602,12 +602,17 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
 /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
    body-size text: below 16px, iOS zooms the page into the focused field. */
 @media (pointer: coarse) {
+  [data-component~="ui-input"],
+  [data-component~="ui-input"][data-ui-input-state~="size=sm"],
+  [data-component~="ui-input"][data-ui-input-state~="size=lg"] {
+    font-size: var(--ui-font-size-md);
+  }
+
   [data-component~="ui-input"][data-ui-input-state~="size=sm"] {
     min-block-size: var(
       --ui-input-min-block-size,
       var(--_ui-default-input-min-block-size, var(--ui-control-min-block-size))
     );
-    font-size: inherit;
   }
 }
 

package/vue/UiTreeItem.vue

@@ -925,7 +925,7 @@ function attribute(value: unknown): any {
 }
 
 /* Without hover there is no reveal, so the controls keep their own column. */
-@media (hover: none) {
+@media (hover: none), (pointer: coarse) {
   .row {
     grid-template-columns: var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
   }
@@ -939,6 +939,41 @@ function attribute(value: unknown): any {
     opacity: 1;
     pointer-events: auto;
   }
+
+  .row:is(:hover, :focus-within) > .label,
+  .row:is(:hover, :focus-within) > .label:dir(rtl),
+  [data-component~="ui-tree-item"][data-move-source] > .row > .label,
+  [data-component~="ui-tree-item"][data-move-source] > .row > .label:dir(rtl) {
+    mask-image: none;
+  }
+
+  .row[data-ui-marquee] > .label {
+    mask-image: linear-gradient(
+      to right,
+      transparent var(--_marquee-icon-width, 0px),
+      #000 calc(
+        var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))
+      )
+    );
+  }
+
+  .row[data-ui-marquee] > .label:dir(rtl) {
+    mask-image: linear-gradient(
+      to left,
+      transparent var(--_marquee-icon-width, 0px),
+      #000 calc(
+        var(--_marquee-lead, 0px) + var(--_ui-tree-item-label-padding-inline, var(--ui-space-2))
+      )
+    );
+  }
+
+  [data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row {
+    grid-template-columns: var(--_tree-disclosure-size) 1.25rem auto minmax(0, 1fr) auto;
+  }
+
+  [data-component~="ui-tree-item"][data-selection-mode="multiple"] > .row > .actions {
+    grid-column: 5;
+  }
 }
 
 /* The handle sits beside what it drags. A leaf row has no disclosure, so the handle takes that
@@ -1094,6 +1129,29 @@ html[data-ui-input-modality="touch"]
   grid-column: 5;
 }
 
+@media (hover: none), (pointer: coarse) {
+  html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .row {
+    grid-template-columns: 44px var(--_tree-disclosure-size) auto minmax(0, 1fr) auto;
+  }
+
+  html[data-ui-input-modality="touch"] [data-component~="ui-tree-item"] .actions {
+    grid-column: 5;
+  }
+
+  html[data-ui-input-modality="touch"]
+    [data-component~="ui-tree-item"][data-selection-mode="multiple"]
+    > .row {
+    grid-template-columns: 44px var(--_tree-disclosure-size) 44px auto minmax(0, 1fr) auto;
+  }
+
+  html[data-ui-input-modality="touch"]
+    [data-component~="ui-tree-item"][data-selection-mode="multiple"]
+    > .row
+    > .actions {
+    grid-column: 6;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .row,
   .disclosure-icon,

package/vue/chunks/UiIconButton.js

@@ -13,6 +13,7 @@ var _hoisted_1 = [
 	"data-disabled",
 	"data-label",
 	"data-loading",
+	"data-match-button",
 	"data-pending",
 	"data-round",
 	"data-size",
@@ -42,6 +43,10 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			type: null,
 			default: false
 		},
+		matchButton: {
+			type: null,
+			default: false
+		},
 		pending: {
 			type: null,
 			default: false
@@ -100,6 +105,16 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				description: "Keeps the button focusable and named while work is in progress. It shows a spinner, states aria-disabled and aria-busy, and prevents activation until\n      cleared.",
 				default: false
 			},
+			matchButton: {
+				type: {
+					kind: "terminal",
+					name: "boolean"
+				},
+				required: false,
+				target: { attribute: "data-match-button" },
+				description: "Matches a boxed Button of the same size when the two share a flex row. Uses the control-size theme tokens and stretches to the row's height, including\n      touch-sized controls. Leave it off for compact toolbar and inline icon buttons.",
+				default: false
+			},
 			pending: {
 				type: {
 					kind: "terminal",
@@ -157,6 +172,7 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			disabled: false,
 			label: null,
 			loading: false,
+			matchButton: false,
 			pending: false,
 			round: false,
 			size: "md",
@@ -179,6 +195,10 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				kind: "terminal",
 				name: "boolean"
 			}, false, "loading", acceptedProps),
+			matchButton: checkedProp(props["matchButton"], {
+				kind: "terminal",
+				name: "boolean"
+			}, false, "matchButton", acceptedProps),
 			pending: checkedProp(props["pending"], {
 				kind: "terminal",
 				name: "boolean"
@@ -231,6 +251,7 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			checkedProps.value.pending && "pending",
 			checkedProps.value.size && "size",
 			checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
+			checkedProps.value.matchButton && "matchButton",
 			checkedProps.value.round && "round"
 		].filter(Boolean).join(" "));
 		const dispatch = createDispatch(root);
@@ -252,6 +273,7 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				"disabled",
 				"label",
 				"loading",
+				"matchButton",
 				"pending",
 				"round",
 				"size",
@@ -292,6 +314,7 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 				"data-disabled": reflectedProp("disabled", "disabled", checkedProps.value.disabled, 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),
 				"data-pending": reflectedProp("pending", "pending", checkedProps.value.pending, void 0, false),
 				"data-round": reflectedProp("round", "round", checkedProps.value.round, void 0, false),
 				"data-size": reflectedProp("size", "size", checkedProps.value.size, void 0, false),
@@ -308,6 +331,6 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-7bb0fe2e"]]);
+}), [["__scopeId", "data-v-1cd8b91b"]]);
 //#endregion
 export { UiIconButton_default as t };

package/vue/chunks/UiInput.js

@@ -690,6 +690,6 @@ var UiInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-762209e1"]]);
+}), [["__scopeId", "data-v-e45d8c3f"]]);
 //#endregion
 export { UiInput_default as t };

package/vue/chunks/UiTreeItem.js

@@ -610,6 +610,6 @@ var UiTreeItem_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-d2b1bbe0"]]);
+}), [["__scopeId", "data-v-fd74ff6c"]]);
 //#endregion
 export { UiTreeItem_default as t };