@material/web 0.1.0-alpha.0

package/segmentedbutton/lib/_outlined-segmented-button-theme.scss

@@ -0,0 +1,167 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@use 'sass:map';
+@use '@material/web/sass/resolvers';
+@use '@material/web/sass/theme';
+@use '@material/web/tokens';
+
+@use './segmented-button-theme';
+
+$light-theme: tokens.md-comp-outlined-segmented-button-values();
+
+$dark-theme: tokens.md-comp-outlined-segmented-button-values(
+  (
+    md-sys-color: tokens.md-sys-color-values-dark-dynamic(),
+  )
+);
+
+@mixin theme-styles($theme, $resolvers: resolvers.$material) {
+  $theme: theme.validate-theme-styles(
+    $light-theme,
+    $theme,
+    $require-all: false
+  );
+  $theme: _extend-theme($theme);
+  $theme: segmented-button-theme.resolve-theme($theme, $resolvers);
+  $theme: theme.create-theme-vars($theme, 'segmented-button');
+
+  @include segmented-button-theme.container-start-padding(
+    map.get($theme, 'spacing-leading')
+  );
+  @include segmented-button-theme.container-end-padding(
+    map.get($theme, 'spacing-trailing')
+  );
+
+  @include segmented-button-theme.unselected-ripple(
+    (
+      'hover-state-layer-color':
+        map.get($theme, 'unselected-hover-state-layer-color'),
+      'hover-state-layer-opacity': map.get($theme, 'hover-state-layer-opacity'),
+      'focus-state-layer-color':
+        map.get($theme, 'unselected-focus-state-layer-color'),
+      'focus-state-layer-opacity': map.get($theme, 'focus-state-layer-opacity'),
+      'pressed-state-layer-color':
+        map.get($theme, 'unselected-pressed-state-layer-color'),
+      'pressed-state-layer-opacity':
+        map.get($theme, 'pressed-state-layer-opacity'),
+    )
+  );
+
+  @include segmented-button-theme.selected-ripple(
+    (
+      'hover-state-layer-color':
+        map.get($theme, 'selected-hover-state-layer-color'),
+      'hover-state-layer-opacity': map.get($theme, 'hover-state-layer-opacity'),
+      'focus-state-layer-color':
+        map.get($theme, 'selected-focus-state-layer-color'),
+      'focus-state-layer-opacity': map.get($theme, 'focus-state-layer-opacity'),
+      'pressed-state-layer-color':
+        map.get($theme, 'selected-pressed-state-layer-color'),
+      'pressed-state-layer-opacity':
+        map.get($theme, 'pressed-state-layer-opacity'),
+    )
+  );
+
+  @include segmented-button-theme.container-color(
+    map.get($theme, 'selected-container-color')
+  );
+
+  @include segmented-button-theme.outline-colors(
+    (
+      'default': map.get($theme, 'outline-color'),
+      'disabled': map.get($theme, 'disabled-outline-color'),
+    )
+  );
+
+  @include segmented-button-theme.icon-size(
+    map.get($theme, 'with-icon-icon-size')
+  );
+
+  // Under the following conditions, we need to account for extra space between
+  // the graphic and the text label/icon content:
+  //
+  //   1. A button with an icon and a label.
+  //   2. A selected button with a label and checkmark.
+  //   3. A selected button with an icon and checkmark but no label.
+  //
+  // We calculate a larger width here instead of using padding or margin for
+  // two main reasons:
+  //
+  //   1. We may need to transition between a zero width and an explicit width.
+  //   2. Both margin and padding take up space when a node has child content
+  //      even when a zero width is set and overflow is set to hidden.
+  //
+  // Because of those reasons, we calculate a new width with the given values.
+  @include segmented-button-theme.visible-graphic-width(
+    // TODO(b/198759625): Use padding token instead of hardcoded 8px value.
+    calc(map.get($theme, 'with-icon-icon-size') + 8px)
+  );
+
+  @include segmented-button-theme.unselected-icon-colors(
+    (
+      'default': map.get($theme, 'unselected-with-icon-icon-color'),
+      'hover': map.get($theme, 'unselected-hover-icon-color'),
+      'focus': map.get($theme, 'unselected-focus-icon-color'),
+      'pressed': map.get($theme, 'unselected-pressed-icon-color'),
+      'disabled': map.get($theme, 'disabled-icon-color'),
+    )
+  );
+
+  @include segmented-button-theme.selected-icon-colors(
+    (
+      'default': map.get($theme, 'selected-with-icon-icon-color'),
+      'hover': map.get($theme, 'selected-hover-icon-color'),
+      'focus': map.get($theme, 'selected-focus-icon-color'),
+      'pressed': map.get($theme, 'selected-pressed-icon-color'),
+      'disabled': map.get($theme, 'disabled-icon-color'),
+    )
+  );
+
+  @include segmented-button-theme.text-label-font(
+    (
+      'font': map.get($theme, 'label-text-font'),
+      'size': map.get($theme, 'label-text-size'),
+      'tracking': map.get($theme, 'label-text-tracking'),
+      'weight': map.get($theme, 'label-text-weight'),
+    )
+  );
+
+  @include segmented-button-theme.selected-text-label-color(
+    (
+      'default': map.get($theme, 'selected-label-text-color'),
+      'hover': map.get($theme, 'selected-hover-label-text-color'),
+      'focus': map.get($theme, 'selected-focus-label-text-color'),
+      'pressed': map.get($theme, 'selected-pressed-label-text-color'),
+    )
+  );
+
+  @include segmented-button-theme.unselected-text-label-color(
+    (
+      'default': map.get($theme, 'unselected-label-text-color'),
+      'hover': map.get($theme, 'unselected-hover-label-text-color'),
+      'focus': map.get($theme, 'unselected-focus-label-text-color'),
+      'pressed': map.get($theme, 'unselected-pressed-label-text-color'),
+      'disabled': map.get($theme, 'disabled-label-text-color'),
+    )
+  );
+}
+
+///
+/// Applies missing tokens to the given theme. This is a temporary function
+/// that will be deleted once the corresponding tokens are added to the design
+/// system information.
+///
+@function _extend-theme($theme) {
+  // TODO(b/198759625): Remove spacing tokens once provided.
+  $theme: map.merge(
+    $theme,
+    (
+      'spacing-leading': 12px,
+      'spacing-trailing': 12px,
+    )
+  );
+  @return $theme;
+}

