@material/web 1.0.0-pre.6 → 1.0.0-pre.7

package/segmentedbutton/lib/segmented-button.js

@@ -3,24 +3,24 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { __decorate, __metadata } from "tslib";
+var _a;
+import { __decorate } from "tslib";
 import '../../focus/focus-ring.js';
-import { html } from 'lit';
-import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
+import '../../ripple/ripple.js';
+import { html, LitElement, nothing } from 'lit';
+import { property, queryAssignedElements, queryAsync, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { ActionElement } from '../../actionelement/action-element.js';
-import { ariaProperty } from '../../decorators/aria-property.js';
+import { when } from 'lit/directives/when.js';
+import { requestUpdateOnAriaChange } from '../../aria/delegate.js';
 import { pointerPress, shouldShowStrongFocus } from '../../focus/strong-focus.js';
-import { MdRipple } from '../../ripple/ripple.js';
+import { ripple } from '../../ripple/directive.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.
- * @soyCompatible
  */
-export class SegmentedButton extends ActionElement {
+export class SegmentedButton extends LitElement {
     constructor() {
         super(...arguments);
         this.disabled = false;
@@ -30,6 +30,14 @@ export class SegmentedButton extends ActionElement {
         this.hasIcon = false;
         this.animState = '';
         this.showFocusRing = false;
+        this.showRipple = false;
+        this.getRipple = () => {
+            this.showRipple = true;
+            return this.ripple;
+        };
+        this.renderRipple = () => {
+            return html `<md-ripple ?disabled="${this.disabled}" class="md3-segmented-button__ripple"> </md-ripple>`;
+        };
     }
     update(props) {
         this.animState = this.nextAnimationState(props);
@@ -53,58 +61,37 @@ export class SegmentedButton extends ActionElement {
         }
         return '';
     }
-    beginPress({ positionEvent }) {
-        // TODO(b/261201805): connect to ripple
-    }
-    endPress(options) {
-        // TODO(b/261201805): connect to ripple
-        super.endPress(options);
-        if (!options.cancelled) {
-            const event = new Event('segmented-button-interaction', { bubbles: true, composed: true });
-            this.dispatchEvent(event);
-        }
+    handleClick(e) {
+        const event = new Event('segmented-button-interaction', { bubbles: true, composed: true });
+        this.dispatchEvent(event);
     }
     handlePointerDown(e) {
-        super.handlePointerDown(e);
         pointerPress();
         this.showFocusRing = shouldShowStrongFocus();
     }
-    handlePointerUp(e) {
-        super.handlePointerUp(e);
-    }
-    handlePointerEnter(e) {
-        this.ripple.handlePointerenter(e);
-    }
-    handlePointerLeave(e) {
-        super.handlePointerLeave(e);
-        this.ripple.handlePointerleave(e);
-    }
     handleFocus() {
         this.showFocusRing = shouldShowStrongFocus();
     }
     handleBlur() {
         this.showFocusRing = false;
     }
-    /** @soyTemplate */
     render() {
+        // Needed for closure conformance
+        const { ariaLabel } = this;
         return html `
       <button
         tabindex="${this.disabled ? '-1' : '0'}"
-        aria-label="${ifDefined(this.ariaLabel)}"
+        aria-label=${ariaLabel || nothing}
         aria-pressed=${this.selected}
         ?disabled=${this.disabled}
         @focus="${this.handleFocus}"
         @blur="${this.handleBlur}"
         @pointerdown="${this.handlePointerDown}"
-        @pointerup="${this.handlePointerUp}"
-        @pointercancel="${this.handlePointerCancel}"
-        @pointerleave="${this.handlePointerLeave}"
-        @pointerenter="${this.handlePointerEnter}"
         @click="${this.handleClick}"
-        @contextmenu="${this.handleContextMenu}"
-        class="md3-segmented-button ${classMap(this.getRenderClasses())}">
+        class="md3-segmented-button ${classMap(this.getRenderClasses())}"
+        ${ripple(this.getRipple)}>
         ${this.renderFocusRing()}
-        ${this.renderRipple()}
+        ${when(this.showRipple, this.renderRipple)}
         ${this.renderOutline()}
         ${this.renderLeading()}
         ${this.renderLabel()}
@@ -112,7 +99,6 @@ export class SegmentedButton extends ActionElement {
       </button>
     `;
     }
-    /** @soyTemplate */
     getRenderClasses() {
         return {
             'md3-segmented-button--selected': this.selected,
@@ -126,24 +112,16 @@ export class SegmentedButton extends ActionElement {
             'md3-segmented-button--deselecting': this.animState === 'deselecting',
         };
     }
-    /** @soyTemplate */
     renderFocusRing() {
         return html `<md-focus-ring .visible="${this.showFocusRing}" class="md3-segmented-button__focus-ring"></md-focus-ring>`;
     }
-    /** @soyTemplate */
-    renderRipple() {
-        return html `<md-ripple ?disabled="${this.disabled}" class="md3-segmented-button__ripple"> </md-ripple>`;
-    }
-    /** @soyTemplate */
     renderOutline() {
         return html ``;
     }
-    /** @soyTemplate */
     renderLeading() {
         return this.label === '' ? this.renderLeadingWithoutLabel() :
             this.renderLeadingWithLabel();
     }
-    /** @soyTemplate */
     renderLeadingWithoutLabel() {
         return html `
       <span class="md3-segmented-button__leading" aria-hidden="true">
@@ -158,7 +136,6 @@ export class SegmentedButton extends ActionElement {
       </span>
     `;
     }
-    /** @soyTemplate */
     renderLeadingWithLabel() {
         return html `
       <span class="md3-segmented-button__leading" aria-hidden="true">
@@ -173,57 +150,47 @@ export class SegmentedButton extends ActionElement {
       </span>
     `;
     }
-    /** @soyTemplate */
     renderLabel() {
         return html `
       <span class="md3-segmented-button__label-text">${this.label}</span>
     `;
     }
-    /** @soyTemplate */
     renderTouchTarget() {
         return html `<span class="md3-segmented-button__touch"></span>`;
     }
 }
+_a = SegmentedButton;
+(() => {
+    requestUpdateOnAriaChange(_a);
+})();
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
+    property({ type: Boolean })
 ], SegmentedButton.prototype, "disabled", void 0);
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
+    property({ type: Boolean })
 ], SegmentedButton.prototype, "selected", void 0);
 __decorate([
-    property({ type: String }),
-    __metadata("design:type", Object)
+    property()
 ], SegmentedButton.prototype, "label", void 0);
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
+    property({ type: Boolean })
 ], SegmentedButton.prototype, "noCheckmark", void 0);
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
+    property({ type: Boolean })
 ], SegmentedButton.prototype, "hasIcon", void 0);
 __decorate([
-    ariaProperty // tslint:disable-line:no-new-decorators
-    ,
-    property({ type: String, attribute: 'aria-label' }),
-    __metadata("design:type", String)
-], SegmentedButton.prototype, "ariaLabel", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", String)
+    state()
 ], SegmentedButton.prototype, "animState", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", Object)
