@threadlabs/looma 0.12.2 → 0.12.3

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.
Files changed (7) hide show
  1. package/components/ui-badge/ui-badge.html +5 -4
  2. package/dist/index.js +1 -1
  3. package/package.json +1 -1
  4. package/styles/ui-badge.css +8 -7
  5. package/vue/UiBadge.vue +5 -4
  6. package/vue/chunks/UiBadge.js +1 -1
  7. package/vue/components.css +20 -19
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@threadlabs/looma",
3
- "version": "0.12.2",
3
+ "version": "0.12.3",
4
4
  "type": "module",
5
5
  "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
6
6
  "license": "MIT",
package/styles/ui-badge.css CHANGED
@@ -3,7 +3,8 @@
3
3
  :scope {
4
4
  --_badge-surface: var(--ui-surface-subtle);
5
5
  --_badge-text: var(--ui-text-secondary);
6
- --_badge-border: color-mix(in srgb, var(--ui-text-secondary) 30%, transparent);
6
+ /* Every tone's edge is its fill, so it is unseen until forced colors draw it. */
7
+ --_badge-border: var(--ui-surface-subtle);
7
8
 
8
9
  display: inline-flex;
9
10
  align-items: center;
@@ -21,12 +22,12 @@
21
22
  white-space: nowrap;
22
23
  }
23
24
 
24
- /* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
25
25
  /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
26
- * Trimming applies to block containers, so the box is a block with centred content. */
26
+ * Trimming applies to block containers; an inline-block is one and, like the inline-flex it
27
+ * replaces, still sizes to its label rather than filling its container. */
27
28
  @supports (text-box-trim: trim-both) {
28
29
  :scope {
29
- display: block;
30
+ display: inline-block;
30
31
  min-block-size: var(--ui-badge-min-block-size, 1.5rem);
31
32
  text-align: center;
32
33
  align-content: center;
@@ -119,9 +120,9 @@
119
120
  }
120
121
  }
121
122
  @scope ([data-component~="ui-badge"]) to ([data-component]) {
122
- /* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
123
- /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
124
- * Trimming applies to block containers, so the box is a block with centred content. */
123
+ /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
124
+ * Trimming applies to block containers; an inline-block is one and, like the inline-flex it
125
+ * replaces, still sizes to its label rather than filling its container. */
125
126
  @supports (text-box-trim: trim-both) {
126
127
  }
127
128
 
package/vue/UiBadge.vue CHANGED
@@ -39,7 +39,8 @@ const hostState = computed(() =>
39
39
  [data-component~="ui-badge"] {
40
40
  --_badge-surface: var(--ui-surface-subtle);
41
41
  --_badge-text: var(--ui-text-secondary);
42
- --_badge-border: color-mix(in srgb, var(--ui-text-secondary) 30%, transparent);
42
+ /* Every tone's edge is its fill, so it is unseen until forced colors draw it. */
43
+ --_badge-border: var(--ui-surface-subtle);
43
44
 
44
45
  display: inline-flex;
45
46
  align-items: center;
@@ -58,12 +59,12 @@ const hostState = computed(() =>
58
59
  white-space: nowrap;
59
60
  }
60
61
 
61
- /* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
62
62
  /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
63
- * Trimming applies to block containers, so the box is a block with centred content. */
63
+ * Trimming applies to block containers; an inline-block is one and, like the inline-flex it
64
+ * replaces, still sizes to its label rather than filling its container. */
64
65
  @supports (text-box-trim: trim-both) {
65
66
  [data-component~="ui-badge"] {
66
- display: block;
67
+ display: inline-block;
67
68
  min-block-size: var(--ui-badge-min-block-size, 1.5rem);
68
69
  text-align: center;
69
70
  align-content: center;
package/vue/chunks/UiBadge.js CHANGED
@@ -24,6 +24,6 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
24
24
  return openBlock(), createElementBlock("span", mergeProps({ "data-component": "ui-badge" }, _ctx.$attrs, { "data-ui-badge-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
25
25
  };
26
26
  }
27
- }), [["__scopeId", "data-v-0dbc98f0"]]);
27
+ }), [["__scopeId", "data-v-4fe703f2"]]);
28
28
  //#endregion
29
29
  export { UiBadge_default as t };
package/vue/components.css CHANGED
@@ -169,10 +169,11 @@
169
169
  display: none;
170
170
  }
171
171
 
