material 1.0.4 → 3.0.0-next.1

package/src/styles/components/_timepicker.scss

@@ -0,0 +1,533 @@
+// src/components/timepicker/_styles.scss
+@use 'sass:map';
+@use '../../styles/abstract/base' as base;
+@use '../../styles/abstract/variables' as v;
+@use '../../styles/abstract/functions' as f;
+@use '../../styles/abstract/mixins' as m;
+@use '../../styles/abstract/theme' as t;
+
+$component: '#{base.$prefix}-time-picker';
+
+.#{$component} {
+  // Base styles
+  position: relative;
+  display: inline-block;
+  
+  // A native modal <dialog> (FLO-278): the browser centres it in the top layer and
+  // draws ::backdrop; the scrim is scrim at 0.32, as for every M3 dialog.
+  &__dialog {
+    box-sizing: border-box;
+    margin: auto;
+    padding: 0;
+    border: 0;
+    min-width: 280px;
+    max-width: 328px;
+    max-height: 520px;
+    background-color: t.color('surface-container-high');
+    color: t.color('on-surface');
+    border-radius: f.get-shape('extra-large');
+    @include m.elevation(3);
+
+    &[open] {
+      display: flex;
+      flex-direction: column;
+      animation: #{$component}-appear 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
+    }
+
+    &::backdrop { background: t.alpha('scrim', 0.32); }
+    
+    // Horizontal (landscape): the time and AM/PM stack beside the dial, and
+    // AM/PM lies flat, 216x38dp.
+    &--horizontal {
+      min-width: 520px;
+      min-height: 360px;
+
+      .#{$component}__content {
+        flex-direction: row;
+        align-items: center;
+      }
+
+      .#{$component}__input-container {
+        flex-direction: column;
+        align-items: center;
+      }
+
+      .#{$component}__period {
+        flex-direction: row;
+        width: 216px;
+        height: 38px;
+        margin: 12px 0 0;
+      }
+
+      .#{$component}__period-pm {
+        border-block-start: 0;
+        border-inline-start: 1px solid t.color('outline');
+      }
+
+      .#{$component}__dial {
+        margin-inline-start: 24px;
+      }
+    }
+
+    // Time formats
+    &--24h {
+      .#{$component}__period {
+        display: none;
+      }
+    }
+  }
+  
+  // Title
+  // M3 TimePickerTokens: HeadlineFont is LabelMedium, HeadlineColor is
+  // OnSurfaceVariant. The colour already matched; the type scale did not.
+  &__title {
+    padding: 24px 24px 16px;
+    @include m.typography('label-medium');
+    color: t.color('on-surface-variant');
+  }
+  
+  // Content container
+  &__content {
+    flex: 1;
+    padding: 0 24px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  // The time row: the fields, then AM/PM 12dp after them.
+  &__input-container {
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    margin: 0 0 24px 0;
+  }
+
+  // The fields and separators read left to right in any direction, as a time is
+  // written (Compose keeps them LTR); AM/PM follows the page's direction.
+  &__selectors {
+    display: flex;
+    align-items: flex-start;
+    direction: ltr;
+  }
+
+  &__time-input-field {
+    display: flex;
+    flex-direction: column;
+  }
+
+  // Dial mode's boxes (TimeSelector): 96x80dp, Display Large, corner small.
+  // Input mode's fields (TimeInput) are 96x72dp in Display Medium, below.
+  &__hours,
+  &__minutes,
+  &__seconds {
+    box-sizing: border-box;
+    width: 96px;
+    height: 80px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: f.get-shape('small');
+    text-align: center;
+    cursor: pointer;
+    @include m.typography('display-large');
+
+    // Input mode: TimeFieldContainerColor surface-container-highest with an
+    // on-surface label; focused, primary-container and on-primary-container
+    // inside a 2dp primary outline. The selected colours never showed before:
+    // this rule overrode them.
+    &[type="number"] {
+      height: 72px;
+      @include m.typography('display-medium');
+      background-color: t.color('surface-container-highest');
+      color: t.color('on-surface');
+      cursor: text;
+
+      &:focus {
+        outline: 2px solid t.color('primary');
+        outline-offset: -2px;
+        background-color: t.color('primary-container');
+        color: t.color('on-primary-container');
+      }
+
+      // Remove spinner arrows
+      -moz-appearance: textfield;
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+    }
+
+    // Dial mode: the boxes are radios (FLO-283). TimeSelector tokens: an 8dp
+    // surface-container-highest container with an on-surface label, filled
+    // primary-container when selected; state layers in the label colour.
+    &:not([type="number"]) {
+      --#{$component}-container: #{t.color('surface-container-highest')};
+      --#{$component}-label: #{t.color('on-surface')};
+      background-color: color-mix(in srgb, var(--#{$component}-label) var(--#{$component}-layer, 0%), var(--#{$component}-container));
+      color: var(--#{$component}-label);
+
+      &:hover { --#{$component}-layer: 8%; }
+      &:focus-visible, &:active { --#{$component}-layer: 10%; }
+
+      &[data-active="true"] {
+        --#{$component}-container: #{t.color('primary-container')};
+        --#{$component}-label: #{t.color('on-primary-container')};
+      }
+
+      // md.comp.focus-ring
+      &:focus { outline: none; }
+      &:focus-visible { outline: 3px solid t.color('secondary'); outline-offset: 2px; }
+    }
+  }
+
+  // Input mode names its fields below them, in Body Small on-surface-variant.
+  &__input-label {
+    margin-top: 4px;
+    @include m.typography('body-small');
+    color: t.color('on-surface-variant');
+  }
+
+  // The colon: 24dp wide, as tall as the boxes, on-surface.
+  &__separator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 80px;
+    @include m.typography('display-large');
+    color: t.color('on-surface');
+  }
+
+  // Period selector (AM/PM): 52x80dp beside the time (52x72 in input mode),
+  // corner small with a 1dp outline and a divider; unselected is transparent.
+  &__period {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    width: 52px;
+    height: 80px;
+    margin-inline-start: 12px;
+    border-radius: f.get-shape('small');
+    overflow: hidden;
+    // PeriodSelectorOutlineColor is Outline, not OutlineVariant.
+    border: 1px solid t.color('outline');
+
+    &-am,
+    &-pm {
+      display: flex;
+      flex: 1;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      @include m.typography('title-medium');
+      // PeriodSelectorUnselectedLabelTextColor. It was inherited before, so an
+      // unselected period took the dialog's on-surface.
+      color: t.color('on-surface-variant');
+
+      // Improve focus styles for keyboard navigation
+      &:focus-visible {
+        outline: 2px solid t.color('primary');
+        outline-offset: -2px;
+      }
+
+      &:hover {
+        background-color: t.alpha('on-surface-variant', 0.08);
+      }
+
+      &:active {
+        background-color: t.alpha('on-surface-variant', v.state('pressed-state-layer-opacity'));
+      }
+
+      // No time in this half of the day is inside minTime/maxTime (FLO-281).
+      &[aria-disabled="true"] {
+        opacity: 0.38;
+        cursor: default;
+        pointer-events: none;
+      }
+    }
+
+    &-pm {
+      border-block-start: 1px solid t.color('outline');
+    }
+
+    // PeriodSelectorSelectedContainerColor is TertiaryContainer and its label
+    // OnTertiaryContainer. The primary pair it used belongs to the time
+    // selector, which is why AM/PM and the hour field looked alike.
+    &--selected {
+      background-color: t.color('tertiary-container');
+      color: t.color('on-tertiary-container');
+
+      &:hover {
+        background-color: color-mix(in srgb, t.color('on-tertiary-container') 8%, t.color('tertiary-container'));
+      }
+    }
+  }
+
+  // Clock dial
+  &__dial {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    margin: 0 auto 24px;
+    width: 256px;
+    height: 256px;
+    
+  }
+
+  // The DOM dial (FLO-279), m3.material.io's clock dial: a 256dp surface-container-
+  // highest face with Body Large numbers, a 2dp primary track, an 8dp centre dot and
+  // a 48dp primary handle; under the handle the numbers read on-primary. One
+  // animated angle and radius place the track, the handle and that clipped copy, so
+  // they move together on the default spatial spring. A drag moves them directly.
+  &__dial-face {
+    position: relative;
+    width: 256px;
+    height: 256px;
+    border-radius: 50%;
+    background-color: t.color('surface-container-highest');
+    color: t.color('on-surface');
+    touch-action: none;
+    cursor: pointer;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    transition: m.spring(--#{$component}-angle, default-spatial);
+    transition-property: --#{$component}-angle, --#{$component}-radius;
+
+    &--dragging { transition: none; }
+    &--swap .#{$component}__dial-numbers:not(.#{$component}__dial-numbers--selected) { animation: #{$component}-swap 175ms linear; }
+  }
+
+  &__dial-numbers {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+
+    &--selected {
+      color: t.color('on-primary');
+      pointer-events: none;
+      clip-path: circle(24px at calc(50% + sin(var(--#{$component}-angle)) * var(--#{$component}-radius)) calc(50% - cos(var(--#{$component}-angle)) * var(--#{$component}-radius)));
+    }
+  }
+
+  &__dial-number {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    box-sizing: border-box;
+    width: 48px;
+    height: 48px;
+    margin: -24px 0 0 -24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    transform: translate(var(--#{$component}-x), var(--#{$component}-y));
+    @include m.typography('body-large');
+
+    &--inner { @include m.typography('body-medium'); }
+
+    // md.comp.focus-ring on the focused number.
+    &:focus-visible { outline: 3px solid t.color('secondary'); outline-offset: 2px; }
+
+    // Outside minTime/maxTime or off the step (FLO-281): M3's disabled content,
+    // at 38%.
+    &[aria-disabled="true"] { opacity: 0.38; cursor: default; }
+  }
+
+  &__dial-track {
+    position: absolute;
+    left: calc(50% - 1px);
+    bottom: 50%;
+    width: 2px;
+    height: var(--#{$component}-radius);
+    background-color: t.color('primary');
+    transform-origin: 50% 100%;
+    transform: rotate(var(--#{$component}-angle));
+    pointer-events: none;
+  }
+
+  &__dial-centre {
+    position: absolute;
+    inset: calc(50% - 4px);
+    border-radius: 50%;
+    background-color: t.color('primary');
+    pointer-events: none;
+  }
+
+  &__dial-handle {
+    position: absolute;
+    width: 48px;
+    height: 48px;
+    left: calc(50% + sin(var(--#{$component}-angle)) * var(--#{$component}-radius) - 24px);
+    top: calc(50% - cos(var(--#{$component}-angle)) * var(--#{$component}-radius) - 24px);
+    border-radius: 50%;
+    background-color: t.color('primary');
+    pointer-events: none;
+
+    // Between two labels (a minute like 07) the handle shows a dot.
+    &--between::after {
+      content: '';
+      position: absolute;
+      inset: calc(50% - 2px);
+      border-radius: 50%;
+      background-color: t.color('on-primary');
+    }
+  }
+  
+  // Actions footer
+  &__actions {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 24px 24px;
+  }
+  
+  &__toggle-type {
+    background: transparent;
+    border: none;
+    padding: 8px;
+    border-radius: 50%;
+    cursor: pointer;
+    color: t.color('on-surface-variant');
+    
+    // Improve touch target sizes on mobile
+    @media (max-width: 599px) {
+      min-height: 48px;
+      min-width: 48px;
+    }
+    
+    // Improve focus styles for keyboard navigation
+    &:focus-visible {
+      outline: 2px solid t.color('primary');
+      outline-offset: 2px;
+    }
+    
+    &:hover {
+      background-color: t.alpha('on-surface', 0.08);
+    }
+    
+    &:active {
+      background-color: t.alpha('on-surface', v.state('pressed-state-layer-opacity'));
+    }
+    
+    svg {
+      width: 24px;
+      height: 24px;
+      display: block;
+    }
+  }
+  
+  &__action-buttons {
+    display: flex;
+    gap: 8px;
+  }
+  
+  &__cancel,
+  &__confirm {
+    padding: 10px 12px;
+    border: none;
+    background: transparent;
+    border-radius: f.get-shape('small');
+    cursor: pointer;
+    @include m.typography('label-large');
+    color: t.color('primary');
+    
+    // Improve touch target sizes on mobile
+    @media (max-width: 599px) {
+      min-height: 48px;
+      padding: 12px 16px;
+    }
+    
+    // Improve focus styles for keyboard navigation
+    &:focus-visible {
+      outline: 2px solid t.color('primary');
+      outline-offset: 2px;
+    }
+    
+    &:hover {
+      background-color: t.alpha('primary', 0.08);
+    }
+    
+    &:active {
+      background-color: t.alpha('primary', v.state('pressed-state-layer-opacity'));
+    }
+  }
+  
+  // Responsive adjustments
+  @media (max-width: 599px) {
+    &__dialog {
+      width: 100%;
+      max-width: 100%;
+      min-height: 460px;
+      border-radius: 0;
+      margin: 0;
+      
+      &--horizontal {
+        flex-direction: column;
+        
+        .#{$component}__content {
+          flex-direction: column;
+        }
+        
+        .#{$component}__dial {
+          margin-inline-start: 0;
+        }
+      }
+    }
+    
+    &__input-container {
+      margin: 16px 0;
+    }
+    
+  }
+  
+  // Accessibility
+  &__sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+}
+
+// Input mode: fields and AM/PM are 72dp tall.
+.#{$component}__dialog--input {
+  .#{$component}__separator { height: 72px; }
+  .#{$component}__period { height: 72px; }
+}
+
+// 24-hour dial, vertical: the two boxes widen to 114dp (Compose), there being no
+// AM/PM beside them.
+.#{$component}__dialog--dial.#{$component}__dialog--24h.#{$component}__dialog--vertical .#{$component}__selectors:not(:has(.#{$component}__seconds)) :is(.#{$component}__hours, .#{$component}__minutes) {
+  width: 114px;
+}
+
+@keyframes #{$component}-appear {
+  from { opacity: 0; transform: translateY(20px) scale(0.9); }
+}
+
+
+// The dial's angle and radius animate as values, so the hand, the handle and the
+// clipped labels move together on one spring (FLO-279).
+@property --#{$component}-angle { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
+@property --#{$component}-radius { syntax: '<length>'; inherits: true; initial-value: 101px; }
+
+@keyframes #{$component}-swap {
+  from { opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .#{$component}__dialog[open] { animation: none; }
+  .#{$component}__dial-face { transition: none; }
+  .#{$component}__dial-face--swap .#{$component}__dial-numbers { animation: none; }
+}