@devslab/dds-css 0.29.1 → 0.30.0

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 (10) hide show
  1. package/dist/components/choice.css +2 -1
  2. package/dist/components/date-picker.css +3 -2
  3. package/dist/components/input.css +2 -1
  4. package/dist/components/number-input.css +4 -0
  5. package/dist/components/select.css +5 -1
  6. package/dist/components/textarea.css +5 -1
  7. package/dist/components/textfield.css +5 -1
  8. package/dist/components/toast.css +38 -1
  9. package/dist/dds.css +64 -8
  10. package/package.json +1 -1
package/dist/components/choice.css CHANGED
@@ -1,7 +1,8 @@
1
1
  .dds-choice {display:flex;flex-direction:column;gap:var(--dds-space-4);position:relative;min-inline-size:0;font-family:var(--dds-font-family-sans);font-size:var(--dds-typo-body-2-font-size);color:var(--dds-color-text-primary);}
2
2
  .dds-choice-label {font-size:var(--dds-typo-label-font-size);line-height:var(--dds-typo-label-line-height);font-weight:var(--dds-typo-label-font-weight);}
3
3
  .dds-choice-control {position:relative;display:flex;align-items:center;inline-size:100%;min-block-size:var(--dds-space-40);border:1px solid var(--dds-color-border-strong);border-radius:var(--dds-radius-md);background:var(--dds-color-bg-default);}
4
- .dds-choice-control:focus-within {outline:var(--dds-space-2) solid var(--dds-color-border-focus);}
4
+ .dds-choice-control:focus-within {outline:var(--dds-space-2) solid var(--dds-color-border-focus);outline-offset:calc(var(--dds-space-2) * -1);}
5
+ .dds-choice-control[data-invalid]:focus-within {outline-offset:calc(var(--dds-space-2) * -1.5);}
5
6
  /* The control owns the 40px height (border included, like Input and DatePicker); parts stretch inside it. */
6
7
  .dds-choice-input,.dds-choice-trigger {box-sizing:border-box;align-self:stretch;min-inline-size:0;min-block-size:0;border:0;background:transparent;color:inherit;font:inherit;padding-inline:var(--dds-space-12);}
7
8
  .dds-choice-input {flex:1;inline-size:100%;outline:none;}
package/dist/components/date-picker.css CHANGED
@@ -13,14 +13,15 @@
13
13
  .dds-date-picker-table [data-outside-range] {color:var(--dds-color-text-secondary);}
14
14
  .dds-date-picker-table [data-part="table-cell-trigger"][data-selected] {background:var(--dds-color-bg-brand);color:var(--dds-color-text-on-brand);}
15
15
  .dds-date-picker-table [data-today]:not([data-selected]) {text-decoration:underline;text-underline-offset:var(--dds-space-4);}
16
- .dds-date-picker-content :focus-visible {outline:var(--dds-space-2) solid var(--dds-color-text-brand);outline-offset:var(--dds-space-2);}
16
+ .dds-date-picker-content :focus-visible {outline:var(--dds-space-2) solid var(--dds-color-border-focus);outline-offset:var(--dds-space-2);}
17
17
  .dds-date-picker-footer {display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--dds-space-12);margin-top:var(--dds-space-12);padding-top:var(--dds-space-12);border-top:calc(var(--dds-space-2) / 2) solid var(--dds-color-border-default);}
18
18
 
19
19
  /* Text box shared by DatePicker, MonthPicker and the DateRangePicker pair: same var(--dds-space-40) DDS input look. */
20
20
  .dds-date-picker-control > input,.dds-date-range-box {box-sizing:border-box;flex:1;min-inline-size:0;block-size:var(--dds-space-40);border:calc(var(--dds-space-2) / 2) solid var(--dds-color-border-strong);border-radius:var(--dds-radius-md);background:var(--dds-color-bg-default);color:var(--dds-color-text-primary);font-family:inherit;font-size:var(--dds-typo-body-2-font-size);font-variant-numeric:tabular-nums;}
21
21
  .dds-date-picker-control > input {padding-inline:var(--dds-space-12);}
