@devslab/dds-css 0.29.0 → 0.29.2

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 (9) hide show
  1. package/dist/components/choice.css +11 -2
  2. package/dist/components/date-picker.css +3 -2
  3. package/dist/components/input.css +7 -2
  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/dds.css +40 -9
  9. package/package.json +1 -1
package/dist/components/choice.css CHANGED
@@ -1,12 +1,21 @@
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;}
8
9
  .dds-choice-trigger {cursor:pointer;text-align:start;}
9
10
  .dds-choice-control > .dds-choice-trigger:first-child {inline-size:100%;}
11
+ /* SelectPicker keeps a single line in the field; the popup exposes full labels.
12
+ * Other choice adapters may virtualize fixed rows, so wrapping is opt-in here. */
13
+ .dds-select-picker .dds-choice-control {block-size:var(--dds-space-40);}
14
+ .dds-select-picker .dds-choice-trigger {display:flex;align-items:center;gap:var(--dds-space-8);flex:1;}
15
+ .dds-select-picker .dds-choice-value {flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
16
+ .dds-select-picker .dds-choice-indicator {display:flex;align-items:center;flex:none;color:var(--dds-color-text-secondary);pointer-events:none;}
17
+ .dds-select-picker[data-label-placement="inside"] .dds-choice-control {block-size:calc(var(--dds-space-40) + var(--dds-space-16));}
18
+ .dds-select-picker-content .dds-choice-item {padding-block:var(--dds-space-8);white-space:normal;overflow-wrap:anywhere;}
10
19
  .dds-choice-clear {flex:none;min-inline-size:var(--dds-space-32);min-block-size:var(--dds-space-32);padding:var(--dds-space-4);border:0;border-radius:var(--dds-radius-sm);background:transparent;color:var(--dds-color-text-secondary);cursor:pointer;}
11
20
  .dds-choice-content {box-sizing:border-box;min-inline-size:var(--reference-width);max-inline-size:calc(100vw - var(--dds-space-32));max-block-size:min(320px,var(--available-height,320px));overflow:auto;padding:var(--dds-space-4);background:var(--dds-color-bg-elevated);color:var(--dds-color-text-primary);border:1px solid var(--dds-color-border-default);border-radius:var(--dds-radius-md);box-shadow:var(--dds-elevation-2);font-family:var(--dds-font-family-sans);font-size:var(--dds-typo-body-2-font-size);}
12
21
  .dds-choice-item {box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;min-block-size:var(--dds-space-40);padding-inline:var(--dds-space-12);border-radius:var(--dds-radius-sm);cursor:pointer;outline:none;overflow:hidden;white-space:nowrap;}
@@ -26,4 +35,4 @@
26
35
  .dds-choice[data-label-placement="inside"]:not(:focus-within):not([data-has-value]) .dds-choice-input::placeholder {color:transparent;}
27
36
  .dds-choice[data-label-placement="inside"]:not(:focus-within):not([data-has-value]) .dds-choice-value {visibility:hidden;}
28
37
  .dds-choice[data-disabled] {opacity:.45;}
29
- @media(pointer:coarse){.dds-choice-input,.dds-choice-trigger,.dds-choice-clear {min-block-size:44px;min-inline-size:44px;}}
38
+ @media(pointer:coarse){.dds-select-picker .dds-choice-control {min-block-size:44px;}.dds-choice-input,.dds-choice-trigger,.dds-choice-clear {min-block-size:44px;min-inline-size:44px;}}
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,13 @@
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);}
9
+ .dds-input:has(.dds-input__search) .dds-input__control {padding-inline-start:var(--dds-space-40);}
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;}
11
+ .dds-input[data-label-placement="inside"]:has(.dds-input__search) .dds-input__label {inset-inline-start:var(--dds-space-40);}
12
+ .dds-input[data-label-placement="inside"] .dds-input__search {inset-block-end:var(--dds-space-20);}
8
13
  .dds-input:has(.dds-input__clear) .dds-input__control {padding-inline-end:var(--dds-space-48);}
9
14
  .dds-input__clear {position:absolute;inset-inline-end:var(--dds-space-4);inset-block-end:var(--dds-space-4);display:grid;place-items:center;inline-size:var(--dds-space-32);block-size:var(--dds-space-32);padding:0;border:0;border-radius:var(--dds-radius-sm);background:transparent;color:var(--dds-color-text-secondary);font:inherit;cursor:pointer;}
10
15
  .dds-input__clear:hover {background:var(--dds-color-bg-subtle);}
@@ -17,7 +22,7 @@
17
22
  .dds-input[data-label-placement="inside"]:is(:focus-within,[data-filled],:has(input:-webkit-autofill)) .dds-input__label {inset-block-start:var(--dds-space-4);font-size:var(--dds-typo-caption-font-size);}
18
23
  .dds-input[data-label-placement="inside"]:not(:focus-within):not([data-filled]):not(:has(input:-webkit-autofill)) .dds-input__control::placeholder {color:transparent;}
19
24
  .dds-input[data-label-placement="inside"] .dds-input__clear {inset-block-end:var(--dds-space-12);}