+    state()
 ], SegmentedButton.prototype, "showFocusRing", void 0);
 __decorate([
-    queryAssignedElements({ slot: 'icon', flatten: true }),
-    __metadata("design:type", Array)
+    state()
+], SegmentedButton.prototype, "showRipple", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'icon', flatten: true })
 ], SegmentedButton.prototype, "iconElement", void 0);
 __decorate([
-    query('md-ripple'),
-    __metadata("design:type", MdRipple)
+    queryAsync('md-ripple')
 ], SegmentedButton.prototype, "ripple", void 0);
 //# sourceMappingURL=segmented-button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"segmented-button.js","sourceRoot":"","sources":["segmented-button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/focus-ring.js';\n\nimport {html, PropertyValues, TemplateResult} from 'lit';\nimport {property, query, queryAssignedElements, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\nimport {ActionElement, BeginPressConfig, EndPressConfig} from '../../actionelement/action-element.js';\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {MdRipple} from '../../ripple/ripple.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 * @soyCompatible\n */\nexport class SegmentedButton extends ActionElement {\n  @property({type: Boolean}) disabled = false;\n  @property({type: Boolean}) selected = false;\n  @property({type: String}) label = '';\n  @property({type: Boolean}) noCheckmark = false;\n  @property({type: Boolean}) hasIcon = false;\n\n  /** @soyPrefixAttribute */\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({type: String, attribute: 'aria-label'})\n  override ariaLabel!: string;\n\n  @state() protected animState: string = '';\n  @state() protected showFocusRing = false;\n  @queryAssignedElements({slot: 'icon', flatten: true})\n  protected iconElement!: HTMLElement[];\n  @query('md-ripple') ripple!: MdRipple;\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  override beginPress({positionEvent}: BeginPressConfig) {\n    // TODO(b/261201805): connect to ripple\n  }\n\n  override endPress(options: EndPressConfig) {\n    // TODO(b/261201805): connect to ripple\n    super.endPress(options);\n    if (!options.cancelled) {\n      const event = new Event(\n          'segmented-button-interaction', {bubbles: true, composed: true});\n      this.dispatchEvent(event);\n    }\n  }\n\n  override handlePointerDown(e: PointerEvent) {\n    super.handlePointerDown(e);\n    pointerPress();\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  override handlePointerUp(e: PointerEvent) {\n    super.handlePointerUp(e);\n  }\n\n  protected handlePointerEnter(e: PointerEvent) {\n    this.ripple.handlePointerenter(e);\n  }\n\n  override handlePointerLeave(e: PointerEvent) {\n    super.handlePointerLeave(e);\n    this.ripple.handlePointerleave(e);\n  }\n\n  protected handleFocus() {\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handleBlur() {\n    this.showFocusRing = false;\n  }\n\n  /** @soyTemplate */\n  override render(): TemplateResult {\n    return html`\n      <button\n        tabindex=\"${this.disabled ? '-1' : '0'}\"\n        aria-label=\"${ifDefined(this.ariaLabel)}\"\n        aria-pressed=${this.selected}\n        ?disabled=${this.disabled}\n        @focus=\"${this.handleFocus}\"\n        @blur=\"${this.handleBlur}\"\n        @pointerdown=\"${this.handlePointerDown}\"\n        @pointerup=\"${this.handlePointerUp}\"\n        @pointercancel=\"${this.handlePointerCancel}\"\n        @pointerleave=\"${this.handlePointerLeave}\"\n        @pointerenter=\"${this.handlePointerEnter}\"\n        @click=\"${this.handleClick}\"\n        @contextmenu=\"${this.handleContextMenu}\"\n        class=\"md3-segmented-button ${classMap(this.getRenderClasses())}\">\n        ${this.renderFocusRing()}\n        ${this.renderRipple()}\n        ${this.renderOutline()}\n        ${this.renderLeading()}\n        ${this.renderLabel()}\n        ${this.renderTouchTarget()}\n      </button>\n    `;\n  }\n\n  /** @soyTemplate */\n  protected getRenderClasses(): ClassInfo {\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  /** @soyTemplate */\n  protected renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring .visible=\"${\n        this.showFocusRing}\" class=\"md3-segmented-button__focus-ring\"></md-focus-ring>`;\n  }\n\n  /** @soyTemplate */\n  protected renderRipple(): TemplateResult|string {\n    return html`<md-ripple ?disabled=\"${\n        this.disabled}\" class=\"md3-segmented-button__ripple\"> </md-ripple>`;\n  }\n\n  /** @soyTemplate */\n  protected renderOutline(): TemplateResult {\n    return html``;\n  }\n\n  /** @soyTemplate */\n  protected renderLeading(): TemplateResult {\n    return this.label === '' ? this.renderLeadingWithoutLabel() :\n                               this.renderLeadingWithLabel();\n  }\n\n  /** @soyTemplate */\n  protected renderLeadingWithoutLabel(): TemplateResult {\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  /** @soyTemplate */\n  protected renderLeadingWithLabel(): TemplateResult {\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  /** @soyTemplate */\n  protected renderLabel(): TemplateResult {\n    return html`\n      <span class=\"md3-segmented-button__label-text\">${this.label}</span>\n    `;\n  }\n\n  /** @soyTemplate */\n  protected renderTouchTarget(): TemplateResult {\n    return html`<span class=\"md3-segmented-button__touch\"></span>`;\n  }\n}\n"]}