22
- .dds-date-picker-control > input:focus-visible,.dds-date-range-box:focus-within {outline:var(--dds-space-2) solid var(--dds-color-border-focus);outline-offset:0;}
22
+ .dds-date-picker-control > input:focus-visible,.dds-date-range-box:focus-within {outline:var(--dds-space-2) solid var(--dds-color-border-focus);outline-offset:calc(var(--dds-space-2) * -1);}
23
23
  .dds-date-picker-control > input[aria-invalid="true"],.dds-date-range-box[data-invalid] {border-color:var(--dds-color-status-danger);}
24
+ .dds-date-picker-control > input[aria-invalid="true"]:focus-visible,.dds-date-range-box[data-invalid]:focus-within {outline-offset:calc(var(--dds-space-2) * -1.5);}
24
25
  .dds-date-picker-control > input:disabled,.dds-date-range-box[data-disabled] {opacity:.45;cursor:not-allowed;background:var(--dds-color-bg-subtle);}
25
26
  .dds-date-picker-control > input::placeholder,.dds-date-range-input::placeholder {color:var(--dds-color-text-muted);}
26
27
  .dds-date-range-box {display:flex;align-items:center;gap:var(--dds-space-8);padding-inline:var(--dds-space-12);}
package/dist/components/input.css CHANGED
@@ -3,8 +3,9 @@
3
3
  .dds-input__label {font-size:var(--dds-typo-label-font-size);line-height:var(--dds-typo-label-line-height);font-weight:var(--dds-typo-label-font-weight);}
4
4
  .dds-input__control {box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--dds-space-40);padding-inline:var(--dds-space-12);font:inherit;background:var(--dds-color-bg-default);color:var(--dds-color-text-primary);border:1px solid var(--dds-color-border-strong);border-radius:var(--dds-radius-md);}
5
5
  .dds-input__control::placeholder {color:var(--dds-color-text-muted);}
6
- .dds-input__control:focus-visible {outline:var(--dds-space-2) solid var(--dds-color-border-focus);outline-offset:0;}
6
+ .dds-input__control:focus-visible {outline:var(--dds-space-2) solid var(--dds-color-border-focus);outline-offset:calc(var(--dds-space-2) * -1);}
7
7
  .dds-input__control[aria-invalid="true"] {border-color:var(--dds-color-status-danger);}
8
+ .dds-input__control[aria-invalid="true"]:focus-visible {outline-offset:calc(var(--dds-space-2) * -1.5);}
8
9
  .dds-input:has(.dds-input__search) .dds-input__control {padding-inline-start:var(--dds-space-40);}
9
10
  .dds-input__search {position:absolute;inset-inline-start:var(--dds-space-12);inset-block-end:var(--dds-space-12);color:var(--dds-color-text-secondary);pointer-events:none;}
10
11
  .dds-input[data-label-placement="inside"]:has(.dds-input__search) .dds-input__label {inset-inline-start:var(--dds-space-40);}
package/dist/components/number-input.css CHANGED
@@ -47,10 +47,14 @@
47
47
  }
48
48
  .dds-number-input__control:focus-within {
49
49
  outline: var(--dds-space-2) solid var(--dds-color-border-focus);
50
+ outline-offset: calc(var(--dds-space-2) * -1);
50
51
  }
51
52
  .dds-number-input__control[data-invalid] {
52
53
  border-color: var(--dds-color-status-danger);
53
54
  }
55
+ .dds-number-input__control[data-invalid]:focus-within {
56
+ outline-offset: calc(var(--dds-space-2) * -1.5);
57
+ }
54
58
 
