@threadlabs/looma 0.25.4 → 0.25.5

package/vue/UiCluster.d.ts

@@ -8,6 +8,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"start" | "center" | "end" | "stretch" | null>;
         default: null;
     };
+    fixed: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     gap: {
         type: PropType<"xs" | "s" | "m" | "l" | "xl" | null>;
         default: null;
@@ -16,6 +20,14 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"start" | "center" | "end" | "between" | null>;
         default: null;
     };
+    padding: {
+        type: PropType<"none" | "s" | "m" | "l" | null>;
+        default: string;
+    };
+    paddingEnd: {
+        type: PropType<"none" | "s" | "m" | "l" | "xl" | null>;
+        default: string;
+    };
     wrap: {
         type: PropType<"wrap" | "nowrap" | null>;
         default: null;
@@ -25,6 +37,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"start" | "center" | "end" | "stretch" | null>;
         default: null;
     };
+    fixed: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     gap: {
         type: PropType<"xs" | "s" | "m" | "l" | "xl" | null>;
         default: null;
@@ -33,15 +49,26 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"start" | "center" | "end" | "between" | null>;
         default: null;
     };
+    padding: {
+        type: PropType<"none" | "s" | "m" | "l" | null>;
+        default: string;
+    };
+    paddingEnd: {
+        type: PropType<"none" | "s" | "m" | "l" | "xl" | null>;
+        default: string;
+    };
     wrap: {
         type: PropType<"wrap" | "nowrap" | null>;
         default: null;
     };
 }>> & Readonly<{}>, {
     align: "center" | "start" | "stretch" | "end" | null;
+    padding: "s" | "none" | "m" | "l" | null;
+    fixed: boolean | null;
     gap: "s" | "xs" | "m" | "l" | "xl" | null;
     justify: "center" | "start" | "end" | "between" | null;
     wrap: "wrap" | "nowrap" | null;
+    paddingEnd: "s" | "none" | "m" | "l" | "xl" | 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/UiCluster.vue

@@ -16,6 +16,13 @@ const propValidityContract = {
         'How items line up within each row: center (the default) aligns their middles, start their tops, end their bottoms, and stretch makes every item as tall as\n      its row.',
       values: ['start', 'center', 'end', 'stretch'],
     },
+    fixed: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'fixed' },
+      description: 'Keeps this group at its content size inside a flex layout.',
+      default: false,
+    },
     gap: {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
@@ -32,6 +39,23 @@ const propValidityContract = {
         'Where items sit along each row: start (the default), center, end, or between, which pushes the first and last items to the ends of the row and spreads the\n      spare space between them, as for a title with its actions.',
       values: ['start', 'center', 'end', 'between'],
     },
+    padding: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'padding' },
+      description: 'Optional internal space for an action group, using the shared spacing scale.',
+      values: ['none', 's', 'm', 'l'],
+      default: 'none',
+    },
+    paddingEnd: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'paddingend' },
+      description:
+        'Optional extra space at the inline end, such as clearance beside another control. xl is 4rem.',
+      values: ['none', 's', 'm', 'l', 'xl'],
+      default: 'none',
+    },
     wrap: {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
@@ -47,14 +71,28 @@ const props = defineProps({
     type: null as unknown as PropType<'start' | 'center' | 'end' | 'stretch' | null>,
     default: null,
   },
+  fixed: { type: null as unknown as PropType<boolean | null>, default: false },
   gap: { type: null as unknown as PropType<'xs' | 's' | 'm' | 'l' | 'xl' | null>, default: null },
   justify: {
     type: null as unknown as PropType<'start' | 'center' | 'end' | 'between' | null>,
     default: null,
   },
+  padding: { type: null as unknown as PropType<'none' | 's' | 'm' | 'l' | null>, default: 'none' },
+  paddingEnd: {
+    type: null as unknown as PropType<'none' | 's' | 'm' | 'l' | 'xl' | null>,
+    default: 'none',
+  },
   wrap: { type: null as unknown as PropType<'wrap' | 'nowrap' | null>, default: null },
 })
