@threadlabs/looma 0.26.15 → 0.26.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.26.15",
+  "version": "0.26.16",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-text.css

@@ -38,6 +38,12 @@
       line-height: var(--ui-line-height-relaxed);
     }
 
+    /* Opt in at the text owner; trimming does not inherit from a surrounding layout. */
+    :scope[data-ui-text-state~="trim"] {
+      text-box-trim: trim-both;
+      text-box-edge: cap alphabetic;
+    }
+
     :scope[data-ui-text-state~="tone=secondary"] {
       color: var(--ui-text-secondary);
     }
@@ -91,6 +97,12 @@
       white-space: nowrap;
     }
 
+    /* Trim ends the layout box at the baseline; preserve descending ink while clipping long labels. */
+    :scope[data-ui-text-state~="trim"][data-ui-text-state~="truncate"] {
+      overflow-x: clip;
+      overflow-y: visible;
+    }
+
     :scope[data-ui-text-state~="align=center"] {
       text-align: center;
     }
@@ -115,6 +127,8 @@
 
     /* A heading drops the browser's heading size and weight, so size and weight set it as they set
        any text, and inherit keeps the text around it. */
+
+    /* Opt in at the text owner; trimming does not inherit from a surrounding layout. */
     /* Every status tone uses the text-safe token a subtle badge sets its words in, so text and badges
        in one tone match, and each holds 4.5:1 on sunken surfaces where some base colours fall short. */
 
@@ -127,5 +141,7 @@
       text-underline-offset: 0.18em;
     }
 
+    /* Trim ends the layout box at the baseline; preserve descending ink while clipping long labels. */
+
     /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/vanilla/UiText.d.ts

