@threadlabs/looma 0.26.15 → 0.26.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/ui-text/ui-text.html +15 -0
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/styles/ui-text.css +16 -0
- package/vanilla/UiText.d.ts +1 -0
- package/vanilla/UiText.js +25 -25
- package/vue/UiText.d.ts +9 -0
- package/vue/UiText.vue +41 -0
- package/vue/chunks/UiText.js +43 -1
- package/vue/components.css +37 -25
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
<template component="ui-text">
|
|
2
2
|
<defs>
|
|
3
|
+
<prop name="trim" type="boolean" default="false"
|
|
4
|
+
>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
|
|
5
|
+
default. Browsers without text-box-trim retain normal font metrics.</prop>
|
|
3
6
|
<prop name="grow" type="boolean" default="false">Lets this text use remaining inline space in a flex row, including when truncated.</prop>
|
|
4
7
|
<prop name="font" type="keyword" values="inherit, sans" default="inherit"
|
|
5
8
|
>Use sans for UI text rendered outside its original font context; inherit preserves the surrounding typeface.</prop>
|
|
@@ -75,6 +78,12 @@
|
|
|
75
78
|
line-height: var(--ui-line-height-relaxed);
|
|
76
79
|
}
|
|
77
80
|
|
|
81
|
+
/* Opt in at the text owner; trimming does not inherit from a surrounding layout. */
|
|
82
|
+
:host([trim]) {
|
|
83
|
+
text-box-trim: trim-both;
|
|
84
|
+
text-box-edge: cap alphabetic;
|
|
85
|
+
}
|
|
86
|
+
|
|
78
87
|
:host([tone="secondary"]) {
|
|
79
88
|
color: var(--ui-text-secondary);
|
|
80
89
|
}
|
|
@@ -134,6 +143,12 @@
|
|
|
134
143
|
white-space: nowrap;
|
|
135
144
|
}
|
|
136
145
|
|
|
146
|
+
/* Trim ends the layout box at the baseline; preserve descending ink while clipping long labels. */
|
|
147
|
+
:host([trim][truncate]) {
|
|
148
|
+
overflow-x: clip;
|
|
149
|
+
overflow-y: visible;
|
|
150
|
+
}
|
|
151
|
+
|
|
137
152
|
:host([align="center"]) {
|
|
138
153
|
text-align: center;
|
|
139
154
|
}
|