@triptease/tt-calendar 6.1.1 → 6.2.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/dist/cjs/src/DateSelectionContext.js +40 -0
- package/dist/cjs/src/DateSelectionContext.js.map +1 -0
- package/dist/cjs/src/Styles.js +267 -0
- package/dist/cjs/src/Styles.js.map +1 -0
- package/dist/cjs/src/TtCalendar.js +480 -0
- package/dist/cjs/src/TtCalendar.js.map +1 -0
- package/dist/cjs/src/helpers.js +9 -0
- package/dist/cjs/src/helpers.js.map +1 -0
- package/dist/cjs/src/index.js +6 -0
- package/dist/cjs/src/index.js.map +1 -0
- package/dist/cjs/src/tt-calendar.js +11 -0
- package/dist/cjs/src/tt-calendar.js.map +1 -0
- package/dist/esm/src/TtCalendar.d.ts +10 -1
- package/dist/esm/src/TtCalendar.js +114 -69
- package/dist/esm/src/TtCalendar.js.map +1 -1
- package/dist/esm/test/tt-calendar.test.js +62 -0
- package/dist/esm/test/tt-calendar.test.js.map +1 -1
- package/package.json +6 -2
- package/CHANGELOG.md +0 -117
- package/custom-elements.json +0 -668
- package/demo/index.html +0 -23
- package/test/tt-calendar.test.ts +0 -255
- package/tsconfig.cjs.json +0 -9
- package/tsconfig.json +0 -9
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.isDateRangeSelection = exports.isSingleDateSelection = exports.DateSelectionContext = exports.DateRangeSelectionEvent = exports.DateSelectionEvent = void 0;
|
|
4
|
+
const context_1 = require("@lit/context");
|
|
5
|
+
class DateSelectionEvent extends CustomEvent {
|
|
6
|
+
constructor(dateSelection) {
|
|
7
|
+
super('date-selection', {
|
|
8
|
+
bubbles: true,
|
|
9
|
+
composed: true,
|
|
10
|
+
detail: dateSelection,
|
|
11
|
+
});
|
|
12
|
+
}
|
|
13
|
+
static is(event) {
|
|
14
|
+
return event.type === 'date-selection';
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
exports.DateSelectionEvent = DateSelectionEvent;
|
|
18
|
+
class DateRangeSelectionEvent extends CustomEvent {
|
|
19
|
+
constructor(dateRangeSelection) {
|
|
20
|
+
super('date-range-selection', {
|
|
21
|
+
bubbles: true,
|
|
22
|
+
composed: true,
|
|
23
|
+
detail: dateRangeSelection,
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
static is(event) {
|
|
27
|
+
return event.type === 'date-range-selection';
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
exports.DateRangeSelectionEvent = DateRangeSelectionEvent;
|
|
31
|
+
exports.DateSelectionContext = (0, context_1.createContext)(Symbol('date-selection-context'));
|
|
32
|
+
const isSingleDateSelection = (selection) => {
|
|
33
|
+
return 'selectedDate' in selection;
|
|
34
|
+
};
|
|
35
|
+
exports.isSingleDateSelection = isSingleDateSelection;
|
|
36
|
+
const isDateRangeSelection = (selection) => {
|
|
37
|
+
return 'range' in selection;
|
|
38
|
+
};
|
|
39
|
+
exports.isDateRangeSelection = isDateRangeSelection;
|
|
40
|
+
//# sourceMappingURL=DateSelectionContext.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DateSelectionContext.js","sourceRoot":"","sources":["../../../src/DateSelectionContext.ts"],"names":[],"mappings":";;;AAAA,0CAA6C;AAuB7C,MAAa,kBAAmB,SAAQ,WAAmB;IACzD,YAAY,aAAqB;QAC/B,KAAK,CAAC,gBAAgB,EAAE;YACtB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,aAAa;SACtB,CAAC,CAAC;IACL,CAAC;IAEM,MAAM,CAAC,EAAE,CAAC,KAAY;QAC3B,OAAO,KAAK,CAAC,IAAI,KAAK,gBAAgB,CAAC;IACzC,CAAC;CACF;AAZD,gDAYC;AAED,MAAa,uBAAwB,SAAQ,WAAsB;IACjE,YAAY,kBAA6B;QACvC,KAAK,CAAC,sBAAsB,EAAE;YAC5B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,kBAAkB;SAC3B,CAAC,CAAC;IACL,CAAC;IAEM,MAAM,CAAC,EAAE,CAAC,KAAY;QAC3B,OAAO,KAAK,CAAC,IAAI,KAAK,sBAAsB,CAAC;IAC/C,CAAC;CACF;AAZD,0DAYC;AAEY,QAAA,oBAAoB,GAAG,IAAA,uBAAa,EAAgB,MAAM,CAAC,wBAAwB,CAAC,CAAC,CAAC;AAE5F,MAAM,qBAAqB,GAAG,CAAC,SAAwB,EAAoC,EAAE;IAClG,OAAO,cAAc,IAAI,SAAS,CAAC;AACrC,CAAC,CAAC;AAFW,QAAA,qBAAqB,yBAEhC;AAEK,MAAM,oBAAoB,GAAG,CAAC,SAAwB,EAAmC,EAAE;IAChG,OAAO,OAAO,IAAI,SAAS,CAAC;AAC9B,CAAC,CAAC;AAFW,QAAA,oBAAoB,wBAE/B","sourcesContent":["import { createContext } from '@lit/context';\n\nexport interface SingleDateSelection {\n selectedDate: Date | null;\n minDate?: Date;\n maxDate?: Date;\n timezone?: string;\n}\n\nexport interface DateRange {\n startDate?: string;\n endDate?: string;\n}\n\nexport interface DateRangeSelection {\n range: DateRange;\n minDate?: Date;\n maxDate?: Date;\n timezone?: string;\n}\n\nexport type DateSelection = SingleDateSelection | DateRangeSelection;\n\nexport class DateSelectionEvent extends CustomEvent<string> {\n constructor(dateSelection: string) {\n super('date-selection', {\n bubbles: true,\n composed: true,\n detail: dateSelection,\n });\n }\n\n public static is(event: Event): event is DateSelectionEvent {\n return event.type === 'date-selection';\n }\n}\n\nexport class DateRangeSelectionEvent extends CustomEvent<DateRange> {\n constructor(dateRangeSelection: DateRange) {\n super('date-range-selection', {\n bubbles: true,\n composed: true,\n detail: dateRangeSelection,\n });\n }\n\n public static is(event: Event): event is DateRangeSelectionEvent {\n return event.type === 'date-range-selection';\n }\n}\n\nexport const DateSelectionContext = createContext<DateSelection>(Symbol('date-selection-context'));\n\nexport const isSingleDateSelection = (selection: DateSelection): selection is SingleDateSelection => {\n return 'selectedDate' in selection;\n};\n\nexport const isDateRangeSelection = (selection: DateSelection): selection is DateRangeSelection => {\n return 'range' in selection;\n};\n"]}
|
|
@@ -0,0 +1,267 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.styles = void 0;
|
|
4
|
+
const lit_1 = require("lit");
|
|
5
|
+
exports.styles = (0, lit_1.css) `
|
|
6
|
+
:host {
|
|
7
|
+
display: block;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
button {
|
|
11
|
+
appearance: none;
|
|
12
|
+
padding: 0;
|
|
13
|
+
border-width: 0;
|
|
14
|
+
background-color: transparent;
|
|
15
|
+
border-radius: var(--space-scale-1);
|
|
16
|
+
padding-block: var(--space-scale-1);
|
|
17
|
+
padding-inline: var(--space-scale-2);
|
|
18
|
+
|
|
19
|
+
&.compact {
|
|
20
|
+
padding-block: 0;
|
|
21
|
+
padding-inline: 0;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&:hover {
|
|
25
|
+
cursor: pointer;
|
|
26
|
+
box-shadow:
|
|
27
|
+
0px 2px 5px 0px rgba(60, 66, 87, 0.08),
|
|
28
|
+
0px 1px 1px 0px rgba(0, 0, 0, 0.12);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
&:focus {
|
|
32
|
+
outline: 1px solid var(--color-primary-400);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
svg {
|
|
36
|
+
display: block;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&.right svg {
|
|
40
|
+
transform: rotate(180deg);
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
h2 {
|
|
45
|
+
font-weight: var(--font-weight-semibold);
|
|
46
|
+
color: var(--color-text-500);
|
|
47
|
+
font-size: var(--font-size-400);
|
|
48
|
+
display: contents;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.calendar-header {
|
|
52
|
+
display: flex;
|
|
53
|
+
justify-content: space-between;
|
|
54
|
+
align-items: center;
|
|
55
|
+
padding: 24px 24px 16px 24px;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.calendar-grid {
|
|
59
|
+
text-align: center;
|
|
60
|
+
border-top: var(--color-border-200) 1px solid;
|
|
61
|
+
padding: 0 24px;
|
|
62
|
+
|
|
63
|
+
table {
|
|
64
|
+
width: 100%;
|
|
65
|
+
border-collapse: collapse;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
tbody {
|
|
69
|
+
display: grid;
|
|
70
|
+
row-gap: 4px;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
tr {
|
|
74
|
+
display: grid;
|
|
75
|
+
grid-template-columns: repeat(7, 48px);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
th {
|
|
79
|
+
color: var(--color-text-400);
|
|
80
|
+
font-size: var(--font-size-100);
|
|
81
|
+
font-weight: var(--font-weight-normal);
|
|
82
|
+
line-height: 20px;
|
|
83
|
+
padding: 16px 0;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
td {
|
|
87
|
+
font-size: var(--font-size-100);
|
|
88
|
+
font-weight: var(--font-weight-normal);
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.calendar-footer {
|
|
93
|
+
display: flex;
|
|
94
|
+
flex-direction: column;
|
|
95
|
+
//gap: var(--space-scale-2);
|
|
96
|
+
|
|
97
|
+
svg {
|
|
98
|
+
vertical-align: middle;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.actions {
|
|
102
|
+
display: flex;
|
|
103
|
+
flex: 1 0 auto;
|
|
104
|
+
padding: var(--space-scale-2) var(--space-scale-3) var(--space-scale-3);
|
|
105
|
+
|
|
106
|
+
button {
|
|
107
|
+
background-color: var(--color-surface-200);
|
|
108
|
+
border-color: var(--color-primary-400);
|
|
109
|
+
border-width: 1px;
|
|
110
|
+
border-style: solid;
|
|
111
|
+
color: var(--color-primary-400);
|
|
112
|
+
font-weight: var(--font-weight-semibold);
|
|
113
|
+
width: 100%;
|
|
114
|
+
height: 40px;
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.day {
|
|
120
|
+
aspect-ratio: 1;
|
|
121
|
+
cursor: pointer;
|
|
122
|
+
position: relative; // For focus outline
|
|
123
|
+
box-sizing: border-box;
|
|
124
|
+
height: auto;
|
|
125
|
+
display: flex;
|
|
126
|
+
align-items: center;
|
|
127
|
+
justify-content: center;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.day.in-range {
|
|
131
|
+
background: var(--color-primary-300);
|
|
132
|
+
|
|
133
|
+
&:first-child {
|
|
134
|
+
border-top-left-radius: var(--space-scale-1);
|
|
135
|
+
border-bottom-left-radius: var(--space-scale-1);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
&:last-child {
|
|
139
|
+
border-top-right-radius: var(--space-scale-1);
|
|
140
|
+
border-bottom-right-radius: var(--space-scale-1);
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.day[aria-disabled='true'] {
|
|
145
|
+
opacity: 0.7;
|
|
146
|
+
background-color: var(--color-surface-300);
|
|
147
|
+
cursor: not-allowed;
|
|
148
|
+
pointer-events: none;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.day.start-date:has(+ .in-range):after {
|
|
152
|
+
content: ' ';
|
|
153
|
+
position: absolute;
|
|
154
|
+
top: 0;
|
|
155
|
+
left: 0;
|
|
156
|
+
width: 100%;
|
|
157
|
+
height: 100%;
|
|
158
|
+
background: var(--color-primary-300);
|
|
159
|
+
z-index: -1;
|
|
160
|
+
border-radius: var(--space-scale-1);
|
|
161
|
+
border-bottom-right-radius: 0;
|
|
162
|
+
border-top-right-radius: 0;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.day.in-range + :is(.day:hover, .day:not(.in-range)):before {
|
|
166
|
+
content: ' ';
|
|
167
|
+
position: absolute;
|
|
168
|
+
top: 0;
|
|
169
|
+
left: 0;
|
|
170
|
+
width: 100%;
|
|
171
|
+
height: 100%;
|
|
172
|
+
background: var(--color-primary-300);
|
|
173
|
+
z-index: -1;
|
|
174
|
+
border-radius: var(--space-scale-1);
|
|
175
|
+
border-bottom-left-radius: 0;
|
|
176
|
+
border-top-left-radius: 0;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.day[aria-selected='true']:not(.in-range),
|
|
180
|
+
.day:hover {
|
|
181
|
+
background: var(--color-primary-400);
|
|
182
|
+
color: var(--color-text-100);
|
|
183
|
+
border-radius: var(--space-scale-1);
|
|
184
|
+
font-weight: var(--font-weight-semibold);
|
|
185
|
+
|
|
186
|
+
&.in-range {
|
|
187
|
+
&:before {
|
|
188
|
+
content: ' ';
|
|
189
|
+
position: absolute;
|
|
190
|
+
top: 0;
|
|
191
|
+
left: 0;
|
|
192
|
+
width: 100%;
|
|
193
|
+
height: 100%;
|
|
194
|
+
background: var(--color-primary-300);
|
|
195
|
+
z-index: -1;
|
|
196
|
+
border-radius: var(--bg-border-radius, 0);
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
&:first-child {
|
|
200
|
+
--bg-border-radius: var(--space-scale-1) 0 0 var(--space-scale-1);
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
&:last-child {
|
|
204
|
+
--bg-border-radius: 0 var(--space-scale-1) var(--space-scale-1) 0;
|
|
205
|
+
}
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.side-panel-wrapper {
|
|
210
|
+
border-right: 1px solid var(--color-border-200, var(--color-surface-300));
|
|
211
|
+
display: flex;
|
|
212
|
+
align-items: start;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.side-panel {
|
|
216
|
+
padding: var(--space-scale-3);
|
|
217
|
+
grid-template-columns: 1fr;
|
|
218
|
+
display: grid;
|
|
219
|
+
gap: var(--space-scale-3);
|
|
220
|
+
|
|
221
|
+
button {
|
|
222
|
+
font-size: var(--font-size-200);
|
|
223
|
+
text-wrap: nowrap;
|
|
224
|
+
line-height: var(--space-scale-3);
|
|
225
|
+
padding-block: 0;
|
|
226
|
+
padding-inline: 0;
|
|
227
|
+
|
|
228
|
+
&:hover {
|
|
229
|
+
color: var(--color-primary-400);
|
|
230
|
+
box-shadow: none;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
&[aria-selected='true'] {
|
|
234
|
+
color: var(--color-primary-400);
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
details {
|
|
240
|
+
border-top: 1px solid var(--color-border-200);
|
|
241
|
+
font-size: var(--font-size-100);
|
|
242
|
+
font-weight: var(--font-weight-normal);
|
|
243
|
+
padding: var(--space-scale-2) var(--space-scale-3) var(--space-scale-3);
|
|
244
|
+
|
|
245
|
+
summary {
|
|
246
|
+
font-weight: var(--font-weight-semibold);
|
|
247
|
+
position: relative;
|
|
248
|
+
display: flex;
|
|
249
|
+
align-items: center;
|
|
250
|
+
gap: var(--space-scale-1);
|
|
251
|
+
|
|
252
|
+
&::marker {
|
|
253
|
+
content: '';
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
svg.chevron-down {
|
|
257
|
+
margin-left: var(--space-scale-1);
|
|
258
|
+
transform: rotate(-90deg);
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
&[open] svg.chevron-down {
|
|
263
|
+
transform: rotate(0deg);
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
`;
|
|
267
|
+
//# sourceMappingURL=Styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Styles.js","sourceRoot":"","sources":["../../../src/Styles.ts"],"names":[],"mappings":";;;AAAA,6BAA0B;AAEb,QAAA,MAAM,GAAG,IAAA,SAAG,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqQxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n :host {\n display: block;\n }\n\n button {\n appearance: none;\n padding: 0;\n border-width: 0;\n background-color: transparent;\n border-radius: var(--space-scale-1);\n padding-block: var(--space-scale-1);\n padding-inline: var(--space-scale-2);\n\n &.compact {\n padding-block: 0;\n padding-inline: 0;\n }\n\n &:hover {\n cursor: pointer;\n box-shadow:\n 0px 2px 5px 0px rgba(60, 66, 87, 0.08),\n 0px 1px 1px 0px rgba(0, 0, 0, 0.12);\n }\n\n &:focus {\n outline: 1px solid var(--color-primary-400);\n }\n\n svg {\n display: block;\n }\n\n &.right svg {\n transform: rotate(180deg);\n }\n }\n\n h2 {\n font-weight: var(--font-weight-semibold);\n color: var(--color-text-500);\n font-size: var(--font-size-400);\n display: contents;\n }\n\n .calendar-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px 24px 16px 24px;\n }\n\n .calendar-grid {\n text-align: center;\n border-top: var(--color-border-200) 1px solid;\n padding: 0 24px;\n\n table {\n width: 100%;\n border-collapse: collapse;\n }\n\n tbody {\n display: grid;\n row-gap: 4px;\n }\n\n tr {\n display: grid;\n grid-template-columns: repeat(7, 48px);\n }\n\n th {\n color: var(--color-text-400);\n font-size: var(--font-size-100);\n font-weight: var(--font-weight-normal);\n line-height: 20px;\n padding: 16px 0;\n }\n\n td {\n font-size: var(--font-size-100);\n font-weight: var(--font-weight-normal);\n }\n }\n\n .calendar-footer {\n display: flex;\n flex-direction: column;\n //gap: var(--space-scale-2);\n\n svg {\n vertical-align: middle;\n }\n\n .actions {\n display: flex;\n flex: 1 0 auto;\n padding: var(--space-scale-2) var(--space-scale-3) var(--space-scale-3);\n\n button {\n background-color: var(--color-surface-200);\n border-color: var(--color-primary-400);\n border-width: 1px;\n border-style: solid;\n color: var(--color-primary-400);\n font-weight: var(--font-weight-semibold);\n width: 100%;\n height: 40px;\n }\n }\n }\n\n .day {\n aspect-ratio: 1;\n cursor: pointer;\n position: relative; // For focus outline\n box-sizing: border-box;\n height: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .day.in-range {\n background: var(--color-primary-300);\n\n &:first-child {\n border-top-left-radius: var(--space-scale-1);\n border-bottom-left-radius: var(--space-scale-1);\n }\n\n &:last-child {\n border-top-right-radius: var(--space-scale-1);\n border-bottom-right-radius: var(--space-scale-1);\n }\n }\n\n .day[aria-disabled='true'] {\n opacity: 0.7;\n background-color: var(--color-surface-300);\n cursor: not-allowed;\n pointer-events: none;\n }\n\n .day.start-date:has(+ .in-range):after {\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--color-primary-300);\n z-index: -1;\n border-radius: var(--space-scale-1);\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n }\n\n .day.in-range + :is(.day:hover, .day:not(.in-range)):before {\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--color-primary-300);\n z-index: -1;\n border-radius: var(--space-scale-1);\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n }\n\n .day[aria-selected='true']:not(.in-range),\n .day:hover {\n background: var(--color-primary-400);\n color: var(--color-text-100);\n border-radius: var(--space-scale-1);\n font-weight: var(--font-weight-semibold);\n\n &.in-range {\n &:before {\n content: ' ';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--color-primary-300);\n z-index: -1;\n border-radius: var(--bg-border-radius, 0);\n }\n\n &:first-child {\n --bg-border-radius: var(--space-scale-1) 0 0 var(--space-scale-1);\n }\n\n &:last-child {\n --bg-border-radius: 0 var(--space-scale-1) var(--space-scale-1) 0;\n }\n }\n }\n\n .side-panel-wrapper {\n border-right: 1px solid var(--color-border-200, var(--color-surface-300));\n display: flex;\n align-items: start;\n }\n\n .side-panel {\n padding: var(--space-scale-3);\n grid-template-columns: 1fr;\n display: grid;\n gap: var(--space-scale-3);\n\n button {\n font-size: var(--font-size-200);\n text-wrap: nowrap;\n line-height: var(--space-scale-3);\n padding-block: 0;\n padding-inline: 0;\n\n &:hover {\n color: var(--color-primary-400);\n box-shadow: none;\n }\n\n &[aria-selected='true'] {\n color: var(--color-primary-400);\n }\n }\n }\n\n details {\n border-top: 1px solid var(--color-border-200);\n font-size: var(--font-size-100);\n font-weight: var(--font-weight-normal);\n padding: var(--space-scale-2) var(--space-scale-3) var(--space-scale-3);\n\n summary {\n font-weight: var(--font-weight-semibold);\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--space-scale-1);\n\n &::marker {\n content: '';\n }\n\n svg.chevron-down {\n margin-left: var(--space-scale-1);\n transform: rotate(-90deg);\n }\n }\n\n &[open] svg.chevron-down {\n transform: rotate(0deg);\n }\n }\n`;\n"]}
|