@ni/nimble-components 32.4.0 → 32.5.0

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,112 @@
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
 
   const styles$W = css `
-    ${display('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$H = (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$H,
-      styles: styles$W,
-      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$V = css `
-    ${display('block')}
+    ${display('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;
-    }
+  const styles$V = css `
+    ${styles$_}
+    ${buttonAppearanceVariantStyles}
 `;
 
-  const template$G = (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 template$H = (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$G,
-      styles: styles$V,
-      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$U = css `
-    ${display('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$U
-  });
-  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$T = css `
-    ${display('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$S = css `
-    ${styles$_}
-    ${buttonAppearanceVariantStyles}
-`;
-
-  const template$F = (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 +17983,8 @@
   const nimbleButton = Button.compose({
       baseName: 'button',
       baseClass: Button$1,
-      template: template$F,
-      styles: styles$S,
+      template: template$H,
+      styles: styles$V,
       shadowOptions: {
           delegatesFocus: true
       }
@@ -19512,71 +18790,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$E = 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$G = 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$U = css `
+    ${display('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$G,
+          styles: styles$U
+      });
+      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$F = (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$F,
+      styles: styles$W,
+      shadowOptions: {
+          delegatesFocus: false
+      }
+  });
+  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());
+
+  const styles$T = css `
+    ${display('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$E = (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$E,
+      styles: styles$T,
+      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$S = css `
+    ${display('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$S
+  });
+  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$R = css `
-    ${display('inline-flex')}
+    ${display('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$E,
-          styles: styles$R
-      });
-      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 +19807,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$D = html `
     <${themeProviderTag} theme="${Theme.color}">
@@ -19810,7 +19927,7 @@
   const nimbleBanner = Banner.compose({
       baseName: 'banner',
       template: template$D,
-      styles: styles$T
+      styles: styles$R
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleBanner());
 
@@ -22363,31 +22480,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 +24800,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 +24840,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$F
@@ -28724,7 +28824,7 @@ so this becomes the fallback color for the slot */ ''}
       let result = [];
       for (let typeName in types) {
           let type = types[typeName];
-          if (type.groups.indexOf(name) > -1)
+          if (type.isInGroup(name))
               result.push(type);
       }
       if (result.length == 0)
@@ -29003,6 +29103,13 @@ so this becomes the fallback color for the slot */ ''}
       */
       get isAtom() { return this.isLeaf || !!this.spec.atom; }
       /**
+      Return true when this node type is part of the given
+      [group](https://prosemirror.net/docs/ref/#model.NodeSpec.group).
+      */
+      isInGroup(group) {
+          return this.groups.indexOf(group) > -1;
+      }
+      /**
       The node type's [whitespace](https://prosemirror.net/docs/ref/#model.NodeSpec.whitespace) option.
       */
       get whitespace() {
@@ -29835,6 +29942,7 @@ so this becomes the fallback color for the slot */ ''}
                   contentDOM = rule.contentElement;
               this.findAround(dom, contentDOM, true);
               this.addAll(contentDOM, marks);
+              this.findAround(dom, contentDOM, false);
           }
           if (sync && this.sync(startIn))
               this.open--;
@@ -30013,7 +30121,7 @@ so this becomes the fallback color for the slot */ ''}
                       let next = depth > 0 || (depth == 0 && useRoot) ? this.nodes[depth].type
                           : option && depth >= minDepth ? option.node(depth - minDepth).type
                               : null;
-                      if (!next || (next.name != part && next.groups.indexOf(part) == -1))
+                      if (!next || (next.name != part && !next.isInGroup(part)))
                           return false;
                       depth--;
                   }
@@ -41778,12 +41886,16 @@ so this becomes the fallback color for the slot */ ''}
           return;
       }
       let start = $pos.parent.childAfter($pos.parentOffset);
-      if ($pos.parentOffset === start.offset && start.offset !== 0) {
+      // If the cursor is at the start of a text node that does not have the mark, look backward
+      if (!start.node || !start.node.marks.some(mark => mark.type === type)) {
           start = $pos.parent.childBefore($pos.parentOffset);
       }
-      if (!start.node) {
+      // If there is no text node with the mark even backward, return undefined
+      if (!start.node || !start.node.marks.some(mark => mark.type === type)) {
           return;
       }
+      // We now know that the cursor is either at the start, middle or end of a text node with the specified mark
+      // so we can look it up on the targeted mark
       const mark = findMarkInSet([...start.node.marks], type, attributes);
       if (!mark) {
           return;
@@ -42073,7 +42185,7 @@ so this becomes the fallback color for the slot */ ''}
       var _a;
       if (dispatch) {
           options = {
-              parseOptions: {},
+              parseOptions: editor.options.parseOptions,
               updateSelection: true,
               applyInputRules: false,
               applyPasteRules: false,
@@ -42094,7 +42206,9 @@ so this becomes the fallback color for the slot */ ''}
                   editor,
                   error: e,
                   disableCollaboration: () => {
-                      console.error('[tiptap error]: Unable to disable collaboration at this point in time');
+                      if (editor.storage.collaboration) {
+                          editor.storage.collaboration.isDisabled = true;
+                      }
                   },
               });
               return false;
@@ -43868,7 +43982,8 @@ so this becomes the fallback color for the slot */ ''}
           const children = [];
           this.node.content.forEach((node, offset) => {
               const isBlock = node.isBlock && !node.isTextblock;
-              const targetPos = this.pos + offset + 1;
+              const isNonTextAtom = node.isAtom && !node.isText;
+              const targetPos = this.pos + offset + (isNonTextAtom ? 0 : 1);
               const $pos = this.resolvedPos.doc.resolve(targetPos);
               if (!isBlock && $pos.depth <= this.depth) {
                   return;
@@ -43944,9 +44059,12 @@ so this becomes the fallback color for the slot */ ''}
           return nodes;
       }
       setAttribute(attributes) {
-          const oldSelection = this.editor.state.selection;
-          this.editor.chain().setTextSelection(this.from).updateAttributes(this.node.type.name, attributes).setTextSelection(oldSelection.from)
-              .run();
+          const { tr } = this.editor.state;
+          tr.setNodeMarkup(this.from, undefined, {
+              ...this.node.attrs,
+              ...attributes,
+          });
+          this.editor.view.dispatch(tr);
       }
   }
 
