@threadlabs/looma 0.25.4 → 0.25.6

package/vanilla/UiTextarea.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-textarea/ui-textarea.js";
 import "../styles/ui-textarea.css";
 
-const definition = {...{"contract":{"tag":"ui-textarea","props":{"autosize":{"type":"boolean","required":false,"target":{"attribute":"autosize"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"invalid":{"type":"boolean","required":false,"target":{"attribute":"aria-invalid"},"default":false},"readonly":{"type":"boolean","required":false,"target":{"attribute":"readonly"},"default":false},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"rows":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"rows"},"default":4},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["sm","md","lg"],"required":false,"target":{"attribute":"size"},"default":"md"},"value":{"type":"string","required":false,"target":{"attribute":"value"}}}},"template":{"kind":"element","name":"textarea","attributes":[{"kind":"attribute","name":"value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"readonly","expression":"readonly","expressionPlan":{"source":"readonly","ast":{"kind":"id","name":"readonly"},"dependencies":["readonly"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"aria-invalid","expression":"invalid","expressionPlan":{"source":"invalid","ast":{"kind":"id","name":"invalid"},"dependencies":["invalid"]}},{"kind":"attribute","name":"rows","expression":"rows","expressionPlan":{"source":"rows","ast":{"kind":"id","name":"rows"},"dependencies":["rows"]}},{"kind":"attribute","name":"--_rows","expression":"rows","expressionPlan":{"source":"rows","ast":{"kind":"id","name":"rows"},"dependencies":["rows"]},"target":"style"}],"children":[]},"declarations":[],"root":{"kind":"native","element":"textarea","choices":["textarea"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-textarea","props":{"autosize":{"type":"boolean","required":false,"target":{"attribute":"autosize"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"invalid":{"type":"boolean","required":false,"target":{"attribute":"aria-invalid"},"default":false},"maxRows":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"maxrows"}},"readonly":{"type":"boolean","required":false,"target":{"attribute":"readonly"},"default":false},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"rows":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"rows"},"default":4},"size":{"type":{"kind":"terminal","name":"keyword"},"values":["sm","md","lg"],"required":false,"target":{"attribute":"size"},"default":"md"},"value":{"type":"string","required":false,"target":{"attribute":"value"}}}},"template":{"kind":"element","name":"textarea","attributes":[{"kind":"attribute","name":"value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"readonly","expression":"readonly","expressionPlan":{"source":"readonly","ast":{"kind":"id","name":"readonly"},"dependencies":["readonly"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"aria-invalid","expression":"invalid","expressionPlan":{"source":"invalid","ast":{"kind":"id","name":"invalid"},"dependencies":["invalid"]}},{"kind":"attribute","name":"rows","expression":"rows","expressionPlan":{"source":"rows","ast":{"kind":"id","name":"rows"},"dependencies":["rows"]}},{"kind":"attribute","name":"--_rows","expression":"rows","expressionPlan":{"source":"rows","ast":{"kind":"id","name":"rows"},"dependencies":["rows"]},"target":"style"},{"kind":"attribute","name":"--_max-rows","expression":"maxRows","expressionPlan":{"source":"maxRows","ast":{"kind":"id","name":"maxRows"},"dependencies":["maxRows"]},"target":"style"}],"children":[]},"declarations":[],"root":{"kind":"native","element":"textarea","choices":["textarea"]}},source:{file:import.meta.url},css:""};
 
 export function createUiTextarea(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -34,6 +34,9 @@ export function createUiTextarea(options = {}) {
   const value6 = componentProps["rows"] === undefined ? 4 : componentProps["rows"];
   if (value6 === null || value6 === undefined) element.removeAttribute("--_rows");
   else element.setAttribute("--_rows", String(value6));
+  const value7 = componentProps["maxRows"] === undefined ? null : componentProps["maxRows"];
+  if (value7 === null || value7 === undefined) element.removeAttribute("--_max-rows");
+  else element.setAttribute("--_max-rows", String(value7));
   element.setAttribute("data-component", "ui-textarea");
   manageComponentLifecycle(element, definition, { props: componentProps, projected,
     controller,

package/vanilla/index.js

@@ -25,6 +25,7 @@ export * from "./UiEditorMentionMenuItem.js";
 export * from "./UiEditorSlashMenu.js";
 export * from "./UiEditorSlashMenuGroup.js";
 export * from "./UiEditorSlashMenuItem.js";
+export * from "./UiEditorSurface.js";
 export * from "./UiEditorTableContextMenu.js";
 export * from "./UiEditorTableOverlay.js";
 export * from "./UiEditorTableToolbar.js";

package/vue/UiCard.d.ts

@@ -23,7 +23,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
     tone: {
-        type: PropType<"neutral" | "danger" | null>;
+        type: PropType<"neutral" | "accent" | "info" | "success" | "warning" | "danger" | null>;
         default: string;
     };
     variant: {
@@ -44,7 +44,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
     tone: {
-        type: PropType<"neutral" | "danger" | null>;
+        type: PropType<"neutral" | "accent" | "info" | "success" | "warning" | "danger" | null>;
         default: string;
     };
     variant: {
@@ -53,7 +53,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>> & Readonly<{}>, {
     size: "sm" | "md" | "content" | "lg" | null;
-    tone: "neutral" | "danger" | null;
+    tone: "info" | "neutral" | "accent" | "success" | "warning" | "danger" | null;
     variant: "subtle" | "outlined" | "elevated" | null;
     as: "div" | "article" | "aside" | "section" | null;
     padding: "xs" | "sm" | "md" | "lg" | null;

package/vue/UiCard.vue

@@ -41,8 +41,8 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'tone' },
       description:
-        'danger adds a soft danger surface and a strong leading edge for consequential content.',
-      values: ['neutral', 'danger'],
+        '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: {
@@ -66,7 +66,12 @@ const props = defineProps({
     type: null as unknown as PropType<'content' | 'sm' | 'md' | 'lg' | null>,
     default: 'content',
   },
-  tone: { type: null as unknown as PropType<'neutral' | 'danger' | null>, default: 'neutral' },
+  tone: {
+    type: null as unknown as PropType<
+      'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger' | null
+    >,
+    default: 'neutral',
+  },
   variant: {
     type: null as unknown as PropType<'outlined' | 'subtle' | 'elevated' | null>,
     default: 'outlined',
@@ -101,13 +106,13 @@ const checkedProps = computed(() => ({
     'size',
     acceptedProps,
   ) as 'content' | 'sm' | 'md' | 'lg',
-  tone: checkedProp<'neutral' | 'danger'>(
+  tone: checkedProp<'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger'>(
     props['tone'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'tone',
     acceptedProps,
-  ) as 'neutral' | 'danger',
+  ) as 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger',
   variant: checkedProp<'outlined' | 'subtle' | 'elevated'>(
     props['variant'],
     { kind: 'terminal', name: 'keyword' },
@@ -295,6 +300,30 @@ const hostState = computed(() =>
   box-shadow: var(--ui-shadow-lg);
 }
 
+[data-component~="ui-card"][data-ui-card-state~="tone=accent"] {
+  border-color: color-mix(in srgb, var(--ui-accent) 25%, var(--ui-border-default));
+  background: color-mix(in srgb, var(--ui-accent) 6%, var(--ui-surface-default));
+}
+
+[data-component~="ui-card"][data-ui-card-state~="tone=info"] {
+  border-color: color-mix(in srgb, var(--ui-info) 25%, var(--ui-border-default));
+  background: color-mix(in srgb, var(--ui-info) 6%, var(--ui-surface-default));
+}
+
+[data-component~="ui-card"][data-ui-card-state~="tone=success"] {
+  border-color: color-mix(in srgb, var(--ui-success) 25%, var(--ui-border-default));
+  background: color-mix(in srgb, var(--ui-success) 6%, var(--ui-surface-default));
+}
+
+[data-component~="ui-card"][data-ui-card-state~="tone=warning"] {
+  border-color: color-mix(in srgb, var(--ui-warning) 25%, var(--ui-border-default));
+  background: color-mix(in srgb, var(--ui-warning) 6%, var(--ui-surface-default));
+}
+
+[data-component~="ui-card"][data-ui-card-state~="variant=subtle"]:is([data-ui-card-state~="tone=accent"], [data-ui-card-state~="tone=info"], [data-ui-card-state~="tone=success"], [data-ui-card-state~="tone=warning"]) {
+  border-color: transparent;
+}
+
 [data-component~="ui-card"][data-ui-card-state~="tone=danger"] {
   border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
   border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);

package/vue/UiCheckbox.d.ts

@@ -18,6 +18,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
         type: PropType<boolean | null>;
         default: boolean;
     };
+    label: {
+        type: PropType<string | null>;
+        default: string;
+    };
     name: {
         type: PropType<string | null>;
         default: string;
@@ -59,6 +63,10 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
         type: PropType<boolean | null>;
         default: boolean;
     };
+    label: {
+        type: PropType<string | null>;
+        default: string;
+    };
     name: {
         type: PropType<string | null>;
         default: string;
@@ -84,6 +92,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<import
     "onUpdate:checked"?: ((value: boolean) => any) | undefined;
     "onUpdate:value"?: ((value: string) => any) | undefined;
 }>, {
+    label: string | null;
     name: string | null;
     value: string | null;
     invalid: boolean | null;

package/vue/UiCheckbox.vue

@@ -53,6 +53,14 @@ const propValidityContract = {
         'Exposes an externally validated error and styles the checkbox with the field danger colour.',
       default: false,
     },
+    label: {
+      type: { kind: 'terminal', name: 'string' },
+      required: false,
+      target: { attribute: 'aria-label' },
+      description:
+        'An accessible name for a checkbox without a visible label slot. It names the native input.',
+      default: '',
+    },
     name: {
       type: { kind: 'terminal', name: 'string' },
       required: false,
@@ -93,6 +101,7 @@ const props = defineProps({
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
   indeterminate: { type: null as unknown as PropType<boolean | null>, default: false },
   invalid: { type: null as unknown as PropType<boolean | null>, default: false },
+  label: { type: null as unknown as PropType<string | null>, default: '' },
   name: { type: null as unknown as PropType<string | null>, default: '' },
   required: { type: null as unknown as PropType<boolean | null>, default: false },
   size: { type: null as unknown as PropType<'sm' | 'md' | 'lg' | null>, default: 'md' },
@@ -103,6 +112,7 @@ const acceptedProps: Record<string, unknown> = {
   disabled: false,
   indeterminate: false,
   invalid: false,
+  label: '',
   name: '',
   required: false,
   size: 'md',
@@ -137,6 +147,13 @@ const checkedProps = computed(() => ({
     'invalid',
     acceptedProps,
   ) as boolean,
+  label: checkedProp<string>(
+    props['label'],
+    { kind: 'terminal', name: 'string' },
+    false,
+    'label',
+    acceptedProps,
+  ) as string,
   name: checkedProp<string>(
     props['name'],
     { kind: 'terminal', name: 'string' },
@@ -302,6 +319,7 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
     'disabled',
     'indeterminate',
     'invalid',
+    'label',
     'name',
     'required',
     'size',
@@ -323,6 +341,7 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-indeterminate="reflectedProp('indeterminate', 'indeterminate', checkedProps.indeterminate, undefined, false)"
     :data-invalid="reflectedProp('invalid', 'invalid', checkedProps.invalid, undefined, false)"
+    :data-label="reflectedProp('label', 'label', checkedProps.label, undefined, false)"
     :data-name="reflectedProp('name', 'name', checkedProps.name, undefined, false)"
     :data-required="reflectedProp('required', 'required', checkedProps.required, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
@@ -338,6 +357,7 @@ useComponentHost(() => import('../components/ui-checkbox/ui-checkbox.js'), {
         nativeProperty: true,
         defaultChecked: false,
       }"
+      :aria-label="checkedProps.label ?? undefined"
       :indeterminate.prop="checkedProps.indeterminate as any"
       :disabled="checkedProps.disabled ?? undefined"
       :aria-invalid="checkedProps.invalid ?? undefined"

package/vue/UiCluster.d.ts

@@ -5,9 +5,13 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     align: {
-        type: PropType<"start" | "center" | "end" | "stretch" | null>;
+        type: PropType<"start" | "center" | "end" | "stretch" | "baseline" | null>;
         default: null;
     };
+    fixed: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     gap: {
         type: PropType<"xs" | "s" | "m" | "l" | "xl" | null>;
         default: null;
@@ -16,15 +20,27 @@ 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;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     align: {
-        type: PropType<"start" | "center" | "end" | "stretch" | null>;
+        type: PropType<"start" | "center" | "end" | "stretch" | "baseline" | 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;
+    align: "center" | "start" | "stretch" | "end" | "baseline" | 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

@@ -13,8 +13,15 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'align' },
       description:
-        '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'],
+        '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. baseline aligns the first text baselines, including multiline columns.',
+      values: ['start', 'center', 'end', 'stretch', 'baseline'],
+    },
+    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' },
@@ -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,
@@ -44,25 +68,46 @@ const propValidityContract = {
 } as const
 const props = defineProps({
   align: {
-    type: null as unknown as PropType<'start' | 'center' | 'end' | 'stretch' | null>,
+    type: null as unknown as PropType<'start' | 'center' | 'end' | 'stretch' | 'baseline' | 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'>(
+  align: checkedProp<'start' | 'center' | 'end' | 'stretch' | 'baseline'>(
     props['align'],
     { kind: 'terminal', name: 'keyword' },
     false,
     '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);
 }
@@ -210,6 +304,9 @@ const hostState = computed(() =>
 [data-component~="ui-cluster"][data-ui-cluster-state~="align=end"] {
   align-items: flex-end;
 }
+[data-component~="ui-cluster"][data-ui-cluster-state~="align=baseline"] {
+  align-items: baseline;
+}
 [data-component~="ui-cluster"][data-ui-cluster-state~="align=stretch"] {
   align-items: stretch;
 }

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>