@ni/nimble-components 19.6.3 → 19.7.0

package/dist/esm/spinner/index.d.ts

@@ -1,4 +1,5 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
+import { SpinnerAppearance } from './types';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-spinner': Spinner;
@@ -9,5 +10,11 @@ declare global {
  * 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.
  */
 export declare class Spinner extends FoundationElement {
+    /**
+     * @public
+     * @description
+     * The appearance the spinner area should have.
+     */
+    appearance: SpinnerAppearance;
 }
 export declare const spinnerTag: string;

package/dist/esm/spinner/index.js

@@ -1,12 +1,27 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
 import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
 import { styles } from './styles';
 import { template } from './template';
+import { SpinnerAppearance } from './types';
 /**
  * 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.
  */
 export class Spinner extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * @public
+         * @description
+         * The appearance the spinner area should have.
+         */
+        this.appearance = SpinnerAppearance.default;
+    }
 }
+__decorate([
+    attr
+], Spinner.prototype, "appearance", void 0);
 const nimbleSpinner = Spinner.compose({
     baseName: 'spinner',
     template,

package/dist/esm/spinner/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/spinner/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;;GAGG;AACH,MAAM,OAAO,OAAQ,SAAQ,iBAAiB;CAAG;AAEjD,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC;IAClC,QAAQ,EAAE,SAAS;IACnB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAC;AAC1E,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/spinner/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAQ5C;;;GAGG;AACH,MAAM,OAAO,OAAQ,SAAQ,iBAAiB;IAA9C;;QACI;;;;WAIG;QAEI,eAAU,GAAsB,iBAAiB,CAAC,OAAO,CAAC;IACrE,CAAC;CAAA;AADG;IADC,IAAI;2CAC4D;AAGrE,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC;IAClC,QAAQ,EAAE,SAAS;IACnB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AACH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAC;AAC1E,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC"}

package/dist/esm/spinner/styles.js

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { Black15, Black91, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
+import { Black15, Black91, DigitalGreenLight, PowerGreen, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
 import { spinnerSmallHeight } from '../theme-provider/design-tokens';
 import { Theme } from '../theme-provider/types';
 import { themeBehavior } from '../utilities/style/theme';
@@ -28,6 +28,10 @@ export const styles = css `
         opacity: 0.6;
     }
 
+    :host([appearance='accent']) div.container {
+        opacity: 1;
+    }
+
     div.bit1,
     div.bit2 {
         background: var(--ni-private-spinner-bits-background-color);
@@ -139,14 +143,24 @@ export const styles = css `
     }
 `.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};
+            }
         `));
 //# sourceMappingURL=styles.js.map

package/dist/esm/spinner/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/spinner/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,OAAO,EACP,OAAO,EACP,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;kBAGV,kBAAkB;;;;;;;;UAQ1B;AACE;;;;;;GAMG;AACH,EACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiHP,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8DAEmD,OAAO;SAC5D,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;8DAEmD,OAAO;;SAE5D,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8DAEmD,KAAK;;SAE1D,CACJ,CACJ,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/spinner/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,OAAO,EACP,OAAO,EACP,iBAAiB,EACjB,UAAU,EACV,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;kBAGV,kBAAkB;;;;;;;;UAQ1B;AACE;;;;;;GAMG;AACH,EACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqHP,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8DAEmD,OAAO;;;8DAGP,iBAAiB;;SAEtE,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;8DAEmD,OAAO;;;8DAGP,UAAU;;SAE/D,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8DAEmD,KAAK;;;8DAGL,UAAU;;SAE/D,CACJ,CACJ,CAAC"}

package/dist/esm/spinner/types.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Types of spinner appearance.
+ * @public
+ */
+export declare const SpinnerAppearance: {
+    readonly default: undefined;
+    readonly accent: "accent";
+};
+export declare type SpinnerAppearance = (typeof SpinnerAppearance)[keyof typeof SpinnerAppearance];

package/dist/esm/spinner/types.js

@@ -0,0 +1,9 @@
+/**
+ * Types of spinner appearance.
+ * @public
+ */
+export const SpinnerAppearance = {
+    default: undefined,
+    accent: 'accent'
+};
+//# sourceMappingURL=types.js.map

package/dist/esm/spinner/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/spinner/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC7B,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACV,CAAC"}

package/dist/esm/src/spinner/index.d.ts

@@ -1,4 +1,5 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
+import { SpinnerAppearance } from './types';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-spinner': Spinner;
@@ -9,5 +10,11 @@ declare global {
  * 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.
  */
 export declare class Spinner extends FoundationElement {
+    /**
+     * @public
+     * @description
+     * The appearance the spinner area should have.
+     */
+    appearance: SpinnerAppearance;
 }
 export declare const spinnerTag: string;

package/dist/esm/src/spinner/types.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Types of spinner appearance.
+ * @public
+ */
+export declare const SpinnerAppearance: {
+    readonly default: undefined;
+    readonly accent: "accent";
+};
+export declare type SpinnerAppearance = (typeof SpinnerAppearance)[keyof typeof SpinnerAppearance];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "19.6.3",
+  "version": "19.7.0",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",