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

package/README.md

@@ -27,7 +27,7 @@ Alternately, you can explicitly reference the `html-custom-data.json` and `css-c
 }
 ```
 
-## 🚀 Browser Usage
+## 🚀 Native Module Support
 
 This package uses [JavaScript Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#module_specifiers). To use it directly in a browser without a bundler, use a module script similar to the following.
 

package/dist/custom-elements.json

@@ -1415,25 +1415,6 @@
           "kind": "mixin",
           "description": "Mixin that adds support for custom event attributes.",
           "name": "EventAttribute",
-          "members": [
-            {
-              "kind": "method",
-              "name": "dispatchEvent",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "Event"
-                  }
-                }
-              ]
-            }
-          ],
           "parameters": [
             {
               "name": "base",
@@ -1731,6 +1712,17 @@
           "description": "Mixin to augment an element with behavior used to submit a form.",
           "name": "FormSubmitter",
           "members": [
+            {
+              "kind": "field",
+              "name": "formAssociated",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "readonly": true,
+              "default": "true",
+              "description": "Indicates that this custom element participates in form submission, validation, and form state restoration."
+            },
             {
               "kind": "field",
               "name": "name",
@@ -2267,6 +2259,11 @@
       "kind": "javascript-module",
       "path": "../core/src/shared/mixins/Labelled.ts",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "updateLabels",
+          "description": "A symbol through which to update labels to reflect a control's current state."
+        },
         {
           "kind": "function",
           "name": "isLabelledMixin",
@@ -2316,16 +2313,6 @@
               },
               "description": "The label elements that the element is associated with.",
               "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "[_updateLabels]",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
             }
           ],
           "parameters": [
@@ -2340,6 +2327,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "updateLabels",
+          "declaration": {
+            "name": "updateLabels",
+            "module": "../core/src/shared/mixins/Labelled.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "isLabelledMixin",

package/dist/src/CircularProgressIndicatorElement.d.ts

@@ -0,0 +1,74 @@
+/**
+ * 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 { CSSResultGroup } from "lit";
+import { ProgressElementIndicatorBase } from "./ProgressElementIndicatorBase";
+/**
+ * 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).
+ */
+export declare class M3eCircularProgressIndicatorElement extends ProgressElementIndicatorBase {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /**
+     * Whether to show something is happening without conveying progress.
+     * @default false
+     */
+    indeterminate: boolean;
+    /**
+     * The diameter, in pixels, of the progress spinner.
+     * @default 40
+     */
+    get diameter(): number;
+    set diameter(value: number);
+    /**
+     * The stroke width, in pixels, of the progress spinner.
+     * @default 10
+     */
+    get strokeWidth(): number;
+    set strokeWidth(value: number);
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-circular-progress-indicator": M3eCircularProgressIndicatorElement;
+    }
+}
+//# sourceMappingURL=CircularProgressIndicatorElement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgressIndicatorElement.d.ts","sourceRoot":"","sources":["../../src/CircularProgressIndicatorElement.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAO,cAAc,EAAQ,MAAM,KAAK,CAAC;AAGhD,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAM9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,qBACa,mCAAoC,SAAQ,4BAA4B;;IACnF,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CA2JpC;IAKF;;;OAGG;IACyC,aAAa,UAAS;IAElE;;;OAGG;IACH,IAAgC,QAAQ,IAAI,MAAM,CAEjD;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,MAAM,EAGzB;IAED;;;OAGG;IACH,IAA2D,WAAW,IAAI,MAAM,CAE/E;IACD,IAAI,WAAW,CAAC,KAAK,EAAE,MAAM,EAG5B;IAED,kBAAkB;cACC,MAAM,IAAI,OAAO;CAkBrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iCAAiC,EAAE,mCAAmC,CAAC;KACxE;CACF"}

package/dist/src/LinearProgressIndicatorElement.d.ts

@@ -0,0 +1,70 @@
+/**
+ * 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 { CSSResultGroup } from "lit";
+import { LinearProgressMode } from "./LinearProgressMode";
+import { ProgressElementIndicatorBase } from "./ProgressElementIndicatorBase";
+/**
+ * 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).
+ */
+export declare class M3eLinearProgressIndicatorElement extends ProgressElementIndicatorBase {
+    #private;
+    /** The styles of the element. */
+    static styles: CSSResultGroup;
+    /** @private */ private static __nextPatternId;
+    /**
+     * The mode of the progress bar.
+     * @default "determinate"
+     */
+    mode: LinearProgressMode;
+    /**
+     * A fractional value, between 0 and `max`, indicating buffer progress.
+     * @default 0
+     */
+    bufferValue: number;
+    /** @inheritdoc */
+    connectedCallback(): void;
+    /** @inheritdoc */
+    protected render(): unknown;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "m3e-linear-progress-indicator": M3eLinearProgressIndicatorElement;
+    }
+}
+//# sourceMappingURL=LinearProgressIndicatorElement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LinearProgressIndicatorElement.d.ts","sourceRoot":"","sources":["../../src/LinearProgressIndicatorElement.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAO,cAAc,EAAQ,MAAM,KAAK,CAAC;AAKhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,4BAA4B,EAAE,MAAM,gCAAgC,CAAC;AAE9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,qBACa,iCAAkC,SAAQ,4BAA4B;;IACjF,iCAAiC;IACjC,OAAgB,MAAM,EAAE,cAAc,CAkLpC;IAEF,eAAe,CAAC,OAAO,CAAC,MAAM,CAAC,eAAe,CAAK;IAInD;;;OAGG;IAC0B,IAAI,EAAE,kBAAkB,CAAiB;IAEtE;;;OAGG;IACmE,WAAW,SAAK;IAEtF,kBAAkB;IACT,iBAAiB,IAAI,IAAI;IAWlC,kBAAkB;cACC,MAAM,IAAI,OAAO;CAwBrC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,+BAA+B,EAAE,iCAAiC,CAAC;KACpE;CACF"}

package/dist/src/LinearProgressMode.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"LinearProgressMode.d.ts","sourceRoot":"","sources":["../../src/LinearProgressMode.ts"],"names":[],"mappings":"AAAA,uEAAuE;AACvE,MAAM,MAAM,kBAAkB,GAAG,aAAa,GAAG,eAAe,GAAG,QAAQ,GAAG,OAAO,CAAC"}

package/dist/src/ProgressElementIndicatorBase.d.ts

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1 @@
+{"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

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

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

@@ -0,0 +1 @@
+{"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m3e/progress-indicator",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.4",
   "description": "Progress Indicator for M3E",
   "author": "matraic <matraic@yahoo.com>",
   "license": "MIT",
@@ -30,7 +30,7 @@
     "clean": "rimraf dist"
   },
   "peerDependencies": {
-    "@m3e/core": "1.0.0-rc.2",
+    "@m3e/core": "1.0.0-rc.4",
     "lit": "^3.3.0"
   },
   "devDependencies": {