@exmg/exm-progress 1.2.7

package/.rollup.cache/root/repo/packages/exm-progress/dist/exm-circular-progress.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+/**
+ * exm-circular-progress
+ * Material 3 circular progress
+ */
+export declare class ExmCircularProgress extends LitElement {
+    private lineRatio;
+    /**
+     * Progress value (0-100)
+     */
+    progress: number;
+    /**
+     * width and height of the progress circle
+     */
+    size: number;
+    radius: number;
+    static styles: import("lit").CSSResult[];
+    attributeChangedCallback(_name: string, _old: string | null, _value: string | null): void;
+    protected render(): import("lit-html").TemplateResult<2>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-circular-progress': ExmCircularProgress;
+    }
+}

package/.rollup.cache/root/repo/packages/exm-progress/dist/exm-circular-progress.js

@@ -0,0 +1,71 @@
+import { __decorate } from "tslib";
+import { LitElement, svg } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { styles } from './styles/exm-circular-progress-css.js';
+/**
+ * exm-circular-progress
+ * Material 3 circular progress
+ */
+let ExmCircularProgress = class ExmCircularProgress extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.lineRatio = 5 / 60;
+        /**
+         * Progress value (0-100)
+         */
+        this.progress = 0;
+        /**
+         * width and height of the progress circle
+         */
+        this.size = 60;
+        this.radius = 51;
+    }
+    attributeChangedCallback(_name, _old, _value) {
+        const lineWidth = this.lineRatio * this.size;
+        const radius = this.size - lineWidth;
+        this.radius = radius;
+        const lineGap = this.progress <= 0 ? 0 : this.progress >= 100 ? 0 : lineWidth * 3.5;
+        const dashLength = Math.PI * 2 * radius - (lineGap * this.progress) / 100;
+        this.style.setProperty('--exm-progress-progress', `${Math.min(Math.max(0, this.progress), 100) / 100}`);
+        this.style.setProperty('--exm-progress-dash-length', `${dashLength}`);
+        this.style.setProperty('--exm-progress-gap', `${this.progress <= 0 ? 0 : this.progress >= 100 ? 0 : lineWidth * 3.5}`);
+    }
+    render() {
+        const lineWidth = this.lineRatio * this.size;
+        const dashLength = Math.PI * 2 * this.radius;
+        const rotationOffset = this.progress <= 0 || this.progress >= 100 ? 0 : 360 / (dashLength / (lineWidth * 1.75));
+        return svg `<svg
+      width="${this.size}px"
+      height="${this.size}px"
+      class="circular-progress"
+      viewBox="-${this.size} -${this.size} ${this.size * 2} ${this.size * 2}"
+      xmlns="http://www.w3.org/2000/svg"
+      role="progressbar"
+    >
+      <circle class="base-circle" cx="0" cy="0" r="${this.radius}" stroke-linecap="round" transform="rotate(${-90 - rotationOffset})" stroke-width="${lineWidth * 2}"/>
+      <circle class="progress-circle" cx="0" cy="0" r="${this.radius}" stroke-linecap="round" transform="rotate(${-90 + rotationOffset})" stroke-width="${lineWidth * 2}"/>
+    </svg>
+    `;
+    }
+};
+ExmCircularProgress.styles = [styles];
+__decorate([
+    property({
+        type: Number,
+        reflect: true,
+    })
+], ExmCircularProgress.prototype, "progress", void 0);
+__decorate([
+    property({
+        type: Number,
+        reflect: true,
+    })
+], ExmCircularProgress.prototype, "size", void 0);
+__decorate([
+    state()
+], ExmCircularProgress.prototype, "radius", void 0);
+ExmCircularProgress = __decorate([
+    customElement('exm-circular-progress')
+], ExmCircularProgress);
+export { ExmCircularProgress };
+//# sourceMappingURL=exm-circular-progress.js.map

package/.rollup.cache/root/repo/packages/exm-progress/dist/exm-circular-progress.stories.d.ts

