@devslab/dds-css 0.32.1 → 0.33.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 (11) hide show
  1. package/dist/components/checkbox-radio.css +1 -1
  2. package/dist/components/choice.css +1 -1
  3. package/dist/components/date-picker.css +1 -1
  4. package/dist/components/input.css +1 -1
  5. package/dist/components/number-input.css +1 -1
  6. package/dist/components/segmented-control.css +1 -1
  7. package/dist/components/select.css +1 -1
  8. package/dist/components/textarea.css +1 -1
  9. package/dist/components/textfield.css +1 -1
  10. package/dist/dds.css +9 -9
  11. package/package.json +1 -1
package/dist/components/checkbox-radio.css CHANGED
@@ -28,7 +28,7 @@
28
28
  padding: 0;
29
29
  width: 18px;
30
30
  height: 18px;
31
- border: 1px solid var(--dds-color-border-strong);
31
+ border: 1px solid var(--dds-color-border-control, var(--dds-color-border-strong));
32
32
  border-radius: var(--dds-radius-sm);
33
33
  background: var(--dds-color-bg-default);
34
34
  cursor: inherit;
package/dist/components/choice.css CHANGED
@@ -1,6 +1,6 @@
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
- .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);}
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-control, var(--dds-color-border-strong));border-radius:var(--dds-radius-md);background:var(--dds-color-bg-default);}
4
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
5
  .dds-choice-control[data-invalid]:focus-within {outline-offset:calc(var(--dds-space-2) * -1.5);}
6
6
  /* The control owns the 40px height (border included, like Input and DatePicker); parts stretch inside it. */
package/dist/components/date-picker.css CHANGED
@@ -18,7 +18,7 @@
18
18
  .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);}
19
19
 
20
20
  /* Text box shared by DatePicker, MonthPicker and the DateRangePicker pair: same var(--dds-space-40) DDS input look. */
21
- .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
+ .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-control, 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;}
22
22
  .dds-date-picker-control > input {padding-inline:var(--dds-space-12);}
23
23
  .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);}
24
24
  .dds-date-picker-control > input[aria-invalid="true"],.dds-date-range-box[data-invalid] {border-color:var(--dds-color-status-danger);}
package/dist/components/input.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /* Attribute scoping preserves the existing native input.dds-input contract. */
2
2
  .dds-input[data-label-placement] {position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--dds-space-4);inline-size:100%;block-size:auto;height:auto;padding:0;border:0;background:transparent;color:var(--dds-color-text-primary);}
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
- .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);}
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-control, var(--dds-color-border-strong));border-radius:var(--dds-radius-md);}
5
5
  .dds-input__control::placeholder {color:var(--dds-color-text-muted);}
6
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);}
package/dist/components/number-input.css CHANGED
@@ -40,7 +40,7 @@
40
40
  inline-size: 100%;
41
41
  min-inline-size: 0;
42
42
  block-size: var(--dds-space-40);
43
- border: 1px solid var(--dds-color-border-strong);
43
+ border: 1px solid var(--dds-color-border-control, var(--dds-color-border-strong));
44
44
  border-radius: var(--dds-radius-md);
45
45
  background: var(--dds-color-bg-default);
46
46
  overflow: hidden;
package/dist/components/segmented-control.css CHANGED
@@ -36,7 +36,7 @@
36
36
  max-inline-size: 100%;
37
37
  block-size: var(--dds-space-40);
38
38
  padding: var(--dds-space-2);
39
- border: 1px solid var(--dds-color-border-strong);
39
+ border: 1px solid var(--dds-color-border-control, var(--dds-color-border-strong));
40
40
  border-radius: var(--dds-radius-md);
41
41
  background: var(--dds-color-bg-subtle);
42
42
  /* Too many segments for the width scroll inside the track instead of
package/dist/components/select.css CHANGED
@@ -26,7 +26,7 @@
26
26
  padding-inline: var(--dds-space-12) var(--dds-space-32);
27
27
  background: var(--dds-color-bg-default);
28
28
  color: var(--dds-color-text-primary);
29
- border: 1px solid var(--dds-color-border-strong);
29
+ border: 1px solid var(--dds-color-border-control, var(--dds-color-border-strong));
30
30
  border-radius: var(--dds-radius-md);
31
31
  cursor: pointer;
32
32
  }
package/dist/components/textarea.css CHANGED
@@ -14,7 +14,7 @@
14
14
  padding: var(--dds-space-8) var(--dds-space-12);
15
15
  background: var(--dds-color-bg-default);
16
16
  color: var(--dds-color-text-primary);
17
- border: 1px solid var(--dds-color-border-strong);
17
+ border: 1px solid var(--dds-color-border-control, var(--dds-color-border-strong));
18
18
  border-radius: var(--dds-radius-md);
19
19
  resize: vertical;
20
20
  }
package/dist/components/textfield.css CHANGED
@@ -26,7 +26,7 @@
26
26
  padding: 0 var(--dds-space-12);
27
27
  background: var(--dds-color-bg-default);
28
28
  color: var(--dds-color-text-primary);
29
- border: 1px solid var(--dds-color-border-strong);
29
+ border: 1px solid var(--dds-color-border-control, var(--dds-color-border-strong));
30
30
  border-radius: var(--dds-radius-md);
31
31
  }
32
32
 
package/dist/dds.css CHANGED
@@ -338,7 +338,7 @@
338
338
  padding: 0 var(--dds-space-12);
339
339
  background: var(--dds-color-bg-default);
340
340
  color: var(--dds-color-text-primary);
341
- border: 1px solid var(--dds-color-border-strong);
341
+ border: 1px solid var(--dds-color-border-control, var(--dds-color-border-strong));
342
342
  border-radius: var(--dds-radius-md);
343
343
  }
344
344
 
@@ -381,7 +381,7 @@
381
381
  /* Attribute scoping preserves the existing native input.dds-input contract. */
