@devslab/dds-css 0.21.2 → 0.22.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 (6) hide show
  1. package/dist/components/choice.css +27 -0
  2. package/dist/components/input.css +24 -0
  3. package/dist/components/menu.css +9 -0
  4. package/dist/components/popover.css +3 -0
  5. package/dist/dds.css +67 -0
  6. package/package.json +1 -1
package/dist/components/choice.css ADDED
@@ -0,0 +1,27 @@
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
+ .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);}
4
+ .dds-choice-control:focus-within {outline:var(--dds-space-2) solid var(--dds-color-border-focus);}
5
+ .dds-choice-input,.dds-choice-trigger {box-sizing:border-box;min-inline-size:0;min-block-size:var(--dds-space-40);border:0;background:transparent;color:inherit;font:inherit;padding-inline:var(--dds-space-12);}
6
+ .dds-choice-input {flex:1;inline-size:100%;outline:none;}
7
+ .dds-choice-trigger {cursor:pointer;text-align:start;}
8
+ .dds-choice-control > .dds-choice-trigger:first-child {inline-size:100%;}
9
+ .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;}
10
+ .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);}
11
+ .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;}
12
+ .dds-choice-item[data-highlighted] {background:var(--dds-color-bg-brand-subtle);}
13
+ .dds-choice-item[data-state="checked"],.dds-choice-item[data-selected] {font-weight:600;}
14
+ .dds-choice-item[data-disabled] {opacity:.45;cursor:not-allowed;}
15
+ .dds-choice-description {font-size:var(--dds-typo-caption-font-size);color:var(--dds-color-text-secondary);overflow:hidden;text-overflow:ellipsis;}
16
+ .dds-choice-status {padding:var(--dds-space-12);color:var(--dds-color-text-secondary);}
17
+ .dds-choice-status:empty {padding:0;}
18
+ .dds-choice-validation {position:absolute;inline-size:1px;block-size:1px;padding:0;border:0;clip-path:inset(50%);overflow:hidden;}
19
+ .dds-choice[data-label-placement="hidden"] .dds-choice-label {position:absolute;inline-size:1px;block-size:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap;}
20
+ .dds-choice[data-label-placement="inside"] .dds-choice-label {position:absolute;z-index:1;inset-inline-start:var(--dds-space-12);inset-block-start:var(--dds-space-20);pointer-events:none;color:var(--dds-color-text-secondary);}
21
+ .dds-choice[data-label-placement="inside"] .dds-choice-control {min-block-size:calc(var(--dds-space-40) + var(--dds-space-16));}
22
+ .dds-choice[data-label-placement="inside"] :is(.dds-choice-input,.dds-choice-trigger) {padding-block-start:var(--dds-space-16);}
23
+ .dds-choice[data-label-placement="inside"]:is(:focus-within,[data-has-value]) .dds-choice-label {inset-block-start:var(--dds-space-4);font-size:var(--dds-typo-caption-font-size);}
24
+ .dds-choice[data-label-placement="inside"]:not(:focus-within):not([data-has-value]) .dds-choice-input::placeholder {color:transparent;}
25
+ .dds-choice[data-label-placement="inside"]:not(:focus-within):not([data-has-value]) .dds-choice-value {visibility:hidden;}
26
+ .dds-choice[data-disabled] {opacity:.45;}
27
+ @media(pointer:coarse){.dds-choice-input,.dds-choice-trigger,.dds-choice-clear {min-block-size:44px;min-inline-size:44px;}}
package/dist/components/input.css ADDED
@@ -0,0 +1,24 @@
1
+ /* Attribute scoping preserves the existing native input.dds-input contract. */
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
+ .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);}
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;}
7
+ .dds-input__control[aria-invalid="true"] {border-color:var(--dds-color-status-danger);}
8
+ .dds-input:has(.dds-input__clear) .dds-input__control {padding-inline-end:var(--dds-space-48);}
9
+ .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
+ .dds-input__clear:hover {background:var(--dds-color-bg-subtle);}
11
+ .dds-input__clear:focus-visible {outline:var(--dds-space-2) solid var(--dds-color-border-focus);outline-offset:var(--dds-space-2);}
12
+ .dds-input[data-disabled] {opacity:.45;cursor:not-allowed;}
13
+ .dds-input[data-disabled] .dds-input__control {cursor:not-allowed;background:var(--dds-color-bg-subtle);}
14
+ .dds-input[data-label-placement="hidden"] .dds-input__label {position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
15
+ .dds-input[data-label-placement="inside"] .dds-input__control {block-size:calc(var(--dds-space-40) + var(--dds-space-16));padding-block:var(--dds-space-20) var(--dds-space-4);}
16
+ .dds-input[data-label-placement="inside"] .dds-input__label {position:absolute;inset-inline-start:var(--dds-space-12);inset-block-start:var(--dds-space-20);pointer-events:none;color:var(--dds-color-text-secondary);}
17
+ .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
+ .dds-input[data-label-placement="inside"]:not(:focus-within):not([data-filled]):not(:has(input:-webkit-autofill)) .dds-input__control::placeholder {color:transparent;}
19
+ .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;}
21
+ .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
+ .dds-input-group > .dds-input {flex:1;min-inline-size:0;}
23
+ .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);}
24
+ @media (pointer:coarse) {.dds-input__control {min-block-size:44px;}.dds-input__clear {inline-size:44px;block-size:44px;inset-block-end:0;inset-inline-end:0;}.dds-input[data-label-placement="inside"] .dds-input__clear {inset-block-end:var(--dds-space-4);}}
package/dist/components/menu.css ADDED
@@ -0,0 +1,9 @@
1
+ /* Dialog currently occupies layer 1000. Consumers can set the common overlay layer within a custom shell. */
2
+ .dds-menu-positioner,.dds-popover-positioner,.dds-choice-positioner,.dds-date-picker-positioner {z-index:var(--dds-overlay-z-index,1001);color:var(--dds-color-text-primary);}
3
+ .dds-menu {box-sizing:border-box;min-inline-size:180px;max-inline-size:calc(100vw - var(--dds-space-32));max-block-size:var(--available-height,80vh);overflow:auto;padding:var(--dds-space-4);border:1px solid var(--dds-color-border-default);border-radius:var(--dds-radius-md);background:var(--dds-color-bg-elevated);color:var(--dds-color-text-primary);box-shadow:var(--dds-elevation-2);font-family:var(--dds-font-family-sans);font-size:var(--dds-typo-body-2-font-size);}
4
+ .dds-menu [role^="menuitem"] {display:flex;align-items:center;gap:var(--dds-space-8);min-block-size:var(--dds-space-40);padding-inline:var(--dds-space-12);border-radius:var(--dds-radius-sm);cursor:pointer;outline:none;text-decoration:none;color:inherit;}
5
+ .dds-menu [role^="menuitem"][data-highlighted] {background:var(--dds-color-bg-brand-subtle);}
6
+ .dds-menu [data-disabled] {opacity:.45;cursor:not-allowed;}
7
+ .dds-menu [data-part="item-group-label"] {padding:var(--dds-space-8) var(--dds-space-12);font-size:var(--dds-typo-caption-font-size);font-weight:600;color:var(--dds-color-text-secondary);}
8
+ .dds-menu [role="separator"] {block-size:1px;background:var(--dds-color-border-default);margin-block:var(--dds-space-4);}
9
+ @media(pointer:coarse){.dds-menu [role^="menuitem"]{min-block-size:44px;}}
package/dist/components/popover.css ADDED
@@ -0,0 +1,3 @@
1
+ .dds-popover {box-sizing:border-box;inline-size:max-content;max-inline-size:calc(100vw - var(--dds-space-32));max-block-size:var(--available-height,80vh);overflow:auto;padding:var(--dds-space-16);border:1px solid var(--dds-color-border-default);border-radius:var(--dds-radius-md);background:var(--dds-color-bg-elevated);color:var(--dds-color-text-primary);box-shadow:var(--dds-elevation-2);font-family:var(--dds-font-family-sans);font-size:var(--dds-typo-body-2-font-size);}
2
+ .dds-popover [data-part="title"] {margin:0 0 var(--dds-space-8);font-size:var(--dds-typo-title-3-font-size);}
3
+ .dds-popover [data-part="description"] {margin-block-end:var(--dds-space-12);color:var(--dds-color-text-secondary);}
package/dist/dds.css CHANGED
@@ -302,6 +302,31 @@
302
302
  color: var(--dds-color-status-danger);