20
- .dds-input__control[type="search"]::-webkit-search-cancel-button {appearance:none;}
25
+ .dds-input__control[type="search"]::-webkit-search-cancel-button,.dds-input__control[type="search"]::-webkit-search-decoration {appearance:none;}
21
26
  .dds-input-group {display:flex;align-items:flex-end;gap:var(--dds-space-8);inline-size:100%;min-inline-size:0;color:var(--dds-color-text-primary);}
22
27
  .dds-input-group > .dds-input {flex:1;min-inline-size:0;}
23
28
  .dds-input-group__start,.dds-input-group__end {display:flex;align-items:center;justify-content:center;flex:none;min-block-size:var(--dds-space-40);color:var(--dds-color-text-secondary);}
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/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,13 @@
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);}
372
+ .dds-input:has(.dds-input__search) .dds-input__control {padding-inline-start:var(--dds-space-40);}
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;}
374
+ .dds-input[data-label-placement="inside"]:has(.dds-input__search) .dds-input__label {inset-inline-start:var(--dds-space-40);}
375
+ .dds-input[data-label-placement="inside"] .dds-input__search {inset-block-end:var(--dds-space-20);}
367
376
  .dds-input:has(.dds-input__clear) .dds-input__control {padding-inline-end:var(--dds-space-48);}
368
377
  .dds-input__clear {position:absolute;inset-inline-end:var(--dds-space-4);inset-block-end:var(--dds-space-4);display:grid;place-items:center;inline-size:var(--dds-space-32);block-size:var(--dds-space-32);padding:0;border:0;border-radius:var(--dds-radius-sm);background:transparent;color:var(--dds-color-text-secondary);font:inherit;cursor:pointer;}
369
378
  .dds-input__clear:hover {background:var(--dds-color-bg-subtle);}
@@ -376,7 +385,7 @@
376
385
  .dds-input[data-label-placement="inside"]:is(:focus-within,[data-filled],:has(input:-webkit-autofill)) .dds-input__label {inset-block-start:var(--dds-space-4);font-size:var(--dds-typo-caption-font-size);}
377
386
  .dds-input[data-label-placement="inside"]:not(:focus-within):not([data-filled]):not(:has(input:-webkit-autofill)) .dds-input__control::placeholder {color:transparent;}
378
387
  .dds-input[data-label-placement="inside"] .dds-input__clear {inset-block-end:var(--dds-space-12);}
379
- .dds-input__control[type="search"]::-webkit-search-cancel-button {appearance:none;}
388
+ .dds-input__control[type="search"]::-webkit-search-cancel-button,.dds-input__control[type="search"]::-webkit-search-decoration {appearance:none;}
380
389
  .dds-input-group {display:flex;align-items:flex-end;gap:var(--dds-space-8);inline-size:100%;min-inline-size:0;color:var(--dds-color-text-primary);}
381
390
  .dds-input-group > .dds-input {flex:1;min-inline-size:0;}
382
391
  .dds-input-group__start,.dds-input-group__end {display:flex;align-items:center;justify-content:center;flex:none;min-block-size:var(--dds-space-40);color:var(--dds-color-text-secondary);}
@@ -409,7 +418,7 @@
409
418
 
410
419
  .dds-textarea:focus-visible {
411
420
  outline: var(--dds-space-2) solid var(--dds-color-border-focus);
412
- outline-offset: 0;
421
+ outline-offset: calc(var(--dds-space-2) * -1);
413
422
  border-color: transparent;
414
423
  }
415
424
 
@@ -424,6 +433,10 @@
424
433
  .dds-textarea[aria-invalid="true"] {
425
434
  border-color: var(--dds-color-status-danger);
426
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
+ }
427
440
 
428
441
  /* Select — native <select> with the native arrow replaced. Leaving the OS
429
442
  * arrow in place is a rejection criterion in this house: the same control
@@ -460,7 +473,7 @@
460
473
 
461
474
  .dds-select__input:focus-visible {
462
475
  outline: var(--dds-space-2) solid var(--dds-color-border-focus);
463
- outline-offset: 0;
476
+ outline-offset: calc(var(--dds-space-2) * -1);
464
477
  border-color: transparent;
465
478
  }
466
479
 
@@ -475,6 +488,10 @@
475
488
  .dds-select__input[aria-invalid="true"] {
476
489
  border-color: var(--dds-color-status-danger);
477
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
+ }
478
495
 
479
496
  /* Chevron glyph geometry (8px box, 1.6px stroke) is drawn, not spaced — the
480
497
  * same allowance as the 6px badge dot. translateY(-70%) centers the drawn
@@ -495,12 +512,21 @@
495
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);}
496
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);}
497
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);}
498
- .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);}
499
517
  /* The control owns the 40px height (border included, like Input and DatePicker); parts stretch inside it. */
500
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);}
501
519
  .dds-choice-input {flex:1;inline-size:100%;outline:none;}
502
520
  .dds-choice-trigger {cursor:pointer;text-align:start;}