package/segmentedbutton/lib/_outlined-segmented-button.scss

@@ -0,0 +1,18 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern -- allow `md3-` class selectors.
+
+@mixin static-styles() {
+  .md3-segmented-button__outline {
+    border-radius: inherit;
+    border-style: solid;
+    // TODO(b/233762888): Move border-width and inset into theme after generating latest version of tokens.
+    border-width: 1px;
+    inset: 0px -0.5px;
+    pointer-events: none;
+    position: absolute;
+  }
+}

package/segmentedbutton/lib/_segmented-button-theme.scss

@@ -0,0 +1,316 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern -- allow `md3-` class selectors.
+
+@use 'sass:map';
+@use '@material/web/sass/color';
+@use '@material/web/sass/typography';
+@use '@material/web/ripple/ripple-theme';
+
+@mixin unselected-ripple($ripple) {
+  &.md3-segmented-button--unselected {
+    @include ripple-theme.theme(
+      (
+        focus-state-layer-color: map.get($ripple, 'focus-state-layer-color'),
+        focus-state-layer-opacity: map.get($ripple, 'focus-state-layer-opacity'),
+        hover-state-layer-color: map.get($ripple, 'hover-state-layer-color'),
+        hover-state-layer-opacity: map.get($ripple, 'hover-state-layer-opacity'),
+        pressed-state-layer-color: map.get($ripple, 'pressed-state-layer-color'),
+        pressed-state-layer-opacity:
+          map.get($ripple, 'pressed-state-layer-opacity'),
+      )
+    );
+  }
+}
+
+@mixin selected-ripple($ripple) {
+  &.md3-segmented-button--selected {
+    @include ripple-theme.theme(
+      (
+        focus-state-layer-color: map.get($ripple, 'focus-state-layer-color'),
+        focus-state-layer-opacity: map.get($ripple, 'focus-state-layer-opacity'),
+        hover-state-layer-color: map.get($ripple, 'hover-state-layer-color'),
+        hover-state-layer-opacity: map.get($ripple, 'hover-state-layer-opacity'),
+        pressed-state-layer-color: map.get($ripple, 'pressed-state-layer-color'),
+        pressed-state-layer-opacity:
+          map.get($ripple, 'pressed-state-layer-opacity'),
+      )
+    );
+  }
+}
+
+///
+/// Container color applies the given color to the segmented button container.
+/// @param {Color} $color - the color to apply.
+///
+@mixin container-color($color) {
+  &.md3-segmented-button--selected:enabled {
+    background-color: $color;
+  }
+}
+
+///
+/// Outline color applies the given color to the segmented button outline.
+/// @param {Map} $colors - a map of state keys with color values. Accepted keys
+///     include ('default', 'disabled').
+///
+@mixin outline-colors($colors) {
+  .md3-segmented-button__outline {
+    border-color: map.get($colors, 'default');
+  }
+
+  &:disabled .md3-segmented-button__outline {
+    border-color: map.get($colors, 'disabled');
+  }
+}
+
+///
+/// Unselected icon colors sets the color of the icon in the unselected state.
+/// @param {Map} $colors - a map of state keys with color values. Accepted keys
+///     include ('default', 'hover', 'focus', 'pressed', 'disabled').
+///
+@mixin unselected-icon-colors($colors) {
+  @include _icon-color(map.get($colors, 'default'));
+
+  &:hover {
+    @include _icon-color(map.get($colors, 'hover'));
+  }
+
+  &:focus {
+    @include _icon-color(map.get($colors, 'focus'));
+  }
+
+  &:active {
+    @include _icon-color(map.get($colors, 'pressed'));
+  }
+
+  &:disabled {
+    @include _icon-color(map.get($colors, 'disabled'));
+  }
+}
+
+///
+/// Selected icon colors sets the color of the icon in the selected state.
+/// @param {Map} $colors - a map of state keys with color values. Accepted keys
+///     include ('default', 'hover', 'focus', 'pressed', 'disabled').
+///
+@mixin selected-icon-colors($colors) {
+  &.md3-segmented-button--selected {
+    @include _icon-color(map.get($colors, 'default'));
+    @include _checkmark-color(map.get($colors, 'default'));
+
+    &:hover {
+      @include _checkmark-color(map.get($colors, 'hover'));
+    }
+
+    &:focus {
+      @include _checkmark-color(map.get($colors, 'focus'));
+    }
+
+    &:active {
+      @include _checkmark-color(map.get($colors, 'pressed'));
+    }
+
+    &:disabled {
+      @include _checkmark-color(map.get($colors, 'disabled'));
+    }
+  }
+}
+
+///
+/// Icon size applies the given size to the segmented button icon and checkmark
+/// when included.
+/// @param {Number} $size - the size of the icon.
+///
+@mixin icon-size($size) {
+  .md3-segmented-button__graphic,
+  .md3-segmented-button__checkmark,
+  .md3-segmented-button__icon,
+  .md3-segmented-button__icon ::slotted([slot='icon']) {
+    height: $size;
+    width: $size;
+    font-size: $size;
+  }
+}
+
+///
+/// Visible graphic width sets the width of the graphic area when it is visible
+/// (i.e. when it has content and should take up space on the screen). The
+/// graphic should only take up space under the following conditions:
+///
+///   1. The segmented button has an icon and a label.
+///   2. The segmented button is selected and has a label and a checkmark.
+///   3. The segmented button is selected with a checkmark and an icon but has
+///      no label.
+///
+/// @param {Number} $width - the width of the visible graphic.
+///
+@mixin visible-graphic-width($width) {
+  &.md3-segmented-button--with-icon.md3-segmented-button--with-label,
+  &.md3-segmented-button--selected.md3-segmented-button--with-label.md3-segmented-button--with-checkmark,
+  &.md3-segmented-button--selected.md3-segmented-button--without-label.md3-segmented-button--with-checkmark {
+    .md3-segmented-button__graphic {
+      width: $width;
+    }
+  }
+}
+
+///
+/// Checkmark color sets the color of the selected-state checkmark.
+/// @param {Map} $colors - a map of state keys with color values. Accepted keys
+///     include ('default', 'hover', 'focus', 'pressed', 'disabled').
+///
+@mixin checkmark-color($colors) {
+  .md3-segmented-button__checkmark-path {
+    stroke: $color;
+  }
+}
+
+///
+/// Text label font sets the font properties of the text label.
+/// @param {Map} $font-map - a map of font keys with font values. Accepted keys
+///     include ('font', 'size', 'tracking', weight').
+///
+@mixin text-label-font($font-map) {
+  .md3-segmented-button__label-text {
+    font-family: map.get($font-map, 'font');
+    font-size: map.get($font-map, 'size');
+    letter-spacing: map.get($font-map, 'tracking');
+    font-weight: map.get($font-map, 'weight');
+  }
+}
+
+///
+/// Unselected text label color applies the map of state keys and color values
+/// to the text label only when the button is both unselected and enabled.
+/// @param {Map} $colors - a map of state keys with color values. Accepted keys
+///     include ('default', 'hover', 'focus', 'pressed', 'disabled').
+///
+@mixin unselected-text-label-color($colors) {
+  &.md3-segmented-button--unselected:enabled {
+    @include _text-label-colors($colors);
+  }
+
+  &:disabled {
+    @include _text-label-color(map.get($colors, 'disabled'));
+  }
+}
+
+///
+/// Selected text label color applies the map of state keys and color values
+/// to the text label only when the button is both selected and enabled.
+/// @param {Map} $colors - a map of state keys with color values. Accepted keys
+///     include ('default', 'hover', 'focus', 'pressed').
+///
+@mixin selected-text-label-color($colors) {
+  &.md3-segmented-button--selected:enabled {
+    @include _text-label-colors($colors);
+  }
+}
+
+///
+/// Container start padding sets the given padding as the starting padding for
+/// the container. It uses CSS logical properties.
+/// @param {Number} $padding - the padding to use.
+///
+@mixin container-start-padding($padding) {
+  padding-inline-start: $padding;
+}
+
+///
+/// Container end padding sets the given padding as the ending padding for
+/// the container. It uses CSS logical properties.
+/// @param {Number} $padding - the padding to use.
+///
+@mixin container-end-padding($padding) {
+  padding-inline-end: $padding;
+}
+
+///
+/// Icon label color sets the color of the icon.
+/// @param {Color} $color - the color of the icon.
+///
+@mixin _icon-color($color) {
+  .md3-segmented-button__icon {
+    color: $color;
+  }
+}
+
+///
+/// Checkmark label color sets the color of the checkmark.
+/// @param {Color} $color - the color of the checkmark.
+///
+@mixin _checkmark-color($color) {
+  .md3-segmented-button__checkmark-path {
+    stroke: $color;
+  }
+}
+
+///
+/// Text label colors applies the given color map to the label text for the
+/// configured states.
+/// @param {Map} $colors - a map of state keys with color values. Accepted keys
+///     include ('default', 'hover', 'focus', 'pressed', 'disabled').
+///
+@mixin _text-label-colors($colors) {
+  @include _text-label-color(map.get($colors, 'default'));
+
+  &:hover {
+    @include _text-label-color(map.get($colors, 'hover'));
+  }
+
+  &:focus {
+    @include _text-label-color(map.get($colors, 'focus'));
+  }
+
+  &:active {
+    @include _text-label-color(map.get($colors, 'pressed'));
+  }
+}
+
+///
+/// Text label color sets the color of the text label.
+/// @param {Color} $color - the color of the text label.
+///
+@mixin _text-label-color($color) {
+  .md3-segmented-button__label-text {
+    color: $color;
+  }
+}
+
+///
+/// Resolve theme returns the given theme with all values resolved.
+///
+@function resolve-theme($theme, $resolvers) {
+  $theme: typography.resolve-theme(
+    $theme,
+    map.get($resolvers, 'typography'),
+    'label-text'
+  );
+  $theme: _flatten-disabled-colors($theme);
+  @return $theme;
+}
+
+@function _flatten-disabled-colors($theme) {
+  @return color.join-color-and-opacity-pairs(
+    $theme,
+    (
+      (
+        color-key: 'disabled-container-color',
+        opacity-key: 'disabled-container-opacity'
+      ),
+      (
+        color-key: 'disabled-label-text-color',
+        opacity-key: 'disabled-label-text-opacity'
+      ),
+      (color-key: 'disabled-icon-color', opacity-key: 'disabled-icon-opacity'),
+      (
+        color-key: 'disabled-outline-color',
+        opacity-key: 'disabled-outline-opacity'
+      )
+    )
+  );
+}

