@devslab/dds-css 0.26.0 → 0.28.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 (3) hide show
  1. package/dist/components/date-picker.css +56 -0
  2. package/dist/dds.css +57 -0
  3. package/package.json +1 -1
package/dist/components/date-picker.css ADDED
@@ -0,0 +1,56 @@
1
+ /* Ark DatePicker interaction with DDS visual tokens. */
2
+ .dds-date-picker-control {display:flex;align-items:stretch;gap:var(--dds-space-8);}
3
+ .dds-date-picker-control input {min-width:0;}
4
+ .dds-date-picker-control .dds-btn {flex-shrink:0;min-width:calc(var(--dds-space-40) + var(--dds-space-4));padding-inline:calc(var(--dds-space-8) + var(--dds-space-2));}
5
+ .dds-date-picker-positioner {z-index:var(--dds-overlay-z-index,1001);}
6
+ .dds-date-picker-content {width:calc(var(--dds-space-40) * 8);max-width:calc(100vw - var(--dds-space-32));max-height:min(calc(100dvh - var(--dds-space-32)),var(--available-height,100dvh));overflow:auto;box-sizing:border-box;padding:var(--dds-space-16);background:var(--dds-color-bg-default);color:var(--dds-color-text-primary);border:calc(var(--dds-space-2) / 2) solid var(--dds-color-border-default);border-radius:var(--dds-radius-md);font-family:var(--dds-font-family-sans);font-size:var(--dds-typo-body-2-font-size);}
7
+ .dds-date-picker-header {display:flex;align-items:center;justify-content:space-between;gap:var(--dds-space-12);font-weight:600;margin-bottom:var(--dds-space-12);}
8
+ .dds-date-picker-table {width:100%;border-collapse:collapse;table-layout:fixed;}
9
+ .dds-date-picker-table th {font-size:var(--dds-space-12);font-weight:500;color:var(--dds-color-text-secondary);height:var(--dds-space-32);}
10
+ .dds-date-picker-table td {padding:0;text-align:center;}
11
+ .dds-date-picker-table [data-part="table-cell-trigger"] {display:flex;align-items:center;justify-content:center;width:100%;height:var(--dds-space-40);border:0;border-radius:var(--dds-radius-sm);font:inherit;color:inherit;background:transparent;cursor:pointer;}
12
+ .dds-date-picker-table [data-part="table-cell-trigger"]:hover {background:var(--dds-color-bg-brand-subtle);}
13
+ .dds-date-picker-table [data-outside-range] {color:var(--dds-color-text-secondary);}
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
+ .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);}
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
+
19
+ /* Text box shared by DatePicker, MonthPicker and the DateRangePicker pair: same var(--dds-space-40) DDS input look. */
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
+ .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;}
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:disabled,.dds-date-range-box[data-disabled] {opacity:.45;cursor:not-allowed;background:var(--dds-color-bg-subtle);}
25
+ .dds-date-picker-control > input::placeholder,.dds-date-range-input::placeholder {color:var(--dds-color-text-muted);}
26
+ .dds-date-range-box {display:flex;align-items:center;gap:var(--dds-space-8);padding-inline:var(--dds-space-12);}
27
+ .dds-date-range-box[hidden] {display:none;}
28
+ .dds-date-range-input {flex:1;inline-size:100%;min-inline-size:0;block-size:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-variant-numeric:tabular-nums;outline:none;}
29
+ .dds-date-range-input:disabled {cursor:not-allowed;}
30
+ .dds-date-range-separator {flex:none;color:var(--dds-color-text-secondary);}
31
+ .dds-field__error {font-size:var(--dds-typo-caption-font-size);line-height:var(--dds-typo-caption-line-height);color:var(--dds-color-status-danger);}
32
+ @media (pointer:coarse) {.dds-date-picker-control > input,.dds-date-range-box {min-block-size:calc(var(--dds-space-40) + var(--dds-space-4));}}
33
+
34
+ /* Range selection: ends filled, days between tinted, hover previews the end being chosen. */
35
+ .dds-date-picker-table [data-part="table-cell-trigger"][data-in-range] {background:var(--dds-color-bg-brand-subtle);color:var(--dds-color-text-primary);border-radius:0;}
36
+ .dds-date-picker-table [data-part="table-cell-trigger"]:is([data-range-start],[data-range-end]) {background:var(--dds-color-bg-brand);color:var(--dds-color-text-on-brand);border-radius:var(--dds-radius-sm);}
37
+ .dds-date-picker-table [data-part="table-cell-trigger"][data-hover-range-end]:not([data-range-start]) {box-shadow:inset 0 0 0 var(--dds-space-2) var(--dds-color-bg-brand);border-radius:var(--dds-radius-sm);}
38
+ .dds-date-picker-presets {display:flex;flex-wrap:wrap;gap:var(--dds-space-8);flex:1 1 100%;}
39
+ .dds-date-picker-presets[hidden] {display:none;}
40
+ .dds-date-picker-footer > [data-part="clear-trigger"] {margin-inline-start:auto;}
41
+ /* Days and months outside min/max read as unavailable, not as ordinary choices. */
42
+ .dds-date-picker-table [data-part="table-cell-trigger"][data-disabled] {opacity:.45;cursor:not-allowed;background:transparent;}
43
+
44
+ /* Month grid (MonthPicker): 3 columns × 4 rows, year paged in the header. */
45
+ .dds-date-picker-year {font-variant-numeric:tabular-nums;}
46
+ .dds-date-picker-table--months td {padding:var(--dds-space-4);}
47
+ .dds-date-picker-table--months [data-part="table-cell-trigger"] {height:var(--dds-space-40);}
48
+
49
+ /* Standalone Calendar shares the DatePicker view without popup positioning. */
50
+ .dds-calendar {display:block;}
51
+ .dds-date-picker--hidden > .dds-field__label {position:absolute;width:calc(var(--dds-space-2) / 2);height:calc(var(--dds-space-2) / 2);overflow:hidden;clip-path:inset(50%);}
52
+ .dds-date-picker--inside {position:relative;}
53
+ .dds-date-picker--inside > .dds-field__label {position:absolute;inset-inline-start:var(--dds-space-12);inset-block-start:calc(var(--dds-space-16) + var(--dds-space-2));z-index:1;pointer-events:none;}
54
+ .dds-date-picker--inside:focus-within > .dds-field__label,.dds-date-picker--inside[data-filled] > .dds-field__label {inset-block-start:var(--dds-space-2);font-size:var(--dds-typo-caption-font-size);}
55
+ .dds-date-picker--inside .dds-date-picker-control input {height:calc(var(--dds-space-40) + var(--dds-space-16));padding-block:var(--dds-space-20) var(--dds-space-4);}
56
+ .dds-date-picker--inside:not(:focus-within):not([data-filled]) input::placeholder {color:transparent;}
package/dist/dds.css CHANGED
@@ -522,6 +522,63 @@
522
522
  .dds-choice[data-disabled] {opacity:.45;}
