@material/web 1.0.0-pre.8 → 1.0.0

package/labs/segmentedbutton/internal/_shared.scss

@@ -0,0 +1,358 @@
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// stylelint-disable selector-class-pattern --
+// Selector '.md3-*' should only be used in this project.
+
+// go/keep-sorted start
+@use 'sass:map';
+// go/keep-sorted end
+// go/keep-sorted start
+@use '../../../internal/motion/animation';
+@use '../../../ripple/ripple';
+// go/keep-sorted end
+
+@mixin 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;
+    padding-inline-start: var(--_spacing-leading);
+    padding-inline-end: var(--_spacing-trailing);
+
+    .md3-segmented-button__outline {
+      border-color: var(--_outline-color);
+    }
+
+    &:disabled .md3-segmented-button__outline {
+      border-color: var(--_disabled-outline-color);
+    }
+
+    .md3-segmented-button__graphic,
+    .md3-segmented-button__checkmark,
+    .md3-segmented-button__icon,
+    .md3-segmented-button__icon ::slotted([slot='icon']) {
+      height: var(--_icon-size);
+      width: var(--_icon-size);
+      font-size: var(--_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.
+    &.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 {
+        // TODO(b/198759625): Use padding token instead of hardcoded 8px value.
+        width: calc(var(--_icon-size) + 8px);
+      }
+    }
+
+    .md3-segmented-button__label-text {
+      font-family: var(--_label-text-font);
+      font-size: var(--_label-text-size);
+      line-height: var(--_label-text-line-height);
+      font-weight: var(--_label-text-weight);
+    }
+
+    &.md3-segmented-button--selected:enabled {
+      .md3-segmented-button__label-text {
+        color: var(--_selected-label-text-color);
+      }
+
+      &:hover {
+        .md3-segmented-button__label-text {
+          color: var(--_selected-hover-label-text-color);
+        }
+      }
+
+      &:focus {
+        .md3-segmented-button__label-text {
+          color: var(--_selected-focus-label-text-color);
+        }
+      }
+
+      &:active {
+        .md3-segmented-button__label-text {
+          color: var(--_selected-pressed-label-text-color);
+        }
+      }
+    }
+
+    &.md3-segmented-button--unselected:enabled {
+      .md3-segmented-button__label-text {
+        color: var(--_unselected-label-text-color);
+      }
+
+      &:hover {
+        .md3-segmented-button__label-text {
+          color: var(--_unselected-hover-label-text-color);
+        }
+      }
+
+      &:focus {
+        .md3-segmented-button__label-text {
+          color: var(--_unselected-focus-label-text-color);
+        }
+      }
+
+      &:active {
+        .md3-segmented-button__label-text {
+          color: var(--_unselected-pressed-label-text-color);
+        }
+      }
+    }
+
+    &:disabled {
+      .md3-segmented-button__label-text {
+        color: var(--_disabled-label-text-color);
+      }
+    }
+  }
+
+  .md3-segmented-button--unselected {
+    .md3-segmented-button__icon {
+      color: var(--_unselected-icon-color);
+    }
+
+    &:hover {
+      .md3-segmented-button__icon {
+        color: var(--_unselected-hover-icon-color);
+      }
+    }
+
+    &:focus {
+      .md3-segmented-button__icon {
+        color: var(--_unselected-focus-icon-color);
+      }
+    }
+
+    &:active {
+      .md3-segmented-button__icon {
+        color: var(--_unselected-pressed-icon-color);
+      }
+    }
+
+    &:disabled {
+      .md3-segmented-button__icon {
+        color: var(--_disabled-icon-color);
+      }
+    }
+
+    @include ripple.theme(
+      (
+        hover-color: var(--_unselected-hover-state-layer-color),
+        hover-opacity: var(--_hover-state-layer-opacity),
+        pressed-color: var(--_unselected-pressed-state-layer-color),
+        pressed-opacity: var(--_pressed-state-layer-opacity),
+      )
+    );
+  }
+
+  .md3-segmented-button--selected {
+    background-color: var(--_selected-container-color);
+
+    .md3-segmented-button__icon {
+      color: var(--_selected-icon-color);
+    }
+
+    .md3-segmented-button__checkmark-path {
+      stroke: var(--_selected-icon-color);
+    }
+
+    &:hover {
+      .md3-segmented-button__checkmark-path {
+        stroke: var(--_selected-hover-icon-color);
+      }
+    }
+
+    &:focus {
+      .md3-segmented-button__checkmark-path {
+        stroke: var(--_selected-focus-icon-color);
+      }
+    }
+
+    &:active {
+      .md3-segmented-button__checkmark-path {
+        stroke: var(--_selected-pressed-icon-color);
+      }
+    }
+
+    &:disabled {
+      .md3-segmented-button__checkmark-path {
+        stroke: var(--_disabled-icon-color);
+      }
+    }
+
+    @include ripple.theme(
+      (
+        hover-color: var(--_selected-hover-state-layer-color),
+        hover-opacity: var(--_hover-state-layer-opacity),
+        pressed-color: var(--_selected-pressed-state-layer-color),
+        pressed-opacity: var(--_pressed-state-layer-opacity),
+      )
+    );
+  }
+
+  .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 {
+    position: absolute;
+    top: 50%;
+    height: 48px;
+    left: 50%;
+    width: 100%;
+    transform: translate(-50%, -50%);
+  }
+
+  .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/labs/segmentedbutton/internal/outlined-styles.css.js

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `:host{--_container-height: var(--md-outlined-segmented-button-container-height, 40px);--_disabled-icon-color: var(--md-outlined-segmented-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-color: var(--md-outlined-segmented-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-color: var(--md-outlined-segmented-button-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-outlined-segmented-button-hover-state-layer-opacity, 0.08);--_label-text-font: var(--md-outlined-segmented-button-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-outlined-segmented-button-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-outlined-segmented-button-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-outlined-segmented-button-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_outline-color: var(--md-outlined-segmented-button-outline-color, var(--md-sys-color-outline, #79747e));--_pressed-state-layer-opacity: var(--md-outlined-segmented-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-outlined-segmented-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-focus-icon-color: var(--md-outlined-segmented-button-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-label-text-color: var(--md-outlined-segmented-button-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-icon-color: var(--md-outlined-segmented-button-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-outlined-segmented-button-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-outlined-segmented-button-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-label-text-color: var(--md-outlined-segmented-button-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-icon-color: var(--md-outlined-segmented-button-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-outlined-segmented-button-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-outlined-segmented-button-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_shape: var(--md-outlined-segmented-button-shape, 9999px);--_unselected-focus-icon-color: var(--md-outlined-segmented-button-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-focus-label-text-color: var(--md-outlined-segmented-button-unselected-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-icon-color: var(--md-outlined-segmented-button-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-label-text-color: var(--md-outlined-segmented-button-unselected-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-color: var(--md-outlined-segmented-button-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-label-text-color: var(--md-outlined-segmented-button-unselected-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-icon-color: var(--md-outlined-segmented-button-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-label-text-color: var(--md-outlined-segmented-button-unselected-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-color: var(--md-outlined-segmented-button-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_icon-size: var(--md-outlined-segmented-button-icon-size, 18px);--_selected-icon-color: var(--md-outlined-segmented-button-selected-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_unselected-icon-color: var(--md-outlined-segmented-button-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_spacing-leading: var(--md-outlined-segmented-button-spacing-leading, 12px);--_spacing-trailing: var(--md-outlined-segmented-button-spacing-trailing, 12px)}.md3-segmented-button__outline{border-radius:inherit;border-style:solid;border-width:1px;inset:0px -0.5px;pointer-events:none;position:absolute}/*# sourceMappingURL=outlined-styles.css.map */
+`;
+//# sourceMappingURL=outlined-styles.css.js.map

