@threadlabs/looma 0.23.15 → 0.23.17

package/vue/UiEditorTableContextMenu.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.19 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import {
   computed,
@@ -450,6 +450,24 @@ function attribute(value: unknown): any {
   return value === true ? '' : text(value)
 }
 
+// A nonempty scalar call cannot produce the invalid-result sentinel.
+type ConcatResult<T extends unknown[]> = T extends
+  [
+    string | number | boolean | null | undefined,
+    ...(string | number | boolean | null | undefined)[],
+  ] ? string | undefined
+  : string | symbol | undefined
+function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
+  if (values.some(value => value === Symbol.for('html-next.invalid-result'))) {
+    return Symbol.for('html-next.invalid-result') as ConcatResult<T>
+  }
+  if (values.some(value => value === undefined)) return undefined as ConcatResult<T>
+  if (values.length === 0 || values.some(value => typeof value === 'object' && value !== null)) {
+    return Symbol.for('html-next.invalid-result') as ConcatResult<T>
+  }
+  return values.map(value => value === null ? '' : String(value)).join('') as ConcatResult<T>
+}
+
 function uniqueKeys<T>(
   items: readonly T[],
   keyOf: (
@@ -527,12 +545,35 @@ function uniqueKeys<T>(
               :key="item.action"
               type="button"
               :role="attribute(
-                (({ true: 'menuitemcheckbox', false: 'menuitem' }) as Record<string, any>)[`${item.checkable}`],
+                ((objectValue: any, indexValue: any) =>
+                  objectValue === Symbol.for('html-next.invalid-result')
+                    || indexValue === Symbol.for('html-next.invalid-result')
+                    ? Symbol.for('html-next.invalid-result')
+                    : objectValue[indexValue])(
+                    { true: 'menuitemcheckbox', false: 'menuitem' },
+                    concat(item.checkable),
+                  ),
               )"
-              :aria-checked="typeof ((({ true: item.checked, false: null }) as Record<string, any>)[`${item.checkable}`])
+              :aria-checked="typeof (((objectValue: any, indexValue: any) =>
+                objectValue === Symbol.for('html-next.invalid-result')
+                  || indexValue === Symbol.for('html-next.invalid-result')
+                  ? Symbol.for('html-next.invalid-result')
+                  : objectValue[indexValue])({ true: item.checked, false: null }, concat(item.checkable)))
                 === 'boolean'
-              ? String((({ true: item.checked, false: null }) as Record<string, any>)[`${item.checkable}`])
-              : attribute((({ true: item.checked, false: null }) as Record<string, any>)[`${item.checkable}`])"
+              ? String(
+                ((objectValue: any, indexValue: any) =>
+                  objectValue === Symbol.for('html-next.invalid-result')
+                    || indexValue === Symbol.for('html-next.invalid-result')
+                    ? Symbol.for('html-next.invalid-result')
+                    : objectValue[indexValue])({ true: item.checked, false: null }, concat(item.checkable)),
+              )
+              : attribute(
+                ((objectValue: any, indexValue: any) =>
+                  objectValue === Symbol.for('html-next.invalid-result')
+                    || indexValue === Symbol.for('html-next.invalid-result')
+                    ? Symbol.for('html-next.invalid-result')
+                    : objectValue[indexValue])({ true: item.checked, false: null }, concat(item.checkable)),
+              )"
               :data-action="item.action"
               :class="{ danger: item.danger }"
             >

