@material/web 1.0.0-pre.8 → 1.0.0

package/linearprogress/lib/_linear-progress.scss

@@ -1,386 +0,0 @@
-//
-// Copyright 2023 Google LLC
-// SPDX-License-Identifier: Apache-2.0
-//
-
-// go/keep-sorted start
-@use 'sass:list';
-// go/keep-sorted end
-// go/keep-sorted start
-@use '../../tokens';
-// go/keep-sorted end
-
-@mixin theme($tokens) {
-  $supported-tokens: tokens.$md-comp-linear-progress-indicator-supported-tokens;
-  @each $token, $value in $tokens {
-    @if list.index($supported-tokens, $token) == null {
-      @error 'Token `#{$token}` is not a supported token.';
-    }
-
-    @if $value {
-      --md-linear-progress-#{$token}: #{$value};
-    }
-  }
-}
-
-// 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)'
-);
-
-@mixin styles() {
-  $tokens: tokens.md-comp-linear-progress-indicator-values();
-
-  :host {
-    @each $token, $value in $tokens {
-      --_#{$token}: var(--md-linear-progress-#{$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;
-    }
-  }
-}
-
-// 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%));
-    }
-  }
-}

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

@@ -1,9 +0,0 @@
-/**
-  * @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

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

@@ -1 +0,0 @@
-{"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);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 */\n`;\n "]}

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

@@ -1,35 +0,0 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { LitElement } from 'lit';
-/**
- * A linear progress component.
- */
-export declare class LinearProgress extends LitElement {
-    /**
-     * Whether or not to render indeterminate progress in an animated state.
-     */
-    indeterminate: boolean;
-    /**
-     * Progress to display, a fraction between 0 and 1.
-     */
-    progress: number;
-    /**
-     * Buffer amount to display, a fraction between 0 and 1.
-     */
-    buffer: number;
-    /**
-     * Whether or not to render indeterminate mode using 4 colors instead of one.
-     *
-     */
-    fourColors: boolean;
-    private readonly rootEl;
-    private animationReady;
-    private resizeObserver;
-    protected render(): import("lit-html").TemplateResult<1>;
-    connectedCallback(): Promise<void>;
-    disconnectedCallback(): void;
-    private restartAnimation;
-}

package/linearprogress/lib/linear-progress.js

@@ -1,127 +0,0 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-var _a;
-import { __decorate } from "tslib";
-import { html, LitElement, nothing } from 'lit';
-import { property, query, state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { styleMap } from 'lit/directives/style-map.js';
-import { requestUpdateOnAriaChange } from '../../aria/delegate.js';
-/**
- * A linear progress component.
- */
-export class LinearProgress extends LitElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Whether or not to render indeterminate progress in an animated state.
-         */
-        this.indeterminate = false;
-        /**
-         * Progress to display, a fraction between 0 and 1.
-         */
-        this.progress = 0;
-        /**
-         * Buffer amount to display, a fraction between 0 and 1.
-         */
-        this.buffer = 1;
-        /**
-         * Whether or not to render indeterminate mode using 4 colors instead of one.
-         *
-         */
-        this.fourColors = false;
-        this.animationReady = true;
-        this.resizeObserver = null;
-    }
-    // Note, the indeterminate animation is rendered with transform %'s
-    // Previously, this was optimized to use px calculated with the resizeObserver
-    // due to a now fixed Chrome bug: crbug.com/389359.
-    render() {
-        const rootClasses = {
-            'indeterminate': this.indeterminate,
-            'animation-ready': this.animationReady,
-            'four-colors': this.fourColors
-        };
-        const progressStyles = {
-            transform: `scaleX(${(this.indeterminate ? 1 : this.progress) * 100}%)`
-        };
-        const bufferStyles = {
-            transform: `scaleX(${(this.indeterminate ? 1 : this.buffer) * 100}%)`
-        };
-        // Needed for closure conformance
-        const { ariaLabel } = this;
-        return html `
-      <div
-          role="progressbar"
-          class="linear-progress ${classMap(rootClasses)}"
-          aria-label="${ariaLabel || nothing}"
-          aria-valuemin="0"
-          aria-valuemax="1"
-          aria-valuenow="${this.indeterminate ? nothing : this.progress}">
-        <div class="track"></div>
-        <div class="buffer-bar" style=${styleMap(bufferStyles)}></div>
-        <div class="bar primary-bar" style=${styleMap(progressStyles)}>
-          <div class="bar-inner"></div>
-        </div>
-        <div class="bar secondary-bar">
-          <div class="bar-inner"></div>
-        </div>
-      </div>`;
-    }
-    async connectedCallback() {
-        super.connectedCallback();
-        // wait for rendering.
-        await this.updateComplete;
-        if (this.resizeObserver) {
-            return;
-        }
-        this.resizeObserver = new ResizeObserver(() => {
-            if (this.indeterminate) {
-                this.restartAnimation();
-            }
-        });
-        this.resizeObserver.observe(this.rootEl);
-    }
-    disconnectedCallback() {
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-            this.resizeObserver = null;
-        }
-        super.disconnectedCallback();
-    }
-    // When size changes, restart the animation
-    // to avoid jank.
-    async restartAnimation() {
-        await this.updateComplete;
-        this.animationReady = false;
-        await new Promise(requestAnimationFrame);
-        this.animationReady = true;
-        await this.updateComplete;
-    }
-}
-_a = LinearProgress;
-(() => {
-    requestUpdateOnAriaChange(_a);
-})();
-__decorate([
-    property({ type: Boolean })
-], LinearProgress.prototype, "indeterminate", void 0);
-__decorate([
-    property({ type: Number })
-], LinearProgress.prototype, "progress", void 0);
-__decorate([
-    property({ type: Number })
-], LinearProgress.prototype, "buffer", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'four-colors' })
-], LinearProgress.prototype, "fourColors", void 0);
-__decorate([
-    query('.linear-progress')
-], LinearProgress.prototype, "rootEl", void 0);
-__decorate([
-    state()
-], LinearProgress.prototype, "animationReady", void 0);
-//# sourceMappingURL=linear-progress.js.map

package/linearprogress/lib/linear-progress.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"linear-progress.js","sourceRoot":"","sources":["linear-progress.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {html, LitElement, nothing} from 'lit';\nimport {property, query, state} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {styleMap} from 'lit/directives/style-map.js';\n\nimport {requestUpdateOnAriaChange} from '../../aria/delegate.js';\nimport {ARIAMixinStrict} from '../../types/aria.js';\n\n/**\n * A linear progress component.\n */\nexport class LinearProgress extends LitElement {\n  static {\n    requestUpdateOnAriaChange(this);\n  }\n\n  /**\n   * Whether or not to render indeterminate progress in an animated state.\n   */\n  @property({type: Boolean}) indeterminate = false;\n\n  /**\n   * Progress to display, a fraction between 0 and 1.\n   */\n  @property({type: Number}) progress = 0;\n\n  /**\n   * Buffer amount to display, a fraction between 0 and 1.\n   */\n  @property({type: Number}) buffer = 1;\n\n  /**\n   * Whether or not to render indeterminate mode using 4 colors instead of one.\n   *\n   */\n  @property({type: Boolean, attribute: 'four-colors'}) fourColors = false;\n\n  @query('.linear-progress') private readonly rootEl!: HTMLElement|null;\n\n  @state() private animationReady = true;\n  private resizeObserver: ResizeObserver|null = null;\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 render() {\n    const rootClasses = {\n      'indeterminate': this.indeterminate,\n      'animation-ready': this.animationReady,\n      'four-colors': this.fourColors\n    };\n\n    const progressStyles = {\n      transform: `scaleX(${(this.indeterminate ? 1 : this.progress) * 100}%)`\n    };\n    const bufferStyles = {\n      transform: `scaleX(${(this.indeterminate ? 1 : this.buffer) * 100}%)`\n    };\n\n    // Needed for closure conformance\n    const {ariaLabel} = this as ARIAMixinStrict;\n    return html`\n      <div\n          role=\"progressbar\"\n          class=\"linear-progress ${classMap(rootClasses)}\"\n          aria-label=\"${ariaLabel || nothing}\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"1\"\n          aria-valuenow=\"${this.indeterminate ? nothing : this.progress}\">\n        <div class=\"track\"></div>\n        <div class=\"buffer-bar\" style=${styleMap(bufferStyles)}></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      </div>`;\n  }\n\n  override async connectedCallback() {\n    super.connectedCallback();\n    // wait for rendering.\n    await this.updateComplete;\n    if (this.resizeObserver) {\n      return;\n    }\n    this.resizeObserver = new ResizeObserver(() => {\n      if (this.indeterminate) {\n        this.restartAnimation();\n      }\n    });\n    this.resizeObserver.observe(this.rootEl!);\n  }\n\n  override disconnectedCallback() {\n    if (this.resizeObserver) {\n      this.resizeObserver.disconnect();\n      this.resizeObserver = null;\n    }\n    super.disconnectedCallback();\n  }\n\n  // When size changes, restart the animation\n  // to avoid jank.\n  private async restartAnimation() {\n    await this.updateComplete;\n    this.animationReady = false;\n    await new Promise(requestAnimationFrame);\n    this.animationReady = true;\n    await this.updateComplete;\n  }\n}\n"]}