package/labs/segmentedbutton/internal/outlined-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outlined-styles.css.js","sourceRoot":"","sources":["outlined-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`:host{--_container-height: var(--md-outlined-segmented-button-container-height, 40px);--_disabled-icon-color: var(--md-outlined-segmented-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-color: var(--md-outlined-segmented-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-color: var(--md-outlined-segmented-button-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-outlined-segmented-button-hover-state-layer-opacity, 0.08);--_label-text-font: var(--md-outlined-segmented-button-label-text-font, var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, Roboto)));--_label-text-line-height: var(--md-outlined-segmented-button-label-text-line-height, var(--md-sys-typescale-label-large-line-height, 1.25rem));--_label-text-size: var(--md-outlined-segmented-button-label-text-size, var(--md-sys-typescale-label-large-size, 0.875rem));--_label-text-weight: var(--md-outlined-segmented-button-label-text-weight, var(--md-sys-typescale-label-large-weight, var(--md-ref-typeface-weight-medium, 500)));--_outline-color: var(--md-outlined-segmented-button-outline-color, var(--md-sys-color-outline, #79747e));--_pressed-state-layer-opacity: var(--md-outlined-segmented-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-outlined-segmented-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-focus-icon-color: var(--md-outlined-segmented-button-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-label-text-color: var(--md-outlined-segmented-button-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-icon-color: var(--md-outlined-segmented-button-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-outlined-segmented-button-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-outlined-segmented-button-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-label-text-color: var(--md-outlined-segmented-button-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-icon-color: var(--md-outlined-segmented-button-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-outlined-segmented-button-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-outlined-segmented-button-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_shape: var(--md-outlined-segmented-button-shape, 9999px);--_unselected-focus-icon-color: var(--md-outlined-segmented-button-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-focus-label-text-color: var(--md-outlined-segmented-button-unselected-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-icon-color: var(--md-outlined-segmented-button-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-label-text-color: var(--md-outlined-segmented-button-unselected-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-color: var(--md-outlined-segmented-button-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-label-text-color: var(--md-outlined-segmented-button-unselected-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-icon-color: var(--md-outlined-segmented-button-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-label-text-color: var(--md-outlined-segmented-button-unselected-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-color: var(--md-outlined-segmented-button-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_icon-size: var(--md-outlined-segmented-button-icon-size, 18px);--_selected-icon-color: var(--md-outlined-segmented-button-selected-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_unselected-icon-color: var(--md-outlined-segmented-button-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_spacing-leading: var(--md-outlined-segmented-button-spacing-leading, 12px);--_spacing-trailing: var(--md-outlined-segmented-button-spacing-trailing, 12px)}.md3-segmented-button__outline{border-radius:inherit;border-style:solid;border-width:1px;inset:0px -0.5px;pointer-events:none;position:absolute}/*# sourceMappingURL=outlined-styles.css.map */\n`;\n "]}