+{"version":3,"file":"segmented-button.js","sourceRoot":"","sources":["segmented-button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/focus-ring.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, queryAssignedElements, queryAsync, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {when} from 'lit/directives/when.js';\n\nimport {requestUpdateOnAriaChange} from '../../aria/delegate.js';\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\nimport {ARIAMixinStrict} from '../../types/aria.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(this);\n  }\n\n  @property({type: Boolean}) disabled = false;\n  @property({type: Boolean}) selected = false;\n  @property() label = '';\n  @property({type: Boolean}) noCheckmark = false;\n  @property({type: Boolean}) hasIcon = false;\n\n  @state() protected animState = '';\n  @state() protected showFocusRing = false;\n  @state() protected showRipple = false;\n  @queryAssignedElements({slot: 'icon', flatten: true})\n  protected iconElement!: HTMLElement[];\n  @queryAsync('md-ripple') protected ripple!: Promise<MdRipple|null>;\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  handleClick(e: MouseEvent) {\n    const event = new Event(\n        'segmented-button-interaction', {bubbles: true, composed: true});\n    this.dispatchEvent(event);\n  }\n\n  handlePointerDown(e: PointerEvent) {\n    pointerPress();\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handleFocus() {\n    this.showFocusRing = shouldShowStrongFocus();\n  }\n\n  protected handleBlur() {\n    this.showFocusRing = false;\n  }\n\n  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        @focus=\"${this.handleFocus}\"\n        @blur=\"${this.handleBlur}\"\n        @pointerdown=\"${this.handlePointerDown}\"\n        @click=\"${this.handleClick}\"\n        class=\"md3-segmented-button ${classMap(this.getRenderClasses())}\"\n        ${ripple(this.getRipple)}>\n        ${this.renderFocusRing()}\n        ${when(this.showRipple, this.renderRipple)}\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 renderFocusRing() {\n    return html`<md-focus-ring .visible=\"${\n        this.showFocusRing}\" class=\"md3-segmented-button__focus-ring\"></md-focus-ring>`;\n  }\n\n  protected readonly getRipple = () => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  protected renderRipple = () => {\n    return html`<md-ripple ?disabled=\"${\n        this.disabled}\" class=\"md3-segmented-button__ripple\"> </md-ripple>`;\n  };\n\n  protected renderOutline() {\n    return html``;\n  }\n\n  protected renderLeading() {\n    return this.label === '' ? this.renderLeadingWithoutLabel() :\n                               this.renderLeadingWithLabel();\n  }\n\n  protected 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  protected 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  protected renderLabel() {\n    return html`\n      <span class=\"md3-segmented-button__label-text\">${this.label}</span>\n    `;\n  }\n\n  protected renderTouchTarget() {\n    return html`<span class=\"md3-segmented-button__touch\"></span>`;\n  }\n}\n"]}

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