55
59
  .dds-number-input__field {
56
60
  flex: 1 1 auto;
package/dist/components/select.css CHANGED
@@ -33,7 +33,7 @@
33
33
 
34
34
  .dds-select__input:focus-visible {
35
35
  outline: var(--dds-space-2) solid var(--dds-color-border-focus);
36
- outline-offset: 0;
36
+ outline-offset: calc(var(--dds-space-2) * -1);
37
37
  border-color: transparent;
38
38
  }
39
39
 
@@ -48,6 +48,10 @@
48
48
  .dds-select__input[aria-invalid="true"] {
49
49
  border-color: var(--dds-color-status-danger);
50
50
  }
51
+ .dds-field--error .dds-select__input:focus-visible,
52
+ .dds-select__input[aria-invalid="true"]:focus-visible {
53
+ outline-offset: calc(var(--dds-space-2) * -1.5);
54
+ }
51
55
 
52
56
  /* Chevron glyph geometry (8px box, 1.6px stroke) is drawn, not spaced — the
53
57
  * same allowance as the 6px badge dot. translateY(-70%) centers the drawn
package/dist/components/textarea.css CHANGED
@@ -25,7 +25,7 @@
25
25
 
26
26
  .dds-textarea:focus-visible {
27
27
  outline: var(--dds-space-2) solid var(--dds-color-border-focus);
28
- outline-offset: 0;
28
+ outline-offset: calc(var(--dds-space-2) * -1);
29
29
  border-color: transparent;
30
30
  }
31
31
 
@@ -40,3 +40,7 @@
40
40
  .dds-textarea[aria-invalid="true"] {
41
41
  border-color: var(--dds-color-status-danger);
42
42
  }
43
+ .dds-field--error .dds-textarea:focus-visible,
44
+ .dds-textarea[aria-invalid="true"]:focus-visible {
45
+ outline-offset: calc(var(--dds-space-2) * -1.5);
46
+ }
package/dist/components/textfield.css CHANGED
@@ -36,7 +36,7 @@
36
36
 
37
37
  .dds-input:focus-visible {
38
38
  outline: var(--dds-space-2) solid var(--dds-color-border-focus);
39
- outline-offset: 0;
39
+ outline-offset: calc(var(--dds-space-2) * -1);
40
40
  border-color: transparent;
41
41
  }
42
42
 
@@ -58,6 +58,10 @@
58
58
  .dds-input[aria-invalid="true"] {
59
59
  border-color: var(--dds-color-status-danger);
60
60
  }
61
+ .dds-field--error .dds-input:focus-visible,
62
+ .dds-input[aria-invalid="true"]:focus-visible {
63
+ outline-offset: calc(var(--dds-space-2) * -1.5);
64
+ }
61
65
  .dds-field--error .dds-field__help {
62
66
  color: var(--dds-color-status-danger);
63
67
  }
package/dist/components/toast.css CHANGED
@@ -38,7 +38,8 @@
38
38
  width: max-content;
39
39
  inset-inline-end: 0;
40
40
  max-width: min(360px, calc(100vw - var(--dds-space-32)));
41
- animation: dds-toast-in var(--dds-motion-duration-base) var(--dds-motion-easing-enter);
41
+ animation: dds-toast-in var(--dds-motion-duration-base)
42
+ var(--dds-motion-easing-enter);
42
43
  }
43
44
 
44
45
  /* A long unbroken string (a URL, an ID) wraps inside the box instead of
@@ -48,6 +49,42 @@
48
49
  overflow-wrap: anywhere;
49
50
  }
50
51
 
52
+ /* Put the action beneath its message so long localized labels and notices do
53
+ * not compete for the same narrow mobile row. The close control stays beside
54
+ * the first line; the tone indicator/spinner owns the first column. */
55
+ .dds-toast--action {
56
+ display: grid;
57
+ grid-template-columns: auto minmax(0, 1fr) auto;
58
+ align-items: start;
59
+ }
60
+
61
+ .dds-toast--action [data-part="description"] {
62
+ grid-column: 2;
63
+ grid-row: 1;
64
+ }
65
+
66
+ .dds-toast--action [data-part="close-trigger"] {
67
+ grid-column: 3;
68
+ grid-row: 1;
69
+ }
70
+
71
+ .dds-toast--action::before,
72
+ .dds-toast--action > .dds-spinner {
73
+ grid-column: 1;
74
+ grid-row: 1;
75
+ align-self: center;
76
+ }
77
+
78
+ .dds-toast__action {
79
+ grid-column: 2;
80
+ grid-row: 2;
81
+ justify-self: start;
82
+ max-inline-size: 100%;
83
+ white-space: normal;
84
+ overflow-wrap: anywhere;
85
+ text-align: start;
86
+ }
87
+
51
88
  .dds-toast--success::before,
52
89
  .dds-toast--warning::before,
53
90
  .dds-toast--danger::before,
package/dist/dds.css CHANGED
@@ -331,7 +331,7 @@
331
331
 
332
332
  .dds-input:focus-visible {
333
333
  outline: var(--dds-space-2) solid var(--dds-color-border-focus);
334
- outline-offset: 0;
334
+ outline-offset: calc(var(--dds-space-2) * -1);
335
335
  border-color: transparent;
336
336
  }
337
337
 
@@ -353,6 +353,10 @@
353
353
  .dds-input[aria-invalid="true"] {
354
354
  border-color: var(--dds-color-status-danger);
355
355
  }
356
+ .dds-field--error .dds-input:focus-visible,
357
+ .dds-input[aria-invalid="true"]:focus-visible {
358
+ outline-offset: calc(var(--dds-space-2) * -1.5);
359
+ }
356
360
  .dds-field--error .dds-field__help {
357
361
  color: var(--dds-color-status-danger);
358
362
  }
@@ -362,8 +366,9 @@
362
366
  .dds-input__label {font-size:var(--dds-typo-label-font-size);line-height:var(--dds-typo-label-line-height);font-weight:var(--dds-typo-label-font-weight);}
363
367
  .dds-input__control {box-sizing:border-box;inline-size:100%;min-inline-size:0;block-size:var(--dds-space-40);padding-inline:var(--dds-space-12);font:inherit;background:var(--dds-color-bg-default);color:var(--dds-color-text-primary);border:1px solid var(--dds-color-border-strong);border-radius:var(--dds-radius-md);}
364
368
  .dds-input__control::placeholder {color:var(--dds-color-text-muted);}
365
- .dds-input__control:focus-visible {outline:var(--dds-space-2) solid var(--dds-color-border-focus);outline-offset:0;}
369
+ .dds-input__control:focus-visible {outline:var(--dds-space-2) solid var(--dds-color-border-focus);outline-offset:calc(var(--dds-space-2) * -1);}
366
370
  .dds-input__control[aria-invalid="true"] {border-color:var(--dds-color-status-danger);}
371
+ .dds-input__control[aria-invalid="true"]:focus-visible {outline-offset:calc(var(--dds-space-2) * -1.5);}
367
372
  .dds-input:has(.dds-input__search) .dds-input__control {padding-inline-start:var(--dds-space-40);}
368
373
  .dds-input__search {position:absolute;inset-inline-start:var(--dds-space-12);inset-block-end:var(--dds-space-12);color:var(--dds-color-text-secondary);pointer-events:none;}
369
374
  .dds-input[data-label-placement="inside"]:has(.dds-input__search) .dds-input__label {inset-inline-start:var(--dds-space-40);}
@@ -413,7 +418,7 @@
413
418
 
414
419
  .dds-textarea:focus-visible {
415
420
  outline: var(--dds-space-2) solid var(--dds-color-border-focus);
416
- outline-offset: 0;
421
+ outline-offset: calc(var(--dds-space-2) * -1);
417
422
  border-color: transparent;
418
423
  }
419
424
 
@@ -428,6 +433,10 @@
428
433
  .dds-textarea[aria-invalid="true"] {
429
434
  border-color: var(--dds-color-status-danger);
430
435
  }
436
+ .dds-field--error .dds-textarea:focus-visible,
437
+ .dds-textarea[aria-invalid="true"]:focus-visible {
438
+ outline-offset: calc(var(--dds-space-2) * -1.5);
439
+ }
431
440
 
432
441
  /* Select — native <select> with the native arrow replaced. Leaving the OS
433
442
  * arrow in place is a rejection criterion in this house: the same control
@@ -464,7 +473,7 @@
464
473
 
465
474
  .dds-select__input:focus-visible {
466
475
  outline: var(--dds-space-2) solid var(--dds-color-border-focus);
467
- outline-offset: 0;
476
+ outline-offset: calc(var(--dds-space-2) * -1);
468
477
  border-color: transparent;
469
478
  }
470
479
 
@@ -479,6 +488,10 @@
479
488
  .dds-select__input[aria-invalid="true"] {
480
489
  border-color: var(--dds-color-status-danger);
481
490
  }
491
+ .dds-field--error .dds-select__input:focus-visible,
492
+ .dds-select__input[aria-invalid="true"]:focus-visible {
493
+ outline-offset: calc(var(--dds-space-2) * -1.5);
494
+ }
482
495
 
483
496
  /* Chevron glyph geometry (8px box, 1.6px stroke) is drawn, not spaced — the
484
497
  * same allowance as the 6px badge dot. translateY(-70%) centers the drawn
@@ -499,7 +512,8 @@
499
512
  .dds-choice {display:flex;flex-direction:column;gap:var(--dds-space-4);position:relative;min-inline-size:0;font-family:var(--dds-font-family-sans);font-size:var(--dds-typo-body-2-font-size);color:var(--dds-color-text-primary);}
500
513
  .dds-choice-label {font-size:var(--dds-typo-label-font-size);line-height:var(--dds-typo-label-line-height);font-weight:var(--dds-typo-label-font-weight);}
501
514
  .dds-choice-control {position:relative;display:flex;align-items:center;inline-size:100%;min-block-size:var(--dds-space-40);border:1px solid var(--dds-color-border-strong);border-radius:var(--dds-radius-md);background:var(--dds-color-bg-default);}
502
- .dds-choice-control:focus-within {outline:var(--dds-space-2) solid var(--dds-color-border-focus);}
515
+ .dds-choice-control:focus-within {outline:var(--dds-space-2) solid var(--dds-color-border-focus);outline-offset:calc(var(--dds-space-2) * -1);}
516
+ .dds-choice-control[data-invalid]:focus-within {outline-offset:calc(var(--dds-space-2) * -1.5);}
503
517
  /* The control owns the 40px height (border included, like Input and DatePicker); parts stretch inside it. */
504
518
  .dds-choice-input,.dds-choice-trigger {box-sizing:border-box;align-self:stretch;min-inline-size:0;min-block-size:0;border:0;background:transparent;color:inherit;font:inherit;padding-inline:var(--dds-space-12);}
505
519
  .dds-choice-input {flex:1;inline-size:100%;outline:none;}
@@ -549,14 +563,15 @@
549
563
  .dds-date-picker-table [data-outside-range] {color:var(--dds-color-text-secondary);}
550
564
  .dds-date-picker-table [data-part="table-cell-trigger"][data-selected] {background:var(--dds-color-bg-brand);color:var(--dds-color-text-on-brand);}
551
565
  .dds-date-picker-table [data-today]:not([data-selected]) {text-decoration:underline;text-underline-offset:var(--dds-space-4);}
552
- .dds-date-picker-content :focus-visible {outline:var(--dds-space-2) solid var(--dds-color-text-brand);outline-offset:var(--dds-space-2);}
566
+ .dds-date-picker-content :focus-visible {outline:var(--dds-space-2) solid var(--dds-color-border-focus);outline-offset:var(--dds-space-2);}
553
567
  .dds-date-picker-footer {display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--dds-space-12);margin-top:var(--dds-space-12);padding-top:var(--dds-space-12);border-top:calc(var(--dds-space-2) / 2) solid var(--dds-color-border-default);}