package/labs/segmentedbutton/internal/segmented-button.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import '../../../focus/md-focus-ring.js';
+import '../../../ripple/ripple.js';
+import { LitElement, nothing, PropertyValues, TemplateResult } from 'lit';
+/**
+ * SegmentedButton is a web component implementation of the Material Design
+ * segmented button component. It is intended **only** for use as a child of a
+ * `SementedButtonSet` component. It is **not** intended for use in any other
+ * context.
+ */
+export declare class SegmentedButton extends LitElement {
+    disabled: boolean;
+    selected: boolean;
+    label: string;
+    noCheckmark: boolean;
+    hasIcon: boolean;
+    private animState;
+    private readonly iconElement;
+    protected update(props: PropertyValues<SegmentedButton>): void;
+    private nextAnimationState;
+    private handleClick;
+    protected render(): TemplateResult<1>;
+    protected getRenderClasses(): {
+        'md3-segmented-button--selected': boolean;
+        'md3-segmented-button--unselected': boolean;
+        'md3-segmented-button--with-label': boolean;
+        'md3-segmented-button--without-label': boolean;
+        'md3-segmented-button--with-icon': boolean;
+        'md3-segmented-button--with-checkmark': boolean;
+        'md3-segmented-button--without-checkmark': boolean;
+        'md3-segmented-button--selecting': boolean;
+        'md3-segmented-button--deselecting': boolean;
+    };
+    protected renderOutline(): TemplateResult | typeof nothing;
+    private renderLeading;
+    private renderLeadingWithoutLabel;
+    private renderLeadingWithLabel;
+    private renderLabel;
+    private renderTouchTarget;
+}

package/labs/segmentedbutton/internal/segmented-button.js

