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

package/iconbutton/lib/icon-button.js

@@ -3,9 +3,8 @@
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import { __decorate, __metadata } from "tslib";
-// This is required for @ariaProperty
-// tslint:disable:no-new-decorators
+var _a;
+import { __decorate } from "tslib";
 import '../../focus/focus-ring.js';
 import '../../icon/icon.js';
 import '../../ripple/ripple.js';
@@ -14,8 +13,8 @@ import { property, query, queryAsync, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { when } from 'lit/directives/when.js';
 import { html as staticHtml, literal } from 'lit/static-html.js';
+import { requestUpdateOnAriaChange } from '../../aria/delegate.js';
 import { isRtl } from '../../controller/is-rtl.js';
-import { ariaProperty } from '../../decorators/aria-property.js';
 import { pointerPress, shouldShowStrongFocus } from '../../focus/strong-focus.js';
 import { ripple } from '../../ripple/directive.js';
 // tslint:disable-next-line:enforce-comments-on-exported-symbols
@@ -70,19 +69,21 @@ export class IconButton extends LitElement {
     }
     render() {
         const tag = this.href ? literal `div` : literal `button`;
-        const hasToggledAriaLabel = this.ariaLabel && this.selectedAriaLabel;
+        // Needed for closure conformance
+        const { ariaLabel, ariaHasPopup, ariaExpanded } = this;
+        const hasToggledAriaLabel = ariaLabel && this.selectedAriaLabel;
         const ariaPressedValue = hasToggledAriaLabel ? nothing : this.selected;
         let ariaLabelValue = nothing;
         if (!this.href) {
             ariaLabelValue = (hasToggledAriaLabel && this.selected) ?
                 this.selectedAriaLabel :
-                this.ariaLabel;
+                ariaLabel;
         }
         return staticHtml `<${tag}
         class="md3-icon-button ${classMap(this.getRenderClasses())}"
         aria-label="${ariaLabelValue || nothing}"
-        aria-haspopup="${!this.href && this.ariaHasPopup || nothing}"
-        aria-expanded="${!this.href && this.ariaExpanded || nothing}"
+        aria-haspopup="${!this.href && ariaHasPopup || nothing}"
+        aria-expanded="${!this.href && ariaExpanded || nothing}"
         aria-pressed="${ariaPressedValue}"
         ?disabled="${!this.href && this.disabled}"
         @focus="${this.handleFocus}"
@@ -99,11 +100,13 @@ export class IconButton extends LitElement {
   </${tag}>`;
     }
     renderLink() {
+        // Needed for closure conformance
+        const { ariaLabel } = this;
         return html `<a class="md3-icon-button__link" href="${this.href}"
                   target="${this.target || nothing}"
                   @focus="${this.handleFocus}"
                   @blur="${this.handleBlur}"
-                  aria-label="${this.ariaLabel || nothing}"></a>`;
+                  aria-label="${ariaLabel || nothing}"></a>`;
     }
     getRenderClasses() {
         return {
@@ -149,67 +152,44 @@ export class IconButton extends LitElement {
         this.dispatchEvent(new Event('change', { bubbles: true }));
     }
 }
+_a = IconButton;
+(() => {
+    requestUpdateOnAriaChange(_a);
+})();
 __decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Object)
+    property({ type: Boolean, reflect: true })
 ], IconButton.prototype, "disabled", void 0);
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
+    property({ type: Boolean })
 ], IconButton.prototype, "flipIconInRtl", void 0);
 __decorate([
-    ariaProperty,
-    property({ attribute: 'data-aria-label' }),
-    __metadata("design:type", String)
-], IconButton.prototype, "ariaLabel", void 0);
-__decorate([
-    ariaProperty,
-    property({ attribute: 'data-aria-haspopup' }),
-    __metadata("design:type", String)
-], IconButton.prototype, "ariaHasPopup", void 0);
-__decorate([
-    ariaProperty,
-    property({ attribute: 'data-aria-expanded' }),
-    __metadata("design:type", String)
-], IconButton.prototype, "ariaExpanded", void 0);
-__decorate([
-    property(),
-    __metadata("design:type", Object)
+    property()
 ], IconButton.prototype, "href", void 0);
 __decorate([
-    property(),
-    __metadata("design:type", Object)
+    property()
 ], IconButton.prototype, "target", void 0);
 __decorate([
-    property({ attribute: 'selected-aria-label', reflect: true }),
-    __metadata("design:type", String)
+    property({ attribute: 'selected-aria-label', reflect: true })
 ], IconButton.prototype, "selectedAriaLabel", void 0);
 __decorate([
-    property({ type: Boolean }),
-    __metadata("design:type", Object)
+    property({ type: Boolean })
 ], IconButton.prototype, "toggle", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true }),
-    __metadata("design:type", Object)
+    property({ type: Boolean, reflect: true })
 ], IconButton.prototype, "selected", void 0);
 __decorate([
-    query('button'),
-    __metadata("design:type", HTMLElement)
+    query('button')
 ], IconButton.prototype, "buttonElement", void 0);
 __decorate([
-    queryAsync('md-ripple'),
-    __metadata("design:type", Promise)
+    queryAsync('md-ripple')
 ], IconButton.prototype, "ripple", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", Object)
+    state()
 ], IconButton.prototype, "showFocusRing", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", Object)
+    state()
 ], IconButton.prototype, "showRipple", void 0);
 __decorate([
-    state(),
-    __metadata("design:type", Boolean)
+    state()
 ], IconButton.prototype, "flipIcon", void 0);
 //# sourceMappingURL=icon-button.js.map

package/iconbutton/lib/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["icon-button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\n// This is required for @ariaProperty\n// tslint:disable:no-new-decorators\n\nimport '../../focus/focus-ring.js';\nimport '../../icon/icon.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, TemplateResult} from 'lit';\nimport {property, query, queryAsync, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {when} from 'lit/directives/when.js';\nimport {html as staticHtml, literal} from 'lit/static-html.js';\n\nimport {isRtl} from '../../controller/is-rtl.js';\nimport {ariaProperty} from '../../decorators/aria-property.js';\nimport {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';\nimport {ripple} from '../../ripple/directive.js';\nimport {MdRipple} from '../../ripple/ripple.js';\nimport {ARIAExpanded, ARIAHasPopup} from '../../types/aria.js';\n\ntype LinkTarget = '_blank'|'_parent'|'_self'|'_top';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class IconButton extends LitElement {\n  /**\n   * Disables the icon button and makes it non-interactive.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * Flips the icon if it is in an RTL context at startup.\n   */\n  @property({type: Boolean}) flipIconInRtl = false;\n\n  @ariaProperty\n  @property({attribute: 'data-aria-label'})\n  override ariaLabel!: string;\n\n  @ariaProperty\n  @property({attribute: 'data-aria-haspopup'})\n  override ariaHasPopup!: ARIAHasPopup;\n\n  @ariaProperty\n  @property({attribute: 'data-aria-expanded'})\n  override ariaExpanded!: ARIAExpanded;\n\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.\n   */\n  @property() href = '';\n\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `target` attribute.\n   */\n  @property() target = '';\n\n  /**\n   * The `aria-label` of the button when the button is toggleable and selected.\n   */\n  @property({attribute: 'selected-aria-label', reflect: true})\n  selectedAriaLabel!: string;\n\n  /**\n   * When true, the button will toggle between selected and unselected\n   * states\n   */\n  @property({type: Boolean}) toggle = false;\n\n  /**\n   * Sets the selected state. When false, displays the default icon. When true,\n   * displays the `selectedIcon`, or the default icon If no `selectedIcon` is\n   * provided.\n   */\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  @query('button') protected buttonElement!: HTMLElement;\n\n  @queryAsync('md-ripple') protected ripple!: Promise<MdRipple|null>;\n\n  @state() protected showFocusRing = false;\n\n  @state() protected showRipple = false;\n\n  @state() protected flipIcon: boolean = isRtl(this, this.flipIconInRtl);\n\n  protected getRipple = () => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  protected readonly renderRipple = () => {\n    return html`<md-ripple ?disabled=\"${\n    !this.href && this.disabled}\"></md-ripple>`;\n  };\n\n  /**\n   * Link buttons cannot be disabled.\n   */\n  override willUpdate() {\n    if (this.href) {\n      this.disabled = false;\n    }\n  }\n\n  protected override render(): TemplateResult {\n    const tag = this.href ? literal`div` : literal`button`;\n    const hasToggledAriaLabel = this.ariaLabel && this.selectedAriaLabel;\n    const ariaPressedValue = hasToggledAriaLabel ? nothing : this.selected;\n    let ariaLabelValue: string|typeof nothing = nothing;\n    if (!this.href) {\n      ariaLabelValue = (hasToggledAriaLabel && this.selected) ?\n          this.selectedAriaLabel :\n          this.ariaLabel;\n    }\n    return staticHtml`<${tag}\n        class=\"md3-icon-button ${classMap(this.getRenderClasses())}\"\n        aria-label=\"${ariaLabelValue || nothing}\"\n        aria-haspopup=\"${!this.href && this.ariaHasPopup || nothing}\"\n        aria-expanded=\"${!this.href && this.ariaExpanded || nothing}\"\n        aria-pressed=\"${ariaPressedValue}\"\n        ?disabled=\"${!this.href && this.disabled}\"\n        @focus=\"${this.handleFocus}\"\n        @blur=\"${this.handleBlur}\"\n        @pointerdown=\"${this.handlePointerDown}\"\n        @click=\"${this.handleClick}\"\n        ${ripple(this.getRipple)}>\n        ${this.renderFocusRing()}\n        ${when(this.showRipple, this.renderRipple)}\n        ${!this.selected ? this.renderIcon() : nothing}\n        ${this.selected ? this.renderSelectedIcon() : nothing}\n        ${this.renderTouchTarget()}\n        ${this.href && this.renderLink()}\n  </${tag}>`;\n  }\n\n  protected renderLink() {\n    return html`<a class=\"md3-icon-button__link\" href=\"${this.href}\"\n                  target=\"${this.target as LinkTarget || nothing}\"\n                  @focus=\"${this.handleFocus}\"\n                  @blur=\"${this.handleBlur}\"\n                  aria-label=\"${this.ariaLabel || nothing}\"></a>`;\n  }\n\n  protected getRenderClasses(): ClassInfo {\n    return {\n      'md3-icon-button--flip-icon': this.flipIcon,\n      'md3-icon-button--selected': this.toggle && this.selected,\n    };\n  }\n\n  protected renderIcon(): TemplateResult {\n    return html`<md-icon class=\"md3-icon-button__icon\"><slot></slot></md-icon>`;\n  }\n\n  protected renderSelectedIcon() {\n    // Use default slot as fallback to not require specifying multiple icons\n    return html`<md-icon class=\"md3-icon-button__icon md3-icon-button__icon--selected\"><slot name=\"selectedIcon\"><slot></slot></slot></md-icon>`;\n  }\n\n  protected renderTouchTarget(): TemplateResult {\n    return html`<span class=\"md3-icon-button__touch\"></span>`;\n  }\n\n  protected renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring .visible=\"${\n        this.showFocusRing}\"></md-focus-ring>`;\n  }\n\n  override connectedCallback() {\n    this.flipIcon = isRtl(this, this.flipIconInRtl);\n    super.connectedCallback();\n  }\n\n  handlePointerDown() {\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  protected handleClick() {\n    if (!this.toggle || this.disabled) {\n      return;\n    }\n\n    this.selected = !this.selected;\n    this.dispatchEvent(\n        new InputEvent('input', {bubbles: true, composed: true}));\n    // Bubbles but does not compose to mimic native browser <input> & <select>\n    // Additionally, native change event is not an InputEvent.\n    this.dispatchEvent(new Event('change', {bubbles: true}));\n  }\n}\n"]}
+{"version":3,"file":"icon-button.js","sourceRoot":"","sources":["icon-button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2018 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport '../../focus/focus-ring.js';\nimport '../../icon/icon.js';\nimport '../../ripple/ripple.js';\n\nimport {html, LitElement, nothing, TemplateResult} from 'lit';\nimport {property, query, queryAsync, state} from 'lit/decorators.js';\nimport {ClassInfo, classMap} from 'lit/directives/class-map.js';\nimport {when} from 'lit/directives/when.js';\nimport {html as staticHtml, literal} from 'lit/static-html.js';\n\nimport {requestUpdateOnAriaChange} from '../../aria/delegate.js';\nimport {isRtl} from '../../controller/is-rtl.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\ntype LinkTarget = '_blank'|'_parent'|'_self'|'_top';\n\n// tslint:disable-next-line:enforce-comments-on-exported-symbols\nexport class IconButton extends LitElement {\n  static {\n    requestUpdateOnAriaChange(this);\n  }\n\n  /**\n   * Disables the icon button and makes it non-interactive.\n   */\n  @property({type: Boolean, reflect: true}) disabled = false;\n\n  /**\n   * Flips the icon if it is in an RTL context at startup.\n   */\n  @property({type: Boolean}) flipIconInRtl = false;\n\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `href` resource attribute.\n   */\n  @property() href = '';\n\n  /**\n   * Sets the underlying `HTMLAnchorElement`'s `target` attribute.\n   */\n  @property() target = '';\n\n  /**\n   * The `aria-label` of the button when the button is toggleable and selected.\n   */\n  @property({attribute: 'selected-aria-label', reflect: true})\n  selectedAriaLabel!: string;\n\n  /**\n   * When true, the button will toggle between selected and unselected\n   * states\n   */\n  @property({type: Boolean}) toggle = false;\n\n  /**\n   * Sets the selected state. When false, displays the default icon. When true,\n   * displays the `selectedIcon`, or the default icon If no `selectedIcon` is\n   * provided.\n   */\n  @property({type: Boolean, reflect: true}) selected = false;\n\n  @query('button') protected buttonElement!: HTMLElement;\n\n  @queryAsync('md-ripple') protected ripple!: Promise<MdRipple|null>;\n\n  @state() protected showFocusRing = false;\n\n  @state() protected showRipple = false;\n\n  @state() protected flipIcon: boolean = isRtl(this, this.flipIconInRtl);\n\n  protected getRipple = () => {\n    this.showRipple = true;\n    return this.ripple;\n  };\n\n  protected readonly renderRipple = () => {\n    return html`<md-ripple ?disabled=\"${\n    !this.href && this.disabled}\"></md-ripple>`;\n  };\n\n  /**\n   * Link buttons cannot be disabled.\n   */\n  override willUpdate() {\n    if (this.href) {\n      this.disabled = false;\n    }\n  }\n\n  protected override render(): TemplateResult {\n    const tag = this.href ? literal`div` : literal`button`;\n    // Needed for closure conformance\n    const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;\n    const hasToggledAriaLabel = ariaLabel && this.selectedAriaLabel;\n    const ariaPressedValue = hasToggledAriaLabel ? nothing : this.selected;\n    let ariaLabelValue: string|null|typeof nothing = nothing;\n    if (!this.href) {\n      ariaLabelValue = (hasToggledAriaLabel && this.selected) ?\n          this.selectedAriaLabel :\n          ariaLabel;\n    }\n    return staticHtml`<${tag}\n        class=\"md3-icon-button ${classMap(this.getRenderClasses())}\"\n        aria-label=\"${ariaLabelValue || nothing}\"\n        aria-haspopup=\"${!this.href && ariaHasPopup || nothing}\"\n        aria-expanded=\"${!this.href && ariaExpanded || nothing}\"\n        aria-pressed=\"${ariaPressedValue}\"\n        ?disabled=\"${!this.href && this.disabled}\"\n        @focus=\"${this.handleFocus}\"\n        @blur=\"${this.handleBlur}\"\n        @pointerdown=\"${this.handlePointerDown}\"\n        @click=\"${this.handleClick}\"\n        ${ripple(this.getRipple)}>\n        ${this.renderFocusRing()}\n        ${when(this.showRipple, this.renderRipple)}\n        ${!this.selected ? this.renderIcon() : nothing}\n        ${this.selected ? this.renderSelectedIcon() : nothing}\n        ${this.renderTouchTarget()}\n        ${this.href && this.renderLink()}\n  </${tag}>`;\n  }\n\n  protected renderLink() {\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`<a class=\"md3-icon-button__link\" href=\"${this.href}\"\n                  target=\"${this.target as LinkTarget || nothing}\"\n                  @focus=\"${this.handleFocus}\"\n                  @blur=\"${this.handleBlur}\"\n                  aria-label=\"${ariaLabel || nothing}\"></a>`;\n  }\n\n  protected getRenderClasses(): ClassInfo {\n    return {\n      'md3-icon-button--flip-icon': this.flipIcon,\n      'md3-icon-button--selected': this.toggle && this.selected,\n    };\n  }\n\n  protected renderIcon(): TemplateResult {\n    return html`<md-icon class=\"md3-icon-button__icon\"><slot></slot></md-icon>`;\n  }\n\n  protected renderSelectedIcon() {\n    // Use default slot as fallback to not require specifying multiple icons\n    return html`<md-icon class=\"md3-icon-button__icon md3-icon-button__icon--selected\"><slot name=\"selectedIcon\"><slot></slot></slot></md-icon>`;\n  }\n\n  protected renderTouchTarget(): TemplateResult {\n    return html`<span class=\"md3-icon-button__touch\"></span>`;\n  }\n\n  protected renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring .visible=\"${\n        this.showFocusRing}\"></md-focus-ring>`;\n  }\n\n  override connectedCallback() {\n    this.flipIcon = isRtl(this, this.flipIconInRtl);\n    super.connectedCallback();\n  }\n\n  handlePointerDown() {\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  protected handleClick() {\n    if (!this.toggle || this.disabled) {\n      return;\n    }\n\n    this.selected = !this.selected;\n    this.dispatchEvent(\n        new InputEvent('input', {bubbles: true, composed: true}));\n    // Bubbles but does not compose to mimic native browser <input> & <select>\n    // Additionally, native change event is not an InputEvent.\n    this.dispatchEvent(new Event('change', {bubbles: true}));\n  }\n}\n"]}

