material-inspired-component-library 4.0.2 → 5.0.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 (20) hide show
  1. package/README.md +4 -0
  2. package/components/button/index.scss +1 -0
  3. package/components/dialog/README.md +9 -7
  4. package/components/dialog/index.scss +63 -52
  5. package/components/timepicker/README.md +135 -0
  6. package/components/timepicker/index.scss +243 -121
  7. package/components/timepicker/index.ts +343 -40
  8. package/dist/button.css +1 -1
  9. package/dist/dialog.css +1 -1
  10. package/dist/micl.css +1 -1
  11. package/dist/micl.js +1 -1
  12. package/dist/switch.css +1 -1
  13. package/dist/timepicker.css +1 -1
  14. package/docs/bottomsheet.html +1 -1
  15. package/docs/dialog.html +12 -12
  16. package/docs/index.html +31 -7
  17. package/docs/micl.css +1 -1
  18. package/docs/micl.js +1 -1
  19. package/docs/timepicker.html +63 -26
  20. package/package.json +16 -15
package/components/timepicker/index.scss CHANGED
@@ -27,6 +27,8 @@
27
27
  :root {
28
28
  --md-sys-timepicker-input-height: 72px;
29
29
  --md-sys-timepicker-input-width: 96px;
30
+ --md-sys-timepicker-input-width-24h: 114px;
31
+ --md-sys-timepicker-separator-width: 24px;
30
32
  --md-sys-timepicker-period-height: 72px;
31
33
  --md-sys-timepicker-period-width: 52px;
32
34
  --md-sys-timepicker-dial-size: 256px;
@@ -35,222 +37,342 @@
35
37
  }
36
38
 