503
521
  .dds-choice-control > .dds-choice-trigger:first-child {inline-size:100%;}
522
+ /* SelectPicker keeps a single line in the field; the popup exposes full labels.
523
+ * Other choice adapters may virtualize fixed rows, so wrapping is opt-in here. */
524
+ .dds-select-picker .dds-choice-control {block-size:var(--dds-space-40);}
525
+ .dds-select-picker .dds-choice-trigger {display:flex;align-items:center;gap:var(--dds-space-8);flex:1;}
526
+ .dds-select-picker .dds-choice-value {flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
527
+ .dds-select-picker .dds-choice-indicator {display:flex;align-items:center;flex:none;color:var(--dds-color-text-secondary);pointer-events:none;}
528
+ .dds-select-picker[data-label-placement="inside"] .dds-choice-control {block-size:calc(var(--dds-space-40) + var(--dds-space-16));}
529
+ .dds-select-picker-content .dds-choice-item {padding-block:var(--dds-space-8);white-space:normal;overflow-wrap:anywhere;}
504
530
  .dds-choice-clear {flex:none;min-inline-size:var(--dds-space-32);min-block-size:var(--dds-space-32);padding:var(--dds-space-4);border:0;border-radius:var(--dds-radius-sm);background:transparent;color:var(--dds-color-text-secondary);cursor:pointer;}
505
531
  .dds-choice-content {box-sizing:border-box;min-inline-size:var(--reference-width);max-inline-size:calc(100vw - var(--dds-space-32));max-block-size:min(320px,var(--available-height,320px));overflow:auto;padding:var(--dds-space-4);background:var(--dds-color-bg-elevated);color:var(--dds-color-text-primary);border:1px solid var(--dds-color-border-default);border-radius:var(--dds-radius-md);box-shadow:var(--dds-elevation-2);font-family:var(--dds-font-family-sans);font-size:var(--dds-typo-body-2-font-size);}
506
532
  .dds-choice-item {box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;min-block-size:var(--dds-space-40);padding-inline:var(--dds-space-12);border-radius:var(--dds-radius-sm);cursor:pointer;outline:none;overflow:hidden;white-space:nowrap;}
@@ -520,7 +546,7 @@
520
546
  .dds-choice[data-label-placement="inside"]:not(:focus-within):not([data-has-value]) .dds-choice-input::placeholder {color:transparent;}
521
547
  .dds-choice[data-label-placement="inside"]:not(:focus-within):not([data-has-value]) .dds-choice-value {visibility:hidden;}
522
548
  .dds-choice[data-disabled] {opacity:.45;}
523
- @media(pointer:coarse){.dds-choice-input,.dds-choice-trigger,.dds-choice-clear {min-block-size:44px;min-inline-size:44px;}}
549
+ @media(pointer:coarse){.dds-select-picker .dds-choice-control {min-block-size:44px;}.dds-choice-input,.dds-choice-trigger,.dds-choice-clear {min-block-size:44px;min-inline-size:44px;}}
524
550
 
525
551
  /* Ark DatePicker interaction with DDS visual tokens. */
526
552
  .dds-date-picker-control {display:flex;align-items:stretch;gap:var(--dds-space-8);}
@@ -537,14 +563,15 @@
537
563
  .dds-date-picker-table [data-outside-range] {color:var(--dds-color-text-secondary);}
538
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);}
539
565
  .dds-date-picker-table [data-today]:not([data-selected]) {text-decoration:underline;text-underline-offset:var(--dds-space-4);}
540
- .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);}
541
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);}
542
568
 
543
569
  /* Text box shared by DatePicker, MonthPicker and the DateRangePicker pair: same var(--dds-space-40) DDS input look. */
544
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;}
545
571
  .dds-date-picker-control > input {padding-inline:var(--dds-space-12);}
546
- .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);}
547
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);}
548
575
  .dds-date-picker-control > input:disabled,.dds-date-range-box[data-disabled] {opacity:.45;cursor:not-allowed;background:var(--dds-color-bg-subtle);}
549
576
  .dds-date-picker-control > input::placeholder,.dds-date-range-input::placeholder {color:var(--dds-color-text-muted);}
550
577
  .dds-date-range-box {display:flex;align-items:center;gap:var(--dds-space-8);padding-inline:var(--dds-space-12);}
@@ -635,10 +662,14 @@
635
662
  }
636
663
  .dds-number-input__control:focus-within {
637
664
  outline: var(--dds-space-2) solid var(--dds-color-border-focus);
665
+ outline-offset: calc(var(--dds-space-2) * -1);
638
666
  }
639
667
  .dds-number-input__control[data-invalid] {
640
668
  border-color: var(--dds-color-status-danger);
641
669
  }
670
+ .dds-number-input__control[data-invalid]:focus-within {
671
+ outline-offset: calc(var(--dds-space-2) * -1.5);
672
+ }
642
673
 
643
674
  .dds-number-input__field {
644
675
  flex: 1 1 auto;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@devslab/dds-css",
3
- "version": "0.29.0",
3
+ "version": "0.29.2",
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",