@ni/spright-components 4.1.15 → 4.1.17

package/dist/all-components-bundle.js

@@ -12875,31 +12875,6 @@
       attr({ mode: "boolean" })
   ], Tab$1.prototype, "disabled", void 0);
 
-  /**
-   * The template for the {@link @microsoft/fast-foundation#(Tabs:class)} component.
-   * @public
-   */
-  const tabsTemplate = (context, definition) => html `
-    <template class="${x => x.orientation}">
-        ${startSlotTemplate(context, definition)}
-        <div class="tablist" part="tablist" role="tablist">
-            <slot class="tab" name="tab" part="tab" ${slotted("tabs")}></slot>
-
-            ${when(x => x.showActiveIndicator, html `
-                    <div
-                        ${ref("activeIndicatorRef")}
-                        class="activeIndicator"
-                        part="activeIndicator"
-                    ></div>
-                `)}
-        </div>
-        ${endSlotTemplate(context, definition)}
-        <div class="tabpanel" part="tabpanel">
-            <slot name="tabpanel" ${slotted("tabpanels")}></slot>
-        </div>
-    </template>
-`;
-
   /**
    * The orientation of the {@link @microsoft/fast-foundation#(Tabs:class)} component
    * @public
@@ -17714,6 +17689,7 @@
         align-items: center;
         justify-content: center;
         cursor: pointer;
+        text-wrap: nowrap;
         --ni-private-active-indicator-width: 2px;
         --ni-private-focus-indicator-width: 1px;
         --ni-private-indicator-lines-gap: 1px;
@@ -17880,810 +17856,116 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
 
   const styles$X = css `
-    ${display$1('grid')}
-
-    :host {
-        grid-template-columns: auto 1fr;
-        grid-template-rows: auto 1fr;
-    }
-
-    [part='start'] {
-        display: none;
-    }
-
-    .tablist {
-        display: grid;
-        grid-template-rows: auto auto;
-        grid-template-columns: auto;
-        width: max-content;
-        align-self: end;
-    }
-`;
-
-  const template$I = (context, definition) => html `
-    ${startSlotTemplate(context, definition)}
-    <div ${ref('tablist')} class="tablist" part="tablist" role="tablist">
-        <slot name="anchortab" ${slotted('tabs')}></slot>
-    </div>
-    ${endSlotTemplate(context, definition)}
-`;
-
-  /**
-   * A nimble-styled set of anchor tabs
-   */
-  class AnchorTabs extends FoundationElement {
-      constructor() {
-          super(...arguments);
-          this.tabIds = [];
-          this.isDisabledElement = (el) => {
-              return el.getAttribute('aria-disabled') === 'true';
-          };
-          this.isHiddenElement = (el) => {
-              return el.hasAttribute('hidden');
-          };
-          this.isFocusableElement = (el) => {
-              return !this.isDisabledElement(el) && !this.isHiddenElement(el);
-          };
-          this.setTabs = () => {
-              const gridHorizontalProperty = 'gridColumn';
-              const gridVerticalProperty = 'gridRow';
-              this.activetab = undefined;
-              let firstFocusableTab;
-              this.tabs.forEach((tab, index) => {
-                  const tabId = this.tabIds[index];
-                  const isActiveTab = this.activeid === tabId;
-                  if (!firstFocusableTab && this.isFocusableElement(tab)) {
-                      firstFocusableTab = tab;
-                  }
-                  const isTabStop = this.activeid === tabId && this.isFocusableElement(tab);
-                  tab.setAttribute('id', tabId);
-                  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);
-                  tab.addEventListener('keydown', this.handleTabKeyDown);
-                  tab.setAttribute('tabindex', isTabStop ? '0' : '-1');
-                  if (isActiveTab) {
-                      this.activetab = tab;
-                  }
-                  tab.style[gridVerticalProperty] = '';
-                  tab.style[gridHorizontalProperty] = `${index + 1}`;
-              });
-              if (firstFocusableTab
-                  && (!this.activetab || !this.isFocusableElement(this.activetab))) {
-                  firstFocusableTab.setAttribute('tabindex', '0');
-              }
-          };
-          this.handleTabClick = (event) => {
-              const selectedTab = event.currentTarget;
-              if (selectedTab.nodeType === 1
-                  && this.isFocusableElement(selectedTab)) {
-                  this.tabs.forEach((tab) => {
-                      tab.setAttribute('tabindex', tab === selectedTab ? '0' : '-1');
-                  });
-              }
-          };
-          this.handleTabKeyDown = (event) => {
-              let anchor;
-              switch (event.key) {
-                  case keyArrowLeft:
-                      event.preventDefault();
-                      this.adjustBackward();
-                      break;
-                  case keyArrowRight:
-                      event.preventDefault();
-                      this.adjustForward();
-                      break;
-                  case keyHome:
-                      event.preventDefault();
-                      this.focusFirstOrLast(false);
-                      break;
-                  case keyEnd:
-                      event.preventDefault();
-                      this.focusFirstOrLast(true);
-                      break;
-                  case keySpace:
-                  case keyEnter:
-                      event.preventDefault();
-                      this.getTabAnchor(event.target).click();
-                      break;
-                  case 'ContextMenu':
-                      event.preventDefault();
-                      anchor = this.getTabAnchor(event.target);
-                      anchor.focus();
-                      anchor.dispatchEvent(new KeyboardEvent('keydown', {
-                          key: event.key,
-                          bubbles: false
-                      }));
-                      break;
-                  // do nothing
-              }
-          };
-          this.adjustForward = () => {
-              const group = this.tabs;
-              let index = 0;
-              const focusedTab = group.find(x => x === document.activeElement);
-              index = focusedTab ? group.indexOf(focusedTab) + 1 : 1;
-              if (index === group.length) {
-                  index = 0;
-              }
-              while (index < group.length && group.length > 1) {
-                  if (this.isFocusableElement(group[index])) {
-                      this.focusTabByIndex(group, index);
-                      break;
-                  }
-                  else if (focusedTab && index === group.indexOf(focusedTab)) {
-                      break;
-                  }
-                  else if (index + 1 >= group.length) {
-                      index = 0;
-                  }
-                  else {
-                      index += 1;
-                  }
-              }
-          };
-          this.adjustBackward = () => {
-              const group = this.tabs;
-              let index = 0;
-              const focusedTab = group.find(x => x === document.activeElement);
-              index = focusedTab ? group.indexOf(focusedTab) - 1 : 0;
-              index = index < 0 ? group.length - 1 : index;
-              while (index >= 0 && group.length > 1) {
-                  if (this.isFocusableElement(group[index])) {
-                      this.focusTabByIndex(group, index);
-                      break;
-                  }
-                  else if (index - 1 < 0) {
-                      index = group.length - 1;
-                  }
-                  else {
-                      index -= 1;
-                  }
-              }
-          };
-          this.focusTabByIndex = (group, index) => {
-              const focusedTab = group[index];
-              focusedTab.focus();
-              this.tabs.forEach((tab) => {
-                  tab.setAttribute('tabindex', tab === focusedTab ? '0' : '-1');
-                  tab.setAttribute('aria-selected', tab === focusedTab ? 'true' : 'false');
-              });
-          };
-      }
-      /**
-       * @internal
-       */
-      activeidChanged(_oldValue, _newValue) {
-          if (this.$fastController.isConnected) {
-              this.setTabs();
-          }
-      }
-      /**
-       * @internal
-       */
-      tabsChanged() {
-          if (this.$fastController.isConnected) {
-              this.tabIds = this.getTabIds();
-              this.setTabs();
-          }
-      }
-      /**
-       * @internal
-       */
-      connectedCallback() {
-          super.connectedCallback();
-          this.tabIds = this.getTabIds();
-      }
-      getTabIds() {
-          return this.tabs.map((tab) => {
-              return tab.getAttribute('id') ?? `tab-${uniqueId()}`;
-          });
-      }
-      focusFirstOrLast(focusLast) {
-          const focusableTabs = this.tabs.filter(t => this.isFocusableElement(t));
-          const focusableIndex = focusLast ? focusableTabs.length - 1 : 0;
-          const index = this.tabs.indexOf(focusableTabs[focusableIndex]);
-          if (index > -1) {
-              this.focusTabByIndex(this.tabs, index);
-          }
-      }
-      getTabAnchor(tab) {
-          return tab.shadowRoot.querySelector('a');
-      }
-  }
-  __decorate$1([
-      attr
-  ], AnchorTabs.prototype, "activeid", void 0);
-  __decorate$1([
-      observable
-  ], AnchorTabs.prototype, "tabs", void 0);
-  applyMixins(AnchorTabs, StartEnd);
-  const nimbleAnchorTabs = AnchorTabs.compose({
-      baseName: 'anchor-tabs',
-      template: template$I,
-      styles: styles$X,
-      shadowOptions: {
-          delegatesFocus: false
-      }
-  });
-  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());
-
-  /**
-   * Set user-select: none in a way that works across all supported browsers.
-   * https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#browser_compatibility
-   */
-  const userSelectNone = cssPartial `
-    user-select: none;
-    -webkit-user-select: none;
-`;
-
-  const styles$W = css `
-    ${display$1('block')}
+    ${display$1('flex')}
 
     :host {
-        ${
-/* don't set font-size here or else it overrides what we set on .items */ ''}
-        font-family: ${bodyFontFamily};
-        font-weight: ${bodyFontWeight};
-        contain: content;
-        position: relative;
-        outline: none;
-        color: ${bodyFontColor};
-        cursor: pointer;
-        --ni-private-tree-item-nested-width: 0;
-    }
-
-    :host([disabled]) {
-        color: ${bodyDisabledFontColor};
-        cursor: default;
-    }
-
-    .control {
-        display: flex;
-        text-decoration: none;
-        color: inherit;
-    }
-
-    .control${focusVisible} {
-        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
-        outline: ${borderWidth} solid ${borderHoverColor};
-        outline-offset: -2px;
+        flex-direction: column;
     }
 
-    .positioning-region {
+    .tab-bar {
         display: flex;
-        position: relative;
-        height: calc(${iconSize} * 2);
-        width: 100%;
-    }
-
-    .positioning-region:hover {
-        background: ${fillHoverColor};
-    }
-
-    :host([disabled]) .positioning-region:hover {
-        background: transparent;
-    }
-
-    :host([selected]) .positioning-region {
-        background: ${fillSelectedColor};
-    }
-
-    :host([selected]) .positioning-region:hover {
-        background: ${fillHoverSelectedColor};
-    }
-
-    .positioning-region::before {
-        content: '';
-        display: block;
-        width: var(--ni-private-tree-item-nested-width);
-        flex-shrink: 0;
     }
 
-    .content-region {
-        display: inline-flex;
-        align-items: center;
-        white-space: nowrap;
-        width: 100%;
-        padding-left: 10px;
-        font: inherit;
-        font-size: ${bodyFontSize};
-        ${userSelectNone}
-        position: relative;
-        margin-inline-start: ${iconSize};
+    [part='start'] {
+        display: none;
     }
 
-    ${
-/* this rule keeps children without an icon text aligned with parents */ ''}
-    [part="start"] {
-        width: ${iconSize};
-        pointer-events: none;
+    .scroll-button.left {
+        margin-right: ${smallPadding};
     }
 
-    ${ /* the start class is applied when the corresponding slot is filled */''}
-    .start {
+    .tablist {
         display: flex;
-        margin-inline-start: ${iconSize};
-        margin-inline-end: ${iconSize};
-    }
-
-    slot[name='start']::slotted(*) {
-        ${iconColor.cssCustomProperty}: currentcolor;
-        width: ${iconSize};
-        height: ${iconSize};
+        width: max-content;
+        align-self: end;
+        overflow-x: scroll;
+        scrollbar-width: none;
     }
 
-    .content {
-        pointer-events: none;
+    .scroll-button.right {
+        margin-left: ${smallPadding};
     }
 
     [part='end'] {
-        display: none;
+        flex: 1;
     }
 `;
 