37
39
  dialog.micl-dialog.micl-timepicker {
38
- .micl-dialog__headline h2 {
39
- @include typography.label-medium;
40
+ --md-sys-timepicker-motion-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
40
41
 
41
- color: var(--md-sys-color-on-surface-variant);
42
+ .micl-dialog__headline {
43
+ padding-block-end: 20px;
44
+
45
+ h2 {
46
+ @include typography.label-medium;
47
+
48
+ color: var(--md-sys-color-on-surface-variant);
49
+ }
42
50
  }
43
51
  .micl-dialog__content {
44
52
  display: grid;
45
- grid-template-areas: "time-input time-input" "supporting-hour supporting-minute" "dial dial";
53
+ padding-block-start: 1px;
54
+ grid-template-areas:
55
+ "timepicker-hour timepicker-separator timepicker-minute timepicker-period"
56
+ "timepicker-hour-supporting timepicker-hour-supporting timepicker-minute-supporting timepicker-minute-supporting"
57
+ "timepicker-dial timepicker-dial timepicker-dial timepicker-dial";
58
+ grid-template-columns: auto var(--md-sys-timepicker-separator-width) var(--md-sys-timepicker-input-width) auto;
46
59
  }
47
- }
60
+ .micl-dialog__actions {
61
+ &:has(.micl-timepicker__inputmode) {
62
+ justify-content: space-between;
63
+ }
48
64
 
49
- .micl-timepicker input {
50
- --md-sys-timepicker-motion-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
65
+ .micl-timepicker__inputmode {
66
+ margin-inline-start: -8px;
67
+ }
68
+ }
51
69
 
52
- @include typography.display-medium;
70
+ &:has(.micl-timepicker__dial:not(.micl-hidden)) {
71
+ --md-sys-timepicker-input-height: 80px;
72
+ --md-sys-timepicker-period-height: 80px;
53
73
 
54
- grid-area: time-input;
55
- position:relative;
56
- padding: 0;
57
- border: none;
58
- outline: none;
59
- background-color: transparent;
60
- color: var(--md-sys-color-on-surface);
61
- -webkit-tap-highlight-color: transparent;
74
+ &.micl-timepicker--horizontal {
75
+ --md-sys-timepicker-period-height: 38px;
62
76
 
63
- &::-webkit-datetime-edit-fields-wrapper {
64
- display: flex;
65
- align-items: center;
66
- padding: 0;
67
- text-align: center;
68
- }
69
- &::-webkit-datetime-edit-text {
70
- inline-size: 24px;
77
+ .micl-dialog__headline {
78
+ padding-block-end: 0;
79
+ }
80
+ .micl-dialog__content {
81
+ grid-template-areas:
82
+ "timepicker-dummy timepicker-dummy timepicker-dummy timepicker-dial"
83
+ "timepicker-hour timepicker-separator timepicker-minute timepicker-dial"
84
+ "timepicker-period timepicker-period timepicker-period timepicker-dial";
85
+ grid-template-rows: 72px var(--md-sys-timepicker-input-height) auto;
86
+
87
+ .micl-timepicker__period {
88
+ --md-sys-timepicker-ampm-height: var(--md-sys-timepicker-period-height);
89
+ --md-sys-timepicker-period-width: calc(2 * var(--md-sys-timepicker-input-width) + var(--md-sys-timepicker-separator-width));
90
+
91
+ display: flex;
92
+ align-self: flex-start;
93
+ margin-inline: 0;
94
+ margin-block: 16px 0;
95
+
96
+ .micl-timepicker__am {
97
+ border-start-end-radius: 0;
98
+ border-end-start-radius: var(--md-sys-shape-corner-small);
99
+ }
100
+ .micl-timepicker__pm {
101
+ border-block-start-width: 1px;
102
+ border-inline-start-width: 0px;
103
+ border-start-end-radius: var(--md-sys-shape-corner-small);
104
+ border-end-start-radius: 0;
105
+ }
106
+ }
107
+ .micl-timepicker__dial {
108
+ margin-block: 0;
109
+ margin-inline: 40px 0;
110
+ }
111
+ }
112
+ }
113
+ .micl-timepicker__supporting-text-hour,
114
+ .micl-timepicker__supporting-text-minute {
115
+ display: none;
116
+ }
71
117
  }
72
- &::-webkit-datetime-edit-hour-field,
73
- &::-webkit-datetime-edit-minute-field {
118
+ }
119
+
120
+ .micl-timepicker {
121
+ input[name=hour],
122
+ input[name=minute] {
74
123
  --statelayer-color: var(--md-sys-color-on-surface);
75
124
 
76
- display: inline-flex;
77
- align-items: center;
78
- justify-content: center;
125
+ @include typography.display-medium;
126
+
127
+ box-sizing: border-box;
79
128
  inline-size: var(--md-sys-timepicker-input-width);
80
129
  block-size: var(--md-sys-timepicker-input-height);
130
+ margin: 0;
81
131
  padding: 0;
132
+ border: none;
133
+ outline: none;
82
134
  border-radius: var(--md-sys-shape-corner-small);
83
135
  background-color: var(--md-sys-color-surface-container-highest);
84
136
  background-image: linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
85
137
  background-repeat: no-repeat;
86
138
  background-size: 100%;
87
- cursor: pointer;
139
+ color: var(--md-sys-color-on-surface);
140
+ text-align: center;
141
+ user-select: none;
142
+ -webkit-tap-highlight-color: transparent;
143
+ -moz-appearance: textfield;
88
144
  transition: --statelayer-opacity var(--md-sys-timepicker-motion-duration) linear;
89
145
 
146
+ &::-webkit-inner-spin-button,
147
+ &::-webkit-outer-spin-button {
148
+ -webkit-appearance: none;
149
+ }
150
+ &::selection {
151
+ background-color: transparent;
152
+ }
153
+ &.micl-timepicker--selected {
154
+ --statelayer-color: var(--md-sys-color-on-primary-container);
155
+
156
+ background-color: var(--md-sys-color-primary-container);
157
+ color: var(--md-sys-color-on-primary-container);
158
+ border: 2px solid var(--md-sys-color-primary);
159
+ }
90
160
  &:hover {
91
161
  --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
92
162
  }
163
+ &:focus-visible {
164
+ --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
165
+ }
166
+ &:active {
167
+ --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
168
+ }
93
169
  }
94
- &::-webkit-datetime-edit-hour-field:focus-within,
95
- &::-webkit-datetime-edit-minute-field:focus-within {
96
- box-sizing: border-box;
97
- background-color: var(--md-sys-color-primary-container);
98
- color: var(--md-sys-color-on-primary-container);
99
- outline: none;
100
- border: 2px solid var(--md-sys-color-primary);
170
+ input[name=hour] {
171
+ grid-area: timepicker-hour;
172
+ justify-self: flex-end;
101
173
  }
102
- &::-webkit-calendar-picker-indicator {
103
- display: none;
174
+ input[name=minute] {
175
+ grid-area: timepicker-minute;
104
176
  }
105
- &::-webkit-datetime-edit-ampm-field {
177
+ &:has(.micl-timepicker__dial:not(.micl-hidden)) {
178
+ input[name=hour],
179
+ input[name=minute] {
180
+ @include typography.display-large;
181
+
182
+ border: none;
183
+ cursor: pointer;
184
+ }
185
+ }
186
+ &:not(:has(.micl-timepicker__am)):not(:has(.micl-timepicker__dial:not(.micl-hidden))) {
187
+ --md-sys-timepicker-input-width: var(--md-sys-timepicker-input-width-24h);
188
+ }
189
+ }
190
+ .micl-timepicker__separator {
191
+ @include typography.display-large;
192
+
193
+ grid-area: timepicker-separator;
194
+ block-size: var(--md-sys-timepicker-input-height);
195
+ line-height: var(--md-sys-timepicker-input-height);
196
+ inline-size: var(--md-sys-timepicker-separator-width);
197
+ text-align: center;
198
+ color: var(--md-sys-color-on-surface);
199
+ }
200
+ .micl-timepicker__period {
201
+ --md-sys-timepicker-ampm-height: calc(var(--md-sys-timepicker-period-height) / 2);
202
+
203
+ grid-area: timepicker-period;
204
+ block-size: var(--md-sys-timepicker-period-height);
205
+ inline-size: 0;
206
+
207
+ &:has(.micl-timepicker__am) {
208
+ inline-size: var(--md-sys-timepicker-period-width);
209
+ margin-inline: 12px 0;
210
+ }
211
+ .micl-timepicker__am,
212
+ .micl-timepicker__pm {
106
213
  --statelayer-color: var(--md-sys-color-on-surface-variant);
107
214
 
215
+ @include typography.title-medium;
216
+
217
+ appearance: none;
108
218
  box-sizing: border-box;
109
- block-size: var(--md-sys-timepicker-period-height);
219
+ position: relative;
220
+ display: flex;
221
+ align-items: center;
110
222
  inline-size: var(--md-sys-timepicker-period-width);
111
- padding: 0;
223
+ block-size: var(--md-sys-timepicker-ampm-height);
224
+ min-block-size: var(--md-sys-timepicker-ampm-height);
112
225
  margin: 0;
113
- border-radius: var(--md-sys-shape-corner-small);
226
+ border: 1px solid var(--md-sys-color-outline);
227
+ outline: none;
228
+ color: var(--md-sys-color-on-surface-variant);
114
229
  background-color: transparent;
115
- color: transparent;
116
230
  background-image: linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
117
231
  background-repeat: no-repeat;
118
232
  background-size: 100%;
119
- z-index: 1;
120
233
  cursor: pointer;
234
+ -webkit-tap-highlight-color: transparent;
121
235
  transition: --statelayer-opacity var(--md-sys-timepicker-motion-duration) linear;
122
236
 
123
- &:hover {
124
- --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
125
- }
126
- }
127
- &::-webkit-datetime-edit-ampm-field:focus-within {
128
- border: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
129
- }
130
- &:has(::-webkit-datetime-edit-ampm-field) {
131
- &::before,
132
- &::after {
133
- @include typography.title-medium;
134
-
237
+ &::before {
135
238
  content: "AM";
136
- box-sizing: border-box;
137
239
  position: absolute;
138
- display: inline-flex;
139
- align-items: center;
140
- justify-content: center;
141
- block-size: calc(50% + 0.5px);
142
- inline-size: var(--md-sys-timepicker-period-width);
143
- inset-inline-end: 0;
144
- inset-block-start: 0;
145
- border: 1px solid var(--md-sys-color-outline);
146
- border-start-start-radius: var(--md-sys-shape-corner-small);
147
- border-start-end-radius: var(--md-sys-shape-corner-small);
148
- background-color: var(--md-sys-color-tertiary-container);
149
- color: var(--md-sys-color-on-tertiary-container);
240
+ inline-size: 100%;
241
+ text-align: center;
150
242
  }
151
- &::after {
152
- content: "PM";
153
- inset-block: auto 0;
154
- border-start-start-radius: 0;
155
- border-start-end-radius: 0;
156
- border-end-start-radius: var(--md-sys-shape-corner-small);
157
- border-end-end-radius: var(--md-sys-shape-corner-small);
158
- background-color: transparent;
159
- color: var(--md-sys-color-on-surface-variant);
243
+ &:checked {
244
+ color: var(--md-sys-color-on-tertiary-container);
245
+ background-color: var(--md-sys-color-tertiary-container);
160
246
  }
161
- &.micl-timepicker--pm {
162
- &::before {
163
- background-color: transparent;
164
- color: var(--md-sys-color-on-surface-variant);
247
+ &:hover,
248
+ &:focus-visible,
249
+ &:active {
250
+ &:checked {
251
+ --statelayer-color: var(--md-sys-color-on-tertiary-container);
165
252
  }
166
253
  &::after {
167
- background-color: var(--md-sys-color-tertiary-container);
168
- color: var(--md-sys-color-on-tertiary-container);
254
+ border-color: var(--md-sys-color-on-surface);
169
255
  }
256
+ &:checked::after {
257
+ border-color: var(--md-sys-color-primary);
258
+ }
259
+ }
260
+ &:hover {
261
+ --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
262
+ }
263
+ &:focus-visible {
264
+ --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);
265
+
266
+ outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
267
+ outline-offset: -2px;
268
+ }
269
+ &:active {
270
+ --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);
271
+ }
272
+ }
273
+ .micl-timepicker__am {
274
+ border-start-start-radius: var(--md-sys-shape-corner-small);
275
+ border-start-end-radius: var(--md-sys-shape-corner-small);
276
+ }
277
+ .micl-timepicker__pm {
278
+ border-block-start-width: 0px;
279
+ border-end-start-radius: var(--md-sys-shape-corner-small);
280
+ border-end-end-radius: var(--md-sys-shape-corner-small);
281
+
282
+ &::before {
283
+ content: "PM";
170
284
  }
171
285
  }
172
286
  }
287
+
173
288
  .micl-timepicker__supporting-text-hour,
174
289
  .micl-timepicker__supporting-text-minute {
175
290
  @include typography.body-small;
176
291
 
177
- grid-area: supporting-hour;
292
+ grid-area: timepicker-hour-supporting;
178
293
  padding-block: 4px 0;
179
294
  color: var(--md-sys-color-on-surface-variant);
180
295
  }
181
296
  .micl-timepicker__supporting-text-minute {
182
- grid-area: supporting-minute;
183
- padding-inline-start: 16px;
297
+ grid-area: timepicker-minute-supporting;
184
298
  }
185
299
 
186
-
187
300
  .micl-timepicker .micl-timepicker__dial {
188
- --r: calc((var(--md-sys-timepicker-dial-size, 256px) - var(--md-sys-target-size, 48px)) / 2);
301
+ --micl-dial-radius: calc((var(--md-sys-timepicker-dial-size, 256px) - var(--md-sys-target-size, 48px)) / 2);
302
+ --micl-hour-radius: var(--micl-dial-radius);
303
+ --micl-angle: 0deg;
189
304
 
190
305
  position: relative;
191
- grid-area: dial;
192
- aspect-ratio: 1;
306
+ grid-area: timepicker-dial;
307
+ justify-self: center;
193
308
  block-size: var(--md-sys-timepicker-dial-size, 256px);
194
309
  inline-size: var(--md-sys-timepicker-dial-size, 256px);
195
- padding: unset;
310
+ margin-block: 36px 0;
311
+ margin-inline: 0;
312
+ outline: none;
196
313
  border-radius: var(--md-sys-shape-corner-full);
197
314
  background-color: var(--md-sys-color-surface-container-highest);
198
315
  list-style-type: none;
316
+ touch-action: none;
199
317
 
200
- time:nth-child(1) { --d: 270deg; }
201
- time:nth-child(2) { --d: 300deg; }
202
- time:nth-child(3) { --d: 330deg; }
203
- time:nth-child(4) { --d: 0deg; }
204
- time:nth-child(5) { --d: 30deg; }
205
- time:nth-child(6) { --d: 60deg; }
206
- time:nth-child(7) { --d: 90deg; }
207
- time:nth-child(8) { --d: 120deg; }
208
- time:nth-child(9) { --d: 150deg; }
209
- time:nth-child(10) { --d: 180deg; }
210
- time:nth-child(11) { --d: 210deg; }
211
- time:nth-child(12) { --d: 240deg; }
212
-
213
- time {
214
- --x: calc(var(--r) + (var(--r) * cos(var(--d))));
215
- --y: calc(var(--r) + (var(--r) * sin(var(--d))));
318
+ data.micl-timepicker__dial-inner {
319
+ --micl-hour-radius: calc(var(--micl-dial-radius) - var(--md-sys-target-size) + 12px);
320
+
321
+ z-index: 2;
322
+ &::before {
323
+ z-index: 2;
324
+ }
325
+ }
326
+ data {
327
+ --micl-a: calc(var(--micl-dial-radius) + (var(--micl-hour-radius) * cos(var(--micl-angle))));
328
+ --micl-b: calc(var(--micl-dial-radius) + (var(--micl-hour-radius) * sin(var(--micl-angle))));
216
329
 
217
330
  @include typography.body-large;
218
331
 
219
332
  position: absolute;
220
333
  display: grid;
334
+ place-content: center;
221
335
  block-size: var(--md-sys-target-size, 48px);
222
336
  inline-size: var(--md-sys-target-size, 48px);
223
- inset-inline-start: var(--x);
224
- inset-block-start: var(--y);
337
+ inset-inline-start: var(--micl-a);
338
+ inset-block-start: var(--micl-b);
339
+ outline: none;
225
340
  border-radius: var(--md-sys-shape-corner-full);
226
- place-content: center;
341
+ color: var(--md-sys-color-on-surface);
227
342
  cursor: pointer;
343
+ z-index: 1;
228
344
  user-select: none;
345
+ -webkit-tap-highlight-color: transparent;
229
346
 
230
347
  &.micl-timepicker__time--selected {
231
348
  color: var(--md-sys-color-on-primary);
232
349
  background-color: var(--md-sys-color-primary);
233
350
  }
234
- }
235
- &.micl-timepicker__dial--dragging {
236
- time:hover {
237
- color: var(--md-sys-color-on-primary);
238
- background-color: var(--md-sys-color-primary);
351
+ &::before {
352
+ content: "";
353
+ position: absolute;
354
+ block-size: var(--md-sys-target-size, 48px);
355
+ inline-size: calc(2 * var(--md-sys-target-size, 48px));
356
+ inset-inline-start: 0;
357
+ inset-block-end: 0;
358
+ transform: rotate(var(--micl-angle)) translate(calc(-1 * var(--md-sys-target-size, 48px)));
359
+ transform-origin: calc(var(--md-sys-target-size, 48px) / 2) center;
360
+ z-index: 1;
239
361
  }
240
362
  }
241
363
 
242
364
  .micl-timepicker__track {
243
- --ah: 114px;
365
+ --micl-track-length: 92px;
244
366
 
245
367
  position: relative;
246
368
  display: block;
247
369
  inline-size: var(--md-sys-timepicker-dial-track-width, 2px);
248
- block-size: var(--ah);
370
+ block-size: var(--micl-track-length);
249
371
  inset-inline-start: calc((var(--md-sys-timepicker-dial-size, 256px) - var(--md-sys-timepicker-dial-track-width, 2px)) / 2);
250
- inset-block-start: calc((var(--md-sys-timepicker-dial-size, 256px) / 2) - var(--ah));
372
+ inset-block-start: calc((var(--md-sys-timepicker-dial-size, 256px) / 2) - var(--micl-track-length));
251
373
  border-radius: calc(var(--md-sys-timepicker-dial-track-width, 2px) * 2);
252
374
  background-color: var(--md-sys-color-primary);
253
- transform: rotate(0deg);
375
+ transform: rotate(calc(90deg + var(--micl-angle)));
254
376
  transform-origin: bottom;
255
377
 
256
378
  &::before {