-const acceptedProps: Record<string, unknown> = { align: null, gap: null, justify: null, wrap: null }
+const acceptedProps: Record<string, unknown> = {
+  align: null,
+  fixed: false,
+  gap: null,
+  justify: null,
+  padding: 'none',
+  paddingEnd: 'none',
+  wrap: null,
+}
 const checkedProps = computed(() => ({
   align: checkedProp<'start' | 'center' | 'end' | 'stretch'>(
     props['align'],
@@ -63,6 +101,13 @@ const checkedProps = computed(() => ({
     'align',
     acceptedProps,
   ),
+  fixed: checkedProp<boolean>(
+    props['fixed'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'fixed',
+    acceptedProps,
+  ) as boolean,
   gap: checkedProp<'xs' | 's' | 'm' | 'l' | 'xl'>(
     props['gap'],
     { kind: 'terminal', name: 'keyword' },
@@ -77,6 +122,20 @@ const checkedProps = computed(() => ({
     'justify',
     acceptedProps,
   ),
+  padding: checkedProp<'none' | 's' | 'm' | 'l'>(
+    props['padding'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'padding',
+    acceptedProps,
+  ) as 'none' | 's' | 'm' | 'l',
+  paddingEnd: checkedProp<'none' | 's' | 'm' | 'l' | 'xl'>(
+    props['paddingEnd'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'paddingEnd',
+    acceptedProps,
+  ) as 'none' | 's' | 'm' | 'l' | 'xl',
   wrap: checkedProp<'wrap' | 'nowrap'>(
     props['wrap'],
     { kind: 'terminal', name: 'keyword' },
@@ -143,6 +202,13 @@ if (
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
+    checkedProps.value.fixed && 'fixed',
+    checkedProps.value.padding && 'padding',
+    checkedProps.value.padding != null
+    && `padding=${encodeURIComponent(checkedProps.value.padding)}`,
+    checkedProps.value.paddingEnd && 'paddingEnd',
+    checkedProps.value.paddingEnd != null
+    && `paddingEnd=${encodeURIComponent(checkedProps.value.paddingEnd)}`,
     checkedProps.value.gap && 'gap',
     checkedProps.value.gap != null && `gap=${encodeURIComponent(checkedProps.value.gap)}`,
     checkedProps.value.align && 'align',
@@ -162,8 +228,11 @@ const hostState = computed(() =>
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :data-align="reflectedProp('align', 'align', checkedProps.align, undefined, false)"
+    :data-fixed="reflectedProp('fixed', 'fixed', checkedProps.fixed, undefined, false)"
     :data-gap="reflectedProp('gap', 'gap', checkedProps.gap, undefined, false)"
     :data-justify="reflectedProp('justify', 'justify', checkedProps.justify, undefined, false)"
+    :data-padding="reflectedProp('padding', 'padding', checkedProps.padding, undefined, false)"
+    :data-padding-end="reflectedProp('paddingEnd', 'padding-end', checkedProps.paddingEnd, undefined, false)"
     :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-cluster-state="hostState || undefined"
   >
@@ -189,6 +258,31 @@ const hostState = computed(() =>
   margin: 0;
 }
 
+[data-component~="ui-cluster"][data-ui-cluster-state~="fixed"] {
+  flex: none;
+}
+[data-component~="ui-cluster"][data-ui-cluster-state~="padding=s"] {
+  padding: var(--ui-space-2);
+}
+[data-component~="ui-cluster"][data-ui-cluster-state~="padding=m"] {
+  padding: var(--ui-space-3);
+}
+[data-component~="ui-cluster"][data-ui-cluster-state~="padding=l"] {
+  padding: var(--ui-space-4);
+}
+[data-component~="ui-cluster"][data-ui-cluster-state~="paddingEnd=s"] {
+  padding-inline-end: var(--ui-space-2);
+}
+[data-component~="ui-cluster"][data-ui-cluster-state~="paddingEnd=m"] {
+  padding-inline-end: var(--ui-space-3);
+}
+[data-component~="ui-cluster"][data-ui-cluster-state~="paddingEnd=l"] {
+  padding-inline-end: var(--ui-space-4);
+}
+[data-component~="ui-cluster"][data-ui-cluster-state~="paddingEnd=xl"] {
+  padding-inline-end: calc(var(--ui-space-4) * 4);
+}
+
 [data-component~="ui-cluster"][data-ui-cluster-state~="gap=xs"] {
   --_layout-gap: var(--ui-space-2);
 }

package/vue/UiEditorSurface.d.ts

@@ -0,0 +1,26 @@
+import type { PropType } from 'vue';
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    density: {
+        type: PropType<"comfortable" | "compact" | null>;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    density: {
+        type: PropType<"comfortable" | "compact" | null>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    density: "comfortable" | "compact" | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/vue/UiEditorSurface.js

@@ -0,0 +1,2 @@
+import { t as UiEditorSurface_default } from "./chunks/UiEditorSurface.js";
+export { UiEditorSurface_default as default };

package/vue/UiEditorSurface.vue

@@ -0,0 +1,129 @@
+<!-- Generated by HTML Next 1.0.0-alpha.29 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed, getCurrentInstance, watchSyncEffect } from 'vue'
+import type { PropType } from 'vue'
+import { checkedProp, vPropValidity } from './props'
+
+defineOptions({ inheritAttrs: false })
+
+const propValidityContract = {
+  props: {
+    density: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'density' },
+      description:
+        'The document canvas. comfortable preserves the editor\'s normal room and mobile toolbar clearance. compact fits a read-only excerpt to its content without\n      outer padding.',
+      values: ['comfortable', 'compact'],
+      default: 'comfortable',
+    },
+  },
+} as const
+const props = defineProps({
+  density: {
+    type: null as unknown as PropType<'comfortable' | 'compact' | null>,
+    default: 'comfortable',
+  },
+})
+const acceptedProps: Record<string, unknown> = { density: 'comfortable' }
+const checkedProps = computed(() => ({
+  density: checkedProp<'comfortable' | 'compact'>(
+    props['density'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'density',
+    acceptedProps,
+  ) as 'comfortable' | 'compact',
+}))
+void checkedProps.value
+watchSyncEffect(() => {
+  void checkedProps.value
+})
+function nativeAttrs(attrs: Record<string, unknown>): Record<string, unknown> {
+  const names = Object.keys(attrs)
+  if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs
+  return Object.fromEntries(names.map((name) => [
+    Object.hasOwn(Object.prototype, name)
+      ? name === '__proto__' ? '__Proto__' : name[0]!.toUpperCase() + name.slice(1)
+      : name,
+    attrs[name],
+  ]))
+}
+const componentInstance = getCurrentInstance()
+function reflectedProp(
+  name: string,
+  kebab: string,
+  value: unknown,
+  fallback: string | undefined,
+  bound: boolean,
+  separator?: string,
+): string | undefined {
+  const incoming = componentInstance?.vnode.props
+  if (
+    !bound
+    && (incoming === null || incoming === undefined
+      || (!Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab)))
+  ) return fallback
+  if (value === null || value === undefined) return undefined
+  return Array.isArray(value) && separator !== undefined
+    ? value.join(separator)
+    : typeof value === 'object'
+    ? JSON.stringify(value)
+    : String(value)
+}
+const hydrationInstance = getCurrentInstance()
+
+const hydrationNode = hydrationInstance?.vnode.el
+if (
+  typeof window !== 'undefined' && hydrationNode != null
+  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('div'))
+) {
+  throw Object.assign(
+    new Error('HR005: Server markup for <ui-editor-surface> has an incompatible root.'),
+    {
+      name: 'HtmlDiagnosticError',
+      diagnostic: Object.freeze({
+        code: 'HR005',
+        message: 'Server markup for <ui-editor-surface> has an incompatible root.',
+      }),
+    },
+  )
+}
+
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    checkedProps.value.density && 'density',
+    checkedProps.value.density != null
+    && `density=${encodeURIComponent(checkedProps.value.density)}`,
+  ].filter(Boolean).join(' ')
+)
+</script>
+
+<template>
+  <div
+    data-component="ui-editor-surface"
+    v-bind="nativeAttrs($attrs)"
+    v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
+    :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
+    :data-ui-editor-surface-state="hostState || undefined"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+[data-component~="ui-editor-surface"] {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+}
+/* The document renderer consumes these inherited surface settings. They do not style controls. */
+[data-component~="ui-editor-surface"][data-ui-editor-surface-state~="density=compact"] {
+  --_ui-editor-content-min-height: 0px;
+  --_ui-editor-content-padding-block: 0px;
+  --_ui-editor-content-padding-inline: 0px;
+  --_ui-editor-mobile-bottom-space: 0px;
+}
+</style>

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;
 }