-  const template$H = (context, definition) => html `
-    <template
-        role="treeitem"
-        slot="${x => (x.isNestedItem() ? 'item' : null)}"
-        tabindex="-1"
-        aria-disabled="${x => x.disabled}"
-        aria-selected="${x => x.selected}"
-        @focusin="${(x, c) => x.handleFocus(c.event)}"
-        @focusout="${(x, c) => x.handleBlur(c.event)}"
-        @keydown="${(x, c) => x.keydownHandler(c.event)}"
-        @click="${(x, c) => x.clickHandler(c.event)}"
+  const styles$W = css `
+    ${styles$$}
+    ${buttonAppearanceVariantStyles}
+`;
+
+  const template$I = (context, definition) => html `
+    <button
+        class="control"
+        part="control"
+        ?autofocus="${x => x.autofocus}"
+        ?disabled="${x => x.disabled}"
+        form="${x => x.formId}"
+        formaction="${x => x.formaction}"
+        formenctype="${x => x.formenctype}"
+        formmethod="${x => x.formmethod}"
+        formnovalidate="${x => x.formnovalidate}"
+        formtarget="${x => x.formtarget}"
+        name="${x => x.name}"
+        type="${x => x.type}"
+        value="${x => x.value}"
+        tabindex="${x => x.tabIndex}"
+        aria-atomic="${x => x.ariaAtomic}"
+        aria-busy="${x => x.ariaBusy}"
+        aria-controls="${x => x.ariaControls}"
+        aria-current="${x => x.ariaCurrent}"
+        aria-describedby="${x => x.ariaDescribedby}"
+        aria-details="${x => x.ariaDetails}"
+        aria-disabled="${x => x.ariaDisabled}"
+        aria-errormessage="${x => x.ariaErrormessage}"
+        aria-expanded="${x => x.ariaExpanded}"
+        aria-flowto="${x => x.ariaFlowto}"
+        aria-haspopup="${x => x.ariaHaspopup}"
+        aria-hidden="${x => x.ariaHidden}"
+        aria-invalid="${x => x.ariaInvalid}"
+        aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
+        aria-label="${x => x.ariaLabel}"
+        aria-labelledby="${x => x.ariaLabelledby}"
+        aria-live="${x => x.ariaLive}"
+        aria-owns="${x => x.ariaOwns}"
+        aria-pressed="${x => x.ariaPressed}"
+        aria-relevant="${x => x.ariaRelevant}"
+        aria-roledescription="${x => x.ariaRoledescription}"
+        ${ref('control')}
     >