303
303
  }
304
304
 
305
+ /* Attribute scoping preserves the existing native input.dds-input contract. */
306
+ .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);}
307
+ .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);}
308
+ .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);}
309
+ .dds-input__control::placeholder {color:var(--dds-color-text-muted);}
310
+ .dds-input__control:focus-visible {outline:var(--dds-space-2) solid var(--dds-color-border-focus);outline-offset:0;}
311
+ .dds-input__control[aria-invalid="true"] {border-color:var(--dds-color-status-danger);}
312
+ .dds-input:has(.dds-input__clear) .dds-input__control {padding-inline-end:var(--dds-space-48);}
313
+ .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;}
314
+ .dds-input__clear:hover {background:var(--dds-color-bg-subtle);}
315
+ .dds-input__clear:focus-visible {outline:var(--dds-space-2) solid var(--dds-color-border-focus);outline-offset:var(--dds-space-2);}
316
+ .dds-input[data-disabled] {opacity:.45;cursor:not-allowed;}
317
+ .dds-input[data-disabled] .dds-input__control {cursor:not-allowed;background:var(--dds-color-bg-subtle);}
318
+ .dds-input[data-label-placement="hidden"] .dds-input__label {position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
319
+ .dds-input[data-label-placement="inside"] .dds-input__control {block-size:calc(var(--dds-space-40) + var(--dds-space-16));padding-block:var(--dds-space-20) var(--dds-space-4);}
320
+ .dds-input[data-label-placement="inside"] .dds-input__label {position:absolute;inset-inline-start:var(--dds-space-12);inset-block-start:var(--dds-space-20);pointer-events:none;color:var(--dds-color-text-secondary);}
321
+ .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);}
322
+ .dds-input[data-label-placement="inside"]:not(:focus-within):not([data-filled]):not(:has(input:-webkit-autofill)) .dds-input__control::placeholder {color:transparent;}
323
+ .dds-input[data-label-placement="inside"] .dds-input__clear {inset-block-end:var(--dds-space-12);}
324
+ .dds-input__control[type="search"]::-webkit-search-cancel-button {appearance:none;}
325
+ .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);}
326
+ .dds-input-group > .dds-input {flex:1;min-inline-size:0;}
327
+ .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);}
328
+ @media (pointer:coarse) {.dds-input__control {min-block-size:44px;}.dds-input__clear {inline-size:44px;block-size:44px;inset-block-end:0;inset-inline-end:0;}.dds-input[data-label-placement="inside"] .dds-input__clear {inset-block-end:var(--dds-space-4);}}
329
+
305
330
  /* Textarea — the multi-line member of the TextField family: it lives in the
306
331
  * same .dds-field wrapper and shares label/help/error behavior with .dds-input.
307
332
  * Row rule from the house UI discipline: a textarea gets its own row, never a
@@ -412,6 +437,34 @@
412
437
  pointer-events: none;
413
438
  }
414
439
 
440
+ .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);}
441
+ .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);}
442
+ .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);}
443
+ .dds-choice-control:focus-within {outline:var(--dds-space-2) solid var(--dds-color-border-focus);}
444
+ .dds-choice-input,.dds-choice-trigger {box-sizing:border-box;min-inline-size:0;min-block-size:var(--dds-space-40);border:0;background:transparent;color:inherit;font:inherit;padding-inline:var(--dds-space-12);}
445
+ .dds-choice-input {flex:1;inline-size:100%;outline:none;}
446
+ .dds-choice-trigger {cursor:pointer;text-align:start;}
447
+ .dds-choice-control > .dds-choice-trigger:first-child {inline-size:100%;}
448
+ .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;}
449
+ .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);}
450
+ .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;}
451
+ .dds-choice-item[data-highlighted] {background:var(--dds-color-bg-brand-subtle);}
452
+ .dds-choice-item[data-state="checked"],.dds-choice-item[data-selected] {font-weight:600;}
453
+ .dds-choice-item[data-disabled] {opacity:.45;cursor:not-allowed;}
454
+ .dds-choice-description {font-size:var(--dds-typo-caption-font-size);color:var(--dds-color-text-secondary);overflow:hidden;text-overflow:ellipsis;}
455
+ .dds-choice-status {padding:var(--dds-space-12);color:var(--dds-color-text-secondary);}
456
+ .dds-choice-status:empty {padding:0;}
457
+ .dds-choice-validation {position:absolute;inline-size:1px;block-size:1px;padding:0;border:0;clip-path:inset(50%);overflow:hidden;}
458
+ .dds-choice[data-label-placement="hidden"] .dds-choice-label {position:absolute;inline-size:1px;block-size:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap;}
459
+ .dds-choice[data-label-placement="inside"] .dds-choice-label {position:absolute;z-index:1;inset-inline-start:var(--dds-space-12);inset-block-start:var(--dds-space-20);pointer-events:none;color:var(--dds-color-text-secondary);}
460
+ .dds-choice[data-label-placement="inside"] .dds-choice-control {min-block-size:calc(var(--dds-space-40) + var(--dds-space-16));}
461
+ .dds-choice[data-label-placement="inside"] :is(.dds-choice-input,.dds-choice-trigger) {padding-block-start:var(--dds-space-16);}
462
+ .dds-choice[data-label-placement="inside"]:is(:focus-within,[data-has-value]) .dds-choice-label {inset-block-start:var(--dds-space-4);font-size:var(--dds-typo-caption-font-size);}
463
+ .dds-choice[data-label-placement="inside"]:not(:focus-within):not([data-has-value]) .dds-choice-input::placeholder {color:transparent;}
464
+ .dds-choice[data-label-placement="inside"]:not(:focus-within):not([data-has-value]) .dds-choice-value {visibility:hidden;}
465
+ .dds-choice[data-disabled] {opacity:.45;}
466
+ @media(pointer:coarse){.dds-choice-input,.dds-choice-trigger,.dds-choice-clear {min-block-size:44px;min-inline-size:44px;}}
467
+
415
468
  /* Checkbox / Radio — one class for both; the input's own type decides the
416
469
  * shape (square + tick vs circle + dot), so markup never has to declare the
417
470
  * shape twice. The control stays a real <input> (keyboard, form data, AT
@@ -1060,6 +1113,20 @@ dialog.dds-dialog::backdrop {
1060
1113
  gap: var(--dds-space-8);
1061
1114
  }
1062
1115
 
1116
+ /* Dialog currently occupies layer 1000. Consumers can set the common overlay layer within a custom shell. */
1117
+ .dds-menu-positioner,.dds-popover-positioner,.dds-choice-positioner,.dds-date-picker-positioner {z-index:var(--dds-overlay-z-index,1001);color:var(--dds-color-text-primary);}
1118
+ .dds-menu {box-sizing:border-box;min-inline-size:180px;max-inline-size:calc(100vw - var(--dds-space-32));max-block-size:var(--available-height,80vh);overflow:auto;padding:var(--dds-space-4);border:1px solid var(--dds-color-border-default);border-radius:var(--dds-radius-md);background:var(--dds-color-bg-elevated);color:var(--dds-color-text-primary);box-shadow:var(--dds-elevation-2);font-family:var(--dds-font-family-sans);font-size:var(--dds-typo-body-2-font-size);}
1119
+ .dds-menu [role^="menuitem"] {display:flex;align-items:center;gap:var(--dds-space-8);min-block-size:var(--dds-space-40);padding-inline:var(--dds-space-12);border-radius:var(--dds-radius-sm);cursor:pointer;outline:none;text-decoration:none;color:inherit;}
1120
+ .dds-menu [role^="menuitem"][data-highlighted] {background:var(--dds-color-bg-brand-subtle);}
1121
+ .dds-menu [data-disabled] {opacity:.45;cursor:not-allowed;}
1122
+ .dds-menu [data-part="item-group-label"] {padding:var(--dds-space-8) var(--dds-space-12);font-size:var(--dds-typo-caption-font-size);font-weight:600;color:var(--dds-color-text-secondary);}
1123
+ .dds-menu [role="separator"] {block-size:1px;background:var(--dds-color-border-default);margin-block:var(--dds-space-4);}
1124
+ @media(pointer:coarse){.dds-menu [role^="menuitem"]{min-block-size:44px;}}
1125
+
1126
+ .dds-popover {box-sizing:border-box;inline-size:max-content;max-inline-size:calc(100vw - var(--dds-space-32));max-block-size:var(--available-height,80vh);overflow:auto;padding:var(--dds-space-16);border:1px solid var(--dds-color-border-default);border-radius:var(--dds-radius-md);background:var(--dds-color-bg-elevated);color:var(--dds-color-text-primary);box-shadow:var(--dds-elevation-2);font-family:var(--dds-font-family-sans);font-size:var(--dds-typo-body-2-font-size);}
1127
+ .dds-popover [data-part="title"] {margin:0 0 var(--dds-space-8);font-size:var(--dds-typo-title-3-font-size);}
1128
+ .dds-popover [data-part="description"] {margin-block-end:var(--dds-space-12);color:var(--dds-color-text-secondary);}
1129
+
1063
1130
  /* Toast — transient notice. Region markup:
1064
1131
  * .dds-toast-region[role="status"] (polite) — use role="alert" per-toast
1065
1132
  * only for danger. Toasts stack bottom-end; entry animates with
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@devslab/dds-css",
3
- "version": "0.21.2",
3
+ "version": "0.22.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",