@material/web 1.0.0-pre.12 → 1.0.0-pre.14

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

@@ -0,0 +1,119 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+var _a;
+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 { requestUpdateOnAriaChange } from '../../../internal/aria/delegate.js';
+/**
+ * TODO(b/265346501): add docs
+ */
+export class NavigationTab extends LitElement {
+    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="inactiveIcon"></slot
+        ></span>
+        <span class="md3-navigation-tab__icon md3-navigation-tab__icon--active"
+          ><slot name="activeIcon"></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() {
+        // TODO(b/269772145): connect to ripple
+        this.dispatchEvent(new CustomEvent('navigation-tab-interaction', { detail: { state: this }, bubbles: true, composed: true }));
+    }
+}
+_a = NavigationTab;
+(() => {
+    requestUpdateOnAriaChange(_a);
+})();
+__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 {requestUpdateOnAriaChange} from '../../../internal/aria/delegate.js';\n\nimport {NavigationTabState} from './state.js';\n\n/**\n * TODO(b/265346501): add docs\n */\nexport class NavigationTab extends LitElement implements NavigationTabState {\n  static {\n    requestUpdateOnAriaChange(this);\n  }\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`\n      <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      >\n        <md-focus-ring part=\"focus-ring\" inward></md-focus-ring>\n        <md-ripple ?disabled=\"${\n        this.disabled}\" 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\"\n            ></span><span class=\"md3-navigation-tab__icon\"\n          ><slot name=\"inactiveIcon\"></slot\n        ></span>\n        <span class=\"md3-navigation-tab__icon md3-navigation-tab__icon--active\"\n          ><slot name=\"activeIcon\"></slot\n        ></span>${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`\n        <span aria-hidden=\"${\n            ariaHidden}\" class=\"md3-navigation-tab__label-text\">${\n            this.label}</span>`;\n  }\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n    const event =\n        new Event('navigation-tab-rendered', {bubbles: true, composed: true});\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    // TODO(b/269772145): connect to ripple\n    this.dispatchEvent(new CustomEvent(\n        'navigation-tab-interaction',\n        {detail: {state: this}, bubbles: true, composed: true}));\n  }\n}\n"]}

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