@@ -44198,18 +44316,27 @@ img.ProseMirror-separator {
       /**
        * Unregister a ProseMirror plugin.
        *
-       * @param nameOrPluginKey The plugins name
+       * @param nameOrPluginKeyToRemove The plugins name
        * @returns The new editor state or undefined if the editor is destroyed
        */
-      unregisterPlugin(nameOrPluginKey) {
+      unregisterPlugin(nameOrPluginKeyToRemove) {
           if (this.isDestroyed) {
               return undefined;
           }
-          // @ts-ignore
-          const name = typeof nameOrPluginKey === 'string' ? `${nameOrPluginKey}$` : nameOrPluginKey.key;
-          const state = this.state.reconfigure({
+          const prevPlugins = this.state.plugins;
+          let plugins = prevPlugins;
+          [].concat(nameOrPluginKeyToRemove).forEach(nameOrPluginKey => {
+              // @ts-ignore
+              const name = typeof nameOrPluginKey === 'string' ? `${nameOrPluginKey}$` : nameOrPluginKey.key;
               // @ts-ignore
-              plugins: this.state.plugins.filter(plugin => !plugin.key.startsWith(name)),
+              plugins = prevPlugins.filter(plugin => !plugin.key.startsWith(name));
+          });
+          if (prevPlugins.length === plugins.length) {
+              // No plugin was removed, so we don’t need to update the state
+              return undefined;
+          }
+          const state = this.state.reconfigure({
+              plugins,
           });
           this.view.updateState(state);
           return state;
@@ -44272,6 +44399,9 @@ img.ProseMirror-separator {
                   editor: this,
                   error: e,
                   disableCollaboration: () => {
+                      if (this.storage.collaboration) {
+                          this.storage.collaboration.isDisabled = true;
+                      }
                       // To avoid syncing back invalid content, reinitialize the extensions without the collaboration extension
                       this.options.extensions = this.options.extensions.filter(extension => extension.name !== 'collaboration');
                       // Restart the initialization process by recreating the extension manager with the new set of extensions
@@ -44290,6 +44420,12 @@ img.ProseMirror-separator {
                   selection: selection || undefined,
               }),
           });
+          // add `role="textbox"` to the editor element
+          this.view.dom.setAttribute('role', 'textbox');
+          // add aria-label to the editor element
+          if (!this.view.dom.getAttribute('aria-label')) {
+              this.view.dom.setAttribute('aria-label', 'Rich-Text Editor');
+          }
           // `editor.view` is not yet available at this time.
           // Therefore we will add all plugins and node views directly afterwards.
           const newState = this.state.reconfigure({
@@ -55422,6 +55558,10 @@ img.ProseMirror-separator {
                   tag: 'b',
                   getAttrs: node => node.style.fontWeight !== 'normal' && null,
               },
+              {
+                  style: 'font-weight=400',
+                  clearMark: mark => mark.type.name === this.name,
+              },
               {
                   style: 'font-weight',
                   getAttrs: value => /^(bold(er)?|[5-9]\d{2,})$/.test(value) && null,
@@ -56327,6 +56467,10 @@ img.ProseMirror-separator {
                   tag: 'i',
                   getAttrs: node => node.style.fontStyle !== 'normal' && null,
               },
+              {
+                  style: 'font-style=normal',
+                  clearMark: mark => mark.type.name === this.name,
+              },
               {
                   style: 'font-style=italic',
               },
@@ -58712,6 +58856,7 @@ img.ProseMirror-separator {
    */
   const Mention = Node$1.create({
       name: 'mention',
+      priority: 101,
       addOptions() {
           return {
               HTMLAttributes: {},
@@ -61891,6 +62036,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;
@@ -73749,29 +73895,9 @@ focus outline in that case.
       .register(nimbleTableColumnText());
 
   const styles$8 = css `
-    ${display('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$W}
 
     .tabpanel {
-        grid-row: 2;
-        grid-column-start: 1;
-        grid-column-end: 4;
         overflow: auto;
     }
 `;
@@ -73782,14 +73908,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$F,
       styles: styles$8
   });
   DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTabs());