material-web-evo 10002.10001.10000

package/labs/navigationtab/internal/navigation-tab.js

@@ -0,0 +1,132 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import '../../../focus/md-focus-ring.js';
+import '../../../ripple/ripple.js';
+import '../../badge/badge.js';
+import { html, LitElement, nothing } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { mixinDelegatesAria } from '../../../internal/aria/delegate.js';
+// Separate variable needed for closure.
+const navigationTabBaseClass = mixinDelegatesAria(LitElement);
+/**
+ * b/265346501 - add docs
+ *
+ * @fires navigation-tab-rendered {Event} Dispatched when the navigation tab's
+ * DOM has rendered and custom element definition has loaded. --bubbles
+ * --composed
+ * @fires navigation-tab-interaction {CustomEvent<{state: MdNavigationTab}>}
+ * Dispatched when the navigation tab has been clicked. --bubbles --composed
+ */
+export class NavigationTab extends navigationTabBaseClass {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        this.active = false;
+        this.hideInactiveLabel = false;
+        this.badgeValue = '';
+        this.showBadge = false;
+    }
+    render() {
+        // Needed for closure conformance
+        const { ariaLabel } = this;
+        return html ` <button
+      class="md3-navigation-tab ${classMap(this.getRenderClasses())}"
+      role="tab"
+      aria-selected="${this.active}"
+      aria-label=${ariaLabel || nothing}
+      tabindex="${this.active ? 0 : -1}"
+      @click="${this.handleClick}">
+      <md-focus-ring part="focus-ring" inward></md-focus-ring>
+      <md-ripple
+        ?disabled="${this.disabled}"
+        class="md3-navigation-tab__ripple"></md-ripple>
+      <span aria-hidden="true" class="md3-navigation-tab__icon-content"
+        ><span class="md3-navigation-tab__active-indicator"></span
+        ><span class="md3-navigation-tab__icon"
+          ><slot name="inactive-icon"></slot
+        ></span>
+        <span class="md3-navigation-tab__icon md3-navigation-tab__icon--active"
+          ><slot name="active-icon"></slot></span
+        >${this.renderBadge()}</span
+      >${this.renderLabel()}
+    </button>`;
+    }
+    getRenderClasses() {
+        return {
+            'md3-navigation-tab--hide-inactive-label': this.hideInactiveLabel,
+            'md3-navigation-tab--active': this.active,
+        };
+    }
+    renderBadge() {
+        return this.showBadge
+            ? html `<md-badge .value="${this.badgeValue}"></md-badge>`
+            : nothing;
+    }
+    renderLabel() {
+        // Needed for closure conformance
+        const { ariaLabel } = this;
+        const ariaHidden = ariaLabel ? 'true' : 'false';
+        return !this.label
+            ? nothing
+            : html ` <span
+          aria-hidden="${ariaHidden}"
+          class="md3-navigation-tab__label-text"
+          >${this.label}</span
+        >`;
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        const event = new Event('navigation-tab-rendered', {
+            bubbles: true,
+            composed: true,
+        });
+        this.dispatchEvent(event);
+    }
+    focus() {
+        const buttonElement = this.buttonElement;
+        if (buttonElement) {
+            buttonElement.focus();
+        }
+    }
+    blur() {
+        const buttonElement = this.buttonElement;
+        if (buttonElement) {
+            buttonElement.blur();
+        }
+    }
+    handleClick() {
+        // b/269772145 - connect to ripple
+        this.dispatchEvent(new CustomEvent('navigation-tab-interaction', {
+            detail: { state: this },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+}
+__decorate([
+    property({ type: Boolean })
+], NavigationTab.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NavigationTab.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-inactive-label' })
+], NavigationTab.prototype, "hideInactiveLabel", void 0);
+__decorate([
+    property()
+], NavigationTab.prototype, "label", void 0);
+__decorate([
+    property({ attribute: 'badge-value' })
+], NavigationTab.prototype, "badgeValue", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-badge' })
+], NavigationTab.prototype, "showBadge", void 0);
+__decorate([
+    query('button')
+], NavigationTab.prototype, "buttonElement", void 0);
+//# sourceMappingURL=navigation-tab.js.map

package/labs/navigationtab/internal/navigation-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-tab.js","sourceRoot":"","sources":["navigation-tab.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../../focus/md-focus-ring.js';\nimport '../../../ripple/ripple.js';\nimport '../../badge/badge.js';\n\nimport {html, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {mixinDelegatesAria} from '../../../internal/aria/delegate.js';\n\nimport {NavigationTabState} from './state.js';\n\n// Separate variable needed for closure.\nconst navigationTabBaseClass = mixinDelegatesAria(LitElement);\n\n/**\n * b/265346501 - add docs\n *\n * @fires navigation-tab-rendered {Event} Dispatched when the navigation tab's\n * DOM has rendered and custom element definition has loaded. --bubbles\n * --composed\n * @fires navigation-tab-interaction {CustomEvent<{state: MdNavigationTab}>}\n * Dispatched when the navigation tab has been clicked. --bubbles --composed\n */\nexport class NavigationTab\n  extends navigationTabBaseClass\n  implements NavigationTabState\n{\n  @property({type: Boolean}) disabled = false;\n  @property({type: Boolean, reflect: true}) active = false;\n  @property({type: Boolean, attribute: 'hide-inactive-label'})\n  hideInactiveLabel = false;\n  @property() label?: string;\n  @property({attribute: 'badge-value'}) badgeValue = '';\n  @property({type: Boolean, attribute: 'show-badge'}) showBadge = false;\n\n  @query('button') buttonElement!: HTMLElement | null;\n\n  protected override render() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html` <button\n      class=\"md3-navigation-tab ${classMap(this.getRenderClasses())}\"\n      role=\"tab\"\n      aria-selected=\"${this.active}\"\n      aria-label=${ariaLabel || nothing}\n      tabindex=\"${this.active ? 0 : -1}\"\n      @click=\"${this.handleClick}\">\n      <md-focus-ring part=\"focus-ring\" inward></md-focus-ring>\n      <md-ripple\n        ?disabled=\"${this.disabled}\"\n        class=\"md3-navigation-tab__ripple\"></md-ripple>\n      <span aria-hidden=\"true\" class=\"md3-navigation-tab__icon-content\"\n        ><span class=\"md3-navigation-tab__active-indicator\"></span\n        ><span class=\"md3-navigation-tab__icon\"\n          ><slot name=\"inactive-icon\"></slot\n        ></span>\n        <span class=\"md3-navigation-tab__icon md3-navigation-tab__icon--active\"\n          ><slot name=\"active-icon\"></slot></span\n        >${this.renderBadge()}</span\n      >${this.renderLabel()}\n    </button>`;\n  }\n\n  private getRenderClasses() {\n    return {\n      'md3-navigation-tab--hide-inactive-label': this.hideInactiveLabel,\n      'md3-navigation-tab--active': this.active,\n    };\n  }\n\n  private renderBadge() {\n    return this.showBadge\n      ? html`<md-badge .value=\"${this.badgeValue}\"></md-badge>`\n      : nothing;\n  }\n\n  private renderLabel() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    const ariaHidden = ariaLabel ? 'true' : 'false';\n    return !this.label\n      ? nothing\n      : html` <span\n          aria-hidden=\"${ariaHidden}\"\n          class=\"md3-navigation-tab__label-text\"\n          >${this.label}</span\n        >`;\n  }\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n    const event = new Event('navigation-tab-rendered', {\n      bubbles: true,\n      composed: true,\n    });\n    this.dispatchEvent(event);\n  }\n\n  override focus() {\n    const buttonElement = this.buttonElement;\n    if (buttonElement) {\n      buttonElement.focus();\n    }\n  }\n\n  override blur() {\n    const buttonElement = this.buttonElement;\n    if (buttonElement) {\n      buttonElement.blur();\n    }\n  }\n\n  handleClick() {\n    // b/269772145 - connect to ripple\n    this.dispatchEvent(\n      new CustomEvent('navigation-tab-interaction', {\n        detail: {state: this},\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n}\n"]}

package/labs/navigationtab/internal/state.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+/**
+ * The state of a navigation tab.
+ */
+export interface NavigationTabState {
+    /**
+     * Active state of the navigation tab.
+     */
+    active: boolean;
+    /**
+     * If true, when inactive label will be hidden.
+     */
+    hideInactiveLabel: boolean;
+}

package/labs/navigationtab/internal/state.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+export {};
+//# sourceMappingURL=state.js.map

package/labs/navigationtab/internal/state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.js","sourceRoot":"","sources":["state.ts"],"names":[],"mappings":"AAAA;;;;GAIG","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n/**\n * The state of a navigation tab.\n */\nexport interface NavigationTabState {\n  /**\n   * Active state of the navigation tab.\n   */\n  active: boolean;\n  /**\n   * If true, when inactive label will be hidden.\n   */\n  hideInactiveLabel: boolean;\n}\n"]}

package/labs/navigationtab/navigation-tab.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { CSSResultOrNative } from 'lit';
+import { NavigationTab } from './internal/navigation-tab.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-navigation-tab': MdNavigationTab;
+    }
+}
+/**
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdNavigationTab extends NavigationTab {
+    static styles: CSSResultOrNative[];
+}

package/labs/navigationtab/navigation-tab.js

@@ -0,0 +1,20 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { NavigationTab } from './internal/navigation-tab.js';
+import { styles } from './internal/navigation-tab-styles.js';
+/**
+ * @final
+ * @suppress {visibility}
+ */
+export let MdNavigationTab = class MdNavigationTab extends NavigationTab {
+};
+MdNavigationTab.styles = [styles];
+MdNavigationTab = __decorate([
+    customElement('md-navigation-tab')
+], MdNavigationTab);
+//# sourceMappingURL=navigation-tab.js.map

