@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.
Files changed (7) hide show
  1. package/components/ui-badge/ui-badge.html +13 -2
  2. package/dist/index.js +1 -1
  3. package/package.json +1 -1
  4. package/styles/ui-badge.css +15 -1
  5. package/vue/UiBadge.vue +13 -2
  6. package/vue/chunks/UiBadge.js +2 -2
  7. package/vue/components.css +45 -34
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@threadlabs/looma",
3
- "version": "0.23.11",
3
+ "version": "0.23.12",
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
@@ -73,7 +73,9 @@
73
73
  display: inline-flex;
74
74
  align-items: center;
75
75
  justify-content: center;
76
- max-width: 100%;
76
+ box-sizing: border-box;
77
+ min-inline-size: 0;
78
+ max-inline-size: 100%;
77
79
  padding: var(--ui-badge-padding-block, var(--ui-space-0-5)) var(--ui-badge-padding-inline, var(--ui-space-2));
78
80
  border: var(--ui-border-width) solid var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
79
81
  border-radius: var(--ui-radius-round);
@@ -86,6 +88,15 @@
86
88
  white-space: nowrap;
87
89
  }
88
90
 
91
+ /* A constrained badge keeps its surface intact and ellipsizes only its label. The full
92
+ text stays in the DOM for accessible names and consumers' selected values. */
93
+ .label {
94
+ display: block;
95
+ min-inline-size: 0;
96
+ overflow: hidden;
97
+ text-overflow: ellipsis;
98
+ }
99
+
89
100
  /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
90
101
  * Trimming applies to block containers; an inline-block is one and, like the inline-flex it
91
102
  * replaces, still sizes to its label rather than filling its container. */
@@ -319,6 +330,9 @@
319
330
  @scope ([data-component~="ui-badge"]) to ([data-component]) {
320
331
  /* This component's hooks style the element they are set on, and never a nested one. */
321
332
 
333
+ /* A constrained badge keeps its surface intact and ellipsizes only its label. The full
334
+ text stays in the DOM for accessible names and consumers' selected values. */
335
+
322
336
  /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
323
337
  * Trimming applies to block containers; an inline-block is one and, like the inline-flex it
324
338
  * replaces, still sizes to its label rather than filling its container. */
package/vue/UiBadge.vue CHANGED
@@ -40,7 +40,7 @@ const propValidityContract = {
40
40
  required: false,
41
41
  target: { attribute: 'variant' },
42
42
  description:
43
- '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.\n Neutral looks the same in solid and subtle.',
43
+ '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.\n Neutral looks the same in solid and subtle. When space is constrained, the label truncates with an ellipsis while its full text remains available.',
44
44
  values: ['solid', 'subtle', 'outline'],
45
45
  default: 'subtle',
46
46
  },
@@ -261,7 +261,9 @@ const hostState = computed(() =>
261
261
  display: inline-flex;
262
262
  align-items: center;
263
263
  justify-content: center;
264
- max-width: 100%;
264
+ box-sizing: border-box;
265
+ min-inline-size: 0;
266
+ max-inline-size: 100%;
265
267
  padding: var(--ui-badge-padding-block, var(--ui-space-0-5))
266
268
  var(--ui-badge-padding-inline, var(--ui-space-2));
267
269
  border: var(--ui-border-width) solid
@@ -276,6 +278,15 @@ const hostState = computed(() =>
276
278
  white-space: nowrap;
277
279
  }
278
280
 
281
+ /* A constrained badge keeps its surface intact and ellipsizes only its label. The full
282
+ text stays in the DOM for accessible names and consumers' selected values. */
283
+ .label {
284
+ display: block;
285
+ min-inline-size: 0;
286
+ overflow: hidden;
287
+ text-overflow: ellipsis;
288
+ }
289
+
279
290
  /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
280
291
  * Trimming applies to block containers; an inline-block is one and, like the inline-flex it
281
292
  * replaces, still sizes to its label rather than filling its container. */
package/vue/chunks/UiBadge.js CHANGED
@@ -87,7 +87,7 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
87
87
  },
88
88
  required: false,
89
89
  target: { attribute: "variant" },
90
- description: "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.\n Neutral looks the same in solid and subtle.",
90
+ description: "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.\n Neutral looks the same in solid and subtle. When space is constrained, the label truncates with an ellipsis while its full text remains available.",
91
91
  values: [
92
92
  "solid",
93
93
  "subtle",
@@ -169,6 +169,6 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
169
169
  }]]);