package/vue/UiEditorTableOverlay.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.19 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import {
   computed,
@@ -368,45 +368,74 @@ const active = ref<
 const activeKey = ref('')
 let guardedPrevious: any
 const guarded = computed(() => {
-  if (!(hovered.value?.['rowIndex'] == null || Number.isInteger(hovered.value?.['rowIndex']))) {
+  if (!(hovered.value?.['rowOffset'] == null || typeof hovered.value?.['rowOffset'] === 'string')) {
     return guardedPrevious
   }
-  return guardedPrevious = hovered.value?.rowIndex
+  return guardedPrevious = hovered.value?.rowOffset
 })
 let guardedBindingPrevious: any
 const guardedBinding = computed(() => {
-  if (
-    !(hovered.value?.['columnIndex'] == null || Number.isInteger(hovered.value?.['columnIndex']))
-  ) return guardedBindingPrevious
-  return guardedBindingPrevious = hovered.value?.columnIndex
+  if (!(hovered.value?.['rowIndex'] == null || Number.isInteger(hovered.value?.['rowIndex']))) {
+    return guardedBindingPrevious
+  }
+  return guardedBindingPrevious = hovered.value?.rowIndex
 })
 let guardedBinding2Previous: any
 const guardedBinding2 = computed(() => {
-  if (!(hovered.value?.['rowIndex'] == null || Number.isInteger(hovered.value?.['rowIndex']))) {
-    return guardedBinding2Previous
-  }
-  return guardedBinding2Previous = hovered.value?.rowIndex
+  if (
+    !(hovered.value?.['columnIndex'] == null || Number.isInteger(hovered.value?.['columnIndex']))
+  ) return guardedBinding2Previous
+  return guardedBinding2Previous = hovered.value?.columnIndex
 })
 let guardedBinding3Previous: any
 const guardedBinding3 = computed(() => {
   if (
-    !(hovered.value?.['columnIndex'] == null || Number.isInteger(hovered.value?.['columnIndex']))
+    !(hovered.value?.['columnOffset'] == null
+      || typeof hovered.value?.['columnOffset'] === 'string')
   ) return guardedBinding3Previous
-  return guardedBinding3Previous = hovered.value?.columnIndex
+  return guardedBinding3Previous = hovered.value?.columnOffset
 })
 let guardedBinding4Previous: any
 const guardedBinding4 = computed(() => {
-  if (!(active.value?.['rowIndex'] == null || Number.isInteger(active.value?.['rowIndex']))) {
+  if (!(hovered.value?.['rowIndex'] == null || Number.isInteger(hovered.value?.['rowIndex']))) {
     return guardedBinding4Previous
   }
-  return guardedBinding4Previous = active.value?.rowIndex
+  return guardedBinding4Previous = hovered.value?.rowIndex
 })
 let guardedBinding5Previous: any
 const guardedBinding5 = computed(() => {
+  if (
+    !(hovered.value?.['columnIndex'] == null || Number.isInteger(hovered.value?.['columnIndex']))
+  ) return guardedBinding5Previous
+  return guardedBinding5Previous = hovered.value?.columnIndex
+})
+let guardedBinding6Previous: any
+const guardedBinding6 = computed(() => {
+  if (!(active.value?.['menuLeft'] == null || typeof active.value?.['menuLeft'] === 'string')) {
+    return guardedBinding6Previous
+  }
+  return guardedBinding6Previous = active.value?.menuLeft
+})
+let guardedBinding7Previous: any
+const guardedBinding7 = computed(() => {
+  if (!(active.value?.['menuTop'] == null || typeof active.value?.['menuTop'] === 'string')) {
+    return guardedBinding7Previous
+  }
+  return guardedBinding7Previous = active.value?.menuTop
+})
+let guardedBinding8Previous: any
+const guardedBinding8 = computed(() => {
+  if (!(active.value?.['rowIndex'] == null || Number.isInteger(active.value?.['rowIndex']))) {
+    return guardedBinding8Previous
+  }
+  return guardedBinding8Previous = active.value?.rowIndex
+})
+let guardedBinding9Previous: any
+const guardedBinding9 = computed(() => {
   if (!(active.value?.['columnIndex'] == null || Number.isInteger(active.value?.['columnIndex']))) {
-    return guardedBinding5Previous
+    return guardedBinding9Previous
   }
-  return guardedBinding5Previous = active.value?.columnIndex
+  return guardedBinding9Previous = active.value?.columnIndex
 })
 provide('html-next:ui-editor-table-overlay:rows', rows)
 provide('html-next:ui-editor-table-overlay:cols', cols)
@@ -613,9 +642,9 @@ function uniqueKeys<T>(
         data-action="select-row"
         title="Drag row to reorder; click for actions"
         aria-label="Row actions"
-        :data-row-index="guarded"
-        :data-column-index="guardedBinding"
-        :style="{ top: hovered?.rowOffset ?? undefined }"
+        :data-row-index="guardedBinding"
+        :data-column-index="guardedBinding2"
+        :style="{ top: guarded }"
       >
         <span class="glyph"><UiIcon name="grip-vertical" /></span>
       </button>
@@ -625,9 +654,9 @@ function uniqueKeys<T>(
         data-action="select-column"
         title="Drag column to reorder; click for actions"
         aria-label="Column actions"
-        :data-row-index="guardedBinding2"
-        :data-column-index="guardedBinding3"
-        :style="{ left: hovered?.columnOffset ?? undefined }"
+        :data-row-index="guardedBinding4"
+        :data-column-index="guardedBinding5"
+        :style="{ left: guardedBinding3 }"
       >
         <span class="glyph"><UiIcon name="grip-horizontal" /></span>
       </button></template>
@@ -638,9 +667,9 @@ function uniqueKeys<T>(
       data-action="open-cell-menu"
       title="Cell actions"
       aria-label="Cell actions"
-      :data-row-index="guardedBinding4"
-      :data-column-index="guardedBinding5"
-      :style="{ left: active?.menuLeft ?? undefined, top: active?.menuTop ?? undefined }"
+      :data-row-index="guardedBinding8"
+      :data-column-index="guardedBinding9"
+      :style="{ left: guardedBinding6, top: guardedBinding7 }"
     >
       <UiIcon name="chevron-down" />
     </button>

package/vue/UiEditorTableToolbar.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.19 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import {
   computed,
@@ -469,6 +469,24 @@ function attribute(value: unknown): any {
   return value === true ? '' : text(value)
 }
 
+// A nonempty scalar call cannot produce the invalid-result sentinel.
+type ConcatResult<T extends unknown[]> = T extends
+  [
+    string | number | boolean | null | undefined,
+    ...(string | number | boolean | null | undefined)[],
+  ] ? string | undefined
+  : string | symbol | undefined
+function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
+  if (values.some(value => value === Symbol.for('html-next.invalid-result'))) {
+    return Symbol.for('html-next.invalid-result') as ConcatResult<T>
+  }
+  if (values.some(value => value === undefined)) return undefined as ConcatResult<T>
+  if (values.length === 0 || values.some(value => typeof value === 'object' && value !== null)) {
+    return Symbol.for('html-next.invalid-result') as ConcatResult<T>
+  }
+  return values.map(value => value === null ? '' : String(value)).join('') as ConcatResult<T>
+}
+
 function uniqueKeys<T>(
   items: readonly T[],
   keyOf: (
@@ -594,12 +612,35 @@ function uniqueKeys<T>(
                 :key="item.action"
                 type="button"
                 :role="attribute(
-                  (({ true: 'menuitemcheckbox', false: 'menuitem' }) as Record<string, any>)[`${item.checkable}`],
+                  ((objectValue: any, indexValue: any) =>
+                    objectValue === Symbol.for('html-next.invalid-result')
+                      || indexValue === Symbol.for('html-next.invalid-result')
+                      ? Symbol.for('html-next.invalid-result')
+                      : objectValue[indexValue])(
+                      { true: 'menuitemcheckbox', false: 'menuitem' },
+                      concat(item.checkable),
+                    ),
                 )"
-                :aria-checked="typeof ((({ true: item.checked, false: null }) as Record<string, any>)[`${item.checkable}`])
+                :aria-checked="typeof (((objectValue: any, indexValue: any) =>
+                  objectValue === Symbol.for('html-next.invalid-result')
+                    || indexValue === Symbol.for('html-next.invalid-result')
+                    ? Symbol.for('html-next.invalid-result')
+                    : objectValue[indexValue])({ true: item.checked, false: null }, concat(item.checkable)))
                   === 'boolean'
-                ? String((({ true: item.checked, false: null }) as Record<string, any>)[`${item.checkable}`])
-                : attribute((({ true: item.checked, false: null }) as Record<string, any>)[`${item.checkable}`])"
+                ? String(
+                  ((objectValue: any, indexValue: any) =>
+                    objectValue === Symbol.for('html-next.invalid-result')
+                      || indexValue === Symbol.for('html-next.invalid-result')
+                      ? Symbol.for('html-next.invalid-result')
+                      : objectValue[indexValue])({ true: item.checked, false: null }, concat(item.checkable)),
+                )
+                : attribute(
+                  ((objectValue: any, indexValue: any) =>
+                    objectValue === Symbol.for('html-next.invalid-result')
+                      || indexValue === Symbol.for('html-next.invalid-result')
+                      ? Symbol.for('html-next.invalid-result')
+                      : objectValue[indexValue])({ true: item.checked, false: null }, concat(item.checkable)),
+                )"
                 :data-action="item.action"
                 :class="{ danger: item.danger }"
               >

package/vue/UiEditorToolbar.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.19 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiFloatingActionButton.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.19 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiFormField.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.19 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiGrid.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.19 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiIcon.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.19 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

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

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.19 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from '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' },
@@ -194,6 +211,44 @@ function reflectedProp(
 const hydrationInstance = getCurrentInstance()
 
 const root = ref<HTMLElement | null>(null)
+let guardedPrevious: any = null
+const guarded = computed(() => {
+  const candidate: any = ((objectValue: any, indexValue: any) =>
+    objectValue === Symbol.for('html-next.invalid-result')
+      || indexValue === Symbol.for('html-next.invalid-result')
+      ? Symbol.for('html-next.invalid-result')
+      : objectValue[indexValue])(
+      { true: 'true', false: null },
+      concat(checkedProps.value.loading || checkedProps.value.pending),
+    )
+  if (candidate === Symbol.for('html-next.invalid-result')) {
+    return guardedPrevious
+  }
+  return guardedPrevious = typeof (((objectValue: any, indexValue: any) =>
+      objectValue === Symbol.for('html-next.invalid-result')
+        || indexValue === Symbol.for('html-next.invalid-result')
+        ? Symbol.for('html-next.invalid-result')
+        : objectValue[indexValue])(
+        { true: 'true', false: null },
+        concat(checkedProps.value.loading || checkedProps.value.pending),
+      )) === 'boolean'
+    ? String(((objectValue: any, indexValue: any) =>
+      objectValue === Symbol.for('html-next.invalid-result')
+        || indexValue === Symbol.for('html-next.invalid-result')
+        ? Symbol.for('html-next.invalid-result')
+        : objectValue[indexValue])(
+        { true: 'true', false: null },
+        concat(checkedProps.value.loading || checkedProps.value.pending),
+      ))
+    : attribute(((objectValue: any, indexValue: any) =>
+      objectValue === Symbol.for('html-next.invalid-result')
+        || indexValue === Symbol.for('html-next.invalid-result')
+        ? Symbol.for('html-next.invalid-result')
+        : objectValue[indexValue])(
+        { true: 'true', false: null },
+        concat(checkedProps.value.loading || checkedProps.value.pending),
+      ))
+})
 const hydrationNode = hydrationInstance?.vnode.el
 if (
   typeof window !== 'undefined' && hydrationNode != null
@@ -222,6 +277,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 +304,7 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     'disabled',
     'label',
     'loading',
+    'matchButton',
     'pending',
     'round',
     'size',
@@ -269,6 +326,24 @@ function attribute(value: unknown): any {
   ) return undefined
   return value === true ? '' : text(value)
 }
+
+// A nonempty scalar call cannot produce the invalid-result sentinel.
+type ConcatResult<T extends unknown[]> = T extends
+  [
+    string | number | boolean | null | undefined,
+    ...(string | number | boolean | null | undefined)[],
+  ] ? string | undefined
+  : string | symbol | undefined
+function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
+  if (values.some(value => value === Symbol.for('html-next.invalid-result'))) {
+    return Symbol.for('html-next.invalid-result') as ConcatResult<T>
+  }
+  if (values.some(value => value === undefined)) return undefined as ConcatResult<T>
+  if (values.length === 0 || values.some(value => typeof value === 'object' && value !== null)) {
+    return Symbol.for('html-next.invalid-result') as ConcatResult<T>
+  }
+  return values.map(value => value === null ? '' : String(value)).join('') as ConcatResult<T>
+}
 </script>
 
 <template>
@@ -278,25 +353,14 @@ function attribute(value: unknown): any {
     v-bind="nativeAttrs($attrs)"
     :disabled="checkedProps.disabled ?? undefined"
     :aria-label="checkedProps.label ?? undefined"
-    :aria-disabled="typeof ((({ true: 'true', false: null }) as Record<string, any>)[
-      `${checkedProps.loading || checkedProps.pending}`
-    ]) === 'boolean'
-    ? String(
-      (({ true: 'true', false: null }) as Record<string, any>)[
-        `${checkedProps.loading || checkedProps.pending}`
-      ],
-    )
-    : attribute(
-      (({ true: 'true', false: null }) as Record<string, any>)[
-        `${checkedProps.loading || checkedProps.pending}`
-      ],
-    )"
+    :aria-disabled="guarded"
     :aria-busy="checkedProps.loading || checkedProps.pending"
     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-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 +591,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

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.19 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
 <script
   setup
   lang="ts"

package/vue/UiInputGroup.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.19 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiList.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.19 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, useTemplateRef, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'

package/vue/UiListItem.vue

@@ -1,4 +1,4 @@
-<!-- Generated by HTML Next 1.0.0-alpha.19 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.25 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
 import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
 import type { PropType } from 'vue'