package/labs/navigationtab/navigation-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-tab.js","sourceRoot":"","sources":["navigation-tab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAGH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,aAAa,EAAC,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAC,MAAM,EAAC,MAAM,qCAAqC,CAAC;AAQ3D;;;GAGG;AAEI,WAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,aAAa;;AAChC,sBAAM,GAAwB,CAAC,MAAM,CAAC,AAAhC,CAAiC;AAD5C,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAE3B","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {CSSResultOrNative} from 'lit';\nimport {customElement} from 'lit/decorators.js';\n\nimport {NavigationTab} from './internal/navigation-tab.js';\nimport {styles} from './internal/navigation-tab-styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-navigation-tab': MdNavigationTab;\n  }\n}\n\n/**\n * @final\n * @suppress {visibility}\n */\n@customElement('md-navigation-tab')\nexport class MdNavigationTab extends NavigationTab {\n  static override styles: CSSResultOrNative[] = [styles];\n}\n"]}

package/labs/segmentedbutton/internal/_outlined-segmented-button.scss

@@ -0,0 +1,42 @@
+//
+// 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 '../../../tokens';
+// go/keep-sorted end
+
+@mixin styles() {
+  $tokens: tokens.md-comp-outlined-segmented-button-values();
+  // b/198759625 - Remove spacing tokens once provided.
+  $tokens: map.merge(
+    $tokens,
+    (
+      'spacing-leading': 12px,
+      'spacing-trailing': 12px,
+    )
+  );
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: var(--md-outlined-segmented-button-#{$token}, #{$value});
+    }
+  }
+
+  .md3-segmented-button__outline {
+    border-radius: inherit;
+    border-style: solid;
+    // Move border-width and inset into theme.
+    border-width: 1px;
+    inset: 0px -0.5px;
+    pointer-events: none;
+    position: absolute;
+  }
+}