-        <a
-            class="control"
-            part="control"
-            tabindex="0"
-            download="${x => x.download}"
-            href=${x => (x.disabled ? null : x.href)}
-            hreflang="${x => x.hreflang}"
-            ping="${x => x.ping}"
-            referrerpolicy="${x => x.referrerpolicy}"
-            rel="${x => x.rel}"
-            target="${x => x.target}"
-            type="${x => x.type}"
-            ${ref('control')}
-        >
-            <div class="positioning-region" part="positioning-region">
-                <div class="content-region" part="content-region">
-                    ${startSlotTemplate(context, definition)}
-                    <span class="content" part="content">
-                        <slot></slot>
-                    </span>
-                    ${endSlotTemplate(context, definition)}
-                </div>
-            </div>
-        </a>
-    </template>
+        ${startSlotTemplate(context, definition)}
+        <span class="content" part="content">
+            <slot ${slotted('defaultSlottedContent')}></slot>
+        </span>
+        ${endSlotTemplate(context, definition)}
+    </button>
 `;
 
   /**
-   * A nimble-styled anchor tree item
+   * A nimble-styled HTML button
    */
-  class AnchorTreeItem extends AnchorBase {
+  class Button extends Button$1 {
       constructor() {
           super(...arguments);
           /**
-           * When true, the control will appear selected by user interaction.
            * @public
            * @remarks
-           * HTML Attribute: selected
+           * HTML Attribute: appearance
            */
-          this.selected = false;
+          this.appearance = ButtonAppearance.outline;
           /**
-           * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute} for more information.
            * @public
            * @remarks
-           * HTML Attribute: disabled
+           * HTML Attribute: content-hidden
            */
-          this.disabled = false;
-      }
-      /**
-       * Whether the tree is nested
-       *
-       * @public
-       */
-      isNestedItem() {
-          return isTreeItemElement(this.parentElement);
-      }
-      /**
-       * Handle focus events
-       *
-       * @internal
-       */
-      handleFocus(_e) {
-          this.setAttribute('tabindex', '0');
-      }
-      /**
-       * Handle blur events
-       *
-       * @internal
-       */
-      handleBlur(_e) {
-          this.setAttribute('tabindex', '-1');
-      }
-      /**
-       * @internal
-       */
-      keydownHandler(e) {
-          if (e.defaultPrevented) {
-              return false;
-          }
-          switch (e.key) {
-              case keyEnter:
-                  // Do not let the event bubble up to the FAST tree, or it will
-                  // prevent the default action.
-                  e.stopPropagation();
-                  break;
-              case keyArrowLeft:
-                  // For FAST tree items, the FAST tree view handles this navigation,
-                  // but since our anchor tree item is not "instanceof FASTTreeItem",
-                  // the FAST tree view won't do this for us. We do it ourselves.
-                  if (this.parentElement && this.isNestedItem()) {
-                      TreeItem$1.focusItem(this.parentElement);
-                  }
-                  break;
-          }
-          return true;
-      }
-      /**
-       * Activating the anchor by pressing the Enter key results in a click event.
-       * This bubbles up to the Nimble tree-view's click handler, causing the tree item
-       * to be selected. We don't want that for anchor tree items. We'll stop propagation
-       * of the event to prevent that.
-       * @internal
-       */
-      clickHandler(e) {
-          if (e.defaultPrevented) {
-              return false;
-          }
-          e.stopPropagation();
-          return true;
-      }
-      selectedChanged(_prev, _next) {
-          if (this.$fastController.isConnected) {
-              this.$emit('selected-change', this);
-          }
+          this.contentHidden = false;
       }
   }
   __decorate$1([
-      attr({ mode: 'boolean' })
-  ], AnchorTreeItem.prototype, "selected", void 0);
-  __decorate$1([
-      attr({ mode: 'boolean' })
-  ], AnchorTreeItem.prototype, "disabled", void 0);
-  // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
-  const nimbleAnchorTreeItem = AnchorTreeItem.compose({
-      baseName: 'anchor-tree-item',
-      template: template$H,
-      styles: styles$W,
-      shadowOptions: {
-          delegatesFocus: true
-      }
-  });
-  DesignSystem.getOrCreate()
-      .withPrefix('nimble')
-      .register(nimbleAnchorTreeItem());
-
-  const ZIndexLevels = {
-      zIndex1: '1',
-      // Original usages of 1000 were to compete with jqx grid usage of z-index 200 for table headers
-      // See: https://github.com/ni/nimble/pull/530#discussion_r863076750
-      zIndex1000: '1000'
-  };
-
-  const styles$V = css `
-    ${display$1('block')}
-
-    :host {
-        contain: layout;
-        z-index: ${ZIndexLevels.zIndex1000};
-    }
-
-    ${'' /* Override 'display' helper hidden behavior */}
-    :host([hidden]) {
-        display: block;
-        visibility: hidden;
-    }
-`;
-
-  // When the anchor element changes position on the page, it is the client's responsibility to update the position
-  // of the anchored region by calling update() on the anchored region.
-  //
-  // When the anchor element is recreated on the page, it is the client's responsibility to reset the reference the
-  // anchored region has to the anchor element. This can be done by either recreating the anchor element with a new
-  // ID that is also set as the \`anchor\` attribute on the anchored region or by explicitly setting the value of
-  // anchorElement on the anchored region to the new anchor element.
-  /**
-   * A nimble-styled anchored region control.
-   */
-  class AnchoredRegion extends AnchoredRegion$1 {
-  }
-  const nimbleAnchoredRegion = AnchoredRegion.compose({
-      baseName: 'anchored-region',
-      baseClass: AnchoredRegion$1,
-      template: anchoredRegionTemplate,
-      styles: styles$V
-  });
-  DesignSystem.getOrCreate()
-      .withPrefix('nimble')
-      .register(nimbleAnchoredRegion());
-  const anchoredRegionTag = 'nimble-anchored-region';
-
-  /**
-   * Subscription for {@link ThemeStyleSheetBehavior}
-   */
-  class ThemeStyleSheetBehaviorSubscription {
-      constructor(value, styles, source) {
-          this.value = value;
-          this.styles = styles;
-          this.source = source;
-      }
-      handleChange() {
-          const theme$1 = theme.getValueFor(this.source);
-          if (Array.isArray(this.value)
-              ? this.value.includes(theme$1)
-              : this.value === theme$1) {
-              this.source.$fastController.addStyles(this.styles);
-          }
-          else {
-              this.source.$fastController.removeStyles(this.styles);
-          }
-      }
-  }
-  /**
-   * Behavior to conditionally apply theme-based stylesheets.
-   */
-  class ThemeStyleSheetBehavior {
-      constructor(theme, styles) {
-          this.theme = theme;
-          this.styles = styles;
-          this.cache = new WeakMap();
-      }
-      /**
-       * @internal
-       */
-      bind(source) {
-          const subscriber = this.cache.get(source)
-              || new ThemeStyleSheetBehaviorSubscription(this.theme, this.styles, source);
-          // Currently subscriber from cache may have gone through unbind
-          // but still be in cache so always resubscribe
-          // See: https://github.com/microsoft/fast/issues/3246#issuecomment-1030424876
-          theme.subscribe(subscriber, source);
-          subscriber.handleChange();
-          this.cache.set(source, subscriber);
-      }
-      /**
-       * @internal
-       */
-      unbind(source) {
-          const subscriber = this.cache.get(source);
-          if (subscriber) {
-              theme.unsubscribe(subscriber);
-          }
-          // Currently does not evict subscriber from cache
-          // See: https://github.com/microsoft/fast/issues/3246#issuecomment-1030424876
-      }
-  }
-  /**
-   * Behavior to conditionally apply theme-based stylesheets. To determine which to apply,
-   * the behavior will use the nearest ThemeProvider's 'theme' design system value.
-   *
-   * @public
-   * @example
-   * ```ts
-   * css`
-   *     // ...
-   * `.withBehaviors(
-   *     themeBehavior(Theme.light, css` ... `),
-   *     // Apply style for both dark and color theme
-   *     themeBehavior([Theme.dark, Theme.color], css` ... `)
-   * )
-   * ```
-   */
-  const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
-  /* eslint-enable max-classes-per-file */
-
-  const styles$U = css `
-    ${display$1('flex')}
-
-    :host {
-        font: ${bodyFont};
-        font-size: 12.8px;
-        align-items: top;
-        overflow: hidden;
-        overflow-wrap: anywhere;
-    }
-
-    :host(:not([open])) {
-        display: none;
-    }
-
-    .container {
-        color: ${bodyFontColor};
-        display: flex;
-        width: 100%;
-    }
-
-    .icon {
-        width: 48px;
-        display: flex;
-        justify-content: center;
-        margin-top: 8px;
-        flex: 0 0 auto;
-        opacity: 0.6;
-    }
-
-    .text {
-        display: inline;
-        margin-top: 7px;
-        margin-bottom: 7px;
-    }
-
-    slot[name='title'] {
-        display: inline;
-        font-weight: bold;
-        padding-right: 8px;
-    }
-
-    :host([title-hidden]) slot[name='title'] {
-        ${accessiblyHidden}
-    }
-
-    .controls {
-        height: ${controlHeight};
-        margin-left: auto;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        align-self: flex-start;
-        margin-top: ${smallPadding};
-        ${controlHeight.cssCustomProperty}: ${controlSlimHeight};
-    }
-
-    slot[name='action'] {
-        display: flex;
-        align-content: center;
-        margin-left: ${standardPadding};
-        white-space: nowrap;
-    }
-
-    slot[name='action']::slotted(nimble-anchor) {
-        font-size: 12.8px;
-    }
-
-    .dismiss {
-        width: 48px;
-        display: flex;
-        justify-content: center;
-    }
-`.withBehaviors(themeBehavior(Theme.light, css `
-            :host {
-                background: ${Black75};
-            }
-
-            :host([severity='error']) {
-                background: ${Fail100LightUi};
-            }
-
-            :host([severity='warning']) {
-                background: ${Warning100LightUi};
-            }
-
-            :host([severity='information']) {
-                background: ${Information100LightUi};
-            }
-        `), themeBehavior(Theme.dark, css `
-            :host {
-                background: ${Black75};
-            }
-
-            :host([severity='error']) {
-                background: ${BannerFail100DarkUi};
-            }
-
-            :host([severity='warning']) {
-                background: ${Warning100DarkUi};
-            }
-
-            :host([severity='information']) {
-                background: ${Information100DarkUi};
-            }
-        `), themeBehavior(Theme.color, css `
-            :host {
-                background: ${applicationBackgroundColor};
-            }
-
-            .container {
-                background: ${hexToRgbaCssColor(White, 0.3)};
-            }
-        `));
-
-  const styles$T = css `
-    ${styles$$}
-    ${buttonAppearanceVariantStyles}
-`;
-
-  const template$G = (context, definition) => html `
-    <button
-        class="control"
-        part="control"
-        ?autofocus="${x => x.autofocus}"
-        ?disabled="${x => x.disabled}"
-        form="${x => x.formId}"
-        formaction="${x => x.formaction}"
-        formenctype="${x => x.formenctype}"
-        formmethod="${x => x.formmethod}"
-        formnovalidate="${x => x.formnovalidate}"
-        formtarget="${x => x.formtarget}"
-        name="${x => x.name}"
-        type="${x => x.type}"
-        value="${x => x.value}"
-        tabindex="${x => x.tabIndex}"
-        aria-atomic="${x => x.ariaAtomic}"
-        aria-busy="${x => x.ariaBusy}"
-        aria-controls="${x => x.ariaControls}"
-        aria-current="${x => x.ariaCurrent}"
-        aria-describedby="${x => x.ariaDescribedby}"
-        aria-details="${x => x.ariaDetails}"
-        aria-disabled="${x => x.ariaDisabled}"
-        aria-errormessage="${x => x.ariaErrormessage}"
-        aria-expanded="${x => x.ariaExpanded}"
-        aria-flowto="${x => x.ariaFlowto}"
-        aria-haspopup="${x => x.ariaHaspopup}"
-        aria-hidden="${x => x.ariaHidden}"
-        aria-invalid="${x => x.ariaInvalid}"
-        aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
-        aria-label="${x => x.ariaLabel}"
-        aria-labelledby="${x => x.ariaLabelledby}"
-        aria-live="${x => x.ariaLive}"
-        aria-owns="${x => x.ariaOwns}"
-        aria-pressed="${x => x.ariaPressed}"
-        aria-relevant="${x => x.ariaRelevant}"
-        aria-roledescription="${x => x.ariaRoledescription}"
-        ${ref('control')}
-    >
-        ${startSlotTemplate(context, definition)}
-        <span class="content" part="content">
-            <slot ${slotted('defaultSlottedContent')}></slot>
-        </span>
-        ${endSlotTemplate(context, definition)}
-    </button>
-`;
-
-  /**
-   * A nimble-styled HTML button
-   */
-  class Button extends Button$1 {
-      constructor() {
-          super(...arguments);
-          /**
-           * @public
-           * @remarks
-           * HTML Attribute: appearance
-           */
-          this.appearance = ButtonAppearance.outline;
-          /**
-           * @public
-           * @remarks
-           * HTML Attribute: content-hidden
-           */
-          this.contentHidden = false;
-      }
-  }
-  __decorate$1([
-      attr
-  ], Button.prototype, "appearance", void 0);
+      attr
+  ], Button.prototype, "appearance", void 0);
   __decorate$1([
       attr({ attribute: 'appearance-variant' })
   ], Button.prototype, "appearanceVariant", void 0);
@@ -18705,8 +17987,8 @@
   const nimbleButton = Button.compose({
       baseName: 'button',
       baseClass: Button$1,
-      template: template$G,
-      styles: styles$T,
+      template: template$I,
+      styles: styles$W,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -19512,71 +18794,959 @@
       data: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8.033 14.026 4.9 10.866 6.277 9.53l1.744 1.81 4.562-4.507 1.307 1.363Zm1.155-10.68-1.321-1.32-2.312 2.311-2.311-2.311-1.321 1.32 2.311 2.312L1.923 7.97l1.32 1.32 2.312-2.31 2.312 2.31 1.32-1.32-2.31-2.312Z" class="cls-1"/></svg>`,
   };
 
