material 1.0.4 → 3.0.0-next.1

package/src/styles/components/_slider.scss

@@ -0,0 +1,388 @@
+// src/components/slider/_styles.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;
+
+// Motion (FLO-250). A value change that does not follow a pointer -- a tap on the
+// track, a key, setValue() -- carries the handle, the value indicator and the track
+// to the new value on the default spatial spring, as the m3.material.io sliders
+// video shows: a tap slides the handle over, peaking about 300ms in with a 3-5%
+// overshoot and settled by 450ms. The default spatial spring peaks at about 270ms
+// with 1.5% and settles in 450ms; the fast one (140ms, 9%) was visibly too strong. The controller sets
+// `--settling` for those changes alone, so a drag follows the pointer and a layout
+// render (the first one, a resize) never moves anything (FLO-249).
+//
+// The value indicator grows out of the handle and shrinks back into it: in on
+// motionDurationMedium4 emphasized decelerate, out on motionDurationShort3
+// emphasized accelerate (material-components-android BaseSlider label animator).
+$bubble-in: v.motion('duration-medium4') v.motion('easing-emphasized-decelerate');
+$bubble-out: v.motion('duration-short3') v.motion('easing-emphasized-accelerate');
+$bubble-transition: scale $bubble-out, opacity $bubble-out, visibility 0s linear v.motion('duration-short3');
+$bubble-transition-visible: scale $bubble-in, opacity $bubble-in, visibility 0s;
+
+$component: '#{base.$prefix}-slider';
+
+.#{$component} {
+  // Base styles
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+  touch-action: none;
+
+  // Decoration inherits theme colours directly, without JavaScript subscriptions.
+  // SliderTokens / SliderDefaults.colors(): the active track, the handle, the stop
+  // indicator and the ticks on the inactive track take the colour (primary); the
+  // inactive track and the ticks on the active track take its container colour
+  // (secondaryContainer). A stylesheet overrides them per slider with
+  // --<prefix>-slider-color, --<prefix>-slider-container-color and, for the ticks on
+  // the active track alone, --<prefix>-slider-on-color. FLO-250.
+  --#{base.$prefix}-slider-track-color: var(--#{base.$prefix}-slider-color, #{t.color('primary')});
+  --#{base.$prefix}-slider-inactive-track-color: var(--#{base.$prefix}-slider-container-color, #{t.color('secondary-container')});
+  --#{base.$prefix}-slider-tick-color: var(--#{base.$prefix}-slider-on-color, var(--#{base.$prefix}-slider-inactive-track-color));
+  --#{base.$prefix}-slider-active-opacity: 1;
+  --#{base.$prefix}-slider-inactive-opacity: 1;
+  // Ticks on the inactive track, then ticks on the active track.
+  --#{base.$prefix}-slider-tick-opacity: 1;
+  --#{base.$prefix}-slider-active-tick-opacity: 1;
+  
+  // Container should not have a focus outline
+  &:focus {
+    outline: none;
+  }
+  
+  // Label
+  // Body Large, as the checkbox, radio and switch labels (FLO-587).
+  &__label {
+    display: block;
+    @include m.typography('body-large');
+    color: t.color('on-surface');
+    margin-bottom: 4px;
+    // labelPosition: 'end' puts it below the track.
+    &--end { margin-bottom: 0; margin-top: 4px; }
+  }
+  
+  // Icon positioning
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: t.color('on-surface-variant');
+    width: 40px;
+    height: 40px;
+    
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+  
+  // When slider has icon at end position
+  // An icon outside the track sits level with it, before or after it (the M3
+  // guidelines' icons at either end); the label spans the track's column, above or
+  // below. It used to be absolutely placed at a fixed top on the start side, so
+  // iconPosition and labelPosition changed nothing on screen. FLO-107.
+  &--icon {
+    display: grid;
+    grid-template-columns: 40px minmax(0, 1fr);
+    grid-template-areas: ". label" "icon track";
+    column-gap: 8px;
+    align-items: center;
+    .#{$component}__label { grid-area: label; }
+    .#{$component}__container { grid-area: track; }
+    .#{$component}__icon { grid-area: icon; }
+  }
+  &--icon.#{$component}--label-end { grid-template-areas: "icon track" ". label"; }
+  &--icon-end {
+    grid-template-columns: minmax(0, 1fr) 40px;
+    grid-template-areas: "label ." "track icon";
+  }
+  &--icon-end.#{$component}--label-end { grid-template-areas: "track icon" "label ."; }
+
+  // Slider container - holds all the slider elements
+  &__container {
+    position: relative;
+    height: 40px;
+    display: flex;
+    align-items: center;
+  }
+
+  // M3 defines primary only; the other colours pair with their own container the
+  // way primary pairs with secondaryContainer.
+  @each $color in (secondary, tertiary, error) {
+    &--#{$color} {
+      --#{base.$prefix}-slider-track-color: var(--#{base.$prefix}-slider-color, #{t.color($color)});
+      --#{base.$prefix}-slider-inactive-track-color: var(--#{base.$prefix}-slider-container-color, #{t.color($color + '-container')});
+    }
+  }
+  // Disabled (SliderDefaults.colors()): the active track and the ticks on the inactive
+  // track onSurface at 0.38, the inactive track and the ticks on the active track
+  // onSurface at 0.12.
+  &--disabled {
+    --#{base.$prefix}-slider-track-color: #{t.color('on-surface')};
+    --#{base.$prefix}-slider-inactive-track-color: #{t.color('on-surface')};
+    --#{base.$prefix}-slider-tick-color: #{t.color('on-surface')};
+    --#{base.$prefix}-slider-active-opacity: 0.38;
+    --#{base.$prefix}-slider-inactive-opacity: 0.12;
+    --#{base.$prefix}-slider-tick-opacity: 0.38;
+    --#{base.$prefix}-slider-active-tick-opacity: 0.12;
+  }
+  // Discrete ticks offset their repeat with cqw/cqh, which resolve against this
+  // box. inset: 0 already gives it a definite size, so size containment holds.
+  &__visual { position: absolute; inset: 0; pointer-events: none; container-type: size; }
+  &__track { position: absolute; top: 50%; width: 100%; transform: translateY(-50%); overflow: hidden; }
+  // The track clips the outer corners (its radius is set per size); a segment's own
+  // corners are the inside ones, TrackInsideCornerSize = 2dp.
+  &__segment {
+    position: absolute; height: 100%; border-radius: 2px;
+    background: var(--#{base.$prefix}-slider-inactive-track-color); opacity: var(--#{base.$prefix}-slider-inactive-opacity);
+    &--active { background: var(--#{base.$prefix}-slider-track-color); opacity: var(--#{base.$prefix}-slider-active-opacity); }
+  }
+  &__ticks {
+    position: absolute; inset: 0; color: var(--#{base.$prefix}-slider-track-color); opacity: var(--#{base.$prefix}-slider-tick-opacity);
+    background-image: radial-gradient(circle at center, currentColor 2px, transparent 2px);
+    background-repeat: repeat-x;
+    &--active { color: var(--#{base.$prefix}-slider-tick-color); opacity: var(--#{base.$prefix}-slider-active-tick-opacity); }
+  }
+  // Inset icon: on the active track it takes the colour of the ticks there
+  // (secondaryContainer), on the inactive track the colour of the ticks there (the
+  // slider colour), as Compose's SliderWithTrackIconsSample tints it.
+  &__inset-icon {
+    position: absolute; top: 50%; transform: translateY(-50%);
+    display: flex; align-items: center; justify-content: center;
+    color: var(--#{base.$prefix}-slider-tick-color); opacity: var(--#{base.$prefix}-slider-active-tick-opacity);
+    svg { width: 100%; height: 100%; fill: currentColor; }
+    &--inactive { color: var(--#{base.$prefix}-slider-track-color); opacity: var(--#{base.$prefix}-slider-tick-opacity); }
+  }
+  // Stop indicator: 4dp in the active track colour, centred one corner radius from the
+  // end. withTracks sets `right` per size.
+  &__dot { position: absolute; top: calc(50% - 2px); width: 4px; height: 4px;
+    border-radius: 50%; background: var(--#{base.$prefix}-slider-track-color); opacity: var(--#{base.$prefix}-slider-active-opacity); }
+
+  // Handle - updated with T-shape and proper focus styles
+  &__handle {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    cursor: pointer;
+    z-index: 4;
+    width: 14px;
+    height: 50px;
+    border-radius: 16px;
+    background-color: rgba(red, .0);
+
+    // Focus is shown the Compose way: the handle narrows (FocusHandleWidth, below) and
+    // the value indicator appears. No outline ring.
+    &:focus {
+      outline: none;
+    }
+
+    // Create a T-shaped handle using pseudo-elements
+    &::before {
+      pointer-events: none;
+      content: '';
+      position: absolute;
+      width: 4px;
+      height: 100%;
+      // --#{base.$prefix}-slider-color: the same per-slider override the canvas honours
+      background-color: var(--#{base.$prefix}-slider-color, #{t.color('primary')});
+      border-radius: v.shape('full'); // SliderTokens handle-shape
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      
+      .#{$component}--secondary & {
+        background-color: var(--#{base.$prefix}-slider-color, #{t.color('secondary')});
+      }
+      
+      .#{$component}--tertiary & {
+        background-color: var(--#{base.$prefix}-slider-color, #{t.color('tertiary')});
+      }
+      
+      .#{$component}--error & {
+        background-color: t.color('error');
+      }
+      
+      .#{$component}--disabled & {
+        background-color: t.color('on-surface');
+        opacity: 0.38;
+      }
+    }
+    
+    // Disabled pointer events on the pseudo-element
+    &::before {
+      pointer-events: none;
+    }
+    
+    // PressedHandleWidth and FocusHandleWidth: 2dp, half the resting 4dp.
+    .#{$component}--dragging &::before,
+    &:active::before,
+    &:focus-visible::before,
+    &--focused::before {
+      width: 2px;
+    }
+    
+    // Hover state
+    &:hover::before {
+      background-color: var(--#{base.$prefix}-slider-color, #{t.color('primary')});
+      
+      .#{$component}--secondary & {
+        background-color: var(--#{base.$prefix}-slider-color, #{t.color('secondary')});
+      }
+      
+      .#{$component}--tertiary & {
+        background-color: var(--#{base.$prefix}-slider-color, #{t.color('tertiary')});
+      }
+      
+      .#{$component}--error & {
+        background-color: t.color('error');
+      }
+      
+      .#{$component}--disabled & {
+        background-color: t.color('on-surface');
+        opacity: 0.38;
+      }
+    }
+    
+    // Active state
+    &:active::before {
+      background-color: var(--#{base.$prefix}-slider-color, #{t.color('primary')});
+      
+      .#{$component}--secondary & {
+        background-color: var(--#{base.$prefix}-slider-color, #{t.color('secondary')});
+      }
+      
+      .#{$component}--tertiary & {
+        background-color: var(--#{base.$prefix}-slider-color, #{t.color('tertiary')});
+      }
+      
+      .#{$component}--error & {
+        background-color: t.color('error');
+      }
+    }
+  }
+
+  // Range slider styles
+  &--range {
+    .#{$component}__handle {
+      &:nth-of-type(1) {
+        z-index: 3;
+      }
+    }
+    
+    // In range mode, both dots should be visible
+    .#{$component}__dot {
+      z-index: 2;
+    }
+  }
+  
+  // Value indicator: inverseSurface / inverseOnSurface, LabelLarge, 48 x 44dp, its
+  // bottom 12dp above the handle's top (ValueIndicatorActiveBottomSpace). The handle
+  // is centred in the container, so that is half the container plus half the handle
+  // plus 12. The handle height is per size; withTracks publishes it.
+  &__value {
+    position: absolute;
+    bottom: calc(50% + var(--#{base.$prefix}-slider-handle-height, 44px) / 2 + 12px);
+    left: 0;
+    box-sizing: border-box;
+    min-width: 48px;
+    height: 44px;
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: t.color('inverse-surface');
+    color: t.color('inverse-on-surface');
+    border-radius: v.shape('full'); // the value indicator: a pill
+    @include m.typography('label-large');
+    white-space: nowrap;
+    transform: translateX(-50%);
+    transform-origin: 50% 100%;
+    scale: 0;
+    visibility: hidden;
+    opacity: 0;
+    transition: $bubble-transition;
+    pointer-events: none;
+    
+    // Show value when interacting
+    &--visible {
+      visibility: visible;
+      opacity: 1;
+      scale: 1;
+      transition: $bubble-transition-visible;
+    }
+  }
+
+  // Positions are written to left (right in RTL), or to bottom or top on a vertical
+  // slider; lengths to width or height.
+  $settle-position: m.spring(left, default-spatial), m.spring(right, default-spatial), m.spring(bottom, default-spatial), m.spring(top, default-spatial);
+  $settle-length: m.spring(width, default-spatial), m.spring(height, default-spatial);
+  &--settling {
+    .#{$component}__handle, .#{$component}__inset-icon { transition: $settle-position; }
+    .#{$component}__segment { transition: $settle-position, $settle-length; }
+    .#{$component}__value { transition: $settle-position, $bubble-transition; }
+    .#{$component}__value--visible { transition: $settle-position, $bubble-transition-visible; }
+  }
+
+  // Vertical (FLO-252): the same parts turned a quarter. withTracks and the
+  // controller write positions along the axis -- to bottom, or to top with
+  // topToBottom -- and thicknesses across it; the length is the slider's height.
+  &--vertical {
+    width: auto;
+    height: 100%;
+    align-items: center;
+
+    .#{$component}__container { height: 100%; min-height: 120px; }
+    .#{$component}__track { top: 0; left: 50%; width: auto; height: 100%; transform: translateX(-50%); }
+    .#{$component}__segment { width: 100%; }
+    .#{$component}__ticks { background-repeat: repeat-y; }
+    .#{$component}__dot { top: auto; left: calc(50% - 2px); }
+    .#{$component}__inset-icon { top: auto; left: 50%; transform: translateX(-50%); }
+    .#{$component}__handle {
+      top: auto;
+      left: 50%;
+      height: 14px;
+      &::before { width: 100%; height: 4px; }
+    }
+    &.#{$component}--dragging .#{$component}__handle::before,
+    .#{$component}__handle:active::before,
+    .#{$component}__handle:focus-visible::before,
+    .#{$component}__handle--focused::before {
+      width: 100%;
+      height: 2px;
+    }
+    // The value indicator sits beside the handle, on its start side.
+    .#{$component}__value {
+      left: auto;
+      bottom: auto;
+      right: calc(50% + var(--#{base.$prefix}-slider-handle-height, 44px) / 2 + 12px);
+      transform-origin: 100% 50%;
+    }
+  }
+  
+  &--disabled {
+
+    // Disabled state
+    .#{$component}__handle {
+      cursor: default;
+      pointer-events: none;
+      
+      &::before {
+        opacity: 0.38;
+        background-color: t.color('on-surface');
+      }
+    }
+  }
+
+  // Discrete slider with steps
+  &--discrete {
+    .#{$component}__tick {
+      width: 4px;
+      height: 4px;
+    }
+  }
+  
+}

package/src/styles/components/_snackbar.scss

@@ -0,0 +1,209 @@
+// src/styles/components/_snackbar.scss
+//
+// Snackbar, after the Material 3 tokens (Compose SnackbarTokens.kt): an
+// inverse-surface container at elevation level 3 with the extra-small corner,
+// 48dp for one line of body-medium and 68dp for two, an inverse-primary text
+// button for the action and an inverse-on-surface icon for the close
+// affordance. Spacing follows Compose Snackbar.kt: 16dp at the start, 8dp
+// between the text and the action, 8dp after the action, none after the
+// close icon, and 14dp above and below the text. The action moves below the
+// text when it is wider than 128dp (Android `maxActionInlineWidth`).
+@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}-snackbar';
+$button: '#{base.$prefix}-button';
+$icon-button: '#{base.$prefix}-icon-button';
+
+// Distance from the edges of the window. Neither source makes it a token:
+// the Android snackbar keeps 8dp, the Compose host 12dp.
+$margin: 16px;
+
+.#{$component} {
+  @include m.typography('body-medium');
+  box-sizing: border-box;
+  position: fixed;
+  bottom: $margin;
+  z-index: f.get-z-index('snackbar');
+  display: flex;
+  align-items: center;
+  min-width: 320px;
+  max-width: 600px;
+  min-height: 48px;
+  padding: 0 16px;
+  background-color: t.color('inverse-surface');
+  color: t.color('inverse-on-surface');
+  border-radius: f.get-shape('extra-small');
+  @include m.elevation(3);
+
+  // Enter and exit: a fade on the fast effects spring and a scale from 0.8 on
+  // the fast spatial spring (Compose SnackbarHost FadeInFadeOutWithScale)
+  opacity: 0;
+  scale: 0.8;
+  transition:
+    opacity v.motion('spring-fast-effects-duration') v.motion('spring-fast-effects-easing'),
+    scale v.motion('spring-fast-spatial-duration') v.motion('spring-fast-spatial-easing');
+  pointer-events: none;
+
+  &--visible {
+    opacity: 1;
+    scale: 1;
+    pointer-events: auto;
+  }
+
+  // A top-layer snackbar is a popover (`layer: "top"`). The browser's popover
+  // defaults centre it in the viewport inside a border; the snackbar keeps its
+  // place at the bottom. `:where` keeps this rule under the positions and the
+  // high-contrast border that follow.
+  &:where([popover]) {
+    inset: auto;
+    bottom: $margin;
+    margin: 0;
+    border: 0;
+    overflow: visible;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Position along the bottom edge
+  // ---------------------------------------------------------------------------
+  &--center {
+    left: 50%;
+    translate: -50% 0;
+  }
+
+  &--start {
+    inset-inline-start: $margin;
+  }
+
+  &--end {
+    inset-inline-end: $margin;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Supporting text: up to two lines
+  // ---------------------------------------------------------------------------
+  // Vertical spacing is margin, not padding: the two-line clamp clips at the
+  // padding box, so a third line would show through padding.
+  &__text {
+    @include m.truncate(2);
+    flex: 1 1 auto;
+    min-width: 0;
+    margin: 14px 0;
+    overflow-wrap: anywhere;
+  }
+
+  &--with-action &__text,
+  &--dismissible &__text {
+    padding-inline-end: 8px;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Action: the library's text button in the inverse colours
+  // ---------------------------------------------------------------------------
+  &--with-action {
+    padding-inline-end: 8px;
+  }
+
+  &--dismissible {
+    padding-inline-end: 0;
+  }
+
+  .#{$button}.#{$component}__action {
+    flex: 0 0 auto;
+    color: t.color('inverse-primary');
+
+    &:hover {
+      @include m.state-layer(t.color('inverse-primary'), 'hover');
+    }
+
+    &:focus-visible {
+      @include m.state-layer(t.color('inverse-primary'), 'focus');
+      // The focus ring keeps the button's 3dp and 2dp offset, in the action's
+      // own colour: secondary does not reach 3:1 against inverse-surface
+      // (WCAG 2.4.13 focus appearance).
+      outline-color: t.color('inverse-primary');
+    }
+
+    &:active,
+    &.#{$button}--active {
+      @include m.state-layer(t.color('inverse-primary'), 'pressed');
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Close affordance: a standard icon button in inverse-on-surface
+  // ---------------------------------------------------------------------------
+  .#{$icon-button}.#{$component}__close {
+    flex: 0 0 auto;
+    color: t.color('inverse-on-surface');
+
+    &:hover {
+      color: t.color('inverse-on-surface');
+    }
+
+    &:focus-visible {
+      outline-color: t.color('inverse-on-surface');
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // A long action sits below the text, aligned to the end
+  // (Compose NewLineButtonSnackbar: 4dp under the action row)
+  // ---------------------------------------------------------------------------
+  &--action-below {
+    flex-wrap: wrap;
+    padding-bottom: 4px;
+
+    .#{$component}__text {
+      flex-basis: 100%;
+      padding-inline-end: 16px;
+    }
+
+    .#{$component}__action {
+      margin-inline-start: auto;
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Compact windows: a fixed distance from the leading, trailing and bottom
+  // edges, whatever the position (M3 snackbar guidelines, responsive layout)
+  // ---------------------------------------------------------------------------
+  @include m.breakpoint-down('sm') {
+    min-width: 0;
+    max-width: none;
+    width: calc(100% - #{2 * $margin});
+
+    &--center {
+      left: $margin;
+      translate: none;
+    }
+
+    &--start,
+    &--end {
+      inset-inline: $margin;
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Reduced motion: the fade stays, the scale goes
+  // ---------------------------------------------------------------------------
+  @include m.reduced-motion {
+    scale: none;
+    transition: opacity v.motion('spring-fast-effects-duration') v.motion('spring-fast-effects-easing');
+
+    &--visible {
+      scale: none;
+    }
+  }
+
+  @include m.high-contrast {
+    border: 1px solid CanvasText;
+  }
+
+  @include m.print {
+    display: none;
+  }
+}