material 1.0.4 → 3.0.0-next.0

package/src/styles/components/_split-button.scss

@@ -0,0 +1,229 @@
+// src/styles/components/_split-button.scss
+//
+// Split button, after the Material 3 tokens (Compose SplitButtonXSmallTokens
+// through SplitButtonXLargeTokens): a leading button carrying an action and a
+// trailing button that opens more choices, 2dp apart, the pair reading as one
+// pill. The outer corners are full and the inner ones are small, growing when
+// the button is hovered or pressed; the trailing button's inner corner
+// becomes a circle while its menu is open, and its chevron turns 180 degrees.
+//
+// Both halves are the library's own button, so their colours, state layers,
+// focus rings and touch targets come from there. Everything is written with
+// logical properties, so the pair mirrors in right-to-left languages.
+@use "sass:map";
+@use "sass:math";
+@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}-split-button";
+$button: "#{base.$prefix}-button";
+
+// height, leading start/end space, trailing space, icon, inner corner,
+// inner corner when hovered or pressed, and how far the chevron sits from
+// the centre while the menu is closed.
+//
+// The resting inner corner keeps the token value at the two small sizes,
+// where the spec's own renders show it at about an eighth of the height, and
+// holds that proportion at the three larger ones instead of the token's
+// 4, 8 and 12dp. Those read as square corners beside a full pill: a 4dp
+// corner is a fourteenth of a 56dp button. Set
+// `--<prefix>-split-button-inner-shape` to go back to the token value.
+$sizes: (
+  "xs": (height: 32px, lead-start: 12px, lead-end: 10px, trail: 13px, icon: 22px, inner: v.shape("extra-small"), inner-active: v.shape("small"), offset: 1px),
+  "s":  (height: 40px, lead-start: 16px, lead-end: 12px, trail: 13px, icon: 22px, inner: v.shape("extra-small"), inner-active: v.shape("medium"), offset: 1px),
+  "m":  (height: 56px, lead-start: 24px, lead-end: 24px, trail: 15px, icon: 26px, inner: v.shape("small"), inner-active: v.shape("medium"), offset: 2px),
+  "l":  (height: 96px, lead-start: 48px, lead-end: 48px, trail: 29px, icon: 38px, inner: v.shape("medium"), inner-active: v.shape("large-increased"), offset: 3px),
+  "xl": (height: 136px, lead-start: 64px, lead-end: 64px, trail: 43px, icon: 50px, inner: v.shape("large"), inner-active: v.shape("large-increased"), offset: 6px)
+);
+
+// The space between the two halves, at every size (BetweenSpace)
+$gap: 2px;
+
+.#{$component} {
+  display: inline-flex;
+  align-items: stretch;
+  gap: $gap;
+  vertical-align: middle;
+
+  // The two halves keep their own shapes; nothing here fights the button's
+  // own colours or states.
+  //
+  // The outer corners are half the height rather than a large pill value.
+  // CSS scales every corner of a box down together when the radii along any
+  // side overflow it, so a 9999px pill beside a 4dp corner drags that corner
+  // to about a fiftieth of a pixel and the split reads as a square cut.
+  // Half the height is the same pill and leaves the inner corner alone.
+  .#{$button} {
+    transition:
+      border-radius v.motion("spring-fast-spatial-duration") v.motion("spring-fast-spatial-easing"),
+      background-color v.motion("duration-short2") v.motion("easing-standard");
+  }
+
+  // ---------------------------------------------------------------------------
+  // Sizes
+  // ---------------------------------------------------------------------------
+  @each $size, $spec in $sizes {
+    &--#{$size} {
+      $inner: var(--#{base.$prefix}-split-button-inner-shape, #{map.get($spec, "inner")});
+      $inner-active: var(
+        --#{base.$prefix}-split-button-inner-shape-active,
+        #{map.get($spec, "inner-active")}
+      );
+
+      $outer: math.div(map.get($spec, "height"), 2);
+
+      .#{$button} {
+        height: map.get($spec, "height");
+        min-height: map.get($spec, "height");
+        border-start-start-radius: $outer;
+        border-end-start-radius: $outer;
+        border-start-end-radius: $outer;
+        border-end-end-radius: $outer;
+      }
+
+      // The leading button: an outer pill edge, an inner corner facing its
+      // neighbour
+      .#{$component}__leading {
+        padding-inline: map.get($spec, "lead-start") map.get($spec, "lead-end");
+        // Compose SplitButtonDefaults.LeadingButtonMinWidth
+        min-width: 48px;
+        border-start-end-radius: $inner;
+        border-end-end-radius: $inner;
+
+        &:hover,
+        &:focus-visible,
+        &:active {
+          border-start-end-radius: $inner-active;
+          border-end-end-radius: $inner-active;
+        }
+      }
+
+      // The trailing button is symmetrical, so its icon is nudged towards the
+      // flat edge to sit optically centred; while the menu is open the corner
+      // is round and the icon centres properly
+      .#{$component}__trailing {
+        padding-inline: map.get($spec, "trail");
+        // Its width is its padding and its icon, not the button's own minimum
+        min-width: 0;
+        border-start-start-radius: $inner;
+        border-end-start-radius: $inner;
+
+        // The icon sits in the button's icon wrapper, which has a size of its
+        // own; the split button's chevron is bigger than a button icon
+        .#{$button}__icon {
+          width: map.get($spec, "icon");
+          height: map.get($spec, "icon");
+        }
+
+        .#{$component}__chevron {
+          width: map.get($spec, "icon");
+          height: map.get($spec, "icon");
+          translate: calc(-1 * #{map.get($spec, "offset")}) 0;
+        }
+
+        @include m.rtl {
+          .#{$component}__chevron {
+            translate: map.get($spec, "offset") 0;
+          }
+        }
+
+        &:hover,
+        &:focus-visible,
+        &:active {
+          border-start-start-radius: $inner-active;
+          border-end-start-radius: $inner-active;
+        }
+      }
+
+      // Open: the trailing button's inner corner rounds off into a circle
+      &.#{$component}--expanded .#{$component}__trailing {
+        border-start-start-radius: $outer;
+        border-end-start-radius: $outer;
+      }
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // The halves stay flat. A standalone filled or tonal button rises to level 1
+  // on hover (ButtonDefaults.buttonElevation), but here that shadow falls
+  // across the 2dp gap and onto the other half, and the pair stops reading as
+  // one control: whichever half the pointer is over appears to float above its
+  // neighbour. The split button's own states are state layers and the inner
+  // corner morph (m3.material.io split button specs, "States"), which is what
+  // is left. A connected button group flattens its segments for the same
+  // reason. An elevated split button keeps its elevation: that is what the
+  // variant is.
+  // ---------------------------------------------------------------------------
+  &--filled,
+  &--tonal {
+    .#{$button} {
+      &,
+      &:hover,
+      &:focus-visible,
+      &:active {
+        box-shadow: none;
+      }
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Open: the inner corner rounds off and the chevron turns over
+  // ---------------------------------------------------------------------------
+  &--expanded {
+    .#{$component}__trailing {
+      .#{$component}__chevron {
+        translate: 0 0;
+        rotate: 180deg;
+      }
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // The chevron: it turns on the standard motion scheme, not the expressive
+  // one (M3 split button guidelines, "Behavior")
+  // ---------------------------------------------------------------------------
+  &__chevron {
+    display: block;
+    flex: none;
+    transition:
+      rotate v.motion("duration-medium1") v.motion("easing-standard"),
+      translate v.motion("duration-medium1") v.motion("easing-standard");
+  }
+
+  // ---------------------------------------------------------------------------
+  // Each half keeps a 48dp target even when the button is shorter
+  // (M3 split button accessibility)
+  // ---------------------------------------------------------------------------
+  &--xs,
+  &--s {
+    .#{$button} {
+      position: relative;
+
+      &::after {
+        content: "";
+        position: absolute;
+        inset-inline: 0;
+        top: 50%;
+        translate: 0 -50%;
+        height: v.button("touch-target");
+        min-height: 100%;
+      }
+    }
+  }
+
+  @include m.reduced-motion {
+    .#{$button},
+    &__chevron {
+      transition: none;
+    }
+  }
+
+  @include m.print {
+    .#{$component}__trailing {
+      display: none;
+    }
+  }
+}