package/linearprogress/_linear-progress.scss

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

package/linearprogress/harness.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '../testing/harness.js';
+import { LinearProgress } from './lib/linear-progress.js';
+/**
+ * Test harness for linear-progress.
+ */
+export declare class LinearProgressHarness extends Harness<LinearProgress> {
+    getInteractiveElement(): Promise<HTMLElement>;
+}

package/linearprogress/harness.js

@@ -0,0 +1,18 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { Harness } from '../testing/harness.js';
+/**
+ * Test harness for linear-progress.
+ */
+export class LinearProgressHarness extends Harness {
+    async getInteractiveElement() {
+        await this.element.updateComplete;
+        // Test access to protected property
+        // tslint:disable-next-line:no-dict-access-on-struct-type
+        return this.element['rootEl'];
+    }
+}
+//# sourceMappingURL=harness.js.map

package/linearprogress/harness.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"harness.js","sourceRoot":"","sources":["harness.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAC,OAAO,EAAC,MAAM,uBAAuB,CAAC;AAI9C;;GAEG;AACH,MAAM,OAAO,qBAAsB,SAAQ,OAAuB;IACvD,KAAK,CAAC,qBAAqB;QAClC,MAAM,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC;QAClC,oCAAoC;QACpC,yDAAyD;QACzD,OAAO,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAChC,CAAC;CACF","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {Harness} from '../testing/harness.js';\n\nimport {LinearProgress} from './lib/linear-progress.js';\n\n/**\n * Test harness for linear-progress.\n */\nexport class LinearProgressHarness extends Harness<LinearProgress> {\n  override async getInteractiveElement() {\n    await this.element.updateComplete;\n    // Test access to protected property\n    // tslint:disable-next-line:no-dict-access-on-struct-type\n    return this.element['rootEl'];\n  }\n}\n"]}