package/linearprogress/linear-progress.d.ts

@@ -1,23 +0,0 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { LinearProgress } from './lib/linear-progress.js';
-declare global {
-    interface HTMLElementTagNameMap {
-        'md-linear-progress': MdLinearProgress;
-    }
-}
-/**
- * @summary Linear progress indicators display progress by animating along the
- * length of a fixed, visible track.
- *
- * @description
- * Progress indicators inform users about the status of ongoing processes.
- * - Determinate indicators display how long a process will take.
- * - Indeterminate indicators express an unspecified amount of wait time.
- */
-export declare class MdLinearProgress extends LinearProgress {
-    static styles: import("lit").CSSResult[];
-}

package/linearprogress/linear-progress.js

@@ -1,26 +0,0 @@
-/**
- * @license
- * Copyright 2023 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-import { __decorate } from "tslib";
-import { customElement } from 'lit/decorators.js';
-import { LinearProgress } from './lib/linear-progress.js';
-import { styles } from './lib/linear-progress-styles.css.js';
-/**
- * @summary Linear progress indicators display progress by animating along the
- * length of a fixed, visible track.
- *
- * @description
- * Progress indicators inform users about the status of ongoing processes.
- * - Determinate indicators display how long a process will take.
- * - Indeterminate indicators express an unspecified amount of wait time.
- */
-let MdLinearProgress = class MdLinearProgress extends LinearProgress {
-};
-MdLinearProgress.styles = [styles];
-MdLinearProgress = __decorate([
-    customElement('md-linear-progress')
-], MdLinearProgress);
-export { MdLinearProgress };
-//# sourceMappingURL=linear-progress.js.map