package/src/styles/components/_switch.scss

@@ -0,0 +1,310 @@
+// src/components/switch/_switch.scss
+@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}-switch';
+
+.#{$component} {
+  // Base styles
+  display: inline-flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  padding: 4px 0;
+  user-select: none;
+
+  // Container for switch and label
+  &__container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    min-height: 48px;
+    width: 100%;
+    // Between the label and the track on whichever side the label is, in either
+    // direction; it was a physical margin-right.
+    column-gap: 12px;
+  }
+
+  // Content wrapper. The gap is on the container, so it stays between the label
+  // and the track whichever side the label is on, in either direction.
+  &__content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  // labelPosition 'end' only added this class, and the label stayed first. FLO-267.
+  &--label-end &__container {
+    flex-direction: row-reverse;
+  }
+
+  // Label
+  // Body Large, as the checkbox and radio labels: a list item's headline.
+  &__label {
+    @include m.typography('body-large');
+    color: t.color('on-surface');
+  }
+
+  // Input (visually hidden but accessible)
+  &__input {
+    position: absolute;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    cursor: pointer;
+    z-index: 1;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+
+    // md.comp.focus-ring around the track (material-web's switch ring), 3dp
+    // secondary at a 2dp offset. FLO-267.
+    &:focus-visible ~ .#{$component}__track {
+      outline: 3px solid t.color('secondary');
+      outline-offset: 2px;
+    }
+  }
+
+  // The track (52 x 32dp, a 2dp outline). The handle and its state layer are
+  // placed with inset-inline-start, so both mirror in right-to-left layouts: a
+  // physical left plus translateX put the selected handle off the track. FLO-267.
+  &__track {
+    position: relative;
+    flex-shrink: 0;
+    min-width: 52px;
+    height: 32px;
+    box-sizing: border-box;
+    border-radius: v.shape('full'); // SwitchTokens track-shape
+    background-color: t.color('surface-container-highest');
+    border: 2px solid t.color('outline');
+    transition: m.spring(background-color, fast-effects), m.spring(border-color, fast-effects);
+
+    // State layer: 40dp, centred on the handle.
+    &::after {
+      content: '';
+      position: absolute;
+      width: 40px;
+      height: 40px;
+      top: -6px;
+      inset-inline-start: -6px;
+      background-color: t.color('on-surface');
+      opacity: 0;
+      border-radius: 50%;
+      z-index: 0;
+      transition: m.spring(opacity, fast-effects), m.spring(inset-inline-start, fast-spatial);
+      pointer-events: none;
+    }
+  }
+
+  // The handle: 16dp unselected, 24dp selected or with an icon, 28dp pressed.
+  // Compose springs it on the fast spatial spring (damping 0.9, stiffness 1400).
+  &__thumb {
+    position: absolute;
+    top: 6px;
+    inset-inline-start: 6px;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background-color: t.color('outline');
+    transition: m.spring(inset-inline-start, fast-spatial), m.spring(top, fast-spatial),
+      m.spring(width, fast-spatial), m.spring(height, fast-spatial), m.spring(background-color, fast-effects);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1; /* Ensure thumb is above ripple */
+    pointer-events: none;
+
+    // Icons: 16dp. The selected one is on-primary-container, the unselected one
+    // surface-container-highest (SwitchTokens). FLO-267.
+    &-icon {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+      transform: scale(0);
+      transition: m.spring(opacity, fast-effects), m.spring(transform, fast-spatial);
+      color: t.color('on-primary-container');
+
+      svg {
+        width: 16px;
+        height: 16px;
+      }
+
+      &--unselected {
+        color: t.color('surface-container-highest');
+      }
+    }
+  }
+
+  // Supporting text
+  &__helper {
+    @include m.typography('body-medium');
+    color: t.color('on-surface-variant');
+
+    &--error {
+      color: t.color('error');
+    }
+  }
+
+  // With an unselected icon, the unselected handle is 24dp and shows it.
+  &--icons:not(&--checked) {
+    .#{$component}__thumb {
+      width: 24px;
+      height: 24px;
+      top: 2px;
+      inset-inline-start: 2px;
+    }
+
+    .#{$component}__thumb-icon--unselected {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  // Checked state
+  &--checked {
+    .#{$component}__track {
+      background-color: t.color('primary');
+      border-color: t.color('primary');
+
+      &::after {
+        inset-inline-start: 14px;
+        background-color: t.color('primary');
+      }
+    }
+
+    .#{$component}__thumb {
+      background-color: t.color('on-primary');
+      width: 24px;
+      height: 24px;
+      top: 2px;
+      inset-inline-start: 22px;
+    }
+
+    .#{$component}__thumb-icon:not(.#{$component}__thumb-icon--unselected) {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  &--dense {
+    .#{$component}__container {
+      min-height: initial;
+    }
+  }
+
+  // Error state
+  &--error {
+    .#{$component}__track {
+      border-color: t.color('error');
+    }
+  }
+
+  // Disabled state. SwitchTokens splits these: DisabledTrackOpacity is 0.12, while
+  // the handle carries its own alpha — DisabledUnselectedHandleOpacity 0.38 over
+  // OnSurface, and DisabledSelectedHandleOpacity 1.0 over Surface. A single opacity on
+  // the track cascaded onto the handle, so no part matched its token.
+  &--disabled {
+    pointer-events: none;
+
+    .#{$component}__track {
+      background-color: t.alpha('on-surface', 0.12);
+      border-color: t.alpha('on-surface', 0.12);
+    }
+
+    .#{$component}__thumb {
+      background-color: t.alpha('on-surface', 0.38);
+
+      &-icon--unselected {
+        color: t.alpha('surface-container-highest', 0.38);
+      }
+    }
+
+    .#{$component}__label, .#{$component}__helper {
+      color: t.alpha('on-surface', 0.38);
+      opacity: 1;
+    }
+
+    // Selected: the track keeps 0.12, and the handle is Surface at full opacity.
+    &.#{$component}--checked {
+      .#{$component}__track {
+        background-color: t.alpha('on-surface', 0.12);
+        border-color: transparent;
+      }
+
+      .#{$component}__thumb {
+        background-color: t.color('surface');
+
+        &-icon {
+          color: t.alpha('on-surface', 0.38);
+        }
+      }
+    }
+  }
+
+  // Interaction states. The handle takes on-surface-variant (unselected) or
+  // primary-container (selected) on hover, focus and press, over an on-surface or
+  // primary layer at the hover, focus and pressed opacities. FLO-267.
+  &:not(.#{$component}--disabled) {
+    .#{$component}__input:is(:hover, :focus-visible, :active) ~ .#{$component}__track .#{$component}__thumb {
+      background-color: t.color('on-surface-variant');
+    }
+
+    &.#{$component}--checked .#{$component}__input:is(:hover, :focus-visible, :active) ~ .#{$component}__track .#{$component}__thumb {
+      background-color: t.color('primary-container');
+    }
+
+    .#{$component}__input:hover ~ .#{$component}__track::after {
+      opacity: v.state('hover-state-layer-opacity');
+    }
+
+    .#{$component}__input:focus-visible ~ .#{$component}__track::after {
+      opacity: v.state('focus-state-layer-opacity');
+    }
+
+    .#{$component}__input:active ~ .#{$component}__track::after {
+      opacity: v.state('pressed-state-layer-opacity');
+    }
+
+    // Pressed handle: 28dp, centred where the handle sits.
+    .#{$component}__input:active ~ .#{$component}__track .#{$component}__thumb {
+      width: 28px;
+      height: 28px;
+      top: 0;
+      inset-inline-start: 0;
+    }
+
+    &.#{$component}--checked .#{$component}__input:active ~ .#{$component}__track .#{$component}__thumb {
+      inset-inline-start: 20px;
+    }
+  }
+
+  // Accessibility
+  @include m.reduced-motion {
+    .#{$component}__track,
+    .#{$component}__thumb,
+    .#{$component}__thumb-icon {
+      transition: none;
+    }
+  }
+
+  @include m.high-contrast {
+    .#{$component}__track {
+      border-width: 2px;
+    }
+
+    &--checked .#{$component}__track {
+      border-color: currentColor;
+    }
+  }
+
+  // Touch target for better mobile experience
+  // @include m.touch-target;
+}