@@ -0,0 +1,157 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import '../../../focus/md-focus-ring.js';
+import '../../../ripple/ripple.js';
+import { html, LitElement, nothing } from 'lit';
+import { property, queryAssignedElements, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { requestUpdateOnAriaChange } from '../../../internal/aria/delegate.js';
+/**
+ * SegmentedButton is a web component implementation of the Material Design
+ * segmented button component. It is intended **only** for use as a child of a
+ * `SementedButtonSet` component. It is **not** intended for use in any other
+ * context.
+ */
+export class SegmentedButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.selected = false;
+        this.label = '';
+        this.noCheckmark = false;
+        this.hasIcon = false;
+        this.animState = '';
+    }
+    update(props) {
+        this.animState = this.nextAnimationState(props);
+        super.update(props);
+        // NOTE: This needs to be set *after* calling super.update() to ensure the
+        // appropriate CSS classes are applied.
+        this.hasIcon = this.iconElement.length > 0;
+    }
+    nextAnimationState(changedProps) {
+        const prevSelected = changedProps.get('selected');
+        // Early exit for first update.
+        if (prevSelected === undefined)
+            return '';
+        const nextSelected = this.selected;
+        const nextHasCheckmark = !this.noCheckmark;
+        if (!prevSelected && nextSelected && nextHasCheckmark) {
+            return 'selecting';
+        }
+        if (prevSelected && !nextSelected && nextHasCheckmark) {
+            return 'deselecting';
+        }
+        return '';
+    }
+    handleClick() {
+        const event = new Event('segmented-button-interaction', { bubbles: true, composed: true });
+        this.dispatchEvent(event);
+    }
+    render() {
+        // Needed for closure conformance
+        const { ariaLabel } = this;
+        return html `
+      <button
+        tabindex="${this.disabled ? '-1' : '0'}"
+        aria-label=${ariaLabel || nothing}
+        aria-pressed=${this.selected}
+        ?disabled=${this.disabled}
+        @click="${this.handleClick}"
+        class="md3-segmented-button ${classMap(this.getRenderClasses())}"
+      >
+        <md-focus-ring class="md3-segmented-button__focus-ring" part="focus-ring"></md-focus-ring>
+        <md-ripple ?disabled="${this.disabled}" class="md3-segmented-button__ripple"></md-ripple>
+        ${this.renderOutline()}
+        ${this.renderLeading()}
+        ${this.renderLabel()}
+        ${this.renderTouchTarget()}
+      </button>
+    `;
+    }
+    getRenderClasses() {
+        return {
+            'md3-segmented-button--selected': this.selected,
+            'md3-segmented-button--unselected': !this.selected,
+            'md3-segmented-button--with-label': this.label !== '',
+            'md3-segmented-button--without-label': this.label === '',
+            'md3-segmented-button--with-icon': this.hasIcon,
+            'md3-segmented-button--with-checkmark': !this.noCheckmark,
+            'md3-segmented-button--without-checkmark': this.noCheckmark,
+            'md3-segmented-button--selecting': this.animState === 'selecting',
+            'md3-segmented-button--deselecting': this.animState === 'deselecting',
+        };
+    }
+    renderOutline() {
+        return nothing;
+    }
+    renderLeading() {
+        return this.label === '' ? this.renderLeadingWithoutLabel() :
+            this.renderLeadingWithLabel();
+    }
+    renderLeadingWithoutLabel() {
+        return html `
+      <span class="md3-segmented-button__leading" aria-hidden="true">
+        <span class="md3-segmented-button__graphic">
+          <svg class="md3-segmented-button__checkmark" viewBox="0 0 24 24">
+            <path class="md3-segmented-button__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
+          </svg>
+        </span>
+        <span class="md3-segmented-button__icon" aria-hidden="true">
+          <slot name="icon"></slot>
+        </span>
+      </span>
+    `;
+    }
+    renderLeadingWithLabel() {
+        return html `
+      <span class="md3-segmented-button__leading" aria-hidden="true">
+        <span class="md3-segmented-button__graphic">
+          <svg class="md3-segmented-button__checkmark" viewBox="0 0 24 24">
+            <path class="md3-segmented-button__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
+          </svg>
+          <span class="md3-segmented-button__icon" aria-hidden="true">
+            <slot name="icon"></slot>
+          </span>
+        </span>
+      </span>
+    `;
+    }
+    renderLabel() {
+        return html `
+      <span class="md3-segmented-button__label-text">${this.label}</span>
+    `;
+    }
+    renderTouchTarget() {
+        return html `<span class="md3-segmented-button__touch"></span>`;
+    }
+}
+(() => {
+    requestUpdateOnAriaChange(SegmentedButton);
+})();
+__decorate([
+    property({ type: Boolean })
+], SegmentedButton.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], SegmentedButton.prototype, "selected", void 0);
+__decorate([
+    property()
+], SegmentedButton.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'no-checkmark' })
+], SegmentedButton.prototype, "noCheckmark", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'has-icon' })
+], SegmentedButton.prototype, "hasIcon", void 0);
+__decorate([
+    state()
+], SegmentedButton.prototype, "animState", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'icon', flatten: true })
+], SegmentedButton.prototype, "iconElement", void 0);
+//# sourceMappingURL=segmented-button.js.map

