material-inspired-component-library 4.0.2 → 5.0.1

package/components/timepicker/index.scss

@@ -19,6 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
+@use '../../foundations';
 @use '../../styles/motion';
 @use '../../styles/shapes';
 @use '../../styles/statelayer';
@@ -27,6 +28,8 @@
 :root {
     --md-sys-timepicker-input-height: 72px;
     --md-sys-timepicker-input-width: 96px;
+    --md-sys-timepicker-input-width-24h: 114px;
+    --md-sys-timepicker-separator-width: 24px;
     --md-sys-timepicker-period-height: 72px;
     --md-sys-timepicker-period-width: 52px;
     --md-sys-timepicker-dial-size: 256px;
@@ -35,222 +38,342 @@
 }
 
 dialog.micl-dialog.micl-timepicker {
-    .micl-dialog__headline h2 {
-        @include typography.label-medium;
+    --md-sys-timepicker-motion-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
 
-        color: var(--md-sys-color-on-surface-variant);
+    .micl-dialog__headline {
+        padding-block-end: 20px;
+
+        h2 {
+            @include typography.label-medium;
+
+            color: var(--md-sys-color-on-surface-variant);
+        }
     }
     .micl-dialog__content {
         display: grid;
-        grid-template-areas: "time-input time-input" "supporting-hour supporting-minute" "dial dial";
+        padding-block-start: 1px;
+        grid-template-areas:
+            "timepicker-hour timepicker-separator timepicker-minute timepicker-period"
+            "timepicker-hour-supporting timepicker-hour-supporting timepicker-minute-supporting timepicker-minute-supporting"
+            "timepicker-dial timepicker-dial timepicker-dial timepicker-dial";
+        grid-template-columns: auto var(--md-sys-timepicker-separator-width) var(--md-sys-timepicker-input-width) auto;
     }
-}
+    .micl-dialog__actions {
+        &:has(.micl-timepicker__inputmode) {
+            justify-content: space-between;
+        }
 
-.micl-timepicker input {
-    --md-sys-timepicker-motion-duration: #{motion.$md-sys-motion-expressive-fast-spatial-duration};
+        .micl-timepicker__inputmode {
+            margin-inline-start: -8px;
+        }
+    }
 
-    @include typography.display-medium;
+    &:has(.micl-timepicker__dial:not(.micl-hidden)) {
+        --md-sys-timepicker-input-height: 80px;
+        --md-sys-timepicker-period-height: 80px;
 
-    grid-area: time-input;
-    position:relative;
-    padding: 0;
-    border: none;
-    outline: none;
-    background-color: transparent;
-    color: var(--md-sys-color-on-surface);
-	-webkit-tap-highlight-color: transparent;
+        &.micl-timepicker--horizontal {
+            --md-sys-timepicker-period-height: 38px;
 
-    &::-webkit-datetime-edit-fields-wrapper {
-        display: flex;
-        align-items: center;
-        padding: 0;
-        text-align: center;
-    }
-    &::-webkit-datetime-edit-text {
-        inline-size: 24px;
+            .micl-dialog__headline {
+                padding-block-end: 0;
+            }
+            .micl-dialog__content {
+                grid-template-areas:
+                    "timepicker-dummy timepicker-dummy timepicker-dummy timepicker-dial"
+                    "timepicker-hour timepicker-separator timepicker-minute timepicker-dial"
+                    "timepicker-period timepicker-period timepicker-period timepicker-dial";
+                grid-template-rows: 72px var(--md-sys-timepicker-input-height) auto;
+
+                .micl-timepicker__period {
+                    --md-sys-timepicker-ampm-height: var(--md-sys-timepicker-period-height);
+                    --md-sys-timepicker-period-width: calc(2 * var(--md-sys-timepicker-input-width) + var(--md-sys-timepicker-separator-width));
+
+                    display: flex;
+                    align-self: flex-start;
+                    margin-inline: 0;
+                    margin-block: 16px 0;
+
+                    .micl-timepicker__am {
+                        border-start-end-radius: 0;
+                        border-end-start-radius: var(--md-sys-shape-corner-small);
+                    }
+                    .micl-timepicker__pm {
+                        border-block-start-width: 1px;
+                        border-inline-start-width: 0px;
+                        border-start-end-radius: var(--md-sys-shape-corner-small);
+                        border-end-start-radius: 0;
+                    }
+                }
+                .micl-timepicker__dial {
+                    margin-block: 0;
+                    margin-inline: 40px 0;
+                }
+            }
+        }
+        .micl-timepicker__supporting-text-hour,
+        .micl-timepicker__supporting-text-minute {
+            display: none;
+        }
     }
-    &::-webkit-datetime-edit-hour-field,
-    &::-webkit-datetime-edit-minute-field {
+}
+
+.micl-timepicker {
+    input[name=hour],
+    input[name=minute] {
         --statelayer-color: var(--md-sys-color-on-surface);
 
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
+        @include typography.display-medium;
+
+        box-sizing: border-box;
         inline-size: var(--md-sys-timepicker-input-width);
         block-size: var(--md-sys-timepicker-input-height);
+        margin: 0;
         padding: 0;
+        border: none;
+        outline: none;
         border-radius: var(--md-sys-shape-corner-small);
         background-color: var(--md-sys-color-surface-container-highest);
         background-image: linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
         background-repeat: no-repeat;
         background-size: 100%;
-        cursor: pointer;
+        color: var(--md-sys-color-on-surface);
+        text-align: center;
+        user-select: none;
+        -webkit-tap-highlight-color: transparent;
+        -moz-appearance: textfield;
         transition: --statelayer-opacity var(--md-sys-timepicker-motion-duration) linear;
 
+        &::-webkit-inner-spin-button,
+        &::-webkit-outer-spin-button {
+            -webkit-appearance: none;
+        }
+        &::selection {
+            background-color: transparent;
+        }
+        &.micl-timepicker--selected {
+            --statelayer-color: var(--md-sys-color-on-primary-container);
+
+            background-color: var(--md-sys-color-primary-container);
+            color: var(--md-sys-color-on-primary-container);
+            border: 2px solid var(--md-sys-color-primary);
+        }
         &:hover {
-            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
+        }
+        &:focus-visible {
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
+        }
+        &:active {
+            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
         }
     }
-    &::-webkit-datetime-edit-hour-field:focus-within,
-    &::-webkit-datetime-edit-minute-field:focus-within {
-        box-sizing: border-box;
-        background-color: var(--md-sys-color-primary-container);
-        color: var(--md-sys-color-on-primary-container);
-        outline: none;
-        border: 2px solid var(--md-sys-color-primary);
+    input[name=hour] {
+        grid-area: timepicker-hour;
+        justify-self: flex-end;
+    }
+    input[name=minute] {
+        grid-area: timepicker-minute;
+    }
+    &:has(.micl-timepicker__dial:not(.micl-hidden)) {
+        input[name=hour],
+        input[name=minute] {
+            @include typography.display-large;
+
+            border: none;
+            cursor: pointer;
+        }
     }
-    &::-webkit-calendar-picker-indicator {
-        display: none;
+    &:not(:has(.micl-timepicker__am)):not(:has(.micl-timepicker__dial:not(.micl-hidden))) {
+        --md-sys-timepicker-input-width: var(--md-sys-timepicker-input-width-24h);
     }
-    &::-webkit-datetime-edit-ampm-field {
+}
+.micl-timepicker__separator {
+    @include typography.display-large;
+
+    grid-area: timepicker-separator;
+    block-size: var(--md-sys-timepicker-input-height);
+    line-height: var(--md-sys-timepicker-input-height);
+    inline-size: var(--md-sys-timepicker-separator-width);
+    text-align: center;
+    color: var(--md-sys-color-on-surface);
+}
+.micl-timepicker__period {
+    --md-sys-timepicker-ampm-height: calc(var(--md-sys-timepicker-period-height) / 2);
+
+    grid-area: timepicker-period;
+    block-size: var(--md-sys-timepicker-period-height);
+    inline-size: 0;
+
+    &:has(.micl-timepicker__am) {
+        inline-size: var(--md-sys-timepicker-period-width);
+        margin-inline: 12px 0;
+    }
+    .micl-timepicker__am,
+    .micl-timepicker__pm {
         --statelayer-color: var(--md-sys-color-on-surface-variant);
 
+        @include typography.title-medium;
+
+        appearance: none;
         box-sizing: border-box;
-        block-size: var(--md-sys-timepicker-period-height);
+        position: relative;
+        display: flex;
+        align-items: center;
         inline-size: var(--md-sys-timepicker-period-width);
-        padding: 0;
+        block-size: var(--md-sys-timepicker-ampm-height);
+        min-block-size: var(--md-sys-timepicker-ampm-height);
         margin: 0;
-        border-radius: var(--md-sys-shape-corner-small);
+        border: 1px solid var(--md-sys-color-outline);
+        outline: none;
+        color: var(--md-sys-color-on-surface-variant);
         background-color: transparent;
-        color: transparent;
         background-image: linear-gradient(rgb(from var(--statelayer-color) r g b / var(--statelayer-opacity)));
         background-repeat: no-repeat;
         background-size: 100%;
-        z-index: 1;
         cursor: pointer;
+        -webkit-tap-highlight-color: transparent;
         transition: --statelayer-opacity var(--md-sys-timepicker-motion-duration) linear;
 
-        &:hover {
-            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity);
-        }
-    }
-    &::-webkit-datetime-edit-ampm-field:focus-within {
-        border: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);
-    }
-    &:has(::-webkit-datetime-edit-ampm-field) {
-        &::before,
-        &::after {
-            @include typography.title-medium;
-
+        &::before {
             content: "AM";
-            box-sizing: border-box;
             position: absolute;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            block-size: calc(50% + 0.5px);
-            inline-size: var(--md-sys-timepicker-period-width);
-            inset-inline-end: 0;
-            inset-block-start: 0;
-            border: 1px solid var(--md-sys-color-outline);
-            border-start-start-radius: var(--md-sys-shape-corner-small);
-            border-start-end-radius: var(--md-sys-shape-corner-small);
-            background-color: var(--md-sys-color-tertiary-container);
-            color: var(--md-sys-color-on-tertiary-container);
+            inline-size: 100%;
+            text-align: center;
         }
-        &::after {
-            content: "PM";
-            inset-block: auto 0;
-            border-start-start-radius: 0;
-            border-start-end-radius: 0;
-            border-end-start-radius: var(--md-sys-shape-corner-small);
-            border-end-end-radius: var(--md-sys-shape-corner-small);
-            background-color: transparent;
-            color: var(--md-sys-color-on-surface-variant);
+        &:checked {
+            color: var(--md-sys-color-on-tertiary-container);
+            background-color: var(--md-sys-color-tertiary-container);
         }
-        &.micl-timepicker--pm {
-            &::before {
-                background-color: transparent;
-                color: var(--md-sys-color-on-surface-variant);
+        &:hover,
+        &:focus-visible,
+        &:active {
+            &:checked {
+                --statelayer-color: var(--md-sys-color-on-tertiary-container);
             }
             &::after {
-                background-color: var(--md-sys-color-tertiary-container);
-                color: var(--md-sys-color-on-tertiary-container);
+                border-color: var(--md-sys-color-on-surface);
             }
+            &:checked::after {
+                border-color: var(--md-sys-color-primary);
+            }
+        }
+        &:hover {
+            --statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);
+        }
+        &:focus-visible {
+            --statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);
+
+            outline: var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);
+            outline-offset: -2px;
+        }
+        &:active {
+            --statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%);
+        }
+    }
+    .micl-timepicker__am {
+        border-start-start-radius: var(--md-sys-shape-corner-small);
+        border-start-end-radius: var(--md-sys-shape-corner-small);
+    }
+    .micl-timepicker__pm {
+        border-block-start-width: 0px;
+        border-end-start-radius: var(--md-sys-shape-corner-small);
+        border-end-end-radius: var(--md-sys-shape-corner-small);
+
+        &::before {
+            content: "PM";
         }
     }
 }
+
 .micl-timepicker__supporting-text-hour,
 .micl-timepicker__supporting-text-minute {
     @include typography.body-small;
 
-    grid-area: supporting-hour;
+    grid-area: timepicker-hour-supporting;
     padding-block: 4px 0;
     color: var(--md-sys-color-on-surface-variant);
 }
 .micl-timepicker__supporting-text-minute {
-    grid-area: supporting-minute;
-    padding-inline-start: 16px;
+    grid-area: timepicker-minute-supporting;
 }
 
-
 .micl-timepicker .micl-timepicker__dial {
-    --r: calc((var(--md-sys-timepicker-dial-size, 256px) - var(--md-sys-target-size, 48px)) / 2);
+    --micl-dial-radius: calc((var(--md-sys-timepicker-dial-size, 256px) - var(--md-sys-target-size, 48px)) / 2);
+    --micl-hour-radius: var(--micl-dial-radius);
+    --micl-angle: 0deg;
 
     position: relative;
-    grid-area: dial;
-    aspect-ratio: 1;
+    grid-area: timepicker-dial;
+    justify-self: center;
     block-size: var(--md-sys-timepicker-dial-size, 256px);
     inline-size: var(--md-sys-timepicker-dial-size, 256px);
-    padding: unset;
+    margin-block: 36px 0;
+    margin-inline: 0;
+    outline: none;
     border-radius: var(--md-sys-shape-corner-full);
     background-color: var(--md-sys-color-surface-container-highest);
     list-style-type: none;
+    touch-action: none;
+
+    data.micl-timepicker__dial-inner {
+        --micl-hour-radius: calc(var(--micl-dial-radius) - var(--md-sys-target-size, 48px) + 12px);
 
-    time:nth-child(1) { --d: 270deg; }
-    time:nth-child(2) { --d: 300deg; }
-    time:nth-child(3) { --d: 330deg; }
-    time:nth-child(4) { --d: 0deg; }
-    time:nth-child(5) { --d: 30deg; }
-    time:nth-child(6) { --d: 60deg; }
-    time:nth-child(7) { --d: 90deg; }
-    time:nth-child(8) { --d: 120deg; }
-    time:nth-child(9) { --d: 150deg; }
-    time:nth-child(10) { --d: 180deg; }
-    time:nth-child(11) { --d: 210deg; }
-    time:nth-child(12) { --d: 240deg; }
-
-    time {
-        --x: calc(var(--r) + (var(--r) * cos(var(--d))));
-        --y: calc(var(--r) + (var(--r) * sin(var(--d))));
+        z-index: 2;
+        &::before {
+            z-index: 2;
+        }
+    }
+    data {
+        --micl-a: calc(var(--micl-dial-radius) + (var(--micl-hour-radius) * cos(var(--micl-angle))));
+        --micl-b: calc(var(--micl-dial-radius) + (var(--micl-hour-radius) * sin(var(--micl-angle))));
 
         @include typography.body-large;
 
         position: absolute;
         display: grid;
+        place-content: center;
         block-size: var(--md-sys-target-size, 48px);
         inline-size: var(--md-sys-target-size, 48px);
-        inset-inline-start: var(--x);
-        inset-block-start: var(--y);
+        inset-inline-start: var(--micl-a);
+        inset-block-start: var(--micl-b);
+        outline: none;
         border-radius: var(--md-sys-shape-corner-full);
-        place-content: center;
+        color: var(--md-sys-color-on-surface);
         cursor: pointer;
+        z-index: 1;
         user-select: none;
+        -webkit-tap-highlight-color: transparent;
 
         &.micl-timepicker__time--selected {
             color: var(--md-sys-color-on-primary);
             background-color: var(--md-sys-color-primary);
         }
-    }
-    &.micl-timepicker__dial--dragging {
-        time:hover {
-            color: var(--md-sys-color-on-primary);
-            background-color: var(--md-sys-color-primary);
+        &::before {
+            content: "";
+            position: absolute;
+            block-size: var(--md-sys-target-size, 48px);
+            inline-size: calc(2 * var(--md-sys-target-size, 48px));
+            inset-inline-start: 0;
+            inset-block-end: 0;
+            transform: rotate(var(--micl-angle)) translate(calc(-1 * var(--md-sys-target-size, 48px)));
+            transform-origin: calc(var(--md-sys-target-size, 48px) / 2) center;
+            z-index: 1;
         }
     }
 
     .micl-timepicker__track {
-        --ah: 114px;
+        --micl-track-length: 92px;
 
         position: relative;
         display: block;
         inline-size: var(--md-sys-timepicker-dial-track-width, 2px);
-        block-size: var(--ah);
+        block-size: var(--micl-track-length);
         inset-inline-start: calc((var(--md-sys-timepicker-dial-size, 256px) - var(--md-sys-timepicker-dial-track-width, 2px)) / 2);
-        inset-block-start: calc((var(--md-sys-timepicker-dial-size, 256px) / 2) - var(--ah));
+        inset-block-start: calc((var(--md-sys-timepicker-dial-size, 256px) / 2) - var(--micl-track-length));
         border-radius: calc(var(--md-sys-timepicker-dial-track-width, 2px) * 2);
         background-color: var(--md-sys-color-primary);
-        transform: rotate(0deg);
+        transform: rotate(calc(90deg + var(--micl-angle)));
         transform-origin: bottom;
 
         &::before {