@@ -0,0 +1,19 @@
+import type { StoryObj } from '@storybook/web-components-vite';
+import { ExmCircularProgress } from './exm-circular-progress.js';
+import './exm-circular-progress.js';
+declare const meta: {
+    title: string;
+    tags: string[];
+    render: (args: ExmCircularProgress) => import("lit-html").TemplateResult<1>;
+    argTypes: {
+        progress: {
+            control: "number";
+        };
+        size: {
+            control: "number";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<ExmCircularProgress>;
+export declare const Default: Story;

package/.rollup.cache/root/repo/packages/exm-progress/dist/exm-circular-progress.stories.js

@@ -0,0 +1,20 @@
+import { html } from 'lit';
+import './exm-circular-progress.js';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+    title: 'Packages/ExmProgress/CircularProgress',
+    tags: ['autodocs'],
+    render: (args) => html `<exm-circular-progress .progress=${args.progress} .size=${args.size}></exm-circular-progress>`,
+    argTypes: {
+        progress: { control: 'number' },
+        size: { control: 'number' },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        progress: 20,
+        size: 60,
+    },
+};
+//# sourceMappingURL=exm-circular-progress.stories.js.map

package/.rollup.cache/root/repo/packages/exm-progress/dist/exm-linear-progress.d.ts

@@ -0,0 +1,29 @@
+import { LitElement } from 'lit';
+/**
+ * exm-linear-progress
+ * Material 3 linear progress
+ */
+export declare class ExmLinearProgress extends LitElement {
+    /**
+     * Progress value (0-100)
+     */
+    progress: number;
+    /**
+     * Wether or not to display the dots/steps.
+     * When engaged, it will show a dot at ± every 10% interval.
+     */
+    steps: boolean;
+    /**
+     * Wether or not to display the value label.
+     * When engaged, it will show the current progress value.
+     */
+    showValue: boolean;
+    static styles: import("lit").CSSResult[];
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-linear-progress': ExmLinearProgress;
+    }
+}

package/.rollup.cache/root/repo/packages/exm-progress/dist/exm-linear-progress.js

@@ -0,0 +1,67 @@
+import { __decorate } from "tslib";
+import { html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './styles/exm-linear-progress-css.js';
+import { classMap } from 'lit/directives/class-map.js';
+/**
+ * exm-linear-progress
+ * Material 3 linear progress
+ */
+let ExmLinearProgress = class ExmLinearProgress extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Progress value (0-100)
+         */
+        this.progress = 0;
+        /**
+         * Wether or not to display the dots/steps.
+         * When engaged, it will show a dot at ± every 10% interval.
+         */
+        this.steps = false;
+        /**
+         * Wether or not to display the value label.
+         * When engaged, it will show the current progress value.
+         */
+        this.showValue = false;
+    }
+    attributeChangedCallback(name, _old, value) {
+        super.attributeChangedCallback(name, _old, value);
+        if (name === 'progress') {
+            this.style.setProperty('--exm-progress-progress', `${Math.min(Math.max(0, this.progress), 100)}%`);
+        }
+    }
+    render() {
+        const trackClass = classMap({
+            track: true,
+            steps: this.steps,
+        });
+        return html `
+      ${this.showValue
+            ? html `<section class="label">${`${Math.min(Math.max(0, this.progress), 100)}%`}</section>`
+            : nothing}
+      <div class="container" aria-hidden="true" tabindex="0">
+        <div class=${trackClass}></div>
+        <div class="progress"></div>
+      </div>
+    `;
+    }
+};
+ExmLinearProgress.styles = [styles];
+__decorate([
+    property({
+        type: Number,
+        reflect: true,
+    })
+], ExmLinearProgress.prototype, "progress", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmLinearProgress.prototype, "steps", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmLinearProgress.prototype, "showValue", void 0);
+ExmLinearProgress = __decorate([
+    customElement('exm-linear-progress')
+], ExmLinearProgress);
+export { ExmLinearProgress };
+//# sourceMappingURL=exm-linear-progress.js.map

package/.rollup.cache/root/repo/packages/exm-progress/dist/exm-linear-progress.stories.d.ts

