@ni/nimble-components 20.1.2 → 20.1.4

package/dist/all-components-bundle.js

@@ -16288,7 +16288,7 @@
 
   /**
    * Do not edit directly
-   * Generated on Thu, 03 Aug 2023 22:33:38 GMT
+   * Generated on Fri, 11 Aug 2023 15:03:51 GMT
    */
 
   const Information100DarkUi = "#a46eff";
@@ -17789,18 +17789,10 @@
         background-color: ${fillHoverColor};
     }
 
-    :host(:hover[aria-selected='true']) {
+    :host(:hover[aria-current]) {
         background-color: ${fillHoverSelectedColor};
     }
 
-    :host(:focus) {
-        outline: none;
-    }
-
-    :host(${focusVisible}) {
-        outline: none;
-    }
-
     :host(:active) {
         background: none;
     }
@@ -17817,7 +17809,7 @@
             calc(${standardPadding} / 2 - ${borderWidth});
     }
 
-    :host::before {
+    a::before {
         content: '';
         position: absolute;
         bottom: calc(
@@ -17832,16 +17824,26 @@
     }
 
     @media (prefers-reduced-motion) {
-        :host::before {
-            transition-duration: 0.01s;
+        a::before {
+            transition-duration: 0s;
         }
     }
 
-    :host(${focusVisible})::before {
+    a${focusVisible}::before {
         width: calc(100% - 2 * var(--ni-private-focus-indicator-inset-width));
     }
 
-    :host::after {
+    a {
+        display: inline-flex;
+        text-decoration: none;
+        color: inherit;
+        cursor: inherit;
+        outline: none;
+        align-items: center;
+        justify-content: center;
+    }
+
+    a::after {
         content: '';
         position: absolute;
         bottom: 0px;
@@ -17853,35 +17855,24 @@
     }
 
     @media (prefers-reduced-motion) {
-        :host::after {
-            transition-duration: 0.01s;
+        a::after {
+            transition-duration: 0s;
         }
     }
 
-    :host(${focusVisible})::after {
+    a${focusVisible}::after {
         width: 100%;
         border-bottom-width: var(--ni-private-focus-indicator-width);
     }
 
-    :host([aria-selected='true'])::after {
+    :host([aria-current]) a::after {
         width: 100%;
         border-bottom-width: var(--ni-private-active-indicator-width);
     }
 
-    :host([aria-selected='true'][disabled])::after {
+    :host([disabled][aria-current]) a::after {
         border-bottom-color: rgba(${borderHoverColor}, 0.3);
     }
-`;
-
-  const styles$M = css `
-    ${styles$N}
-
-    a {
-        text-decoration: none;
-        color: inherit;
-        cursor: inherit;
-        outline: none;
-    }
 
     [part='start'] {
         display: none;
@@ -17903,7 +17894,6 @@
             rel="${x => x.rel}"
             target="${x => x.target}"
             type="${x => x.type}"
-            tabindex="-1"
         >
             ${startSlotTemplate(context, definition)}
             <slot></slot>
@@ -17946,12 +17936,15 @@
   const nimbleAnchorTab = AnchorTab.compose({
       baseName: 'anchor-tab',
       template: template$u,
-      styles: styles$M
+      styles: styles$N,
+      shadowOptions: {
+          delegatesFocus: true
+      }
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
   DesignSystem.tagFor(AnchorTab);
 
-  const styles$L = css `
+  const styles$M = css `
     ${display('grid')}
 
     :host {
@@ -18010,7 +18003,12 @@
                   }
                   const isTabStop = this.activeid === tabId && this.isFocusableElement(tab);
                   tab.setAttribute('id', tabId);
-                  tab.setAttribute('aria-selected', isActiveTab ? 'true' : 'false');
+                  if (isActiveTab) {
+                      tab.setAttribute('aria-current', 'page');
+                  }
+                  else {
+                      tab.removeAttribute('aria-current');
+                  }
                   tab.removeEventListener('click', this.handleTabClick);
                   tab.addEventListener('click', this.handleTabClick);
                   tab.removeEventListener('keydown', this.handleTabKeyDown);
@@ -18120,6 +18118,7 @@
               focusedTab.focus();
               this.tabs.forEach((tab) => {
                   tab.setAttribute('tabindex', tab === focusedTab ? '0' : '-1');
+                  tab.setAttribute('aria-selected', tab === focusedTab ? 'true' : 'false');
               });
           };
       }
@@ -18174,7 +18173,7 @@
   const nimbleAnchorTabs = AnchorTabs.compose({
       baseName: 'anchor-tabs',
       template: template$t,
-      styles: styles$L,
+      styles: styles$M,
       shadowOptions: {
           delegatesFocus: false
       }
@@ -18191,7 +18190,7 @@
     -webkit-user-select: none;
 `;
 
-  const styles$K = css `
+  const styles$L = css `
     ${display('block')}
 
     :host {
@@ -18430,7 +18429,7 @@
   const nimbleAnchorTreeItem = AnchorTreeItem.compose({
       baseName: 'anchor-tree-item',
       template: template$s,
-      styles: styles$K,
+      styles: styles$L,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -18440,7 +18439,7 @@
       .register(nimbleAnchorTreeItem());
   DesignSystem.tagFor(AnchorTreeItem);
 
-  const styles$J = css `
+  const styles$K = css `
     :host {
         contain: layout;
         display: block;
@@ -18464,7 +18463,7 @@
       baseName: 'anchored-region',
       baseClass: AnchoredRegion$1,
       template: anchoredRegionTemplate,
-      styles: styles$J
+      styles: styles$K
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -18544,7 +18543,7 @@
    */
   const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
 
-  const styles$I = css `
+  const styles$J = css `
     ${display('flex')}
 
     :host {
@@ -18702,7 +18701,7 @@
             }
         `));
 
-  const styles$H = css `
+  const styles$I = css `
     ${styles$Q}
     ${buttonAppearanceVariantStyles}
 `;
@@ -18749,7 +18748,7 @@
       baseName: 'button',
       baseClass: Button$1,
       template: buttonTemplate,
-      styles: styles$H,
+      styles: styles$I,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -19413,7 +19412,7 @@
     </template
 `;
 
-  const styles$G = css `
+  const styles$H = css `
     ${display('inline-flex')}
 
     :host {
@@ -19487,7 +19486,7 @@
       const composedIcon = iconClass.compose({
           baseName,
           template: template$r,
-          styles: styles$G,
+          styles: styles$H,
           baseClass: iconClass
       });
       DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
@@ -19693,12 +19692,12 @@
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
       template: template$q,
-      styles: styles$I
+      styles: styles$J
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
   DesignSystem.tagFor(Banner);
 
-  const styles$F = css `
+  const styles$G = css `
     ${display('inline-block')}
 
     :host {
@@ -19739,12 +19738,12 @@
       baseName: 'breadcrumb',
       baseClass: Breadcrumb$1,
       template: breadcrumbTemplate,
-      styles: styles$F
+      styles: styles$G
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBreadcrumb());
   DesignSystem.tagFor(Breadcrumb);
 
-  const styles$E = css `
+  const styles$F = css `
     ${display('inline-flex')}
 
     :host {
@@ -19818,7 +19817,7 @@
       baseName: 'breadcrumb-item',
       baseClass: BreadcrumbItem$1,
       template: breadcrumbItemTemplate,
-      styles: styles$E,
+      styles: styles$F,
       separator: forwardSlash16X16.data
   });
   DesignSystem.getOrCreate()
@@ -19826,7 +19825,7 @@
       .register(nimbleBreadcrumbItem());
   DesignSystem.tagFor(BreadcrumbItem);
 
-  const styles$D = css `
+  const styles$E = css `
     ${display('inline-flex')}
 
     :host {
@@ -19985,7 +19984,7 @@
   const nimbleCardButton = CardButton.compose({
       baseName: 'card-button',
       template: buttonTemplate,
-      styles: styles$D,
+      styles: styles$E,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -19993,7 +19992,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCardButton());
   DesignSystem.tagFor(CardButton);
 
-  const styles$C = css `
+  const styles$D = css `
     ${display('inline-flex')}
 
     :host {
@@ -20111,14 +20110,14 @@
       baseName: 'checkbox',
       baseClass: Checkbox$1,
       template: checkboxTemplate,
-      styles: styles$C,
+      styles: styles$D,
       checkedIndicator: check16X16.data,
       indeterminateIndicator: minus16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
   const checkboxTag = DesignSystem.tagFor(Checkbox);
 
-  const styles$B = css `
+  const styles$C = css `
     ${styles$Q}
 
     @layer base {
@@ -20274,7 +20273,7 @@
   const nimbleToggleButton = ToggleButton.compose({
       baseName: 'toggle-button',
       template: template$p,
-      styles: styles$B,
+      styles: styles$C,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -20311,7 +20310,7 @@
       block: 'block'
   };
 
-  const styles$A = css `
+  const styles$B = css `
     ${display('inline-flex')}
 
     :host {
@@ -20537,7 +20536,7 @@
             }
         `));
 
-  const styles$z = css `
+  const styles$A = css `
     .error-icon {
         display: none;
     }
@@ -20571,9 +20570,9 @@
     }
 `;
 
-  const styles$y = css `
+  const styles$z = css `
+    ${styles$B}
     ${styles$A}
-    ${styles$z}
 
     :host {
         --ni-private-hover-bottom-border-width: 2px;
@@ -20926,7 +20925,7 @@
       baseName: 'combobox',
       baseClass: Combobox$1,
       template: template$o,
-      styles: styles$y,
+      styles: styles$z,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -20971,7 +20970,7 @@
    */
   const UserDismissed = Symbol('user dismissed');
 
-  const styles$x = css `
+  const styles$y = css `
     ${display('grid')}
 
     dialog {
@@ -21214,13 +21213,13 @@
   const nimbleDialog = Dialog.compose({
       baseName: 'dialog',
       template: template$n,
-      styles: styles$x,
+      styles: styles$y,
       baseClass: Dialog
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDialog());
   DesignSystem.tagFor(Dialog);
 
-  const styles$w = css `
+  const styles$x = css `
     ${display('block')}
 
     :host {
@@ -21488,7 +21487,7 @@
   const nimbleDrawer = Drawer.compose({
       baseName: 'drawer',
       template: template$m,
-      styles: styles$w
+      styles: styles$x
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleDrawer());
   DesignSystem.tagFor(Drawer);
@@ -23685,7 +23684,7 @@
       .register(nimbleLabelProviderTable());
   DesignSystem.tagFor(LabelProviderTable);
 
-  const styles$v = css `
+  const styles$w = css `
     ${display('flex')}
 
     :host {
@@ -23773,7 +23772,7 @@
       baseName: 'list-option',
       baseClass: ListboxOption,
       template: listboxOptionTemplate,
-      styles: styles$v
+      styles: styles$w
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleListOption());
   DesignSystem.tagFor(ListOption);
@@ -23806,7 +23805,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(textMapping());
   DesignSystem.tagFor(MappingText);
 
-  const styles$u = css `
+  const styles$v = css `
     ${display('grid')}
 
     :host {
@@ -23873,12 +23872,12 @@
       baseName: 'menu',
       baseClass: Menu$1,
       template: menuTemplate,
-      styles: styles$u
+      styles: styles$v
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenu());
   DesignSystem.tagFor(Menu);
 
-  const styles$t = css `
+  const styles$u = css `
     ${display('inline-block')}
 
     :host {
@@ -24153,7 +24152,7 @@
   const nimbleMenuButton = MenuButton.compose({
       baseName: 'menu-button',
       template: template$k,
-      styles: styles$t,
+      styles: styles$u,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -24161,7 +24160,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuButton());
   const menuButtonTag = DesignSystem.tagFor(MenuButton);
 
-  const styles$s = css `
+  const styles$t = css `
     ${display('grid')}
 
     :host {
@@ -24259,7 +24258,7 @@
       baseName: 'menu-item',
       baseClass: MenuItem$1,
       template: menuItemTemplate,
-      styles: styles$s,
+      styles: styles$t,
       expandCollapseGlyph: arrowExpanderRight16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleMenuItem());
@@ -24274,9 +24273,9 @@
       block: 'block'
   };
 
-  const styles$r = css `
+  const styles$s = css `
     ${display('inline-block')}
-    ${styles$z}
+    ${styles$A}
 
     :host {
         font: ${bodyFont};
@@ -24490,7 +24489,7 @@
       baseName: 'number-field',
       baseClass: NumberField$1,
       template: numberFieldTemplate,
-      styles: styles$r,
+      styles: styles$s,
       shadowOptions: {
           delegatesFocus: true
       },
@@ -24532,7 +24531,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());
   DesignSystem.tagFor(NumberField);
 
-  const styles$q = css `
+  const styles$r = css `
     ${display('inline-flex')}
 
     :host {
@@ -24633,13 +24632,13 @@
       baseName: 'radio',
       baseClass: Radio$1,
       template: radioTemplate,
-      styles: styles$q,
+      styles: styles$r,
       checkedIndicator: circleFilled16X16.data
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleRadio());
   DesignSystem.tagFor(Radio);
 
-  const styles$p = css `
+  const styles$q = css `
     ${display('inline-block')}
 
     .positioning-region {
@@ -24674,7 +24673,7 @@
       baseName: 'radio-group',
       baseClass: RadioGroup$1,
       template: radioGroupTemplate,
-      styles: styles$p,
+      styles: styles$q,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -24686,7 +24685,7 @@
     <template> Rich Text Editor here. </template>
 `;
 
-  const styles$o = css `
+  const styles$p = css `
     ${display('flex')}
 
     :host {
@@ -24703,7 +24702,7 @@
   const nimbleRichTextEditor = RichTextEditor.compose({
       baseName: 'rich-text-editor',
       template: template$j,
-      styles: styles$o
+      styles: styles$p
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
@@ -40228,7 +40227,7 @@
     <div ${ref('viewer')} class="viewer"></div>
 `;
 
-  const styles$n = css `
+  const styles$o = css `
     ${display('flex')}
 
     :host {
@@ -40353,16 +40352,16 @@
   const nimbleRichTextViewer = RichTextViewer.compose({
       baseName: 'rich-text-viewer',
       template: template$i,
-      styles: styles$n
+      styles: styles$o
   });
   DesignSystem.getOrCreate()
       .withPrefix('nimble')
       .register(nimbleRichTextViewer());
   DesignSystem.tagFor(RichTextViewer);
 
-  const styles$m = css `
+  const styles$n = css `
+    ${styles$B}
     ${styles$A}
-    ${styles$z}
 
     ${
 /* We are using flex `order` to define the visual ordering of the selected value,
@@ -40529,7 +40528,7 @@
       baseName: 'select',
       baseClass: Select$1,
       template: template$h,
-      styles: styles$m,
+      styles: styles$n,
       indicator: arrowExpanderDown16X16.data,
       end: html `
         <${iconExclamationMarkTag}
@@ -40542,7 +40541,7 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSelect());
   DesignSystem.tagFor(Select);
 
-  const styles$l = css `
+  const styles$m = css `
     ${display('inline-flex')}
 
     :host {
@@ -40741,12 +40740,12 @@
   const nimbleSpinner = Spinner.compose({
       baseName: 'spinner',
       template: template$g,
-      styles: styles$l
+      styles: styles$m
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSpinner());
   DesignSystem.tagFor(Spinner);
 
-  const styles$k = css `
+  const styles$l = css `
     ${display('inline-flex')}
 
     :host {
@@ -40954,11 +40953,113 @@
       baseClass: Switch$1,
       baseName: 'switch',
       template: template$f,
-      styles: styles$k
+      styles: styles$l
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleSwitch());
   DesignSystem.tagFor(Switch);
 
+  const styles$k = css `
+    ${display('inline-flex')}
+
+    :host {
+        position: relative;
+        box-sizing: border-box;
+        font: ${buttonLabelFont};
+        height: ${controlHeight};
+        color: ${bodyFontColor};
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        --ni-private-active-indicator-width: 2px;
+        --ni-private-focus-indicator-width: 1px;
+        --ni-private-indicator-lines-gap: 1px;
+        --ni-private-focus-indicator-inset-width: 3px;
+    }
+
+    :host(:hover) {
+        background-color: ${fillHoverColor};
+    }
+
+    :host(:hover[aria-selected='true']) {
+        background-color: ${fillHoverSelectedColor};
+    }
+
+    :host(${focusVisible}) {
+        outline: none;
+    }
+
+    :host(:active) {
+        background: none;
+    }
+
+    :host([disabled]) {
+        cursor: default;
+        color: ${bodyDisabledFontColor};
+        background: none;
+    }
+
+    slot:not([name]) {
+        display: block;
+        padding: calc(${standardPadding} / 2) ${standardPadding}
+            calc(${standardPadding} / 2 - ${borderWidth});
+    }
+
+    :host::before {
+        content: '';
+        position: absolute;
+        bottom: calc(
+            var(--ni-private-active-indicator-width) +
+                var(--ni-private-indicator-lines-gap)
+        );
+        width: 0px;
+        height: 0px;
+        border-bottom: ${borderHoverColor}
+            var(--ni-private-focus-indicator-width) solid;
+        transition: width ${smallDelay} ease-in;
+    }
+
+    @media (prefers-reduced-motion) {
+        :host::before {
+            transition-duration: 0s;
+        }
+    }
+
+    :host(${focusVisible})::before {
+        width: calc(100% - 2 * var(--ni-private-focus-indicator-inset-width));
+    }
+
+    :host::after {
+        content: '';
+        position: absolute;
+        bottom: 0px;
+        width: 0px;
+        height: 0px;
+        border-bottom: ${borderHoverColor}
+            var(--ni-private-active-indicator-width) solid;
+        transition: width ${smallDelay} ease-in;
+    }
+
+    @media (prefers-reduced-motion) {
+        :host::after {
+            transition-duration: 0s;
+        }
+    }
+
+    :host(${focusVisible})::after {
+        width: 100%;
+        border-bottom-width: var(--ni-private-focus-indicator-width);
+    }
+
+    :host([aria-selected='true'])::after {
+        width: 100%;
+        border-bottom-width: var(--ni-private-active-indicator-width);
+    }
+
+    :host([aria-selected='true'][disabled])::after {
+        border-bottom-color: rgba(${borderHoverColor}, 0.3);
+    }
+`;
+
   /**
    * A nimble-styled HTML tab
    */
@@ -40968,7 +41069,7 @@
       baseName: 'tab',
       baseClass: Tab$2,
       template: tabTemplate,
-      styles: styles$N
+      styles: styles$k
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
   DesignSystem.tagFor(Tab);
@@ -48938,7 +49039,7 @@
 
   const styles$6 = css `
     ${display('inline-flex')}
-    ${styles$z}
+    ${styles$A}
 
     :host {
         font: ${bodyFont};
@@ -49284,7 +49385,7 @@
 
   const styles$5 = css `
     ${display('inline-block')}
-    ${styles$z}
+    ${styles$A}
 
     :host {
         font: ${bodyFont};