package/linearprogress/linear-progress.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"linear-progress.js","sourceRoot":"","sources":["linear-progress.ts"],"names":[],"mappings":"AAAA;;;;GAIG;;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAC,cAAc,EAAC,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAC,MAAM,EAAC,MAAM,qCAAqC,CAAC;AAQ3D;;;;;;;;GAQG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,cAAc;;AAClC,uBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AADvB,gBAAgB;IAD5B,aAAa,CAAC,oBAAoB,CAAC;GACvB,gBAAgB,CAE5B;SAFY,gBAAgB","sourcesContent":["/**\n * @license\n * Copyright 2023 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport {customElement} from 'lit/decorators.js';\n\nimport {LinearProgress} from './lib/linear-progress.js';\nimport {styles} from './lib/linear-progress-styles.css.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'md-linear-progress': MdLinearProgress;\n  }\n}\n\n/**\n * @summary Linear progress indicators display progress by animating along the\n * length of a fixed, visible track.\n *\n * @description\n * Progress indicators inform users about the status of ongoing processes.\n * - Determinate indicators display how long a process will take.\n * - Indeterminate indicators express an unspecified amount of wait time.\n */\n@customElement('md-linear-progress')\nexport class MdLinearProgress extends LinearProgress {\n  static override styles = [styles];\n}\n"]}