@ni/nimble-components 19.6.2 → 19.7.0

package/dist/all-components-bundle.js

@@ -16232,7 +16232,7 @@
 
     /**
      * Do not edit directly
-     * Generated on Mon, 17 Jul 2023 14:50:36 GMT
+     * Generated on Mon, 17 Jul 2023 16:59:02 GMT
      */
     const Information100DarkUi = "#a46eff";
     const Information100LightUi = "#804ad9";
@@ -17553,7 +17553,7 @@
         height: ${iconSize};
     }
 
-    :host(.indent-1) .start {
+    :host(.indent-1) [part='start'] {
         grid-column: 1;
     }
 
@@ -17890,6 +17890,10 @@
         grid-template-rows: auto 1fr;
     }
 
+    [part='start'] {
+        display: none;
+    }
+
     .tablist {
         display: grid;
         grid-template-rows: auto auto;
@@ -18193,7 +18197,7 @@
 
     ${
 /* this rule keeps children without an icon text aligned with parents */ ''}
-    span[part="start"] {
+    [part="start"] {
         width: ${iconSize};
     }
 
@@ -18210,11 +18214,8 @@
         height: ${iconSize};
     }
 
-    ${ /* the end class is applied when the corresponding slot is filled */''}
-    .end {
-        display: flex;
-        fill: currentcolor;
-        margin-inline-start: ${iconSize};
+    [part='end'] {
+        display: none;
     }
 `;
 
@@ -19694,14 +19695,12 @@
         text-decoration: underline;
     }
 
-    .start,
-    .end {
-        display: flex;
-        align-items: center;
+    [part='start'] {
+        display: none;
     }
 
-    .start {
-        margin-inline-end: 4px;
+    [part='end'] {
+        display: none;
     }
 
     slot[name='separator'] {
@@ -19833,11 +19832,11 @@
         display: contents;
     }
 
-    slot[name='start'] {
+    [part='start'] {
         display: none;
     }
 
-    slot[name='end'] {
+    [part='end'] {
         display: none;
     }
 `.withBehaviors(themeBehavior(Theme.light, css `
@@ -20294,6 +20293,10 @@
         width: 0px;
     }
 
+    [part='start'] {
+        display: none;
+    }
+
     .control {
         align-items: center;
         box-sizing: border-box;
@@ -20399,7 +20402,7 @@
         fill: ${bodyDisabledFontColor};
     }
 
-    .end {
+    [part='end'] {
         margin-inline-start: auto;
     }
 
@@ -23441,6 +23444,10 @@
         height: ${controlHeight};
     }
 
+    [part='start'] {
+        display: none;
+    }
+
     .content {
         padding: 8px 4px;
     }
@@ -23485,6 +23492,10 @@
         box-shadow: none;
         outline: none;
     }
+
+    [part='end'] {
+        display: none;
+    }
 `;
 
     /**
@@ -23931,7 +23942,7 @@
         width: ${iconSize};
         height: ${iconSize};
     }
-    :host(.indent-1) .start {
+    :host(.indent-1) [part='start'] {
         grid-column: 1;
     }
     :host(.indent-1) .content {
@@ -24076,7 +24087,7 @@
     }
 
     [part='start'] {
-        display: contents;
+        display: none;
     }
 
     .control {
@@ -24467,7 +24478,7 @@
         order: 2;
     }
 
-    .end {
+    [part='end'] {
         display: contents;
     }
 `.withBehaviors(appearanceBehavior(DropdownAppearance.block, css `
@@ -24654,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);
@@ -24765,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 `
@@ -24785,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,
@@ -32250,6 +32296,10 @@
         grid-template-rows: auto 1fr;
     }
 
+    [part='start'] {
+        display: none;
+    }
+
     .tablist {
         display: grid;
         grid-template-rows: auto auto;
@@ -33340,7 +33390,7 @@
 
     ${
 /* this rule keeps children without an icon text aligned with parents */ ''}
-    span[part="start"] {
+    [part="start"] {
         width: ${iconSize};
     }
 
@@ -33365,11 +33415,8 @@
         );
     }
 
-    ${ /* the end class is applied when the corresponding slots is filled */''}
-    .end {
-        display: flex;
-        fill: currentcolor;
-        margin-inline-start: ${iconSize};
+    [part='end'] {
+        display: none;
     }
 
     .items {