170
170
  };
171
171
  }
172
- }), [["__scopeId", "data-v-470f6e28"]]);
172
+ }), [["__scopeId", "data-v-18b6e16a"]]);
173
173
  //#endregion
174
174
  export { UiBadge_default as t };
package/vue/components.css CHANGED
@@ -349,7 +349,7 @@ svg[data-v-47b12d9e] {
349
349
  syntax: "*";
350
350
  inherits: false;
351
351
  }
352
- [data-component~="ui-badge"][data-v-470f6e28] {
352
+ [data-component~="ui-badge"][data-v-18b6e16a] {
353
353
  --_badge-surface: color-mix(in srgb, var(--ui-surface-subtle) 80%, var(--ui-surface-default));
354
354
  --_badge-text: var(--ui-text-secondary);
355
355
  /* Sit between the soft fill and its stronger theme ink. */
@@ -375,7 +375,9 @@ svg[data-v-47b12d9e] {
375
375
  display: inline-flex;
376
376
  align-items: center;
377
377
  justify-content: center;
378
- max-width: 100%;
378
+ box-sizing: border-box;
379
+ min-inline-size: 0;
380
+ max-inline-size: 100%;
379
381
  padding: var(--ui-badge-padding-block, var(--ui-space-0-5))
380
382
  var(--ui-badge-padding-inline, var(--ui-space-2));
381
383
  border: var(--ui-border-width) solid
@@ -390,11 +392,20 @@ svg[data-v-47b12d9e] {
390
392
  white-space: nowrap;
391
393
  }
392
394
 
395
+ /* A constrained badge keeps its surface intact and ellipsizes only its label. The full
396
+ text stays in the DOM for accessible names and consumers' selected values. */
397
+ .label[data-v-18b6e16a] {
398
+ display: block;
399
+ min-inline-size: 0;
400
+ overflow: hidden;
401
+ text-overflow: ellipsis;
402
+ }
403
+
393
404
  /* Centre the glyphs, not the line box: a label without descenders otherwise reads high.
394
405
  * Trimming applies to block containers; an inline-block is one and, like the inline-flex it
395
406
  * replaces, still sizes to its label rather than filling its container. */
396
407
  @supports (text-box-trim: trim-both) {
397
- [data-component~="ui-badge"][data-v-470f6e28] {
408
+ [data-component~="ui-badge"][data-v-18b6e16a] {
398
409
  display: inline-block;
399
410
  min-block-size: var(--ui-badge-min-block-size, 1.5rem);
400
411
  text-align: center;
@@ -403,7 +414,7 @@ svg[data-v-47b12d9e] {
403
414
  text-box-edge: cap alphabetic;
404
415
  }
405
416
  }
406
- [data-component~="ui-badge"][data-ui-badge-state~="size=xs"][data-v-470f6e28] {
417
+ [data-component~="ui-badge"][data-ui-badge-state~="size=xs"][data-v-18b6e16a] {
407
418
  box-sizing: border-box;
408
419
  min-inline-size: 1rem;
409
420
  min-block-size: var(--ui-badge-min-block-size, 1rem);
@@ -411,52 +422,52 @@ svg[data-v-47b12d9e] {
411
422
  font-size: var(--ui-badge-font-size, var(--ui-font-size-2xs));
412
423
  line-height: var(--ui-badge-line-height, 1);
413
424
  }
414
- [data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-470f6e28] {
425
+ [data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-18b6e16a] {
415
426
  --_badge-surface: var(--ui-accent-strong-surface, var(--ui-accent-solid));
416
427
  --_badge-border: var(--ui-accent-strong-surface, var(--ui-accent-solid));
417
428
  --_badge-text: var(--ui-accent-on-strong, var(--ui-text-on-accent));
418
429
  }
419
- [data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-470f6e28] {
430
+ [data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-18b6e16a] {
420
431
  --_badge-surface: var(--ui-danger-strong-surface, var(--ui-danger-solid));
421
432
  --_badge-border: var(--ui-danger-strong-surface, var(--ui-danger-solid));
422
433
  --_badge-text: var(--ui-danger-on-strong, var(--ui-text-on-accent));
423
434
  }
424
- [data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-470f6e28] {
435
+ [data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-18b6e16a] {
425
436
  --_badge-surface: var(--ui-success-strong-surface, var(--ui-success-solid));
426
437
  --_badge-border: var(--ui-success-strong-surface, var(--ui-success-solid));
427
438
  --_badge-text: var(--ui-success-on-strong, var(--ui-text-on-accent));
428
439
  }
429
- [data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-470f6e28] {
440
+ [data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-18b6e16a] {
430
441
  --_badge-surface: var(--ui-warning-strong-surface, var(--ui-warning-solid));
431
442
  --_badge-border: var(--ui-warning-strong-surface, var(--ui-warning-solid));
432
443
  --_badge-text: var(--ui-warning-on-strong, var(--ui-text-on-accent));
433
444
  }
434
- [data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-470f6e28] {
445
+ [data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-18b6e16a] {
435
446
  --_badge-surface: var(--ui-info-strong-surface, var(--ui-info-solid));
436
447
  --_badge-border: var(--ui-info-strong-surface, var(--ui-info-solid));
437
448
  --_badge-text: var(--ui-info-on-strong, var(--ui-text-on-accent));
438
449
  }
439
- [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-470f6e28] {
450
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-18b6e16a] {
440
451
  --_badge-surface: color-mix(in srgb, var(--ui-accent-solid) 19%, var(--ui-surface-default));
441
452
  --_badge-border: color-mix(in srgb, var(--ui-accent-solid) 25%, var(--ui-surface-default));
442
453
  --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
443
454
  }
444
- [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-470f6e28] {
455
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-18b6e16a] {
445
456
  --_badge-surface: color-mix(in srgb, var(--ui-danger-solid) 19%, var(--ui-surface-default));
446
457
  --_badge-border: color-mix(in srgb, var(--ui-danger-solid) 25%, var(--ui-surface-default));
447
458
  --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
448
459
  }
449
- [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-470f6e28] {
460
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-18b6e16a] {
450
461
  --_badge-surface: color-mix(in srgb, var(--ui-success-solid) 19%, var(--ui-surface-default));
451
462
  --_badge-border: color-mix(in srgb, var(--ui-success-solid) 25%, var(--ui-surface-default));
452
463
  --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
453
464
  }
454
- [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-470f6e28] {
465
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-18b6e16a] {
455
466
  --_badge-surface: color-mix(in srgb, var(--ui-warning-solid) 19%, var(--ui-surface-default));
456
467
  --_badge-border: color-mix(in srgb, var(--ui-warning-solid) 25%, var(--ui-surface-default));
457
468
  --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
458
469
  }
459
- [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-470f6e28] {
470
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-18b6e16a] {
460
471
  --_badge-surface: color-mix(in srgb, var(--ui-info-solid) 19%, var(--ui-surface-default));
461
472
  --_badge-border: color-mix(in srgb, var(--ui-info-solid) 25%, var(--ui-surface-default));
462
473
  --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
@@ -464,12 +475,12 @@ svg[data-v-47b12d9e] {
464
475
 
465
476
  /* A solid colour fills with the ink. Its text is the page surface, mixed at 0% only so that it too is
466
477
  invalid while the hook is unset. */
467
- [data-component~="ui-badge"][data-ui-badge-state~="variant=solid"][data-v-470f6e28] {
478
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=solid"][data-v-18b6e16a] {
468
479
  --_badge-color-surface: var(--_badge-color-ink);
469
480
  --_badge-color-border: var(--_badge-color-ink);
470
481
  --_badge-color-text: color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default));
471
482
  }
472
- [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-470f6e28] {
483
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-18b6e16a] {
473
484
  --_badge-surface: var(--ui-surface-default);
474
485
  --_badge-border: var(--ui-border-strong);
475
486
  --_badge-text: var(--ui-text-secondary);
@@ -477,29 +488,29 @@ svg[data-v-47b12d9e] {
477
488
  --_badge-color-surface: initial;
478
489
  --_badge-color-border: var(--_badge-color-ink);
479
490
  }
480
- [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-470f6e28] {
491
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-18b6e16a] {
481
492
  --_badge-border: var(--ui-accent-solid);
482
493
  --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
483
494
  }
484
- [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-470f6e28] {
495
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-18b6e16a] {
485
496
  --_badge-border: var(--ui-danger-solid);
486
497
  --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
487
498
  }
488
- [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-470f6e28] {
499
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-18b6e16a] {
489
500
  --_badge-border: var(--ui-success-solid);
490
501
  --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
491
502
  }
492
- [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-470f6e28] {
503
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-18b6e16a] {
493
504
  --_badge-border: var(--ui-warning-solid);
494
505
  --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
495
506
  }
496
- [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-470f6e28] {
507
+ [data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-18b6e16a] {
497
508
  --_badge-border: var(--ui-info-solid);
498
509
  --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
499
510
  }
500
511
 
501
512
  /* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
502
- [data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-v-470f6e28] {
513
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-v-18b6e16a] {
503
514
  --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-4) * 2));
504
515
  display: inline-flex;
505
516
  box-sizing: border-box;
@@ -512,17 +523,17 @@ svg[data-v-47b12d9e] {
512
523
  border-radius: var(--ui-radius-md);
513
524
  text-box-trim: none;
514
525
  }
515
- [data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=xs"][data-v-470f6e28] {
526
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=square"][data-ui-badge-state~="size=xs"][data-v-18b6e16a] {
516
527
  --_badge-square-size: var(--ui-badge-square-size, calc(var(--ui-space-3) * 2));
517
528
  }
518
- [data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-470f6e28] {
529
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=square"] .label[data-v-18b6e16a] {
519
530
  display: inline-flex;
520
531
  align-items: center;
521
532
  justify-content: center;
522
533
  }
523
534
 
524
535
  /* A dot uses the badge's tone recipe; only its silhouette and visible label change. */
525
- [data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-470f6e28] {
536
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-18b6e16a] {
526
537
  position: relative;
527
538
  box-sizing: border-box;
528
539
  flex: none;
@@ -534,7 +545,7 @@ svg[data-v-47b12d9e] {
534
545
  border-radius: var(--ui-radius-round);
535
546
  text-box-trim: none;
536
547
  }
537
- [data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] .label[data-v-470f6e28] {
548
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=dot"] .label[data-v-18b6e16a] {
538
549
  position: absolute;
539
550
  inline-size: 1px;
540
551
  block-size: 1px;
@@ -545,7 +556,7 @@ svg[data-v-47b12d9e] {
545
556
 
546
557
  /* The clipped point needs an inset surface over an outer border-colour shape: a native border
547
558
  has no diagonal edge to follow. Keep this edge for every tag variant. */
548
- [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-470f6e28] {
559
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-18b6e16a] {
549
560
  --_badge-point: var(--ui-badge-point, var(--ui-space-2));
550
561
 
551
562
  position: relative;
@@ -562,7 +573,7 @@ svg[data-v-47b12d9e] {
562
573
  0 100%
563
574
  );
564
575
  }
565
- [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-470f6e28]::before {
576
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-18b6e16a]::before {
566
577
  content: "";
567
578
  position: absolute;
568
579
  inset: 0;
@@ -577,34 +588,34 @@ svg[data-v-47b12d9e] {
577
588
  );
578
589
  pointer-events: none;
579
590
  }
580
- [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-470f6e28]:dir(rtl) {
591
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-18b6e16a]:dir(rtl) {
581
592
  padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
582
593
  padding-inline-start: calc(
583
594
  var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point)
584
595
  );
585
596
  clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
586
597
  }
587
- [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-470f6e28]:dir(rtl)::before {
598
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-18b6e16a]:dir(rtl)::before {
588
599
  clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
589
600
  }
590
601
  @media (forced-colors: active) {
591
- [data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-470f6e28] {
602
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=dot"][data-v-18b6e16a] {
592
603
  forced-color-adjust: none;
593
604
  border-color: CanvasText;
594
605
  background: CanvasText;
595
606
  }
596
- [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-470f6e28] {
607
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-18b6e16a] {
597
608
  forced-color-adjust: none;
598
609
  background: CanvasText;
599
610
  color: CanvasText;
600
611
  }
601
- [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-470f6e28]::before {
612
+ [data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-18b6e16a]::before {
602
613
  background: Canvas;
603
614
  }
604
615
  }
605
616
 
606
617
  /* A component that sets its display still honours the hidden attribute on its root. */
607
- [data-component~="ui-badge"][hidden][data-v-470f6e28] {
618
+ [data-component~="ui-badge"][hidden][data-v-18b6e16a] {
608
619
  display: none;
609
620
  }
610
621