554
568
 
555
569
  /* Text box shared by DatePicker, MonthPicker and the DateRangePicker pair: same var(--dds-space-40) DDS input look. */
556
570
  .dds-date-picker-control > input,.dds-date-range-box {box-sizing:border-box;flex:1;min-inline-size:0;block-size:var(--dds-space-40);border:calc(var(--dds-space-2) / 2) solid var(--dds-color-border-strong);border-radius:var(--dds-radius-md);background:var(--dds-color-bg-default);color:var(--dds-color-text-primary);font-family:inherit;font-size:var(--dds-typo-body-2-font-size);font-variant-numeric:tabular-nums;}
557
571
  .dds-date-picker-control > input {padding-inline:var(--dds-space-12);}
558
- .dds-date-picker-control > input:focus-visible,.dds-date-range-box:focus-within {outline:var(--dds-space-2) solid var(--dds-color-border-focus);outline-offset:0;}
572
+ .dds-date-picker-control > input:focus-visible,.dds-date-range-box:focus-within {outline:var(--dds-space-2) solid var(--dds-color-border-focus);outline-offset:calc(var(--dds-space-2) * -1);}
559
573
  .dds-date-picker-control > input[aria-invalid="true"],.dds-date-range-box[data-invalid] {border-color:var(--dds-color-status-danger);}