package/linearprogress/lib/_linear-progress.scss

@@ -0,0 +1,380 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use '../../sass/theme';
+@use '../../tokens';
+// go/keep-sorted end
+
+@mixin theme($tokens) {
+  $reference: tokens.md-comp-linear-progress-indicator-values();
+  $tokens: theme.validate-theme($reference, $tokens);
+  $tokens: theme.create-theme-vars($tokens, 'linear-progress');
+
+  @include theme.emit-theme-vars($tokens);
+}
+
+// note, transition settings match MDC
+// see https://github.com/material-components/material-components-web/blob/main/packages/mdc-linear-progress/_linear-progress.scss#L79
+$_determinate-duration: 250ms;
+$_determinate-easing: cubic-bezier(0.4, 0, 0.6, 1);
+// see https://github.com/material-components/material-components-web/blob/main/packages/mdc-linear-progress/_linear-progress.scss#L218
+$_indeterminate-duration: 2s;
+
+// Note, track background is a series of animating dots sized to fit
+// the track height. Since the dots are circular, width scales with height.
+// Background width is separated because it's also used to help animate the
+// /dots.
+$_track-dot-size: calc(var(--_track-height) / 2);
+$_track-background-width: calc($_track-dot-size * 5);
+// this is a series of sized/colored dots.
+$_track-background: 0 / $_track-background-width 100%
+  radial-gradient(
+    circle at calc($_track-dot-size * 2),
+    var(--_track-color) 0,
+    var(--_track-color) $_track-dot-size,
+    transparent $_track-dot-size
+  );
+
+// Generates a list of rtl selectors. This is done so rules can be generated
+// separately so they don't get dropped where unsupported.
+$rtl-selectors: (
+  ':host-context([dir="rtl"]) .linear-progress',
+  ':host([dir="rtl"]) .linear-progress',
+  '.linear-progress:dir(rtl)'
+);
+
+// Generates keyframes for ltr and rtl.
+@mixin directional-keyframes($dir) {
+  $is-rtl: $dir == 'rtl';
+  $sign: if($is-rtl, -1, 1);
+  $suffix: if($is-rtl, '-rtl', '');
+
+  @keyframes buffering#{$suffix} {
+    0% {
+      // the amount to animate is aligned with the default track background
+      transform: translateX(calc(#{$sign} * #{$_track-background-width}));
+    }
+  }
+
+  // note, the numbers here come directly from the mdc implementation.
+  // see https://github.com/material-components/material-components-web/blob/main/packages/mdc-linear-progress/_linear-progress.scss#L208.
+  // keyframes
+  @keyframes primary-indeterminate-translate#{$suffix} {
+    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(calc(#{$sign} * 83.6714%));
+    }
+
+    100% {
+      transform: translateX(calc(#{$sign} * 200.611%));
+    }
+  }
+
+  @keyframes secondary-indeterminate-translate#{$suffix} {
+    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(calc(#{$sign} * 37.6519%));
+    }
+
+    48.35% {
+      animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
+      transform: translateX(calc(#{$sign} * 84.3862%));
+    }
+
+    100% {
+      transform: translateX(calc(#{$sign} * 160.278%));
+    }
+  }
+}
+
+@mixin styles() {
+  $tokens: tokens.md-comp-linear-progress-indicator-values();
+  $tokens: theme.create-theme-vars($tokens, 'linear-progress');
+
+  :host {
+    @each $token, $value in $tokens {
+      --_#{$token}: #{$value};
+    }
+
+    display: block;
+    position: relative;
+    // note, this matches the `meter` element and is just done so
+    // there's a minimum width when in a container with a display like
+    // inline-flex.
+    min-inline-size: 80px;
+    block-size: var(--_track-height);
+    content-visibility: auto;
+    contain: strict;
+  }
+
+  .linear-progress,
+  .track,
+  .buffer-bar,
+  .bar,
+  .bar-inner {
+    position: absolute;
+  }
+
+  .linear-progress {
+    inset: 0;
+    outline: transparent solid 1px;
+    border-radius: var(--_track-shape);
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+  }
+
+  .bar {
+    animation: none;
+    // position is offset for indeterminate animation, so we lock the inline size here.
+    inline-size: 100%;
+    block-size: var(--_active-indicator-height);
+    transform-origin: left center;
+    will-change: transform;
+    transition: transform $_determinate-duration $_determinate-easing;
+  }
+
+  .secondary-bar {
+    display: none;
+  }
+
+  .bar-inner {
+    inset: 0;
+    animation: none;
+    background: var(--_active-indicator-color);
+  }
+
+  .buffer-bar {
+    background: var(--_track-color);
+    inset: 0;
+    will-change: transform;
+    transition: transform $_determinate-duration $_determinate-easing;
+    transform-origin: left center;
+  }
+
+  .track {
+    inset: 0;
+    will-change: transform;
+    animation: linear infinite $_determinate-duration;
+    // stylelint-disable-next-line no-unknown-animations --
+    // animation generated via mixin
+    animation-name: buffering;
+    background: $_track-background;
+  }
+
+  // indeterminate
+  .indeterminate .bar {
+    transition: none;
+  }
+
+  // note, the numbers here come directly from the mdc implementation.
+  // see https://github.com/material-components/material-components-web/blob/main/packages/mdc-linear-progress/_linear-progress.scss#L208.
+  .indeterminate .primary-bar {
+    inset-inline-start: -145.167%;
+  }
+
+  .indeterminate .secondary-bar {
+    inset-inline-start: -54.8889%;
+    // this is display none by default.
+    display: block;
+  }
+
+  .indeterminate .track {
+    display: none;
+  }
+
+  .indeterminate.animation-ready .primary-bar {
+    will-change: transform;
+    animation: linear infinite $_indeterminate-duration;
+    // stylelint-disable-next-line no-unknown-animations --
+    // animation generated via mixin
+    animation-name: primary-indeterminate-translate;
+  }
+
+  .indeterminate.animation-ready .primary-bar > .bar-inner {
+    will-change: transform;
+    animation: linear infinite $_indeterminate-duration
+      primary-indeterminate-scale;
+  }
+
+  .indeterminate.animation-ready.four-colors .primary-bar > .bar-inner {
+    animation-name: primary-indeterminate-scale, four-colors;
+    animation-duration: $_indeterminate-duration,
+      calc($_indeterminate-duration * 2);
+  }
+
+  .indeterminate.animation-ready .secondary-bar {
+    will-change: transform;
+    animation: linear infinite $_indeterminate-duration;
+    // stylelint-disable-next-line no-unknown-animations --
+    // animation generated via mixin
+    animation-name: secondary-indeterminate-translate;
+  }
+
+  .indeterminate.animation-ready .secondary-bar > .bar-inner {
+    will-change: transform;
+    animation: linear infinite $_indeterminate-duration
+      secondary-indeterminate-scale;
+  }
+
+  .indeterminate.animation-ready.four-colors .secondary-bar > .bar-inner {
+    animation-name: secondary-indeterminate-scale, four-colors;
+    animation-duration: $_indeterminate-duration,
+      calc($_indeterminate-duration * 2);
+  }
+
+  @each $selector in $rtl-selectors {
+    #{$selector} {
+      .bar {
+        transform-origin: right center;
+      }
+
+      .buffer-bar {
+        transform-origin: right center;
+      }
+
+      .track {
+        // stylelint-disable-next-line no-unknown-animations --
+        // animation generated via mixin
+        animation-name: buffering-rtl;
+      }
+
+      &.indeterminate.animation-ready .primary-bar {
+        // stylelint-disable-next-line no-unknown-animations --
+        // animation generated via mixin
+        animation-name: primary-indeterminate-translate-rtl;
+      }
+
+      &.indeterminate.animation-ready .secondary-bar {
+        // stylelint-disable-next-line no-unknown-animations --
+        // animation generated via mixin
+        animation-name: secondary-indeterminate-translate-rtl;
+      }
+    }
+  }
+
+  @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);
+    }
+  }
+
+  @include directional-keyframes('ltr');
+  @include directional-keyframes('rtl');
+
+  @keyframes four-colors {
+    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 screen and (forced-colors: active) {
+    .linear-progress {
+      --_active-indicator-color: canvastext;
+      --_track-color: graytext;
+      border: 1px solid canvastext;
+    }
+
+    .indeterminate.linear-progress {
+      --_track-color: canvas;
+    }
+  }
+}

package/linearprogress/lib/linear-progress-styles.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/linearprogress/lib/linear-progress-styles.css.js

@@ -0,0 +1,9 @@
+/**
+  * @license
+  * Copyright 2022 Google LLC
+  * SPDX-License-Identifier: Apache-2.0
+  */
+import { css } from 'lit';
+export const styles = css `:host{--_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);display:block;position:relative;min-inline-size:80px;block-size:var(--_track-height);content-visibility:auto;contain:strict}.linear-progress,.track,.buffer-bar,.bar,.bar-inner{position:absolute}.linear-progress{inset:0;outline:rgba(0,0,0,0) solid 1px;border-radius:var(--_track-shape);overflow:hidden;display:flex;align-items:center}.bar{animation:none;inline-size:100%;block-size:var(--_active-indicator-height);transform-origin:left center;will-change:transform;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)}.buffer-bar{background:var(--_track-color);inset:0;will-change:transform;transition:transform 250ms cubic-bezier(0.4, 0, 0.6, 1);transform-origin:left center}.track{inset:0;will-change:transform;animation:linear infinite 250ms;animation-name:buffering;background:0/calc(var(--_track-height) / 2 * 5) 100% radial-gradient(circle at calc(var(--_track-height) / 2 * 2), var(--_track-color) 0, var(--_track-color) calc(var(--_track-height) / 2), transparent calc(var(--_track-height) / 2))}.indeterminate .bar{transition:none}.indeterminate .primary-bar{inset-inline-start:-145.167%}.indeterminate .secondary-bar{inset-inline-start:-54.8889%;display:block}.indeterminate .track{display:none}.indeterminate.animation-ready .primary-bar{will-change:transform;animation:linear infinite 2s;animation-name:primary-indeterminate-translate}.indeterminate.animation-ready .primary-bar>.bar-inner{will-change:transform;animation:linear infinite 2s primary-indeterminate-scale}.indeterminate.animation-ready.four-colors .primary-bar>.bar-inner{animation-name:primary-indeterminate-scale,four-colors;animation-duration:2s,4s}.indeterminate.animation-ready .secondary-bar{will-change:transform;animation:linear infinite 2s;animation-name:secondary-indeterminate-translate}.indeterminate.animation-ready .secondary-bar>.bar-inner{will-change:transform;animation:linear infinite 2s secondary-indeterminate-scale}.indeterminate.animation-ready.four-colors .secondary-bar>.bar-inner{animation-name:secondary-indeterminate-scale,four-colors;animation-duration:2s,4s}:host-context([dir=rtl]) .linear-progress .bar{transform-origin:right center}:host-context([dir=rtl]) .linear-progress .buffer-bar{transform-origin:right center}:host-context([dir=rtl]) .linear-progress .track{animation-name:buffering-rtl}:host-context([dir=rtl]) .linear-progress.indeterminate.animation-ready .primary-bar{animation-name:primary-indeterminate-translate-rtl}:host-context([dir=rtl]) .linear-progress.indeterminate.animation-ready .secondary-bar{animation-name:secondary-indeterminate-translate-rtl}:host([dir=rtl]) .linear-progress .bar{transform-origin:right center}:host([dir=rtl]) .linear-progress .buffer-bar{transform-origin:right center}:host([dir=rtl]) .linear-progress .track{animation-name:buffering-rtl}:host([dir=rtl]) .linear-progress.indeterminate.animation-ready .primary-bar{animation-name:primary-indeterminate-translate-rtl}:host([dir=rtl]) .linear-progress.indeterminate.animation-ready .secondary-bar{animation-name:secondary-indeterminate-translate-rtl}.linear-progress:dir(rtl) .bar{transform-origin:right center}.linear-progress:dir(rtl) .buffer-bar{transform-origin:right center}.linear-progress:dir(rtl) .track{animation-name:buffering-rtl}.linear-progress:dir(rtl).indeterminate.animation-ready .primary-bar{animation-name:primary-indeterminate-translate-rtl}.linear-progress:dir(rtl).indeterminate.animation-ready .secondary-bar{animation-name:secondary-indeterminate-translate-rtl}@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(1 * 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(calc(1 * 83.6714%))}100%{transform:translateX(calc(1 * 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(calc(1 * 37.6519%))}48.35%{animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);transform:translateX(calc(1 * 84.3862%))}100%{transform:translateX(calc(1 * 160.278%))}}@keyframes buffering-rtl{0%{transform:translateX(calc(-1 * calc(var(--_track-height) / 2 * 5)))}}@keyframes primary-indeterminate-translate-rtl{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(calc(-1 * 83.6714%))}100%{transform:translateX(calc(-1 * 200.611%))}}@keyframes secondary-indeterminate-translate-rtl{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(calc(-1 * 37.6519%))}48.35%{animation-timing-function:cubic-bezier(0.4, 0.627035, 0.6, 0.902026);transform:translateX(calc(-1 * 84.3862%))}100%{transform:translateX(calc(-1 * 160.278%))}}@keyframes four-colors{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 screen and (forced-colors: active){.linear-progress{--_active-indicator-color: canvastext;--_track-color: graytext;border:1px solid canvastext}.indeterminate.linear-progress{--_track-color: canvas}}/*# sourceMappingURL=linear-progress-styles.css.map */
+`;
+//# sourceMappingURL=linear-progress-styles.css.js.map