@threadlabs/looma 0.23.11 → 0.23.12
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-badge/ui-badge.html +13 -2
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/styles/ui-badge.css +15 -1
- package/vue/UiBadge.vue +13 -2
- package/vue/chunks/UiBadge.js +2 -2
- package/vue/components.css +45 -34
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<defs>
|
|
3
3
|
<prop name="variant" type="keyword" values="solid, subtle, outline" default="subtle"
|
|
4
4
|
>Emphasis. subtle sets toned text over a soft wash; solid fills with the tone and uses contrasting text; outline keeps the surface with a toned edge.
|
|
5
|
-
Neutral looks the same in solid and subtle.</prop>
|
|
5
|
+
Neutral looks the same in solid and subtle. When space is constrained, the label truncates with an ellipsis while its full text remains available.</prop>
|
|
6
6
|
<prop name="tone" type="keyword" values="neutral, accent, info, success, warning, danger" default="neutral"
|
|
7
7
|
>Which colour the badge speaks in. neutral is a quiet grey for plain labels; accent draws the eye in the accent colour; info, success, warning, and danger
|
|
8
8
|
mark a status, so match the tone to what the badge says. For a category rather than a status, set the --ui-badge-color hook on the badge instead: any CSS
|
|
@@ -89,7 +89,9 @@
|
|
|
89
89
|
display: inline-flex;
|
|
90
90
|
align-items: center;
|
|
91
91
|
justify-content: center;
|
|
92
|
-
|
|
92
|
+
box-sizing: border-box;
|
|
93
|
+
min-inline-size: 0;
|
|
94
|
+
max-inline-size: 100%;
|
|
93
95
|
padding: var(--ui-badge-padding-block, var(--ui-space-0-5)) var(--ui-badge-padding-inline, var(--ui-space-2));
|
|
94
96
|
border: var(--ui-border-width) solid var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
|
|
95
97
|
border-radius: var(--ui-radius-round);
|
|
@@ -102,6 +104,15 @@
|
|
|
102
104
|
white-space: nowrap;
|
|
103
105
|
}
|
|
104
106
|
|
|
107
|
+
/* A constrained badge keeps its surface intact and ellipsizes only its label. The full
|
|
108
|
+
text stays in the DOM for accessible names and consumers' selected values. */
|
|
109
|
+
.label {
|
|
110
|
+
display: block;
|
|
111
|
+
min-inline-size: 0;
|
|
112
|
+
overflow: hidden;
|
|
113
|
+
text-overflow: ellipsis;
|
|
114
|
+
}
|
|
115
|
+
|
|
105
116
|
/* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
|
|
106
117
|
* Trimming applies to block containers; an inline-block is one and, like the inline-flex it
|
|
107
118
|
* replaces, still sizes to its label rather than filling its container. */
|