@ni/nimble-components 19.6.3 → 19.7.0

package/dist/all-components-bundle.js

@@ -16232,7 +16232,7 @@
 
     /**
      * Do not edit directly
-     * Generated on Mon, 17 Jul 2023 16:01:38 GMT
+     * Generated on Mon, 17 Jul 2023 16:59:02 GMT
      */
     const Information100DarkUi = "#a46eff";
     const Information100LightUi = "#804ad9";
@@ -24665,6 +24665,10 @@
         opacity: 0.6;
     }
 
+    :host([appearance='accent']) div.container {
+        opacity: 1;
+    }
+
     div.bit1,
     div.bit2 {
         background: var(--ni-private-spinner-bits-background-color);
@@ -24776,15 +24780,25 @@
     }
 `.withBehaviors(themeBehavior(Theme.light, css `
             :host {
-                --ni-private-spinner-bits-background-color: ${Black91}
+                --ni-private-spinner-bits-background-color: ${Black91};
+            }
+            :host([appearance='accent']) {
+                --ni-private-spinner-bits-background-color: ${DigitalGreenLight};
+            }
         `), themeBehavior(Theme.dark, css `
             :host {
                 --ni-private-spinner-bits-background-color: ${Black15};
             }
+            :host([appearance='accent']) {
+                --ni-private-spinner-bits-background-color: ${PowerGreen};
+            }
         `), themeBehavior(Theme.color, css `
             :host {
                 --ni-private-spinner-bits-background-color: ${White};
             }
+            :host([appearance='accent']) {
+                --ni-private-spinner-bits-background-color: ${PowerGreen};
+            }
         `));
 
     const template$f = html `
@@ -24796,12 +24810,33 @@
     </template>
 `;
 
+    /**
+     * Types of spinner appearance.
+     * @public
+     */
+    const SpinnerAppearance = {
+        default: undefined,
+        accent: 'accent'
+    };
+
     /**
      * A Nimble-styled spinner component.
      * A spinner is an animating indicator that can be placed in a particular region of a page to represent loading progress, or an ongoing operation, of an indeterminate / unknown duration.
      */
     class Spinner extends FoundationElement {
+        constructor() {
+            super(...arguments);
+            /**
+             * @public
+             * @description
+             * The appearance the spinner area should have.
+             */
+            this.appearance = SpinnerAppearance.default;
+        }
     }
+    __decorate$1([
+        attr
+    ], Spinner.prototype, "appearance", void 0);
     const nimbleSpinner = Spinner.compose({
         baseName: 'spinner',
         template: template$f,