523
523
  @media(pointer:coarse){.dds-choice-input,.dds-choice-trigger,.dds-choice-clear {min-block-size:44px;min-inline-size:44px;}}
524
524
 
525
+ /* Ark DatePicker interaction with DDS visual tokens. */
526
+ .dds-date-picker-control {display:flex;align-items:stretch;gap:var(--dds-space-8);}
527
+ .dds-date-picker-control input {min-width:0;}
528
+ .dds-date-picker-control .dds-btn {flex-shrink:0;min-width:calc(var(--dds-space-40) + var(--dds-space-4));padding-inline:calc(var(--dds-space-8) + var(--dds-space-2));}
529
+ .dds-date-picker-positioner {z-index:var(--dds-overlay-z-index,1001);}
530
+ .dds-date-picker-content {width:calc(var(--dds-space-40) * 8);max-width:calc(100vw - var(--dds-space-32));max-height:min(calc(100dvh - var(--dds-space-32)),var(--available-height,100dvh));overflow:auto;box-sizing:border-box;padding:var(--dds-space-16);background:var(--dds-color-bg-default);color:var(--dds-color-text-primary);border:calc(var(--dds-space-2) / 2) solid var(--dds-color-border-default);border-radius:var(--dds-radius-md);font-family:var(--dds-font-family-sans);font-size:var(--dds-typo-body-2-font-size);}
531
+ .dds-date-picker-header {display:flex;align-items:center;justify-content:space-between;gap:var(--dds-space-12);font-weight:600;margin-bottom:var(--dds-space-12);}
532
+ .dds-date-picker-table {width:100%;border-collapse:collapse;table-layout:fixed;}
533
+ .dds-date-picker-table th {font-size:var(--dds-space-12);font-weight:500;color:var(--dds-color-text-secondary);height:var(--dds-space-32);}
534
+ .dds-date-picker-table td {padding:0;text-align:center;}
535
+ .dds-date-picker-table [data-part="table-cell-trigger"] {display:flex;align-items:center;justify-content:center;width:100%;height:var(--dds-space-40);border:0;border-radius:var(--dds-radius-sm);font:inherit;color:inherit;background:transparent;cursor:pointer;}
536
+ .dds-date-picker-table [data-part="table-cell-trigger"]:hover {background:var(--dds-color-bg-brand-subtle);}
537
+ .dds-date-picker-table [data-outside-range] {color:var(--dds-color-text-secondary);}
538
+ .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
+ .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);}
541
+ .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
+
543
+ /* Text box shared by DatePicker, MonthPicker and the DateRangePicker pair: same var(--dds-space-40) DDS input look. */
544
+ .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
+ .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;}
547
+ .dds-date-picker-control > input[aria-invalid="true"],.dds-date-range-box[data-invalid] {border-color:var(--dds-color-status-danger);}
548
+ .dds-date-picker-control > input:disabled,.dds-date-range-box[data-disabled] {opacity:.45;cursor:not-allowed;background:var(--dds-color-bg-subtle);}
549
+ .dds-date-picker-control > input::placeholder,.dds-date-range-input::placeholder {color:var(--dds-color-text-muted);}
550
+ .dds-date-range-box {display:flex;align-items:center;gap:var(--dds-space-8);padding-inline:var(--dds-space-12);}
551
+ .dds-date-range-box[hidden] {display:none;}
552
+ .dds-date-range-input {flex:1;inline-size:100%;min-inline-size:0;block-size:100%;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-variant-numeric:tabular-nums;outline:none;}
553
+ .dds-date-range-input:disabled {cursor:not-allowed;}
554
+ .dds-date-range-separator {flex:none;color:var(--dds-color-text-secondary);}
555
+ .dds-field__error {font-size:var(--dds-typo-caption-font-size);line-height:var(--dds-typo-caption-line-height);color:var(--dds-color-status-danger);}
556
+ @media (pointer:coarse) {.dds-date-picker-control > input,.dds-date-range-box {min-block-size:calc(var(--dds-space-40) + var(--dds-space-4));}}
557
+
558
+ /* Range selection: ends filled, days between tinted, hover previews the end being chosen. */
559
+ .dds-date-picker-table [data-part="table-cell-trigger"][data-in-range] {background:var(--dds-color-bg-brand-subtle);color:var(--dds-color-text-primary);border-radius:0;}
560
+ .dds-date-picker-table [data-part="table-cell-trigger"]:is([data-range-start],[data-range-end]) {background:var(--dds-color-bg-brand);color:var(--dds-color-text-on-brand);border-radius:var(--dds-radius-sm);}
561
+ .dds-date-picker-table [data-part="table-cell-trigger"][data-hover-range-end]:not([data-range-start]) {box-shadow:inset 0 0 0 var(--dds-space-2) var(--dds-color-bg-brand);border-radius:var(--dds-radius-sm);}
562
+ .dds-date-picker-presets {display:flex;flex-wrap:wrap;gap:var(--dds-space-8);flex:1 1 100%;}
563
+ .dds-date-picker-presets[hidden] {display:none;}
564
+ .dds-date-picker-footer > [data-part="clear-trigger"] {margin-inline-start:auto;}
565
+ /* Days and months outside min/max read as unavailable, not as ordinary choices. */
566
+ .dds-date-picker-table [data-part="table-cell-trigger"][data-disabled] {opacity:.45;cursor:not-allowed;background:transparent;}
567
+
568
+ /* Month grid (MonthPicker): 3 columns × 4 rows, year paged in the header. */
569
+ .dds-date-picker-year {font-variant-numeric:tabular-nums;}
570
+ .dds-date-picker-table--months td {padding:var(--dds-space-4);}
571
+ .dds-date-picker-table--months [data-part="table-cell-trigger"] {height:var(--dds-space-40);}
572
+
573
+ /* Standalone Calendar shares the DatePicker view without popup positioning. */
574
+ .dds-calendar {display:block;}
575
+ .dds-date-picker--hidden > .dds-field__label {position:absolute;width:calc(var(--dds-space-2) / 2);height:calc(var(--dds-space-2) / 2);overflow:hidden;clip-path:inset(50%);}
576
+ .dds-date-picker--inside {position:relative;}
577
+ .dds-date-picker--inside > .dds-field__label {position:absolute;inset-inline-start:var(--dds-space-12);inset-block-start:calc(var(--dds-space-16) + var(--dds-space-2));z-index:1;pointer-events:none;}
578
+ .dds-date-picker--inside:focus-within > .dds-field__label,.dds-date-picker--inside[data-filled] > .dds-field__label {inset-block-start:var(--dds-space-2);font-size:var(--dds-typo-caption-font-size);}
579
+ .dds-date-picker--inside .dds-date-picker-control input {height:calc(var(--dds-space-40) + var(--dds-space-16));padding-block:var(--dds-space-20) var(--dds-space-4);}
580
+ .dds-date-picker--inside:not(:focus-within):not([data-filled]) input::placeholder {color:transparent;}
581
+
525
582
  /* TimePicker: the Combobox structure from choice.css (same 40px control, list
526
583
  * and focus), with fixed-width digits and a clock button instead of the caret. */
527
584
  .dds-time-picker .dds-choice-input,.dds-time-picker .dds-choice-item {font-variant-numeric:tabular-nums;}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@devslab/dds-css",
3
- "version": "0.26.0",
3
+ "version": "0.28.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",