@@ -3,7 +3,7 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { NavigationTab } from './lib/navigation-tab.js';
+import { NavigationTab } from './internal/navigation-tab.js';
 declare global {
     interface HTMLElementTagNameMap {
         'md-navigation-tab': MdNavigationTab;

package/labs/navigationtab/navigation-tab.js

@@ -5,8 +5,8 @@
  */
 import { __decorate } from "tslib";
 import { customElement } from 'lit/decorators.js';
-import { NavigationTab } from './lib/navigation-tab.js';
-import { styles } from './lib/navigation-tab-styles.css.js';
+import { NavigationTab } from './internal/navigation-tab.js';
+import { styles } from './internal/navigation-tab-styles.css.js';
 /**
  * @final
  * @suppress {visibility}

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

@@ -1 +1 @@
-{"version":3,"file":"navigation-tab.js","sourceRoot":"","sources":["navigation-tab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,aAAa,EAAC,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAC,MAAM,EAAC,MAAM,oCAAoC,CAAC;AAQ1D;;;GAGG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,aAAa;;AAChC,sBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAE3B;SAFY,eAAe","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {NavigationTab} from './lib/navigation-tab.js';\nimport {styles} from './lib/navigation-tab-styles.css.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 = [styles];\n}\n"]}
+{"version":3,"file":"navigation-tab.js","sourceRoot":"","sources":["navigation-tab.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,aAAa,EAAC,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAC,MAAM,EAAC,MAAM,yCAAyC,CAAC;AAQ/D;;;GAGG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,aAAa;;AAChC,sBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAE3B;SAFY,eAAe","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {NavigationTab} from './internal/navigation-tab.js';\nimport {styles} from './internal/navigation-tab-styles.css.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 = [styles];\n}\n"]}

package/labs/segmentedbutton/internal/_shared.scss

@@ -0,0 +1,355 @@
+//
+// 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: var(--_label-text-type);
+    }
+
+    &.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{--_disabled-icon-color: var(--md-segmented-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-color: var(--md-segmented-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-color: var(--md-segmented-button-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-segmented-button-hover-state-layer-opacity, 0.08);--_label-text-type: var(--md-segmented-button-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_outline-color: var(--md-segmented-button-outline-color, var(--md-sys-color-outline, #79747e));--_pressed-state-layer-opacity: var(--md-segmented-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-segmented-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-focus-icon-color: var(--md-segmented-button-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-label-text-color: var(--md-segmented-button-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-icon-color: var(--md-segmented-button-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-segmented-button-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-segmented-button-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-label-text-color: var(--md-segmented-button-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-icon-color: var(--md-segmented-button-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-segmented-button-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-segmented-button-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_unselected-focus-icon-color: var(--md-segmented-button-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-focus-label-text-color: var(--md-segmented-button-unselected-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-icon-color: var(--md-segmented-button-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-label-text-color: var(--md-segmented-button-unselected-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-color: var(--md-segmented-button-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-label-text-color: var(--md-segmented-button-unselected-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-icon-color: var(--md-segmented-button-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-label-text-color: var(--md-segmented-button-unselected-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-color: var(--md-segmented-button-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_icon-size: var(--md-segmented-button-icon-size, 18px);--_selected-icon-color: var(--md-segmented-button-selected-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_unselected-icon-color: var(--md-segmented-button-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_spacing-leading: var(--md-segmented-button-spacing-leading, 12px);--_spacing-trailing: var(--md-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{--_disabled-icon-color: var(--md-segmented-button-disabled-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-label-text-color: var(--md-segmented-button-disabled-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_disabled-outline-color: var(--md-segmented-button-disabled-outline-color, var(--md-sys-color-on-surface, #1d1b20));--_hover-state-layer-opacity: var(--md-segmented-button-hover-state-layer-opacity, 0.08);--_label-text-type: var(--md-segmented-button-label-text-type, var(--md-sys-typescale-label-large, 500 0.875rem / 1.25rem var(--md-ref-typeface-plain, Roboto)));--_outline-color: var(--md-segmented-button-outline-color, var(--md-sys-color-outline, #79747e));--_pressed-state-layer-opacity: var(--md-segmented-button-pressed-state-layer-opacity, 0.12);--_selected-container-color: var(--md-segmented-button-selected-container-color, var(--md-sys-color-secondary-container, #e8def8));--_selected-focus-icon-color: var(--md-segmented-button-selected-focus-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-focus-label-text-color: var(--md-segmented-button-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-icon-color: var(--md-segmented-button-selected-hover-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-label-text-color: var(--md-segmented-button-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-hover-state-layer-color: var(--md-segmented-button-selected-hover-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-label-text-color: var(--md-segmented-button-selected-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-icon-color: var(--md-segmented-button-selected-pressed-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-label-text-color: var(--md-segmented-button-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container, #1d192b));--_selected-pressed-state-layer-color: var(--md-segmented-button-selected-pressed-state-layer-color, var(--md-sys-color-on-secondary-container, #1d192b));--_unselected-focus-icon-color: var(--md-segmented-button-unselected-focus-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-focus-label-text-color: var(--md-segmented-button-unselected-focus-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-icon-color: var(--md-segmented-button-unselected-hover-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-label-text-color: var(--md-segmented-button-unselected-hover-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-hover-state-layer-color: var(--md-segmented-button-unselected-hover-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-label-text-color: var(--md-segmented-button-unselected-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-icon-color: var(--md-segmented-button-unselected-pressed-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-label-text-color: var(--md-segmented-button-unselected-pressed-label-text-color, var(--md-sys-color-on-surface, #1d1b20));--_unselected-pressed-state-layer-color: var(--md-segmented-button-unselected-pressed-state-layer-color, var(--md-sys-color-on-surface, #1d1b20));--_icon-size: var(--md-segmented-button-icon-size, 18px);--_selected-icon-color: var(--md-segmented-button-selected-icon-color, var(--md-sys-color-on-secondary-container, #1d192b));--_unselected-icon-color: var(--md-segmented-button-unselected-icon-color, var(--md-sys-color-on-surface, #1d1b20));--_spacing-leading: var(--md-segmented-button-spacing-leading, 12px);--_spacing-trailing: var(--md-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;
+}