@api-client/ui 0.5.26 → 0.5.28

package/build/src/md/progress/internals/CircularProgress.js

@@ -0,0 +1,156 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { property } from 'lit/decorators.js';
+import { isDisabled, setDisabled } from '../../../lib/disabled.js';
+import { UiRange } from './Range.js';
+import { html } from 'lit';
+let CircularProgress = (() => {
+    let _classSuper = UiRange;
+    let _instanceExtraInitializers = [];
+    let _set_disabled_decorators;
+    let _fourColor_decorators;
+    let _fourColor_initializers = [];
+    let _fourColor_extraInitializers = [];
+    return class CircularProgress extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _set_disabled_decorators = [property({ reflect: true, type: Boolean })];
+            _fourColor_decorators = [property({ type: Boolean, reflect: true })];
+            __esDecorate(this, null, _set_disabled_decorators, { kind: "setter", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _fourColor_decorators, { kind: "accessor", name: "fourColor", static: false, private: false, access: { has: obj => "fourColor" in obj, get: obj => obj.fourColor, set: (obj, value) => { obj.fourColor = value; } }, metadata: _metadata }, _fourColor_initializers, _fourColor_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        /**
+         * Gets the disabled state of the progress indicator.
+         * @returns True if the component is disabled, false otherwise.
+         */
+        get disabled() {
+            return isDisabled(this);
+        }
+        /**
+         * Sets the disabled state of the progress indicator.
+         * When disabled, the component may have reduced visual emphasis
+         * and should not respond to user interactions.
+         * @attribute
+         */
+        set disabled(value) {
+            const old = isDisabled(this);
+            setDisabled(this, value);
+            this.requestUpdate('disabled', old);
+        }
+        #fourColor_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _fourColor_initializers, false
+        /**
+         * Renders the circular progress indicator.
+         *
+         * Chooses between determinate and indeterminate rendering based on the
+         * `indeterminate` property inherited from UiRange.
+         *
+         * @returns The template result for the progress indicator.
+         */
+        ));
+        /**
+         * Enables four-color animation for indeterminate progress indicators.
+         *
+         * When enabled, the indeterminate progress indicator cycles between four colors:
+         * - Primary color (--ui-circular-progress-four-color-active-indicator-one-color)
+         * - Primary container (--ui-circular-progress-four-color-active-indicator-two-color)
+         * - Tertiary color (--ui-circular-progress-four-color-active-indicator-three-color)
+         * - Tertiary container (--ui-circular-progress-four-color-active-indicator-four-color)
+         *
+         * This property only affects the appearance when `indeterminate` is true.
+         *
+         * @default false
+         * @attribute fourcolor
+         */
+        get fourColor() { return this.#fourColor_accessor_storage; }
+        set fourColor(value) { this.#fourColor_accessor_storage = value; }
+        /**
+         * Renders the circular progress indicator.
+         *
+         * Chooses between determinate and indeterminate rendering based on the
+         * `indeterminate` property inherited from UiRange.
+         *
+         * @returns The template result for the progress indicator.
+         */
+        render() {
+            if (this.indeterminate) {
+                return this.renderIndeterminateContainer();
+            }
+            return this.renderDeterminateContainer();
+        }
+        /**
+         * Renders the determinate progress indicator using SVG.
+         *
+         * Creates a circular progress bar that shows a specific progress value
+         * using stroke-dashoffset to control the visible portion of the circle.
+         * The progress is calculated based on the current value, min, and max properties.
+         *
+         * @returns SVG template with track and active track circles.
+         */
+        renderDeterminateContainer() {
+            const dashOffset = (1 - this.value / this.max) * 100;
+            return html `
+      <svg viewBox="0 0 4800 4800">
+        <circle class="track" pathLength="100"></circle>
+        <circle class="active-track" pathLength="100" stroke-dashoffset=${dashOffset}></circle>
+      </svg>
+    `;
+        }
+        /**
+         * Renders the indeterminate progress indicator using CSS animations.
+         *
+         * Creates a spinning animation with two half-circles that expand and contract
+         * to create a continuous loading animation. The animation can cycle through
+         * multiple colors when the `fourColor` property is enabled.
+         *
+         * @returns HTML template with animated spinner elements.
+         */
+        renderIndeterminateContainer() {
+            return html ` <div class="spinner">
+      <div class="left">
+        <div class="circle"></div>
+      </div>
+      <div class="right">
+        <div class="circle"></div>
+      </div>
+    </div>`;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _fourColor_extraInitializers);
+        }
+    };
+})();
+/**
+ * A circular progress indicator component that displays progress in a circular format.
+ *
+ * This component supports both determinate and indeterminate progress states:
+ * - **Determinate**: Shows a specific progress value with a filled arc
+ * - **Indeterminate**: Shows continuous animation without a specific value
+ *
+ * The component inherits from UiRange and provides additional features like:
+ * - Four-color animation for indeterminate state
+ * - Material Design 3 styling
+ * - Accessibility support with proper ARIA attributes
+ * - Customizable size and colors via CSS custom properties
+ *
+ * ## Accessibility
+ *
+ * For accessibility compliance, you must provide an accessible name for the progress indicator.
+ * Use the `aria-label` attribute to describe what the progress represents:
+ *
+ * @example
+ * ```html
+ * <!-- Basic determinate progress -->
+ * <ui-circular-progress value="50" max="100" aria-label="Upload progress"></ui-circular-progress>
+ *
+ * <!-- Indeterminate progress -->
+ * <ui-circular-progress indeterminate aria-label="Loading content"></ui-circular-progress>
+ *
+ * <!-- Four-color indeterminate progress -->
+ * <ui-circular-progress indeterminate fourcolor aria-label="Processing data"></ui-circular-progress>
+ * ```
+ *
+ * @fires ratiochange - Inherited from UiRange. Dispatched when the ratio computation changes.
+ */
+export default CircularProgress;
+//# sourceMappingURL=CircularProgress.js.map

