@threadlabs/looma 0.25.3 → 0.25.5

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/UiBadge.d.ts

@@ -1,7 +1,9 @@
 import type { PropType } from 'vue';
-declare var __VLS_1: {};
+declare var __VLS_1: {}, __VLS_3: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_1) => any;
+    icon?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     shape: {

package/vue/UiBadge.vue

@@ -177,7 +177,8 @@ const hostState = computed(() =>
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-ui-badge-state="hostState || undefined"
-  ><span class="label"><slot /></span></span>
+  ><span class="icon" aria-hidden="true"><slot name="icon" /></span>
+    <span class="label"><slot /></span></span>
 </template>
 
 <style scoped>
@@ -261,6 +262,7 @@ const hostState = computed(() =>
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  gap: var(--ui-space-1);
   box-sizing: border-box;
   min-inline-size: 0;
   max-inline-size: 100%;
@@ -287,8 +289,43 @@ const hostState = computed(() =>
   text-overflow: ellipsis;
 }
 
-/* Trim leading while retaining the font's ascent and descent. A cap-to-baseline box
-   would crop glyphs where the label clips horizontal overflow for ellipsis. */
+.label:empty {
+  display: none;
+}
+
+/* Icon content has its own flex item so label ellipsis never clips its strokes. */
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+}
+
+.icon:empty {
+  display: none;
+}
+
+.icon :slotted(svg) {
+  display: block;
+  inline-size: 1em;
+  block-size: 1em;
+  flex: none;
+}
+
+/* Ordinary icon-plus-text children keep inline ellipsis, with explicit glyph spacing. */
+.label :slotted(svg) {
+  inline-size: 1em;
+  block-size: 1em;
+  vertical-align: middle;
+  margin-inline-end: var(--ui-space-1);
+}
+
+.label:has(svg) {
+  text-box-trim: none;
+}
+
+/* Text-only badges retain their trimmed inline baseline. Icon content needs a flex row;
+   trimming its label separately keeps the glyph centered without changing adjacent lines. */
 @supports (text-box-trim: trim-both) {
   [data-component~="ui-badge"] {
     display: inline-block;
@@ -298,6 +335,15 @@ const hostState = computed(() =>
     text-box-trim: trim-both;
     text-box-edge: text;
   }
+  [data-component~="ui-badge"]:has(.icon:not(:empty)),
+  [data-component~="ui-badge"]:has(.label svg) {
+    display: inline-flex;
+    text-box-trim: none;
+  }
+  [data-component~="ui-badge"]:has(.icon:not(:empty)) .label {
+    text-box-trim: trim-both;
+    text-box-edge: text;
+  }
 }
 
 [data-component~="ui-badge"][data-ui-badge-state~="size=xs"] {
@@ -436,6 +482,14 @@ const hostState = computed(() =>
   justify-content: center;
 }
 
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label :slotted(svg) {
+  margin-inline-end: 0;
+}
+
+[data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label:empty {
+  display: none;
+}
+
 /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
 [data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] {
   position: relative;

package/vue/UiButton.vue

@@ -933,6 +933,7 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  column-gap: var(--ui-space-2);
   vertical-align: middle;
   color: var(--_tone-text);
 }
@@ -982,7 +983,6 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
 .spinner-wrap {
   display: inline-flex;
   flex: none;
-  margin-inline-end: var(--ui-space-2);
   vertical-align: middle;
 }
 

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/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/UiEditorSlashMenuItem.d.ts

@@ -47,8 +47,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>> & Readonly<{}>, {
     value: string | null;
-    disabled: boolean | null;
     icon: string | null;
+    disabled: boolean | null;
     description: string | null;
     keywords: string | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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