@@ -12,7 +12,6 @@ declare global {
 /**
  * MdOutlinedSegmentedButton is the custom element for the Material
  * Design outlined segmented button component.
- * @soyCompatible
  * @final
  * @suppress {visibility}
  */

package/segmentedbutton/outlined-segmented-button.js

@@ -11,7 +11,6 @@ import { styles as sharedStyles } from './lib/shared-styles.css.js';
 /**
  * MdOutlinedSegmentedButton is the custom element for the Material
  * Design outlined segmented button component.
- * @soyCompatible
  * @final
  * @suppress {visibility}
  */

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

@@ -1 +1 @@
-{"version":3,"file":"outlined-segmented-button.js","sourceRoot":"","sources":["outlined-segmented-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,uBAAuB,EAAC,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;;GAMG;AAEI,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,uBAAuB;;AACpD,gCAAM,GAAG,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAD7C,yBAAyB;IADrC,aAAa,CAAC,8BAA8B,CAAC;GACjC,yBAAyB,CAErC;SAFY,yBAAyB","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 {OutlinedSegmentedButton} from './lib/outlined-segmented-button.js';\nimport {styles as outlinedStyles} from './lib/outlined-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-segmented-button': MdOutlinedSegmentedButton;\n  }\n}\n\n/**\n * MdOutlinedSegmentedButton is the custom element for the Material\n * Design outlined segmented button component.\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-segmented-button')\nexport class MdOutlinedSegmentedButton extends OutlinedSegmentedButton {\n  static override styles = [sharedStyles, outlinedStyles];\n}\n"]}
+{"version":3,"file":"outlined-segmented-button.js","sourceRoot":"","sources":["outlined-segmented-button.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,uBAAuB,EAAC,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;GAKG;AAEI,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,uBAAuB;;AACpD,gCAAM,GAAG,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAD7C,yBAAyB;IADrC,aAAa,CAAC,8BAA8B,CAAC;GACjC,yBAAyB,CAErC;SAFY,yBAAyB","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 {OutlinedSegmentedButton} from './lib/outlined-segmented-button.js';\nimport {styles as outlinedStyles} from './lib/outlined-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-segmented-button': MdOutlinedSegmentedButton;\n  }\n}\n\n/**\n * MdOutlinedSegmentedButton is the custom element for the Material\n * Design outlined segmented button component.\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-segmented-button')\nexport class MdOutlinedSegmentedButton extends OutlinedSegmentedButton {\n  static override styles = [sharedStyles, outlinedStyles];\n}\n"]}

package/segmentedbuttonset/lib/outlined-segmented-button-set.d.ts

@@ -3,10 +3,12 @@
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { ClassInfo } from 'lit/directives/class-map.js';
 import { SegmentedButtonSet } from './segmented-button-set.js';
-/** @soyCompatible */
+/**
+ * TODO(b/265346443): add docs
+ */
 export declare class OutlinedSegmentedButtonSet extends SegmentedButtonSet {
-    /** @soyTemplate */
-    protected getRenderClasses(): ClassInfo;
+    protected getRenderClasses(): {
+        'md3-segmented-button-set--outlined': boolean;
+    };
 }

package/segmentedbuttonset/lib/outlined-segmented-button-set.js

@@ -4,9 +4,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 import { SegmentedButtonSet } from './segmented-button-set.js';
-/** @soyCompatible */
+/**
+ * TODO(b/265346443): add docs
+ */
 export class OutlinedSegmentedButtonSet extends SegmentedButtonSet {
-    /** @soyTemplate */
     getRenderClasses() {
         return {
             ...super.getRenderClasses(),

package/segmentedbuttonset/lib/outlined-segmented-button-set.js.map

@@ -1 +1 @@
-{"version":3,"file":"outlined-segmented-button-set.js","sourceRoot":"","sources":["outlined-segmented-button-set.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EAAC,kBAAkB,EAAC,MAAM,2BAA2B,CAAC;AAE7D,qBAAqB;AACrB,MAAM,OAAO,0BAA2B,SAAQ,kBAAkB;IAChE,mBAAmB;IACA,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,oCAAoC,EAAE,IAAI;SAC3C,CAAC;IACJ,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {ClassInfo} from 'lit/directives/class-map.js';\n\nimport {SegmentedButtonSet} from './segmented-button-set.js';\n\n/** @soyCompatible */\nexport class OutlinedSegmentedButtonSet extends SegmentedButtonSet {\n  /** @soyTemplate */\n  protected override getRenderClasses(): ClassInfo {\n    return {\n      ...super.getRenderClasses(),\n      'md3-segmented-button-set--outlined': true,\n    };\n  }\n}"]}
+{"version":3,"file":"outlined-segmented-button-set.js","sourceRoot":"","sources":["outlined-segmented-button-set.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,kBAAkB,EAAC,MAAM,2BAA2B,CAAC;AAE7D;;GAEG;AACH,MAAM,OAAO,0BAA2B,SAAQ,kBAAkB;IAC7C,gBAAgB;QACjC,OAAO;YACL,GAAG,KAAK,CAAC,gBAAgB,EAAE;YAC3B,oCAAoC,EAAE,IAAI;SAC3C,CAAC;IACJ,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {SegmentedButtonSet} from './segmented-button-set.js';\n\n/**\n * TODO(b/265346443): add docs\n */\nexport class OutlinedSegmentedButtonSet extends SegmentedButtonSet {\n  protected override getRenderClasses() {\n    return {\n      ...super.getRenderClasses(),\n      'md3-segmented-button-set--outlined': true,\n    };\n  }\n}\n"]}

package/segmentedbuttonset/lib/segmented-button-set.d.ts

@@ -3,19 +3,15 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { LitElement, TemplateResult } from 'lit';
-import { ClassInfo } from 'lit/directives/class-map.js';
+import { LitElement } from 'lit';
 import { SegmentedButton } from '../../segmentedbutton/lib/segmented-button.js';
 /**
  * SegmentedButtonSet is the parent component for two or more
  * `SegmentedButton` components. **Only** `SegmentedButton` components may be
  * used as children.
- * @soyCompatible
  */
 export declare class SegmentedButtonSet extends LitElement {
     multiselect: boolean;
-    /** @soyPrefixAttribute */
-    ariaLabel: string;
     buttons: SegmentedButton[];
     getButtonDisabled(index: number): boolean;
     setButtonDisabled(index: number, disabled: boolean): void;
@@ -25,8 +21,6 @@ export declare class SegmentedButtonSet extends LitElement {
     private toggleSelection;
     private indexOutOfBounds;
     private emitSelectionEvent;
-    /** @soyTemplate */
-    render(): TemplateResult;
-    /** @soyTemplate */
-    protected getRenderClasses(): ClassInfo;
+    render(): import("lit-html").TemplateResult<1>;
+    protected getRenderClasses(): {};
 }

package/segmentedbuttonset/lib/segmented-button-set.js

@@ -3,17 +3,15 @@
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { __decorate, __metadata } from "tslib";
-import { html, LitElement } from 'lit';
+var _a;
+import { __decorate } from "tslib";
+import { html, LitElement, nothing } from 'lit';
 import { property, queryAssignedElements } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { ariaProperty } from '../../decorators/aria-property.js';
+import { requestUpdateOnAriaChange } from '../../aria/delegate.js';
 /**
  * SegmentedButtonSet is the parent component for two or more
  * `SegmentedButton` components. **Only** `SegmentedButton` components may be
  * used as children.
- * @soyCompatible
  */
 export class SegmentedButtonSet extends LitElement {
     constructor() {
@@ -82,35 +80,31 @@ export class SegmentedButtonSet extends LitElement {
             composed: true
         }));
     }
-    /** @soyTemplate */
     render() {
+        // Needed for closure conformance
+        const { ariaLabel } = this;
         return html `
      <span
        role="group"
        @segmented-button-interaction="${this.handleSegmentedButtonInteraction}"
-       aria-label="${ifDefined(this.ariaLabel)}"
-       class="md3-segmented-button-set ${classMap(this.getRenderClasses())}">
+       aria-label=${ariaLabel || nothing}
+       class="md3-segmented-button-set">
        <slot></slot>
      </span>
      `;
     }
-    /** @soyTemplate */
     getRenderClasses() {
         return {};
     }
 }
+_a = SegmentedButtonSet;
+(() => {
+    requestUpdateOnAriaChange(_a);
+})();
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
+    property({ type: Boolean })
 ], SegmentedButtonSet.prototype, "multiselect", void 0);
 __decorate([
-    ariaProperty // tslint:disable-line:no-new-decorators
-    ,
-    property({ type: String, attribute: 'aria-label' }),
-    __metadata("design:type", String)
-], SegmentedButtonSet.prototype, "ariaLabel", void 0);
-__decorate([
-    queryAssignedElements({ flatten: true }),
-    __metadata("design:type", Array)
+    queryAssignedElements({ flatten: true })
 ], SegmentedButtonSet.prototype, "buttons", void 0);
 //# sourceMappingURL=segmented-button-set.js.map

package/segmentedbuttonset/lib/segmented-button-set.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-button-set.js","sourceRoot":"","sources":["segmented-button-set.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAiB,MAAM,KAAK,CAAC;AACrD,OAAO,EAAC,QAAQ,EAAE,qBAAqB,EAAC,MAAM,mBAAmB,CAAC;AAClE,OAAO,EAAY,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAC,SAAS,EAAC,MAAM,8BAA8B,CAAC;AAEvD,OAAO,EAAC,YAAY,EAAC,MAAM,mCAAmC,CAAC;AAG/D;;;;;GAKG;AACH,MAAM,OAAO,kBAAmB,SAAQ,UAAU;IAAlD;;QAC6B,gBAAW,GAAG,KAAK,CAAC;IA2FjD,CAAC;IAlFC,iBAAiB,CAAC,KAAa;QAC7B,IAAI,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC;YAAE,OAAO,KAAK,CAAC;QAC/C,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC;IACtC,CAAC;IAED,iBAAiB,CAAC,KAAa,EAAE,QAAiB;QAChD,IAAI,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC;YAAE,OAAO;QACzC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC1C,CAAC;IAED,iBAAiB,CAAC,KAAa;QAC7B,IAAI,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC;YAAE,OAAO,KAAK,CAAC;QAC/C,OAAO,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC;IACtC,CAAC;IAED,iBAAiB,CAAC,KAAa,EAAE,QAAiB;QAChD,8BAA8B;QAC9B,IAAI,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC;YAAE,OAAO;QACzC,2BAA2B;QAC3B,IAAI,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC;YAAE,OAAO;QAE1C,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,GAAG,QAAQ,CAAC;YACxC,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;YAC/B,OAAO;SACR;QAED,wDAAwD;QACxD,IAAI,CAAC,QAAQ;YAAE,OAAO;QAEtB,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAC;QACpC,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC;QAC/B,gDAAgD;QAChD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YAC5C,IAAI,CAAC,KAAK,KAAK;gBAAE,SAAS;YAC1B,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,QAAQ,GAAG,KAAK,CAAC;SAClC;IACH,CAAC;IAEO,gCAAgC,CAAC,CAAc;QACrD,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,MAAyB,CAAC,CAAC;QAChE,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC;IAEO,eAAe,CAAC,KAAa;QACnC,IAAI,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC;YAAE,OAAO;QACzC,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC/D,CAAC;IAEO,gBAAgB,CAAC,KAAa;QACpC,OAAO,KAAK,GAAG,CAAC,IAAI,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;IACnD,CAAC;IAEO,kBAAkB,CAAC,KAAa;QACtC,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,gCAAgC,EAAE;YACnE,MAAM,EAAE;gBACN,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;gBAC3B,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,QAAQ;gBACtC,KAAK;aACN;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC,CAAC;IACN,CAAC;IAED,mBAAmB;IACV,MAAM;QACb,OAAO,IAAI,CAAA;;;wCAGyB,IAAI,CAAC,gCAAgC;qBACxD,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC;yCACL,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;;;MAGpE,CAAC;IACL,CAAC;IAED,mBAAmB;IACT,gBAAgB;QACxB,OAAO,EAAE,CAAC;IACZ,CAAC;CACF;AA3FC;IAAC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;;uDAAqB;AAG/C;IAAC,YAAY,CAAE,wCAAwC;;IACtD,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAC,CAAC;;qDACtB;AAE5B;IAAC,qBAAqB,CAAC,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC;;mDAA6B","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, TemplateResult} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\n\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {SegmentedButton} from '../../segmentedbutton/lib/segmented-button.js';\n\n/**\n * SegmentedButtonSet is the parent component for two or more\n * `SegmentedButton` components. **Only** `SegmentedButton` components may be\n * used as children.\n * @soyCompatible\n */\nexport class SegmentedButtonSet extends LitElement {\n  @property({type: Boolean}) multiselect = false;\n\n  /** @soyPrefixAttribute */\n  @ariaProperty  // tslint:disable-line:no-new-decorators\n  @property({type: String, attribute: 'aria-label'})\n  override ariaLabel!: string;\n\n  @queryAssignedElements({flatten: true}) buttons!: SegmentedButton[];\n\n  getButtonDisabled(index: number): boolean {\n    if (this.indexOutOfBounds(index)) return false;\n    return this.buttons[index].disabled;\n  }\n\n  setButtonDisabled(index: number, disabled: boolean) {\n    if (this.indexOutOfBounds(index)) return;\n    this.buttons[index].disabled = disabled;\n  }\n\n  getButtonSelected(index: number): boolean {\n    if (this.indexOutOfBounds(index)) return false;\n    return this.buttons[index].selected;\n  }\n\n  setButtonSelected(index: number, selected: boolean) {\n    // Ignore out-of-index values.\n    if (this.indexOutOfBounds(index)) return;\n    // Ignore disabled buttons.\n    if (this.getButtonDisabled(index)) return;\n\n    if (this.multiselect) {\n      this.buttons[index].selected = selected;\n      this.emitSelectionEvent(index);\n      return;\n    }\n\n    // Single-select segmented buttons are not unselectable.\n    if (!selected) return;\n\n    this.buttons[index].selected = true;\n    this.emitSelectionEvent(index);\n    // Deselect all other buttons for single-select.\n    for (let i = 0; i < this.buttons.length; i++) {\n      if (i === index) continue;\n      this.buttons[i].selected = false;\n    }\n  }\n\n  private handleSegmentedButtonInteraction(e: CustomEvent) {\n    const index = this.buttons.indexOf(e.target as SegmentedButton);\n    this.toggleSelection(index);\n  }\n\n  private toggleSelection(index: number) {\n    if (this.indexOutOfBounds(index)) return;\n    this.setButtonSelected(index, !this.buttons[index].selected);\n  }\n\n  private indexOutOfBounds(index: number): boolean {\n    return index < 0 || index >= this.buttons.length;\n  }\n\n  private emitSelectionEvent(index: number) {\n    this.dispatchEvent(new CustomEvent('segmented-button-set-selection', {\n      detail: {\n        button: this.buttons[index],\n        selected: this.buttons[index].selected,\n        index,\n      },\n      bubbles: true,\n      composed: true\n    }));\n  }\n\n  /** @soyTemplate */\n  override render(): TemplateResult {\n    return html`\n     <span\n       role=\"group\"\n       @segmented-button-interaction=\"${this.handleSegmentedButtonInteraction}\"\n       aria-label=\"${ifDefined(this.ariaLabel)}\"\n       class=\"md3-segmented-button-set ${classMap(this.getRenderClasses())}\">\n       <slot></slot>\n     </span>\n     `;\n  }\n\n  /** @soyTemplate */\n  protected getRenderClasses(): ClassInfo {\n    return {};\n  }\n}\n"]}
+{"version":3,"file":"segmented-button-set.js","sourceRoot":"","sources":["segmented-button-set.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, nothing} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\n\nimport {requestUpdateOnAriaChange} from '../../aria/delegate.js';\nimport {SegmentedButton} from '../../segmentedbutton/lib/segmented-button.js';\nimport {ARIAMixinStrict} from '../../types/aria.js';\n\n/**\n * SegmentedButtonSet is the parent component for two or more\n * `SegmentedButton` components. **Only** `SegmentedButton` components may be\n * used as children.\n */\nexport class SegmentedButtonSet extends LitElement {\n  static {\n    requestUpdateOnAriaChange(this);\n  }\n\n  @property({type: Boolean}) multiselect = false;\n\n  @queryAssignedElements({flatten: true}) buttons!: SegmentedButton[];\n\n  getButtonDisabled(index: number): boolean {\n    if (this.indexOutOfBounds(index)) return false;\n    return this.buttons[index].disabled;\n  }\n\n  setButtonDisabled(index: number, disabled: boolean) {\n    if (this.indexOutOfBounds(index)) return;\n    this.buttons[index].disabled = disabled;\n  }\n\n  getButtonSelected(index: number): boolean {\n    if (this.indexOutOfBounds(index)) return false;\n    return this.buttons[index].selected;\n  }\n\n  setButtonSelected(index: number, selected: boolean) {\n    // Ignore out-of-index values.\n    if (this.indexOutOfBounds(index)) return;\n    // Ignore disabled buttons.\n    if (this.getButtonDisabled(index)) return;\n\n    if (this.multiselect) {\n      this.buttons[index].selected = selected;\n      this.emitSelectionEvent(index);\n      return;\n    }\n\n    // Single-select segmented buttons are not unselectable.\n    if (!selected) return;\n\n    this.buttons[index].selected = true;\n    this.emitSelectionEvent(index);\n    // Deselect all other buttons for single-select.\n    for (let i = 0; i < this.buttons.length; i++) {\n      if (i === index) continue;\n      this.buttons[i].selected = false;\n    }\n  }\n\n  private handleSegmentedButtonInteraction(e: CustomEvent) {\n    const index = this.buttons.indexOf(e.target as SegmentedButton);\n    this.toggleSelection(index);\n  }\n\n  private toggleSelection(index: number) {\n    if (this.indexOutOfBounds(index)) return;\n    this.setButtonSelected(index, !this.buttons[index].selected);\n  }\n\n  private indexOutOfBounds(index: number): boolean {\n    return index < 0 || index >= this.buttons.length;\n  }\n\n  private emitSelectionEvent(index: number) {\n    this.dispatchEvent(new CustomEvent('segmented-button-set-selection', {\n      detail: {\n        button: this.buttons[index],\n        selected: this.buttons[index].selected,\n        index,\n      },\n      bubbles: true,\n      composed: true\n    }));\n  }\n\n  override render() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n     <span\n       role=\"group\"\n       @segmented-button-interaction=\"${this.handleSegmentedButtonInteraction}\"\n       aria-label=${ariaLabel || nothing}\n       class=\"md3-segmented-button-set\">\n       <slot></slot>\n     </span>\n     `;\n  }\n\n  protected getRenderClasses() {\n    return {};\n  }\n}\n"]}

package/segmentedbuttonset/outlined-segmented-button-set.d.ts

@@ -12,7 +12,6 @@ declare global {
 /**
  * MdOutlinedSegmentedButtonSet is the custom element for the Material
  * Design outlined segmented button set component.
- * @soyCompatible
  * @final
  * @suppress {visibility}
  */

package/segmentedbuttonset/outlined-segmented-button-set.js

@@ -11,7 +11,6 @@ import { styles as sharedStyles } from './lib/shared-styles.css.js';
 /**
  * MdOutlinedSegmentedButtonSet is the custom element for the Material
  * Design outlined segmented button set component.
- * @soyCompatible
  * @final
  * @suppress {visibility}
  */

package/segmentedbuttonset/outlined-segmented-button-set.js.map

@@ -1 +1 @@
-{"version":3,"file":"outlined-segmented-button-set.js","sourceRoot":"","sources":["outlined-segmented-button-set.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,0BAA0B,EAAC,MAAM,wCAAwC,CAAC;AAClF,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;;GAMG;AAEI,IAAM,4BAA4B,GAAlC,MAAM,4BAA6B,SAAQ,0BAA0B;;AAC1D,mCAAM,GAAG,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAD7C,4BAA4B;IADxC,aAAa,CAAC,kCAAkC,CAAC;GACrC,4BAA4B,CAExC;SAFY,4BAA4B","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {OutlinedSegmentedButtonSet} from './lib/outlined-segmented-button-set.js';\nimport {styles as outlinedStyles} from './lib/outlined-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-segmented-button-set': MdOutlinedSegmentedButtonSet;\n  }\n}\n\n/**\n * MdOutlinedSegmentedButtonSet is the custom element for the Material\n * Design outlined segmented button set component.\n * @soyCompatible\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-segmented-button-set')\nexport class MdOutlinedSegmentedButtonSet extends OutlinedSegmentedButtonSet {\n  static override styles = [sharedStyles, outlinedStyles];\n}\n"]}
+{"version":3,"file":"outlined-segmented-button-set.js","sourceRoot":"","sources":["outlined-segmented-button-set.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,0BAA0B,EAAC,MAAM,wCAAwC,CAAC;AAClF,OAAO,EAAC,MAAM,IAAI,cAAc,EAAC,MAAM,8BAA8B,CAAC;AACtE,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;GAKG;AAEI,IAAM,4BAA4B,GAAlC,MAAM,4BAA6B,SAAQ,0BAA0B;;AAC1D,mCAAM,GAAG,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AAD7C,4BAA4B;IADxC,aAAa,CAAC,kCAAkC,CAAC;GACrC,4BAA4B,CAExC;SAFY,4BAA4B","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {OutlinedSegmentedButtonSet} from './lib/outlined-segmented-button-set.js';\nimport {styles as outlinedStyles} from './lib/outlined-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-outlined-segmented-button-set': MdOutlinedSegmentedButtonSet;\n  }\n}\n\n/**\n * MdOutlinedSegmentedButtonSet is the custom element for the Material\n * Design outlined segmented button set component.\n * @final\n * @suppress {visibility}\n */\n@customElement('md-outlined-segmented-button-set')\nexport class MdOutlinedSegmentedButtonSet extends OutlinedSegmentedButtonSet {\n  static override styles = [sharedStyles, outlinedStyles];\n}\n"]}

package/select/_filled-select.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/filled-select' show theme;

package/select/_outlined-select.scss

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/outlined-select' show theme;

package/select/filled-select.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { FilledSelect } from './lib/filled-select.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'md-filled-select': MdFilledSelect;
+    }
+}
+/**
+ * @summary
+ * Select menus display a list of choices on temporary surfaces and display the
+ * currently selected menu item above the menu.
+ *
+ * @description
+ * The select component allows users to choose a value from a fixed list of
+ * available options. Composed of an interactive anchor button and a menu, it is
+ * analogous to the native HTML `<select>` element. This is the "filled"
+ * variant.
+ *
+ * @example
+ * ```html
+ * <md-filled-select label="fruits">
+ *   <!-- An empty selected option will give select an "un-filled" state -->
+ *   <md-select-option selected></md-select-option>
+ *   <md-select-option value="apple" headline="Apple"></md-select-option>
+ *   <md-select-option value="banana" headline="Banana"></md-select-option>
+ *   <md-select-option value="kiwi" headline="Kiwi"></md-select-option>
+ *   <md-select-option value="orange" headline="Orange"></md-select-option>
+ *   <md-select-option value="tomato" headline="Tomato"></md-select-option>
+ * </md-filled-select>
+ * ```
+ *
+ * @final
+ * @suppress {visibility}
+ */
+export declare class MdFilledSelect extends FilledSelect {
+    static styles: import("lit").CSSResult[];
+}

