@ni/nimble-components 15.5.1 → 15.5.3

package/dist/all-components-bundle.js

@@ -15298,7 +15298,7 @@
      */
     const focusVisible$1 = canUseFocusVisible() ? "focus-visible" : "focus";
 
-    const styles$y = css `
+    const styles$z = css `
     :host {
         contain: layout;
         display: block;
@@ -15322,7 +15322,7 @@
         baseName: 'anchored-region',
         baseClass: AnchoredRegion$1,
         template: anchoredRegionTemplate,
-        styles: styles$y
+        styles: styles$z
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -15688,9 +15688,9 @@
     const prefix = 'ni-nimble';
     const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
 
-    const template$9 = html `<slot></slot>`;
+    const template$a = html `<slot></slot>`;
 
-    const styles$x = css `
+    const styles$y = css `
     :host {
         display: contents;
     }
@@ -15746,8 +15746,8 @@
     ], ThemeProvider.prototype, "theme", void 0);
     const nimbleDesignSystemProvider = ThemeProvider.compose({
         baseName: 'theme-provider',
-        styles: styles$x,
-        template: template$9
+        styles: styles$y,
+        template: template$a
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -15971,7 +15971,7 @@
      */
     const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-    const styles$w = css `
+    const styles$x = css `
     ${display('inline-block')}
 
     :host {
@@ -16034,7 +16034,7 @@
         baseName: 'breadcrumb',
         baseClass: Breadcrumb$1,
         template: breadcrumbTemplate,
-        styles: styles$w
+        styles: styles$x
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
 
@@ -16652,7 +16652,7 @@
      */
     const focusVisible = `:${focusVisible$1}`;
 
-    const styles$v = css `
+    const styles$w = css `
     ${display('inline-flex')}
 
     :host {
@@ -16732,7 +16732,7 @@
         baseName: 'breadcrumb-item',
         baseClass: BreadcrumbItem$1,
         template: breadcrumbItemTemplate,
-        styles: styles$v,
+        styles: styles$w,
         separator: forwardSlash16X16.data
     });
     DesignSystem.getOrCreate()
@@ -16817,7 +16817,7 @@
         block: 'block'
     };
 
-    const styles$u = css `
+    const styles$v = css `
     ${display('inline-flex')}
 
     :host {
@@ -17021,7 +17021,7 @@
             }
         `));
 
-    const styles$t = styles$u.withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
+    const styles$u = styles$v.withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
             :host([appearance-variant='primary']) .control {
                 box-shadow: 0px 0px 0px ${borderWidth}
                     rgba(${actionRgbPartialColor}, 0.3) inset;
@@ -17141,14 +17141,14 @@
         baseName: 'button',
         baseClass: Button$1,
         template: buttonTemplate,
-        styles: styles$t,
+        styles: styles$u,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleButton());
 
-    const styles$s = css `
+    const styles$t = css `
     ${display('inline-flex')}
 
     :host {
@@ -17307,14 +17307,14 @@
     const nimbleCardButton = CardButton.compose({
         baseName: 'card-button',
         template: buttonTemplate,
-        styles: styles$s,
+        styles: styles$t,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
 
-    const styles$r = css `
+    const styles$s = css `
     ${display('inline-flex')}
 
     :host {
@@ -17432,14 +17432,14 @@
         baseName: 'checkbox',
         baseClass: Checkbox$1,
         template: checkboxTemplate,
-        styles: styles$r,
+        styles: styles$s,
         checkedIndicator: check16X16.data,
         indeterminateIndicator: minus16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
 
-    const styles$q = css `
-    ${styles$u}
+    const styles$r = css `
+    ${styles$v}
 
     .control[aria-pressed='true'] {
         background-color: ${fillSelectedColor};
@@ -17465,7 +17465,7 @@
     }
 `;
 
-    const template$8 = (context, definition) => html `
+    const template$9 = (context, definition) => html `
     <div
         role="button"
         part="control"
@@ -17540,8 +17540,8 @@
     applyMixins(ToggleButton, StartEnd, DelegatesARIAButton);
     const nimbleToggleButton = ToggleButton.compose({
         baseName: 'toggle-button',
-        template: template$8,
-        styles: styles$q,
+        template: template$9,
+        styles: styles$r,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17554,13 +17554,13 @@
     </div>
 `;
 
-    const template$7 = html `
+    const template$8 = html `
     <template>
         <div class="icon" :innerHTML=${x => x.icon.data}></div>
     </template
 `;
 
-    const styles$p = css `
+    const styles$q = css `
     ${display('inline-flex')}
 
     :host {
@@ -17613,8 +17613,8 @@
     const registerIcon = (baseName, iconClass) => {
         const composedIcon = iconClass.compose({
             baseName,
-            template: template$7,
-            styles: styles$p,
+            template: template$8,
+            styles: styles$q,
             baseClass: iconClass
         });
         DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -17648,7 +17648,7 @@
         block: 'block'
     };
 
-    const styles$o = css `
+    const styles$p = css `
     ${display('inline-flex')}
 
     :host {
@@ -17876,7 +17876,7 @@
             }
         `));
 
-    const styles$n = css `
+    const styles$o = css `
     .error-icon {
         display: none;
     }
@@ -17914,9 +17914,9 @@
     }
 `;
 
-    const styles$m = css `
+    const styles$n = css `
+    ${styles$p}
     ${styles$o}
-    ${styles$n}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -18152,7 +18152,7 @@
         baseName: 'combobox',
         baseClass: Combobox$1,
         template: comboboxTemplate,
-        styles: styles$m,
+        styles: styles$n,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -18196,7 +18196,7 @@
      */
     const UserDismissed = Symbol('user dismissed');
 
-    const styles$l = css `
+    const styles$m = css `
     ${display('grid')}
 
     dialog {
@@ -18312,7 +18312,7 @@
             }
         `));
 
-    const template$6 = html `
+    const template$7 = html `
     <template>
         <dialog
             ${ref('dialogElement')}
@@ -18438,13 +18438,13 @@
     applyMixins(Dialog, ARIAGlobalStatesAndProperties);
     const nimbleDialog = Dialog.compose({
         baseName: 'dialog',
-        template: template$6,
-        styles: styles$l,
+        template: template$7,
+        styles: styles$m,
         baseClass: Dialog
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
 
-    const styles$k = css `
+    const styles$l = css `
     ${display('block')}
 
     :host {
@@ -18599,7 +18599,7 @@
             }
         `));
 
-    const template$5 = html `
+    const template$6 = html `
     <dialog
         ${ref('dialog')}
         aria-label="${x => x.ariaLabel}"
@@ -18713,8 +18713,8 @@
     applyMixins(Drawer, ARIAGlobalStatesAndProperties);
     const nimbleDrawer = Drawer.compose({
         baseName: 'drawer',
-        template: template$5,
-        styles: styles$k
+        template: template$6,
+        styles: styles$l
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
 
@@ -20346,7 +20346,7 @@
     }
     registerIcon('icon-xmark-check', IconXmarkCheck);
 
-    const styles$j = css `
+    const styles$k = css `
     ${display('flex')}
 
     :host {
@@ -20426,11 +20426,11 @@
         baseName: 'list-option',
         baseClass: ListboxOption,
         template: listboxOptionTemplate,
-        styles: styles$j
+        styles: styles$k
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
 
-    const styles$i = css `
+    const styles$j = css `
     ${display('grid')}
 
     :host {
@@ -20485,11 +20485,11 @@
         baseName: 'menu',
         baseClass: Menu$1,
         template: menuTemplate,
-        styles: styles$i
+        styles: styles$j
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
 
-    const styles$h = css `
+    const styles$i = css `
     ${display('inline-block')}
 
     :host {
@@ -20508,7 +20508,7 @@
 `;
 
     // prettier-ignore
-    const template$4 = html `
+    const template$5 = html `
     <template
         ?open="${x => x.open}"
         @focusout="${(x, c) => x.focusoutHandler(c.event)}"
@@ -20716,15 +20716,15 @@
     ], MenuButton.prototype, "slottedMenus", void 0);
     const nimbleMenuButton = MenuButton.compose({
         baseName: 'menu-button',
-        template: template$4,
-        styles: styles$h,
+        template: template$5,
+        styles: styles$i,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
 
-    const styles$g = css `
+    const styles$h = css `
     ${display('grid')}
 
     :host {
@@ -20822,7 +20822,7 @@
         baseName: 'menu-item',
         baseClass: MenuItem$1,
         template: menuItemTemplate,
-        styles: styles$g,
+        styles: styles$h,
         expandCollapseGlyph: arrowExpanderRight16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -20836,9 +20836,9 @@
         block: 'block'
     };
 
-    const styles$f = css `
+    const styles$g = css `
     ${display('inline-block')}
-    ${styles$n}
+    ${styles$o}
 
     :host {
         font: ${bodyFont};
@@ -21052,7 +21052,7 @@
         baseName: 'number-field',
         baseClass: NumberField$1,
         template: numberFieldTemplate,
-        styles: styles$f,
+        styles: styles$g,
         shadowOptions: {
             delegatesFocus: true
         },
@@ -21093,7 +21093,7 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
 
-    const styles$e = css `
+    const styles$f = css `
     ${display('inline-flex')}
 
     :host {
@@ -21193,12 +21193,12 @@
         baseName: 'radio',
         baseClass: Radio$1,
         template: radioTemplate,
-        styles: styles$e,
+        styles: styles$f,
         checkedIndicator: circleFilled16X16.data
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
 
-    const styles$d = css `
+    const styles$e = css `
     ${display('inline-block')}
 
     .positioning-region {
@@ -21233,16 +21233,16 @@
         baseName: 'radio-group',
         baseClass: RadioGroup$1,
         template: radioGroupTemplate,
-        styles: styles$d,
+        styles: styles$e,
         shadowOptions: {
             delegatesFocus: true
         }
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadioGroup());
 
-    const styles$c = css `
+    const styles$d = css `
+    ${styles$p}
     ${styles$o}
-    ${styles$n}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -21318,7 +21318,7 @@
         baseName: 'select',
         baseClass: Select$1,
         template: selectTemplate,
-        styles: styles$c,
+        styles: styles$d,
         indicator: arrowExpanderDown16X16.data,
         end: html `
         <${DesignSystem.tagFor(IconExclamationMark)}
@@ -21330,7 +21330,7 @@
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
 
-    const styles$b = css `
+    const styles$c = css `
     ${display('inline-flex')}
 
     :host {
@@ -21493,7 +21493,7 @@
         `));
 
     // prettier-ignore
-    const template$3 = html `
+    const template$4 = html `
     <template
         role="switch"
         aria-checked="${x => x.checked}"
@@ -21537,12 +21537,12 @@
     const nimbleSwitch = Switch.compose({
         baseClass: Switch$1,
         baseName: 'switch',
-        template: template$3,
-        styles: styles$b
+        template: template$4,
+        styles: styles$c
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
 
-    const styles$a = css `
+    const styles$b = css `
     ${display('inline-flex')}
 
     :host {
@@ -21646,11 +21646,11 @@
         baseName: 'tab',
         baseClass: Tab$1,
         template: tabTemplate,
-        styles: styles$a
+        styles: styles$b
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
 
-    const styles$9 = css `
+    const styles$a = css `
     ${display('block')}
 
     :host {
@@ -21670,10 +21670,28 @@
         baseName: 'tab-panel',
         baseClass: TabPanel$1,
         template: tabPanelTemplate,
-        styles: styles$9
+        styles: styles$a
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabPanel());
 
+    const styles$9 = css `
+    ${display('flex')}
+`;
+
+    const template$3 = html ` <template> Nimble table here </template> `;
+
+    /**
+     * A nimble-styled table.
+     */
+    class Table extends FoundationElement {
+    }
+    const nimbleTable = Table.compose({
+        baseName: 'table',
+        template: template$3,
+        styles: styles$9
+    });
+    DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTable());
+
     const styles$8 = css `
     ${display('grid')}
 
@@ -21914,7 +21932,7 @@
 
     const styles$5 = css `
     ${display('inline-block')}
-    ${styles$n}
+    ${styles$o}
 
     :host {
         font: ${bodyFont};