172
- [data-component~="ui-badge"][data-v-0dbc98f0] {
172
+ [data-component~="ui-badge"][data-v-4fe703f2] {
173
173
  --_badge-surface: var(--ui-surface-subtle);
174
174
  --_badge-text: var(--ui-text-secondary);
175
- --_badge-border: color-mix(in srgb, var(--ui-text-secondary) 30%, transparent);
175
+ /* Every tone's edge is its fill, so it is unseen until forced colors draw it. */
176
+ --_badge-border: var(--ui-surface-subtle);
176
177
 
177
178
  display: inline-flex;
178
179
  align-items: center;
@@ -191,12 +192,12 @@
191
192
  white-space: nowrap;
192
193
  }
193
194
 
194
- /* Centre the glyphs, not the line box: a label without descenders otherwise reads high. */
195
195
  /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
196
- * Trimming applies to block containers, so the box is a block with centred content. */
196
+ * Trimming applies to block containers; an inline-block is one and, like the inline-flex it
197
+ * replaces, still sizes to its label rather than filling its container. */
197
198
  @supports (text-box-trim: trim-both) {
198
- [data-component~="ui-badge"][data-v-0dbc98f0] {
199
- display: block;
199
+ [data-component~="ui-badge"][data-v-4fe703f2] {
200
+ display: inline-block;
200
201
  min-block-size: var(--ui-badge-min-block-size, 1.5rem);
201
202
  text-align: center;
202
203
  align-content: center;
@@ -204,52 +205,52 @@
204
205
  text-box-edge: cap alphabetic;
205
206
  }
206
207
  }
207
- [data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-0dbc98f0] {
208
+ [data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-4fe703f2] {
208
209
  --_badge-surface: var(--ui-accent-strong-surface, var(--ui-accent-solid));
209
210
  --_badge-border: var(--ui-accent-strong-surface, var(--ui-accent-solid));
210
211
  --_badge-text: var(--ui-accent-on-strong, var(--ui-text-on-accent));
211
212
  }
212
- [data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-0dbc98f0] {
213
+ [data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-4fe703f2] {
213
214
  --_badge-surface: var(--ui-danger-strong-surface, var(--ui-danger-solid));
214
215
  --_badge-border: var(--ui-danger-strong-surface, var(--ui-danger-solid));
215
216
  --_badge-text: var(--ui-danger-on-strong, var(--ui-text-on-accent));
216
217
  }
217
- [data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-0dbc98f0] {
218
+ [data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-4fe703f2] {
218
219
  --_badge-surface: var(--ui-success-strong-surface, var(--ui-success-solid));
219
220
  --_badge-border: var(--ui-success-strong-surface, var(--ui-success-solid));
220
221
  --_badge-text: var(--ui-success-on-strong, var(--ui-text-on-accent));
221
222
  }
222
- [data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-0dbc98f0] {
223
+ [data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-4fe703f2] {
223
224
  --_badge-surface: var(--ui-warning-strong-surface, var(--ui-warning-solid));
224
225
  --_badge-border: var(--ui-warning-strong-surface, var(--ui-warning-solid));
225
226
  --_badge-text: var(--ui-warning-on-strong, var(--ui-text-on-accent));
226
227
  }
227
- [data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-0dbc98f0] {
228
+ [data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-4fe703f2] {
228
229
  --_badge-surface: var(--ui-info-strong-surface, var(--ui-info-solid));
229
230
  --_badge-border: var(--ui-info-strong-surface, var(--ui-info-solid));
230
231
  --_badge-text: var(--ui-info-on-strong, var(--ui-text-on-accent));
231
232
  }
232
- [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-0dbc98f0] {
233
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-4fe703f2] {
233
234
  --_badge-surface: var(--ui-accent-soft);
234
235
  --_badge-border: var(--ui-accent-soft);
235
236
  --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
236
237
  }
237
- [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-0dbc98f0] {
238
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-4fe703f2] {
238
239
  --_badge-surface: var(--ui-danger-soft);
239
240
  --_badge-border: var(--ui-danger-soft);
240
241
  --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
241
242
  }
242
- [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-0dbc98f0] {
243
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-4fe703f2] {
243
244
  --_badge-surface: var(--ui-success-soft);
244
245
  --_badge-border: var(--ui-success-soft);
245
246
  --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
246
247
  }
247
- [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-0dbc98f0] {
248
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-4fe703f2] {
248
249
  --_badge-surface: var(--ui-warning-soft);
249
250
  --_badge-border: var(--ui-warning-soft);
250
251
  --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
251
252
  }
252
- [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-0dbc98f0] {
253
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-4fe703f2] {
253
254
  --_badge-surface: var(--ui-info-soft);
254
255
  --_badge-border: var(--ui-info-soft);
255
256
  --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
@@ -258,7 +259,7 @@
258
259
  /* A tag is flat at the start and points at the end. The point is cut from the box, so it has no
259
260
  outline to follow: the edge is the fill. The end padding grows by the point's depth so the
260
261
  label never runs into it. */
261
- [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-0dbc98f0] {
262
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-4fe703f2] {
262
263
  --_badge-point: var(--ui-badge-point, var(--ui-space-2));
263
264
 
264
265
  border-color: transparent;
@@ -272,7 +273,7 @@
272
273
  0 100%
273
274
  );
274
275
  }
275
- [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-0dbc98f0]:dir(rtl) {
276
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-4fe703f2]:dir(rtl) {
276
277
  padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
277
278
  padding-inline-start: calc(
278
279
  var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point)
@@ -281,7 +282,7 @@
281
282
  }
282
283
 
283
284
  /* A component that sets its display still honours the hidden attribute on its root. */
284
- [data-component~="ui-badge"][hidden][data-v-0dbc98f0] {
285
+ [data-component~="ui-badge"][hidden][data-v-4fe703f2] {
285
286
  display: none;
286
287
  }
287
288