package/select/filled-select.js

@@ -0,0 +1,46 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { styles as filledForcedColorsStyles } from './lib/filled-forced-colors-styles.css.js';
+import { FilledSelect } from './lib/filled-select.js';
+import { styles } from './lib/filled-select-styles.css.js';
+import { styles as sharedStyles } from './lib/shared-styles.css.js';
+/**
+ * @summary
+ * Select menus display a list of choices on temporary surfaces and display the
+ * currently selected menu item above the menu.
+ *
+ * @description
+ * The select component allows users to choose a value from a fixed list of
+ * available options. Composed of an interactive anchor button and a menu, it is
+ * analogous to the native HTML `<select>` element. This is the "filled"
+ * variant.
+ *
+ * @example
+ * ```html
+ * <md-filled-select label="fruits">
+ *   <!-- An empty selected option will give select an "un-filled" state -->
+ *   <md-select-option selected></md-select-option>
+ *   <md-select-option value="apple" headline="Apple"></md-select-option>
+ *   <md-select-option value="banana" headline="Banana"></md-select-option>
+ *   <md-select-option value="kiwi" headline="Kiwi"></md-select-option>
+ *   <md-select-option value="orange" headline="Orange"></md-select-option>
+ *   <md-select-option value="tomato" headline="Tomato"></md-select-option>
+ * </md-filled-select>
+ * ```
+ *
+ * @final
+ * @suppress {visibility}
+ */
+let MdFilledSelect = class MdFilledSelect extends FilledSelect {
+};
+MdFilledSelect.styles = [sharedStyles, styles, filledForcedColorsStyles];
+MdFilledSelect = __decorate([
+    customElement('md-filled-select')
+], MdFilledSelect);
+export { MdFilledSelect };
+//# sourceMappingURL=filled-select.js.map

