@devslab/dds-css 0.29.0 → 0.29.1

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 (4) hide show
  1. package/dist/components/choice.css +9 -1
  2. package/dist/components/input.css +5 -1
  3. package/dist/dds.css +14 -2
  4. package/package.json +1 -1
package/dist/components/choice.css CHANGED
@@ -7,6 +7,14 @@
7
7
  .dds-choice-input {flex:1;inline-size:100%;outline:none;}
8
8
  .dds-choice-trigger {cursor:pointer;text-align:start;}
9
9
  .dds-choice-control > .dds-choice-trigger:first-child {inline-size:100%;}
10
+ /* SelectPicker keeps a single line in the field; the popup exposes full labels.
11
+ * Other choice adapters may virtualize fixed rows, so wrapping is opt-in here. */
12
+ .dds-select-picker .dds-choice-control {block-size:var(--dds-space-40);}
13
+ .dds-select-picker .dds-choice-trigger {display:flex;align-items:center;gap:var(--dds-space-8);flex:1;}
14
+ .dds-select-picker .dds-choice-value {flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
15
+ .dds-select-picker .dds-choice-indicator {display:flex;align-items:center;flex:none;color:var(--dds-color-text-secondary);pointer-events:none;}
16
+ .dds-select-picker[data-label-placement="inside"] .dds-choice-control {block-size:calc(var(--dds-space-40) + var(--dds-space-16));}
17
+ .dds-select-picker-content .dds-choice-item {padding-block:var(--dds-space-8);white-space:normal;overflow-wrap:anywhere;}
10
18
  .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
19
  .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
20
  .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 +34,4 @@
26
34
  .dds-choice[data-label-placement="inside"]:not(:focus-within):not([data-has-value]) .dds-choice-input::placeholder {color:transparent;}
27
35
  .dds-choice[data-label-placement="inside"]:not(:focus-within):not([data-has-value]) .dds-choice-value {visibility:hidden;}
28
36
  .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;}}
37
+ @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/input.css CHANGED
@@ -5,6 +5,10 @@
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:0;}
7
7
  .dds-input__control[aria-invalid="true"] {border-color:var(--dds-color-status-danger);}
8
+ .dds-input:has(.dds-input__search) .dds-input__control {padding-inline-start:var(--dds-space-40);}
9
+ .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
+ .dds-input[data-label-placement="inside"]:has(.dds-input__search) .dds-input__label {inset-inline-start:var(--dds-space-40);}
11
+ .dds-input[data-label-placement="inside"] .dds-input__search {inset-block-end:var(--dds-space-20);}
8
12
  .dds-input:has(.dds-input__clear) .dds-input__control {padding-inline-end:var(--dds-space-48);}
9
13
  .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
14
  .dds-input__clear:hover {background:var(--dds-color-bg-subtle);}
@@ -17,7 +21,7 @@
17
21
  .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
22
  .dds-input[data-label-placement="inside"]:not(:focus-within):not([data-filled]):not(:has(input:-webkit-autofill)) .dds-input__control::placeholder {color:transparent;}
19
23
  .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;}
24
+ .dds-input__control[type="search"]::-webkit-search-cancel-button,.dds-input__control[type="search"]::-webkit-search-decoration {appearance:none;}
21
25
  .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
26
  .dds-input-group > .dds-input {flex:1;min-inline-size:0;}
23
27
  .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/dds.css CHANGED
@@ -364,6 +364,10 @@
364
364
  .dds-input__control::placeholder {color:var(--dds-color-text-muted);}
365
365
  .dds-input__control:focus-visible {outline:var(--dds-space-2) solid var(--dds-color-border-focus);outline-offset:0;}
366
366
  .dds-input__control[aria-invalid="true"] {border-color:var(--dds-color-status-danger);}
367
+ .dds-input:has(.dds-input__search) .dds-input__control {padding-inline-start:var(--dds-space-40);}
368
+ .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
+ .dds-input[data-label-placement="inside"]:has(.dds-input__search) .dds-input__label {inset-inline-start:var(--dds-space-40);}
370
+ .dds-input[data-label-placement="inside"] .dds-input__search {inset-block-end:var(--dds-space-20);}
367
371
  .dds-input:has(.dds-input__clear) .dds-input__control {padding-inline-end:var(--dds-space-48);}
368
372
  .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
373
  .dds-input__clear:hover {background:var(--dds-color-bg-subtle);}
@@ -376,7 +380,7 @@
376
380
  .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
381
  .dds-input[data-label-placement="inside"]:not(:focus-within):not([data-filled]):not(:has(input:-webkit-autofill)) .dds-input__control::placeholder {color:transparent;}
378
382
  .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;}
383
+ .dds-input__control[type="search"]::-webkit-search-cancel-button,.dds-input__control[type="search"]::-webkit-search-decoration {appearance:none;}
380
384
  .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
385
  .dds-input-group > .dds-input {flex:1;min-inline-size:0;}
382
386
  .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);}
@@ -501,6 +505,14 @@
501
505
  .dds-choice-input {flex:1;inline-size:100%;outline:none;}
502
506
  .dds-choice-trigger {cursor:pointer;text-align:start;}
503
507
  .dds-choice-control > .dds-choice-trigger:first-child {inline-size:100%;}
508
+ /* SelectPicker keeps a single line in the field; the popup exposes full labels.
509
+ * Other choice adapters may virtualize fixed rows, so wrapping is opt-in here. */
510
+ .dds-select-picker .dds-choice-control {block-size:var(--dds-space-40);}
511
+ .dds-select-picker .dds-choice-trigger {display:flex;align-items:center;gap:var(--dds-space-8);flex:1;}
512
+ .dds-select-picker .dds-choice-value {flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
513
+ .dds-select-picker .dds-choice-indicator {display:flex;align-items:center;flex:none;color:var(--dds-color-text-secondary);pointer-events:none;}
514
+ .dds-select-picker[data-label-placement="inside"] .dds-choice-control {block-size:calc(var(--dds-space-40) + var(--dds-space-16));}
515
+ .dds-select-picker-content .dds-choice-item {padding-block:var(--dds-space-8);white-space:normal;overflow-wrap:anywhere;}
504
516
  .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
517
  .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
518
  .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 +532,7 @@
520
532
  .dds-choice[data-label-placement="inside"]:not(:focus-within):not([data-has-value]) .dds-choice-input::placeholder {color:transparent;}
521
533
  .dds-choice[data-label-placement="inside"]:not(:focus-within):not([data-has-value]) .dds-choice-value {visibility:hidden;}
522
534
  .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;}}
535
+ @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
536
 
525
537
  /* Ark DatePicker interaction with DDS visual tokens. */
526
538
  .dds-date-picker-control {display:flex;align-items:stretch;gap:var(--dds-space-8);}
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.1",
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",