@m3e/progress-indicator 1.0.0-rc.1 → 1.0.0-rc.2

package/dist/src/ProgressElementIndicatorBase.d.ts

@@ -1,23 +0,0 @@
-import { CSSResultGroup, LitElement, PropertyValues } from "lit";
-declare const ProgressElementIndicatorBase_base: import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor<import("@m3e/core").AttachInternalsMixin> & import("node_modules/@m3e/core/dist/src/shared/mixins/Constructor").Constructor & typeof LitElement;
-/** A base implementation for an element used to convey progress. This class must be inherited. */
-export declare abstract class ProgressElementIndicatorBase extends ProgressElementIndicatorBase_base {
-    /** The styles of the element. */
-    static styles: CSSResultGroup;
-    /**
-     * A fractional value, between 0 and `max`, indicating progress.
-     * @default 0
-     */
-    value: number;
-    /**
-     * The maximum progress value.
-     * @default 100
-     */
-    max: number;
-    /** @inheritdoc */
-    connectedCallback(): void;
-    /** @inheritdoc */
-    protected update(changedProperties: PropertyValues<this>): void;
-}
-export {};
-//# sourceMappingURL=ProgressElementIndicatorBase.d.ts.map

package/dist/src/ProgressElementIndicatorBase.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ProgressElementIndicatorBase.d.ts","sourceRoot":"","sources":["../../src/ProgressElementIndicatorBase.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;;AAKtE,kGAAkG;AAClG,8BAAsB,4BAA6B,SAAQ,iCAAsD;IAC/G,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAOpC;IAEF;;;OAGG;IACwC,KAAK,SAAK;IAErD;;;OAGG;IACyB,GAAG,SAAO;IAEtC,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAKlC,kBAAkB;cACC,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;CAUzE"}

package/dist/src/index.d.ts

@@ -1,5 +0,0 @@
-export * from "./CircularProgressIndicatorElement";
-export * from "./LinearProgressIndicatorElement";
-export * from "./LinearProgressMode";
-export * from "./ProgressElementIndicatorBase";
-//# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC;AACnD,cAAc,kCAAkC,CAAC;AACjD,cAAc,sBAAsB,CAAC;AACrC,cAAc,gCAAgC,CAAC"}

package/eslint.config.mjs

@@ -1,13 +0,0 @@
-import eslint from "@eslint/js";
-import tseslint from "typescript-eslint";
-import { fileURLToPath } from "url";
-import { dirname } from "path";
-
-export default tseslint.config(eslint.configs.recommended, tseslint.configs.recommended, {
-  languageOptions: {
-    parserOptions: {
-      project: true,
-      tsconfigRootDir: dirname(fileURLToPath(import.meta.url)),
-    },
-  },
-});

package/rollup.config.js

@@ -1,32 +0,0 @@
-import resolve from "@rollup/plugin-node-resolve";
-import terser from "@rollup/plugin-terser";
-import typescript from "@rollup/plugin-typescript";
-
-const banner = `/**
- * @license MIT
- * Copyright (c) 2025 matraic
- * See LICENSE file in the project root for full license text.
- */`;
-
-export default [
-  {
-    input: "src/index.ts",
-    output: [
-      {
-        file: "dist/index.js",
-        format: "esm",
-        sourcemap: true,
-        banner: banner,
-      },
-      {
-        file: "dist/index.min.js",
-        format: "esm",
-        sourcemap: true,
-        banner: banner,
-        plugins: [terser({ mangle: true })],
-      },
-    ],
-    external: ["@m3e/core", "lit"],
-    plugins: [resolve(), typescript()],
-  },
-];

package/src/CircularProgressIndicatorElement.ts