574
+ .dds-date-picker-control > input[aria-invalid="true"]:focus-visible,.dds-date-range-box[data-invalid]:focus-within {outline-offset:calc(var(--dds-space-2) * -1.5);}
560
575
  .dds-date-picker-control > input:disabled,.dds-date-range-box[data-disabled] {opacity:.45;cursor:not-allowed;background:var(--dds-color-bg-subtle);}
561
576
  .dds-date-picker-control > input::placeholder,.dds-date-range-input::placeholder {color:var(--dds-color-text-muted);}
562
577
  .dds-date-range-box {display:flex;align-items:center;gap:var(--dds-space-8);padding-inline:var(--dds-space-12);}
@@ -647,10 +662,14 @@
647
662
  }
648
663
  .dds-number-input__control:focus-within {
649
664
  outline: var(--dds-space-2) solid var(--dds-color-border-focus);
665
+ outline-offset: calc(var(--dds-space-2) * -1);
650
666
  }
651
667
  .dds-number-input__control[data-invalid] {
652
668
  border-color: var(--dds-color-status-danger);
653
669
  }
670
+ .dds-number-input__control[data-invalid]:focus-within {
671
+ outline-offset: calc(var(--dds-space-2) * -1.5);
672
+ }
654
673
 
655
674
  .dds-number-input__field {
656
675
  flex: 1 1 auto;
@@ -1619,7 +1638,8 @@ dialog.dds-dialog::backdrop {
1619
1638
  width: max-content;
1620
1639
  inset-inline-end: 0;
1621
1640
  max-width: min(360px, calc(100vw - var(--dds-space-32)));
1622
- animation: dds-toast-in var(--dds-motion-duration-base) var(--dds-motion-easing-enter);
1641
+ animation: dds-toast-in var(--dds-motion-duration-base)
1642
+ var(--dds-motion-easing-enter);
1623
1643
  }
1624
1644
 
1625
1645
  /* A long unbroken string (a URL, an ID) wraps inside the box instead of
@@ -1629,6 +1649,42 @@ dialog.dds-dialog::backdrop {
1629
1649
  overflow-wrap: anywhere;
1630
1650
  }
1631
1651
 
1652
+ /* Put the action beneath its message so long localized labels and notices do
1653
+ * not compete for the same narrow mobile row. The close control stays beside
1654
+ * the first line; the tone indicator/spinner owns the first column. */
1655
+ .dds-toast--action {
1656
+ display: grid;
1657
+ grid-template-columns: auto minmax(0, 1fr) auto;
1658
+ align-items: start;
1659
+ }
1660
+
1661
+ .dds-toast--action [data-part="description"] {
1662
+ grid-column: 2;
1663
+ grid-row: 1;
1664
+ }
1665
+
1666
+ .dds-toast--action [data-part="close-trigger"] {
1667
+ grid-column: 3;
1668
+ grid-row: 1;
1669
+ }
1670
+
1671
+ .dds-toast--action::before,
1672
+ .dds-toast--action > .dds-spinner {
1673
+ grid-column: 1;
1674
+ grid-row: 1;
1675
+ align-self: center;
1676
+ }
1677
+
1678
+ .dds-toast__action {
1679
+ grid-column: 2;
1680
+ grid-row: 2;
1681
+ justify-self: start;
1682
+ max-inline-size: 100%;
1683
+ white-space: normal;
1684
+ overflow-wrap: anywhere;
1685
+ text-align: start;
1686
+ }
1687
+
1632
1688
  .dds-toast--success::before,
1633
1689
  .dds-toast--warning::before,
1634
1690
  .dds-toast--danger::before,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@devslab/dds-css",
3
- "version": "0.29.1",
3
+ "version": "0.30.0",
4
4
  "description": "DDS CSS component layer — class-based, framework-neutral, semantic-token-only (spec §4.3 v1 inventory, 20 components)",
5
5
  "type": "module",
6
6
  "license": "SEE LICENSE IN LICENSE",