@threadlabs/looma 0.25.4 → 0.25.6

package/vue/UiListItem.d.ts

@@ -18,6 +18,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<boolean | null>;
         default: boolean;
     };
+    leadingInteractive: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     variant: {
         type: PropType<"row" | "card" | null>;
         default: string;
@@ -35,6 +39,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<boolean | null>;
         default: boolean;
     };
+    leadingInteractive: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     variant: {
         type: PropType<"row" | "card" | null>;
         default: string;
@@ -48,6 +56,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     current: boolean | null;
     wrap: boolean | null;
     highlighted: boolean | null;
+    leadingInteractive: 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/UiListItem.vue

@@ -24,6 +24,14 @@ const propValidityContract = {
         'Gives an item a quiet accent wash without changing its text or announcing selection. Several items may be highlighted, such as new messages. Describe the\n      reason in the item\'s text; use current only for the current destination.',
       default: false,
     },
+    leadingInteractive: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'leadinginteractive' },
+      description:
+        'Makes the leading region an independent control above the row link. Use it for a checkbox or button; keep noninteractive row icons in the title link when\n      combining them with a leading control.',
+      default: false,
+    },
     variant: {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
@@ -46,12 +54,14 @@ const propValidityContract = {
 const props = defineProps({
   current: { type: null as unknown as PropType<boolean | null>, default: false },
   highlighted: { type: null as unknown as PropType<boolean | null>, default: false },
+  leadingInteractive: { type: null as unknown as PropType<boolean | null>, default: false },
   variant: { type: null as unknown as PropType<'row' | 'card' | null>, default: 'row' },
   wrap: { type: null as unknown as PropType<boolean | null>, default: false },
 })
 const acceptedProps: Record<string, unknown> = {
   current: false,
   highlighted: false,
+  leadingInteractive: false,
   variant: 'row',
   wrap: false,
 }
@@ -70,6 +80,13 @@ const checkedProps = computed(() => ({
     'highlighted',
     acceptedProps,
   ) as boolean,
+  leadingInteractive: checkedProp<boolean>(
+    props['leadingInteractive'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'leadingInteractive',
+    acceptedProps,
+  ) as boolean,
   variant: checkedProp<'row' | 'card'>(
     props['variant'],
     { kind: 'terminal', name: 'keyword' },
@@ -148,6 +165,7 @@ const hostState = computed(() =>
     && `variant=${encodeURIComponent(checkedProps.value.variant)}`,
     checkedProps.value.highlighted && 'highlighted',
     checkedProps.value.current && 'current',
+    checkedProps.value.leadingInteractive && 'leadingInteractive',
     checkedProps.value.wrap && 'wrap',
   ].filter(Boolean).join(' ')
 )
@@ -161,6 +179,13 @@ const hostState = computed(() =>
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-current="reflectedProp('current', 'current', checkedProps.current, undefined, false)"
     :data-highlighted="reflectedProp('highlighted', 'highlighted', checkedProps.highlighted, undefined, false)"
+    :data-leading-interactive="reflectedProp(
+      'leadingInteractive',
+      'leading-interactive',
+      checkedProps.leadingInteractive,
+      undefined,
+      false,
+    )"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-list-item-state="hostState || undefined"
@@ -234,12 +259,12 @@ const hostState = computed(() =>
   background: var(--ui-surface-raised);
 }
 
-[data-component~="ui-list-item"]:has(.title a[href]:hover) {
-  background: var(--ui-surface-hover);
+[data-component~="ui-list-item"]:where(:has(.title a[href])):hover {
+  background: var(--ui-selection-surface);
 }
 
-[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"]:has(.title
-  a[href]:hover) {
+[data-component~="ui-list-item"][data-ui-list-item-state~="variant=card"]:where(:has(.title
+  a[href])):hover {
   border-color: var(--ui-border-strong);
 }
 
@@ -273,6 +298,12 @@ const hostState = computed(() =>
   color: var(--ui-selection-text);
 }
 
+/* An explicitly independent leading control sits above the stretched row link. */
+[data-component~="ui-list-item"][data-ui-list-item-state~="leadingInteractive"] .leading {
+  position: relative;
+  z-index: 1;
+}
+
 /* Trailing controls take their own clicks, above the title link's stretched hit area. */
 .trailing {
   position: relative;

package/vue/UiScrollArea.d.ts

@@ -4,6 +4,10 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    fill: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     orientation: {
         type: PropType<"vertical" | "horizontal" | null>;
         default: string;
@@ -13,6 +17,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    fill: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     orientation: {
         type: PropType<"vertical" | "horizontal" | null>;
         default: string;
@@ -22,6 +30,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
 }>> & Readonly<{}>, {
+    fill: boolean | null;
     size: "sm" | "md" | "content" | "lg" | null;
     orientation: "vertical" | "horizontal" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/vue/UiScrollArea.vue

@@ -9,6 +9,14 @@ defineOptions({ inheritAttrs: false })
 
 const propValidityContract = {
   props: {
+    fill: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'fill' },
+      description:
+        'Grows into remaining space within a flex layout while keeping content independently scrollable.',
+      default: false,
+    },
     orientation: {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
@@ -30,6 +38,7 @@ const propValidityContract = {
   },
 } as const
 const props = defineProps({
+  fill: { type: null as unknown as PropType<boolean | null>, default: false },
   orientation: {
     type: null as unknown as PropType<'vertical' | 'horizontal' | null>,
     default: 'vertical',
@@ -39,8 +48,19 @@ const props = defineProps({
     default: 'content',
   },
 })
-const acceptedProps: Record<string, unknown> = { orientation: 'vertical', size: 'content' }
+const acceptedProps: Record<string, unknown> = {
+  fill: false,
+  orientation: 'vertical',
+  size: 'content',
+}
 const checkedProps = computed(() => ({
+  fill: checkedProp<boolean>(
+    props['fill'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'fill',
+    acceptedProps,
+  ) as boolean,
   orientation: checkedProp<'vertical' | 'horizontal'>(
     props['orientation'],
     { kind: 'terminal', name: 'keyword' },
@@ -116,6 +136,7 @@ if (
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
+    checkedProps.value.fill && 'fill',
     checkedProps.value.orientation && 'orientation',
     checkedProps.value.orientation != null
     && `orientation=${encodeURIComponent(checkedProps.value.orientation)}`,
@@ -141,7 +162,7 @@ useComponentHost(() => import('../components/ui-scroll-area/ui-scroll-area.js'),
       ? (incoming[name] ?? incoming[kebab] ?? null)
       : null
   },
-  propNames: ['orientation', 'size'],
+  propNames: ['fill', 'orientation', 'size'],
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   refs: { content: contentElement },
@@ -153,6 +174,7 @@ useComponentHost(() => import('../components/ui-scroll-area/ui-scroll-area.js'),
     data-component="ui-scroll-area"
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
+    :data-fill="reflectedProp('fill', 'fill', checkedProps.fill, undefined, false)"
     :data-orientation="reflectedProp('orientation', 'orientation', checkedProps.orientation, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-ui-scroll-area-state="hostState || undefined"
@@ -166,6 +188,10 @@ useComponentHost(() => import('../components/ui-scroll-area/ui-scroll-area.js'),
 /* The controller sets each fade length from overflow and scroll position. The mask blends
        into whatever is behind the area without needing to know its colour. Before upgrade, its
        zero-length defaults leave the authored scroll area fully visible. */
+[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="fill"] {
+  flex: 1;
+}
+
 [data-component~="ui-scroll-area"] {
   display: block;
   box-sizing: border-box;

package/vue/UiStack.d.ts

@@ -8,10 +8,18 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"start" | "center" | "end" | "stretch" | null>;
         default: null;
     };
+    fill: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     gap: {
         type: PropType<"none" | "xs" | "s" | "m" | "l" | "xl" | null>;
         default: null;
     };
+    height: {
+        type: PropType<number | null>;
+        default: null;
+    };
     justify: {
         type: PropType<"start" | "center" | "end" | "between" | null>;
         default: null;
@@ -21,15 +29,25 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"start" | "center" | "end" | "stretch" | null>;
         default: null;
     };
+    fill: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     gap: {
         type: PropType<"none" | "xs" | "s" | "m" | "l" | "xl" | null>;
         default: null;
     };
+    height: {
+        type: PropType<number | null>;
+        default: null;
+    };
     justify: {
         type: PropType<"start" | "center" | "end" | "between" | null>;
         default: null;
     };
 }>> & Readonly<{}>, {
+    fill: boolean | null;
+    height: number | null;
     align: "center" | "start" | "stretch" | "end" | null;
     gap: "s" | "none" | "xs" | "m" | "l" | "xl" | null;
     justify: "center" | "start" | "end" | "between" | null;

package/vue/UiStack.vue

@@ -16,6 +16,14 @@ const propValidityContract = {
         'How items sit across the stack: stretch (the default) makes each fill the stack\'s width; start, center, and end keep each at its own width, against the\n      start, in the middle, or against the end.',
       values: ['start', 'center', 'end', 'stretch'],
     },
+    fill: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'fill' },
+      description:
+        'Grows into the remaining space of a flex layout and allows its scrolling children to shrink.',
+      default: false,
+    },
     gap: {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
@@ -24,6 +32,13 @@ const propValidityContract = {
         'Space between items, on the spacing scale: none is zero, xs is 0.5rem, s 0.75rem, m 1rem (also the default), l 1.5rem, and xl 2rem. The --ui-stack-gap\n      custom property, set on the stack itself, overrides it; set on an ancestor, it does nothing.',
       values: ['none', 'xs', 's', 'm', 'l', 'xl'],
     },
+    height: {
+      type: { kind: 'terminal', name: 'number' },
+      required: false,
+      target: { attribute: 'height' },
+      description:
+        'An optional measured height in CSS pixels, for a viewport-bounded composition. Omit it to retain intrinsic sizing.',
+    },
     justify: {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
@@ -39,16 +54,24 @@ const props = defineProps({
     type: null as unknown as PropType<'start' | 'center' | 'end' | 'stretch' | null>,
     default: null,
   },
+  fill: { type: null as unknown as PropType<boolean | null>, default: false },
   gap: {
     type: null as unknown as PropType<'none' | 'xs' | 's' | 'm' | 'l' | 'xl' | null>,
     default: null,
   },
+  height: { type: null as unknown as PropType<number | null>, default: null },
   justify: {
     type: null as unknown as PropType<'start' | 'center' | 'end' | 'between' | null>,
     default: null,
   },
 })
-const acceptedProps: Record<string, unknown> = { align: null, gap: null, justify: null }
+const acceptedProps: Record<string, unknown> = {
+  align: null,
+  fill: false,
+  gap: null,
+  height: null,
+  justify: null,
+}
 const checkedProps = computed(() => ({
   align: checkedProp<'start' | 'center' | 'end' | 'stretch'>(
     props['align'],
@@ -57,6 +80,13 @@ const checkedProps = computed(() => ({
     'align',
     acceptedProps,
   ),
+  fill: checkedProp<boolean>(
+    props['fill'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'fill',
+    acceptedProps,
+  ) as boolean,
   gap: checkedProp<'none' | 'xs' | 's' | 'm' | 'l' | 'xl'>(
     props['gap'],
     { kind: 'terminal', name: 'keyword' },
@@ -64,6 +94,13 @@ const checkedProps = computed(() => ({
     'gap',
     acceptedProps,
   ),
+  height: checkedProp<number>(
+    props['height'],
+    { kind: 'terminal', name: 'number' },
+    false,
+    'height',
+    acceptedProps,
+  ),
   justify: checkedProp<'start' | 'center' | 'end' | 'between'>(
     props['justify'],
     { kind: 'terminal', name: 'keyword' },
@@ -127,6 +164,9 @@ if (
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
+    checkedProps.value.fill && 'fill',
+    checkedProps.value.height && 'height',
+    checkedProps.value.height != null && `height=${checkedProps.value.height}`,
     checkedProps.value.gap && 'gap',
     checkedProps.value.gap != null && `gap=${encodeURIComponent(checkedProps.value.gap)}`,
     checkedProps.value.align && 'align',
@@ -142,9 +182,12 @@ const hostState = computed(() =>
   <div
     data-component="ui-stack"
     v-bind="nativeAttrs($attrs)"
+    :style="{ '--ui-stack-height': checkedProps.height ?? undefined }"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
+    :data-fill="reflectedProp('fill', 'fill', checkedProps.fill, undefined, false)"
     :data-gap="reflectedProp('gap', 'gap', checkedProps.gap, undefined, false)"
+    :data-height="reflectedProp('height', 'height', checkedProps.height, undefined, false)"
     :data-justify="reflectedProp('justify', 'justify', checkedProps.justify, undefined, false)"
     :data-ui-stack-state="hostState || undefined"
   >
@@ -154,6 +197,11 @@ const hostState = computed(() =>
 
 <style scoped>
 /* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-stack-height {
+  syntax: "*";
+  inherits: false;
+}
+
 @property --ui-stack-gap {
   syntax: "*";
   inherits: false;
@@ -170,6 +218,15 @@ const hostState = computed(() =>
   margin: 0;
 }
 
+[data-component~="ui-stack"][data-ui-stack-state~="fill"] {
+  flex: 1;
+  min-block-size: 0;
+}
+[data-component~="ui-stack"][data-ui-stack-state~="height"] {
+  block-size: calc(var(--ui-stack-height, 0) * 1px);
+  min-block-size: 0;
+}
+
 [data-component~="ui-stack"][data-ui-stack-state~="gap=none"] {
   --_layout-gap: 0px;
 }

package/vue/UiText.d.ts

@@ -36,6 +36,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"inherit" | "sans" | null>;
         default: string;
     };
+    grow: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     size: {
         type: PropType<"inherit" | "xs" | "sm" | "md" | "lg" | null>;
         default: string;
@@ -73,6 +77,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"inherit" | "sans" | null>;
         default: string;
     };
+    grow: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     size: {
         type: PropType<"inherit" | "xs" | "sm" | "md" | "lg" | null>;
         default: string;
@@ -105,6 +113,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     align: "center" | "start" | null;
     as: "div" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "p" | "small" | "span" | "strong" | null;
     wrap: "normal" | "anywhere" | null;
+    grow: boolean | null;
     truncate: boolean | null;
     weight: "inherit" | "medium" | "normal" | "semibold" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/vue/UiText.vue

@@ -35,6 +35,14 @@ const propValidityContract = {
       values: ['inherit', 'sans'],
       default: 'inherit',
     },
+    grow: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'grow' },
+      description:
+        'Lets this text use remaining inline space in a flex row, including when truncated.',
+      default: false,
+    },
     size: {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
@@ -98,6 +106,7 @@ const props = defineProps({
     default: 'p',
   },
   font: { type: null as unknown as PropType<'inherit' | 'sans' | null>, default: 'inherit' },
+  grow: { type: null as unknown as PropType<boolean | null>, default: false },
   size: {
     type: null as unknown as PropType<'inherit' | 'xs' | 'sm' | 'md' | 'lg' | null>,
     default: 'inherit',
@@ -131,6 +140,7 @@ const acceptedProps: Record<string, unknown> = {
   align: 'start',
   as: 'p',
   font: 'inherit',
+  grow: false,
   size: 'inherit',
   tone: 'default',
   truncate: false,
@@ -167,6 +177,13 @@ const checkedProps = computed(() => ({
     'font',
     acceptedProps,
   ) as 'inherit' | 'sans',
+  grow: checkedProp<boolean>(
+    props['grow'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'grow',
+    acceptedProps,
+  ) as boolean,
   size: checkedProp<'inherit' | 'xs' | 'sm' | 'md' | 'lg'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
@@ -291,6 +308,7 @@ if (
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
+    checkedProps.value.grow && 'grow',
     checkedProps.value.size && 'size',
     checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
     checkedProps.value.tone && 'tone',
@@ -320,6 +338,7 @@ const hostState = computed(() =>
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
@@ -337,6 +356,7 @@ const hostState = computed(() =>
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
@@ -356,6 +376,7 @@ const hostState = computed(() =>
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
@@ -373,6 +394,7 @@ const hostState = computed(() =>
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
@@ -390,6 +412,7 @@ const hostState = computed(() =>
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
@@ -407,6 +430,7 @@ const hostState = computed(() =>
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
@@ -426,6 +450,7 @@ const hostState = computed(() =>
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
@@ -445,6 +470,7 @@ const hostState = computed(() =>
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
@@ -464,6 +490,7 @@ const hostState = computed(() =>
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
@@ -483,6 +510,7 @@ const hostState = computed(() =>
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
@@ -502,6 +530,7 @@ const hostState = computed(() =>
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
     :data-as="reflectedProp('as', 'as', checkedProps.as, undefined, false)"
     :data-font="reflectedProp('font', 'font', checkedProps.font, undefined, false)"
+    :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-truncate="reflectedProp('truncate', 'truncate', checkedProps.truncate, undefined, false)"
@@ -519,6 +548,10 @@ const hostState = computed(() =>
 /* Running text, set on the type scale and in a tone that says what it is, so a view never styles
        text of its own. The root is a paragraph unless as= names a span, div, small, strong, label, or
        heading. */
+[data-component~="ui-text"][data-ui-text-state~="grow"] {
+  flex: 1;
+}
+
 [data-component~="ui-text"] {
   margin: 0;
   min-inline-size: 0;

package/vue/UiTextarea.d.ts

@@ -12,6 +12,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: PropType<boolean | null>;
         default: boolean;
     };
+    maxRows: {
+        type: PropType<number | null>;
+        default: null;
+    };
     readonly: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -50,6 +54,10 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
         type: PropType<boolean | null>;
         default: boolean;
     };
+    maxRows: {
+        type: PropType<number | null>;
+        default: null;
+    };
     readonly: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -83,6 +91,7 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     disabled: boolean | null;
     required: boolean | null;
     readonly: boolean | null;
+    maxRows: number | null;
     autosize: boolean | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: typeof __VLS_export;