package/labs/segmentedbutton/internal/segmented-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-button.js","sourceRoot":"","sources":["segmented-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,iCAAiC,CAAC;AACzC,OAAO,2BAA2B,CAAC;AAEnC,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAiC,MAAM,KAAK,CAAC;AAC9E,OAAO,EAAC,QAAQ,EAAE,qBAAqB,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AACzE,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAGrD,OAAO,EAAC,yBAAyB,EAAC,MAAM,oCAAoC,CAAC;AAE7E;;;;;GAKG;AACH,MAAM,OAAO,eAAgB,SAAQ,UAAU;IAA/C;;QAK6B,aAAQ,GAAG,KAAK,CAAC;QACjB,aAAQ,GAAG,KAAK,CAAC;QAChC,UAAK,GAAG,EAAE,CAAC;QAC+B,gBAAW,GAAG,KAAK,CAAC;QACxB,YAAO,GAAG,KAAK,CAAC;QAEjD,cAAS,GAAG,EAAE,CAAC;IAwHlC,CAAC;IApHoB,MAAM,CAAC,KAAsC;QAC9D,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;QAChD,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACpB,0EAA0E;QAC1E,uCAAuC;QACvC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC;IAC7C,CAAC;IAEO,kBAAkB,CAAC,YAA6C;QAEtE,MAAM,YAAY,GAAG,YAAY,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QAClD,+BAA+B;QAC/B,IAAI,YAAY,KAAK,SAAS;YAAE,OAAO,EAAE,CAAC;QAE1C,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC;QACnC,MAAM,gBAAgB,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC;QAC3C,IAAI,CAAC,YAAY,IAAI,YAAY,IAAI,gBAAgB,EAAE;YACrD,OAAO,WAAW,CAAC;SACpB;QACD,IAAI,YAAY,IAAI,CAAC,YAAY,IAAI,gBAAgB,EAAE;YACrD,OAAO,aAAa,CAAC;SACtB;QACD,OAAO,EAAE,CAAC;IACZ,CAAC;IAEO,WAAW;QACjB,MAAM,KAAK,GAAG,IAAI,KAAK,CACnB,8BAA8B,EAAE,EAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAC,CAAC,CAAC;QACrE,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAEkB,MAAM;QACvB,iCAAiC;QACjC,MAAM,EAAC,SAAS,EAAC,GAAG,IAAuB,CAAC;QAC5C,OAAO,IAAI,CAAA;;oBAEK,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG;qBACzB,SAAS,IAAI,OAAO;uBAClB,IAAI,CAAC,QAAQ;oBAChB,IAAI,CAAC,QAAQ;kBACf,IAAI,CAAC,WAAW;sCACI,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;;;gCAI/D,IAAI,CAAC,QAAQ;UACX,IAAI,CAAC,aAAa,EAAE;UACpB,IAAI,CAAC,aAAa,EAAE;UACpB,IAAI,CAAC,WAAW,EAAE;UAClB,IAAI,CAAC,iBAAiB,EAAE;;KAE7B,CAAC;IACJ,CAAC;IAES,gBAAgB;QACxB,OAAO;YACL,gCAAgC,EAAE,IAAI,CAAC,QAAQ;YAC/C,kCAAkC,EAAE,CAAC,IAAI,CAAC,QAAQ;YAClD,kCAAkC,EAAE,IAAI,CAAC,KAAK,KAAK,EAAE;YACrD,qCAAqC,EAAE,IAAI,CAAC,KAAK,KAAK,EAAE;YACxD,iCAAiC,EAAE,IAAI,CAAC,OAAO;YAC/C,sCAAsC,EAAE,CAAC,IAAI,CAAC,WAAW;YACzD,yCAAyC,EAAE,IAAI,CAAC,WAAW;YAC3D,iCAAiC,EAAE,IAAI,CAAC,SAAS,KAAK,WAAW;YACjE,mCAAmC,EAAE,IAAI,CAAC,SAAS,KAAK,aAAa;SACtE,CAAC;IACJ,CAAC;IAES,aAAa;QACrB,OAAO,OAAO,CAAC;IACjB,CAAC;IAEO,aAAa;QACnB,OAAO,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,yBAAyB,EAAE,CAAC,CAAC;YAClC,IAAI,CAAC,sBAAsB,EAAE,CAAC;IAC3D,CAAC;IAEO,yBAAyB;QAC/B,OAAO,IAAI,CAAA;;;;;;;;;;;KAWV,CAAC;IACJ,CAAC;IAEO,sBAAsB;QAC5B,OAAO,IAAI,CAAA;;;;;;;;;;;KAWV,CAAC;IACJ,CAAC;IAEO,WAAW;QACjB,OAAO,IAAI,CAAA;uDACwC,IAAI,CAAC,KAAK;KAC5D,CAAC;IACJ,CAAC;IAEO,iBAAiB;QACvB,OAAO,IAAI,CAAA,mDAAmD,CAAC;IACjE,CAAC;CACF;AAlIC;IACE,yBAAyB,CAAC,eAAe,CAAC,CAAC;AAC7C,CAAC,GAAA,CAAA;AAE0B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;iDAAkB;AACjB;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;iDAAkB;AAChC;IAAX,QAAQ,EAAE;8CAAY;AAC+B;IAArD,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAC,CAAC;oDAAqB;AACxB;IAAjD,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAC,CAAC;gDAAiB;AAEjD;IAAhB,KAAK,EAAE;kDAAwB;AAEf;IADhB,qBAAqB,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;oDACR","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../../focus/md-focus-ring.js';\nimport '../../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, PropertyValues, TemplateResult} from 'lit';\nimport {property, queryAssignedElements, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../../internal/aria/delegate.js';\n\n/**\n * SegmentedButton is a web component implementation of the Material Design\n * segmented button component. It is intended **only** for use as a child of a\n * `SementedButtonSet` component. It is **not** intended for use in any other\n * context.\n */\nexport class SegmentedButton extends LitElement {\n  static {\n    requestUpdateOnAriaChange(SegmentedButton);\n  }\n\n  @property({type: Boolean}) disabled = false;\n  @property({type: Boolean}) selected = false;\n  @property() label = '';\n  @property({type: Boolean, attribute: 'no-checkmark'}) noCheckmark = false;\n  @property({type: Boolean, attribute: 'has-icon'}) hasIcon = false;\n\n  @state() private animState = '';\n  @queryAssignedElements({slot: 'icon', flatten: true})\n  private readonly iconElement!: HTMLElement[];\n\n  protected override update(props: PropertyValues<SegmentedButton>) {\n    this.animState = this.nextAnimationState(props);\n    super.update(props);\n    // NOTE: This needs to be set *after* calling super.update() to ensure the\n    // appropriate CSS classes are applied.\n    this.hasIcon = this.iconElement.length > 0;\n  }\n\n  private nextAnimationState(changedProps: PropertyValues<SegmentedButton>):\n      string {\n    const prevSelected = changedProps.get('selected');\n    // Early exit for first update.\n    if (prevSelected === undefined) return '';\n\n    const nextSelected = this.selected;\n    const nextHasCheckmark = !this.noCheckmark;\n    if (!prevSelected && nextSelected && nextHasCheckmark) {\n      return 'selecting';\n    }\n    if (prevSelected && !nextSelected && nextHasCheckmark) {\n      return 'deselecting';\n    }\n    return '';\n  }\n\n  private handleClick() {\n    const event = new Event(\n        'segmented-button-interaction', {bubbles: true, composed: true});\n    this.dispatchEvent(event);\n  }\n\n  protected override render() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <button\n        tabindex=\"${this.disabled ? '-1' : '0'}\"\n        aria-label=${ariaLabel || nothing}\n        aria-pressed=${this.selected}\n        ?disabled=${this.disabled}\n        @click=\"${this.handleClick}\"\n        class=\"md3-segmented-button ${classMap(this.getRenderClasses())}\"\n      >\n        <md-focus-ring class=\"md3-segmented-button__focus-ring\" part=\"focus-ring\"></md-focus-ring>\n        <md-ripple ?disabled=\"${\n        this.disabled}\" class=\"md3-segmented-button__ripple\"></md-ripple>\n        ${this.renderOutline()}\n        ${this.renderLeading()}\n        ${this.renderLabel()}\n        ${this.renderTouchTarget()}\n      </button>\n    `;\n  }\n\n  protected getRenderClasses() {\n    return {\n      'md3-segmented-button--selected': this.selected,\n      'md3-segmented-button--unselected': !this.selected,\n      'md3-segmented-button--with-label': this.label !== '',\n      'md3-segmented-button--without-label': this.label === '',\n      'md3-segmented-button--with-icon': this.hasIcon,\n      'md3-segmented-button--with-checkmark': !this.noCheckmark,\n      'md3-segmented-button--without-checkmark': this.noCheckmark,\n      'md3-segmented-button--selecting': this.animState === 'selecting',\n      'md3-segmented-button--deselecting': this.animState === 'deselecting',\n    };\n  }\n\n  protected renderOutline(): TemplateResult|typeof nothing {\n    return nothing;\n  }\n\n  private renderLeading() {\n    return this.label === '' ? this.renderLeadingWithoutLabel() :\n                               this.renderLeadingWithLabel();\n  }\n\n  private renderLeadingWithoutLabel() {\n    return html`\n      <span class=\"md3-segmented-button__leading\" aria-hidden=\"true\">\n        <span class=\"md3-segmented-button__graphic\">\n          <svg class=\"md3-segmented-button__checkmark\" viewBox=\"0 0 24 24\">\n            <path class=\"md3-segmented-button__checkmark-path\" fill=\"none\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"></path>\n          </svg>\n        </span>\n        <span class=\"md3-segmented-button__icon\" aria-hidden=\"true\">\n          <slot name=\"icon\"></slot>\n        </span>\n      </span>\n    `;\n  }\n\n  private renderLeadingWithLabel() {\n    return html`\n      <span class=\"md3-segmented-button__leading\" aria-hidden=\"true\">\n        <span class=\"md3-segmented-button__graphic\">\n          <svg class=\"md3-segmented-button__checkmark\" viewBox=\"0 0 24 24\">\n            <path class=\"md3-segmented-button__checkmark-path\" fill=\"none\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"></path>\n          </svg>\n          <span class=\"md3-segmented-button__icon\" aria-hidden=\"true\">\n            <slot name=\"icon\"></slot>\n          </span>\n        </span>\n      </span>\n    `;\n  }\n\n  private renderLabel() {\n    return html`\n      <span class=\"md3-segmented-button__label-text\">${this.label}</span>\n    `;\n  }\n\n  private renderTouchTarget() {\n    return html`<span class=\"md3-segmented-button__touch\"></span>`;\n  }\n}\n"]}

package/labs/segmentedbutton/internal/shared-styles.css.js

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `@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:rgba(0,0,0,0);border:none;border-radius:inherit;display:flex;flex:1;justify-content:center;outline:none;position:relative;vertical-align:middle;padding-inline-start:var(--_spacing-leading);padding-inline-end:var(--_spacing-trailing)}.md3-segmented-button .md3-segmented-button__outline{border-color:var(--_outline-color)}.md3-segmented-button:disabled .md3-segmented-button__outline{border-color:var(--_disabled-outline-color)}.md3-segmented-button .md3-segmented-button__graphic,.md3-segmented-button .md3-segmented-button__checkmark,.md3-segmented-button .md3-segmented-button__icon,.md3-segmented-button .md3-segmented-button__icon ::slotted([slot=icon]){height:var(--_icon-size);width:var(--_icon-size);font-size:var(--_icon-size)}.md3-segmented-button.md3-segmented-button--with-icon.md3-segmented-button--with-label .md3-segmented-button__graphic,.md3-segmented-button.md3-segmented-button--selected.md3-segmented-button--with-label.md3-segmented-button--with-checkmark .md3-segmented-button__graphic,.md3-segmented-button.md3-segmented-button--selected.md3-segmented-button--without-label.md3-segmented-button--with-checkmark .md3-segmented-button__graphic{width:calc(var(--_icon-size) + 8px)}.md3-segmented-button .md3-segmented-button__label-text{font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight)}.md3-segmented-button.md3-segmented-button--selected:enabled .md3-segmented-button__label-text{color:var(--_selected-label-text-color)}.md3-segmented-button.md3-segmented-button--selected:enabled:hover .md3-segmented-button__label-text{color:var(--_selected-hover-label-text-color)}.md3-segmented-button.md3-segmented-button--selected:enabled:focus .md3-segmented-button__label-text{color:var(--_selected-focus-label-text-color)}.md3-segmented-button.md3-segmented-button--selected:enabled:active .md3-segmented-button__label-text{color:var(--_selected-pressed-label-text-color)}.md3-segmented-button.md3-segmented-button--unselected:enabled .md3-segmented-button__label-text{color:var(--_unselected-label-text-color)}.md3-segmented-button.md3-segmented-button--unselected:enabled:hover .md3-segmented-button__label-text{color:var(--_unselected-hover-label-text-color)}.md3-segmented-button.md3-segmented-button--unselected:enabled:focus .md3-segmented-button__label-text{color:var(--_unselected-focus-label-text-color)}.md3-segmented-button.md3-segmented-button--unselected:enabled:active .md3-segmented-button__label-text{color:var(--_unselected-pressed-label-text-color)}.md3-segmented-button:disabled .md3-segmented-button__label-text{color:var(--_disabled-label-text-color)}.md3-segmented-button--unselected{--md-ripple-hover-color: var(--_unselected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_unselected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.md3-segmented-button--unselected .md3-segmented-button__icon{color:var(--_unselected-icon-color)}.md3-segmented-button--unselected:hover .md3-segmented-button__icon{color:var(--_unselected-hover-icon-color)}.md3-segmented-button--unselected:focus .md3-segmented-button__icon{color:var(--_unselected-focus-icon-color)}.md3-segmented-button--unselected:active .md3-segmented-button__icon{color:var(--_unselected-pressed-icon-color)}.md3-segmented-button--unselected:disabled .md3-segmented-button__icon{color:var(--_disabled-icon-color)}.md3-segmented-button--selected{background-color:var(--_selected-container-color);--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.md3-segmented-button--selected .md3-segmented-button__icon{color:var(--_selected-icon-color)}.md3-segmented-button--selected .md3-segmented-button__checkmark-path{stroke:var(--_selected-icon-color)}.md3-segmented-button--selected:hover .md3-segmented-button__checkmark-path{stroke:var(--_selected-hover-icon-color)}.md3-segmented-button--selected:focus .md3-segmented-button__checkmark-path{stroke:var(--_selected-focus-icon-color)}.md3-segmented-button--selected:active .md3-segmented-button__checkmark-path{stroke:var(--_selected-pressed-icon-color)}.md3-segmented-button--selected:disabled .md3-segmented-button__checkmark-path{stroke:var(--_disabled-icon-color)}.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{position:absolute;top:50%;height:48px;left:50%;width:100%;transform:translate(-50%, -50%)}.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:width 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-segmented-button--unselected.md3-segmented-button--with-label .md3-segmented-button__graphic,.md3-segmented-button--unselected.md3-segmented-button--without-label .md3-segmented-button__graphic,.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{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:cubic-bezier(0.4, 0, 0.2, 1)}.md3-segmented-button--selecting.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--deselecting.md3-segmented-button--with-label .md3-segmented-button__icon{opacity:0;animation:md3-segmented-button-simple-fade-in;animation-delay:50ms;animation-duration:150ms;animation-timing-function:linear;animation-fill-mode:forwards}/*# sourceMappingURL=shared-styles.css.map */
+`;
+//# sourceMappingURL=shared-styles.css.js.map

package/labs/segmentedbutton/internal/shared-styles.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared-styles.css.js","sourceRoot":"","sources":["shared-styles.css.ts"],"names":[],"mappings":"AAAA;;;;IAII;AACH,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;CACzB,CAAC","sourcesContent":["/**\n  * @license\n  * Copyright 2022 Google LLC\n  * SPDX-License-Identifier: Apache-2.0\n  */\n import {css} from 'lit';\n export const styles = css`@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:rgba(0,0,0,0);border:none;border-radius:inherit;display:flex;flex:1;justify-content:center;outline:none;position:relative;vertical-align:middle;padding-inline-start:var(--_spacing-leading);padding-inline-end:var(--_spacing-trailing)}.md3-segmented-button .md3-segmented-button__outline{border-color:var(--_outline-color)}.md3-segmented-button:disabled .md3-segmented-button__outline{border-color:var(--_disabled-outline-color)}.md3-segmented-button .md3-segmented-button__graphic,.md3-segmented-button .md3-segmented-button__checkmark,.md3-segmented-button .md3-segmented-button__icon,.md3-segmented-button .md3-segmented-button__icon ::slotted([slot=icon]){height:var(--_icon-size);width:var(--_icon-size);font-size:var(--_icon-size)}.md3-segmented-button.md3-segmented-button--with-icon.md3-segmented-button--with-label .md3-segmented-button__graphic,.md3-segmented-button.md3-segmented-button--selected.md3-segmented-button--with-label.md3-segmented-button--with-checkmark .md3-segmented-button__graphic,.md3-segmented-button.md3-segmented-button--selected.md3-segmented-button--without-label.md3-segmented-button--with-checkmark .md3-segmented-button__graphic{width:calc(var(--_icon-size) + 8px)}.md3-segmented-button .md3-segmented-button__label-text{font-family:var(--_label-text-font);font-size:var(--_label-text-size);line-height:var(--_label-text-line-height);font-weight:var(--_label-text-weight)}.md3-segmented-button.md3-segmented-button--selected:enabled .md3-segmented-button__label-text{color:var(--_selected-label-text-color)}.md3-segmented-button.md3-segmented-button--selected:enabled:hover .md3-segmented-button__label-text{color:var(--_selected-hover-label-text-color)}.md3-segmented-button.md3-segmented-button--selected:enabled:focus .md3-segmented-button__label-text{color:var(--_selected-focus-label-text-color)}.md3-segmented-button.md3-segmented-button--selected:enabled:active .md3-segmented-button__label-text{color:var(--_selected-pressed-label-text-color)}.md3-segmented-button.md3-segmented-button--unselected:enabled .md3-segmented-button__label-text{color:var(--_unselected-label-text-color)}.md3-segmented-button.md3-segmented-button--unselected:enabled:hover .md3-segmented-button__label-text{color:var(--_unselected-hover-label-text-color)}.md3-segmented-button.md3-segmented-button--unselected:enabled:focus .md3-segmented-button__label-text{color:var(--_unselected-focus-label-text-color)}.md3-segmented-button.md3-segmented-button--unselected:enabled:active .md3-segmented-button__label-text{color:var(--_unselected-pressed-label-text-color)}.md3-segmented-button:disabled .md3-segmented-button__label-text{color:var(--_disabled-label-text-color)}.md3-segmented-button--unselected{--md-ripple-hover-color: var(--_unselected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_unselected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.md3-segmented-button--unselected .md3-segmented-button__icon{color:var(--_unselected-icon-color)}.md3-segmented-button--unselected:hover .md3-segmented-button__icon{color:var(--_unselected-hover-icon-color)}.md3-segmented-button--unselected:focus .md3-segmented-button__icon{color:var(--_unselected-focus-icon-color)}.md3-segmented-button--unselected:active .md3-segmented-button__icon{color:var(--_unselected-pressed-icon-color)}.md3-segmented-button--unselected:disabled .md3-segmented-button__icon{color:var(--_disabled-icon-color)}.md3-segmented-button--selected{background-color:var(--_selected-container-color);--md-ripple-hover-color: var(--_selected-hover-state-layer-color);--md-ripple-hover-opacity: var(--_hover-state-layer-opacity);--md-ripple-pressed-color: var(--_selected-pressed-state-layer-color);--md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity)}.md3-segmented-button--selected .md3-segmented-button__icon{color:var(--_selected-icon-color)}.md3-segmented-button--selected .md3-segmented-button__checkmark-path{stroke:var(--_selected-icon-color)}.md3-segmented-button--selected:hover .md3-segmented-button__checkmark-path{stroke:var(--_selected-hover-icon-color)}.md3-segmented-button--selected:focus .md3-segmented-button__checkmark-path{stroke:var(--_selected-focus-icon-color)}.md3-segmented-button--selected:active .md3-segmented-button__checkmark-path{stroke:var(--_selected-pressed-icon-color)}.md3-segmented-button--selected:disabled .md3-segmented-button__checkmark-path{stroke:var(--_disabled-icon-color)}.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{position:absolute;top:50%;height:48px;left:50%;width:100%;transform:translate(-50%, -50%)}.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:width 150ms cubic-bezier(0.4, 0, 0.2, 1)}.md3-segmented-button--unselected.md3-segmented-button--with-label .md3-segmented-button__graphic,.md3-segmented-button--unselected.md3-segmented-button--without-label .md3-segmented-button__graphic,.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{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:cubic-bezier(0.4, 0, 0.2, 1)}.md3-segmented-button--selecting.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--deselecting.md3-segmented-button--with-label .md3-segmented-button__icon{opacity:0;animation:md3-segmented-button-simple-fade-in;animation-delay:50ms;animation-duration:150ms;animation-timing-function:linear;animation-fill-mode:forwards}/*# sourceMappingURL=shared-styles.css.map */\n`;\n "]}

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

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { OutlinedSegmentedButton } from './internal/outlined-segmented-button.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-outlined-segmented-button': MdOutlinedSegmentedButton;
+    }
+}
+/**
+ * MdOutlinedSegmentedButton is the custom element for the Material
+ * Design outlined segmented button component.
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdOutlinedSegmentedButton extends OutlinedSegmentedButton {
+    static styles: import("lit").CSSResult[];
+}