package/select/filled-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filled-select.js","sourceRoot":"","sources":["filled-select.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,MAAM,IAAI,wBAAwB,EAAC,MAAM,0CAA0C,CAAC;AAC5F,OAAO,EAAC,YAAY,EAAC,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAC,MAAM,EAAC,MAAM,mCAAmC,CAAC;AACzD,OAAO,EAAC,MAAM,IAAI,YAAY,EAAC,MAAM,4BAA4B,CAAC;AAQlE;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,YAAY;;AAC9B,qBAAM,GAAG,CAAC,YAAY,EAAE,MAAM,EAAE,wBAAwB,CAAC,CAAC;AAD/D,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAE1B;SAFY,cAAc","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {styles as filledForcedColorsStyles} from './lib/filled-forced-colors-styles.css.js';\nimport {FilledSelect} from './lib/filled-select.js';\nimport {styles} from './lib/filled-select-styles.css.js';\nimport {styles as sharedStyles} from './lib/shared-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-filled-select': MdFilledSelect;\n  }\n}\n\n/**\n * @summary\n * Select menus display a list of choices on temporary surfaces and display the\n * currently selected menu item above the menu.\n *\n * @description\n * The select component allows users to choose a value from a fixed list of\n * available options. Composed of an interactive anchor button and a menu, it is\n * analogous to the native HTML `<select>` element. This is the \"filled\"\n * variant.\n *\n * @example\n * ```html\n * <md-filled-select label=\"fruits\">\n *   <!-- An empty selected option will give select an \"un-filled\" state -->\n *   <md-select-option selected></md-select-option>\n *   <md-select-option value=\"apple\" headline=\"Apple\"></md-select-option>\n *   <md-select-option value=\"banana\" headline=\"Banana\"></md-select-option>\n *   <md-select-option value=\"kiwi\" headline=\"Kiwi\"></md-select-option>\n *   <md-select-option value=\"orange\" headline=\"Orange\"></md-select-option>\n *   <md-select-option value=\"tomato\" headline=\"Tomato\"></md-select-option>\n * </md-filled-select>\n * ```\n *\n * @final\n * @suppress {visibility}\n */\n@customElement('md-filled-select')\nexport class MdFilledSelect extends FilledSelect {\n  static override styles = [sharedStyles, styles, filledForcedColorsStyles];\n}\n"]}