-  // Avoiding any whitespace in the template because this is an inline element
-  const template$F = html `<div
-    class="icon"
-    aria-hidden="true"
-    :innerHTML=${x => x.icon.data}
-></div>`;
+  // Avoiding any whitespace in the template because this is an inline element
+  const template$H = html `<div
+    class="icon"
+    aria-hidden="true"
+    :innerHTML=${x => x.icon.data}
+></div>`;
+
+  /**
+   * Set user-select: none in a way that works across all supported browsers.
+   * https://developer.mozilla.org/en-US/docs/Web/CSS/user-select#browser_compatibility
+   */
+  const userSelectNone = cssPartial `
+    user-select: none;
+    -webkit-user-select: none;
+`;
+
+  const styles$V = css `
+    ${display$1('inline-flex')}
+
+    :host {
+        align-items: center;
+        ${userSelectNone}
+        width: ${iconSize};
+        height: ${iconSize};
+    }
+
+    .icon {
+        width: 100%;
+        height: 100%;
+    }
+
+    :host([severity='error']) {
+        ${iconColor.cssCustomProperty}: ${failColor};
+    }
+
+    :host([severity='warning']) {
+        ${iconColor.cssCustomProperty}: ${warningColor};
+    }
+
+    :host([severity='success']) {
+        ${iconColor.cssCustomProperty}: ${passColor};
+    }
+
+    :host([severity='information']) {
+        ${iconColor.cssCustomProperty}: ${informationColor};
+    }
+
+    .icon svg {
+        fill: ${iconColor};
+        width: 100%;
+        height: 100%;
+    }
+`;
+
+  /**
+   * The base class for icon components
+   */
+  class Icon extends FoundationElement {
+      constructor(/** @internal */ icon) {
+          super();
+          this.icon = icon;
+      }
+  }
+  __decorate$1([
+      attr
+  ], Icon.prototype, "severity", void 0);
+  const registerIcon = (baseName, iconClass) => {
+      const composedIcon = iconClass.compose({
+          baseName,
+          template: template$H,
+          styles: styles$V
+      });
+      DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
+  };
+
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'arrowExpanderLeft' icon
+   */
+  class IconArrowExpanderLeft extends Icon {
+      constructor() {
+          super(arrowExpanderLeft16X16);
+      }
+  }
+  registerIcon('icon-arrow-expander-left', IconArrowExpanderLeft);
+  const iconArrowExpanderLeftTag = 'nimble-icon-arrow-expander-left';
+
+  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
+  // See generation source in nimble-components/build/generate-icons
+  /**
+   * The icon component for the 'arrowExpanderRight' icon
+   */
+  class IconArrowExpanderRight extends Icon {
+      constructor() {
+          super(arrowExpanderRight16X16);
+      }
+  }
+  registerIcon('icon-arrow-expander-right', IconArrowExpanderRight);
+  const iconArrowExpanderRightTag = 'nimble-icon-arrow-expander-right';
+
+  const coreLabelDefaults = {
+      popupDismissLabel: 'Close',
+      numericIncrementLabel: 'Increment',
+      numericDecrementLabel: 'Decrement',
+      popupIconErrorLabel: 'Error',
+      popupIconWarningLabel: 'Warning',
+      popupIconInformationLabel: 'Information',
+      filterSearchLabel: 'Search',
+      filterNoResultsLabel: 'No items found',
+      loadingLabel: 'Loading…',
+      scrollBackwardLabel: 'Scroll backward',
+      scrollForwardLabel: 'Scroll forward'
+  };
+
+  const popupDismissLabel = DesignToken.create({
+      name: 'popup-dismiss-label',
+      cssCustomPropertyName: null
+  }).withDefault(coreLabelDefaults.popupDismissLabel);
+  const numericDecrementLabel = DesignToken.create({
+      name: 'numeric-decrement-label',
+      cssCustomPropertyName: null
+  }).withDefault(coreLabelDefaults.numericDecrementLabel);
+  const numericIncrementLabel = DesignToken.create({
+      name: 'numeric-increment-label',
+      cssCustomPropertyName: null
+  }).withDefault(coreLabelDefaults.numericIncrementLabel);
+  const popupIconErrorLabel = DesignToken.create({
+      name: 'popup-icon-error-label',
+      cssCustomPropertyName: null
+  }).withDefault(coreLabelDefaults.popupIconErrorLabel);
+  const popupIconWarningLabel = DesignToken.create({
+      name: 'popup-icon-warning-label',
+      cssCustomPropertyName: null
+  }).withDefault(coreLabelDefaults.popupIconWarningLabel);
+  const popupIconInformationLabel = DesignToken.create({
+      name: 'popup-icon-information-label',
+      cssCustomPropertyName: null
+  }).withDefault(coreLabelDefaults.popupIconInformationLabel);
+  const filterSearchLabel = DesignToken.create({
+      name: 'filter-search-label',
+      cssCustomPropertyName: null
+  }).withDefault(coreLabelDefaults.filterSearchLabel);
+  const filterNoResultsLabel = DesignToken.create({
+      name: 'filter-no-results-label',
+      cssCustomPropertyName: null
+  }).withDefault(coreLabelDefaults.filterNoResultsLabel);
+  const loadingLabel = DesignToken.create({
+      name: 'loading-label',
+      cssCustomPropertyName: null
+  }).withDefault(coreLabelDefaults.loadingLabel);
+  const scrollBackwardLabel = DesignToken.create({
+      name: 'scroll-backward-label',
+      cssCustomPropertyName: null
+  }).withDefault(coreLabelDefaults.scrollBackwardLabel);
+  const scrollForwardLabel = DesignToken.create({
+      name: 'scroll-forward-label',
+      cssCustomPropertyName: null
+  }).withDefault(coreLabelDefaults.scrollForwardLabel);
+
+  // prettier-ignore
+  const template$G = (context, definition) => html `
+    <div
+        class="tab-bar"
+    >
+        ${startSlotTemplate(context, definition)}
+        ${when(x => x.showScrollButtons, html `
+            <${buttonTag} 
+                content-hidden
+                class="scroll-button left"
+                appearance="${ButtonAppearance.ghost}"
+                tabindex="-1"
+                @click="${x => x.onScrollLeftClick()}"
+                ${ref('leftScrollButton')}
+            >
+                ${x => scrollForwardLabel.getValueFor(x)}
+                <${iconArrowExpanderLeftTag} slot="start"></${iconArrowExpanderLeftTag}>
+            </${buttonTag}>
+        `)}
+        <div
+            class="tablist"
+            part="tablist"
+            role="tablist"
+            ${ref('tablist')}
+        >
+            <slot class="tab" name="${x => x.tabSlotName}" part="tab" ${slotted('tabs')}>
+            </slot>
+        </div>
+        ${when(x => x.showScrollButtons, html `
+            <${buttonTag}
+                content-hidden
+                class="scroll-button right"
+                appearance="${ButtonAppearance.ghost}"
+                tabindex="-1"
+                @click="${x => x.onScrollRightClick()}"
+            >
+                ${x => scrollBackwardLabel.getValueFor(x)}
+                <${iconArrowExpanderRightTag} slot="start"></${iconArrowExpanderRightTag}>
+            </${buttonTag}>
+        `)}
+        ${endSlotTemplate(context, definition)}
+    </div>
+    ${when(x => 'tabpanels' in x, html `
+        <div class="tabpanel" part="tabpanel">
+            <slot name="tabpanel" ${slotted('tabpanels')}></slot>
+        </div>
+    `)}
+`;
+
+  /**
+   * A nimble-styled set of anchor tabs
+   */
+  class AnchorTabs extends FoundationElement {
+      constructor() {
+          super();
+          /**
+           * @internal
+           */
+          this.showScrollButtons = false;
+          /**
+           * @internal
+           */
+          this.tabSlotName = 'anchortab';
+          this.tabIds = [];
+          this.isDisabledElement = (el) => {
+              return el.getAttribute('aria-disabled') === 'true';
+          };
+          this.isHiddenElement = (el) => {
+              return el.hasAttribute('hidden');
+          };
+          this.isFocusableElement = (el) => {
+              return !this.isDisabledElement(el) && !this.isHiddenElement(el);
+          };
+          this.setTabs = () => {
+              const gridHorizontalProperty = 'gridColumn';
+              const gridVerticalProperty = 'gridRow';
+              this.activetab = undefined;
+              let firstFocusableTab;
+              this.tabs.forEach((tab, index) => {
+                  const tabId = this.tabIds[index];
+                  const isActiveTab = this.activeid === tabId;
+                  if (!firstFocusableTab && this.isFocusableElement(tab)) {
+                      firstFocusableTab = tab;
+                  }
+                  const isTabStop = this.activeid === tabId && this.isFocusableElement(tab);
+                  tab.setAttribute('id', tabId);
+                  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);
+                  tab.addEventListener('keydown', this.handleTabKeyDown);
+                  tab.setAttribute('tabindex', isTabStop ? '0' : '-1');
+                  if (isActiveTab) {
+                      this.activetab = tab;
+                  }
+                  tab.style[gridVerticalProperty] = '';
+                  tab.style[gridHorizontalProperty] = `${index + 1}`;
+              });
+              if (firstFocusableTab
+                  && (!this.activetab || !this.isFocusableElement(this.activetab))) {
+                  firstFocusableTab.setAttribute('tabindex', '0');
+              }
+          };
+          this.handleTabClick = (event) => {
+              const selectedTab = event.currentTarget;
+              if (selectedTab.nodeType === 1
+                  && this.isFocusableElement(selectedTab)) {
+                  this.tabs.forEach((tab) => {
+                      tab.setAttribute('tabindex', tab === selectedTab ? '0' : '-1');
+                  });
+              }
+          };
+          this.handleTabKeyDown = (event) => {
+              let anchor;
+              switch (event.key) {
+                  case keyArrowLeft:
+                      event.preventDefault();
+                      this.adjustBackward();
+                      break;
+                  case keyArrowRight:
+                      event.preventDefault();
+                      this.adjustForward();
+                      break;
+                  case keyHome:
+                      event.preventDefault();
+                      this.focusFirstOrLast(false);
+                      break;
+                  case keyEnd:
+                      event.preventDefault();
+                      this.focusFirstOrLast(true);
+                      break;
+                  case keySpace:
+                  case keyEnter:
+                      event.preventDefault();
+                      this.getTabAnchor(event.target).click();
+                      break;
+                  case 'ContextMenu':
+                      event.preventDefault();
+                      anchor = this.getTabAnchor(event.target);
+                      anchor.focus();
+                      anchor.dispatchEvent(new KeyboardEvent('keydown', {
+                          key: event.key,
+                          bubbles: false
+                      }));
+                      break;
+                  // do nothing
+              }
+          };
+          this.adjustForward = () => {
+              const group = this.tabs;
+              let index = 0;
+              const focusedTab = group.find(x => x === document.activeElement);
+              index = focusedTab ? group.indexOf(focusedTab) + 1 : 1;
+              if (index === group.length) {
+                  index = 0;
+              }
+              while (index < group.length && group.length > 1) {
+                  if (this.isFocusableElement(group[index])) {
+                      this.focusTabByIndex(group, index);
+                      break;
+                  }
+                  else if (focusedTab && index === group.indexOf(focusedTab)) {
+                      break;
+                  }
+                  else if (index + 1 >= group.length) {
+                      index = 0;
+                  }
+                  else {
+                      index += 1;
+                  }
+              }
+          };
+          this.adjustBackward = () => {
+              const group = this.tabs;
+              let index = 0;
+              const focusedTab = group.find(x => x === document.activeElement);
+              index = focusedTab ? group.indexOf(focusedTab) - 1 : 0;
+              index = index < 0 ? group.length - 1 : index;
+              while (index >= 0 && group.length > 1) {
+                  if (this.isFocusableElement(group[index])) {
+                      this.focusTabByIndex(group, index);
+                      break;
+                  }
+                  else if (index - 1 < 0) {
+                      index = group.length - 1;
+                  }
+                  else {
+                      index -= 1;
+                  }
+              }
+          };
+          this.focusTabByIndex = (group, index) => {
+              const focusedTab = group[index];
+              focusedTab.focus();
+              this.tabs.forEach((tab) => {
+                  tab.setAttribute('tabindex', tab === focusedTab ? '0' : '-1');
+                  tab.setAttribute('aria-selected', tab === focusedTab ? 'true' : 'false');
+              });
+              focusedTab.scrollIntoView({ block: 'nearest', inline: 'start' });
+          };
+          this.tabListResizeObserver = new ResizeObserver(entries => {
+              let tabListVisibleWidth = entries[0]?.contentRect.width;
+              if (tabListVisibleWidth !== undefined) {
+                  const buttonWidth = this.leftScrollButton?.clientWidth ?? 0;
+                  tabListVisibleWidth = Math.ceil(tabListVisibleWidth);
+                  if (this.showScrollButtons) {
+                      tabListVisibleWidth += buttonWidth * 2;
+                  }
+                  this.showScrollButtons = tabListVisibleWidth < this.tablist.scrollWidth;
+              }
+          });
+      }
+      /**
+       * @internal
+       */
+      activeidChanged(_oldValue, _newValue) {
+          if (this.$fastController.isConnected) {
+              this.setTabs();
+              this.activetab?.scrollIntoView({
+                  block: 'nearest',
+                  inline: 'start'
+              });
+          }
+      }
+      /**
+       * @internal
+       */
+      tabsChanged() {
+          if (this.$fastController.isConnected) {
+              this.tabIds = this.getTabIds();
+              this.setTabs();
+          }
+      }
+      /**
+       * @internal
+       */
+      onScrollLeftClick() {
+          this.tablist.scrollBy({
+              left: -this.tablist.clientWidth,
+              behavior: 'smooth'
+          });
+      }
+      /**
+       * @internal
+       */
+      onScrollRightClick() {
+          this.tablist.scrollBy({
+              left: this.tablist.clientWidth,
+              behavior: 'smooth'
+          });
+      }
+      /**
+       * @internal
+       */
+      connectedCallback() {
+          super.connectedCallback();
+          this.tabListResizeObserver.observe(this.tablist);
+          this.tabIds = this.getTabIds();
+      }
+      /**
+       * @internal
+       */
+      disconnectedCallback() {
+          super.disconnectedCallback();
+          this.tabListResizeObserver.disconnect();
+      }
+      getTabIds() {
+          return this.tabs.map((tab) => {
+              return tab.getAttribute('id') ?? `tab-${uniqueId()}`;
+          });
+      }
+      focusFirstOrLast(focusLast) {
+          const focusableTabs = this.tabs.filter(t => this.isFocusableElement(t));
+          const focusableIndex = focusLast ? focusableTabs.length - 1 : 0;
+          const index = this.tabs.indexOf(focusableTabs[focusableIndex]);
+          if (index > -1) {
+              this.focusTabByIndex(this.tabs, index);
+          }
+      }
+      getTabAnchor(tab) {
+          return tab.shadowRoot.querySelector('a');
+      }
+  }
+  __decorate$1([
+      attr
+  ], AnchorTabs.prototype, "activeid", void 0);
+  __decorate$1([
+      observable
+  ], AnchorTabs.prototype, "tabs", void 0);
+  __decorate$1([
+      observable
+  ], AnchorTabs.prototype, "showScrollButtons", void 0);
+  applyMixins(AnchorTabs, StartEnd);
+  const nimbleAnchorTabs = AnchorTabs.compose({
+      baseName: 'anchor-tabs',
+      template: template$G,
+      styles: styles$X,
+      shadowOptions: {
+          delegatesFocus: false
+      }
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());
+
+  const styles$U = css `
+    ${display$1('block')}
+
+    :host {
+        ${
+/* don't set font-size here or else it overrides what we set on .items */ ''}
+        font-family: ${bodyFontFamily};
+        font-weight: ${bodyFontWeight};
+        contain: content;
+        position: relative;
+        outline: none;
+        color: ${bodyFontColor};
+        cursor: pointer;
+        --ni-private-tree-item-nested-width: 0;
+    }
+
+    :host([disabled]) {
+        color: ${bodyDisabledFontColor};
+        cursor: default;
+    }
+
+    .control {
+        display: flex;
+        text-decoration: none;
+        color: inherit;
+    }
+
+    .control${focusVisible} {
+        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+        outline: ${borderWidth} solid ${borderHoverColor};
+        outline-offset: -2px;
+    }
+
+    .positioning-region {
+        display: flex;
+        position: relative;
+        height: calc(${iconSize} * 2);
+        width: 100%;
+    }
+
+    .positioning-region:hover {
+        background: ${fillHoverColor};
+    }
+
+    :host([disabled]) .positioning-region:hover {
+        background: transparent;
+    }
+
+    :host([selected]) .positioning-region {
+        background: ${fillSelectedColor};
+    }
+
+    :host([selected]) .positioning-region:hover {
+        background: ${fillHoverSelectedColor};
+    }
+
+    .positioning-region::before {
+        content: '';
+        display: block;
+        width: var(--ni-private-tree-item-nested-width);
+        flex-shrink: 0;
+    }
+
+    .content-region {
+        display: inline-flex;
+        align-items: center;
+        white-space: nowrap;
+        width: 100%;
+        padding-left: 10px;
+        font: inherit;
+        font-size: ${bodyFontSize};
+        ${userSelectNone}
+        position: relative;
+        margin-inline-start: ${iconSize};
+    }
+
+    ${
+/* this rule keeps children without an icon text aligned with parents */ ''}
+    [part="start"] {
+        width: ${iconSize};
+        pointer-events: none;
+    }
+
+    ${ /* the start class is applied when the corresponding slot is filled */''}
+    .start {
+        display: flex;
+        margin-inline-start: ${iconSize};
+        margin-inline-end: ${iconSize};
+    }
+
+    slot[name='start']::slotted(*) {
+        ${iconColor.cssCustomProperty}: currentcolor;
+        width: ${iconSize};
+        height: ${iconSize};
+    }
+
+    .content {
+        pointer-events: none;
+    }
+
+    [part='end'] {
+        display: none;
+    }
+`;
+
+  const template$F = (context, definition) => html `
+    <template
+        role="treeitem"
+        slot="${x => (x.isNestedItem() ? 'item' : null)}"
+        tabindex="-1"
+        aria-disabled="${x => x.disabled}"
+        aria-selected="${x => x.selected}"
+        @focusin="${(x, c) => x.handleFocus(c.event)}"
+        @focusout="${(x, c) => x.handleBlur(c.event)}"
+        @keydown="${(x, c) => x.keydownHandler(c.event)}"
+        @click="${(x, c) => x.clickHandler(c.event)}"
+    >
+        <a
+            class="control"
+            part="control"
+            tabindex="0"
+            download="${x => x.download}"
+            href=${x => (x.disabled ? null : x.href)}
+            hreflang="${x => x.hreflang}"
+            ping="${x => x.ping}"
+            referrerpolicy="${x => x.referrerpolicy}"
+            rel="${x => x.rel}"
+            target="${x => x.target}"
+            type="${x => x.type}"
+            ${ref('control')}
+        >
+            <div class="positioning-region" part="positioning-region">
+                <div class="content-region" part="content-region">
+                    ${startSlotTemplate(context, definition)}
+                    <span class="content" part="content">
+                        <slot></slot>
+                    </span>
+                    ${endSlotTemplate(context, definition)}
+                </div>
+            </div>
+        </a>
+    </template>
+`;
+
+  /**
+   * A nimble-styled anchor tree item
+   */
+  class AnchorTreeItem extends AnchorBase {
+      constructor() {
+          super(...arguments);
+          /**
+           * When true, the control will appear selected by user interaction.
+           * @public
+           * @remarks
+           * HTML Attribute: selected
+           */
+          this.selected = false;
+          /**
+           * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute} for more information.
+           * @public
+           * @remarks
+           * HTML Attribute: disabled
+           */
+          this.disabled = false;
+      }
+      /**
+       * Whether the tree is nested
+       *
+       * @public
+       */
+      isNestedItem() {
+          return isTreeItemElement(this.parentElement);
+      }
+      /**
+       * Handle focus events
+       *
+       * @internal
+       */
+      handleFocus(_e) {
+          this.setAttribute('tabindex', '0');
+      }
+      /**
+       * Handle blur events
+       *
+       * @internal
+       */
+      handleBlur(_e) {
+          this.setAttribute('tabindex', '-1');
+      }
+      /**
+       * @internal
+       */
+      keydownHandler(e) {
+          if (e.defaultPrevented) {
+              return false;
+          }
+          switch (e.key) {
+              case keyEnter:
+                  // Do not let the event bubble up to the FAST tree, or it will
+                  // prevent the default action.
+                  e.stopPropagation();
+                  break;
+              case keyArrowLeft:
+                  // For FAST tree items, the FAST tree view handles this navigation,
+                  // but since our anchor tree item is not "instanceof FASTTreeItem",
+                  // the FAST tree view won't do this for us. We do it ourselves.
+                  if (this.parentElement && this.isNestedItem()) {
+                      TreeItem$1.focusItem(this.parentElement);
+                  }
+                  break;
+          }
+          return true;
+      }
+      /**
+       * Activating the anchor by pressing the Enter key results in a click event.
+       * This bubbles up to the Nimble tree-view's click handler, causing the tree item
+       * to be selected. We don't want that for anchor tree items. We'll stop propagation
+       * of the event to prevent that.
+       * @internal
+       */
+      clickHandler(e) {
+          if (e.defaultPrevented) {
+              return false;
+          }
+          e.stopPropagation();
+          return true;
+      }
+      selectedChanged(_prev, _next) {
+          if (this.$fastController.isConnected) {
+              this.$emit('selected-change', this);
+          }
+      }
+  }
+  __decorate$1([
+      attr({ mode: 'boolean' })
+  ], AnchorTreeItem.prototype, "selected", void 0);
+  __decorate$1([
+      attr({ mode: 'boolean' })
+  ], AnchorTreeItem.prototype, "disabled", void 0);
+  // FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
+  const nimbleAnchorTreeItem = AnchorTreeItem.compose({
+      baseName: 'anchor-tree-item',
+      template: template$F,
+      styles: styles$U,
+      shadowOptions: {
+          delegatesFocus: true
+      }
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('nimble')
+      .register(nimbleAnchorTreeItem());
+
+  const ZIndexLevels = {
+      zIndex1: '1',
+      // Original usages of 1000 were to compete with jqx grid usage of z-index 200 for table headers
+      // See: https://github.com/ni/nimble/pull/530#discussion_r863076750
+      zIndex1000: '1000'
+  };
+
+  const styles$T = css `
+    ${display$1('block')}
+
+    :host {
+        contain: layout;
+        z-index: ${ZIndexLevels.zIndex1000};
+    }
+
+    ${'' /* Override 'display' helper hidden behavior */}
+    :host([hidden]) {
+        display: block;
+        visibility: hidden;
+    }
+`;
+
+  // When the anchor element changes position on the page, it is the client's responsibility to update the position
+  // of the anchored region by calling update() on the anchored region.
+  //
+  // When the anchor element is recreated on the page, it is the client's responsibility to reset the reference the
+  // anchored region has to the anchor element. This can be done by either recreating the anchor element with a new
+  // ID that is also set as the \`anchor\` attribute on the anchored region or by explicitly setting the value of
+  // anchorElement on the anchored region to the new anchor element.
+  /**
+   * A nimble-styled anchored region control.
+   */
+  class AnchoredRegion extends AnchoredRegion$1 {
+  }
+  const nimbleAnchoredRegion = AnchoredRegion.compose({
+      baseName: 'anchored-region',
+      baseClass: AnchoredRegion$1,
+      template: anchoredRegionTemplate,
+      styles: styles$T
+  });
+  DesignSystem.getOrCreate()
+      .withPrefix('nimble')
+      .register(nimbleAnchoredRegion());
+  const anchoredRegionTag = 'nimble-anchored-region';
+
+  /**
+   * Subscription for {@link ThemeStyleSheetBehavior}
+   */
+  class ThemeStyleSheetBehaviorSubscription {
+      constructor(value, styles, source) {
+          this.value = value;
+          this.styles = styles;
+          this.source = source;
+      }
+      handleChange() {
+          const theme$1 = theme.getValueFor(this.source);
+          if (Array.isArray(this.value)
+              ? this.value.includes(theme$1)
+              : this.value === theme$1) {
+              this.source.$fastController.addStyles(this.styles);
+          }
+          else {
+              this.source.$fastController.removeStyles(this.styles);
+          }
+      }
+  }
+  /**
+   * Behavior to conditionally apply theme-based stylesheets.
+   */
+  class ThemeStyleSheetBehavior {
+      constructor(theme, styles) {
+          this.theme = theme;
+          this.styles = styles;
+          this.cache = new WeakMap();
+      }
+      /**
+       * @internal
+       */
+      bind(source) {
+          const subscriber = this.cache.get(source)
+              || new ThemeStyleSheetBehaviorSubscription(this.theme, this.styles, source);
+          // Currently subscriber from cache may have gone through unbind
+          // but still be in cache so always resubscribe
+          // See: https://github.com/microsoft/fast/issues/3246#issuecomment-1030424876
+          theme.subscribe(subscriber, source);
+          subscriber.handleChange();
+          this.cache.set(source, subscriber);
+      }
+      /**
+       * @internal
+       */
+      unbind(source) {
+          const subscriber = this.cache.get(source);
+          if (subscriber) {
+              theme.unsubscribe(subscriber);
+          }
+          // Currently does not evict subscriber from cache
+          // See: https://github.com/microsoft/fast/issues/3246#issuecomment-1030424876
+      }
+  }
+  /**
+   * Behavior to conditionally apply theme-based stylesheets. To determine which to apply,
+   * the behavior will use the nearest ThemeProvider's 'theme' design system value.
+   *
+   * @public
+   * @example
+   * ```ts
+   * css`
+   *     // ...
+   * `.withBehaviors(
+   *     themeBehavior(Theme.light, css` ... `),
+   *     // Apply style for both dark and color theme
+   *     themeBehavior([Theme.dark, Theme.color], css` ... `)
+   * )
+   * ```
+   */
+  const themeBehavior = (theme, styles) => new ThemeStyleSheetBehavior(theme, styles);
+  /* eslint-enable max-classes-per-file */
 
   const styles$S = css `
-    ${display$1('inline-flex')}
+    ${display$1('flex')}
 
     :host {
-        align-items: center;
-        ${userSelectNone}
-        width: ${iconSize};
-        height: ${iconSize};
+        font: ${bodyFont};
+        font-size: 12.8px;
+        align-items: top;
+        overflow: hidden;
+        overflow-wrap: anywhere;
     }
 
-    .icon {
+    :host(:not([open])) {
+        display: none;
+    }
+
+    .container {
+        color: ${bodyFontColor};
+        display: flex;
         width: 100%;
-        height: 100%;
     }
 
-    :host([severity='error']) {
-        ${iconColor.cssCustomProperty}: ${failColor};
+    .icon {
+        width: 48px;
+        display: flex;
+        justify-content: center;
+        margin-top: 8px;
+        flex: 0 0 auto;
+        opacity: 0.6;
     }
 
-    :host([severity='warning']) {
-        ${iconColor.cssCustomProperty}: ${warningColor};
+    .text {
+        display: inline;
+        margin-top: 7px;
+        margin-bottom: 7px;
     }
 
-    :host([severity='success']) {
-        ${iconColor.cssCustomProperty}: ${passColor};
+    slot[name='title'] {
+        display: inline;
+        font-weight: bold;
+        padding-right: 8px;
     }
 
-    :host([severity='information']) {
-        ${iconColor.cssCustomProperty}: ${informationColor};
+    :host([title-hidden]) slot[name='title'] {
+        ${accessiblyHidden}
     }
 
-    .icon svg {
-        fill: ${iconColor};
-        width: 100%;
-        height: 100%;
+    .controls {
+        height: ${controlHeight};
+        margin-left: auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        align-self: flex-start;
+        margin-top: ${smallPadding};
+        ${controlHeight.cssCustomProperty}: ${controlSlimHeight};
     }
-`;
 
-  /**
-   * The base class for icon components
-   */
-  class Icon extends FoundationElement {
-      constructor(/** @internal */ icon) {
-          super();
-          this.icon = icon;
-      }
-  }
-  __decorate$1([
-      attr
-  ], Icon.prototype, "severity", void 0);
-  const registerIcon = (baseName, iconClass) => {
-      const composedIcon = iconClass.compose({
-          baseName,
-          template: template$F,
-          styles: styles$S
-      });
-      DesignSystem.getOrCreate().withPrefix('nimble').register(composedIcon());
-  };
+    slot[name='action'] {
+        display: flex;
+        align-content: center;
+        margin-left: ${standardPadding};
+        white-space: nowrap;
+    }
+
+    slot[name='action']::slotted(nimble-anchor) {
+        font-size: 12.8px;
+    }
+
+    .dismiss {
+        width: 48px;
+        display: flex;
+        justify-content: center;
+    }
+`.withBehaviors(themeBehavior(Theme.light, css `
+            :host {
+                background: ${Black75};
+            }
+
+            :host([severity='error']) {
+                background: ${Fail100LightUi};
+            }
+
+            :host([severity='warning']) {
+                background: ${Warning100LightUi};
+            }
+
+            :host([severity='information']) {
+                background: ${Information100LightUi};
+            }
+        `), themeBehavior(Theme.dark, css `
+            :host {
+                background: ${Black75};
+            }
+
+            :host([severity='error']) {
+                background: ${BannerFail100DarkUi};
+            }
+
+            :host([severity='warning']) {
+                background: ${Warning100DarkUi};
+            }
+
+            :host([severity='information']) {
+                background: ${Information100DarkUi};
+            }
+        `), themeBehavior(Theme.color, css `
+            :host {
+                background: ${applicationBackgroundColor};
+            }
+
+            .container {
+                background: ${hexToRgbaCssColor(White, 0.3)};
+            }
+        `));
 
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
@@ -19641,55 +19811,6 @@
       information: 'information'
   };
 
-  const coreLabelDefaults = {
-      popupDismissLabel: 'Close',
-      numericIncrementLabel: 'Increment',
-      numericDecrementLabel: 'Decrement',
-      popupIconErrorLabel: 'Error',
-      popupIconWarningLabel: 'Warning',
-      popupIconInformationLabel: 'Information',
-      filterSearchLabel: 'Search',
-      filterNoResultsLabel: 'No items found',
-      loadingLabel: 'Loading…'
-  };
-
-  const popupDismissLabel = DesignToken.create({
-      name: 'popup-dismiss-label',
-      cssCustomPropertyName: null
-  }).withDefault(coreLabelDefaults.popupDismissLabel);
-  const numericDecrementLabel = DesignToken.create({
-      name: 'numeric-decrement-label',
-      cssCustomPropertyName: null
-  }).withDefault(coreLabelDefaults.numericDecrementLabel);
-  const numericIncrementLabel = DesignToken.create({
-      name: 'numeric-increment-label',
-      cssCustomPropertyName: null
-  }).withDefault(coreLabelDefaults.numericIncrementLabel);
-  const popupIconErrorLabel = DesignToken.create({
-      name: 'popup-icon-error-label',
-      cssCustomPropertyName: null
-  }).withDefault(coreLabelDefaults.popupIconErrorLabel);
-  const popupIconWarningLabel = DesignToken.create({
-      name: 'popup-icon-warning-label',
-      cssCustomPropertyName: null
-  }).withDefault(coreLabelDefaults.popupIconWarningLabel);
-  const popupIconInformationLabel = DesignToken.create({
-      name: 'popup-icon-information-label',
-      cssCustomPropertyName: null
-  }).withDefault(coreLabelDefaults.popupIconInformationLabel);
-  const filterSearchLabel = DesignToken.create({
-      name: 'filter-search-label',
-      cssCustomPropertyName: null
-  }).withDefault(coreLabelDefaults.filterSearchLabel);
-  const filterNoResultsLabel = DesignToken.create({
-      name: 'filter-no-results-label',
-      cssCustomPropertyName: null
-  }).withDefault(coreLabelDefaults.filterNoResultsLabel);
-  const loadingLabel = DesignToken.create({
-      name: 'loading-label',
-      cssCustomPropertyName: null
-  }).withDefault(coreLabelDefaults.loadingLabel);
-
   // prettier-ignore
   const template$E = html `
     <${themeProviderTag} theme="${Theme.color}">
@@ -19810,7 +19931,7 @@
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
       template: template$E,
-      styles: styles$U
+      styles: styles$S
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
 
@@ -22363,31 +22484,6 @@ so this becomes the fallback color for the slot */ ''}
   }
   registerIcon('icon-arrow-down-right-and-arrow-up-left', IconArrowDownRightAndArrowUpLeft);
 
-  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
-  // See generation source in nimble-components/build/generate-icons
-  /**
-   * The icon component for the 'arrowExpanderLeft' icon
-   */
-  class IconArrowExpanderLeft extends Icon {
-      constructor() {
-          super(arrowExpanderLeft16X16);
-      }
-  }
-  registerIcon('icon-arrow-expander-left', IconArrowExpanderLeft);
-
-  // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
-  // See generation source in nimble-components/build/generate-icons
-  /**
-   * The icon component for the 'arrowExpanderRight' icon
-   */
-  class IconArrowExpanderRight extends Icon {
-      constructor() {
-          super(arrowExpanderRight16X16);
-      }
-  }
-  registerIcon('icon-arrow-expander-right', IconArrowExpanderRight);
-  const iconArrowExpanderRightTag = 'nimble-icon-arrow-expander-right';
-
   // AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
   // See generation source in nimble-components/build/generate-icons
   /**
@@ -24708,7 +24804,9 @@ so this becomes the fallback color for the slot */ ''}
       popupIconInformation: popupIconInformationLabel,
       filterSearch: filterSearchLabel,
       filterNoResults: filterNoResultsLabel,
