@threadlabs/looma 0.25.3 → 0.25.5

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;

package/vue/UiTextarea.vue

@@ -32,6 +32,13 @@ const propValidityContract = {
       description: 'Exposes invalid state to assistive technology and styling.',
       default: false,
     },
+    maxRows: {
+      type: { kind: 'terminal', name: 'integer' },
+      required: false,
+      target: { attribute: 'maxrows' },
+      description:
+        'Optional maximum visible rows, for a growing field in a bounded layout. Extra text scrolls inside the field. Omit it to retain unbounded growth.',
+    },
     readonly: {
       type: { kind: 'terminal', name: 'boolean' },
       required: false,
@@ -75,6 +82,7 @@ const props = defineProps({
   autosize: { type: null as unknown as PropType<boolean | null>, default: false },
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
   invalid: { type: null as unknown as PropType<boolean | null>, default: false },
+  maxRows: { type: null as unknown as PropType<number | null>, default: null },
   readonly: { type: null as unknown as PropType<boolean | null>, default: false },
   required: { type: null as unknown as PropType<boolean | null>, default: false },
   rows: { type: null as unknown as PropType<number | null>, default: 4 },
@@ -86,6 +94,7 @@ const acceptedProps: Record<string, unknown> = {
   autosize: false,
   disabled: false,
   invalid: false,
+  maxRows: null,
   readonly: false,
   required: false,
   rows: 4,
@@ -114,6 +123,13 @@ const checkedProps = computed(() => ({
     'invalid',
     acceptedProps,
   ) as boolean,
+  maxRows: checkedProp<number>(
+    props['maxRows'],
+    { kind: 'terminal', name: 'integer' },
+    false,
+    'maxRows',
+    acceptedProps,
+  ),
   readonly: checkedProp<boolean>(
     props['readonly'],
     { kind: 'terminal', name: 'boolean' },
@@ -225,6 +241,8 @@ const hostState = computed(() =>
   [
     checkedProps.value.size && 'size',
     checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
+    checkedProps.value.maxRows && 'maxRows',
+    checkedProps.value.maxRows != null && `maxRows=${checkedProps.value.maxRows}`,
     checkedProps.value.autosize && 'autosize',
   ].filter(Boolean).join(' ')
 )
@@ -246,7 +264,17 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
       ? (incoming[name] ?? incoming[kebab] ?? null)
       : null
   },
-  propNames: ['autosize', 'disabled', 'invalid', 'readonly', 'required', 'rows', 'size', 'value'],
+  propNames: [
+    'autosize',
+    'disabled',
+    'invalid',
+    'maxRows',
+    'readonly',
+    'required',
+    'rows',
+    'size',
+    'value',
+  ],
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
 })
@@ -261,11 +289,12 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
     :required="checkedProps.required ?? undefined"
     :aria-invalid="checkedProps.invalid ?? undefined"
     :rows="checkedProps.rows ?? undefined"
-    :style="{ '--_rows': checkedProps.rows ?? undefined }"
+    :style="{ '--_rows': checkedProps.rows ?? undefined, '--_max-rows': checkedProps.maxRows ?? undefined }"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-autosize="reflectedProp('autosize', 'autosize', checkedProps.autosize, undefined, false)"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-invalid="reflectedProp('invalid', 'invalid', checkedProps.invalid, undefined, false)"
+    :data-max-rows="reflectedProp('maxRows', 'max-rows', checkedProps.maxRows, undefined, false)"
     :data-readonly="reflectedProp('readonly', 'readonly', checkedProps.readonly, undefined, false)"
     :data-required="reflectedProp('required', 'required', checkedProps.required, undefined, false)"
     :data-rows="reflectedProp('rows', 'rows', checkedProps.rows, undefined, false)"
@@ -466,6 +495,12 @@ useComponentHost(() => import('../components/ui-textarea/ui-textarea.js'), {
   font-size: var(--ui-font-size-md);
 }
 
+[data-component~="ui-textarea"][data-ui-textarea-state~="maxRows"] {
+  max-block-size: calc(
+    max(var(--_rows), var(--_max-rows)) * 1lh + var(--_padding-block) + var(--_padding-block) + 2px
+  );
+}
+
 @supports (field-sizing: content) {
   [data-component~="ui-textarea"][data-ui-textarea-state~="autosize"] {
     field-sizing: content;

package/vue/chunks/UiBadge.js

@@ -9,7 +9,11 @@ var _hoisted_1 = [
 	"data-variant",
 	"data-ui-badge-state"
 ];
-var _hoisted_2 = { class: "label" };
+var _hoisted_2 = {
+	class: "icon",
+	"aria-hidden": "true"
+};
+var _hoisted_3 = { class: "label" };
 //#endregion
 //#region .build/vue/UiBadge.vue
 var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -163,12 +167,12 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 				"data-tone": reflectedProp("tone", "tone", checkedProps.value.tone, void 0, false),
 				"data-variant": reflectedProp("variant", "variant", checkedProps.value.variant, void 0, false),
 				"data-ui-badge-state": hostState.value || void 0
-			}), [createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)])], 16, _hoisted_1)), [[unref(vPropValidity), {
+			}), [createElementVNode("span", _hoisted_2, [renderSlot(_ctx.$slots, "icon")]), createElementVNode("span", _hoisted_3, [renderSlot(_ctx.$slots, "default")])], 16, _hoisted_1)), [[unref(vPropValidity), {
 				contract: propValidityContract,
 				values: { ...props }
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-b1009c5d"]]);
+}), [["__scopeId", "data-v-5065fda2"]]);
 //#endregion
 export { UiBadge_default as t };

package/vue/chunks/UiButton.js

@@ -755,6 +755,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-5c174bca"]]);
+}), [["__scopeId", "data-v-7c2bc2b4"]]);
 //#endregion
 export { UiButton_default as t };

package/vue/chunks/UiCard.js

@@ -119,8 +119,15 @@ var UiCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				},
 				required: false,
 				target: { attribute: "tone" },
-				description: "danger adds a soft danger surface and a strong leading edge for consequential content.",
-				values: ["neutral", "danger"],
+				description: "accent, info, success and warning add a quiet semantic surface. danger retains its strong leading edge for consequential content. Tone never changes child\n      controls.",
+				values: [
+					"neutral",
+					"accent",
+					"info",
+					"success",
+					"warning",
+					"danger"
+				],
 				default: "neutral"
 			},
 			variant: {
@@ -267,6 +274,6 @@ var UiCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-fa2ae386"]]);
+}), [["__scopeId", "data-v-c589f774"]]);
 //#endregion
 export { UiCard_default as t };