@material/web 1.1.1 → 1.1.2-nightly.043bbad.0

package/labs/navigationbar/internal/navigation-bar.d.ts

@@ -8,7 +8,7 @@ import { LitElement, PropertyValues } from 'lit';
 import { NavigationTab } from '../../navigationtab/internal/navigation-tab.js';
 import { NavigationBarState } from './state.js';
 /**
- * TODO(b/265346501): add docs
+ * b/265346501 - add docs
  *
  * @fires navigation-bar-activated {CustomEvent<tab: NavigationTab, activeIndex: number>}
  * Dispatched whenever the `activeIndex` changes. --bubbles --composed

package/labs/navigationbar/internal/navigation-bar.js

@@ -10,7 +10,7 @@ import { property, queryAssignedElements } from 'lit/decorators.js';
 import { requestUpdateOnAriaChange } from '../../../internal/aria/delegate.js';
 import { isRtl } from '../../../internal/controller/is-rtl.js';
 /**
- * TODO(b/265346501): add docs
+ * b/265346501 - add docs
  *
  * @fires navigation-bar-activated {CustomEvent<tab: NavigationTab, activeIndex: number>}
  * Dispatched whenever the `activeIndex` changes. --bubbles --composed

package/labs/navigationbar/internal/navigation-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-bar.js","sourceRoot":"","sources":["navigation-bar.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 '../../../elevation/elevation.js';\n\nimport {html, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../../internal/aria/delegate.js';\nimport {isRtl} from '../../../internal/controller/is-rtl.js';\nimport {NavigationTab} from '../../navigationtab/internal/navigation-tab.js';\n\nimport {NavigationTabInteractionEvent} from './constants.js';\nimport {NavigationBarState} from './state.js';\n\n/**\n * TODO(b/265346501): add docs\n *\n * @fires navigation-bar-activated {CustomEvent<tab: NavigationTab, activeIndex: number>}\n * Dispatched whenever the `activeIndex` changes. --bubbles --composed\n */\nexport class NavigationBar extends LitElement implements NavigationBarState {\n  static {\n    requestUpdateOnAriaChange(NavigationBar);\n  }\n\n  @property({type: Number, attribute: 'active-index'}) activeIndex = 0;\n\n  @property({type: Boolean, attribute: 'hide-inactive-labels'})\n  hideInactiveLabels = false;\n\n  tabs: NavigationTab[] = [];\n\n  @queryAssignedElements({flatten: true})\n  private readonly tabsElement!: NavigationTab[];\n\n  protected override render() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`<div\n      class=\"md3-navigation-bar\"\n      role=\"tablist\"\n      aria-label=${ariaLabel || nothing}\n      @keydown=\"${this.handleKeydown}\"\n      @navigation-tab-interaction=\"${this.handleNavigationTabInteraction}\"\n      @navigation-tab-rendered=${this.handleNavigationTabConnected}\n      ><md-elevation></md-elevation\n      ><div class=\"md3-navigation-bar__tabs-slot-container\"><slot></slot></div\n    ></div>`;\n  }\n\n  protected override updated(changedProperties: PropertyValues<NavigationBar>) {\n    if (changedProperties.has('activeIndex')) {\n      this.onActiveIndexChange(this.activeIndex);\n      this.dispatchEvent(\n        new CustomEvent('navigation-bar-activated', {\n          detail: {\n            tab: this.tabs[this.activeIndex],\n            activeIndex: this.activeIndex,\n          },\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    }\n\n    if (changedProperties.has('hideInactiveLabels')) {\n      this.onHideInactiveLabelsChange(this.hideInactiveLabels);\n    }\n\n    if (changedProperties.has('tabs')) {\n      this.onHideInactiveLabelsChange(this.hideInactiveLabels);\n      this.onActiveIndexChange(this.activeIndex);\n    }\n  }\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n    this.layout();\n  }\n\n  layout() {\n    if (!this.tabsElement) return;\n    const navTabs: NavigationTab[] = [];\n    for (const node of this.tabsElement) {\n      navTabs.push(node);\n    }\n    this.tabs = navTabs;\n  }\n\n  private handleNavigationTabConnected(event: CustomEvent) {\n    const target = event.target as NavigationTab;\n    if (this.tabs.indexOf(target) === -1) {\n      this.layout();\n    }\n  }\n\n  private handleNavigationTabInteraction(event: NavigationTabInteractionEvent) {\n    this.activeIndex = this.tabs.indexOf(event.detail.state as NavigationTab);\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    const key = event.key;\n    const focusedTabIndex = this.tabs.findIndex((tab) => {\n      return tab.matches(':focus-within');\n    });\n    const isRTL = isRtl(this);\n    const maxIndex = this.tabs.length - 1;\n\n    if (key === 'Enter' || key === ' ') {\n      this.activeIndex = focusedTabIndex;\n      return;\n    }\n\n    if (key === 'Home') {\n      this.tabs[0].focus();\n      return;\n    }\n\n    if (key === 'End') {\n      this.tabs[maxIndex].focus();\n      return;\n    }\n\n    const toNextTab =\n      (key === 'ArrowRight' && !isRTL) || (key === 'ArrowLeft' && isRTL);\n    if (toNextTab && focusedTabIndex === maxIndex) {\n      this.tabs[0].focus();\n      return;\n    }\n    if (toNextTab) {\n      this.tabs[focusedTabIndex + 1].focus();\n      return;\n    }\n\n    const toPreviousTab =\n      (key === 'ArrowLeft' && !isRTL) || (key === 'ArrowRight' && isRTL);\n    if (toPreviousTab && focusedTabIndex === 0) {\n      this.tabs[maxIndex].focus();\n      return;\n    }\n    if (toPreviousTab) {\n      this.tabs[focusedTabIndex - 1].focus();\n      return;\n    }\n  }\n\n  private onActiveIndexChange(value: number) {\n    if (!this.tabs[value]) {\n      throw new Error('NavigationBar: activeIndex is out of bounds.');\n    }\n    for (let i = 0; i < this.tabs.length; i++) {\n      this.tabs[i].active = i === value;\n    }\n  }\n\n  private onHideInactiveLabelsChange(value: boolean) {\n    for (const tab of this.tabs) {\n      tab.hideInactiveLabel = value;\n    }\n  }\n}\n"]}
+{"version":3,"file":"navigation-bar.js","sourceRoot":"","sources":["navigation-bar.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 '../../../elevation/elevation.js';\n\nimport {html, LitElement, nothing, PropertyValues} from 'lit';\nimport {property, queryAssignedElements} from 'lit/decorators.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../../internal/aria/delegate.js';\nimport {isRtl} from '../../../internal/controller/is-rtl.js';\nimport {NavigationTab} from '../../navigationtab/internal/navigation-tab.js';\n\nimport {NavigationTabInteractionEvent} from './constants.js';\nimport {NavigationBarState} from './state.js';\n\n/**\n * b/265346501 - add docs\n *\n * @fires navigation-bar-activated {CustomEvent<tab: NavigationTab, activeIndex: number>}\n * Dispatched whenever the `activeIndex` changes. --bubbles --composed\n */\nexport class NavigationBar extends LitElement implements NavigationBarState {\n  static {\n    requestUpdateOnAriaChange(NavigationBar);\n  }\n\n  @property({type: Number, attribute: 'active-index'}) activeIndex = 0;\n\n  @property({type: Boolean, attribute: 'hide-inactive-labels'})\n  hideInactiveLabels = false;\n\n  tabs: NavigationTab[] = [];\n\n  @queryAssignedElements({flatten: true})\n  private readonly tabsElement!: NavigationTab[];\n\n  protected override render() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`<div\n      class=\"md3-navigation-bar\"\n      role=\"tablist\"\n      aria-label=${ariaLabel || nothing}\n      @keydown=\"${this.handleKeydown}\"\n      @navigation-tab-interaction=\"${this.handleNavigationTabInteraction}\"\n      @navigation-tab-rendered=${this.handleNavigationTabConnected}\n      ><md-elevation></md-elevation\n      ><div class=\"md3-navigation-bar__tabs-slot-container\"><slot></slot></div\n    ></div>`;\n  }\n\n  protected override updated(changedProperties: PropertyValues<NavigationBar>) {\n    if (changedProperties.has('activeIndex')) {\n      this.onActiveIndexChange(this.activeIndex);\n      this.dispatchEvent(\n        new CustomEvent('navigation-bar-activated', {\n          detail: {\n            tab: this.tabs[this.activeIndex],\n            activeIndex: this.activeIndex,\n          },\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    }\n\n    if (changedProperties.has('hideInactiveLabels')) {\n      this.onHideInactiveLabelsChange(this.hideInactiveLabels);\n    }\n\n    if (changedProperties.has('tabs')) {\n      this.onHideInactiveLabelsChange(this.hideInactiveLabels);\n      this.onActiveIndexChange(this.activeIndex);\n    }\n  }\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n    this.layout();\n  }\n\n  layout() {\n    if (!this.tabsElement) return;\n    const navTabs: NavigationTab[] = [];\n    for (const node of this.tabsElement) {\n      navTabs.push(node);\n    }\n    this.tabs = navTabs;\n  }\n\n  private handleNavigationTabConnected(event: CustomEvent) {\n    const target = event.target as NavigationTab;\n    if (this.tabs.indexOf(target) === -1) {\n      this.layout();\n    }\n  }\n\n  private handleNavigationTabInteraction(event: NavigationTabInteractionEvent) {\n    this.activeIndex = this.tabs.indexOf(event.detail.state as NavigationTab);\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    const key = event.key;\n    const focusedTabIndex = this.tabs.findIndex((tab) => {\n      return tab.matches(':focus-within');\n    });\n    const isRTL = isRtl(this);\n    const maxIndex = this.tabs.length - 1;\n\n    if (key === 'Enter' || key === ' ') {\n      this.activeIndex = focusedTabIndex;\n      return;\n    }\n\n    if (key === 'Home') {\n      this.tabs[0].focus();\n      return;\n    }\n\n    if (key === 'End') {\n      this.tabs[maxIndex].focus();\n      return;\n    }\n\n    const toNextTab =\n      (key === 'ArrowRight' && !isRTL) || (key === 'ArrowLeft' && isRTL);\n    if (toNextTab && focusedTabIndex === maxIndex) {\n      this.tabs[0].focus();\n      return;\n    }\n    if (toNextTab) {\n      this.tabs[focusedTabIndex + 1].focus();\n      return;\n    }\n\n    const toPreviousTab =\n      (key === 'ArrowLeft' && !isRTL) || (key === 'ArrowRight' && isRTL);\n    if (toPreviousTab && focusedTabIndex === 0) {\n      this.tabs[maxIndex].focus();\n      return;\n    }\n    if (toPreviousTab) {\n      this.tabs[focusedTabIndex - 1].focus();\n      return;\n    }\n  }\n\n  private onActiveIndexChange(value: number) {\n    if (!this.tabs[value]) {\n      throw new Error('NavigationBar: activeIndex is out of bounds.');\n    }\n    for (let i = 0; i < this.tabs.length; i++) {\n      this.tabs[i].active = i === value;\n    }\n  }\n\n  private onHideInactiveLabelsChange(value: boolean) {\n    for (const tab of this.tabs) {\n      tab.hideInactiveLabel = value;\n    }\n  }\n}\n"]}

package/labs/navigationdrawer/internal/_navigation-drawer-modal.scss

@@ -23,7 +23,7 @@ $_reference: (
   'container-height': 100%,
   'container-shape': 0 16px 16px 0,
   'container-width': 360px,
-  // TODO(b/216384393): Temporary existing token to use for shadow color
+  // b/216384393 - Temporary existing token to use for shadow color
   'divider-color': #000,
   'modal-container-elevation': 1,
   'scrim-color': null,

package/labs/navigationdrawer/internal/_navigation-drawer.scss

@@ -21,7 +21,7 @@ $_reference: (
   'container-height': 100%,
   'container-shape': 0 16px 16px 0,
   'container-width': 360px,
-  // TODO(b/216384393): Temporary existing token to use for shadow color
+  // b/216384393 - Temporary existing token to use for shadow color
   'divider-color': #000,
   'modal-container-elevation': 1,
   'standard-container-elevation': 0,

package/labs/navigationdrawer/internal/navigation-drawer-modal.d.ts

@@ -5,7 +5,7 @@
  */
 import { LitElement, PropertyValues } from 'lit';
 /**
- * TODO(b/265346501): add docs
+ * b/265346501 - add docs
  *
  * @fires navigation-drawer-changed {CustomEvent<{opened: boolean}>}
  * Dispatched whenever the drawer opens or closes --bubbles --composed

package/labs/navigationdrawer/internal/navigation-drawer-modal.js

@@ -9,7 +9,7 @@ import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { requestUpdateOnAriaChange } from '../../../internal/aria/delegate.js';
 /**
- * TODO(b/265346501): add docs
+ * b/265346501 - add docs
  *
  * @fires navigation-drawer-changed {CustomEvent<{opened: boolean}>}
  * Dispatched whenever the drawer opens or closes --bubbles --composed

package/labs/navigationdrawer/internal/navigation-drawer-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-drawer-modal.js","sourceRoot":"","sources":["navigation-drawer-modal.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAGrD,OAAO,EAAC,yBAAyB,EAAC,MAAM,oCAAoC,CAAC;AAE7E;;;;;GAKG;AACH,MAAM,OAAO,qBAAsB,SAAQ,UAAU;IAArD;;QAK6B,WAAM,GAAG,KAAK,CAAC;QAC9B,UAAK,GAAoB,KAAK,CAAC;IAkE7C,CAAC;IAhEoB,MAAM;QACvB,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QACpD,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QACnD,iCAAiC;QACjC,MAAM,EAAC,SAAS,EAAE,SAAS,EAAC,GAAG,IAAuB,CAAC;QACvD,OAAO,IAAI,CAAA;;oDAEqC,IAAI,CAAC,eAAe,EAAE;kBACxD,IAAI,CAAC,gBAAgB;;;wBAGf,YAAY;sBACd,UAAU;qBACX,SAAS,IAAI,OAAO;qBACpB,SAAS,IAAI,OAAO;6CACI,IAAI,CAAC,gBAAgB,EAAE;oBAChD,IAAI,CAAC,aAAa;;;;;;;KAOjC,CAAC;IACJ,CAAC;IAEO,eAAe;QACrB,OAAO,QAAQ,CAAC;YACd,4CAA4C,EAAE,IAAI,CAAC,MAAM;SAC1D,CAAC,CAAC;IACL,CAAC;IAEO,gBAAgB;QACtB,OAAO,QAAQ,CAAC;YACd,qCAAqC,EAAE,IAAI,CAAC,MAAM;YAClD,6CAA6C,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;SACtE,CAAC,CAAC;IACL,CAAC;IAEkB,OAAO,CACxB,iBAAwD;QAExD,IAAI,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACnC,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,2BAA2B,EAAE;oBAC3C,MAAM,EAAE,EAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAC;oBAC7B,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;iBACf,CAAC,CACH,CAAC;YACJ,CAAC,EAAE,GAAG,CAAC,CAAC;SACT;IACH,CAAC;IAEO,aAAa,CAAC,KAAoB;QACxC,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;YAC3B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;SACrB;IACH,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;IAC7B,CAAC;CACF;AAvEC;IACE,yBAAyB,CAAC,qBAAqB,CAAC,CAAC;AACnD,CAAC,GAAA,CAAA;AAE0B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;qDAAgB;AAC9B;IAAX,QAAQ,EAAE;oDAAgC","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, nothing, PropertyValues} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../../internal/aria/delegate.js';\n\n/**\n * TODO(b/265346501): add docs\n *\n * @fires navigation-drawer-changed {CustomEvent<{opened: boolean}>}\n * Dispatched whenever the drawer opens or closes --bubbles --composed\n */\nexport class NavigationDrawerModal extends LitElement {\n  static {\n    requestUpdateOnAriaChange(NavigationDrawerModal);\n  }\n\n  @property({type: Boolean}) opened = false;\n  @property() pivot: 'start' | 'end' = 'end';\n\n  protected override render() {\n    const ariaExpanded = this.opened ? 'true' : 'false';\n    const ariaHidden = !this.opened ? 'true' : 'false';\n    // Needed for closure conformance\n    const {ariaLabel, ariaModal} = this as ARIAMixinStrict;\n    return html`\n      <div\n        class=\"md3-navigation-drawer-modal__scrim ${this.getScrimClasses()}\"\n        @click=\"${this.handleScrimClick}\">\n      </div>\n      <div\n        aria-expanded=${ariaExpanded}\n        aria-hidden=${ariaHidden}\n        aria-label=${ariaLabel || nothing}\n        aria-modal=${ariaModal || nothing}\n        class=\"md3-navigation-drawer-modal ${this.getRenderClasses()}\"\n        @keydown=\"${this.handleKeyDown}\"\n        role=\"dialog\"\n        ><div class=\"md3-elevation-overlay\"></div>\n        <div class=\"md3-navigation-drawer-modal__slot-content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private getScrimClasses() {\n    return classMap({\n      'md3-navigation-drawer-modal--scrim-visible': this.opened,\n    });\n  }\n\n  private getRenderClasses() {\n    return classMap({\n      'md3-navigation-drawer-modal--opened': this.opened,\n      'md3-navigation-drawer-modal--pivot-at-start': this.pivot === 'start',\n    });\n  }\n\n  protected override updated(\n    changedProperties: PropertyValues<NavigationDrawerModal>,\n  ) {\n    if (changedProperties.has('opened')) {\n      setTimeout(() => {\n        this.dispatchEvent(\n          new CustomEvent('navigation-drawer-changed', {\n            detail: {opened: this.opened},\n            bubbles: true,\n            composed: true,\n          }),\n        );\n      }, 250);\n    }\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.code === 'Escape') {\n      this.opened = false;\n    }\n  }\n\n  private handleScrimClick() {\n    this.opened = !this.opened;\n  }\n}\n"]}
+{"version":3,"file":"navigation-drawer-modal.js","sourceRoot":"","sources":["navigation-drawer-modal.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAGrD,OAAO,EAAC,yBAAyB,EAAC,MAAM,oCAAoC,CAAC;AAE7E;;;;;GAKG;AACH,MAAM,OAAO,qBAAsB,SAAQ,UAAU;IAArD;;QAK6B,WAAM,GAAG,KAAK,CAAC;QAC9B,UAAK,GAAoB,KAAK,CAAC;IAkE7C,CAAC;IAhEoB,MAAM;QACvB,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QACpD,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QACnD,iCAAiC;QACjC,MAAM,EAAC,SAAS,EAAE,SAAS,EAAC,GAAG,IAAuB,CAAC;QACvD,OAAO,IAAI,CAAA;;oDAEqC,IAAI,CAAC,eAAe,EAAE;kBACxD,IAAI,CAAC,gBAAgB;;;wBAGf,YAAY;sBACd,UAAU;qBACX,SAAS,IAAI,OAAO;qBACpB,SAAS,IAAI,OAAO;6CACI,IAAI,CAAC,gBAAgB,EAAE;oBAChD,IAAI,CAAC,aAAa;;;;;;;KAOjC,CAAC;IACJ,CAAC;IAEO,eAAe;QACrB,OAAO,QAAQ,CAAC;YACd,4CAA4C,EAAE,IAAI,CAAC,MAAM;SAC1D,CAAC,CAAC;IACL,CAAC;IAEO,gBAAgB;QACtB,OAAO,QAAQ,CAAC;YACd,qCAAqC,EAAE,IAAI,CAAC,MAAM;YAClD,6CAA6C,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;SACtE,CAAC,CAAC;IACL,CAAC;IAEkB,OAAO,CACxB,iBAAwD;QAExD,IAAI,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACnC,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,2BAA2B,EAAE;oBAC3C,MAAM,EAAE,EAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAC;oBAC7B,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;iBACf,CAAC,CACH,CAAC;YACJ,CAAC,EAAE,GAAG,CAAC,CAAC;SACT;IACH,CAAC;IAEO,aAAa,CAAC,KAAoB;QACxC,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE;YAC3B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;SACrB;IACH,CAAC;IAEO,gBAAgB;QACtB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;IAC7B,CAAC;CACF;AAvEC;IACE,yBAAyB,CAAC,qBAAqB,CAAC,CAAC;AACnD,CAAC,GAAA,CAAA;AAE0B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;qDAAgB;AAC9B;IAAX,QAAQ,EAAE;oDAAgC","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, nothing, PropertyValues} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../../internal/aria/delegate.js';\n\n/**\n * b/265346501 - add docs\n *\n * @fires navigation-drawer-changed {CustomEvent<{opened: boolean}>}\n * Dispatched whenever the drawer opens or closes --bubbles --composed\n */\nexport class NavigationDrawerModal extends LitElement {\n  static {\n    requestUpdateOnAriaChange(NavigationDrawerModal);\n  }\n\n  @property({type: Boolean}) opened = false;\n  @property() pivot: 'start' | 'end' = 'end';\n\n  protected override render() {\n    const ariaExpanded = this.opened ? 'true' : 'false';\n    const ariaHidden = !this.opened ? 'true' : 'false';\n    // Needed for closure conformance\n    const {ariaLabel, ariaModal} = this as ARIAMixinStrict;\n    return html`\n      <div\n        class=\"md3-navigation-drawer-modal__scrim ${this.getScrimClasses()}\"\n        @click=\"${this.handleScrimClick}\">\n      </div>\n      <div\n        aria-expanded=${ariaExpanded}\n        aria-hidden=${ariaHidden}\n        aria-label=${ariaLabel || nothing}\n        aria-modal=${ariaModal || nothing}\n        class=\"md3-navigation-drawer-modal ${this.getRenderClasses()}\"\n        @keydown=\"${this.handleKeyDown}\"\n        role=\"dialog\"\n        ><div class=\"md3-elevation-overlay\"></div>\n        <div class=\"md3-navigation-drawer-modal__slot-content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private getScrimClasses() {\n    return classMap({\n      'md3-navigation-drawer-modal--scrim-visible': this.opened,\n    });\n  }\n\n  private getRenderClasses() {\n    return classMap({\n      'md3-navigation-drawer-modal--opened': this.opened,\n      'md3-navigation-drawer-modal--pivot-at-start': this.pivot === 'start',\n    });\n  }\n\n  protected override updated(\n    changedProperties: PropertyValues<NavigationDrawerModal>,\n  ) {\n    if (changedProperties.has('opened')) {\n      setTimeout(() => {\n        this.dispatchEvent(\n          new CustomEvent('navigation-drawer-changed', {\n            detail: {opened: this.opened},\n            bubbles: true,\n            composed: true,\n          }),\n        );\n      }, 250);\n    }\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.code === 'Escape') {\n      this.opened = false;\n    }\n  }\n\n  private handleScrimClick() {\n    this.opened = !this.opened;\n  }\n}\n"]}

package/labs/navigationdrawer/internal/navigation-drawer.d.ts

@@ -6,7 +6,7 @@
 import '../../../elevation/elevation.js';
 import { LitElement, PropertyValues } from 'lit';
 /**
- * TODO(b/265346501): add docs
+ * b/265346501 - add docs
  *
  * @fires navigation-drawer-changed {CustomEvent<{opened: boolean}>}
  * Dispatched whenever the drawer opens or closes --bubbles --composed

package/labs/navigationdrawer/internal/navigation-drawer.js

@@ -10,7 +10,7 @@ import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { requestUpdateOnAriaChange } from '../../../internal/aria/delegate.js';
 /**
- * TODO(b/265346501): add docs
+ * b/265346501 - add docs
  *
  * @fires navigation-drawer-changed {CustomEvent<{opened: boolean}>}
  * Dispatched whenever the drawer opens or closes --bubbles --composed

package/labs/navigationdrawer/internal/navigation-drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-drawer.js","sourceRoot":"","sources":["navigation-drawer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,iCAAiC,CAAC;AAEzC,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAGrD,OAAO,EAAC,yBAAyB,EAAC,MAAM,oCAAoC,CAAC;AAE7E;;;;;GAKG;AACH,MAAM,OAAO,gBAAiB,SAAQ,UAAU;IAAhD;;QAK6B,WAAM,GAAG,KAAK,CAAC;QAC9B,UAAK,GAAoB,KAAK,CAAC;IA6C7C,CAAC;IA3CoB,MAAM;QACvB,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QACpD,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QACnD,iCAAiC;QACjC,MAAM,EAAC,SAAS,EAAE,SAAS,EAAC,GAAG,IAAuB,CAAC;QACvD,OAAO,IAAI,CAAA;;yBAEU,YAAY;uBACd,UAAU;qBACZ,SAAS,IAAI,OAAO;sBACnB,SAAS,IAAI,OAAO;uCACH,IAAI,CAAC,gBAAgB,EAAE;;;;;;;KAOzD,CAAC;IACJ,CAAC;IAEO,gBAAgB;QACtB,OAAO,QAAQ,CAAC;YACd,+BAA+B,EAAE,IAAI,CAAC,MAAM;YAC5C,uCAAuC,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;SAChE,CAAC,CAAC;IACL,CAAC;IAEkB,OAAO,CACxB,iBAAmD;QAEnD,IAAI,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACnC,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,2BAA2B,EAAE;oBAC3C,MAAM,EAAE,EAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAC;oBAC7B,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;iBACf,CAAC,CACH,CAAC;YACJ,CAAC,EAAE,GAAG,CAAC,CAAC;SACT;IACH,CAAC;CACF;AAlDC;IACE,yBAAyB,CAAC,gBAAgB,CAAC,CAAC;AAC9C,CAAC,GAAA,CAAA;AAE0B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;gDAAgB;AAC9B;IAAX,QAAQ,EAAE;+CAAgC","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../../elevation/elevation.js';\n\nimport {html, LitElement, nothing, PropertyValues} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../../internal/aria/delegate.js';\n\n/**\n * TODO(b/265346501): add docs\n *\n * @fires navigation-drawer-changed {CustomEvent<{opened: boolean}>}\n * Dispatched whenever the drawer opens or closes --bubbles --composed\n */\nexport class NavigationDrawer extends LitElement {\n  static {\n    requestUpdateOnAriaChange(NavigationDrawer);\n  }\n\n  @property({type: Boolean}) opened = false;\n  @property() pivot: 'start' | 'end' = 'end';\n\n  protected override render() {\n    const ariaExpanded = this.opened ? 'true' : 'false';\n    const ariaHidden = !this.opened ? 'true' : 'false';\n    // Needed for closure conformance\n    const {ariaLabel, ariaModal} = this as ARIAMixinStrict;\n    return html`\n      <div\n        aria-expanded=\"${ariaExpanded}\"\n        aria-hidden=\"${ariaHidden}\"\n        aria-label=${ariaLabel || nothing}\n        aria-modal=\"${ariaModal || nothing}\"\n        class=\"md3-navigation-drawer ${this.getRenderClasses()}\"\n        role=\"dialog\">\n        <md-elevation></md-elevation>\n        <div class=\"md3-navigation-drawer__slot-content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private getRenderClasses() {\n    return classMap({\n      'md3-navigation-drawer--opened': this.opened,\n      'md3-navigation-drawer--pivot-at-start': this.pivot === 'start',\n    });\n  }\n\n  protected override updated(\n    changedProperties: PropertyValues<NavigationDrawer>,\n  ) {\n    if (changedProperties.has('opened')) {\n      setTimeout(() => {\n        this.dispatchEvent(\n          new CustomEvent('navigation-drawer-changed', {\n            detail: {opened: this.opened},\n            bubbles: true,\n            composed: true,\n          }),\n        );\n      }, 250);\n    }\n  }\n}\n"]}
+{"version":3,"file":"navigation-drawer.js","sourceRoot":"","sources":["navigation-drawer.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,iCAAiC,CAAC;AAEzC,OAAO,EAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAiB,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAGrD,OAAO,EAAC,yBAAyB,EAAC,MAAM,oCAAoC,CAAC;AAE7E;;;;;GAKG;AACH,MAAM,OAAO,gBAAiB,SAAQ,UAAU;IAAhD;;QAK6B,WAAM,GAAG,KAAK,CAAC;QAC9B,UAAK,GAAoB,KAAK,CAAC;IA6C7C,CAAC;IA3CoB,MAAM;QACvB,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QACpD,MAAM,UAAU,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QACnD,iCAAiC;QACjC,MAAM,EAAC,SAAS,EAAE,SAAS,EAAC,GAAG,IAAuB,CAAC;QACvD,OAAO,IAAI,CAAA;;yBAEU,YAAY;uBACd,UAAU;qBACZ,SAAS,IAAI,OAAO;sBACnB,SAAS,IAAI,OAAO;uCACH,IAAI,CAAC,gBAAgB,EAAE;;;;;;;KAOzD,CAAC;IACJ,CAAC;IAEO,gBAAgB;QACtB,OAAO,QAAQ,CAAC;YACd,+BAA+B,EAAE,IAAI,CAAC,MAAM;YAC5C,uCAAuC,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;SAChE,CAAC,CAAC;IACL,CAAC;IAEkB,OAAO,CACxB,iBAAmD;QAEnD,IAAI,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACnC,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,2BAA2B,EAAE;oBAC3C,MAAM,EAAE,EAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAC;oBAC7B,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;iBACf,CAAC,CACH,CAAC;YACJ,CAAC,EAAE,GAAG,CAAC,CAAC;SACT;IACH,CAAC;CACF;AAlDC;IACE,yBAAyB,CAAC,gBAAgB,CAAC,CAAC;AAC9C,CAAC,GAAA,CAAA;AAE0B;IAA1B,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;gDAAgB;AAC9B;IAAX,QAAQ,EAAE;+CAAgC","sourcesContent":["/**\n * @license\n * Copyright 2021 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../../elevation/elevation.js';\n\nimport {html, LitElement, nothing, PropertyValues} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\n\nimport {ARIAMixinStrict} from '../../../internal/aria/aria.js';\nimport {requestUpdateOnAriaChange} from '../../../internal/aria/delegate.js';\n\n/**\n * b/265346501 - add docs\n *\n * @fires navigation-drawer-changed {CustomEvent<{opened: boolean}>}\n * Dispatched whenever the drawer opens or closes --bubbles --composed\n */\nexport class NavigationDrawer extends LitElement {\n  static {\n    requestUpdateOnAriaChange(NavigationDrawer);\n  }\n\n  @property({type: Boolean}) opened = false;\n  @property() pivot: 'start' | 'end' = 'end';\n\n  protected override render() {\n    const ariaExpanded = this.opened ? 'true' : 'false';\n    const ariaHidden = !this.opened ? 'true' : 'false';\n    // Needed for closure conformance\n    const {ariaLabel, ariaModal} = this as ARIAMixinStrict;\n    return html`\n      <div\n        aria-expanded=\"${ariaExpanded}\"\n        aria-hidden=\"${ariaHidden}\"\n        aria-label=${ariaLabel || nothing}\n        aria-modal=\"${ariaModal || nothing}\"\n        class=\"md3-navigation-drawer ${this.getRenderClasses()}\"\n        role=\"dialog\">\n        <md-elevation></md-elevation>\n        <div class=\"md3-navigation-drawer__slot-content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  private getRenderClasses() {\n    return classMap({\n      'md3-navigation-drawer--opened': this.opened,\n      'md3-navigation-drawer--pivot-at-start': this.pivot === 'start',\n    });\n  }\n\n  protected override updated(\n    changedProperties: PropertyValues<NavigationDrawer>,\n  ) {\n    if (changedProperties.has('opened')) {\n      setTimeout(() => {\n        this.dispatchEvent(\n          new CustomEvent('navigation-drawer-changed', {\n            detail: {opened: this.opened},\n            bubbles: true,\n            composed: true,\n          }),\n        );\n      }, 250);\n    }\n  }\n}\n"]}

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

@@ -9,7 +9,7 @@ import '../../badge/badge.js';
 import { LitElement, PropertyValues } from 'lit';
 import { NavigationTabState } from './state.js';
 /**
- * TODO(b/265346501): add docs
+ * 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

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

@@ -12,7 +12,7 @@ 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
+ * 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
@@ -98,7 +98,7 @@ export class NavigationTab extends LitElement {
         }
     }
     handleClick() {
-        // TODO(b/269772145): connect to ripple
+        // b/269772145 - connect to ripple
         this.dispatchEvent(new CustomEvent('navigation-tab-interaction', {
             detail: { state: this },
             bubbles: true,

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

@@ -1 +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 *\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 extends LitElement implements NavigationTabState {\n  static {\n    requestUpdateOnAriaChange(NavigationTab);\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` <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    // TODO(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"]}
+{"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 * 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 extends LitElement implements NavigationTabState {\n  static {\n    requestUpdateOnAriaChange(NavigationTab);\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` <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

@@ -15,10 +15,4 @@ export interface NavigationTabState {
      * If true, when inactive label will be hidden.
      */
     hideInactiveLabel: boolean;
-    /**
-     * Inner button for the tab
-     * TODO(b/229015424): Remove this when the jscompiler rename issue is
-     * understood.
-     */
-    buttonElement: HTMLElement | null;
 }

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

@@ -1 +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  /**\n   * Inner button for the tab\n   * TODO(b/229015424): Remove this when the jscompiler rename issue is\n   * understood.\n   */\n  buttonElement: HTMLElement | null;\n}\n"]}
+{"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/segmentedbutton/internal/_outlined-segmented-button.scss

@@ -15,7 +15,7 @@
 
 @mixin styles() {
   $tokens: tokens.md-comp-outlined-segmented-button-values();
-  // TODO(b/198759625): Remove spacing tokens once provided.
+  // b/198759625 - Remove spacing tokens once provided.
   $tokens: map.merge(
     $tokens,
     (
@@ -33,7 +33,7 @@
   .md3-segmented-button__outline {
     border-radius: inherit;
     border-style: solid;
-    // TODO(b/233762888): Move border-width and inset into theme after generating latest version of tokens.
+    // Move border-width and inset into theme.
     border-width: 1px;
     inset: 0px -0.5px;
     pointer-events: none;

package/labs/segmentedbutton/internal/_shared.scss

@@ -98,7 +98,7 @@
     &.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.
+        // b/198759625 - Use padding token instead of hardcoded 8px value.
         width: calc(var(--_icon-size) + 8px);
       }
     }

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

@@ -5,7 +5,7 @@
  */
 import { SegmentedButton } from './segmented-button.js';
 /**
- * TODO(b/265346443): add docs
+ * b/265346443 - add docs
  */
 export declare class OutlinedSegmentedButton extends SegmentedButton {
     protected getRenderClasses(): {

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

@@ -6,7 +6,7 @@
 import { html } from 'lit';
 import { SegmentedButton } from './segmented-button.js';
 /**
- * TODO(b/265346443): add docs
+ * b/265346443 - add docs
  */
 export class OutlinedSegmentedButton extends SegmentedButton {
     getRenderClasses() {

package/labs/segmentedbutton/internal/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,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 * TODO(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"]}
+{"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"]}

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

@@ -5,7 +5,7 @@
  */
 import { SegmentedButtonSet } from './segmented-button-set.js';
 /**
- * TODO(b/265346443): add docs
+ * b/265346443 - add docs
  */
 export declare class OutlinedSegmentedButtonSet extends SegmentedButtonSet {
     protected getRenderClasses(): {

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

@@ -5,7 +5,7 @@
  */
 import { SegmentedButtonSet } from './segmented-button-set.js';
 /**
- * TODO(b/265346443): add docs
+ * b/265346443 - add docs
  */
 export class OutlinedSegmentedButtonSet extends SegmentedButtonSet {
     getRenderClasses() {

package/labs/segmentedbuttonset/internal/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,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"]}
+{"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 * 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/menu/internal/_menu.scss

@@ -66,6 +66,7 @@
     overflow: visible;
     // [popover] adds a canvas background
     background-color: transparent;
+    color: inherit;
     opacity: 0;
     z-index: 20;
     position: absolute;

package/menu/internal/menu-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--md-elevation-level: var(--md-menu-container-elevation, 2);--md-elevation-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));min-width:112px;color:unset;display:contents}md-focus-ring{--md-focus-ring-shape: var(--md-menu-container-shape, 4px)}.menu{border-radius:var(--md-menu-container-shape, 4px);display:none;inset:auto;border:none;padding:0px;overflow:visible;background-color:rgba(0,0,0,0);opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit;min-width:inherit;max-width:inherit}.menu::backdrop{display:none}.fixed{position:fixed}.items{display:block;list-style-type:none;margin:0;outline:none;box-sizing:border-box;background-color:var(--md-menu-container-color, var(--md-sys-color-surface-container, #f3edf7));height:inherit;max-height:inherit;overflow:auto;min-width:inherit;max-width:inherit;border-radius:inherit}.item-padding{padding-block:8px}.has-overflow:not([popover]) .items{overflow:visible}.has-overflow.animating .items,.animating .items{overflow:hidden}.has-overflow.animating .items{pointer-events:none}.animating ::slotted(.md-menu-hidden){opacity:0}slot{display:block;height:inherit;max-height:inherit}::slotted(:is(md-divider,[role=separator])){margin:8px 0}@media(forced-colors: active){.menu{border-style:solid;border-color:CanvasText;border-width:1px}}/*# sourceMappingURL=menu-styles.css.map */
+export const styles = css `:host{--md-elevation-level: var(--md-menu-container-elevation, 2);--md-elevation-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));min-width:112px;color:unset;display:contents}md-focus-ring{--md-focus-ring-shape: var(--md-menu-container-shape, 4px)}.menu{border-radius:var(--md-menu-container-shape, 4px);display:none;inset:auto;border:none;padding:0px;overflow:visible;background-color:rgba(0,0,0,0);color:inherit;opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit;min-width:inherit;max-width:inherit}.menu::backdrop{display:none}.fixed{position:fixed}.items{display:block;list-style-type:none;margin:0;outline:none;box-sizing:border-box;background-color:var(--md-menu-container-color, var(--md-sys-color-surface-container, #f3edf7));height:inherit;max-height:inherit;overflow:auto;min-width:inherit;max-width:inherit;border-radius:inherit}.item-padding{padding-block:8px}.has-overflow:not([popover]) .items{overflow:visible}.has-overflow.animating .items,.animating .items{overflow:hidden}.has-overflow.animating .items{pointer-events:none}.animating ::slotted(.md-menu-hidden){opacity:0}slot{display:block;height:inherit;max-height:inherit}::slotted(:is(md-divider,[role=separator])){margin:8px 0}@media(forced-colors: active){.menu{border-style:solid;border-color:CanvasText;border-width:1px}}/*# sourceMappingURL=menu-styles.css.map */
 `;
 //# sourceMappingURL=menu-styles.css.js.map

package/menu/internal/menu-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-styles.css.js","sourceRoot":"","sources":["menu-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{--md-elevation-level: var(--md-menu-container-elevation, 2);--md-elevation-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));min-width:112px;color:unset;display:contents}md-focus-ring{--md-focus-ring-shape: var(--md-menu-container-shape, 4px)}.menu{border-radius:var(--md-menu-container-shape, 4px);display:none;inset:auto;border:none;padding:0px;overflow:visible;background-color:rgba(0,0,0,0);opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit;min-width:inherit;max-width:inherit}.menu::backdrop{display:none}.fixed{position:fixed}.items{display:block;list-style-type:none;margin:0;outline:none;box-sizing:border-box;background-color:var(--md-menu-container-color, var(--md-sys-color-surface-container, #f3edf7));height:inherit;max-height:inherit;overflow:auto;min-width:inherit;max-width:inherit;border-radius:inherit}.item-padding{padding-block:8px}.has-overflow:not([popover]) .items{overflow:visible}.has-overflow.animating .items,.animating .items{overflow:hidden}.has-overflow.animating .items{pointer-events:none}.animating ::slotted(.md-menu-hidden){opacity:0}slot{display:block;height:inherit;max-height:inherit}::slotted(:is(md-divider,[role=separator])){margin:8px 0}@media(forced-colors: active){.menu{border-style:solid;border-color:CanvasText;border-width:1px}}/*# sourceMappingURL=menu-styles.css.map */\n`;\n "]}
+{"version":3,"file":"menu-styles.css.js","sourceRoot":"","sources":["menu-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{--md-elevation-level: var(--md-menu-container-elevation, 2);--md-elevation-shadow-color: var(--md-menu-container-shadow-color, var(--md-sys-color-shadow, #000));min-width:112px;color:unset;display:contents}md-focus-ring{--md-focus-ring-shape: var(--md-menu-container-shape, 4px)}.menu{border-radius:var(--md-menu-container-shape, 4px);display:none;inset:auto;border:none;padding:0px;overflow:visible;background-color:rgba(0,0,0,0);color:inherit;opacity:0;z-index:20;position:absolute;user-select:none;max-height:inherit;height:inherit;min-width:inherit;max-width:inherit}.menu::backdrop{display:none}.fixed{position:fixed}.items{display:block;list-style-type:none;margin:0;outline:none;box-sizing:border-box;background-color:var(--md-menu-container-color, var(--md-sys-color-surface-container, #f3edf7));height:inherit;max-height:inherit;overflow:auto;min-width:inherit;max-width:inherit;border-radius:inherit}.item-padding{padding-block:8px}.has-overflow:not([popover]) .items{overflow:visible}.has-overflow.animating .items,.animating .items{overflow:hidden}.has-overflow.animating .items{pointer-events:none}.animating ::slotted(.md-menu-hidden){opacity:0}slot{display:block;height:inherit;max-height:inherit}::slotted(:is(md-divider,[role=separator])){margin:8px 0}@media(forced-colors: active){.menu{border-style:solid;border-color:CanvasText;border-width:1px}}/*# sourceMappingURL=menu-styles.css.map */\n`;\n "]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@material/web",
-  "version": "1.1.1",
+  "version": "1.1.2-nightly.043bbad.0",
   "publishConfig": {
     "access": "public"
   },
@@ -29,8 +29,9 @@
     "build:sass": "wireit",
     "test": "wireit",
     "build:catalog": "wireit",
-    "build:analyzer": "wireit",
-    "update-docs": "wireit"
+    "build:scripts": "wireit",
+    "update-docs": "wireit",
+    "update-size": "wireit"
   },
   "type": "module",
   "files": [
@@ -40,6 +41,7 @@
     "**/*.scss",
     "!css-to-ts.js",
     "!web-test-runner.config.js",
+    "!commitlint.config.js",
     "!**/test/**",
     "!**/testing/**",
     "!**/*_test.*",
@@ -56,10 +58,14 @@
   },
   "devDependencies": {
     "@lit-labs/analyzer": "^0.9.2",
+    "@rollup/plugin-multi-entry": "^6.0.1",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
     "@types/jasmine": "^4.0.3",
     "@web/test-runner": "^0.15.0",
     "@web/test-runner-playwright": "^0.9.0",
     "jasmine": "^4.5.0",
+    "rollup": "^2.79.1",
     "sass": "^1.52.3",
     "sass-true": "^6.1.0",
     "typescript": "5.1.6",
@@ -90,6 +96,7 @@
         "**/*.d.ts",
         "!css-to-ts.js",
         "!web-test-runner.config.js",
+        "!commitlint.config.js",
         "!types/",
         "!catalog",
         "!scripts/"
@@ -145,19 +152,19 @@
         "./catalog:build:prod"
       ]
     },
-    "build:analyzer": {
+    "build:scripts": {
       "command": "tsc -b scripts/tsconfig.json --pretty",
       "files": [
         "scripts/tsconfig.json",
-        "scripts/analyzer/**/*.ts",
+        "scripts/**/*.ts",
         "!**/*.d.ts",
         "!**/*.css.ts"
       ],
       "output": [
         "scripts/.tsbuildinfo",
-        "scripts/analyzer/**/*.js",
-        "scripts/analyzer/**/*.js.map",
-        "scripts/analyzer/**/*.d.ts"
+        "scripts/**/*.js",
+        "scripts/**/*.js.map",
+        "scripts/**/*.d.ts"
       ],
       "clean": "if-file-deleted"
     },
@@ -175,7 +182,14 @@
       ],
       "output": [],
       "dependencies": [
-        "build:analyzer"
+        "build:scripts"
+      ]
+    },
+    "update-size": {
+      "command": "node scripts/size/update-size.js",
+      "dependencies": [
+        "build:scripts",
+        "build"
       ]
     }
   }

package/progress/internal/_linear-progress.scss

@@ -114,6 +114,12 @@ $_indeterminate-duration: 2s;
     z-index: -1; // Place behind tracks for Safari
   }
 
+  // dots are hidden when indeterminate or when there is no visible buffer to
+  // prevent infinite invisible animation.
+  .dots[hidden] {
+    display: none;
+  }
+
   // indeterminate
   .indeterminate .bar {
     transition: none;
@@ -131,10 +137,6 @@ $_indeterminate-duration: 2s;
     display: block;
   }
 
-  .indeterminate .dots {
-    display: none;
-  }
-
   .indeterminate .primary-bar {
     animation: linear infinite $_indeterminate-duration;
     animation-name: primary-indeterminate-translate;

package/progress/internal/linear-progress-styles.css.js

@@ -4,6 +4,6 @@
   * SPDX-License-Identifier: Apache-2.0
   */
 import { css } from 'lit';
-export const styles = css `:host{--_active-indicator-color: var(--md-linear-progress-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_active-indicator-height: var(--md-linear-progress-active-indicator-height, 4px);--_four-color-active-indicator-four-color: var(--md-linear-progress-four-color-active-indicator-four-color, var(--md-sys-color-tertiary-container, #ffd8e4));--_four-color-active-indicator-one-color: var(--md-linear-progress-four-color-active-indicator-one-color, var(--md-sys-color-primary, #6750a4));--_four-color-active-indicator-three-color: var(--md-linear-progress-four-color-active-indicator-three-color, var(--md-sys-color-tertiary, #7d5260));--_four-color-active-indicator-two-color: var(--md-linear-progress-four-color-active-indicator-two-color, var(--md-sys-color-primary-container, #eaddff));--_track-color: var(--md-linear-progress-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_track-height: var(--md-linear-progress-track-height, 4px);--_track-shape: var(--md-linear-progress-track-shape, 0px);border-radius:var(--_track-shape);display:flex;position:relative;min-width:80px;height:var(--_track-height);content-visibility:auto;contain:strict}.progress,.dots,.inactive-track,.bar,.bar-inner{position:absolute}.progress{direction:ltr;inset:0;border-radius:inherit;overflow:hidden;display:flex;align-items:center}.bar{animation:none;width:100%;height:var(--_active-indicator-height);transform-origin:left center;transition:transform 250ms cubic-bezier(0.4, 0, 0.6, 1)}.secondary-bar{display:none}.bar-inner{inset:0;animation:none;background:var(--_active-indicator-color)}.inactive-track{background:var(--_track-color);inset:0;transition:transform 250ms cubic-bezier(0.4, 0, 0.6, 1);transform-origin:left center}.dots{inset:0;animation:linear infinite 250ms;animation-name:buffering;background-color:var(--_track-color);background-repeat:repeat-x;-webkit-mask-image:url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2' preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2' preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E");z-index:-1}.indeterminate .bar{transition:none}.indeterminate .primary-bar{inset-inline-start:-145.167%}.indeterminate .secondary-bar{inset-inline-start:-54.8889%;display:block}.indeterminate .dots{display:none}.indeterminate .primary-bar{animation:linear infinite 2s;animation-name:primary-indeterminate-translate}.indeterminate .primary-bar>.bar-inner{animation:linear infinite 2s primary-indeterminate-scale}.indeterminate.four-color .primary-bar>.bar-inner{animation-name:primary-indeterminate-scale,four-color;animation-duration:2s,4s}.indeterminate .secondary-bar{animation:linear infinite 2s;animation-name:secondary-indeterminate-translate}.indeterminate .secondary-bar>.bar-inner{animation:linear infinite 2s secondary-indeterminate-scale}.indeterminate.four-color .secondary-bar>.bar-inner{animation-name:secondary-indeterminate-scale,four-color;animation-duration:2s,4s}:host-context([dir=rtl]),:host([dir=rtl]){transform:scale(-1)}:host(:dir(rtl)){transform:scale(-1)}@keyframes primary-indeterminate-scale{0%{transform:scaleX(0.08)}36.65%{animation-timing-function:cubic-bezier(0.334731, 0.12482, 0.785844, 1);transform:scaleX(0.08)}69.15%{animation-timing-function:cubic-bezier(0.06, 0.11, 0.6, 1);transform:scaleX(0.661479)}100%{transform:scaleX(0.08)}}@keyframes secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);transform:scaleX(0.08)}19.15%{animation-timing-function:cubic-bezier(0.152313, 0.196432, 0.648374, 1.00432);transform:scaleX(0.457104)}44.15%{animation-timing-function:cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);transform:scaleX(0.72796)}100%{transform:scaleX(0.08)}}@keyframes buffering{0%{transform:translateX(calc(var(--_track-height) / 2 * 5))}}@keyframes primary-indeterminate-translate{0%{transform:translateX(0px)}20%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(0px)}59.15%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(83.6714%)}100%{transform:translateX(200.611%)}}@keyframes secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(0.15, 0, 0.515058, 0.409685);transform:translateX(0px)}25%{animation-timing-function:cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);transform:translateX(37.6519%)}48.35%{animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);transform:translateX(84.3862%)}100%{transform:translateX(160.278%)}}@keyframes four-color{0%{background:var(--_four-color-active-indicator-one-color)}15%{background:var(--_four-color-active-indicator-one-color)}25%{background:var(--_four-color-active-indicator-two-color)}40%{background:var(--_four-color-active-indicator-two-color)}50%{background:var(--_four-color-active-indicator-three-color)}65%{background:var(--_four-color-active-indicator-three-color)}75%{background:var(--_four-color-active-indicator-four-color)}90%{background:var(--_four-color-active-indicator-four-color)}100%{background:var(--_four-color-active-indicator-one-color)}}@media(forced-colors: active){:host{outline:1px solid CanvasText}.bar-inner,.dots{background-color:CanvasText}}/*# sourceMappingURL=linear-progress-styles.css.map */
+export const styles = css `:host{--_active-indicator-color: var(--md-linear-progress-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_active-indicator-height: var(--md-linear-progress-active-indicator-height, 4px);--_four-color-active-indicator-four-color: var(--md-linear-progress-four-color-active-indicator-four-color, var(--md-sys-color-tertiary-container, #ffd8e4));--_four-color-active-indicator-one-color: var(--md-linear-progress-four-color-active-indicator-one-color, var(--md-sys-color-primary, #6750a4));--_four-color-active-indicator-three-color: var(--md-linear-progress-four-color-active-indicator-three-color, var(--md-sys-color-tertiary, #7d5260));--_four-color-active-indicator-two-color: var(--md-linear-progress-four-color-active-indicator-two-color, var(--md-sys-color-primary-container, #eaddff));--_track-color: var(--md-linear-progress-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_track-height: var(--md-linear-progress-track-height, 4px);--_track-shape: var(--md-linear-progress-track-shape, 0px);border-radius:var(--_track-shape);display:flex;position:relative;min-width:80px;height:var(--_track-height);content-visibility:auto;contain:strict}.progress,.dots,.inactive-track,.bar,.bar-inner{position:absolute}.progress{direction:ltr;inset:0;border-radius:inherit;overflow:hidden;display:flex;align-items:center}.bar{animation:none;width:100%;height:var(--_active-indicator-height);transform-origin:left center;transition:transform 250ms cubic-bezier(0.4, 0, 0.6, 1)}.secondary-bar{display:none}.bar-inner{inset:0;animation:none;background:var(--_active-indicator-color)}.inactive-track{background:var(--_track-color);inset:0;transition:transform 250ms cubic-bezier(0.4, 0, 0.6, 1);transform-origin:left center}.dots{inset:0;animation:linear infinite 250ms;animation-name:buffering;background-color:var(--_track-color);background-repeat:repeat-x;-webkit-mask-image:url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2' preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2' preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E");z-index:-1}.dots[hidden]{display:none}.indeterminate .bar{transition:none}.indeterminate .primary-bar{inset-inline-start:-145.167%}.indeterminate .secondary-bar{inset-inline-start:-54.8889%;display:block}.indeterminate .primary-bar{animation:linear infinite 2s;animation-name:primary-indeterminate-translate}.indeterminate .primary-bar>.bar-inner{animation:linear infinite 2s primary-indeterminate-scale}.indeterminate.four-color .primary-bar>.bar-inner{animation-name:primary-indeterminate-scale,four-color;animation-duration:2s,4s}.indeterminate .secondary-bar{animation:linear infinite 2s;animation-name:secondary-indeterminate-translate}.indeterminate .secondary-bar>.bar-inner{animation:linear infinite 2s secondary-indeterminate-scale}.indeterminate.four-color .secondary-bar>.bar-inner{animation-name:secondary-indeterminate-scale,four-color;animation-duration:2s,4s}:host-context([dir=rtl]),:host([dir=rtl]){transform:scale(-1)}:host(:dir(rtl)){transform:scale(-1)}@keyframes primary-indeterminate-scale{0%{transform:scaleX(0.08)}36.65%{animation-timing-function:cubic-bezier(0.334731, 0.12482, 0.785844, 1);transform:scaleX(0.08)}69.15%{animation-timing-function:cubic-bezier(0.06, 0.11, 0.6, 1);transform:scaleX(0.661479)}100%{transform:scaleX(0.08)}}@keyframes secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);transform:scaleX(0.08)}19.15%{animation-timing-function:cubic-bezier(0.152313, 0.196432, 0.648374, 1.00432);transform:scaleX(0.457104)}44.15%{animation-timing-function:cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);transform:scaleX(0.72796)}100%{transform:scaleX(0.08)}}@keyframes buffering{0%{transform:translateX(calc(var(--_track-height) / 2 * 5))}}@keyframes primary-indeterminate-translate{0%{transform:translateX(0px)}20%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(0px)}59.15%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(83.6714%)}100%{transform:translateX(200.611%)}}@keyframes secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(0.15, 0, 0.515058, 0.409685);transform:translateX(0px)}25%{animation-timing-function:cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);transform:translateX(37.6519%)}48.35%{animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);transform:translateX(84.3862%)}100%{transform:translateX(160.278%)}}@keyframes four-color{0%{background:var(--_four-color-active-indicator-one-color)}15%{background:var(--_four-color-active-indicator-one-color)}25%{background:var(--_four-color-active-indicator-two-color)}40%{background:var(--_four-color-active-indicator-two-color)}50%{background:var(--_four-color-active-indicator-three-color)}65%{background:var(--_four-color-active-indicator-three-color)}75%{background:var(--_four-color-active-indicator-four-color)}90%{background:var(--_four-color-active-indicator-four-color)}100%{background:var(--_four-color-active-indicator-one-color)}}@media(forced-colors: active){:host{outline:1px solid CanvasText}.bar-inner,.dots{background-color:CanvasText}}/*# sourceMappingURL=linear-progress-styles.css.map */
 `;
 //# sourceMappingURL=linear-progress-styles.css.js.map

package/progress/internal/linear-progress-styles.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"linear-progress-styles.css.js","sourceRoot":"","sources":["linear-progress-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{--_active-indicator-color: var(--md-linear-progress-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_active-indicator-height: var(--md-linear-progress-active-indicator-height, 4px);--_four-color-active-indicator-four-color: var(--md-linear-progress-four-color-active-indicator-four-color, var(--md-sys-color-tertiary-container, #ffd8e4));--_four-color-active-indicator-one-color: var(--md-linear-progress-four-color-active-indicator-one-color, var(--md-sys-color-primary, #6750a4));--_four-color-active-indicator-three-color: var(--md-linear-progress-four-color-active-indicator-three-color, var(--md-sys-color-tertiary, #7d5260));--_four-color-active-indicator-two-color: var(--md-linear-progress-four-color-active-indicator-two-color, var(--md-sys-color-primary-container, #eaddff));--_track-color: var(--md-linear-progress-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_track-height: var(--md-linear-progress-track-height, 4px);--_track-shape: var(--md-linear-progress-track-shape, 0px);border-radius:var(--_track-shape);display:flex;position:relative;min-width:80px;height:var(--_track-height);content-visibility:auto;contain:strict}.progress,.dots,.inactive-track,.bar,.bar-inner{position:absolute}.progress{direction:ltr;inset:0;border-radius:inherit;overflow:hidden;display:flex;align-items:center}.bar{animation:none;width:100%;height:var(--_active-indicator-height);transform-origin:left center;transition:transform 250ms cubic-bezier(0.4, 0, 0.6, 1)}.secondary-bar{display:none}.bar-inner{inset:0;animation:none;background:var(--_active-indicator-color)}.inactive-track{background:var(--_track-color);inset:0;transition:transform 250ms cubic-bezier(0.4, 0, 0.6, 1);transform-origin:left center}.dots{inset:0;animation:linear infinite 250ms;animation-name:buffering;background-color:var(--_track-color);background-repeat:repeat-x;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2' preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2' preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E\");z-index:-1}.indeterminate .bar{transition:none}.indeterminate .primary-bar{inset-inline-start:-145.167%}.indeterminate .secondary-bar{inset-inline-start:-54.8889%;display:block}.indeterminate .dots{display:none}.indeterminate .primary-bar{animation:linear infinite 2s;animation-name:primary-indeterminate-translate}.indeterminate .primary-bar>.bar-inner{animation:linear infinite 2s primary-indeterminate-scale}.indeterminate.four-color .primary-bar>.bar-inner{animation-name:primary-indeterminate-scale,four-color;animation-duration:2s,4s}.indeterminate .secondary-bar{animation:linear infinite 2s;animation-name:secondary-indeterminate-translate}.indeterminate .secondary-bar>.bar-inner{animation:linear infinite 2s secondary-indeterminate-scale}.indeterminate.four-color .secondary-bar>.bar-inner{animation-name:secondary-indeterminate-scale,four-color;animation-duration:2s,4s}:host-context([dir=rtl]),:host([dir=rtl]){transform:scale(-1)}:host(:dir(rtl)){transform:scale(-1)}@keyframes primary-indeterminate-scale{0%{transform:scaleX(0.08)}36.65%{animation-timing-function:cubic-bezier(0.334731, 0.12482, 0.785844, 1);transform:scaleX(0.08)}69.15%{animation-timing-function:cubic-bezier(0.06, 0.11, 0.6, 1);transform:scaleX(0.661479)}100%{transform:scaleX(0.08)}}@keyframes secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);transform:scaleX(0.08)}19.15%{animation-timing-function:cubic-bezier(0.152313, 0.196432, 0.648374, 1.00432);transform:scaleX(0.457104)}44.15%{animation-timing-function:cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);transform:scaleX(0.72796)}100%{transform:scaleX(0.08)}}@keyframes buffering{0%{transform:translateX(calc(var(--_track-height) / 2 * 5))}}@keyframes primary-indeterminate-translate{0%{transform:translateX(0px)}20%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(0px)}59.15%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(83.6714%)}100%{transform:translateX(200.611%)}}@keyframes secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(0.15, 0, 0.515058, 0.409685);transform:translateX(0px)}25%{animation-timing-function:cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);transform:translateX(37.6519%)}48.35%{animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);transform:translateX(84.3862%)}100%{transform:translateX(160.278%)}}@keyframes four-color{0%{background:var(--_four-color-active-indicator-one-color)}15%{background:var(--_four-color-active-indicator-one-color)}25%{background:var(--_four-color-active-indicator-two-color)}40%{background:var(--_four-color-active-indicator-two-color)}50%{background:var(--_four-color-active-indicator-three-color)}65%{background:var(--_four-color-active-indicator-three-color)}75%{background:var(--_four-color-active-indicator-four-color)}90%{background:var(--_four-color-active-indicator-four-color)}100%{background:var(--_four-color-active-indicator-one-color)}}@media(forced-colors: active){:host{outline:1px solid CanvasText}.bar-inner,.dots{background-color:CanvasText}}/*# sourceMappingURL=linear-progress-styles.css.map */\n`;\n "]}
+{"version":3,"file":"linear-progress-styles.css.js","sourceRoot":"","sources":["linear-progress-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{--_active-indicator-color: var(--md-linear-progress-active-indicator-color, var(--md-sys-color-primary, #6750a4));--_active-indicator-height: var(--md-linear-progress-active-indicator-height, 4px);--_four-color-active-indicator-four-color: var(--md-linear-progress-four-color-active-indicator-four-color, var(--md-sys-color-tertiary-container, #ffd8e4));--_four-color-active-indicator-one-color: var(--md-linear-progress-four-color-active-indicator-one-color, var(--md-sys-color-primary, #6750a4));--_four-color-active-indicator-three-color: var(--md-linear-progress-four-color-active-indicator-three-color, var(--md-sys-color-tertiary, #7d5260));--_four-color-active-indicator-two-color: var(--md-linear-progress-four-color-active-indicator-two-color, var(--md-sys-color-primary-container, #eaddff));--_track-color: var(--md-linear-progress-track-color, var(--md-sys-color-surface-container-highest, #e6e0e9));--_track-height: var(--md-linear-progress-track-height, 4px);--_track-shape: var(--md-linear-progress-track-shape, 0px);border-radius:var(--_track-shape);display:flex;position:relative;min-width:80px;height:var(--_track-height);content-visibility:auto;contain:strict}.progress,.dots,.inactive-track,.bar,.bar-inner{position:absolute}.progress{direction:ltr;inset:0;border-radius:inherit;overflow:hidden;display:flex;align-items:center}.bar{animation:none;width:100%;height:var(--_active-indicator-height);transform-origin:left center;transition:transform 250ms cubic-bezier(0.4, 0, 0.6, 1)}.secondary-bar{display:none}.bar-inner{inset:0;animation:none;background:var(--_active-indicator-color)}.inactive-track{background:var(--_track-color);inset:0;transition:transform 250ms cubic-bezier(0.4, 0, 0.6, 1);transform-origin:left center}.dots{inset:0;animation:linear infinite 250ms;animation-name:buffering;background-color:var(--_track-color);background-repeat:repeat-x;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2' preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 2' preserveAspectRatio='xMinYMin slice'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E\");z-index:-1}.dots[hidden]{display:none}.indeterminate .bar{transition:none}.indeterminate .primary-bar{inset-inline-start:-145.167%}.indeterminate .secondary-bar{inset-inline-start:-54.8889%;display:block}.indeterminate .primary-bar{animation:linear infinite 2s;animation-name:primary-indeterminate-translate}.indeterminate .primary-bar>.bar-inner{animation:linear infinite 2s primary-indeterminate-scale}.indeterminate.four-color .primary-bar>.bar-inner{animation-name:primary-indeterminate-scale,four-color;animation-duration:2s,4s}.indeterminate .secondary-bar{animation:linear infinite 2s;animation-name:secondary-indeterminate-translate}.indeterminate .secondary-bar>.bar-inner{animation:linear infinite 2s secondary-indeterminate-scale}.indeterminate.four-color .secondary-bar>.bar-inner{animation-name:secondary-indeterminate-scale,four-color;animation-duration:2s,4s}:host-context([dir=rtl]),:host([dir=rtl]){transform:scale(-1)}:host(:dir(rtl)){transform:scale(-1)}@keyframes primary-indeterminate-scale{0%{transform:scaleX(0.08)}36.65%{animation-timing-function:cubic-bezier(0.334731, 0.12482, 0.785844, 1);transform:scaleX(0.08)}69.15%{animation-timing-function:cubic-bezier(0.06, 0.11, 0.6, 1);transform:scaleX(0.661479)}100%{transform:scaleX(0.08)}}@keyframes secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971);transform:scaleX(0.08)}19.15%{animation-timing-function:cubic-bezier(0.152313, 0.196432, 0.648374, 1.00432);transform:scaleX(0.457104)}44.15%{animation-timing-function:cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179);transform:scaleX(0.72796)}100%{transform:scaleX(0.08)}}@keyframes buffering{0%{transform:translateX(calc(var(--_track-height) / 2 * 5))}}@keyframes primary-indeterminate-translate{0%{transform:translateX(0px)}20%{animation-timing-function:cubic-bezier(0.5, 0, 0.701732, 0.495819);transform:translateX(0px)}59.15%{animation-timing-function:cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);transform:translateX(83.6714%)}100%{transform:translateX(200.611%)}}@keyframes secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(0.15, 0, 0.515058, 0.409685);transform:translateX(0px)}25%{animation-timing-function:cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);transform:translateX(37.6519%)}48.35%{animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);transform:translateX(84.3862%)}100%{transform:translateX(160.278%)}}@keyframes four-color{0%{background:var(--_four-color-active-indicator-one-color)}15%{background:var(--_four-color-active-indicator-one-color)}25%{background:var(--_four-color-active-indicator-two-color)}40%{background:var(--_four-color-active-indicator-two-color)}50%{background:var(--_four-color-active-indicator-three-color)}65%{background:var(--_four-color-active-indicator-three-color)}75%{background:var(--_four-color-active-indicator-four-color)}90%{background:var(--_four-color-active-indicator-four-color)}100%{background:var(--_four-color-active-indicator-one-color)}}@media(forced-colors: active){:host{outline:1px solid CanvasText}.bar-inner,.dots{background-color:CanvasText}}/*# sourceMappingURL=linear-progress-styles.css.map */\n`;\n "]}

package/progress/internal/linear-progress.js

@@ -29,8 +29,11 @@ export class LinearProgress extends Progress {
         const dotStyles = {
             transform: `scaleX(${(this.indeterminate ? 1 : this.buffer / this.max) * 100}%)`,
         };
+        // Only display dots when visible - this prevents invisible infinite
+        // animation.
+        const hideDots = this.indeterminate || this.buffer >= this.max || this.value >= this.max;
         return html `
-      <div class="dots"></div>
+      <div class="dots" ?hidden=${hideDots}></div>
       <div class="inactive-track" style=${styleMap(dotStyles)}></div>
       <div class="bar primary-bar" style=${styleMap(progressStyles)}>
         <div class="bar-inner"></div>

package/progress/internal/linear-progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"linear-progress.js","sourceRoot":"","sources":["linear-progress.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAEvC;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,QAAQ;IAA5C;;QACE;;WAEG;QACuB,WAAM,GAAG,CAAC,CAAC;IA4BvC,CAAC;IA1BC,mEAAmE;IACnE,8EAA8E;IAC9E,mDAAmD;IAChC,eAAe;QAChC,MAAM,cAAc,GAAG;YACrB,SAAS,EAAE,UACT,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GACrD,IAAI;SACL,CAAC;QACF,MAAM,SAAS,GAAG;YAChB,SAAS,EAAE,UACT,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GACtD,IAAI;SACL,CAAC;QAEF,OAAO,IAAI,CAAA;;0CAE2B,QAAQ,CAAC,SAAS,CAAC;2CAClB,QAAQ,CAAC,cAAc,CAAC;;;;;;KAM9D,CAAC;IACJ,CAAC;CACF;AA5B2B;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;8CAAY","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {styleMap} from 'lit/directives/style-map.js';\n\nimport {Progress} from './progress.js';\n\n/**\n * A linear progress component.\n */\nexport class LinearProgress extends Progress {\n  /**\n   * Buffer amount to display, a fraction between 0 and `max`.\n   */\n  @property({type: Number}) buffer = 1;\n\n  // Note, the indeterminate animation is rendered with transform %'s\n  // Previously, this was optimized to use px calculated with the resizeObserver\n  // due to a now fixed Chrome bug: crbug.com/389359.\n  protected override renderIndicator() {\n    const progressStyles = {\n      transform: `scaleX(${\n        (this.indeterminate ? 1 : this.value / this.max) * 100\n      }%)`,\n    };\n    const dotStyles = {\n      transform: `scaleX(${\n        (this.indeterminate ? 1 : this.buffer / this.max) * 100\n      }%)`,\n    };\n\n    return html`\n      <div class=\"dots\"></div>\n      <div class=\"inactive-track\" style=${styleMap(dotStyles)}></div>\n      <div class=\"bar primary-bar\" style=${styleMap(progressStyles)}>\n        <div class=\"bar-inner\"></div>\n      </div>\n      <div class=\"bar secondary-bar\">\n        <div class=\"bar-inner\"></div>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"linear-progress.js","sourceRoot":"","sources":["linear-progress.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AACzB,OAAO,EAAC,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,6BAA6B,CAAC;AAErD,OAAO,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAEvC;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,QAAQ;IAA5C;;QACE;;WAEG;QACuB,WAAM,GAAG,CAAC,CAAC;IAgCvC,CAAC;IA9BC,mEAAmE;IACnE,8EAA8E;IAC9E,mDAAmD;IAChC,eAAe;QAChC,MAAM,cAAc,GAAG;YACrB,SAAS,EAAE,UACT,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GACrD,IAAI;SACL,CAAC;QACF,MAAM,SAAS,GAAG;YAChB,SAAS,EAAE,UACT,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GACtD,IAAI;SACL,CAAC;QAEF,oEAAoE;QACpE,aAAa;QACb,MAAM,QAAQ,GACZ,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,GAAG,CAAC;QAC1E,OAAO,IAAI,CAAA;kCACmB,QAAQ;0CACA,QAAQ,CAAC,SAAS,CAAC;2CAClB,QAAQ,CAAC,cAAc,CAAC;;;;;;KAM9D,CAAC;IACJ,CAAC;CACF;AAhC2B;IAAzB,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;8CAAY","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {styleMap} from 'lit/directives/style-map.js';\n\nimport {Progress} from './progress.js';\n\n/**\n * A linear progress component.\n */\nexport class LinearProgress extends Progress {\n  /**\n   * Buffer amount to display, a fraction between 0 and `max`.\n   */\n  @property({type: Number}) buffer = 1;\n\n  // Note, the indeterminate animation is rendered with transform %'s\n  // Previously, this was optimized to use px calculated with the resizeObserver\n  // due to a now fixed Chrome bug: crbug.com/389359.\n  protected override renderIndicator() {\n    const progressStyles = {\n      transform: `scaleX(${\n        (this.indeterminate ? 1 : this.value / this.max) * 100\n      }%)`,\n    };\n    const dotStyles = {\n      transform: `scaleX(${\n        (this.indeterminate ? 1 : this.buffer / this.max) * 100\n      }%)`,\n    };\n\n    // Only display dots when visible - this prevents invisible infinite\n    // animation.\n    const hideDots =\n      this.indeterminate || this.buffer >= this.max || this.value >= this.max;\n    return html`\n      <div class=\"dots\" ?hidden=${hideDots}></div>\n      <div class=\"inactive-track\" style=${styleMap(dotStyles)}></div>\n      <div class=\"bar primary-bar\" style=${styleMap(progressStyles)}>\n        <div class=\"bar-inner\"></div>\n      </div>\n      <div class=\"bar secondary-bar\">\n        <div class=\"bar-inner\"></div>\n      </div>\n    `;\n  }\n}\n"]}

package/radio/internal/radio.js

@@ -10,7 +10,7 @@ import '../../ripple/ripple.js';
 import { html, isServer, LitElement } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { isActivationClick } from '../../internal/controller/events.js';
+import { isActivationClick } from '../../internal/events/form-label-activation.js';
 import { createValidator, getValidityAnchor, mixinConstraintValidation, } from '../../labs/behaviors/constraint-validation.js';
 import { internals, mixinElementInternals, } from '../../labs/behaviors/element-internals.js';
 import { mixinFocusable } from '../../labs/behaviors/focusable.js';