382
382
  .dds-input[data-label-placement] {position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--dds-space-4);inline-size:100%;block-size:auto;height:auto;padding:0;border:0;background:transparent;color:var(--dds-color-text-primary);}
383
383
  .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);}
384
- .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);}
384
+ .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-control, var(--dds-color-border-strong));border-radius:var(--dds-radius-md);}
385
385
  .dds-input__control::placeholder {color:var(--dds-color-text-muted);}
386
386
  .dds-input__control:focus-visible {outline:var(--dds-space-2) solid var(--dds-color-border-focus);outline-offset:calc(var(--dds-space-2) * -1);}
387
387
  .dds-input__control[aria-invalid="true"] {border-color:var(--dds-color-status-danger);}
@@ -425,7 +425,7 @@
425
425
  padding: var(--dds-space-8) var(--dds-space-12);
426
426
  background: var(--dds-color-bg-default);
427
427
  color: var(--dds-color-text-primary);
428
- border: 1px solid var(--dds-color-border-strong);
428
+ border: 1px solid var(--dds-color-border-control, var(--dds-color-border-strong));
429
429
  border-radius: var(--dds-radius-md);
430
430
  resize: vertical;
431
431
  }
@@ -484,7 +484,7 @@
484
484
  padding-inline: var(--dds-space-12) var(--dds-space-32);
485
485
  background: var(--dds-color-bg-default);
486
486
  color: var(--dds-color-text-primary);
487
- border: 1px solid var(--dds-color-border-strong);
487
+ border: 1px solid var(--dds-color-border-control, var(--dds-color-border-strong));
488
488
  border-radius: var(--dds-radius-md);
489
489
  cursor: pointer;
490
490
  }
@@ -529,7 +529,7 @@
529
529
 
530
530
  .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);}
531
531
  .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);}
532
- .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);}
532
+ .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-control, var(--dds-color-border-strong));border-radius:var(--dds-radius-md);background:var(--dds-color-bg-default);}
533
533
  .dds-choice-control:focus-within {outline:var(--dds-space-2) solid var(--dds-color-border-focus);outline-offset:calc(var(--dds-space-2) * -1);}
534
534
  .dds-choice-control[data-invalid]:focus-within {outline-offset:calc(var(--dds-space-2) * -1.5);}
535
535
  /* The control owns the 40px height (border included, like Input and DatePicker); parts stretch inside it. */
@@ -586,7 +586,7 @@
586
586
  .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);}
587
587
 
588
588
  /* Text box shared by DatePicker, MonthPicker and the DateRangePicker pair: same var(--dds-space-40) DDS input look. */
589
- .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;}
589
+ .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-control, 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;}
590
590
  .dds-date-picker-control > input {padding-inline:var(--dds-space-12);}
591
591
  .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);}
592
592
  .dds-date-picker-control > input[aria-invalid="true"],.dds-date-range-box[data-invalid] {border-color:var(--dds-color-status-danger);}
@@ -674,7 +674,7 @@
674
674
  inline-size: 100%;
675
675
  min-inline-size: 0;
676
676
  block-size: var(--dds-space-40);
677
- border: 1px solid var(--dds-color-border-strong);
677
+ border: 1px solid var(--dds-color-border-control, var(--dds-color-border-strong));
678
678
  border-radius: var(--dds-radius-md);
679
679
  background: var(--dds-color-bg-default);
680
680
  overflow: hidden;
@@ -814,7 +814,7 @@
814
814
  max-inline-size: 100%;
815
815
  block-size: var(--dds-space-40);
816
816
  padding: var(--dds-space-2);
817
- border: 1px solid var(--dds-color-border-strong);
817
+ border: 1px solid var(--dds-color-border-control, var(--dds-color-border-strong));
818
818
  border-radius: var(--dds-radius-md);
819
819
  background: var(--dds-color-bg-subtle);
820
820
  /* Too many segments for the width scroll inside the track instead of
@@ -971,7 +971,7 @@
971
971
  padding: 0;
972
972
  width: 18px;
973
973
  height: 18px;
974
- border: 1px solid var(--dds-color-border-strong);
974
+ border: 1px solid var(--dds-color-border-control, var(--dds-color-border-strong));
975
975
  border-radius: var(--dds-radius-sm);
976
976
  background: var(--dds-color-bg-default);
977
977
  cursor: inherit;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@devslab/dds-css",
3
- "version": "0.32.1",
3
+ "version": "0.33.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",