@@ -0,0 +1,24 @@
+import type { StoryObj } from '@storybook/web-components-vite';
+import { ExmLinearProgress } from './exm-linear-progress.js';
+import './exm-linear-progress.js';
+declare const meta: {
+    title: string;
+    tags: string[];
+    render: (args: ExmLinearProgress) => import("lit-html").TemplateResult<1>;
+    argTypes: {
+        progress: {
+            control: "number";
+        };
+        steps: {
+            control: "boolean";
+        };
+        showValue: {
+            control: "boolean";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<ExmLinearProgress>;
+export declare const Default: Story;
+export declare const Steps: Story;
+export declare const ProgressLabel: Story;

package/.rollup.cache/root/repo/packages/exm-progress/dist/exm-linear-progress.stories.js

@@ -0,0 +1,40 @@
+import { html } from 'lit';
+import './exm-linear-progress.js';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+    title: 'Packages/ExmProgress/LinearProgress',
+    tags: ['autodocs'],
+    render: (args) => html `<exm-linear-progress
+      .progress=${args.progress}
+      .steps=${args.steps}
+      .showValue=${args.showValue}
+    ></exm-linear-progress>`,
+    argTypes: {
+        progress: { control: 'number' },
+        steps: { control: 'boolean' },
+        showValue: { control: 'boolean' },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        progress: 20,
+        steps: false,
+        showValue: false,
+    },
+};
+export const Steps = {
+    args: {
+        progress: 20,
+        steps: true,
+        showValue: false,
+    },
+};
+export const ProgressLabel = {
+    args: {
+        progress: 20,
+        steps: false,
+        showValue: true,
+    },
+};
+//# sourceMappingURL=exm-linear-progress.stories.js.map

package/.rollup.cache/root/repo/packages/exm-progress/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { ExmLinearProgress } from './exm-linear-progress.js';
+export { ExmCircularProgress } from './exm-circular-progress.js';

package/.rollup.cache/root/repo/packages/exm-progress/dist/index.js

@@ -0,0 +1,3 @@
+export { ExmLinearProgress } from './exm-linear-progress.js';
+export { ExmCircularProgress } from './exm-circular-progress.js';
+//# sourceMappingURL=index.js.map

package/.rollup.cache/root/repo/packages/exm-progress/dist/styles/exm-circular-progress-css.d.ts

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

package/.rollup.cache/root/repo/packages/exm-progress/dist/styles/exm-circular-progress-css.js

@@ -0,0 +1,35 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    --_exm-circular-progress-track-color: var(
+      --exm-circular-progress-track-color,
+      var(--md-sys-color-surface-container-highest, #e0e0e0)
+    );
+    --_exm-circular-progress-progress-color: var(
+      --exm-circular-progress-progress-color,
+      var(--md-sys-color-primary, #6200ee)
+    );
+
+    display: inline-block;
+  }
+
+  circle {
+    transition: stroke-dashoffset 0.35s ease;
+    fill: none;
+  }
+
+  .base-circle {
+    stroke-dashoffset: calc(
+      var(--exm-progress-progress) * var(--exm-progress-dash-length, 283) * -1 - var(--exm-progress-gap) * 2
+    );
+    stroke-dasharray: var(--exm-progress-dash-length, 283) calc(var(--exm-progress-dash-length, 283) * 2);
+    stroke: var(--_exm-circular-progress-track-color);
+  }
+
+  .progress-circle {
+    stroke-dashoffset: calc((1 - var(--exm-progress-progress)) * var(--exm-progress-dash-length, 283));
+    stroke-dasharray: var(--exm-progress-dash-length, 283) var(--exm-progress-dash-length, 283);
+    stroke: var(--_exm-circular-progress-progress-color);
+  }
+`;
+//# sourceMappingURL=exm-circular-progress-css.js.map

package/.rollup.cache/root/repo/packages/exm-progress/dist/styles/exm-linear-progress-css.d.ts

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

package/.rollup.cache/root/repo/packages/exm-progress/dist/styles/exm-linear-progress-css.js

@@ -0,0 +1,84 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    --_exm-linear-progress-track-height: var(--exm-linear-progress-track-height, 12px);
+    --_exm-linear-progress-border-radius: var(--exm-linear-progress-border-radius, 99px);
+    --_exm-linear-progress-track-color: var(
+      --exm-linear-progress-track-color,
+      var(--md-sys-color-surface-container-highest, #e0e0e0)
+    );
+    --_exm-linear-progress-progress-color: var(
+      --exm-linear-progress-progress-color,
+      var(--md-sys-color-primary, #6200ee)
+    );
+
+    display: block;
+  }
+
+  .container {
+    background-color: transparent;
+    height: var(--_exm-linear-progress-track-height);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .track {
+    background-color: var(--_exm-linear-progress-track-color);
+    background-image: radial-gradient(
+      circle,
+      var(--_exm-linear-progress-progress-color) calc(var(--_exm-linear-progress-track-height) / 2),
+      transparent calc(var(--_exm-linear-progress-track-height) / 2)
+    );
+    background-size: var(--_exm-linear-progress-track-height) var(--_exm-linear-progress-track-height);
+    background-repeat: no-repeat;
+    background-position: right center;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: calc(100% - var(--_exm-linear-progress-track-height) / 2);
+    height: 100%;
+    border-radius: var(--_exm-linear-progress-border-radius);
+    clip-path: xywh(
+      var(--exm-progress-progress, 0) 0 100% var(--_exm-linear-progress-track-height) round
+        calc(var(--_exm-linear-progress-track-height) / 2) 0% 0px calc(var(--_exm-linear-progress-track-height) / 2)
+    );
+
+    &.steps {
+      background-image: radial-gradient(
+        circle at calc(100% - 6px) center,
+        var(--_exm-linear-progress-progress-color) calc(var(--_exm-linear-progress-track-height) / 2),
+        transparent calc(var(--_exm-linear-progress-track-height) / 2)
+      );
+      background-size: 10% var(--_exm-linear-progress-track-height);
+      background-position: center-6px center;
+      background-repeat: repeat-x;
+    }
+  }
+
+  .progress {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: var(--_exm-linear-progress-progress-color);
+    width: calc(var(--exm-progress-progress, 0) - var(--_exm-linear-progress-track-height) / 2);
+    height: 100%;
+    border-radius: var(--_exm-linear-progress-border-radius);
+  }
+
+  .label {
+    background-color: var(--md-sys-color-inverse-surface, #333333);
+    display: inline-block;
+    color: var(--md-sys-color-inverse-on-surface, #ffffff);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    padding: 0.75rem;
+    min-width: 2rem;
+    text-align: center;
+    border-radius: 9999px;
+    margin-bottom: 0.5rem;
+    left: var(--exm-progress-progress, 0);
+    position: relative;
+    transform: translateX(-50%);
+  }
+`;
+//# sourceMappingURL=exm-linear-progress-css.js.map

package/README.md

@@ -0,0 +1,3 @@
+# @exmg/exm-progress
+
+This package provides progress bar functionality.

package/dist/exm-circular-progress.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+/**
+ * exm-circular-progress
+ * Material 3 circular progress
+ */
+export declare class ExmCircularProgress extends LitElement {
+    private lineRatio;
+    /**
+     * Progress value (0-100)
+     */
+    progress: number;
+    /**
+     * width and height of the progress circle
+     */
+    size: number;
+    radius: number;
+    static styles: import("lit").CSSResult[];
+    attributeChangedCallback(_name: string, _old: string | null, _value: string | null): void;
+    protected render(): import("lit-html").TemplateResult<2>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-circular-progress': ExmCircularProgress;
+    }
+}

package/dist/exm-circular-progress.js

@@ -0,0 +1,73 @@
+import { __decorate } from 'tslib';
+import { LitElement, svg } from 'lit';
+import { property, state, customElement } from 'lit/decorators.js';
+import { styles } from './styles/exm-circular-progress-css.js';
+
+/**
+ * exm-circular-progress
+ * Material 3 circular progress
+ */
+let ExmCircularProgress = class ExmCircularProgress extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.lineRatio = 5 / 60;
+        /**
+         * Progress value (0-100)
+         */
+        this.progress = 0;
+        /**
+         * width and height of the progress circle
+         */
+        this.size = 60;
+        this.radius = 51;
+    }
+    attributeChangedCallback(_name, _old, _value) {
+        const lineWidth = this.lineRatio * this.size;
+        const radius = this.size - lineWidth;
+        this.radius = radius;
+        const lineGap = this.progress <= 0 ? 0 : this.progress >= 100 ? 0 : lineWidth * 3.5;
+        const dashLength = Math.PI * 2 * radius - (lineGap * this.progress) / 100;
+        this.style.setProperty('--exm-progress-progress', `${Math.min(Math.max(0, this.progress), 100) / 100}`);
+        this.style.setProperty('--exm-progress-dash-length', `${dashLength}`);
+        this.style.setProperty('--exm-progress-gap', `${this.progress <= 0 ? 0 : this.progress >= 100 ? 0 : lineWidth * 3.5}`);
+    }
+    render() {
+        const lineWidth = this.lineRatio * this.size;
+        const dashLength = Math.PI * 2 * this.radius;
+        const rotationOffset = this.progress <= 0 || this.progress >= 100 ? 0 : 360 / (dashLength / (lineWidth * 1.75));
+        return svg `<svg
+      width="${this.size}px"
+      height="${this.size}px"
+      class="circular-progress"
+      viewBox="-${this.size} -${this.size} ${this.size * 2} ${this.size * 2}"
+      xmlns="http://www.w3.org/2000/svg"
+      role="progressbar"
+    >
+      <circle class="base-circle" cx="0" cy="0" r="${this.radius}" stroke-linecap="round" transform="rotate(${ -90 - rotationOffset})" stroke-width="${lineWidth * 2}"/>
+      <circle class="progress-circle" cx="0" cy="0" r="${this.radius}" stroke-linecap="round" transform="rotate(${ -90 + rotationOffset})" stroke-width="${lineWidth * 2}"/>
+    </svg>
+    `;
+    }
+};
+ExmCircularProgress.styles = [styles];
+__decorate([
+    property({
+        type: Number,
+        reflect: true,
+    })
+], ExmCircularProgress.prototype, "progress", void 0);
+__decorate([
+    property({
+        type: Number,
+        reflect: true,
+    })
+], ExmCircularProgress.prototype, "size", void 0);
+__decorate([
+    state()
+], ExmCircularProgress.prototype, "radius", void 0);
+ExmCircularProgress = __decorate([
+    customElement('exm-circular-progress')
+], ExmCircularProgress);
+
+export { ExmCircularProgress };
+//# sourceMappingURL=exm-circular-progress.js.map