@@ -1,271 +0,0 @@
-/**
- * Adapted from Angular Material Progress Spinner
- * Source: https://github.com/angular/components/tree/main/src/material/progress-spinner
- *
- * @license MIT
- * Copyright (c) 2025 Google LLC
- * See LICENSE file in the project root for full license text.
- */
-
-import { css, CSSResultGroup, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-import { ProgressElementIndicatorBase } from "./ProgressElementIndicatorBase";
-import { DesignToken } from "@m3e/core";
-
-const DEFAULT_DIAMETER = 40;
-const DEFAULT_STROKE_WIDTH = 10;
-
-/**
- * A circular indicator of progress and activity.
- *
- * @description
- * The `m3e-circular-progress-indicator` component displays a circular progress spinner for
- * tracking the completion of a task or process. It supports determinate and indeterminate
- * modes, and can be customized with CSS custom properties for diameter, stroke width, and
- * color. The component is accessible, animates smoothly, and adapts to various use cases including
- * loading and activity indication.
- *
- * @example
- * The following example illustrates a determinate circular progress indicator.
- * ```html
- * <m3e-circular-progress-indicator value="30"></m3e-circular-progress-indicator>
- * ```
- * @example
- * The next example illustrates an indeterminate circular progress indicator using the `indeterminate` attribute.
- * ```html
- * <m3e-circular-progress-indicator indeterminate></m3e-circular-progress-indicator>
- * ```
- *
- * @tag m3e-circular-progress-indicator
- *
- * @slot - Renders the content inside the progress indicator.
- *
- * @attr diameter - The diameter, in pixels, of the progress spinner.
- * @attr indeterminate - Whether to show something is happening without conveying progress.
- * @attr max - The maximum progress value.
- * @attr stroke-width - The stroke width, in pixels, of the progress spinner.
- * @attr value - A fractional value, between 0 and `max`, indicating progress.
- *
- * @cssprop --m3e-progress-indicator-track-color - Track color of the progress bar (background/buffer).
- * @cssprop --m3e-progress-indicator-color - Color of the progress indicator (foreground).
- */
-@customElement("m3e-circular-progress-indicator")
-export class M3eCircularProgressIndicatorElement extends ProgressElementIndicatorBase {
-  /** The styles of the element. */
-  static override styles: CSSResultGroup = [
-    ProgressElementIndicatorBase.styles,
-    css`
-      :host {
-        display: inline-flex;
-        vertical-align: middle;
-        width: var(--_diameter);
-        height: var(--_diameter);
-        position: relative;
-        align-items: center;
-        justify-content: center;
-        contain: strict;
-
-        --_arc-duration: 1333ms;
-        --_cycle-duration: calc(4 * var(--_arc-duration));
-        --_linear-rotate-duration: calc(var(--_arc-duration) * 360 / 306);
-        --_indeterminate-easing: cubic-bezier(0.4, 0, 0.2, 1);
-        --_container-padding: 0px;
-        --_diameter: ${DEFAULT_DIAMETER}px;
-        --_stroke-width: ${DEFAULT_STROKE_WIDTH};
-      }
-      svg {
-        transform: rotate(-90deg);
-      }
-      circle {
-        cx: 50%;
-        cy: 50%;
-        r: calc(50% * (1 - var(--_stroke-width) / 100));
-        stroke-width: calc(var(--_stroke-width) * 1%);
-        stroke-dasharray: 100;
-        fill: transparent;
-      }
-      .active-track {
-        transition: stroke-dashoffset 500ms cubic-bezier(0, 0, 0.2, 1);
-        stroke: var(--m3e-progress-indicator-color, ${DesignToken.color.primary});
-      }
-      .track {
-        stroke: var(--m3e-progress-indicator-track-color, ${DesignToken.color.secondaryContainer});
-      }
-      .progress {
-        flex: 1;
-        align-self: stretch;
-        margin: var(--_container-padding);
-        pointer-events: none;
-      }
-      .progress,
-      .spinner,
-      .left,
-      .right,
-      .content,
-      .circle {
-        position: absolute;
-        inset: 0;
-      }
-
-      .content {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-      :host([indeterminate]) {
-        content-visibility: auto;
-      }
-      :host([indeterminate]) .progress {
-        animation: linear infinite linear-rotate;
-        animation-duration: var(--_linear-rotate-duration);
-      }
-      .spinner {
-        animation: infinite both rotate-arc;
-        animation-duration: var(--_cycle-duration);
-        animation-timing-function: var(--_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%;
-        border: solid calc(calc(var(--_stroke-width) / 100) * calc(var(--_diameter) - 2 * var(--_container-padding)));
-        border-color: var(--m3e-progress-indicator-color, ${DesignToken.color.primary})
-          var(--m3e-progress-indicator-color, ${DesignToken.color.primary}) transparent transparent;
-        animation: expand-arc;
-        animation-iteration-count: infinite;
-        animation-fill-mode: both;
-        animation-duration: var(--_arc-duration), var(--_cycle-duration);
-        animation-timing-function: var(--_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(--_arc-duration)), 0ms;
-      }
-      @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);
-        }
-      }
-      @media (forced-colors: active) {
-        circle {
-          fill: Canvas;
-        }
-        .circle {
-          border-color: var(--m3e-progress-indicator-color, ${DesignToken.color.primary})
-            var(--m3e-progress-indicator-color, ${DesignToken.color.primary}) Canvas Canvas;
-        }
-      }
-    `,
-  ];
-
-  /** @private */ #diameter = DEFAULT_DIAMETER;
-  /** @private */ #strokeWidth = DEFAULT_STROKE_WIDTH;
-
-  /**
-   * Whether to show something is happening without conveying progress.
-   * @default false
-   */
-  @property({ type: Boolean, reflect: true }) indeterminate = false;
-
-  /**
-   * The diameter, in pixels, of the progress spinner.
-   * @default 40
-   */
-  @property({ type: Number }) get diameter(): number {
-    return this.#diameter;
-  }
-  set diameter(value: number) {
-    this.#diameter = value;
-    this.style.setProperty("--_diameter", `${value}`);
-  }
-
-  /**
-   * The stroke width, in pixels, of the progress spinner.
-   * @default 10
-   */
-  @property({ attribute: "stroke-width", type: Number }) get strokeWidth(): number {
-    return this.#strokeWidth;
-  }
-  set strokeWidth(value: number) {
-    this.#strokeWidth = value;
-    this.style.setProperty("--_stroke-width", `${value}`);
-  }
-
-  /** @inheritdoc */
-  protected override render(): unknown {
-    return html`<div class="progress" aria-hidden="true">
-        ${this.indeterminate
-          ? html`<div class="spinner">
-              <div class="left"><div class="circle"></div></div>
-              <div class="right"><div class="circle"></div></div>
-            </div>`
-          : html`<svg viewBox="0 0 4800 4800">
-              <circle class="track" pathLength="100"></circle>
-              <circle
-                class="active-track"
-                pathLength="100"
-                stroke-dashoffset="${(1 - this.value / this.max) * 100}"
-              ></circle>
-            </svg>`}
-      </div>
-      <div class="content"><slot></slot></div>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "m3e-circular-progress-indicator": M3eCircularProgressIndicatorElement;
-  }
-}

package/src/LinearProgressIndicatorElement.ts

@@ -1,294 +0,0 @@
-/**
- * Adapted from Angular Material Progress Bar
- * Source: https://github.com/angular/components/blob/main/src/material/progress-bar/progress-bar.ts
- *
- * @license MIT
- * Copyright (c) 2025 Google LLC
- * See LICENSE file in the project root for full license text.
- */
-
-import { css, CSSResultGroup, html } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-import { DesignToken, safeStyleMap } from "@m3e/core";
-
-import { LinearProgressMode } from "./LinearProgressMode";
-import { ProgressElementIndicatorBase } from "./ProgressElementIndicatorBase";
-
-/**
- * @summary
- * A horizontal bar for indicating progress and activity.
- *
- * @description
- * The `m3e-linear-progress-indicator` component displays a horizontal progress bar for tracking
- * the completion of a task or process. It supports `determinate`, `indeterminate`, `buffer`,
- * and `query` modes, and can be customized with CSS custom properties for thickness, shape, and color.
- * The component is accessible, animates smoothly, and adapts to various use cases including loading,
- * buffering, and activity indication.
- *
- * @example
- * The following example illustrates a determinate linear progress indicator.
- * ```html
- * <m3e-linear-progress-indicator value="30"></m3e-linear-progress-indicator>
- * ```
- * @example
- * The next example illustrates an indeterminate linear progress indicator using the `mode` attribute.
- * ```html
- * <m3e-linear-progress-indicator mode="indeterminate"></m3e-linear-progress-indicator>
- * ```
- *
- * @tag m3e-linear-progress-indicator
- *
- * @attr buffer-value - A fractional value, between 0 and `max`, indicating buffer progress.
- * @attr max - The maximum progress value.
- * @attr mode - The mode of the progress bar.
- * @attr value - A fractional value, between 0 and `max`, indicating progress.
- *
- * @cssprop --m3e-linear-progress-indicator-thickness - Thickness (height) of the progress bar.
- * @cssprop --m3e-linear-progress-indicator-shape - Border radius of the progress bar.
- * @cssprop --m3e-progress-indicator-track-color - Track color of the progress bar (background/buffer).
- * @cssprop --m3e-progress-indicator-color - Color of the progress indicator (foreground).
- */
-@customElement("m3e-linear-progress-indicator")
-export class M3eLinearProgressIndicatorElement extends ProgressElementIndicatorBase {
-  /** The styles of the element. */
-  static override styles: CSSResultGroup = [
-    ProgressElementIndicatorBase.styles,
-    css`
-      :host {
-        display: block;
-        height: var(--m3e-linear-progress-indicator-thickness, 0.25rem);
-        overflow: hidden;
-        position: relative;
-        transform: opacity var(--_piece-animation-duration) linear;
-        border-radius: var(--m3e-linear-progress-indicator-shape, ${DesignToken.shape.corner.extraSmall});
-
-        --_piece-animation-duration: 250ms;
-        --_full-animation-duration: 2000ms;
-      }
-      :host([mode="indeterminate"]),
-      :host([mode="query"]) {
-        content-visibility: auto;
-      }
-      .progress {
-        pointer-events: none;
-      }
-      .progress,
-      .wrapper {
-        height: 100%;
-      }
-      .element,
-      .fill::after {
-        position: absolute;
-        height: 100%;
-        width: 100%;
-      }
-      .background {
-        width: calc(100% + 0.625rem);
-        fill: var(--m3e-progress-indicator-track-color, ${DesignToken.color.secondaryContainer});
-      }
-      .buffer {
-        transform-origin: top left;
-        transition: transform var(--_piece-animation-duration) ease;
-        background-color: var(--m3e-progress-indicator-track-color, ${DesignToken.color.secondaryContainer});
-      }
-      .primary {
-        transform: scale3d(calc(var(--_value, 0) / var(--_max)), 1, 1);
-      }
-      .secondary {
-        display: none;
-      }
-      .fill {
-        animation: none;
-        transform-origin: top left;
-        transition: transform var(--_piece-animation-duration) ease;
-      }
-      .fill::after {
-        animation: none;
-        content: "";
-        display: inline-block;
-        left: 0;
-        background-color: var(--m3e-progress-indicator-color, ${DesignToken.color.primary});
-      }
-      :host([mode="query"]) {
-        transform: rotateZ(180deg);
-      }
-      :host([mode="indeterminate"]) .fill,
-      :host([mode="query"]) .fill {
-        transition: none;
-      }
-      :host([mode="indeterminate"]) .primary,
-      :host([mode="query"]) .primary {
-        backface-visibility: hidden;
-        animation: primary-indeterminate-translate var(--_full-animation-duration) infinite linear;
-        left: -145.166611%;
-      }
-      :host([mode="indeterminate"]) .primary.fill::after,
-      :host([mode="query"]) .primary.fill::after {
-        backface-visibility: hidden;
-        animation: primary-indeterminate-scale var(--_full-animation-duration) infinite linear;
-      }
-      :host([mode="indeterminate"]) .secondary,
-      :host([mode="query"]) .secondary {
-        display: block;
-        backface-visibility: hidden;
-        animation: secondary-indeterminate-translate var(--_full-animation-duration) infinite linear;
-        left: -54.888891%;
-      }
-      :host([mode="indeterminate"]) .secondary.fill::after,
-      :host([mode="query"]) .secondary.fill::after {
-        backface-visibility: hidden;
-        animation: secondary-indeterminate-scale var(--_full-animation-duration) infinite linear;
-      }
-      :host([mode="determinate"]) .background,
-      :host([mode="indeterminate"]) .background,
-      :host([mode="query"]) .background {
-        fill: transparent !important;
-      }
-      :host([mode="buffer"]) .buffer {
-        transform: scale3d(calc(var(--_buffer-value, 0) / var(--_max)), 1, 1);
-      }
-      :host([mode="buffer"]) .background {
-        display: block;
-        backface-visibility: hidden;
-        animation: background-scroll var(--_piece-animation-duration) infinite linear;
-      }
-      @keyframes primary-indeterminate-translate {
-        0% {
-          transform: translateX(0);
-        }
-        20% {
-          animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819);
-          transform: translateX(0);
-        }
-        59.15% {
-          animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352);
-          transform: translateX(83.67142%);
-        }
-        100% {
-          transform: translateX(200.611057%);
-        }
-      }
-      @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-translate {
-        0% {
-          animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
-          transform: translateX(0);
-        }
-        25% {
-          animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
-          transform: translateX(37.651913%);
-        }
-        48.35% {
-          animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
-          transform: translateX(84.386165%);
-        }
-        100% {
-          transform: translateX(160.277782%);
-        }
-      }
-      @keyframes secondary-indeterminate-scale {
-        0% {
-          animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685);
-          transform: scaleX(0.08);
-        }
-        19.15% {
-          animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712);
-          transform: scaleX(0.457104);
-        }
-        44.15% {
-          animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026);
-          transform: scaleX(0.72796);
-        }
-        100% {
-          transform: scaleX(0.08);
-        }
-      }
-      @keyframes background-scroll {
-        to {
-          transform: translateX(calc(calc(0px - 0.25rem) * 2));
-        }
-      }
-      @media (forced-colors: active) {
-        .background {
-          fill: GrayText;
-        }
-      }
-    `,
-  ];
-
-  /** @private */ private static __nextPatternId = 0;
-  /** @private */ #patternId = `m3e-progress-pattern-${M3eLinearProgressIndicatorElement.__nextPatternId++}`;
-  /** @private */ #patternFill = "";
-
-  /**
-   * The mode of the progress bar.
-   * @default "determinate"
-   */
-  @property({ reflect: true }) mode: LinearProgressMode = "determinate";
-
-  /**
-   * A fractional value, between 0 and `max`, indicating buffer progress.
-   * @default 0
-   */
-  @property({ attribute: "buffer-value", type: Number, reflect: true }) bufferValue = 0;
-
-  /** @inheritdoc */
-  override connectedCallback(): void {
-    super.connectedCallback();
-
-    // Prefix the SVG reference with the current path, otherwise they will not work
-    // in Safari if the page has a <base> tag.
-
-    const location = document?.location ?? null;
-    const path = location ? (location.pathname + location.search).split("#")[0] : "";
-    this.#patternFill = `url(${path}#${this.#patternId})`;
-  }
-
-  /** @inheritdoc */
-  protected override render(): unknown {
-    return html`<div class="progress" aria-hidden="true">
-      <div
-        class="wrapper"
-        style=${safeStyleMap({
-          "--_value": `${this.value}`,
-          "--_buffer-value": `${this.bufferValue}`,
-          "--_max": `${this.max}`,
-        })}
-      >
-        <svg width="100%" height="4" class="background element">
-          <defs>
-            <pattern id="${this.#patternId}" x="4" y="0" width="8" height="4" patternUnits="userSpaceOnUse">
-              <circle cx="2" cy="2" r="2" />
-            </pattern>
-          </defs>
-          <rect fill="${this.#patternFill}" width="100%" height="100%" />
-        </svg>
-        <div class="buffer element"></div>
-        <div class="primary fill element"></div>
-        <div class="secondary fill element"></div>
-      </div>
-    </div>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "m3e-linear-progress-indicator": M3eLinearProgressIndicatorElement;
-  }
-}

package/src/LinearProgressMode.ts

@@ -1,2 +0,0 @@
-/** Specifies the possible behavior modes for a linear progress bar. */
-export type LinearProgressMode = "determinate" | "indeterminate" | "buffer" | "query";