@entur/datepicker 11.4.3 → 11.4.4-beta.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 (2) hide show
  1. package/dist/styles.css +316 -280
  2. package/package.json +8 -8
package/dist/styles.css CHANGED
@@ -1,347 +1,383 @@
1
- /* DO NOT CHANGE!*/
2
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
3
- /* DO NOT CHANGE!*/
4
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
5
- /* DO NOT CHANGE!*/
6
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
7
1
  [data-color-mode=light],
8
- :root {
9
- --components-datepicker-calendar-background: #ffffff;
10
- --components-datepicker-calendar-background-overflow: #f6f6f9;
11
- --components-datepicker-calendar-border: #e3e6e8;
12
- --components-datepicker-calendar-dateborder: #e3e6e8;
13
- --components-datepicker-calendar-datefill-hover: #d9ddf2;
14
- --components-datepicker-calendar-datefill-selected: #aeb7e2;
15
- --components-datepicker-calendar-icon: #181c56;
16
- --components-datepicker-calendar-stroke-today: #ff5959;
17
- --components-datepicker-calendar-text-accent: #181c56;
18
- --components-datepicker-calendar-text-disabled: #b6b8ba;
19
- --components-datepicker-calendar-text-subdued: #626493;
2
+ :root{
3
+ --components-datepicker-calendar-background:#ffffff;
4
+ --components-datepicker-calendar-background-overflow:#f6f6f9;
5
+ --components-datepicker-calendar-border:#e3e6e8;
6
+ --components-datepicker-calendar-dateborder:#e3e6e8;
7
+ --components-datepicker-calendar-datefill-hover:#d9ddf2;
8
+ --components-datepicker-calendar-datefill-selected:#aeb7e2;
9
+ --components-datepicker-calendar-icon:#181c56;
10
+ --components-datepicker-calendar-stroke-today:#ff5959;
11
+ --components-datepicker-calendar-text-accent:#181c56;
12
+ --components-datepicker-calendar-text-disabled:#b6b8ba;
13
+ --components-datepicker-calendar-text-subdued:#626493;
20
14
  }
21
15
 
22
- [data-color-mode=dark] {
23
- --components-datepicker-calendar-background: #393a49;
24
- --components-datepicker-calendar-background-overflow: rgba(229, 229, 233, 0.1490196078);
25
- --components-datepicker-calendar-border: rgba(255, 255, 255, 0);
26
- --components-datepicker-calendar-dateborder: #81828f;
27
- --components-datepicker-calendar-datefill-hover: rgba(229, 229, 233, 0.3490196078);
28
- --components-datepicker-calendar-datefill-selected: rgba(229, 229, 233, 0.1490196078);
29
- --components-datepicker-calendar-icon: #e5e5e9;
30
- --components-datepicker-calendar-stroke-today: #ff9494;
31
- --components-datepicker-calendar-text-accent: #e5e5e9;
32
- --components-datepicker-calendar-text-disabled: #6e6f73;
33
- --components-datepicker-calendar-text-subdued: #b3b4bd;
16
+ [data-color-mode=dark]{
17
+ --components-datepicker-calendar-background:#393a49;
18
+ --components-datepicker-calendar-background-overflow:rgba(229, 229, 233, 0.1490196078);
19
+ --components-datepicker-calendar-border:rgba(255, 255, 255, 0);
20
+ --components-datepicker-calendar-dateborder:#81828f;
21
+ --components-datepicker-calendar-datefill-hover:rgba(229, 229, 233, 0.3490196078);
22
+ --components-datepicker-calendar-datefill-selected:rgba(229, 229, 233, 0.1490196078);
23
+ --components-datepicker-calendar-icon:#e5e5e9;
24
+ --components-datepicker-calendar-stroke-today:#ff9494;
25
+ --components-datepicker-calendar-text-accent:#e5e5e9;
26
+ --components-datepicker-calendar-text-disabled:#6e6f73;
27
+ --components-datepicker-calendar-text-subdued:#b3b4bd;
34
28
  }
35
29
 
36
- :root {
37
- --eds-datepicker: 1;
38
- }/* DO NOT CHANGE!*/
39
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
40
- .eds-date-and-time-field__segment {
41
- margin-top: 1rem;
42
- padding: 0 2px;
43
- font-variant-numeric: tabular-nums;
44
- text-align: end;
45
- }
46
- .eds-date-and-time-field__segment:is(:first-child, :last-child):not([role=spinbutton]) {
47
- padding: 0;
48
- }
49
- .eds-date-and-time-field__segment--placeholder {
50
- color: var(--components-datepicker-datefield-standard-text-content);
51
- }
52
- .eds-date-and-time-field__segment--dot-separator {
53
- margin-left: -0.1rem;
54
- margin-right: -0.2rem;
55
- }
56
- .eds-date-and-time-field__segment:focus-visible {
57
- background-color: var(--components-button-iconbutton-standard-active);
58
- outline: transparent;
59
- border-radius: 0.0625rem;
60
- }
61
- .eds-date-and-time-field__segment[aria-valuemax="9999"] {
62
- min-width: 4ch;
63
- }/* DO NOT CHANGE!*/
64
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
65
- .eds-datefield {
66
- width: fit-content;
67
- display: block;
68
- }
69
- .eds-datefield .eds-form-control-wrapper {
70
- display: inline-flex;
71
- padding-inline: 1rem;
72
- width: fit-content;
73
- }
74
- .eds-datefield .eds-form-control-wrapper--disabled:focus-within {
75
- border-color: transparent;
76
- box-shadow: none;
77
- }
78
- .eds-datefield .eds-form-control-wrapper--disabled .eds-date-and-time-field__segment:focus {
79
- background: none;
80
- }/* DO NOT CHANGE!*/
81
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
82
- .eds-datepicker__calendar,
83
- .eds-contrast .eds-datepicker__calendar {
84
- width: fit-content;
85
- padding: 1.5rem;
86
- padding-top: 0.75rem;
87
- background-color: var(--components-datepicker-calendar-background);
88
- color: var(--components-datepicker-calendar-text-accent);
89
- border-radius: 4px;
90
- box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
30
+ :root{
31
+ --eds-datepicker:1;
32
+ }.eds-date-and-time-field__segment{
33
+ margin-top:1rem;
34
+ padding:0 2px;
35
+ -webkit-font-feature-settings:"tnum";
36
+ -moz-font-feature-settings:"tnum";
37
+ font-feature-settings:"tnum";
38
+ font-variant-numeric:tabular-nums;
39
+ text-align:end;
40
+ }
41
+ .eds-date-and-time-field__segment:first-child:not([role=spinbutton]){
42
+ padding:0;
43
+ }
44
+ .eds-date-and-time-field__segment:last-child:not([role=spinbutton]){
45
+ padding:0;
46
+ }
47
+ .eds-date-and-time-field__segment--placeholder{
48
+ color:var(--components-datepicker-datefield-standard-text-content);
49
+ }
50
+ .eds-date-and-time-field__segment--dot-separator{
51
+ margin-left:-0.1rem;
52
+ margin-right:-0.2rem;
53
+ }
54
+ .eds-date-and-time-field__segment:focus-visible{
55
+ background-color:var(--components-button-iconbutton-standard-active);
56
+ outline:transparent;
57
+ -webkit-border-radius:0.0625rem;
58
+ -moz-border-radius:0.0625rem;
59
+ border-radius:0.0625rem;
60
+ }
61
+ .eds-date-and-time-field__segment[aria-valuemax="9999"]{
62
+ min-width:4ch;
63
+ }.eds-datefield{
64
+ width:-webkit-fit-content;
65
+ width:-moz-fit-content;
66
+ width:fit-content;
67
+ display:block;
68
+ }
69
+ .eds-datefield .eds-form-control-wrapper{
70
+ display:-webkit-inline-box;
71
+ display:-webkit-inline-flex;
72
+ display:-moz-inline-box;
73
+ display:inline-flex;
74
+ padding-inline:1rem;
75
+ width:-webkit-fit-content;
76
+ width:-moz-fit-content;
77
+ width:fit-content;
78
+ }
79
+ .eds-datefield .eds-form-control-wrapper--disabled:focus-within{
80
+ border-color:transparent;
81
+ -webkit-box-shadow:none;
82
+ -moz-box-shadow:none;
83
+ box-shadow:none;
84
+ }
85
+ .eds-datefield .eds-form-control-wrapper--disabled .eds-date-and-time-field__segment:focus{
86
+ background:none;
87
+ }.eds-datepicker__calendar,
88
+ .eds-contrast .eds-datepicker__calendar{
89
+ width:-webkit-fit-content;
90
+ width:-moz-fit-content;
91
+ width:fit-content;
92
+ padding:1.5rem;
93
+ padding-top:0.75rem;
94
+ background-color:var(--components-datepicker-calendar-background);
95
+ color:var(--components-datepicker-calendar-text-accent);
96
+ -webkit-border-radius:4px;
97
+ -moz-border-radius:4px;
98
+ border-radius:4px;
99
+ -webkit-box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
100
+ -moz-box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
101
+ box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
91
102
  }
92
103
  .eds-datepicker__calendar__header,
93
- .eds-contrast .eds-datepicker__calendar__header {
94
- display: flex;
95
- justify-content: space-between;
96
- align-items: center;
97
- color: var(--components-datepicker-calendar-text-accent);
104
+ .eds-contrast .eds-datepicker__calendar__header{
105
+ display:-webkit-box;
106
+ display:-webkit-flex;
107
+ display:-moz-box;
108
+ display:flex;
109
+ -webkit-box-pack:justify;
110
+ -webkit-justify-content:space-between;
111
+ -moz-box-pack:justify;
112
+ justify-content:space-between;
113
+ -webkit-box-align:center;
114
+ -webkit-align-items:center;
115
+ -moz-box-align:center;
116
+ align-items:center;
117
+ color:var(--components-datepicker-calendar-text-accent);
98
118
  }
99
119
  .eds-datepicker__calendar__header h2,
100
- .eds-contrast .eds-datepicker__calendar__header h2 {
101
- font-size: 1rem;
102
- font-weight: 600;
120
+ .eds-contrast .eds-datepicker__calendar__header h2{
121
+ font-size:1rem;
122
+ font-weight:600;
103
123
  }
104
124
  .eds-datepicker__calendar__header .eds-icon-button,
105
- .eds-contrast .eds-datepicker__calendar__header .eds-icon-button {
106
- color: var(--components-button-iconbutton-standard-text);
125
+ .eds-contrast .eds-datepicker__calendar__header .eds-icon-button{
126
+ color:var(--components-button-iconbutton-standard-text);
107
127
  }
108
128
  .eds-datepicker__calendar__header .eds-icon-button:hover,
109
- .eds-contrast .eds-datepicker__calendar__header .eds-icon-button:hover {
110
- background-color: var(--components-button-iconbutton-standard-hover);
129
+ .eds-contrast .eds-datepicker__calendar__header .eds-icon-button:hover{
130
+ background-color:var(--components-button-iconbutton-standard-hover);
111
131
  }
112
132
  .eds-datepicker__calendar__header .eds-icon-button:focus-visible,
113
- .eds-contrast .eds-datepicker__calendar__header .eds-icon-button:focus-visible {
114
- outline: 2px solid #181c56;
115
- outline-color: var(--basecolors-stroke-focus-standard);
116
- outline-offset: 0.125rem;
133
+ .eds-contrast .eds-datepicker__calendar__header .eds-icon-button:focus-visible{
134
+ outline:2px solid #181c56;
135
+ outline-color:var(--basecolors-stroke-focus-standard);
136
+ outline-offset:0.125rem;
117
137
  }
118
138
  .eds-datepicker__calendar__header .eds-icon-button:active,
119
- .eds-contrast .eds-datepicker__calendar__header .eds-icon-button:active {
120
- background-color: var(--components-button-iconbutton-standard-active);
139
+ .eds-contrast .eds-datepicker__calendar__header .eds-icon-button:active{
140
+ background-color:var(--components-button-iconbutton-standard-active);
121
141
  }
122
142
  .eds-datepicker__calendar__header .eds-icon-button--disabled__wrapper,
123
- .eds-contrast .eds-datepicker__calendar__header .eds-icon-button--disabled__wrapper {
124
- visibility: hidden;
143
+ .eds-contrast .eds-datepicker__calendar__header .eds-icon-button--disabled__wrapper{
144
+ visibility:hidden;
125
145
  }
126
146
  .eds-datepicker__calendar__grid,
127
- .eds-contrast .eds-datepicker__calendar__grid {
128
- position: relative;
129
- border-spacing: 0px;
130
- border-collapse: collapse;
147
+ .eds-contrast .eds-datepicker__calendar__grid{
148
+ position:relative;
149
+ border-spacing:0px;
150
+ border-collapse:collapse;
131
151
  }
132
152
  .eds-datepicker__calendar__grid__weeknumber,
133
153
  .eds-datepicker__calendar__grid thead tr th,
134
154
  .eds-contrast .eds-datepicker__calendar__grid__weeknumber,
135
- .eds-contrast .eds-datepicker__calendar__grid thead tr th {
136
- color: var(--components-datepicker-calendar-text-subdued);
137
- font-size: 0.75rem;
155
+ .eds-contrast .eds-datepicker__calendar__grid thead tr th{
156
+ color:var(--components-datepicker-calendar-text-subdued);
157
+ font-size:0.75rem;
138
158
  }
139
159
  .eds-datepicker__calendar__grid__weeknumber-header, .eds-datepicker__calendar__grid__weeknumber,
140
160
  .eds-contrast .eds-datepicker__calendar__grid__weeknumber-header,
141
- .eds-contrast .eds-datepicker__calendar__grid__weeknumber {
142
- text-align: right;
143
- padding-right: 0.5rem;
161
+ .eds-contrast .eds-datepicker__calendar__grid__weeknumber{
162
+ text-align:right;
163
+ padding-right:0.5rem;
144
164
  }
145
165
  .eds-datepicker__calendar__grid__cell,
146
- .eds-contrast .eds-datepicker__calendar__grid__cell {
147
- height: 40px;
148
- width: 40px;
149
- display: flex;
150
- align-items: center;
151
- justify-content: center;
152
- font-size: 0.875rem;
153
- cursor: default;
166
+ .eds-contrast .eds-datepicker__calendar__grid__cell{
167
+ height:40px;
168
+ width:40px;
169
+ display:-webkit-box;
170
+ display:-webkit-flex;
171
+ display:-moz-box;
172
+ display:flex;
173
+ -webkit-box-align:center;
174
+ -webkit-align-items:center;
175
+ -moz-box-align:center;
176
+ align-items:center;
177
+ -webkit-box-pack:center;
178
+ -webkit-justify-content:center;
179
+ -moz-box-pack:center;
180
+ justify-content:center;
181
+ font-size:0.875rem;
182
+ cursor:default;
154
183
  }
155
184
  .eds-datepicker__calendar__grid__cell__td,
156
- .eds-contrast .eds-datepicker__calendar__grid__cell__td {
157
- position: relative;
158
- padding: 0;
159
- border: 1px solid var(--components-datepicker-calendar-dateborder);
185
+ .eds-contrast .eds-datepicker__calendar__grid__cell__td{
186
+ position:relative;
187
+ padding:0;
188
+ border:1px solid var(--components-datepicker-calendar-dateborder);
160
189
  }
161
190
  .eds-datepicker__calendar__grid__cell__td:has(.eds-datepicker__calendar__grid__cell--outside-month--visible),
162
- .eds-contrast .eds-datepicker__calendar__grid__cell__td:has(.eds-datepicker__calendar__grid__cell--outside-month--visible) {
163
- border-style: dashed;
191
+ .eds-contrast .eds-datepicker__calendar__grid__cell__td:has(.eds-datepicker__calendar__grid__cell--outside-month--visible){
192
+ border-style:dashed;
164
193
  }
165
194
  .eds-datepicker__calendar__grid__cell__td:focus-within,
166
- .eds-contrast .eds-datepicker__calendar__grid__cell__td:focus-within {
167
- z-index: 2;
195
+ .eds-contrast .eds-datepicker__calendar__grid__cell__td:focus-within{
196
+ z-index:2;
168
197
  }
169
198
  .eds-datepicker__calendar__grid__cell:hover,
170
- .eds-contrast .eds-datepicker__calendar__grid__cell:hover {
171
- background-color: var(--components-datepicker-calendar-datefill-hover);
172
- color: var(--components-datepicker-calendar-text-accent);
199
+ .eds-contrast .eds-datepicker__calendar__grid__cell:hover{
200
+ background-color:var(--components-datepicker-calendar-datefill-hover);
201
+ color:var(--components-datepicker-calendar-text-accent);
173
202
  }
174
203
  .eds-datepicker__calendar__grid__cell:active,
175
- .eds-contrast .eds-datepicker__calendar__grid__cell:active {
176
- background-color: var(--components-datepicker-calendar-datefill-selected);
177
- color: var(--components-datepicker-calendar-text-accent);
204
+ .eds-contrast .eds-datepicker__calendar__grid__cell:active{
205
+ background-color:var(--components-datepicker-calendar-datefill-selected);
206
+ color:var(--components-datepicker-calendar-text-accent);
178
207
  }
179
208
  .eds-datepicker__calendar__grid__cell:focus-visible,
180
- .eds-contrast .eds-datepicker__calendar__grid__cell:focus-visible {
181
- outline: 2px solid #181c56;
182
- outline-color: var(--basecolors-stroke-focus-standard);
183
- outline-offset: 0.125rem;
209
+ .eds-contrast .eds-datepicker__calendar__grid__cell:focus-visible{
210
+ outline:2px solid #181c56;
211
+ outline-color:var(--basecolors-stroke-focus-standard);
212
+ outline-offset:0.125rem;
184
213
  }
185
214
  .eds-datepicker__calendar__grid__cell--selected,
186
- .eds-contrast .eds-datepicker__calendar__grid__cell--selected {
187
- background-color: var(--components-datepicker-calendar-datefill-selected);
188
- color: var(--components-datepicker-calendar-text-accent);
215
+ .eds-contrast .eds-datepicker__calendar__grid__cell--selected{
216
+ background-color:var(--components-datepicker-calendar-datefill-selected);
217
+ color:var(--components-datepicker-calendar-text-accent);
189
218
  }
190
219
  .eds-datepicker__calendar__grid__cell--selected:hover,
191
- .eds-contrast .eds-datepicker__calendar__grid__cell--selected:hover {
192
- background-color: var(--components-datepicker-calendar-datefill-hover);
193
- color: var(--components-datepicker-calendar-text-accent);
220
+ .eds-contrast .eds-datepicker__calendar__grid__cell--selected:hover{
221
+ background-color:var(--components-datepicker-calendar-datefill-hover);
222
+ color:var(--components-datepicker-calendar-text-accent);
194
223
  }
195
224
  .eds-datepicker__calendar__grid__cell--selected:active,
196
- .eds-contrast .eds-datepicker__calendar__grid__cell--selected:active {
197
- background-color: var(--components-datepicker-calendar-datefill-selected);
198
- color: var(--components-datepicker-calendar-text-accent);
225
+ .eds-contrast .eds-datepicker__calendar__grid__cell--selected:active{
226
+ background-color:var(--components-datepicker-calendar-datefill-selected);
227
+ color:var(--components-datepicker-calendar-text-accent);
199
228
  }
200
229
  .eds-datepicker__calendar__grid__cell--disabled,
201
- .eds-contrast .eds-datepicker__calendar__grid__cell--disabled {
202
- opacity: 0.5;
230
+ .eds-contrast .eds-datepicker__calendar__grid__cell--disabled{
231
+ opacity:0.5;
203
232
  }
204
233
  .eds-datepicker__calendar__grid__cell--disabled:hover,
205
- .eds-contrast .eds-datepicker__calendar__grid__cell--disabled:hover {
206
- background-color: transparent;
207
- cursor: not-allowed;
234
+ .eds-contrast .eds-datepicker__calendar__grid__cell--disabled:hover{
235
+ background-color:transparent;
236
+ cursor:not-allowed;
208
237
  }
209
238
  .eds-datepicker__calendar__grid__cell--outside-month,
210
- .eds-contrast .eds-datepicker__calendar__grid__cell--outside-month {
211
- color: transparent;
239
+ .eds-contrast .eds-datepicker__calendar__grid__cell--outside-month{
240
+ color:transparent;
212
241
  }
213
242
  .eds-datepicker__calendar__grid__cell--outside-month:hover,
214
- .eds-contrast .eds-datepicker__calendar__grid__cell--outside-month:hover {
215
- background-color: transparent;
216
- color: transparent;
217
- cursor: default;
243
+ .eds-contrast .eds-datepicker__calendar__grid__cell--outside-month:hover{
244
+ background-color:transparent;
245
+ color:transparent;
246
+ cursor:default;
218
247
  }
219
248
  .eds-datepicker__calendar__grid__cell--outside-month--visible,
220
- .eds-contrast .eds-datepicker__calendar__grid__cell--outside-month--visible {
221
- background-color: var(--components-datepicker-calendar-background-overflow);
222
- color: var(--components-datepicker-calendar-text-subdued);
223
- opacity: 1;
249
+ .eds-contrast .eds-datepicker__calendar__grid__cell--outside-month--visible{
250
+ background-color:var(--components-datepicker-calendar-background-overflow);
251
+ color:var(--components-datepicker-calendar-text-subdued);
252
+ opacity:1;
224
253
  }
225
254
  .eds-datepicker__calendar__grid__cell--outside-month--visible:hover,
226
- .eds-contrast .eds-datepicker__calendar__grid__cell--outside-month--visible:hover {
227
- background-color: var(--components-datepicker-calendar-datefill-hover);
228
- color: var(--components-datepicker-calendar-text-accent);
229
- opacity: 0.8;
230
- cursor: default;
255
+ .eds-contrast .eds-datepicker__calendar__grid__cell--outside-month--visible:hover{
256
+ background-color:var(--components-datepicker-calendar-datefill-hover);
257
+ color:var(--components-datepicker-calendar-text-accent);
258
+ opacity:0.8;
259
+ cursor:default;
231
260
  }
232
261
  .eds-datepicker__calendar__grid__cell--outside-month--visible:active,
233
- .eds-contrast .eds-datepicker__calendar__grid__cell--outside-month--visible:active {
234
- background-color: var(--components-datepicker-calendar-datefill-selected);
235
- color: var(--components-datepicker-calendar-text-accent);
236
- opacity: 1;
262
+ .eds-contrast .eds-datepicker__calendar__grid__cell--outside-month--visible:active{
263
+ background-color:var(--components-datepicker-calendar-datefill-selected);
264
+ color:var(--components-datepicker-calendar-text-accent);
265
+ opacity:1;
237
266
  }
238
267
  .eds-datepicker__calendar__grid__cell--outside-month--visible:focus-visible,
239
- .eds-contrast .eds-datepicker__calendar__grid__cell--outside-month--visible:focus-visible {
240
- outline: 2px solid #181c56;
241
- outline-color: var(--basecolors-stroke-focus-standard);
242
- outline-offset: 0.125rem;
268
+ .eds-contrast .eds-datepicker__calendar__grid__cell--outside-month--visible:focus-visible{
269
+ outline:2px solid #181c56;
270
+ outline-color:var(--basecolors-stroke-focus-standard);
271
+ outline-offset:0.125rem;
243
272
  }
244
273
  .eds-datepicker__calendar__grid__cell--today,
245
- .eds-contrast .eds-datepicker__calendar__grid__cell--today {
246
- border-bottom: 2px solid var(--components-datepicker-calendar-stroke-today);
247
- }/* DO NOT CHANGE!*/
248
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
249
- .eds-datepicker.eds-datefield:not(.eds-datepicker--disabled) .eds-form-control-wrapper {
250
- padding-right: 0rem;
251
- }
252
- .eds-datepicker.eds-datefield:not(.eds-datepicker--disabled) .eds-form-control__append {
253
- margin-left: auto;
254
- }
255
- .eds-datepicker__open-calendar-button {
256
- margin: 0rem 0.25rem 0rem 0.5rem;
257
- }
258
- .eds-datepicker__open-calendar-button.eds-icon-button {
259
- color: var(--components-datepicker-calendar-icon);
260
- }
261
- .eds-datepicker__open-calendar-button.eds-icon-button:hover {
262
- background-color: var(--components-button-iconbutton-standard-hover);
263
- }
264
- .eds-datepicker__open-calendar-button.eds-icon-button:focus-visible {
265
- outline: 2px solid #181c56;
266
- outline-color: var(--basecolors-stroke-focus-standard);
267
- outline-offset: 0;
268
- }
269
- .eds-datepicker__open-calendar-button.eds-icon-button:active {
270
- background-color: var(--components-button-iconbutton-standard-active);
271
- }
272
- .eds-datepicker__calendar-modal.eds-modal__content {
273
- padding: unset;
274
- width: inherit;
275
- background-color: unset;
276
- }/* DO NOT CHANGE!*/
277
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
278
- .eds-timepicker {
279
- width: fit-content;
280
- justify-content: center;
281
- display: block;
282
- }
283
- .eds-timepicker--disabled {
284
- padding-inline: 1rem;
285
- }
286
- .eds-timepicker .eds-form-control__prepend {
287
- margin-right: 0.25rem;
288
- }
289
- .eds-timepicker .eds-form-control__append {
290
- margin-left: 0.25rem;
291
- }
292
- .eds-timepicker .eds-form-control-wrapper {
293
- padding: 0rem;
294
- display: inline-flex;
295
- }
296
- .eds-timepicker__arrowbutton {
297
- margin: 0 0.25rem;
298
- }
299
- .eds-timepicker__arrowbutton--disabled {
300
- opacity: 0.5;
301
- pointer-events: none;
302
- visibility: hidden;
303
- }
304
- .eds-timepicker__arrowbutton.eds-icon-button {
305
- color: var(--components-button-iconbutton-standard-text);
306
- }
307
- .eds-timepicker__arrowbutton.eds-icon-button:hover {
308
- background-color: var(--components-button-iconbutton-standard-hover);
309
- }
310
- .eds-timepicker__arrowbutton.eds-icon-button:focus-visible {
311
- outline: 2px solid #181c56;
312
- outline-color: var(--basecolors-stroke-focus-standard);
313
- outline-offset: 0.125rem;
314
- }
315
- .eds-timepicker__arrowbutton.eds-icon-button:active {
316
- background-color: var(--components-button-iconbutton-standard-active);
317
- }
318
- .eds-timepicker .eds-icon-button--disabled__wrapper {
319
- display: none;
320
- }.eds-native-timepicker input[type=time]::-webkit-calendar-picker-indicator {
321
- position: relative;
322
- top: -0.5rem;
323
- }.eds-simple-timepicker {
324
- width: var(--input-width);
325
- --input-width: 7rem;
326
- }
327
- .eds-simple-timepicker--has-tooltip {
328
- --input-width: 9rem;
329
- }
330
- .eds-simple-timepicker--hide-clock {
331
- --input-width: 5rem;
332
- }
333
- .eds-simple-timepicker--hide-clock.eds-simple-timepicker--has-tooltip {
334
- --input-width: 7rem;
335
- }
336
- .eds-simple-timepicker--show-seconds {
337
- --input-width: 8.5rem;
338
- }
339
- .eds-simple-timepicker--show-seconds.eds-simple-timepicker--hide-clock {
340
- --input-width: 6.5rem;
341
- }
342
- .eds-simple-timepicker--show-seconds.eds-simple-timepicker--hide-clock.eds-simple-timepicker--has-tooltip {
343
- --input-width: 8.5rem;
344
- }
345
- .eds-simple-timepicker--show-seconds.eds-simple-timepicker--has-tooltip {
346
- --input-width: 10.5rem;
274
+ .eds-contrast .eds-datepicker__calendar__grid__cell--today{
275
+ border-bottom:2px solid var(--components-datepicker-calendar-stroke-today);
276
+ }.eds-datepicker.eds-datefield:not(.eds-datepicker--disabled) .eds-form-control-wrapper{
277
+ padding-right:0rem;
278
+ }
279
+ .eds-datepicker.eds-datefield:not(.eds-datepicker--disabled) .eds-form-control__append{
280
+ margin-left:auto;
281
+ }
282
+ .eds-datepicker__open-calendar-button{
283
+ margin:0rem 0.25rem 0rem 0.5rem;
284
+ }
285
+ .eds-datepicker__open-calendar-button.eds-icon-button{
286
+ color:var(--components-datepicker-calendar-icon);
287
+ }
288
+ .eds-datepicker__open-calendar-button.eds-icon-button:hover{
289
+ background-color:var(--components-button-iconbutton-standard-hover);
290
+ }
291
+ .eds-datepicker__open-calendar-button.eds-icon-button:focus-visible{
292
+ outline:2px solid #181c56;
293
+ outline-color:var(--basecolors-stroke-focus-standard);
294
+ outline-offset:0;
295
+ }
296
+ .eds-datepicker__open-calendar-button.eds-icon-button:active{
297
+ background-color:var(--components-button-iconbutton-standard-active);
298
+ }
299
+ .eds-datepicker__calendar-modal.eds-modal__content{
300
+ padding:0;
301
+ padding:initial;
302
+ width:inherit;
303
+ background-color:transparent;
304
+ background-color:initial;
305
+ }.eds-timepicker{
306
+ width:-webkit-fit-content;
307
+ width:-moz-fit-content;
308
+ width:fit-content;
309
+ -webkit-box-pack:center;
310
+ -webkit-justify-content:center;
311
+ -moz-box-pack:center;
312
+ justify-content:center;
313
+ display:block;
314
+ }
315
+ .eds-timepicker--disabled{
316
+ padding-inline:1rem;
317
+ }
318
+ .eds-timepicker .eds-form-control__prepend{
319
+ margin-right:0.25rem;
320
+ }
321
+ .eds-timepicker .eds-form-control__append{
322
+ margin-left:0.25rem;
323
+ }
324
+ .eds-timepicker .eds-form-control-wrapper{
325
+ padding:0rem;
326
+ display:-webkit-inline-box;
327
+ display:-webkit-inline-flex;
328
+ display:-moz-inline-box;
329
+ display:inline-flex;
330
+ }
331
+ .eds-timepicker__arrowbutton{
332
+ margin:0 0.25rem;
333
+ }
334
+ .eds-timepicker__arrowbutton--disabled{
335
+ opacity:0.5;
336
+ pointer-events:none;
337
+ visibility:hidden;
338
+ }
339
+ .eds-timepicker__arrowbutton.eds-icon-button{
340
+ color:var(--components-button-iconbutton-standard-text);
341
+ }
342
+ .eds-timepicker__arrowbutton.eds-icon-button:hover{
343
+ background-color:var(--components-button-iconbutton-standard-hover);
344
+ }
345
+ .eds-timepicker__arrowbutton.eds-icon-button:focus-visible{
346
+ outline:2px solid #181c56;
347
+ outline-color:var(--basecolors-stroke-focus-standard);
348
+ outline-offset:0.125rem;
349
+ }
350
+ .eds-timepicker__arrowbutton.eds-icon-button:active{
351
+ background-color:var(--components-button-iconbutton-standard-active);
352
+ }
353
+ .eds-timepicker .eds-icon-button--disabled__wrapper{
354
+ display:none;
355
+ }.eds-native-timepicker input[type=time]::-webkit-calendar-picker-indicator{
356
+ position:relative;
357
+ top:-0.5rem;
358
+ }.eds-simple-timepicker{
359
+ width:7rem;
360
+ width:var(--input-width);
361
+ --input-width:7rem;
362
+ }
363
+ .eds-simple-timepicker--has-tooltip{
364
+ --input-width:9rem;
365
+ }
366
+ .eds-simple-timepicker--hide-clock{
367
+ --input-width:5rem;
368
+ }
369
+ .eds-simple-timepicker--hide-clock.eds-simple-timepicker--has-tooltip{
370
+ --input-width:7rem;
371
+ }
372
+ .eds-simple-timepicker--show-seconds{
373
+ --input-width:8.5rem;
374
+ }
375
+ .eds-simple-timepicker--show-seconds.eds-simple-timepicker--hide-clock{
376
+ --input-width:6.5rem;
377
+ }
378
+ .eds-simple-timepicker--show-seconds.eds-simple-timepicker--hide-clock.eds-simple-timepicker--has-tooltip{
379
+ --input-width:8.5rem;
380
+ }
381
+ .eds-simple-timepicker--show-seconds.eds-simple-timepicker--has-tooltip{
382
+ --input-width:10.5rem;
347
383
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/datepicker",
3
- "version": "11.4.3",
3
+ "version": "11.4.4-beta.0",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/datepicker.cjs.js",
6
6
  "module": "dist/datepicker.esm.js",
@@ -28,13 +28,13 @@
28
28
  },
29
29
  "dependencies": {
30
30
  "@entur/a11y": "^0.2.102",
31
- "@entur/button": "^3.3.18",
32
- "@entur/form": "^9.0.1",
33
- "@entur/icons": "^8.2.0",
34
- "@entur/modal": "^1.7.78",
31
+ "@entur/button": "^3.4.0-beta.0",
32
+ "@entur/form": "^9.0.2-beta.0",
33
+ "@entur/icons": "^8.3.0-beta.0",
34
+ "@entur/modal": "^1.7.79-beta.0",
35
35
  "@entur/tokens": "^3.20.0",
36
- "@entur/tooltip": "^5.2.17",
37
- "@entur/typography": "^2.0.3",
36
+ "@entur/tooltip": "^5.2.18-beta.0",
37
+ "@entur/typography": "^2.0.4-beta.0",
38
38
  "@entur/utils": "^0.12.5",
39
39
  "@floating-ui/react-dom": "^2.1.6",
40
40
  "@internationalized/date": "^3.8.2",
@@ -61,5 +61,5 @@
61
61
  "vite": "^7.1.3",
62
62
  "vite-plugin-dts": "^4.5.4"
63
63
  },
64
- "gitHead": "51a246c05d8abbc22f93b38be56a5242fcee00c6"
64
+ "gitHead": "e3da53c27deec5444106581c2339049814f633fe"
65
65
  }