package/segmentedbutton/lib/_segmented-button.scss

@@ -0,0 +1,159 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern -- allow `md3-` class selectors.
+
+@use '@material/web/motion/animation';
+@use '@material/web/sass/touch-target';
+
+@mixin static-styles() {
+  @keyframes md3-segmented-button-checkmark-selection-draw-in {
+    from {
+      stroke-dashoffset: 29.7833385;
+    }
+    to {
+      stroke-dashoffset: 0;
+    }
+  }
+
+  @keyframes md3-segmented-button-simple-fade-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes md3-segmented-button-simple-fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  :host {
+    display: inline-flex;
+    outline: none;
+  }
+
+  .md3-segmented-button {
+    align-items: center;
+    background: transparent;
+    border: none;
+    border-radius: inherit;
+    display: flex;
+    flex: 1;
+    justify-content: center;
+    outline: none;
+    position: relative;
+    vertical-align: middle;
+  }
+
+  .md3-segmented-button:enabled {
+    cursor: pointer;
+  }
+
+  .md3-segmented-button__focus-ring {
+    z-index: 1;
+  }
+
+  .md3-segmented-button__ripple {
+    border-radius: inherit;
+    z-index: 0;
+  }
+
+  .md3-segmented-button__touch {
+    @include touch-target.touch-target($width: 100%);
+  }
+
+  .md3-segmented-button__leading,
+  .md3-segmented-button__graphic {
+    display: inline-flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .md3-segmented-button__graphic {
+    position: relative;
+    overflow: hidden;
+  }
+
+  .md3-segmented-button__graphic {
+    transition: animation.standard(width, 150ms);
+  }
+
+  .md3-segmented-button--unselected.md3-segmented-button--with-label,
+  .md3-segmented-button--unselected.md3-segmented-button--without-label,
+  .md3-segmented-button--selected.md3-segmented-button--without-checkmark {
+    .md3-segmented-button__graphic {
+      width: 0;
+    }
+  }
+
+  .md3-segmented-button--unselected .md3-segmented-button__checkmark {
+    opacity: 0;
+  }
+
+  .md3-segmented-button--selected.md3-segmented-button--with-label {
+    .md3-segmented-button__icon {
+      opacity: 0;
+    }
+  }
+
+  .md3-segmented-button--with-label .md3-segmented-button__checkmark {
+    display: inline-flex;
+    position: absolute;
+  }
+
+  .md3-segmented-button__checkmark-path {
+    stroke-width: 2px;
+    stroke-dasharray: 29.7833385;
+  }
+
+  .md3-segmented-button--selecting {
+    .md3-segmented-button__checkmark-path {
+      // We immediately render the checkmark in the animation start treatment
+      // because we're using an animation delay. If we didn't have the delay,
+      // the checkmark would render in the base fully-drawn state during the
+      // brief animation-delay period which would look wrong.
+      stroke-dashoffset: 29.7833385;
+      animation: md3-segmented-button-checkmark-selection-draw-in;
+      animation-duration: 150ms;
+      animation-delay: 50ms;
+      animation-fill-mode: forwards;
+      animation-timing-function: animation.$standard-easing;
+    }
+    &.md3-segmented-button--with-label .md3-segmented-button__icon {
+      animation: md3-segmented-button-simple-fade-out;
+      animation-duration: 75ms;
+      animation-timing-function: linear;
+      animation-fill-mode: forwards;
+    }
+  }
+
+  .md3-segmented-button--deselecting {
+    .md3-segmented-button__checkmark {
+      animation: md3-segmented-button-simple-fade-out;
+      animation-duration: 50ms;
+      animation-timing-function: linear;
+      animation-fill-mode: forwards;
+    }
+    &.md3-segmented-button--with-label .md3-segmented-button__icon {
+      // We immediately render the icon in the animation start treatment
+      // because we're using an animation delay. If we didn't have the delay,
+      // the icon would render with full opacity during the brief
+      // animation-delay period which would look wrong.
+      opacity: 0;
+      animation: md3-segmented-button-simple-fade-in;
+      animation-delay: 50ms;
+      animation-duration: 150ms;
+      animation-timing-function: linear;
+      animation-fill-mode: forwards;
+    }
+  }
+}

package/segmentedbutton/lib/outlined-segmented-button.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { TemplateResult } from 'lit';
+import { ClassInfo } from 'lit/directives/class-map.js';
+import { SegmentedButton } from './segmented-button.js';
+/** @soyCompatible */
+export declare class OutlinedSegmentedButton extends SegmentedButton {
+    /** @soyTemplate */
+    protected getRenderClasses(): ClassInfo;
+    /** @soyTemplate */
+    protected renderOutline(): TemplateResult;
+}

package/segmentedbutton/lib/outlined-segmented-button.js

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { html } from 'lit';
+import { SegmentedButton } from './segmented-button.js';
+/** @soyCompatible */
+export class OutlinedSegmentedButton extends SegmentedButton {
+    /** @soyTemplate */
+    getRenderClasses() {
+        return {
+            ...super.getRenderClasses(),
+            'md3-segmented-button--outlined': true,
+        };
+    }
+    /** @soyTemplate */
+    renderOutline() {
+        return html `<span class="md3-segmented-button__outline"></span>`;
+    }
+}
+//# sourceMappingURL=outlined-segmented-button.js.map