package/labs/segmentedbutton/internal/_shared.scss

@@ -0,0 +1,361 @@
+//
+// 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;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .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);
+    // Override the user-agent text-transform: none of <button>
+    text-transform: inherit;
+
+    .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 {
+        // 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-segmented-button.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { SegmentedButton } from './segmented-button.js';
+/**
+ * b/265346443 - add docs
+ */
+export declare class OutlinedSegmentedButton extends SegmentedButton {
+    protected getRenderClasses(): {
+        'md3-segmented-button--outlined': boolean;
+        '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(): import("lit-html").TemplateResult<1>;
+}

package/labs/segmentedbutton/internal/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';
+/**
+ * b/265346443 - add docs
+ */
+export class OutlinedSegmentedButton extends SegmentedButton {
+    getRenderClasses() {
+        return {
+            ...super.getRenderClasses(),
+            'md3-segmented-button--outlined': true,
+        };
+    }
+    renderOutline() {
+        return html `<span class="md3-segmented-button__outline"></span>`;
+    }
+}
+//# sourceMappingURL=outlined-segmented-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"outlined-segmented-button.js","sourceRoot":"","sources":["outlined-segmented-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,eAAe,EAAC,MAAM,uBAAuB,CAAC;AAEtD;;GAEG;AACH,MAAM,OAAO,uBAAwB,SAAQ,eAAe;IACvC,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,gCAAgC,EAAE,IAAI;SACvC,CAAC;IACJ,CAAC;IAEkB,aAAa;QAC9B,OAAO,IAAI,CAAA,qDAAqD,CAAC;IACnE,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html} from 'lit';\n\nimport {SegmentedButton} from './segmented-button.js';\n\n/**\n * b/265346443 - add docs\n */\nexport class OutlinedSegmentedButton extends SegmentedButton {\n  protected override getRenderClasses() {\n    return {\n      ...super.getRenderClasses(),\n      'md3-segmented-button--outlined': true,\n    };\n  }\n\n  protected override renderOutline() {\n    return html`<span class=\"md3-segmented-button__outline\"></span>`;\n  }\n}\n"]}