package/build/src/md/progress/internals/CircularProgress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgress.js","sourceRoot":"","sources":["../../../../../src/md/progress/internals/CircularProgress.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,EAAuB,IAAI,EAAE,MAAM,KAAK,CAAA;;sBAkCD,OAAO;;;;;;iBAAhC,gBAAiB,SAAQ,WAAO;;;wCAelD,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCAqB1C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;YApB3C,0LAAI,QAAQ,wEAIX;YAgB2C,gLAAS,SAAS,6BAAT,SAAS,6FAAQ;;;QAnCtE;;;WAGG;QACH,IAAI,QAAQ;YACV,OAAO,UAAU,CAAC,IAAI,CAAC,CAAA;QACzB,CAAC;QAED;;;;;WAKG;QAEH,IAAI,QAAQ,CAAC,KAAc;YACzB,MAAM,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,CAAA;YAC5B,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;YACxB,IAAI,CAAC,aAAa,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA;QACrC,CAAC;QAgB2C,+BApCzB,mDAAgB,mDAoC8B,KAAK;QAEtE;;;;;;;WAOG;WATmE;QAdtE;;;;;;;;;;;;;WAaG;QACyC,IAAS,SAAS,+CAAQ;QAA1B,IAAS,SAAS,qDAAQ;QAEtE;;;;;;;WAOG;QACgB,MAAM;YACvB,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;gBACvB,OAAO,IAAI,CAAC,4BAA4B,EAAE,CAAA;YAC5C,CAAC;YACD,OAAO,IAAI,CAAC,0BAA0B,EAAE,CAAA;QAC1C,CAAC;QAED;;;;;;;;WAQG;QACK,0BAA0B;YAChC,MAAM,UAAU,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAA;YACpD,OAAO,IAAI,CAAA;;;0EAG2D,UAAU;;KAE/E,CAAA;QACH,CAAC;QAED;;;;;;;;WAQG;QACK,4BAA4B;YAClC,OAAO,IAAI,CAAA;;;;;;;WAOJ,CAAA;QACT,CAAC;;;;;;;AA1HH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,gCA2FC","sourcesContent":["import { property } from 'lit/decorators.js'\nimport { isDisabled, setDisabled } from '../../../lib/disabled.js'\nimport { UiRange } from './Range.js'\nimport { type TemplateResult, html } from 'lit'\n\n/**\n * A circular progress indicator component that displays progress in a circular format.\n *\n * This component supports both determinate and indeterminate progress states:\n * - **Determinate**: Shows a specific progress value with a filled arc\n * - **Indeterminate**: Shows continuous animation without a specific value\n *\n * The component inherits from UiRange and provides additional features like:\n * - Four-color animation for indeterminate state\n * - Material Design 3 styling\n * - Accessibility support with proper ARIA attributes\n * - Customizable size and colors via CSS custom properties\n *\n * ## Accessibility\n *\n * For accessibility compliance, you must provide an accessible name for the progress indicator.\n * Use the `aria-label` attribute to describe what the progress represents:\n *\n * @example\n * ```html\n * <!-- Basic determinate progress -->\n * <ui-circular-progress value=\"50\" max=\"100\" aria-label=\"Upload progress\"></ui-circular-progress>\n *\n * <!-- Indeterminate progress -->\n * <ui-circular-progress indeterminate aria-label=\"Loading content\"></ui-circular-progress>\n *\n * <!-- Four-color indeterminate progress -->\n * <ui-circular-progress indeterminate fourcolor aria-label=\"Processing data\"></ui-circular-progress>\n * ```\n *\n * @fires ratiochange - Inherited from UiRange. Dispatched when the ratio computation changes.\n */\nexport default class CircularProgress extends UiRange {\n  /**\n   * Gets the disabled state of the progress indicator.\n   * @returns True if the component is disabled, false otherwise.\n   */\n  get disabled(): boolean {\n    return isDisabled(this)\n  }\n\n  /**\n   * Sets the disabled state of the progress indicator.\n   * When disabled, the component may have reduced visual emphasis\n   * and should not respond to user interactions.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean })\n  set disabled(value: boolean) {\n    const old = isDisabled(this)\n    setDisabled(this, value)\n    this.requestUpdate('disabled', old)\n  }\n\n  /**\n   * Enables four-color animation for indeterminate progress indicators.\n   *\n   * When enabled, the indeterminate progress indicator cycles between four colors:\n   * - Primary color (--ui-circular-progress-four-color-active-indicator-one-color)\n   * - Primary container (--ui-circular-progress-four-color-active-indicator-two-color)\n   * - Tertiary color (--ui-circular-progress-four-color-active-indicator-three-color)\n   * - Tertiary container (--ui-circular-progress-four-color-active-indicator-four-color)\n   *\n   * This property only affects the appearance when `indeterminate` is true.\n   *\n   * @default false\n   * @attribute fourcolor\n   */\n  @property({ type: Boolean, reflect: true }) accessor fourColor = false\n\n  /**\n   * Renders the circular progress indicator.\n   *\n   * Chooses between determinate and indeterminate rendering based on the\n   * `indeterminate` property inherited from UiRange.\n   *\n   * @returns The template result for the progress indicator.\n   */\n  protected override render(): TemplateResult {\n    if (this.indeterminate) {\n      return this.renderIndeterminateContainer()\n    }\n    return this.renderDeterminateContainer()\n  }\n\n  /**\n   * Renders the determinate progress indicator using SVG.\n   *\n   * Creates a circular progress bar that shows a specific progress value\n   * using stroke-dashoffset to control the visible portion of the circle.\n   * The progress is calculated based on the current value, min, and max properties.\n   *\n   * @returns SVG template with track and active track circles.\n   */\n  private renderDeterminateContainer() {\n    const dashOffset = (1 - this.value / this.max) * 100\n    return html`\n      <svg viewBox=\"0 0 4800 4800\">\n        <circle class=\"track\" pathLength=\"100\"></circle>\n        <circle class=\"active-track\" pathLength=\"100\" stroke-dashoffset=${dashOffset}></circle>\n      </svg>\n    `\n  }\n\n  /**\n   * Renders the indeterminate progress indicator using CSS animations.\n   *\n   * Creates a spinning animation with two half-circles that expand and contract\n   * to create a continuous loading animation. The animation can cycle through\n   * multiple colors when the `fourColor` property is enabled.\n   *\n   * @returns HTML template with animated spinner elements.\n   */\n  private renderIndeterminateContainer() {\n    return html` <div class=\"spinner\">\n      <div class=\"left\">\n        <div class=\"circle\"></div>\n      </div>\n      <div class=\"right\">\n        <div class=\"circle\"></div>\n      </div>\n    </div>`\n  }\n}\n"]}