@@ -12,6 +12,7 @@ export interface UiTextProps {
   grow?: boolean | null;
   size?: "inherit" | "xs" | "sm" | "md" | "lg" | null;
   tone?: "default" | "secondary" | "muted" | "accent" | "danger" | "success" | "info" | "warning" | null;
+  trim?: boolean | null;
   truncate?: boolean | null;
   variant?: "body" | "eyebrow" | "code" | null;
   weight?: "inherit" | "normal" | "medium" | "semibold" | null;

package/vanilla/UiText.js

@@ -26,13 +26,13 @@ const T20 = ["",[],4];
 const T21 = ["",[]];
 let P0, P1, P2, P3, P4, P5, P6, P7, P8, P9, P10, P11, P12, P13, P14, P15, P16, P17, P18, P19, P20, P21;
 const S = { n: [], t: [], f: import.meta.url, g: "ui-text" };
-const A = [["span",{},[],"",[],["data-ui-text-state","data-align","data-as","data-font","data-grow","data-size","data-tone","data-truncate","data-variant","data-weight","data-wrap"]],["div",{},[],"",[],["data-ui-text-state","data-align","data-as","data-font","data-grow","data-size","data-tone","data-truncate","data-variant","data-weight","data-wrap"]],["small",{},[],"",[],["data-ui-text-state","data-align","data-as","data-font","data-grow","data-size","data-tone","data-truncate","data-variant","data-weight","data-wrap"]],["strong",{},[],"",[],["data-ui-text-state","data-align","data-as","data-font","data-grow","data-size","data-tone","data-truncate","data-variant","data-weight","data-wrap"]],["label",{},[],"",[],["data-ui-text-state","data-align","data-as","data-font","data-grow","data-size","data-tone","data-truncate","data-variant","data-weight","data-wrap"]],["h2",{},[],"",[],["data-ui-text-state","data-align","data-as","data-font","data-grow","data-size","data-tone","data-truncate","data-variant","data-weight","data-wrap"]],["h3",{},[],"",[],["data-ui-text-state","data-align","data-as","data-font","data-grow","data-size","data-tone","data-truncate","data-variant","data-weight","data-wrap"]],["h4",{},[],"",[],["data-ui-text-state","data-align","data-as","data-font","data-grow","data-size","data-tone","data-truncate","data-variant","data-weight","data-wrap"]],["h5",{},[],"",[],["data-ui-text-state","data-align","data-as","data-font","data-grow","data-size","data-tone","data-truncate","data-variant","data-weight","data-wrap"]],["h6",{},[],"",[],["data-ui-text-state","data-align","data-as","data-font","data-grow","data-size","data-tone","data-truncate","data-variant","data-weight","data-wrap"]],["p",{},[],"",[],["data-ui-text-state","data-align","data-as","data-font","data-grow","data-size","data-tone","data-truncate","data-variant","data-weight","data-wrap"]]];
+const A = [["span",{},[],"",[],["data-ui-text-state","data-align","data-as","data-font","data-grow","data-size","data-tone","data-trim","data-truncate","data-variant","data-weight","data-wrap"]],["div",{},[],"",[],["data-ui-text-state","data-align","data-as","data-font","data-grow","data-size","data-tone","data-trim","data-truncate","data-variant","data-weight","data-wrap"]],["small",{},[],"",[],["data-ui-text-state","data-align","data-as","data-font","data-grow","data-size","data-tone","data-trim","data-truncate","data-variant","data-weight","data-wrap"]],["strong",{},[],"",[],["data-ui-text-state","data-align","data-as","data-font","data-grow","data-size","data-tone","data-trim","data-truncate","data-variant","data-weight","data-wrap"]],["label",{},[],"",[],["data-ui-text-state","data-align","data-as","data-font","data-grow","data-size","data-tone","data-trim","data-truncate","data-variant","data-weight","data-wrap"]],["h2",{},[],"",[],["data-ui-text-state","data-align","data-as","data-font","data-grow","data-size","data-tone","data-trim","data-truncate","data-variant","data-weight","data-wrap"]],["h3",{},[],"",[],["data-ui-text-state","data-align","data-as","data-font","data-grow","data-size","data-tone","data-trim","data-truncate","data-variant","data-weight","data-wrap"]],["h4",{},[],"",[],["data-ui-text-state","data-align","data-as","data-font","data-grow","data-size","data-tone","data-trim","data-truncate","data-variant","data-weight","data-wrap"]],["h5",{},[],"",[],["data-ui-text-state","data-align","data-as","data-font","data-grow","data-size","data-tone","data-trim","data-truncate","data-variant","data-weight","data-wrap"]],["h6",{},[],"",[],["data-ui-text-state","data-align","data-as","data-font","data-grow","data-size","data-tone","data-trim","data-truncate","data-variant","data-weight","data-wrap"]],["p",{},[],"",[],["data-ui-text-state","data-align","data-as","data-font","data-grow","data-size","data-tone","data-trim","data-truncate","data-variant","data-weight","data-wrap"]]];
 const Q = [[],[],[],[],[],[],[],[],[],[],[]];
-const D = { props: { "align": { "required":false,"values":["start","center"],"default":"start", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "as": { "required":false,"values":["p","span","div","small","strong","label","h2","h3","h4","h5","h6"],"default":"p", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "font": { "required":false,"values":["inherit","sans"],"default":"inherit", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "grow": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "size": { "required":false,"values":["inherit","xs","sm","md","lg"],"default":"inherit", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "tone": { "required":false,"values":["default","secondary","muted","accent","danger","success","info","warning"],"default":"default", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "truncate": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "variant": { "required":false,"values":["body","eyebrow","code"],"default":"body", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "weight": { "required":false,"values":["inherit","normal","medium","semibold"],"default":"inherit", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "wrap": { "required":false,"values":["normal","anywhere"],"default":"normal", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
+const D = { props: { "align": { "required":false,"values":["start","center"],"default":"start", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "as": { "required":false,"values":["p","span","div","small","strong","label","h2","h3","h4","h5","h6"],"default":"p", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "font": { "required":false,"values":["inherit","sans"],"default":"inherit", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "grow": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "size": { "required":false,"values":["inherit","xs","sm","md","lg"],"default":"inherit", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "tone": { "required":false,"values":["default","secondary","muted","accent","danger","success","info","warning"],"default":"default", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "trim": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "truncate": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "variant": { "required":false,"values":["body","eyebrow","code"],"default":"body", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "weight": { "required":false,"values":["inherit","normal","medium","semibold"],"default":"inherit", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "wrap": { "required":false,"values":["normal","anywhere"],"default":"normal", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
 
 export function createUiText(options = {}, html) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
-  const v = [null, null, null, null, null, null, null, null, null, null];
+  const v = [null, null, null, null, null, null, null, null, null, null, null];
   acceptProps(undefined, D, S.n, v, componentProps, [], html);
   let a = ((v[1] === "span") ? 0 : (v[1] === "div") ? 1 : (v[1] === "small") ? 2 : (v[1] === "strong") ? 3 : (v[1] === "label") ? 4 : (v[1] === "h2") ? 5 : (v[1] === "h3") ? 6 : (v[1] === "h4") ? 7 : (v[1] === "h5") ? 8 : (v[1] === "h6") ? 9 : 10);
   let element;
@@ -211,8 +211,8 @@ export function createUiText(options = {}, html) {
     return r;
   };
   const p0 = (r, c, d) => {
-    if (c & 1021) {
-      const x0 = hostState(["grow","size","tone","weight","variant","truncate","align","font","wrap"], [v[3], v[4], v[5], v[8], v[7], v[6], v[0], v[2], v[9]]);
+    if (c & 2045) {
+      const x0 = hostState(["grow","size","trim","tone","weight","variant","truncate","align","font","wrap"], [v[3], v[4], v[6], v[5], v[9], v[8], v[7], v[0], v[2], v[10]]);
       const s0 = x0;
       if (s0 !== r.v0) writeAttribute(r.n, "data-ui-text-state", (r.v0 = s0) === "" ? null : s0);
     }
@@ -228,8 +228,8 @@ export function createUiText(options = {}, html) {
     return r;
   };
   const p2 = (r, c, d) => {
-    if (c & 1021) {
-      const x0 = hostState(["grow","size","tone","weight","variant","truncate","align","font","wrap"], [v[3], v[4], v[5], v[8], v[7], v[6], v[0], v[2], v[9]]);
+    if (c & 2045) {
+      const x0 = hostState(["grow","size","trim","tone","weight","variant","truncate","align","font","wrap"], [v[3], v[4], v[6], v[5], v[9], v[8], v[7], v[0], v[2], v[10]]);
       const s0 = x0;
       if (s0 !== r.v0) writeAttribute(r.n, "data-ui-text-state", (r.v0 = s0) === "" ? null : s0);
     }
@@ -245,8 +245,8 @@ export function createUiText(options = {}, html) {
     return r;
   };
   const p4 = (r, c, d) => {
-    if (c & 1021) {
-      const x0 = hostState(["grow","size","tone","weight","variant","truncate","align","font","wrap"], [v[3], v[4], v[5], v[8], v[7], v[6], v[0], v[2], v[9]]);
+    if (c & 2045) {
+      const x0 = hostState(["grow","size","trim","tone","weight","variant","truncate","align","font","wrap"], [v[3], v[4], v[6], v[5], v[9], v[8], v[7], v[0], v[2], v[10]]);
       const s0 = x0;
       if (s0 !== r.v0) writeAttribute(r.n, "data-ui-text-state", (r.v0 = s0) === "" ? null : s0);
     }
@@ -262,8 +262,8 @@ export function createUiText(options = {}, html) {
     return r;
   };
   const p6 = (r, c, d) => {
-    if (c & 1021) {
-      const x0 = hostState(["grow","size","tone","weight","variant","truncate","align","font","wrap"], [v[3], v[4], v[5], v[8], v[7], v[6], v[0], v[2], v[9]]);
+    if (c & 2045) {
+      const x0 = hostState(["grow","size","trim","tone","weight","variant","truncate","align","font","wrap"], [v[3], v[4], v[6], v[5], v[9], v[8], v[7], v[0], v[2], v[10]]);
       const s0 = x0;
       if (s0 !== r.v0) writeAttribute(r.n, "data-ui-text-state", (r.v0 = s0) === "" ? null : s0);
     }
@@ -279,8 +279,8 @@ export function createUiText(options = {}, html) {
     return r;
   };
   const p8 = (r, c, d) => {
-    if (c & 1021) {
-      const x0 = hostState(["grow","size","tone","weight","variant","truncate","align","font","wrap"], [v[3], v[4], v[5], v[8], v[7], v[6], v[0], v[2], v[9]]);
+    if (c & 2045) {
+      const x0 = hostState(["grow","size","trim","tone","weight","variant","truncate","align","font","wrap"], [v[3], v[4], v[6], v[5], v[9], v[8], v[7], v[0], v[2], v[10]]);
       const s0 = x0;
       if (s0 !== r.v0) writeAttribute(r.n, "data-ui-text-state", (r.v0 = s0) === "" ? null : s0);
     }
@@ -296,8 +296,8 @@ export function createUiText(options = {}, html) {
     return r;
   };
   const p10 = (r, c, d) => {
-    if (c & 1021) {
-      const x0 = hostState(["grow","size","tone","weight","variant","truncate","align","font","wrap"], [v[3], v[4], v[5], v[8], v[7], v[6], v[0], v[2], v[9]]);
+    if (c & 2045) {
+      const x0 = hostState(["grow","size","trim","tone","weight","variant","truncate","align","font","wrap"], [v[3], v[4], v[6], v[5], v[9], v[8], v[7], v[0], v[2], v[10]]);
       const s0 = x0;
       if (s0 !== r.v0) writeAttribute(r.n, "data-ui-text-state", (r.v0 = s0) === "" ? null : s0);
     }
@@ -313,8 +313,8 @@ export function createUiText(options = {}, html) {
     return r;
   };
   const p12 = (r, c, d) => {
-    if (c & 1021) {
-      const x0 = hostState(["grow","size","tone","weight","variant","truncate","align","font","wrap"], [v[3], v[4], v[5], v[8], v[7], v[6], v[0], v[2], v[9]]);
+    if (c & 2045) {
+      const x0 = hostState(["grow","size","trim","tone","weight","variant","truncate","align","font","wrap"], [v[3], v[4], v[6], v[5], v[9], v[8], v[7], v[0], v[2], v[10]]);
       const s0 = x0;
       if (s0 !== r.v0) writeAttribute(r.n, "data-ui-text-state", (r.v0 = s0) === "" ? null : s0);
     }
@@ -330,8 +330,8 @@ export function createUiText(options = {}, html) {
     return r;
   };
   const p14 = (r, c, d) => {
-    if (c & 1021) {
-      const x0 = hostState(["grow","size","tone","weight","variant","truncate","align","font","wrap"], [v[3], v[4], v[5], v[8], v[7], v[6], v[0], v[2], v[9]]);
+    if (c & 2045) {
+      const x0 = hostState(["grow","size","trim","tone","weight","variant","truncate","align","font","wrap"], [v[3], v[4], v[6], v[5], v[9], v[8], v[7], v[0], v[2], v[10]]);
       const s0 = x0;
       if (s0 !== r.v0) writeAttribute(r.n, "data-ui-text-state", (r.v0 = s0) === "" ? null : s0);
     }
@@ -347,8 +347,8 @@ export function createUiText(options = {}, html) {
     return r;
   };
   const p16 = (r, c, d) => {
-    if (c & 1021) {
-      const x0 = hostState(["grow","size","tone","weight","variant","truncate","align","font","wrap"], [v[3], v[4], v[5], v[8], v[7], v[6], v[0], v[2], v[9]]);
+    if (c & 2045) {
+      const x0 = hostState(["grow","size","trim","tone","weight","variant","truncate","align","font","wrap"], [v[3], v[4], v[6], v[5], v[9], v[8], v[7], v[0], v[2], v[10]]);
       const s0 = x0;
       if (s0 !== r.v0) writeAttribute(r.n, "data-ui-text-state", (r.v0 = s0) === "" ? null : s0);
     }
@@ -364,8 +364,8 @@ export function createUiText(options = {}, html) {
     return r;
   };
   const p18 = (r, c, d) => {
-    if (c & 1021) {
-      const x0 = hostState(["grow","size","tone","weight","variant","truncate","align","font","wrap"], [v[3], v[4], v[5], v[8], v[7], v[6], v[0], v[2], v[9]]);
+    if (c & 2045) {
+      const x0 = hostState(["grow","size","trim","tone","weight","variant","truncate","align","font","wrap"], [v[3], v[4], v[6], v[5], v[9], v[8], v[7], v[0], v[2], v[10]]);
       const s0 = x0;
       if (s0 !== r.v0) writeAttribute(r.n, "data-ui-text-state", (r.v0 = s0) === "" ? null : s0);
     }
@@ -381,8 +381,8 @@ export function createUiText(options = {}, html) {
     return r;
   };
   const p20 = (r, c, d) => {
-    if (c & 1021) {
-      const x0 = hostState(["grow","size","tone","weight","variant","truncate","align","font","wrap"], [v[3], v[4], v[5], v[8], v[7], v[6], v[0], v[2], v[9]]);
+    if (c & 2045) {
+      const x0 = hostState(["grow","size","trim","tone","weight","variant","truncate","align","font","wrap"], [v[3], v[4], v[6], v[5], v[9], v[8], v[7], v[0], v[2], v[10]]);
       const s0 = x0;
       if (s0 !== r.v0) writeAttribute(r.n, "data-ui-text-state", (r.v0 = s0) === "" ? null : s0);
     }

package/vue/UiText.d.ts

@@ -48,6 +48,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"default" | "secondary" | "muted" | "accent" | "danger" | "success" | "info" | "warning" | null>;
         default: string;
     };
+    trim: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     truncate: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -89,6 +93,10 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         type: PropType<"default" | "secondary" | "muted" | "accent" | "danger" | "success" | "info" | "warning" | null>;
         default: string;
     };
+    trim: {
+        type: PropType<boolean | null>;
+        default: boolean;
+    };
     truncate: {
         type: PropType<boolean | null>;
         default: boolean;
@@ -113,6 +121,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     align: "center" | "start" | null;
     as: "div" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "p" | "small" | "span" | "strong" | null;
     wrap: "normal" | "anywhere" | null;
+    trim: boolean | null;
     grow: boolean | null;
     truncate: boolean | null;
     weight: "inherit" | "medium" | "normal" | "semibold" | null;

package/vue/UiText.vue

@@ -61,6 +61,14 @@ const propValidityContract = {
       values: ['default', 'secondary', 'muted', 'accent', 'danger', 'success', 'info', 'warning'],
       default: 'default',
     },
+    trim: {
+      type: { kind: 'terminal', name: 'boolean' },
+      required: false,
+      target: { attribute: 'trim' },
+      description:
+        'Removes extra font space above the capital height and below the baseline, for compact headings and labels. Prose keeps its existing line-edge space by\n      default. Browsers without text-box-trim retain normal font metrics.',
+      default: false,
+    },
     truncate: {
       type: { kind: 'terminal', name: 'boolean' },
       required: false,
@@ -125,6 +133,7 @@ const props = defineProps({
     >,
     default: 'default',
   },
+  trim: { type: null as unknown as PropType<boolean | null>, default: false },
   truncate: { type: null as unknown as PropType<boolean | null>, default: false },
   variant: {
     type: null as unknown as PropType<'body' | 'eyebrow' | 'code' | null>,
@@ -143,6 +152,7 @@ const acceptedProps: Record<string, unknown> = {
   grow: false,
   size: 'inherit',
   tone: 'default',
+  trim: false,
   truncate: false,
   variant: 'body',
   weight: 'inherit',
@@ -202,6 +212,13 @@ const checkedProps = computed(() => ({
     | 'success'
     | 'info'
     | 'warning',
+  trim: checkedProp<boolean>(
+    props['trim'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'trim',
+    acceptedProps,
+  ) as boolean,
   truncate: checkedProp<boolean>(
     props['truncate'],
     { kind: 'terminal', name: 'boolean' },
@@ -311,6 +328,7 @@ const hostState = computed(() =>
     checkedProps.value.grow && 'grow',
     checkedProps.value.size && 'size',
     checkedProps.value.size != null && `size=${encodeURIComponent(checkedProps.value.size)}`,
+    checkedProps.value.trim && 'trim',
     checkedProps.value.tone && 'tone',
     checkedProps.value.tone != null && `tone=${encodeURIComponent(checkedProps.value.tone)}`,
     checkedProps.value.weight && 'weight',
@@ -341,6 +359,7 @@ const hostState = computed(() =>
     :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, 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)"
@@ -359,6 +378,7 @@ const hostState = computed(() =>
     :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, 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)"
@@ -379,6 +399,7 @@ const hostState = computed(() =>
     :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, 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)"
@@ -397,6 +418,7 @@ const hostState = computed(() =>
     :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, 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)"
@@ -415,6 +437,7 @@ const hostState = computed(() =>
     :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, 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)"
@@ -433,6 +456,7 @@ const hostState = computed(() =>
     :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, 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)"
@@ -453,6 +477,7 @@ const hostState = computed(() =>
     :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, 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)"
@@ -473,6 +498,7 @@ const hostState = computed(() =>
     :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, 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)"
@@ -493,6 +519,7 @@ const hostState = computed(() =>
     :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, 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)"
@@ -513,6 +540,7 @@ const hostState = computed(() =>
     :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, 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)"
@@ -533,6 +561,7 @@ const hostState = computed(() =>
     :data-grow="reflectedProp('grow', 'grow', checkedProps.grow, undefined, false)"
     :data-size="reflectedProp('size', 'size', checkedProps.size, undefined, false)"
     :data-tone="reflectedProp('tone', 'tone', checkedProps.tone, undefined, false)"
+    :data-trim="reflectedProp('trim', 'trim', checkedProps.trim, 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)"
@@ -583,6 +612,12 @@ const hostState = computed(() =>
   line-height: var(--ui-line-height-relaxed);
 }
 
+/* Opt in at the text owner; trimming does not inherit from a surrounding layout. */
+[data-component~="ui-text"][data-ui-text-state~="trim"] {
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
+}
+
 [data-component~="ui-text"][data-ui-text-state~="tone=secondary"] {
   color: var(--ui-text-secondary);
 }
@@ -642,6 +677,12 @@ const hostState = computed(() =>
   white-space: nowrap;
 }
 
+/* Trim ends the layout box at the baseline; preserve descending ink while clipping long labels. */
+[data-component~="ui-text"][data-ui-text-state~="trim"][data-ui-text-state~="truncate"] {
+  overflow-x: clip;
+  overflow-y: visible;
+}
+
 [data-component~="ui-text"][data-ui-text-state~="align=center"] {
   text-align: center;
 }