-      loading: loadingLabel
+      loading: loadingLabel,
+      scrollBackward: scrollBackwardLabel,
+      scrollForward: scrollForwardLabel
   };
   /**
    * Core label provider for Nimble
@@ -24746,6 +24844,12 @@ so this becomes the fallback color for the slot */ ''}
   __decorate$1([
       attr({ attribute: 'loading' })
   ], LabelProviderCore.prototype, "loading", void 0);
+  __decorate$1([
+      attr({ attribute: 'scroll-backward' })
+  ], LabelProviderCore.prototype, "scrollBackward", void 0);
+  __decorate$1([
+      attr({ attribute: 'scroll-forward' })
+  ], LabelProviderCore.prototype, "scrollForward", void 0);
   const nimbleLabelProviderCore = LabelProviderCore.compose({
       baseName: 'label-provider-core',
       styles: styles$G
@@ -61936,6 +62040,7 @@ img.ProseMirror-separator {
         align-items: center;
         justify-content: center;
         cursor: pointer;
+        text-wrap: nowrap;
         --ni-private-active-indicator-width: 2px;
         --ni-private-focus-indicator-width: 1px;
         --ni-private-indicator-lines-gap: 1px;
@@ -73794,29 +73899,9 @@ focus outline in that case.
       .register(nimbleTableColumnText());
 
   const styles$9 = css `
-    ${display$1('grid')}
-
-    :host {
-        grid-template-columns: auto 1fr;
-        grid-template-rows: auto 1fr;
-    }
-
-    [part='start'] {
-        display: none;
-    }
-
-    .tablist {
-        display: grid;
-        grid-template-rows: auto auto;
-        grid-template-columns: auto;
-        width: max-content;
-        align-self: end;
-    }
+    ${styles$X}
 
     .tabpanel {
-        grid-row: 2;
-        grid-column-start: 1;
-        grid-column-end: 4;
         overflow: auto;
     }
 `;
@@ -73827,14 +73912,75 @@ focus outline in that case.
   class Tabs extends Tabs$1 {
       constructor() {
           super();
+          /**
+           * @internal
+           */
+          this.showScrollButtons = false;
+          /**
+           * @internal
+           */
+          this.tabSlotName = 'tab';
           // We disable the built-in active indicator so that we can implement our own
           this.activeindicator = false;
+          this.tabListResizeObserver = new ResizeObserver(entries => {
+              let tabListVisibleWidth = entries[0]?.contentRect.width;
+              if (tabListVisibleWidth !== undefined) {
+                  const buttonWidth = this.leftScrollButton?.clientWidth ?? 0;
+                  tabListVisibleWidth = Math.ceil(tabListVisibleWidth);
+                  if (this.showScrollButtons) {
+                      tabListVisibleWidth += buttonWidth * 2;
+                  }
+                  this.showScrollButtons = tabListVisibleWidth < this.tablist.scrollWidth;
+              }
+          });
+      }
+      /**
+       * @internal
+       */
+      connectedCallback() {
+          super.connectedCallback();
+          this.tabListResizeObserver.observe(this.tablist);
+      }
+      /**
+       * @internal
+       */
+      disconnectedCallback() {
+          super.disconnectedCallback();
+          this.tabListResizeObserver.disconnect();
+      }
+      /**
+       * @internal
+       */
+      activeidChanged(oldValue, newValue) {
+          super.activeidChanged(oldValue, newValue);
+          this.activetab?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+      }
+      /**
+       * @internal
+       */
+      onScrollLeftClick() {
+          this.tablist.scrollBy({
+              left: -this.tablist.clientWidth,
+              behavior: 'smooth'
+          });
+      }
+      /**
+       * @internal
+       */
+      onScrollRightClick() {
+          this.tablist.scrollBy({
+              left: this.tablist.clientWidth,
+              behavior: 'smooth'
+          });
       }
   }
+  __decorate$1([
+      observable
+  ], Tabs.prototype, "showScrollButtons", void 0);
   const nimbleTabs = Tabs.compose({
       baseName: 'tabs',
       baseClass: Tabs$1,
-      template: tabsTemplate,
+      template: template$G,
       styles: styles$9
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());