package/build/src/md/progress/internals/CircularProgress.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=CircularProgress.styles.d.ts.map

package/build/src/md/progress/internals/CircularProgress.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgress.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/progress/internals/CircularProgress.styles.ts"],"names":[],"mappings":";AAEA,wBAyNC"}

package/build/src/md/progress/internals/CircularProgress.styles.js

@@ -0,0 +1,220 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    --ui-circular-progress-arc-duration: 1333ms;
+    --ui-circular-progress-cycle-duration: calc(4 * var(--ui-circular-progress-arc-duration));
+    --ui-circular-progress-linear-rotate-duration: calc(var(--ui-circular-progress-arc-duration) * 360 / 306);
+    --ui-circular-progress-indeterminate-easing: cubic-bezier(0.4, 0, 0.2, 1);
+    --_container-padding: 4px;
+    --_size: var(--ui-circular-progress-size, 48px);
+
+    --_active-indicator-color: var(--ui-circular-progress-active-indicator-color, var(--md-sys-color-primary));
+    --_active-indicator-width: var(--ui-circular-progress-active-indicator-width, 10);
+    --_four-color-active-indicator-four-color: var(
+      --ui-circular-progress-four-color-active-indicator-four-color,
+      var(--md-sys-color-tertiary-container)
+    );
+    --_four-color-active-indicator-one-color: var(
+      --ui-circular-progress-four-color-active-indicator-one-color,
+      var(--md-sys-color-primary)
+    );
+    --_four-color-active-indicator-three-color: var(
+      --ui-circular-progress-four-color-active-indicator-three-color,
+      var(--md-sys-color-tertiary)
+    );
+    --_four-color-active-indicator-two-color: var(
+      --ui-circular-progress-four-color-active-indicator-two-color,
+      var(--md-sys-color-primary-container)
+    );
+
+    display: inline-flex;
+    vertical-align: middle;
+    width: var(--_size);
+    height: var(--_size);
+    position: relative;
+    align-items: center;
+    justify-content: center;
+
+    contain: strict;
+    content-visibility: auto;
+  }
+
+  .progress,
+  .spinner,
+  .left,
+  .right,
+  .circle,
+  svg,
+  .track,
+  .active-track {
+    position: absolute;
+    inset: 0;
+  }
+
+  svg {
+    transform: rotate(-90deg);
+  }
+
+  circle {
+    cx: 50%;
+    cy: 50%;
+    r: calc(50% * (1 - var(--_active-indicator-width) / 100));
+    stroke-width: calc(var(--_active-indicator-width) * 1%);
+    stroke-dasharray: 100;
+    fill: transparent;
+  }
+
+  .active-track {
+    transition: stroke-dashoffset 500ms cubic-bezier(0, 0, 0.2, 1);
+    stroke: var(--_active-indicator-color);
+  }
+
+  .track {
+    stroke: transparent;
+  }
+
+  :host([indeterminate]) {
+    animation: linear infinite linear-rotate;
+    animation-duration: var(--ui-circular-progress-linear-rotate-duration);
+  }
+
+  .spinner {
+    animation: infinite both rotate-arc;
+    animation-duration: var(--ui-circular-progress-cycle-duration);
+    animation-timing-function: var(--ui-circular-progress-indeterminate-easing);
+  }
+
+  .left {
+    overflow: hidden;
+    inset: 0 50% 0 0;
+  }
+
+  .right {
+    overflow: hidden;
+    inset: 0 0 0 50%;
+  }
+
+  .circle {
+    box-sizing: border-box;
+    border-radius: 50%;
+    --_padding-box-width: calc(var(--_size) - 2 * var(--_container-padding));
+    --_active-indicator-fraction: calc(var(--_active-indicator-width) / 100);
+    border: solid calc(var(--_active-indicator-fraction) * var(--_padding-box-width));
+    border-color: var(--_active-indicator-color) var(--_active-indicator-color) transparent transparent;
+    animation: expand-arc;
+    animation-iteration-count: infinite;
+    animation-fill-mode: both;
+    animation-duration: var(--ui-circular-progress-arc-duration), var(--ui-circular-progress-cycle-duration);
+    animation-timing-function: var(--ui-circular-progress-indeterminate-easing);
+  }
+
+  .left .circle {
+    rotate: 135deg;
+    inset: 0 -100% 0 0;
+  }
+
+  .right .circle {
+    rotate: 100deg;
+    inset: 0 0 0 -100%;
+    animation-delay: calc(-0.5 * var(--ui-circular-progress-arc-duration)), 0ms;
+  }
+
+  :host([fourcolor]) .circle {
+    animation-name: expand-arc, four-color;
+  }
+
+  @keyframes expand-arc {
+    0% {
+      transform: rotate(265deg);
+    }
+    50% {
+      transform: rotate(130deg);
+    }
+    100% {
+      transform: rotate(265deg);
+    }
+  }
+
+  @keyframes rotate-arc {
+    12.5% {
+      transform: rotate(135deg);
+    }
+    25% {
+      transform: rotate(270deg);
+    }
+    37.5% {
+      transform: rotate(405deg);
+    }
+    50% {
+      transform: rotate(540deg);
+    }
+    62.5% {
+      transform: rotate(675deg);
+    }
+    75% {
+      transform: rotate(810deg);
+    }
+    87.5% {
+      transform: rotate(945deg);
+    }
+    100% {
+      transform: rotate(1080deg);
+    }
+  }
+
+  @keyframes linear-rotate {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes four-color {
+    0% {
+      border-top-color: var(--_four-color-active-indicator-one-color);
+      border-right-color: var(--_four-color-active-indicator-one-color);
+    }
+    15% {
+      border-top-color: var(--_four-color-active-indicator-one-color);
+      border-right-color: var(--_four-color-active-indicator-one-color);
+    }
+    25% {
+      border-top-color: var(--_four-color-active-indicator-two-color);
+      border-right-color: var(--_four-color-active-indicator-two-color);
+    }
+    40% {
+      border-top-color: var(--_four-color-active-indicator-two-color);
+      border-right-color: var(--_four-color-active-indicator-two-color);
+    }
+    50% {
+      border-top-color: var(--_four-color-active-indicator-three-color);
+      border-right-color: var(--_four-color-active-indicator-three-color);
+    }
+    65% {
+      border-top-color: var(--_four-color-active-indicator-three-color);
+      border-right-color: var(--_four-color-active-indicator-three-color);
+    }
+    75% {
+      border-top-color: var(--_four-color-active-indicator-four-color);
+      border-right-color: var(--_four-color-active-indicator-four-color);
+    }
+    90% {
+      border-top-color: var(--_four-color-active-indicator-four-color);
+      border-right-color: var(--_four-color-active-indicator-four-color);
+    }
+    100% {
+      border-top-color: var(--_four-color-active-indicator-one-color);
+      border-right-color: var(--_four-color-active-indicator-one-color);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .active-track {
+      stroke: CanvasText;
+    }
+
+    .circle {
+      border-color: CanvasText CanvasText Canvas Canvas;
+    }
+  }
+`;
+//# sourceMappingURL=CircularProgress.styles.js.map

package/build/src/md/progress/internals/CircularProgress.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgress.styles.js","sourceRoot":"","sources":["../../../../../src/md/progress/internals/CircularProgress.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyNjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    --ui-circular-progress-arc-duration: 1333ms;\n    --ui-circular-progress-cycle-duration: calc(4 * var(--ui-circular-progress-arc-duration));\n    --ui-circular-progress-linear-rotate-duration: calc(var(--ui-circular-progress-arc-duration) * 360 / 306);\n    --ui-circular-progress-indeterminate-easing: cubic-bezier(0.4, 0, 0.2, 1);\n    --_container-padding: 4px;\n    --_size: var(--ui-circular-progress-size, 48px);\n\n    --_active-indicator-color: var(--ui-circular-progress-active-indicator-color, var(--md-sys-color-primary));\n    --_active-indicator-width: var(--ui-circular-progress-active-indicator-width, 10);\n    --_four-color-active-indicator-four-color: var(\n      --ui-circular-progress-four-color-active-indicator-four-color,\n      var(--md-sys-color-tertiary-container)\n    );\n    --_four-color-active-indicator-one-color: var(\n      --ui-circular-progress-four-color-active-indicator-one-color,\n      var(--md-sys-color-primary)\n    );\n    --_four-color-active-indicator-three-color: var(\n      --ui-circular-progress-four-color-active-indicator-three-color,\n      var(--md-sys-color-tertiary)\n    );\n    --_four-color-active-indicator-two-color: var(\n      --ui-circular-progress-four-color-active-indicator-two-color,\n      var(--md-sys-color-primary-container)\n    );\n\n    display: inline-flex;\n    vertical-align: middle;\n    width: var(--_size);\n    height: var(--_size);\n    position: relative;\n    align-items: center;\n    justify-content: center;\n\n    contain: strict;\n    content-visibility: auto;\n  }\n\n  .progress,\n  .spinner,\n  .left,\n  .right,\n  .circle,\n  svg,\n  .track,\n  .active-track {\n    position: absolute;\n    inset: 0;\n  }\n\n  svg {\n    transform: rotate(-90deg);\n  }\n\n  circle {\n    cx: 50%;\n    cy: 50%;\n    r: calc(50% * (1 - var(--_active-indicator-width) / 100));\n    stroke-width: calc(var(--_active-indicator-width) * 1%);\n    stroke-dasharray: 100;\n    fill: transparent;\n  }\n\n  .active-track {\n    transition: stroke-dashoffset 500ms cubic-bezier(0, 0, 0.2, 1);\n    stroke: var(--_active-indicator-color);\n  }\n\n  .track {\n    stroke: transparent;\n  }\n\n  :host([indeterminate]) {\n    animation: linear infinite linear-rotate;\n    animation-duration: var(--ui-circular-progress-linear-rotate-duration);\n  }\n\n  .spinner {\n    animation: infinite both rotate-arc;\n    animation-duration: var(--ui-circular-progress-cycle-duration);\n    animation-timing-function: var(--ui-circular-progress-indeterminate-easing);\n  }\n\n  .left {\n    overflow: hidden;\n    inset: 0 50% 0 0;\n  }\n\n  .right {\n    overflow: hidden;\n    inset: 0 0 0 50%;\n  }\n\n  .circle {\n    box-sizing: border-box;\n    border-radius: 50%;\n    --_padding-box-width: calc(var(--_size) - 2 * var(--_container-padding));\n    --_active-indicator-fraction: calc(var(--_active-indicator-width) / 100);\n    border: solid calc(var(--_active-indicator-fraction) * var(--_padding-box-width));\n    border-color: var(--_active-indicator-color) var(--_active-indicator-color) transparent transparent;\n    animation: expand-arc;\n    animation-iteration-count: infinite;\n    animation-fill-mode: both;\n    animation-duration: var(--ui-circular-progress-arc-duration), var(--ui-circular-progress-cycle-duration);\n    animation-timing-function: var(--ui-circular-progress-indeterminate-easing);\n  }\n\n  .left .circle {\n    rotate: 135deg;\n    inset: 0 -100% 0 0;\n  }\n\n  .right .circle {\n    rotate: 100deg;\n    inset: 0 0 0 -100%;\n    animation-delay: calc(-0.5 * var(--ui-circular-progress-arc-duration)), 0ms;\n  }\n\n  :host([fourcolor]) .circle {\n    animation-name: expand-arc, four-color;\n  }\n\n  @keyframes expand-arc {\n    0% {\n      transform: rotate(265deg);\n    }\n    50% {\n      transform: rotate(130deg);\n    }\n    100% {\n      transform: rotate(265deg);\n    }\n  }\n\n  @keyframes rotate-arc {\n    12.5% {\n      transform: rotate(135deg);\n    }\n    25% {\n      transform: rotate(270deg);\n    }\n    37.5% {\n      transform: rotate(405deg);\n    }\n    50% {\n      transform: rotate(540deg);\n    }\n    62.5% {\n      transform: rotate(675deg);\n    }\n    75% {\n      transform: rotate(810deg);\n    }\n    87.5% {\n      transform: rotate(945deg);\n    }\n    100% {\n      transform: rotate(1080deg);\n    }\n  }\n\n  @keyframes linear-rotate {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  @keyframes four-color {\n    0% {\n      border-top-color: var(--_four-color-active-indicator-one-color);\n      border-right-color: var(--_four-color-active-indicator-one-color);\n    }\n    15% {\n      border-top-color: var(--_four-color-active-indicator-one-color);\n      border-right-color: var(--_four-color-active-indicator-one-color);\n    }\n    25% {\n      border-top-color: var(--_four-color-active-indicator-two-color);\n      border-right-color: var(--_four-color-active-indicator-two-color);\n    }\n    40% {\n      border-top-color: var(--_four-color-active-indicator-two-color);\n      border-right-color: var(--_four-color-active-indicator-two-color);\n    }\n    50% {\n      border-top-color: var(--_four-color-active-indicator-three-color);\n      border-right-color: var(--_four-color-active-indicator-three-color);\n    }\n    65% {\n      border-top-color: var(--_four-color-active-indicator-three-color);\n      border-right-color: var(--_four-color-active-indicator-three-color);\n    }\n    75% {\n      border-top-color: var(--_four-color-active-indicator-four-color);\n      border-right-color: var(--_four-color-active-indicator-four-color);\n    }\n    90% {\n      border-top-color: var(--_four-color-active-indicator-four-color);\n      border-right-color: var(--_four-color-active-indicator-four-color);\n    }\n    100% {\n      border-top-color: var(--_four-color-active-indicator-one-color);\n      border-right-color: var(--_four-color-active-indicator-one-color);\n    }\n  }\n\n  @media (forced-colors: active) {\n    .active-track {\n      stroke: CanvasText;\n    }\n\n    .circle {\n      border-color: CanvasText CanvasText Canvas Canvas;\n    }\n  }\n`\n"]}

package/build/src/md/progress/internals/Range.d.ts

@@ -31,6 +31,12 @@ export declare abstract class UiRange extends UiElement {
      * @attribute
      */
     accessor step: number;
+    /**
+     * Use an indeterminate progress indicator.
+     * @attribute
+     */
+    accessor indeterminate: boolean | undefined;
+    connectedCallback(): void;
     protected willUpdate(cp: PropertyValues<this>): void;
     protected rangeChanged(): void;
     /**

package/build/src/md/progress/internals/Range.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Range.d.ts","sourceRoot":"","sources":["../../../../../src/md/progress/internals/Range.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAGpC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAE9C;;GAEG;AACH,8BAAsB,OAAQ,SAAQ,SAAS;IAC7C,SAAS,CAAC,aAAa,SAAI;IAE3B,SAAS,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAA;IAEnC,SAAS,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;IAE3B;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAElB;IAED;;;OAGG;IACoD,QAAQ,CAAC,KAAK,SAAI;IAEzE;;;OAGG;IACoD,QAAQ,CAAC,GAAG,SAAI;IAEvE;;;OAGG;IACoD,QAAQ,CAAC,GAAG,SAAM;IAEzE;;;OAGG;IACoD,QAAQ,CAAC,IAAI,SAAI;cAErD,UAAU,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM7D,SAAS,CAAC,YAAY,IAAI,IAAI;IAS9B;;;OAGG;IACH,SAAS,CAAC,aAAa,IAAI,OAAO;IAOlC,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAI3C,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAoB3C,SAAS,CAAC,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;CAO9C"}
+{"version":3,"file":"Range.d.ts","sourceRoot":"","sources":["../../../../../src/md/progress/internals/Range.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAGpC,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAE9C;;GAEG;AACH,8BAAsB,OAAQ,SAAQ,SAAS;IAC7C,SAAS,CAAC,aAAa,SAAI;IAE3B,SAAS,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAA;IAEnC,SAAS,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;IAE3B;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAElB;IAED;;;OAGG;IACoD,QAAQ,CAAC,KAAK,SAAI;IAEzE;;;OAGG;IACoD,QAAQ,CAAC,GAAG,SAAI;IAEvE;;;OAGG;IACoD,QAAQ,CAAC,GAAG,SAAM;IAEzE;;;OAGG;IACoD,QAAQ,CAAC,IAAI,SAAI;IAExE;;;OAGG;IACyC,QAAQ,CAAC,aAAa,EAAE,OAAO,GAAG,SAAS,CAAA;IAE9E,iBAAiB,IAAI,IAAI;cAOf,UAAU,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAqB7D,SAAS,CAAC,YAAY,IAAI,IAAI;IAS9B;;;OAGG;IACH,SAAS,CAAC,aAAa,IAAI,OAAO;IAOlC,SAAS,CAAC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAI3C,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;IAoB3C,SAAS,CAAC,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;CAO9C"}

package/build/src/md/progress/internals/Range.js

@@ -19,6 +19,9 @@ let UiRange = (() => {
     let _step_decorators;
     let _step_initializers = [];
     let _step_extraInitializers = [];
+    let _indeterminate_decorators;
+    let _indeterminate_initializers = [];
+    let _indeterminate_extraInitializers = [];
     return class UiRange extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
@@ -26,10 +29,12 @@ let UiRange = (() => {
             _min_decorators = [property({ type: Number, converter: floatConverter })];
             _max_decorators = [property({ type: Number, converter: floatConverter })];
             _step_decorators = [property({ type: Number, converter: floatConverter })];
+            _indeterminate_decorators = [property({ reflect: true, type: Boolean })];
             __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
             __esDecorate(this, null, _min_decorators, { kind: "accessor", name: "min", static: false, private: false, access: { has: obj => "min" in obj, get: obj => obj.min, set: (obj, value) => { obj.min = value; } }, metadata: _metadata }, _min_initializers, _min_extraInitializers);
             __esDecorate(this, null, _max_decorators, { kind: "accessor", name: "max", static: false, private: false, access: { has: obj => "max" in obj, get: obj => obj.max, set: (obj, value) => { obj.max = value; } }, metadata: _metadata }, _max_initializers, _max_extraInitializers);
             __esDecorate(this, null, _step_decorators, { kind: "accessor", name: "step", static: false, private: false, access: { has: obj => "step" in obj, get: obj => obj.step, set: (obj, value) => { obj.step = value; } }, metadata: _metadata }, _step_initializers, _step_extraInitializers);
+            __esDecorate(this, null, _indeterminate_decorators, { kind: "accessor", name: "indeterminate", static: false, private: false, access: { has: obj => "indeterminate" in obj, get: obj => obj.indeterminate, set: (obj, value) => { obj.indeterminate = value; } }, metadata: _metadata }, _indeterminate_initializers, _indeterminate_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
         ratioInternal = 0;
@@ -77,17 +82,50 @@ let UiRange = (() => {
          */
         get max() { return this.#max_accessor_storage; }
         set max(value) { this.#max_accessor_storage = value; }
-        #step_accessor_storage = (__runInitializers(this, _max_extraInitializers), __runInitializers(this, _step_initializers, 1));
+        #step_accessor_storage = (__runInitializers(this, _max_extraInitializers), __runInitializers(this, _step_initializers, 1
+        /**
+         * Use an indeterminate progress indicator.
+         * @attribute
+         */
+        ));
         /**
          * Specifies the value granularity of the range's value.
          * @attribute
          */
         get step() { return this.#step_accessor_storage; }
         set step(value) { this.#step_accessor_storage = value; }
+        #indeterminate_accessor_storage = (__runInitializers(this, _step_extraInitializers), __runInitializers(this, _indeterminate_initializers, void 0));
+        /**
+         * Use an indeterminate progress indicator.
+         * @attribute
+         */
+        get indeterminate() { return this.#indeterminate_accessor_storage; }
+        set indeterminate(value) { this.#indeterminate_accessor_storage = value; }
+        connectedCallback() {
+            super.connectedCallback();
+            if (!this.hasAttribute('role')) {
+                this.setAttribute('role', 'progressbar');
+            }
+        }
         willUpdate(cp) {
-            if (cp.has('value') || cp.has('min') || cp.has('max') || cp.has('step')) {
+            if (cp.has('value') || cp.has('min') || cp.has('max') || cp.has('step') || cp.has('indeterminate')) {
                 this.rangeChanged();
             }
+            if (cp.has('min')) {
+                this.setAttribute('aria-valuemin', String(this.min));
+            }
+            if (cp.has('max')) {
+                this.setAttribute('aria-valuemax', String(this.max));
+            }
+            if (cp.has('indeterminate') || cp.has('value')) {
+                if (this.indeterminate) {
+                    this.removeAttribute('aria-valuenow');
+                }
+                else {
+                    this.setAttribute('aria-valuenow', String(this.value));
+                }
+            }
+            super.willUpdate(cp);
         }
         rangeChanged() {
             this.validateValue();
@@ -138,7 +176,7 @@ let UiRange = (() => {
         }
         constructor() {
             super(...arguments);
-            __runInitializers(this, _step_extraInitializers);
+            __runInitializers(this, _indeterminate_extraInitializers);
         }
     };
 })();

package/build/src/md/progress/internals/Range.js.map

@@ -1 +1 @@
-{"version":3,"file":"Range.js","sourceRoot":"","sources":["../../../../../src/md/progress/internals/Range.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { floatConverter } from '../../../lib/AttributeConverters.js'\nimport { UiElement } from '../../UiElement.js'\n\n/**\n * @fires ratiochange - When `ratio` computation is ready.\n */\nexport abstract class UiRange extends UiElement {\n  protected ratioInternal = 0\n\n  protected debounceInternal?: number\n\n  protected oldValue?: number\n\n  /**\n   * @returns the ratio of the value.\n   */\n  get ratio(): number {\n    return this.ratioInternal\n  }\n\n  /**\n   * The number that represents the current value.\n   * @attribute\n   */\n  @property({ type: Number, converter: floatConverter }) accessor value = 0\n\n  /**\n   * The number that indicates the minimum value of the range.\n   * @attribute\n   */\n  @property({ type: Number, converter: floatConverter }) accessor min = 0\n\n  /**\n   * The number that indicates the maximum value of the range.\n   * @attribute\n   */\n  @property({ type: Number, converter: floatConverter }) accessor max = 100\n\n  /**\n   * Specifies the value granularity of the range's value.\n   * @attribute\n   */\n  @property({ type: Number, converter: floatConverter }) accessor step = 1\n\n  protected override willUpdate(cp: PropertyValues<this>): void {\n    if (cp.has('value') || cp.has('min') || cp.has('max') || cp.has('step')) {\n      this.rangeChanged()\n    }\n  }\n\n  protected rangeChanged(): void {\n    this.validateValue()\n    const ratio = this.computeRatio(this.value) * 100\n    if (this.ratioInternal !== ratio) {\n      this.ratioInternal = ratio\n      this.dispatchEvent(new Event('ratiochange'))\n    }\n  }\n\n  /**\n   * Makes sure the value is in the right format.\n   * @returns True when the value has changed.\n   */\n  protected validateValue(): boolean {\n    const v = this.clampValue(this.value)\n    this.oldValue = Number.isNaN(v) ? this.oldValue : v\n    this.value = this.oldValue || 0\n    return this.value !== v\n  }\n\n  protected clampValue(value: number): number {\n    return Math.min(this.max, Math.max(this.min, this.computeStep(value)))\n  }\n\n  protected computeStep(step: number): number {\n    const value = step\n    if (!this.step) {\n      return value\n    }\n    const numSteps = Math.round((value - this.min) / this.step)\n    if (this.step < 1) {\n      /**\n       * For small values of this.step, if we calculate the step using\n       * `Math.round(value / step) * step` we may hit a precision point issue\n       * eg. 0.1 * 0.2 =  0.020000000000000004\n       * http://docs.oracle.com/cd/E19957-01/806-3568/ncg_goldberg.html\n       *\n       * as a work around we can divide by the reciprocal of `step`\n       */\n      return numSteps / (1 / this.step) + this.min\n    }\n    return numSteps * this.step + this.min\n  }\n\n  protected computeRatio(value: number): number {\n    const denominator = this.max - this.min\n    if (denominator === 0) {\n      return 0\n    }\n    return (this.clampValue(value) - this.min) / (this.max - this.min)\n  }\n}\n"]}
+{"version":3,"file":"Range.js","sourceRoot":"","sources":["../../../../../src/md/progress/internals/Range.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { floatConverter } from '../../../lib/AttributeConverters.js'\nimport { UiElement } from '../../UiElement.js'\n\n/**\n * @fires ratiochange - When `ratio` computation is ready.\n */\nexport abstract class UiRange extends UiElement {\n  protected ratioInternal = 0\n\n  protected debounceInternal?: number\n\n  protected oldValue?: number\n\n  /**\n   * @returns the ratio of the value.\n   */\n  get ratio(): number {\n    return this.ratioInternal\n  }\n\n  /**\n   * The number that represents the current value.\n   * @attribute\n   */\n  @property({ type: Number, converter: floatConverter }) accessor value = 0\n\n  /**\n   * The number that indicates the minimum value of the range.\n   * @attribute\n   */\n  @property({ type: Number, converter: floatConverter }) accessor min = 0\n\n  /**\n   * The number that indicates the maximum value of the range.\n   * @attribute\n   */\n  @property({ type: Number, converter: floatConverter }) accessor max = 100\n\n  /**\n   * Specifies the value granularity of the range's value.\n   * @attribute\n   */\n  @property({ type: Number, converter: floatConverter }) accessor step = 1\n\n  /**\n   * Use an indeterminate progress indicator.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean }) accessor indeterminate: boolean | undefined\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'progressbar')\n    }\n  }\n\n  protected override willUpdate(cp: PropertyValues<this>): void {\n    if (cp.has('value') || cp.has('min') || cp.has('max') || cp.has('step') || cp.has('indeterminate')) {\n      this.rangeChanged()\n    }\n\n    if (cp.has('min')) {\n      this.setAttribute('aria-valuemin', String(this.min))\n    }\n    if (cp.has('max')) {\n      this.setAttribute('aria-valuemax', String(this.max))\n    }\n    if (cp.has('indeterminate') || cp.has('value')) {\n      if (this.indeterminate) {\n        this.removeAttribute('aria-valuenow')\n      } else {\n        this.setAttribute('aria-valuenow', String(this.value))\n      }\n    }\n    super.willUpdate(cp)\n  }\n\n  protected rangeChanged(): void {\n    this.validateValue()\n    const ratio = this.computeRatio(this.value) * 100\n    if (this.ratioInternal !== ratio) {\n      this.ratioInternal = ratio\n      this.dispatchEvent(new Event('ratiochange'))\n    }\n  }\n\n  /**\n   * Makes sure the value is in the right format.\n   * @returns True when the value has changed.\n   */\n  protected validateValue(): boolean {\n    const v = this.clampValue(this.value)\n    this.oldValue = Number.isNaN(v) ? this.oldValue : v\n    this.value = this.oldValue || 0\n    return this.value !== v\n  }\n\n  protected clampValue(value: number): number {\n    return Math.min(this.max, Math.max(this.min, this.computeStep(value)))\n  }\n\n  protected computeStep(step: number): number {\n    const value = step\n    if (!this.step) {\n      return value\n    }\n    const numSteps = Math.round((value - this.min) / this.step)\n    if (this.step < 1) {\n      /**\n       * For small values of this.step, if we calculate the step using\n       * `Math.round(value / step) * step` we may hit a precision point issue\n       * eg. 0.1 * 0.2 =  0.020000000000000004\n       * http://docs.oracle.com/cd/E19957-01/806-3568/ncg_goldberg.html\n       *\n       * as a work around we can divide by the reciprocal of `step`\n       */\n      return numSteps / (1 / this.step) + this.min\n    }\n    return numSteps * this.step + this.min\n  }\n\n  protected computeRatio(value: number): number {\n    const denominator = this.max - this.min\n    if (denominator === 0) {\n      return 0\n    }\n    return (this.clampValue(value) - this.min) / (this.max - this.min)\n  }\n}\n"]}

package/build/src/md/progress/internals/UiProgress.d.ts

@@ -13,18 +13,11 @@ export default class UiProgress extends UiRange {
      * @attr
      */
     accessor secondaryProgress: number | undefined;
-    /**
-     * Use an indeterminate progress indicator.
-     * @attr
-     */
-    accessor indeterminate: boolean | undefined;
     /**
      * @returns The ratio of the secondary progress.
      */
     get secondaryRatio(): number;
-    connectedCallback(): void;
     protected willUpdate(cp: PropertyValues<this>): void;
-    protected updated(cp: PropertyValues<this>): void;
     protected rangeChanged(): void;
     render(): TemplateResult;
 }

package/build/src/md/progress/internals/UiProgress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UiProgress.d.ts","sourceRoot":"","sources":["../../../../../src/md/progress/internals/UiProgress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAI1D,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAIpC,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,OAAO;IAC7C,SAAS,CAAC,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAEzC,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED;;;OAGG;IACH,IACI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAI1B;IAED;;;OAGG;IACoD,QAAQ,CAAC,iBAAiB,EAAE,MAAM,GAAG,SAAS,CAAA;IAErG;;;OAGG;IACyC,QAAQ,CAAC,aAAa,EAAE,OAAO,GAAG,SAAS,CAAA;IAEvF;;OAEG;IACH,IAAI,cAAc,IAAI,MAAM,CAE3B;IAEQ,iBAAiB,IAAI,IAAI;cAOf,UAAU,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAO1C,OAAO,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAgBvC,YAAY,IAAI,IAAI;IAW9B,MAAM,IAAI,cAAc;CAyBlC"}
+{"version":3,"file":"UiProgress.d.ts","sourceRoot":"","sources":["../../../../../src/md/progress/internals/UiProgress.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAI1D,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAIpC,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,OAAO;IAC7C,SAAS,CAAC,sBAAsB,CAAC,EAAE,MAAM,CAAA;IAEzC,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED;;;OAGG;IACH,IACI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAI1B;IAED;;;OAGG;IACoD,QAAQ,CAAC,iBAAiB,EAAE,MAAM,GAAG,SAAS,CAAA;IAErG;;OAEG;IACH,IAAI,cAAc,IAAI,MAAM,CAE3B;cAEkB,UAAU,CAAC,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAO1C,YAAY,IAAI,IAAI;IAW9B,MAAM,IAAI,cAAc;CAyBlC"}