@devslab/dds-solid 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.
- package/package.json +4 -4
- package/styles.css +1 -56
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@devslab/dds-solid",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.28.0",
|
|
4
4
|
"description": "Accessible SolidJS primitives for the DevsLab Design System",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE",
|
|
@@ -134,9 +134,9 @@
|
|
|
134
134
|
},
|
|
135
135
|
"dependencies": {
|
|
136
136
|
"@ark-ui/solid": "5.39.3",
|
|
137
|
-
"@devslab/dds-css": "0.
|
|
138
|
-
"@devslab/dds-icons": "0.
|
|
139
|
-
"@devslab/dds-tokens": "0.
|
|
137
|
+
"@devslab/dds-css": "0.28.0",
|
|
138
|
+
"@devslab/dds-icons": "0.28.0",
|
|
139
|
+
"@devslab/dds-tokens": "0.28.0",
|
|
140
140
|
"@tanstack/solid-virtual": "3.13.48",
|
|
141
141
|
"@zag-js/aria-hidden": "1.45.0",
|
|
142
142
|
"@zag-js/focus-trap": "1.45.0"
|
package/styles.css
CHANGED
|
@@ -17,59 +17,4 @@
|
|
|
17
17
|
opacity: var(--opacity);
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
/*
|
|
21
|
-
.dds-date-picker-control {display:flex;align-items:stretch;gap:8px;}
|
|
22
|
-
.dds-date-picker-control input {min-width:0;}
|
|
23
|
-
.dds-date-picker-control .dds-btn {flex-shrink:0;min-width:44px;padding-inline:10px;}
|
|
24
|
-
.dds-date-picker-positioner {z-index:var(--dds-overlay-z-index,1001);}
|
|
25
|
-
.dds-date-picker-content {width:320px;max-width:calc(100vw - 32px);max-height:min(calc(100dvh - 32px),var(--available-height,100dvh));overflow:auto;box-sizing:border-box;padding:16px;background:var(--dds-color-bg-default);color:var(--dds-color-text-primary);border:1px 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);}
|
|
26
|
-
.dds-date-picker-header {display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:600;margin-bottom:12px;}
|
|
27
|
-
.dds-date-picker-table {width:100%;border-collapse:collapse;table-layout:fixed;}
|
|
28
|
-
.dds-date-picker-table th {font-size:12px;font-weight:500;color:var(--dds-color-text-secondary);height:32px;}
|
|
29
|
-
.dds-date-picker-table td {padding:0;text-align:center;}
|
|
30
|
-
.dds-date-picker-table [data-part="table-cell-trigger"] {display:flex;align-items:center;justify-content:center;width:100%;height:40px;border:0;border-radius:var(--dds-radius-sm);font:inherit;color:inherit;background:transparent;cursor:pointer;}
|
|
31
|
-
.dds-date-picker-table [data-part="table-cell-trigger"]:hover {background:var(--dds-color-bg-brand-subtle);}
|
|
32
|
-
.dds-date-picker-table [data-outside-range] {color:var(--dds-color-text-secondary);}
|
|
33
|
-
.dds-date-picker-table [data-part="table-cell-trigger"][data-selected] {background:var(--dds-color-bg-brand);color:var(--dds-color-text-on-brand);}
|
|
34
|
-
.dds-date-picker-table [data-today]:not([data-selected]) {text-decoration:underline;text-underline-offset:4px;}
|
|
35
|
-
.dds-date-picker-content :focus-visible {outline:2px solid var(--dds-color-text-brand);outline-offset:2px;}
|
|
36
|
-
.dds-date-picker-footer {display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--dds-color-border-default);}
|
|
37
|
-
|
|
38
|
-
/* Text box shared by DatePicker, MonthPicker and the DateRangePicker pair: same 40px DDS input look. */
|
|
39
|
-
.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:1px 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;}
|
|
40
|
-
.dds-date-picker-control > input {padding-inline:var(--dds-space-12);}
|
|
41
|
-
.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;}
|
|
42
|
-
.dds-date-picker-control > input[aria-invalid="true"],.dds-date-range-box[data-invalid] {border-color:var(--dds-color-status-danger);}
|
|
43
|
-
.dds-date-picker-control > input:disabled,.dds-date-range-box[data-disabled] {opacity:.45;cursor:not-allowed;background:var(--dds-color-bg-subtle);}
|
|
44
|
-
.dds-date-picker-control > input::placeholder,.dds-date-range-input::placeholder {color:var(--dds-color-text-muted);}
|
|
45
|
-
.dds-date-range-box {display:flex;align-items:center;gap:var(--dds-space-8);padding-inline:var(--dds-space-12);}
|
|
46
|
-
.dds-date-range-box[hidden] {display:none;}
|
|
47
|
-
.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;}
|
|
48
|
-
.dds-date-range-input:disabled {cursor:not-allowed;}
|
|
49
|
-
.dds-date-range-separator {flex:none;color:var(--dds-color-text-secondary);}
|
|
50
|
-
.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);}
|
|
51
|
-
@media (pointer:coarse) {.dds-date-picker-control > input,.dds-date-range-box {min-block-size:44px;}}
|
|
52
|
-
|
|
53
|
-
/* Range selection: ends filled, days between tinted, hover previews the end being chosen. */
|
|
54
|
-
.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;}
|
|
55
|
-
.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);}
|
|
56
|
-
.dds-date-picker-table [data-part="table-cell-trigger"][data-hover-range-end]:not([data-range-start]) {box-shadow:inset 0 0 0 2px var(--dds-color-bg-brand);border-radius:var(--dds-radius-sm);}
|
|
57
|
-
.dds-date-picker-presets {display:flex;flex-wrap:wrap;gap:var(--dds-space-8);flex:1 1 100%;}
|
|
58
|
-
.dds-date-picker-presets[hidden] {display:none;}
|
|
59
|
-
.dds-date-picker-footer > [data-part="clear-trigger"] {margin-inline-start:auto;}
|
|
60
|
-
/* Days and months outside min/max read as unavailable, not as ordinary choices. */
|
|
61
|
-
.dds-date-picker-table [data-part="table-cell-trigger"][data-disabled] {opacity:.45;cursor:not-allowed;background:transparent;}
|
|
62
|
-
|
|
63
|
-
/* Month grid (MonthPicker): 3 columns × 4 rows, year paged in the header. */
|
|
64
|
-
.dds-date-picker-year {font-variant-numeric:tabular-nums;}
|
|
65
|
-
.dds-date-picker-table--months td {padding:var(--dds-space-4);}
|
|
66
|
-
.dds-date-picker-table--months [data-part="table-cell-trigger"] {height:var(--dds-space-40);}
|
|
67
|
-
|
|
68
|
-
/* Standalone Calendar shares the DatePicker view without popup positioning. */
|
|
69
|
-
.dds-calendar {display:block;}
|
|
70
|
-
.dds-date-picker--hidden > .dds-field__label {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
|
|
71
|
-
.dds-date-picker--inside {position:relative;}
|
|
72
|
-
.dds-date-picker--inside > .dds-field__label {position:absolute;inset-inline-start:12px;inset-block-start:18px;z-index:1;pointer-events:none;}
|
|
73
|
-
.dds-date-picker--inside:focus-within > .dds-field__label,.dds-date-picker--inside[data-filled] > .dds-field__label {inset-block-start:2px;font-size:var(--dds-typo-caption-font-size);}
|
|
74
|
-
.dds-date-picker--inside .dds-date-picker-control input {height:56px;padding-block:20px 4px;}
|
|
75
|
-
.dds-date-picker--inside:not(:focus-within):not([data-filled]) input::placeholder {color:transparent;}
|
|
20
|
+
/* Calendar visuals are shared by dds-css/date-picker.css (React, Solid and Vue). */
|