package/dist/exm-circular-progress.stories.d.ts

@@ -0,0 +1,19 @@
+import type { StoryObj } from '@storybook/web-components-vite';
+import { ExmCircularProgress } from './exm-circular-progress.js';
+import './exm-circular-progress.js';
+declare const meta: {
+    title: string;
+    tags: string[];
+    render: (args: ExmCircularProgress) => import("lit-html").TemplateResult<1>;
+    argTypes: {
+        progress: {
+            control: "number";
+        };
+        size: {
+            control: "number";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<ExmCircularProgress>;
+export declare const Default: Story;

package/dist/exm-linear-progress.d.ts

@@ -0,0 +1,29 @@
+import { LitElement } from 'lit';
+/**
+ * exm-linear-progress
+ * Material 3 linear progress
+ */
+export declare class ExmLinearProgress extends LitElement {
+    /**
+     * Progress value (0-100)
+     */
+    progress: number;
+    /**
+     * Wether or not to display the dots/steps.
+     * When engaged, it will show a dot at ± every 10% interval.
+     */
+    steps: boolean;
+    /**
+     * Wether or not to display the value label.
+     * When engaged, it will show the current progress value.
+     */
+    showValue: boolean;
+    static styles: import("lit").CSSResult[];
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-linear-progress': ExmLinearProgress;
+    }
+}

package/dist/exm-linear-progress.js

@@ -0,0 +1,69 @@
+import { __decorate } from 'tslib';
+import { LitElement, nothing, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { styles } from './styles/exm-linear-progress-css.js';
+import { classMap } from 'lit/directives/class-map.js';
+
+/**
+ * exm-linear-progress
+ * Material 3 linear progress
+ */
+let ExmLinearProgress = class ExmLinearProgress extends LitElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Progress value (0-100)
+         */
+        this.progress = 0;
+        /**
+         * Wether or not to display the dots/steps.
+         * When engaged, it will show a dot at ± every 10% interval.
+         */
+        this.steps = false;
+        /**
+         * Wether or not to display the value label.
+         * When engaged, it will show the current progress value.
+         */
+        this.showValue = false;
+    }
+    attributeChangedCallback(name, _old, value) {
+        super.attributeChangedCallback(name, _old, value);
+        if (name === 'progress') {
+            this.style.setProperty('--exm-progress-progress', `${Math.min(Math.max(0, this.progress), 100)}%`);
+        }
+    }
+    render() {
+        const trackClass = classMap({
+            track: true,
+            steps: this.steps,
+        });
+        return html `
+      ${this.showValue
+            ? html `<section class="label">${`${Math.min(Math.max(0, this.progress), 100)}%`}</section>`
+            : nothing}
+      <div class="container" aria-hidden="true" tabindex="0">
+        <div class=${trackClass}></div>
+        <div class="progress"></div>
+      </div>
+    `;
+    }
+};
+ExmLinearProgress.styles = [styles];
+__decorate([
+    property({
+        type: Number,
+        reflect: true,
+    })
+], ExmLinearProgress.prototype, "progress", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmLinearProgress.prototype, "steps", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExmLinearProgress.prototype, "showValue", void 0);
+ExmLinearProgress = __decorate([
+    customElement('exm-linear-progress')
+], ExmLinearProgress);
+
+export { ExmLinearProgress };
+//# sourceMappingURL=exm-linear-progress.js.map

package/dist/exm-linear-progress.stories.d.ts

@@ -0,0 +1,24 @@
+import type { StoryObj } from '@storybook/web-components-vite';
+import { ExmLinearProgress } from './exm-linear-progress.js';
+import './exm-linear-progress.js';
+declare const meta: {
+    title: string;
+    tags: string[];
+    render: (args: ExmLinearProgress) => import("lit-html").TemplateResult<1>;
+    argTypes: {
+        progress: {
+            control: "number";
+        };
+        steps: {
+            control: "boolean";
+        };
+        showValue: {
+            control: "boolean";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<ExmLinearProgress>;
+export declare const Default: Story;
+export declare const Steps: Story;
+export declare const ProgressLabel: Story;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { ExmLinearProgress } from './exm-linear-progress.js';
+export { ExmCircularProgress } from './exm-circular-progress.js';

package/dist/index.js

@@ -0,0 +1,3 @@
+export { ExmLinearProgress } from './exm-linear-progress.js';
+export { ExmCircularProgress } from './exm-circular-progress.js';
+//# sourceMappingURL=index.js.map

package/dist/styles/exm-circular-progress-css.d.ts

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

package/dist/styles/exm-circular-progress-css.js

@@ -0,0 +1,38 @@
+import { css } from 'lit';
+
+const styles = css `
+  :host {
+    --_exm-circular-progress-track-color: var(
+      --exm-circular-progress-track-color,
+      var(--md-sys-color-surface-container-highest, #e0e0e0)
+    );
+    --_exm-circular-progress-progress-color: var(
+      --exm-circular-progress-progress-color,
+      var(--md-sys-color-primary, #6200ee)
+    );
+
+    display: inline-block;
+  }
+
+  circle {
+    transition: stroke-dashoffset 0.35s ease;
+    fill: none;
+  }
+
+  .base-circle {
+    stroke-dashoffset: calc(
+      var(--exm-progress-progress) * var(--exm-progress-dash-length, 283) * -1 - var(--exm-progress-gap) * 2
+    );
+    stroke-dasharray: var(--exm-progress-dash-length, 283) calc(var(--exm-progress-dash-length, 283) * 2);
+    stroke: var(--_exm-circular-progress-track-color);
+  }
+
+  .progress-circle {
+    stroke-dashoffset: calc((1 - var(--exm-progress-progress)) * var(--exm-progress-dash-length, 283));
+    stroke-dasharray: var(--exm-progress-dash-length, 283) var(--exm-progress-dash-length, 283);
+    stroke: var(--_exm-circular-progress-progress-color);
+  }
+`;
+
+export { styles };
+//# sourceMappingURL=exm-circular-progress-css.js.map

package/dist/styles/exm-linear-progress-css.d.ts

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

package/dist/styles/exm-linear-progress-css.js

@@ -0,0 +1,87 @@
+import { css } from 'lit';
+
+const styles = css `
+  :host {
+    --_exm-linear-progress-track-height: var(--exm-linear-progress-track-height, 12px);
+    --_exm-linear-progress-border-radius: var(--exm-linear-progress-border-radius, 99px);
+    --_exm-linear-progress-track-color: var(
+      --exm-linear-progress-track-color,
+      var(--md-sys-color-surface-container-highest, #e0e0e0)
+    );
+    --_exm-linear-progress-progress-color: var(
+      --exm-linear-progress-progress-color,
+      var(--md-sys-color-primary, #6200ee)
+    );
+
+    display: block;
+  }
+
+  .container {
+    background-color: transparent;
+    height: var(--_exm-linear-progress-track-height);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .track {
+    background-color: var(--_exm-linear-progress-track-color);
+    background-image: radial-gradient(
+      circle,
+      var(--_exm-linear-progress-progress-color) calc(var(--_exm-linear-progress-track-height) / 2),
+      transparent calc(var(--_exm-linear-progress-track-height) / 2)
+    );
+    background-size: var(--_exm-linear-progress-track-height) var(--_exm-linear-progress-track-height);
+    background-repeat: no-repeat;
+    background-position: right center;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: calc(100% - var(--_exm-linear-progress-track-height) / 2);
+    height: 100%;
+    border-radius: var(--_exm-linear-progress-border-radius);
+    clip-path: xywh(
+      var(--exm-progress-progress, 0) 0 100% var(--_exm-linear-progress-track-height) round
+        calc(var(--_exm-linear-progress-track-height) / 2) 0% 0px calc(var(--_exm-linear-progress-track-height) / 2)
+    );
+
+    &.steps {
+      background-image: radial-gradient(
+        circle at calc(100% - 6px) center,
+        var(--_exm-linear-progress-progress-color) calc(var(--_exm-linear-progress-track-height) / 2),
+        transparent calc(var(--_exm-linear-progress-track-height) / 2)
+      );
+      background-size: 10% var(--_exm-linear-progress-track-height);
+      background-position: center-6px center;
+      background-repeat: repeat-x;
+    }
+  }
+
+  .progress {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: var(--_exm-linear-progress-progress-color);
+    width: calc(var(--exm-progress-progress, 0) - var(--_exm-linear-progress-track-height) / 2);
+    height: 100%;
+    border-radius: var(--_exm-linear-progress-border-radius);
+  }
+
+  .label {
+    background-color: var(--md-sys-color-inverse-surface, #333333);
+    display: inline-block;
+    color: var(--md-sys-color-inverse-on-surface, #ffffff);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    padding: 0.75rem;
+    min-width: 2rem;
+    text-align: center;
+    border-radius: 9999px;
+    margin-bottom: 0.5rem;
+    left: var(--exm-progress-progress, 0);
+    position: relative;
+    transform: translateX(-50%);
+  }
+`;
+
+export { styles };
+//# sourceMappingURL=exm-linear-progress-css.js.map

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@exmg/exm-progress",
+  "version": "1.2.7",
+  "description": "Material style progress bar",
+  "contributors": [
+    "Ex Machina"
+  ],
+  "keywords": [
+    "web-components",
+    "lit",
+    "material",
+    "progress"
+  ],
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "module": "dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./exm-linear-progress.js": "./dist/exm-linear-progress.js",
+    "./exm-circular-progress.js": "./dist/exm-circular-progress.js"
+  },
+  "files": [
+    "**/*.scss",
+    "**/*.js",
+    "**/*.d.ts"
+  ],
+  "homepage": "https://bitbucket.org/exmachina/exm-web-components",
+  "repository": {
+    "type": "git",
+    "url": "git@bitbucket.org:exmachina/exm-web-components.git",
+    "directory": "packages/exm-progress"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "@material/web": "^2.2.0",
+    "lit": "3.2.1",
+    "tslib": "^2.6.2"
+  },
+  "scripts": {
+    "tsc": "tsc"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "20c45a5fb2f606723218a739897831c27a6f6790"
+}