@threadlabs/looma 0.22.13 → 0.22.14

package/vue/UiScrollArea.d.ts

@@ -8,12 +8,21 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"vertical" | "horizontal" | null>;
         default: string;
     };
+    size: {
+        type: PropType<"content" | "sm" | "md" | "lg" | null>;
+        default: string;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     orientation: {
         type: PropType<"vertical" | "horizontal" | null>;
         default: string;
     };
+    size: {
+        type: PropType<"content" | "sm" | "md" | "lg" | null>;
+        default: string;
+    };
 }>> & Readonly<{}>, {
+    size: "sm" | "md" | "content" | "lg" | null;
     orientation: "vertical" | "horizontal" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/vue/UiScrollArea.vue

@@ -18,6 +18,15 @@ const propValidityContract = {
       values: ['vertical', 'horizontal'],
       default: 'vertical',
     },
+    size: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'size' },
+      description:
+        'Optional height preset. content keeps intrinsic sizing; sm fits three compact 3.125rem result rows, md is 20rem, and lg is 30rem.',
+      values: ['content', 'sm', 'md', 'lg'],
+      default: 'content',
+    },
   },
 } as const
 const props = defineProps({
@@ -25,8 +34,12 @@ const props = defineProps({
     type: null as unknown as PropType<'vertical' | 'horizontal' | null>,
     default: 'vertical',
   },
+  size: {
+    type: null as unknown as PropType<'content' | 'sm' | 'md' | 'lg' | null>,
+    default: 'content',
+  },
 })
-const acceptedProps: Record<string, unknown> = { orientation: 'vertical' }
+const acceptedProps: Record<string, unknown> = { orientation: 'vertical', size: 'content' }
 const checkedProps = computed(() => ({
   orientation: checkedProp<'vertical' | 'horizontal'>(
     props['orientation'],
@@ -35,6 +48,13 @@ const checkedProps = computed(() => ({
     'orientation',
     acceptedProps,
   ) as 'vertical' | 'horizontal',
+  size: checkedProp<'content' | 'sm' | 'md' | 'lg'>(
+    props['size'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'size',
+    acceptedProps,
+  ) as 'content' | 'sm' | 'md' | 'lg',
 }))
 void checkedProps.value
 watchSyncEffect(() => {
@@ -99,6 +119,8 @@ const hostState = computed(() =>
     checkedProps.value.orientation && 'orientation',
     checkedProps.value.orientation != null
     && `orientation=${encodeURIComponent(checkedProps.value.orientation)}`,
+    checkedProps.value.size && 'size',
+    checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
   ].filter(Boolean).join(' ')
 )
 
@@ -119,7 +141,7 @@ useComponentHost(() => import('../components/ui-scroll-area/ui-scroll-area.js'),
       ? (incoming[name] ?? incoming[kebab] ?? null)
       : null
   },
-  propNames: ['orientation'],
+  propNames: ['orientation', 'size'],
   propValidity: (name: string) =>
     propValidityState({ contract: propValidityContract, values: { ...props } }, name),
   refs: { content: contentElement },
@@ -132,6 +154,7 @@ useComponentHost(() => import('../components/ui-scroll-area/ui-scroll-area.js'),
     v-bind="nativeAttrs($attrs)"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :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"
     ref="root"
   >
@@ -177,6 +200,16 @@ useComponentHost(() => import('../components/ui-scroll-area/ui-scroll-area.js'),
   --_ui-scroll-fade-inline: to left;
 }
 
+[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="size=sm"] {
+  max-block-size: 9.375rem;
+}
+[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="size=md"] {
+  max-block-size: 20rem;
+}
+[data-component~="ui-scroll-area"][data-ui-scroll-area-state~="size=lg"] {
+  max-block-size: 30rem;
+}
+
 /* A component that sets its display still honours the hidden attribute on its root. */
 [data-component~="ui-scroll-area"][hidden] {
   display: none;

package/vue/UiSearchResultRow.d.ts

@@ -12,6 +12,10 @@ type __VLS_Slots = {} & {
     trailing?: (props: typeof __VLS_9) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    density: {
+        type: PropType<"comfortable" | "compact" | null>;
+        default: string;
+    };
     disabled: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -21,6 +25,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: boolean;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    density: {
+        type: PropType<"comfortable" | "compact" | null>;
+        default: string;
+    };
     disabled: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -32,6 +40,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>> & Readonly<{}>, {
     selected: boolean | null;
     disabled: boolean | null;
+    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;

package/vue/UiSearchResultRow.vue

@@ -8,6 +8,15 @@ defineOptions({ inheritAttrs: false })
 
 const propValidityContract = {
   props: {
+    density: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'density' },
+      description:
+        'Compact keeps a title and location together in a 3.125rem row for small destination pickers; comfortable preserves the existing rich result spacing.',
+      values: ['comfortable', 'compact'],
+      default: 'comfortable',
+    },
     disabled: {
       type: { kind: 'terminal', name: 'boolean' },
       required: false,
@@ -27,11 +36,26 @@ const propValidityContract = {
   },
 } as const
 const props = defineProps({
+  density: {
+    type: null as unknown as PropType<'comfortable' | 'compact' | null>,
+    default: 'comfortable',
+  },
   disabled: { type: null as unknown as PropType<boolean | null>, default: false },
   selected: { type: null as unknown as PropType<boolean | null>, default: false },
 })
-const acceptedProps: Record<string, unknown> = { disabled: false, selected: false }
+const acceptedProps: Record<string, unknown> = {
+  density: 'comfortable',
+  disabled: false,
+  selected: false,
+}
 const checkedProps = computed(() => ({
+  density: checkedProp<'comfortable' | 'compact'>(
+    props['density'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'density',
+    acceptedProps,
+  ) as 'comfortable' | 'compact',
   disabled: checkedProp<boolean>(
     props['disabled'],
     { kind: 'terminal', name: 'boolean' },
@@ -105,6 +129,9 @@ if (
 /** The values the styles' :host-state() rules test. */
 const hostState = computed(() =>
   [
+    checkedProps.value.density && 'density',
+    checkedProps.value.density != null
+    && `density=${encodeURIComponent(checkedProps.value.density)}`,
     checkedProps.value.selected && 'selected',
   ].filter(Boolean).join(' ')
 )
@@ -118,6 +145,7 @@ const hostState = computed(() =>
     :disabled="checkedProps.disabled ?? undefined"
     :aria-current="checkedProps.selected ?? undefined"
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
+    :data-density="reflectedProp('density', 'density', checkedProps.density, undefined, false)"
     :data-disabled="reflectedProp('disabled', 'disabled', checkedProps.disabled, undefined, false)"
     :data-selected="reflectedProp('selected', 'selected', checkedProps.selected, undefined, false)"
     :data-ui-search-result-row-state="hostState || undefined"
@@ -184,6 +212,15 @@ const hostState = computed(() =>
   transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
 
+[data-component~="ui-search-result-row"][data-ui-search-result-row-state~="density=compact"] {
+  min-block-size: var(--ui-search-result-row-min-height, 3.125rem);
+  padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-1));
+  padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-2));
+  gap: var(--ui-search-result-row-gap, var(--ui-space-2));
+  align-items: center;
+  font-family: var(--ui-font-family-sans, sans-serif);
+}
+
 [data-component~="ui-search-result-row"]:hover:enabled {
   background: var(
     --ui-search-result-row-hover-surface,

package/vue/UiStack.d.ts

@@ -9,7 +9,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: null;
     };
     gap: {
-        type: PropType<"xs" | "s" | "m" | "l" | "xl" | null>;
+        type: PropType<"none" | "xs" | "s" | "m" | "l" | "xl" | null>;
         default: null;
     };
     justify: {
@@ -22,7 +22,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: null;
     };
     gap: {
-        type: PropType<"xs" | "s" | "m" | "l" | "xl" | null>;
+        type: PropType<"none" | "xs" | "s" | "m" | "l" | "xl" | null>;
         default: null;
     };
     justify: {
@@ -31,7 +31,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     };
 }>> & Readonly<{}>, {
     align: "center" | "start" | "stretch" | "end" | null;
-    gap: "s" | "xs" | "m" | "l" | "xl" | null;
+    gap: "s" | "none" | "xs" | "m" | "l" | "xl" | null;
     justify: "center" | "start" | "end" | "between" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/vue/UiStack.vue

@@ -21,8 +21,8 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'gap' },
       description:
-        'Space between items, on the spacing scale: xs is 0.5rem, s 0.75rem, m 1rem (also the default), l 1.5rem, and xl 2rem. The --ui-stack-gap custom property,\n      set on the stack itself, overrides it; set on an ancestor, it does nothing.',
-      values: ['xs', 's', 'm', 'l', 'xl'],
+        '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'],
     },
     justify: {
       type: { kind: 'terminal', name: 'keyword' },
@@ -39,7 +39,10 @@ const props = defineProps({
     type: null as unknown as PropType<'start' | 'center' | 'end' | 'stretch' | null>,
     default: null,
   },
-  gap: { type: null as unknown as PropType<'xs' | 's' | 'm' | 'l' | 'xl' | null>, default: null },
+  gap: {
+    type: null as unknown as PropType<'none' | 'xs' | 's' | 'm' | 'l' | 'xl' | null>,
+    default: null,
+  },
   justify: {
     type: null as unknown as PropType<'start' | 'center' | 'end' | 'between' | null>,
     default: null,
@@ -54,7 +57,7 @@ const checkedProps = computed(() => ({
     'align',
     acceptedProps,
   ),
-  gap: checkedProp<'xs' | 's' | 'm' | 'l' | 'xl'>(
+  gap: checkedProp<'none' | 'xs' | 's' | 'm' | 'l' | 'xl'>(
     props['gap'],
     { kind: 'terminal', name: 'keyword' },
     false,
@@ -167,6 +170,9 @@ const hostState = computed(() =>
   margin: 0;
 }
 
+[data-component~="ui-stack"][data-ui-stack-state~="gap=none"] {
+  --_layout-gap: 0px;
+}
 [data-component~="ui-stack"][data-ui-stack-state~="gap=xs"] {
   --_layout-gap: var(--ui-space-2);
 }

package/vue/UiText.d.ts

@@ -32,6 +32,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"p" | "span" | "div" | "small" | "strong" | "label" | "h2" | "h3" | "h4" | "h5" | "h6" | null>;
         default: string;
     };
+    font: {
+        type: PropType<"inherit" | "sans" | null>;
+        default: string;
+    };
     size: {
         type: PropType<"inherit" | "xs" | "sm" | "md" | "lg" | null>;
         default: string;
@@ -52,6 +56,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"inherit" | "normal" | "medium" | "semibold" | null>;
         default: string;
     };
+    wrap: {
+        type: PropType<"normal" | "anywhere" | null>;
+        default: string;
+    };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     align: {
         type: PropType<"start" | "center" | null>;
@@ -61,6 +69,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"p" | "span" | "div" | "small" | "strong" | "label" | "h2" | "h3" | "h4" | "h5" | "h6" | null>;
         default: string;
     };
+    font: {
+        type: PropType<"inherit" | "sans" | null>;
+        default: string;
+    };
     size: {
         type: PropType<"inherit" | "xs" | "sm" | "md" | "lg" | null>;
         default: string;
@@ -81,12 +93,18 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"inherit" | "normal" | "medium" | "semibold" | null>;
         default: string;
     };
+    wrap: {
+        type: PropType<"normal" | "anywhere" | null>;
+        default: string;
+    };
 }>> & Readonly<{}>, {
+    font: "inherit" | "sans" | null;
     size: "inherit" | "xs" | "sm" | "md" | "lg" | null;
     tone: "secondary" | "default" | "info" | "accent" | "success" | "warning" | "danger" | "muted" | null;
     variant: "code" | "body" | "eyebrow" | null;
     align: "center" | "start" | null;
     as: "div" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "p" | "small" | "span" | "strong" | null;
+    wrap: "normal" | "anywhere" | null;
     truncate: boolean | null;
     weight: "inherit" | "normal" | "medium" | "semibold" | null;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/vue/UiText.vue

@@ -26,6 +26,15 @@ const propValidityContract = {
       values: ['p', 'span', 'div', 'small', 'strong', 'label', 'h2', 'h3', 'h4', 'h5', 'h6'],
       default: 'p',
     },
+    font: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'font' },
+      description:
+        'Use sans for UI text rendered outside its original font context; inherit preserves the surrounding typeface.',
+      values: ['inherit', 'sans'],
+      default: 'inherit',
+    },
     size: {
       type: { kind: 'terminal', name: 'keyword' },
       required: false,
@@ -69,6 +78,15 @@ const propValidityContract = {
       values: ['inherit', 'normal', 'medium', 'semibold'],
       default: 'inherit',
     },
+    wrap: {
+      type: { kind: 'terminal', name: 'keyword' },
+      required: false,
+      target: { attribute: 'wrap' },
+      description:
+        'Use anywhere for unbroken values such as long destinations; ordinary prose keeps its normal wrapping.',
+      values: ['normal', 'anywhere'],
+      default: 'normal',
+    },
   },
 } as const
 const props = defineProps({
@@ -79,6 +97,7 @@ const props = defineProps({
     >,
     default: 'p',
   },
+  font: { type: null as unknown as PropType<'inherit' | 'sans' | null>, default: 'inherit' },
   size: {
     type: null as unknown as PropType<'inherit' | 'xs' | 'sm' | 'md' | 'lg' | null>,
     default: 'inherit',
@@ -106,15 +125,18 @@ const props = defineProps({
     type: null as unknown as PropType<'inherit' | 'normal' | 'medium' | 'semibold' | null>,
     default: 'inherit',
   },
+  wrap: { type: null as unknown as PropType<'normal' | 'anywhere' | null>, default: 'normal' },
 })
 const acceptedProps: Record<string, unknown> = {
   align: 'start',
   as: 'p',
+  font: 'inherit',
   size: 'inherit',
   tone: 'default',
   truncate: false,
   variant: 'body',
   weight: 'inherit',
+  wrap: 'normal',
 }
 const checkedProps = computed(() => ({
   align: checkedProp<'start' | 'center'>(
@@ -138,6 +160,13 @@ const checkedProps = computed(() => ({
     | 'h4'
     | 'h5'
     | 'h6',
+  font: checkedProp<'inherit' | 'sans'>(
+    props['font'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'font',
+    acceptedProps,
+  ) as 'inherit' | 'sans',
   size: checkedProp<'inherit' | 'xs' | 'sm' | 'md' | 'lg'>(
     props['size'],
     { kind: 'terminal', name: 'keyword' },
@@ -177,6 +206,13 @@ const checkedProps = computed(() => ({
     'weight',
     acceptedProps,
   ) as 'inherit' | 'normal' | 'medium' | 'semibold',
+  wrap: checkedProp<'normal' | 'anywhere'>(
+    props['wrap'],
+    { kind: 'terminal', name: 'keyword' },
+    false,
+    'wrap',
+    acceptedProps,
+  ) as 'normal' | 'anywhere',
 }))
 void checkedProps.value
 watchSyncEffect(() => {
@@ -267,6 +303,10 @@ const hostState = computed(() =>
     checkedProps.value.truncate && 'truncate',
     checkedProps.value.align && 'align',
     checkedProps.value.align != null && `align=${encodeURIComponent(checkedProps.value.align)}`,
+    checkedProps.value.font && 'font',
+    checkedProps.value.font != null && `font=${encodeURIComponent(checkedProps.value.font)}`,
+    checkedProps.value.wrap && 'wrap',
+    checkedProps.value.wrap != null && `wrap=${encodeURIComponent(checkedProps.value.wrap)}`,
   ].filter(Boolean).join(' ')
 )
 </script>
@@ -279,11 +319,13 @@ const hostState = computed(() =>
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :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-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)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   ><slot /></span>
@@ -294,11 +336,13 @@ const hostState = computed(() =>
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :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-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)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   >
@@ -311,11 +355,13 @@ const hostState = computed(() =>
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :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-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)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   ><slot /></small>
@@ -326,11 +372,13 @@ const hostState = computed(() =>
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :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-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)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   ><slot /></strong>
@@ -341,11 +389,13 @@ const hostState = computed(() =>
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :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-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)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   ><slot /></label>
@@ -356,11 +406,13 @@ const hostState = computed(() =>
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :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-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)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   >
@@ -373,11 +425,13 @@ const hostState = computed(() =>
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :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-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)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   >
@@ -390,11 +444,13 @@ const hostState = computed(() =>
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :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-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)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   >
@@ -407,11 +463,13 @@ const hostState = computed(() =>
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :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-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)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   >
@@ -424,11 +482,13 @@ const hostState = computed(() =>
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :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-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)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   >
@@ -441,11 +501,13 @@ const hostState = computed(() =>
     v-prop-validity="{ contract: propValidityContract, values: { ...props } }"
     :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-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)"
     :data-variant="reflectedProp('variant', 'variant', checkedProps.variant, undefined, false)"
     :data-weight="reflectedProp('weight', 'weight', checkedProps.weight, undefined, false)"
+    :data-wrap="reflectedProp('wrap', 'wrap', checkedProps.wrap, undefined, false)"
     :data-ui-text-state="hostState || undefined"
     ref="@html-next/root"
   >
@@ -551,6 +613,14 @@ const hostState = computed(() =>
   text-align: center;
 }
 
+[data-component~="ui-text"][data-ui-text-state~="font=sans"] {
+  font-family: var(--ui-font-family-sans, sans-serif);
+}
+
+[data-component~="ui-text"][data-ui-text-state~="wrap=anywhere"] {
+  overflow-wrap: anywhere;
+}
+
 /* A component that sets its display still honours the hidden attribute on its root. */
 [data-component~="ui-text"][hidden] {
   display: none;