diff --git a/.changeset/context-with-root.md b/.changeset/context-with-root.md
new file mode 100644
index 0000000000..3068fbe930
--- /dev/null
+++ b/.changeset/context-with-root.md
@@ -0,0 +1,5 @@
+---
+"@patternfly/pfe-core": minor
+---
+**Context**: added `createContextWithRoot`. Use this when creating contexts that 
+are shared with child elements.
diff --git a/.changeset/pf-select.md b/.changeset/pf-select.md
index dad70e03b4..1ed797a29b 100644
--- a/.changeset/pf-select.md
+++ b/.changeset/pf-select.md
@@ -7,7 +7,7 @@
 A select list enables users to select one or more items from a list.
 
 ```html
-<pf-select>
+<pf-select placeholder="Choose a color">
   <pf-option>Blue</pf-option>
   <pf-option>Green</pf-option>
   <pf-option>Magenta</pf-option>
diff --git a/.changeset/tabs-controller.md b/.changeset/tabs-controller.md
index b26d83e190..cd7952b4f3 100644
--- a/.changeset/tabs-controller.md
+++ b/.changeset/tabs-controller.md
@@ -2,10 +2,10 @@
 "@patternfly/core": minor
 ---
 
-`TabsController`: Added TabsController. This controller is used to manage the state of the tabs and panels. 
+`TabsAriaController`: Added TabsAriaController, used to manage the accesibility tree for tabs and panels. 
 
 ```ts
-#tabs = new TabsController(this, {
+#tabs = new TabsAriaController(this, {
   isTab: (x: Node): x is PfTab => x instanceof PfTab,
   isPanel: (x: Node): x is PfTabPanel => x instanceof PfTabPanel,
 });
diff --git a/core/pfe-core/controllers/roving-tabindex-controller.ts b/core/pfe-core/controllers/roving-tabindex-controller.ts
index c43fafb383..da3ee3e641 100644
--- a/core/pfe-core/controllers/roving-tabindex-controller.ts
+++ b/core/pfe-core/controllers/roving-tabindex-controller.ts
@@ -142,7 +142,7 @@ export class RovingTabindexController<
     }
     RovingTabindexController.hosts.set(host, this);
     this.host.addController(this);
-    this.#init();
+    this.updateItems();
   }
 
   hostUpdated() {
@@ -151,7 +151,7 @@ export class RovingTabindexController<
     if (oldContainer !== newContainer) {
       oldContainer?.removeEventListener('keydown', this.#onKeydown);
       RovingTabindexController.elements.delete(oldContainer!);
-      this.#init();
+      this.updateItems();
     }
     if (newContainer) {
       this.#initContainer(newContainer);
@@ -167,12 +167,6 @@ export class RovingTabindexController<
     this.#gainedInitialFocus = false;
   }
 
-  #init() {
-    if (typeof this.#options?.getItems === 'function') {
-      this.updateItems(this.#options.getItems());
-    }
-  }
-
   #initContainer(container: Element) {
     RovingTabindexController.elements.set(container, this);
     this.#itemsContainer = container;
@@ -267,16 +261,11 @@ export class RovingTabindexController<
     }
   }
 
-  /** @deprecated use setActiveItem */
-  focusOnItem(item?: Item): void {
-    this.setActiveItem(item);
-  }
-
   /**
    * Focuses next focusable item
    */
-  updateItems(items?: Item[]) {
-    this.#items = items ?? this.#options.getItems?.() ?? [];
+  updateItems(items: Item[] = this.#options.getItems?.() ?? []) {
+    this.#items = items;
     const sequence = [...this.#items.slice(this.#itemIndex - 1), ...this.#items.slice(0, this.#itemIndex - 1)];
     const first = sequence.find(item => this.#focusableItems.includes(item));
     const [focusableItem] = this.#focusableItems;
@@ -284,6 +273,11 @@ export class RovingTabindexController<
     this.setActiveItem(activeItem);
   }
 
+  /** @deprecated use setActiveItem */
+  focusOnItem(item?: Item): void {
+    this.setActiveItem(item);
+  }
+
   /**
    * from array of HTML items, and sets active items
    * @deprecated: use getItems and getItemContainer option functions
diff --git a/core/pfe-core/controllers/tabs-aria-controller.ts b/core/pfe-core/controllers/tabs-aria-controller.ts
new file mode 100644
index 0000000000..13c69ac72d
--- /dev/null
+++ b/core/pfe-core/controllers/tabs-aria-controller.ts
@@ -0,0 +1,121 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+
+import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
+
+export interface TabsAriaControllerOptions<Tab, Panel> {
+  /** Add an `isTab` predicate to ensure this tabs instance' state does not leak into parent tabs' state */
+  isTab: (node: unknown) => node is Tab;
+  isActiveTab: (tab: Tab) => boolean;
+  /** Add an `isPanel` predicate to ensure this tabs instance' state does not leak into parent tabs' state */
+  isPanel: (node: unknown) => node is Panel;
+  getHTMLElement?: () => HTMLElement;
+}
+
+export class TabsAriaController<
+  Tab extends HTMLElement = HTMLElement,
+  Panel extends HTMLElement = HTMLElement,
+> implements ReactiveController {
+  #logger: Logger;
+
+  #host: ReactiveControllerHost;
+
+  #element: HTMLElement;
+
+  #tabPanelMap = new Map<Tab, Panel>();
+
+  #options: TabsAriaControllerOptions<Tab, Panel>;
+
+  #mo = new MutationObserver(this.#onSlotchange.bind(this));
+
+  get tabs() {
+    return [...this.#tabPanelMap.keys()] as Tab[];
+  }
+
+  get activeTab(): Tab | undefined {
+    return this.tabs.find(x => this.#options.isActiveTab(x));
+  }
+
+  /**
+   * @example Usage in PfTab
+   *          ```ts
+   *          new TabsController(this, {
+   *             isTab: (x): x is PfTab => x instanceof PfTab,
+   *             isPanel: (x): x is PfTabPanel => x instanceof PfTabPanel
+   *          });
+   *          ```
+   */
+  constructor(
+    host: ReactiveControllerHost,
+    options: TabsAriaControllerOptions<Tab, Panel>,
+  ) {
+    this.#options = options;
+    this.#logger = new Logger(host);
+    if (host instanceof HTMLElement) {
+      this.#element = host;
+    } else {
+      const element = options.getHTMLElement?.();
+      if (!element) {
+        throw new Error('TabsController must be instantiated with an HTMLElement or a `getHTMLElement()` option');
+      }
+      this.#element = element;
+    }
+    (this.#host = host).addController(this);
+    this.#element.addEventListener('slotchange', this.#onSlotchange);
+    if (this.#element.isConnected) {
+      this.hostConnected();
+    }
+  }
+
+  hostConnected() {
+    this.#mo.observe(this.#element, { attributes: false, childList: true, subtree: false });
+    this.#onSlotchange();
+  }
+
+  hostUpdated() {
+    for (const [tab, panel] of this.#tabPanelMap) {
+      panel.setAttribute('aria-labelledby', tab.id);
+      tab.setAttribute('aria-controls', panel.id);
+    }
+  }
+
+  hostDisconnected(): void {
+    this.#mo.disconnect();
+  }
+
+  /**
+   * zip the tabs and panels together into #tabPanelMap
+   */
+  #onSlotchange() {
+    this.#tabPanelMap.clear();
+    const tabs = [];
+    const panels = [];
+    for (const child of this.#element.children) {
+      if (this.#options.isTab(child)) {
+        tabs.push(child);
+      } else if (this.#options.isPanel(child)) {
+        panels.push(child);
+      }
+    }
+    if (tabs.length > panels.length) {
+      this.#logger.warn('Too many tabs!');
+    } else if (panels.length > tabs.length) {
+      this.#logger.warn('Too many panels!');
+    }
+    while (tabs.length) {
+      this.#tabPanelMap.set(tabs.shift()!, panels.shift()!);
+    }
+    this.#host.requestUpdate();
+  }
+
+  panelFor(tab: Tab): Panel | undefined {
+    return this.#tabPanelMap.get(tab);
+  }
+
+  tabFor(panel: Panel): Tab | undefined {
+    for (const [tab, panelToCheck] of this.#tabPanelMap) {
+      if (panel === panelToCheck) {
+        return tab;
+      }
+    }
+  }
+}
diff --git a/core/pfe-core/controllers/tabs-controller.ts b/core/pfe-core/controllers/tabs-controller.ts
deleted file mode 100644
index 2feac17aa3..0000000000
--- a/core/pfe-core/controllers/tabs-controller.ts
+++ /dev/null
@@ -1,309 +0,0 @@
-import type { ReactiveController, ReactiveControllerHost } from 'lit';
-
-import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
-import { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';
-
-export interface Tab extends HTMLElement {
-  active: boolean;
-  disabled: boolean;
-}
-
-export type Panel = HTMLElement
-
-export interface TabsControllerOptions {
-  /** Add an `isTab` predicate to ensure this tabs instance' state does not leak into parent tabs' state */
-  isTab: (node: unknown) => node is Tab;
-  /** Add an `isPanel` predicate to ensure this tabs instance' state does not leak into parent tabs' state */
-  isPanel: (node: unknown) => node is Panel;
-  /** If the controller host is not an element, pass a getter to supply the tabs container element */
-  getHTMLElement?: () => HTMLElement;
-}
-
-function isReactiveControllerHost(element: HTMLElement): element is HTMLElement & ReactiveControllerHost {
-  return 'addController' in element;
-}
-
-export class TabExpandEvent extends Event {
-  constructor(
-    public tab: Tab,
-  ) {
-    super('expand', { bubbles: true, cancelable: true });
-  }
-}
-
-export class TabDisabledEvent extends Event {
-  constructor(
-    public tab: Tab,
-  ) {
-    super('disabled', { bubbles: true, cancelable: true });
-  }
-}
-
-export class TabsController implements ReactiveController {
-  static #instances = new Set<TabsController>();
-
-  static #tabsClasses = new WeakSet();
-
-  static {
-    window.addEventListener('expand', event => {
-      if (event instanceof TabExpandEvent) {
-        for (const instance of this.#instances) {
-          if (instance.#isTab(event.tab) && instance.#tabPanelMap.has(event.tab)) {
-            instance.#onTabExpand(event.tab);
-          }
-        }
-      }
-    });
-
-    window.addEventListener('disabled', event => {
-      if (event instanceof TabDisabledEvent) {
-        for (const instance of this.#instances) {
-          if (instance.#isTab(event.tab) && instance.#tabPanelMap.has(event.tab)) {
-            instance.#onTabDisabled();
-          }
-        }
-      }
-    });
-  }
-
-  #logger: Logger;
-
-  #host: ReactiveControllerHost;
-
-  #element: HTMLElement;
-
-  #tabPanelMap = new Map<Tab, Panel>();
-
-  #isTab: TabsControllerOptions['isTab'];
-
-  #isPanel: TabsControllerOptions['isPanel'];
-
-  #slottedTabs: Tab[] = [];
-
-  #slottedPanels: Panel[] = [];
-
-  #tabindex: RovingTabindexController<Tab>;
-
-  #mo = new MutationObserver(this.#mutationsCallback.bind(this));
-
-  #rebuilding: Promise<null> | null = null;
-
-  #init = 0;
-
-  get activeIndex() {
-    if (!this.#activeTab) {
-      return -1;
-    }
-    return this._tabs.indexOf(this.#activeTab);
-  }
-
-  /**
-   * Sets the active index of the tabs element which will set the active tab.
-   * document.querySelector('tabs-element-selector').activeIndex = 0
-   */
-  set activeIndex(index: number) {
-    const firstFocusableTab = this.#tabindex.firstItem;
-    if (!firstFocusableTab) {
-      this.#logger.error(`No focusable tabs found.`);
-      return;
-    }
-
-    let error = false;
-    if (this._tabs[index] === undefined) {
-      error = true;
-      this.#logger.warn(`The index provided is out of bounds: ${index} in 0 - ${this._tabs.length - 1}. Setting first focusable tab active.`);
-    } else if (this._tabs[index].disabled || this._tabs[index].hasAttribute('aria-disabled')) {
-      error = true;
-      this.#logger.warn(`The tab at index ${index} is disabled. Setting first focusable tab active.`);
-    }
-    if (error) {
-      index = this._tabs.indexOf(firstFocusableTab);
-    }
-    this._tabs[index].active = true;
-  }
-
-  get activeTab(): Tab | undefined {
-    return this.#activeTab;
-  }
-
-  set activeTab(tab: Tab | undefined) {
-    if (tab === undefined || !this.#tabPanelMap.has(tab)) {
-      this.#logger.warn(`The tab provided is not a valid tab.`);
-      return;
-    }
-    // get tab index
-    const index = this._tabs.indexOf(tab);
-    this.activeIndex = index;
-  }
-
-  protected get _tabs() {
-    return [...this.#tabPanelMap.keys()] as Tab[];
-  }
-
-  get #activeTab(): Tab | undefined {
-    return this._tabs.find(tab => tab.active);
-  }
-
-  /**
-   * @example Usage in PfTab
-   *          ```ts
-   *          new TabsController(this, {
-   *             isTab: (x): x is PfTab => x instanceof PfTab,
-   *             isPanel: (x): x is PfTabPanel => x instanceof PfTabPanel
-   *          });
-   *          ```
-   */
-  constructor(host: ReactiveControllerHost, options: TabsControllerOptions) {
-    this.#logger = new Logger(host);
-    if (host instanceof HTMLElement) {
-      this.#element = host;
-      this.#tabindex = new RovingTabindexController(host, {
-        getItems: () => this._tabs,
-      });
-    } else {
-      const element = options.getHTMLElement?.();
-      if (!element) {
-        throw new Error('TabsController must be instantiated with an HTMLElement of a `getHTMLElement` function');
-      }
-      // TODO(bennypowers): remove after #2570, by forwarding the `getHTMLElement` options
-      if (!isReactiveControllerHost(element)) {
-        throw new Error('TabsController\'s host HTMLElement must be a controller host as well');
-      }
-      this.#element = element;
-      this.#tabindex = new RovingTabindexController(element);
-    }
-    this.#isTab = options.isTab;
-    this.#isPanel = options.isPanel;
-    TabsController.#tabsClasses.add(host.constructor);
-    if (this.#element.isConnected) {
-      TabsController.#instances.add(this);
-    }
-    (this.#host = host).addController(this);
-    this.#mo.observe(this.#element, { attributes: false, childList: true, subtree: false });
-    this.#element.addEventListener('slotchange', this.#onSlotchange);
-  }
-
-  hostConnected() {
-    TabsController.#instances.add(this);
-    this.#onSlotchange();
-  }
-
-  hostDisconnected() {
-    TabsController.#instances.delete(this);
-  }
-
-  async hostUpdate() {
-    if (this.#init <= 1) {
-      this.#rebuilding ??= await this.#rebuild();
-      this.#host.requestUpdate();
-    }
-    this.#init++;
-  }
-
-  async #mutationsCallback(mutations: MutationRecord[]): Promise<void> {
-    for (const mutation of mutations) {
-      if ([...mutation.addedNodes.values()].some(node => this.#isTab(node))) {
-        this.#rebuild();
-        break;
-      }
-
-      if ([...mutation.removedNodes.values()].some(node => this.#isTab(node))) {
-        this.#rebuild();
-        break;
-      }
-    }
-  }
-
-  async #rebuild() {
-    const tabSlot = this.#element.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=tab]');
-    const panelSlot = this.#element.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])');
-    this.#slottedPanels = panelSlot?.assignedElements().filter(this.#isPanel) ?? [];
-    this.#slottedTabs = tabSlot?.assignedElements().filter(this.#isTab) ?? [];
-
-    this.#tabPanelMap.clear();
-    await this.#registerSlottedTabs();
-
-    if (this._tabs.length > 0) {
-      this.#updateAccessibility();
-      this.#tabindex.updateItems();
-      this.#setActiveTab();
-    }
-
-    return null;
-  }
-
-  async #onSlotchange() {
-    this.#host.requestUpdate();
-  }
-
-  #onTabExpand(tab: Tab) {
-    this.#tabindex.setActiveItem(tab);
-    this.#deactivateExcept(this._tabs.indexOf(tab));
-  }
-
-  async #onTabDisabled() {
-    await this.#rebuild();
-  }
-
-  async #registerSlottedTabs(): Promise<null> {
-    for (const [index, slotted] of this.#slottedTabs.entries()) {
-      this.#addPairForTab(index, slotted);
-    }
-    return null;
-  }
-
-  #addPairForTab(index: number, tab: Tab) {
-    const panel = this.#slottedPanels[index];
-    if (this.#isPanel(panel)) {
-      this.#tabPanelMap.set(tab, panel);
-    } else {
-      this.#logger.warn(`Tab and panel do not match`, tab, panel);
-    }
-  }
-
-  #deactivateExcept(indexToKeep: number) {
-    [...this.#tabPanelMap].forEach(([tab, panel], currentIndex) => {
-      tab.active = currentIndex === indexToKeep;
-      panel.hidden = currentIndex !== indexToKeep;
-    });
-  }
-
-  #setActiveTab() {
-    // check for an active tab, if not set one
-    if (!this.#activeTab) {
-      this.#logger.warn('No active tab found. Setting to first focusable tab.');
-      this.#setFirstFocusableTabActive();
-      return;
-    }
-    if (this.#activeTab.disabled) {
-      this.#logger.warn('Active tab is disabled. Setting to first focusable tab.');
-      this.#setFirstFocusableTabActive();
-      return;
-    }
-
-    // update RTI with active tab and deactivate others
-    this.#tabindex.setActiveItem(this.#activeTab);
-    this.#deactivateExcept(this._tabs.indexOf(this.#activeTab));
-  }
-
-  #setFirstFocusableTabActive() {
-    const first = this.#tabindex.firstItem;
-    if (!first) {
-      this.#logger.warn('No focusable tab found.');
-      return;
-    }
-    const firstFocusable = this._tabs.find(tab => tab === first);
-    if (firstFocusable) {
-      firstFocusable.active = true;
-    }
-  }
-
-  #updateAccessibility(): void {
-    for (const [tab, panel] of this.#tabPanelMap) {
-      if (!panel.hasAttribute('aria-labelledby')) {
-        panel.setAttribute('aria-labelledby', tab.id);
-      }
-      tab.setAttribute('aria-controls', panel.id);
-    }
-  }
-}
diff --git a/core/pfe-core/functions/context.ts b/core/pfe-core/functions/context.ts
new file mode 100644
index 0000000000..ec97e4bcfb
--- /dev/null
+++ b/core/pfe-core/functions/context.ts
@@ -0,0 +1,19 @@
+import { ContextRoot, createContext } from '@lit/context';
+
+let root: ContextRoot;
+
+function makeContextRoot() {
+  root = new ContextRoot();
+  root.attach(document.body);
+  return root;
+}
+
+/**
+ * In order to prevent late-upgrading-context-consumers from 'missing'
+ * their rightful context providers, we must set up a `ContextRoot` on the body.
+ * Always use this function when creating contexts that are shared with child elements.
+ */
+export function createContextWithRoot<T>(...args: Parameters<typeof createContext>) {
+  root ??= makeContextRoot();
+  return createContext<T>(...args);
+}
diff --git a/core/pfe-core/package.json b/core/pfe-core/package.json
index baad24ade6..0a0f4b7480 100644
--- a/core/pfe-core/package.json
+++ b/core/pfe-core/package.json
@@ -37,6 +37,7 @@
     "./decorators/observed.js": "./decorators/observed.js",
     "./decorators/time.js": "./decorators/time.js",
     "./decorators/trace.js": "./decorators/trace.js",
+    "./functions/context.js": "./functions/context.js",
     "./functions/containsDeep.js": "./functions/containsDeep.js",
     "./functions/debounce.js": "./functions/debounce.js",
     "./functions/random.js": "./functions/random.js",
@@ -52,8 +53,9 @@
     "test": "wtr --files './test/*.spec.ts' --config ../../web-test-runner.config.js"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.5.4",
-    "lit": "^3.1.1"
+    "@floating-ui/dom": "^1.6.3",
+    "@lit/context": "^1.1.0",
+    "lit": "^3.1.2"
   },
   "repository": {
     "type": "git",
diff --git a/elements/package.json b/elements/package.json
index f4c8eecf0f..142ec102be 100644
--- a/elements/package.json
+++ b/elements/package.json
@@ -141,9 +141,10 @@
     "Wes Ruvalcaba"
   ],
   "dependencies": {
+    "@lit/context": "^1.1.0",
     "@patternfly/icons": "^1.0.2",
     "@patternfly/pfe-core": "^2.4.1",
-    "lit": "^3.1.1",
+    "lit": "^3.1.2",
     "tslib": "^2.6.2"
   }
 }
diff --git a/elements/pf-tabs/BaseTabs.ts b/elements/pf-tabs/BaseTabs.ts
index bd5b731067..f9d4daa69b 100644
--- a/elements/pf-tabs/BaseTabs.ts
+++ b/elements/pf-tabs/BaseTabs.ts
@@ -97,10 +97,9 @@ export abstract class BaseTabs extends LitElement {
         this.#logger.warn(`Disabled tabs can not be active, setting first focusable tab to active`);
         this.#tabindex.setActiveItem(this.#firstFocusable);
         index = this.#activeItemIndex;
-      } else if (!tab.active) {
-        // if the activeIndex was set through the CLI e.g.`$0.activeIndex = 2`
-        tab.active = true;
         return;
+      } else {
+        tab.active = true;
       }
     }
 
diff --git a/elements/pf-tabs/context.ts b/elements/pf-tabs/context.ts
new file mode 100644
index 0000000000..c71e48d216
--- /dev/null
+++ b/elements/pf-tabs/context.ts
@@ -0,0 +1,22 @@
+import type { PfTab } from './pf-tab.js';
+
+import { createContextWithRoot } from '@patternfly/pfe-core/functions/context.js';
+
+export interface PfTabsContext {
+  activeTab: PfTab | undefined;
+  box: 'light' | 'dark' | null;
+  fill: boolean;
+  vertical: boolean;
+  manual: boolean;
+  borderBottom: 'true' | 'false';
+}
+
+export class TabExpandEvent<Tab> extends Event {
+  constructor(
+    public tab: Tab,
+  ) {
+    super('expand', { bubbles: true, cancelable: true });
+  }
+}
+
+export const context = createContextWithRoot<PfTabsContext>(Symbol('pf-tabs-context'));
diff --git a/elements/pf-tabs/demo/active-tab-disabled.html b/elements/pf-tabs/demo/active-tab-disabled.html
index b85c4e254d..c0017cb3a4 100644
--- a/elements/pf-tabs/demo/active-tab-disabled.html
+++ b/elements/pf-tabs/demo/active-tab-disabled.html
@@ -8,8 +8,6 @@
     <pf-tab-panel>Database</pf-tab-panel>
     <pf-tab slot="tab" disabled active>Disabled</pf-tab>
     <pf-tab-panel>Disabled</pf-tab-panel>
-    <pf-tab slot="tab" aria-disabled="true">Aria Disabled</pf-tab>
-    <pf-tab-panel>Aria Disabled</pf-tab-panel>
   </pf-tabs>
 </section>
 
diff --git a/elements/pf-tabs/demo/active-tab-is-disabled.html b/elements/pf-tabs/demo/active-tab-is-disabled.html
index 54261632f3..1017433161 100644
--- a/elements/pf-tabs/demo/active-tab-is-disabled.html
+++ b/elements/pf-tabs/demo/active-tab-is-disabled.html
@@ -8,8 +8,6 @@
     <pf-tab-panel>Database</pf-tab-panel>
     <pf-tab slot="tab" disabled active>Disabled</pf-tab>
     <pf-tab-panel>Disabled</pf-tab-panel>
-    <pf-tab slot="tab" aria-disabled="true">Aria Disabled</pf-tab>
-    <pf-tab-panel>Aria Disabled</pf-tab-panel>
   </pf-tabs>
 </section>
 
diff --git a/elements/pf-tabs/demo/box.html b/elements/pf-tabs/demo/box.html
index e047cd25bf..c6284fed35 100644
--- a/elements/pf-tabs/demo/box.html
+++ b/elements/pf-tabs/demo/box.html
@@ -8,8 +8,6 @@
     <pf-tab-panel>Database</pf-tab-panel>
     <pf-tab slot="tab" disabled>Disabled</pf-tab>
     <pf-tab-panel>Disabled</pf-tab-panel>
-    <pf-tab slot="tab" aria-disabled="true">Aria Disabled</pf-tab>
-    <pf-tab-panel>Aria Disabled</pf-tab-panel>
   </pf-tabs>
 
   <form class="input">
diff --git a/elements/pf-tabs/demo/dynamic-tabs.html b/elements/pf-tabs/demo/dynamic-tabs.html
index 574938d489..ee0ac1762a 100644
--- a/elements/pf-tabs/demo/dynamic-tabs.html
+++ b/elements/pf-tabs/demo/dynamic-tabs.html
@@ -19,8 +19,6 @@
   <pf-tab-panel>Database</pf-tab-panel>
   <pf-tab slot="tab" disabled>Disabled</pf-tab>
   <pf-tab-panel>Disabled</pf-tab-panel>
-  <pf-tab slot="tab" aria-disabled="true" id="aria-disabled">Aria Disabled</pf-tab>
-  <pf-tab-panel>Aria Disabled</pf-tab-panel>
 </pf-tabs>
 </section>
 
diff --git a/elements/pf-tabs/demo/inset.html b/elements/pf-tabs/demo/inset.html
index 3afdb8daff..258aaa10ef 100644
--- a/elements/pf-tabs/demo/inset.html
+++ b/elements/pf-tabs/demo/inset.html
@@ -8,8 +8,6 @@
     <pf-tab-panel>Database</pf-tab-panel>
     <pf-tab slot="tab" disabled>Disabled</pf-tab>
     <pf-tab-panel>Disabled</pf-tab-panel>
-    <pf-tab slot="tab" aria-disabled="true">Aria Disabled</pf-tab>
-    <pf-tab-panel>Aria Disabled</pf-tab-panel>
   </pf-tabs>
 
   <form class="input">
diff --git a/elements/pf-tabs/demo/manual-activation.html b/elements/pf-tabs/demo/manual-activation.html
index 5632048c7c..6bfa97e626 100644
--- a/elements/pf-tabs/demo/manual-activation.html
+++ b/elements/pf-tabs/demo/manual-activation.html
@@ -1,36 +1,14 @@
-<section>
-  <h2>Manual Activation</h2>
-  <pf-tabs id="tabs-first" manual>
-    <pf-tab slot="tab">Users</pf-tab>
-    <pf-tab slot="tab">Containers</pf-tab>
-    <pf-tab slot="tab">Database</pf-tab>
-    <pf-tab slot="tab" disabled active>Disabled</pf-tab>
-    <pf-tab slot="tab" aria-disabled="true">Aria Disabled</pf-tab>
-    <pf-tab-panel>Users</pf-tab-panel>
-    <pf-tab-panel>Containers</pf-tab-panel>
-    <pf-tab-panel>Database</pf-tab-panel>
-    <pf-tab-panel>Disabled</pf-tab-panel>
-    <pf-tab-panel>Aria Disabled</pf-tab-panel>
-  </pf-tabs>
-</section>
+<pf-tabs id="tabs-first" manual>
+  <pf-tab slot="tab">Users</pf-tab>
+  <pf-tab slot="tab">Containers</pf-tab>
+  <pf-tab slot="tab">Database</pf-tab>
+  <pf-tab slot="tab" disabled active>Disabled</pf-tab>
+  <pf-tab-panel>Users</pf-tab-panel>
+  <pf-tab-panel>Containers</pf-tab-panel>
+  <pf-tab-panel>Database</pf-tab-panel>
+  <pf-tab-panel>Disabled</pf-tab-panel>
+</pf-tabs>
 
 <script type="module">
   import '@patternfly/elements/pf-tabs/pf-tabs.js';
 </script>
-
-<style>
-  main {
-    display: block;
-    overflow-x: unset;
-  }
-
-  section {
-    margin: 0 auto;
-    padding: 0 16px 32px;
-    width: 100%;
-    max-width: 1008px;
-    @media (min-width: 768px) {
-      padding: 0 32px 32px;
-    }
-  }
-</style>
diff --git a/elements/pf-tabs/demo/nested.html b/elements/pf-tabs/demo/nested.html
index c0a111e1e2..a2a83c95e0 100644
--- a/elements/pf-tabs/demo/nested.html
+++ b/elements/pf-tabs/demo/nested.html
@@ -14,14 +14,10 @@
       <pf-tab-panel>Database 2</pf-tab-panel>
       <pf-tab slot="tab" disabled>Disabled 2</pf-tab>
       <pf-tab-panel>Disabled 2</pf-tab-panel>
-      <pf-tab slot="tab" aria-disabled="true" id="aria-disabled">Aria Disabled 2</pf-tab>
-      <pf-tab-panel>Aria Disabled 2</pf-tab-panel>
     </pf-tabs>
   </pf-tab-panel>
   <pf-tab slot="tab" disabled>Disabled</pf-tab>
   <pf-tab-panel>Disabled</pf-tab-panel>
-  <pf-tab slot="tab" aria-disabled="true" id="aria-disabled">Aria Disabled</pf-tab>
-  <pf-tab-panel>Aria Disabled</pf-tab-panel>
 </pf-tabs>
 
 <script type="module">
diff --git a/elements/pf-tabs/demo/pf-tabs.html b/elements/pf-tabs/demo/pf-tabs.html
index b5204a0290..001e169a2b 100644
--- a/elements/pf-tabs/demo/pf-tabs.html
+++ b/elements/pf-tabs/demo/pf-tabs.html
@@ -8,8 +8,6 @@
     <pf-tab-panel>Database</pf-tab-panel>
     <pf-tab slot="tab" disabled>Disabled</pf-tab>
     <pf-tab-panel>Disabled</pf-tab-panel>
-    <pf-tab slot="tab" aria-disabled="true" id="aria-disabled">Aria Disabled</pf-tab>
-    <pf-tab-panel>Aria Disabled</pf-tab-panel>
   </pf-tabs>
 </section>
 
diff --git a/elements/pf-tabs/demo/tabs-first-in-markup.html b/elements/pf-tabs/demo/tabs-first-in-markup.html
index e99fc15192..205a3f49c2 100644
--- a/elements/pf-tabs/demo/tabs-first-in-markup.html
+++ b/elements/pf-tabs/demo/tabs-first-in-markup.html
@@ -4,12 +4,10 @@
     <pf-tab slot="tab">Containers</pf-tab>
     <pf-tab slot="tab">Database</pf-tab>
     <pf-tab slot="tab" disabled active>Disabled</pf-tab>
-    <pf-tab slot="tab" aria-disabled="true">Aria Disabled</pf-tab>
     <pf-tab-panel>Users</pf-tab-panel>
     <pf-tab-panel>Containers</pf-tab-panel>
     <pf-tab-panel>Database</pf-tab-panel>
     <pf-tab-panel>Disabled</pf-tab-panel>
-    <pf-tab-panel>Aria Disabled</pf-tab-panel>
   </pf-tabs>
 </section>
 
diff --git a/elements/pf-tabs/demo/vertical.html b/elements/pf-tabs/demo/vertical.html
index d60b67c275..3481cfde39 100644
--- a/elements/pf-tabs/demo/vertical.html
+++ b/elements/pf-tabs/demo/vertical.html
@@ -8,8 +8,6 @@
     <pf-tab-panel>Database</pf-tab-panel>
     <pf-tab slot="tab" disabled>Disabled</pf-tab>
     <pf-tab-panel>Disabled</pf-tab-panel>
-    <pf-tab slot="tab" aria-disabled="true">Aria Disabled</pf-tab>
-    <pf-tab-panel>Aria Disabled</pf-tab-panel>
   </pf-tabs>
 
   <form>
diff --git a/elements/pf-tabs/docs/pf-tabs.md b/elements/pf-tabs/docs/pf-tabs.md
index 49bc44ace3..a8a36817ca 100644
--- a/elements/pf-tabs/docs/pf-tabs.md
+++ b/elements/pf-tabs/docs/pf-tabs.md
@@ -23,8 +23,6 @@
       <pf-tab-panel>Database</pf-tab-panel>
       <pf-tab slot="tab" disabled>Disabled</pf-tab>
       <pf-tab-panel>Disabled</pf-tab-panel>
-      <pf-tab slot="tab" aria-disabled="true">Aria Disabled</pf-tab>
-      <pf-tab-panel>Aria Disabled</pf-tab-panel>
     </pf-tabs>
   </div>
 {% endrenderOverview %}
@@ -140,8 +138,6 @@ export const Expander = () => (
     <pf-tab-panel>Database</pf-tab-panel>
     <pf-tab slot="tab" disabled>Disabled</pf-tab>
     <pf-tab-panel>Disabled</pf-tab-panel>
-    <pf-tab slot="tab" aria-disabled="true">Aria Disabled</pf-tab>
-    <pf-tab-panel>Aria Disabled</pf-tab-panel>
   </pf-tabs>
   {% endhtmlexample %}
 
@@ -156,8 +152,6 @@ export const Expander = () => (
     <pf-tab-panel>Database</pf-tab-panel>
     <pf-tab slot="tab" disabled>Disabled</pf-tab>
     <pf-tab-panel>Disabled</pf-tab-panel>
-    <pf-tab slot="tab" aria-disabled="true">Aria Disabled</pf-tab>
-    <pf-tab-panel>Aria Disabled</pf-tab-panel>
   </pf-tabs>
   {% endhtmlexample %}
 
@@ -172,8 +166,6 @@ export const Expander = () => (
     <pf-tab-panel>Database</pf-tab-panel>
     <pf-tab slot="tab" disabled>Disabled</pf-tab>
     <pf-tab-panel>Disabled</pf-tab-panel>
-    <pf-tab slot="tab" aria-disabled="true">Aria Disabled</pf-tab>
-    <pf-tab-panel>Aria Disabled</pf-tab-panel>
   </pf-tabs>
   {% endhtmlexample %}
 
diff --git a/elements/pf-tabs/pf-tab-panel.ts b/elements/pf-tabs/pf-tab-panel.ts
index d448a1cdf0..3a12d942cb 100644
--- a/elements/pf-tabs/pf-tab-panel.ts
+++ b/elements/pf-tabs/pf-tab-panel.ts
@@ -1,9 +1,12 @@
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
-
-import styles from './pf-tab-panel.css';
+import { state } from 'lit/decorators/state.js';
+import { consume } from '@lit/context';
 
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
+import { type PfTabsContext, context } from './context.js';
+
+import styles from './pf-tab-panel.css';
 
 /**
  * @slot - Tab panel content
@@ -18,6 +21,9 @@ export class PfTabPanel extends LitElement {
 
   #internals = this.attachInternals();
 
+  @consume({ context, subscribe: true })
+  @state() private ctx?: PfTabsContext;
+
   render() {
     return html`
       <slot></slot>
@@ -41,6 +47,16 @@ export class PfTabPanel extends LitElement {
     */
     this.tabIndex = 0;
   }
+
+  override willUpdate() {
+    const { box, vertical } = this.ctx ?? {};
+    this.toggleAttribute('vertical', vertical);
+    if (box) {
+      this.setAttribute('box', box);
+    } else {
+      this.removeAttribute('box');
+    }
+  }
 }
 
 declare global {
diff --git a/elements/pf-tabs/pf-tab.css b/elements/pf-tabs/pf-tab.css
index e9c19d2995..2c7aae877a 100644
--- a/elements/pf-tabs/pf-tab.css
+++ b/elements/pf-tabs/pf-tab.css
@@ -1,34 +1,35 @@
+[hidden] {
+  display: none !important;
+}
+
 :host {
   display: flex;
   flex: none;
+  outline: none;
   scroll-snap-align: var(--pf-c-tabs__item--ScrollSnapAlign, end);
 }
 
-:host([active]) {
+.active {
   --pf-c-tabs__link--Color: var(--pf-c-tabs__item--m-current__link--Color,  var(--pf-global--Color--100, #151515));
   --pf-c-tabs__link--after--BorderColor: var(--pf-c-tabs__item--m-current__link--after--BorderColor, var(--pf-global--active-color--100, #06c));
   --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__item--m-current__link--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px));
 }
 
-:host([box][active]) {
+.box.active {
   --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs__item--m-current__link--BackgroundColor, var(--pf-global--BackgroundColor--100, #ffffff));
   --pf-c-tabs__link--before--BorderBottomColor: var(--pf-c-tabs__link--BackgroundColor, transparent);
 }
 
-:host([vertical]) [part="text"] {
+.vertical [part="text"] {
   max-width: 100%;
   overflow-wrap: break-word;
 }
 
-[hidden] {
-  display: none !important;
-}
-
 slot[name="icon"] {
   display: block;
 }
 
-button {
+#button {
   margin: 0;
   font-family: inherit;
   font-size: 100%;
@@ -54,8 +55,8 @@ button {
   background-color: var(--pf-c-tabs__link--BackgroundColor, transparent);
 }
 
-button::before,
-button::after {
+#button::before,
+#button::after {
   position: absolute;
   top: 0;
   right: 0;
@@ -69,7 +70,7 @@ button::after {
   pointer-events: none;
 }
 
-button::before {
+#button::before {
   border-block-start-width: var(--pf-c-tabs__link--before--BorderTopWidth, 0);
   border-inline-end-width: var(--pf-c-tabs__link--before--BorderRightWidth, 0);
   border-block-end-width: var(--pf-c-tabs__link--before--BorderBottomWidth, 0);
@@ -80,7 +81,7 @@ button::before {
   border-inline-start-color: var(--pf-c-tabs__link--before--BorderLeftColor,  var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2)));
 }
 
-button::after {
+#button::after {
   top: var(--pf-c-tabs__link--after--Top, auto);
   right: var(--pf-c-tabs__link--after--Right, 0);
   bottom: var(--pf-c-tabs__link--after--Bottom, 0);
@@ -92,44 +93,44 @@ button::after {
   border-inline-start-width: var(--pf-c-tabs__link--after--BorderLeftWidth);
 }
 
-button:hover {
+:host(:hover) #button {
   --pf-c-tabs__link-toggle-icon--Color: var(--pf-c-tabs__link--hover__toggle-icon--Color);
   --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--hover--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px));
 }
 
-button:focus,
-button:focus-visible {
+:host(:is(:focus, :focus-visible)) #button {
+  outline-width: 1px;
+  outline-style: auto;
   outline-color: var(--pf-c-tabs__link--after--BorderColor, #06c);
   --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--focus--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px));
 }
 
-button:active {
+:host(:active) #button {
   --pf-c-tabs__link--after--BorderWidth: var(--pf-c-tabs__link--active--after--BorderWidth, var(--pf-global--BorderWidth--lg, 3px));
 }
 
-:host([fill]) button {
+.fill #button {
   flex-basis: 100%;
   justify-content: center;
 }
 
-:host(:disabled) button {
+:host(:disabled) #button {
   pointer-events: none;
 }
 
-:host([aria-disabled="true"]) button {
+:host([aria-disabled="true"]) #button {
   cursor: default;
 }
 
-:host([box]) button {
+.box #button {
   --pf-c-tabs__link--after--BorderTopWidth: var(--pf-c-tabs__link--after--BorderWidth, 0);
 }
 
-:host([box]) button,
-:host([vertical]) button {
+:is(.box, .vertical) #button {
   --pf-c-tabs__link--after--BorderBottomWidth: 0;
 }
 
-:host([vertical]) button {
+.vertical #button {
   --pf-c-tabs__link--after--Bottom: 0;
   --pf-c-tabs__link--after--BorderTopWidth: 0;
   --pf-c-tabs__link--after--BorderLeftWidth: var(--pf-c-tabs__link--after--BorderWidth, 0);
@@ -137,32 +138,32 @@ button:active {
   text-align: left;
 }
 
-:host([box][vertical]) button::after {
+.box.vertical #button::after {
   top: calc(var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)) * -1);
 }
 
-:host([box][vertical]:first-of-type) button::after,
-:host([box][vertical][active]) button::after {
+:host(:first-of-type) .box.vertical #button::after,
+.box.vertical.active #button::after {
   top: 0;
 }
 
-:host([box][vertical][active]) button::before {
+.box.vertical.active #button::before {
   --pf-c-tabs__link--before--BorderRightColor: var(--pf-c-tabs__item--m-current__link--BackgroundColor, var(--pf-global--BackgroundColor--100, #ffffff));
   --pf-c-tabs__link--before--BorderBottomWidth: var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px));
   --pf-c-tabs__link--before--BorderBottomColor: var(--pf-c-tabs__link--before--border-color--base, var(--pf-global--BorderColor--100, #d2d2d2));
 }
 
-:host([box][active]:first-of-type) button::before {
+:host(:first-of-type) .box.active #button::before {
   border-block-start-width: var(--pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderTopWidth,  var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));
   border-inline-start-width: var(--pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth,  var(--pf-c-tabs__link--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));
 }
 
-:host([box][active]:last-of-type) button::before {
+:host(:last-of-type) .box.active #button::before {
   border-inline-end-width: var(--pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth, var(--pf-c-tabs--before--border-width--base, var(--pf-global--BorderWidth--sm, 1px)));
 }
 
-:host([disabled]) button,
-:host([aria-disabled="true"]) button {
+:host([disabled]) #button,
+:host([aria-disabled="true"]) #button {
   --pf-c-tabs__link--Color: var(--pf-c-tabs__link--disabled--Color,  var(--pf-global--disabled-color--100, #6a6e73));
   --pf-c-tabs__link--BackgroundColor: var(--pf-c-tabs__link--disabled--BackgroundColor, var(--pf-global--palette--black-150, #f5f5f5));
   --pf-c-tabs__link--before--BorderRightWidth: var(--pf-c-tabs__link--disabled--before--BorderRightWidth, 0);
@@ -179,7 +180,7 @@ button:active {
   display: none !important;
 }
 
-:host([disabled][border-bottom="false"]) button,
-:host([aria-disabled="true"][border-bottom="false"]) button {
+:host([disabled][border-bottom="false"]) #button,
+:host([aria-disabled="true"][border-bottom="false"]) #button {
   --pf-c-tabs__link--before--BorderBottomWidth: 0;
 }
diff --git a/elements/pf-tabs/pf-tab.ts b/elements/pf-tabs/pf-tab.ts
index efbac05978..a919feb1b1 100644
--- a/elements/pf-tabs/pf-tab.ts
+++ b/elements/pf-tabs/pf-tab.ts
@@ -2,12 +2,15 @@ import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';
-import { query } from 'lit/decorators/query.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { consume } from '@lit/context';
 
 import { observed } from '@patternfly/pfe-core/decorators.js';
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 
-import { TabExpandEvent, TabDisabledEvent } from '@patternfly/pfe-core/controllers/tabs-controller.js';
+import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
+
+import { TabExpandEvent, context, type PfTabsContext } from './context.js';
 
 import styles from './pf-tab.css';
 
@@ -69,84 +72,103 @@ import styles from './pf-tab.css';
  *
  * @cssprop     {<length>} --pf-c-tabs__link--child--MarginRight  {@default `1rem`}
  *
- * @fires { TabExpandEvent } expand - when a tab expands
+ * @fires {TabExpandEvent} expand - when a tab expands
  */
 @customElement('pf-tab')
 export class PfTab extends LitElement {
   static readonly styles = [styles];
 
-  static override shadowRootOptions: ShadowRootInit = { ...LitElement.shadowRootOptions, delegatesFocus: true };
-
-  @query('button') private button!: HTMLButtonElement;
-
   @queryAssignedElements({ slot: 'icon', flatten: true })
   private icons!: Array<HTMLElement>;
 
-  @property({ type: Boolean }) manual = false;
-
   @observed
   @property({ reflect: true, type: Boolean }) active = false;
 
   @observed
   @property({ reflect: true, type: Boolean }) disabled = false;
 
-  #internals = this.attachInternals();
+  @consume({ context, subscribe: true })
+  @property({ attribute: false })
+  private ctx?: PfTabsContext;
+
+  #internals = InternalsController.of(this, { role: 'tab' });
 
   override connectedCallback() {
     super.connectedCallback();
     this.id ||= getRandomId(this.localName);
-    this.#internals.role = 'tab';
-    this.#internals.ariaDisabled = this.#setInternalsAriaDisabled();
     this.addEventListener('click', this.#onClick);
+    this.addEventListener('keydown', this.#onKeydown);
     this.addEventListener('focus', this.#onFocus);
   }
 
+  override willUpdate() {
+    const { borderBottom, box, fill, manual, vertical } = this.ctx ?? {};
+    this.toggleAttribute('fill', fill);
+    this.toggleAttribute('manual', manual);
+    this.toggleAttribute('vertical', vertical);
+    if (box) {
+      this.setAttribute('box', box);
+    } else {
+      this.removeAttribute('box');
+    }
+    if (borderBottom) {
+      this.setAttribute('border-bottom', borderBottom);
+    } else {
+      this.removeAttribute('border-bottom');
+    }
+  }
+
   render() {
+    const { active } = this;
+    const { box, fill = false, vertical = false } = this.ctx ?? {};
+    const light = box === 'light';
+    const dark = box === 'dark';
     return html`
-      <button part="button" ?disabled="${this.disabled}">
+      <div id="button"
+           part="button"
+           class="${classMap({ active, box: !!box, dark, light, fill, vertical })}">
         <slot name="icon"
               part="icon"
               ?hidden="${!this.icons.length}"
               @slotchange="${() => this.requestUpdate()}"></slot>
         <slot part="text"></slot>
-      </button>
+      </div>
     `;
   }
 
   #onClick() {
-    if (this.disabled || this.#internals.ariaDisabled === 'true') {
-      return;
+    if (!this.disabled) {
+      this.#activate();
+    }
+  }
+
+  #onKeydown(event: KeyboardEvent) {
+    if (!this.disabled) {
+      switch (event.key) {
+        case 'Enter': this.#activate();
+      }
     }
-    this.#activate();
-    this.button.focus();
   }
 
   #onFocus() {
-    if (this.manual || this.#internals.ariaDisabled === 'true') {
-      return;
+    if (!this.ctx?.manual && !this.disabled) {
+      this.#activate();
     }
-    this.#activate();
   }
 
   #activate() {
-    this.active = true;
+    return this.dispatchEvent(new TabExpandEvent(this));
   }
 
-  private _activeChanged(oldVal: boolean, newVal: boolean) {
-    if (oldVal !== newVal && newVal === true) {
-      this.dispatchEvent(new TabExpandEvent(this));
+  private _activeChanged(old: boolean) {
+    this.#internals.ariaSelected = String(!!this.active);
+    if (this.active && !old) {
+      this.#activate();
     }
   }
 
   private _disabledChanged() {
-    this.dispatchEvent(new TabDisabledEvent(this));
-  }
-
-  #setInternalsAriaDisabled() {
-    if (this.disabled) {
-      return 'true';
-    }
-    return this.ariaDisabled ?? 'false';
+    this.#internals.ariaDisabled = this.disabled ? 'true' : this.ariaDisabled ?? 'false';
   }
 }
 
diff --git a/elements/pf-tabs/pf-tabs.ts b/elements/pf-tabs/pf-tabs.ts
index 5750891e45..fadd11c1dd 100644
--- a/elements/pf-tabs/pf-tabs.ts
+++ b/elements/pf-tabs/pf-tabs.ts
@@ -1,19 +1,22 @@
-import { html, LitElement } from 'lit';
+import { html, LitElement, type PropertyValues } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { query } from 'lit/decorators/query.js';
-import { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';
+import { provide } from '@lit/context';
 import { classMap } from 'lit/directives/class-map.js';
 
+import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 import { OverflowController } from '@patternfly/pfe-core/controllers/overflow-controller.js';
-import { TabExpandEvent, TabsController } from '@patternfly/pfe-core/controllers/tabs-controller.js';
-
-import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
-import { cascades } from '@patternfly/pfe-core/decorators.js';
+import { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';
+import { TabsAriaController } from '@patternfly/pfe-core/controllers/tabs-aria-controller.js';
 
 import { PfTab } from './pf-tab.js';
 import { PfTabPanel } from './pf-tab-panel.js';
 
+import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
+
+import { type PfTabsContext, TabExpandEvent, context } from './context.js';
+
 import '@patternfly/elements/pf-icon/pf-icon.js';
 
 import styles from './pf-tabs.css';
@@ -72,32 +75,38 @@ export class PfTabs extends LitElement {
 
   protected static readonly scrollTimeoutDelay = 150;
 
-  static isExpandEvent(event: Event): event is TabExpandEvent {
+  static isExpandEvent(event: Event): event is TabExpandEvent<PfTab> {
     return event instanceof TabExpandEvent;
   }
 
+  /**
+   * Aria Label for the left scroll button
+   */
+  @property({ reflect: false, attribute: 'label-scroll-left' }) labelScrollLeft = 'Scroll left';
+
+  /**
+   * Aria Label for the right scroll button
+   */
+  @property({ reflect: false, attribute: 'label-scroll-right' }) labelScrollRight = 'Scroll left';
+
   /**
    * Box styling on tabs. Defaults to null
    */
-  @cascades('pf-tab', 'pf-tab-panel')
   @property({ reflect: true }) box: 'light' | 'dark' | null = null;
 
   /**
    * Set to true to enable vertical tab styling.
    */
-  @cascades('pf-tab', 'pf-tab-panel')
   @property({ reflect: true, type: Boolean }) vertical = false;
 
   /**
    * Set to true to enable filled tab styling.
    */
-  @cascades('pf-tab')
   @property({ reflect: true, type: Boolean }) fill = false;
 
   /**
    * Border bottom tab styling on tabs. To remove the bottom border, set this prop to false.
    */
-  @cascades('pf-tab')
   @property({ attribute: 'border-bottom' }) borderBottom: 'true' | 'false' = 'true';
 
   /**
@@ -105,62 +114,88 @@ export class PfTabs extends LitElement {
    * unless a user clicks on them or uses the keyboard space or enter key to select them.  Roving
    * tabindex will still update allowing user to keyboard navigate through the tabs with arrow keys.
    */
-  @cascades('pf-tab')
   @property({ reflect: true, type: Boolean }) manual = false;
 
-  /**
-   * Aria Label for the left scroll button
-   */
-  @property({ reflect: false, attribute: 'label-scroll-left' }) labelScrollLeft = 'Scroll left';
-
-  /**
-   * Aria Label for the right scroll button
-   */
-  @property({ reflect: false, attribute: 'label-scroll-right' }) labelScrollRight = 'Scroll left';
-
   /**
    * The index of the active tab
    */
-  @property({ attribute: 'active-index', reflect: true, type: Number })
-  get activeIndex() {
-    return this.#tabs.activeIndex;
-  }
-
-  set activeIndex(index: number) {
-    this.#tabs.activeIndex = index;
-  }
+  @property({ attribute: 'active-index', reflect: true, type: Number }) activeIndex = -1;
 
-  get activeTab(): PfTab {
-    return this.#tabs.activeTab as PfTab;
-  }
+  @property({ attribute: false }) activeTab?: PfTab;
 
-  set activeTab(tab: PfTab) {
-    this.#tabs.activeTab = tab;
+  get tabs(): PfTab[] {
+    return this.#tabs.tabs;
   }
 
   @query('#tabs') private tabsContainer!: HTMLElement;
 
-  @queryAssignedElements({ slot: 'tab' }) private tabs?: PfTab[];
+  get #ctx(): PfTabsContext {
+    const { activeTab, borderBottom, box, fill, manual, vertical } = this;
+    return { activeTab, borderBottom, box, fill, manual, vertical };
+  }
+
+  @provide({ context })
+  private ctx: PfTabsContext = this.#ctx;
 
   #overflow = new OverflowController(this, { scrollTimeoutDelay: 200 });
 
-  #tabs = new TabsController(this, {
-    isTab: (x): x is PfTab => x instanceof PfTab,
-    isPanel: (x): x is PfTabPanel => x instanceof PfTabPanel,
+  #tabs = new TabsAriaController<PfTab, PfTabPanel>(this, {
+    isTab: (x): x is PfTab => (x as HTMLElement).localName === 'pf-tab',
+    isPanel: (x): x is PfTabPanel => (x as HTMLElement).localName === 'pf-tab-panel',
+    isActiveTab: x => x.active,
   });
 
+  #tabindex = new RovingTabindexController(this, {
+    getHTMLElement: () => this.shadowRoot?.getElementById('tabs') ?? null,
+    getItems: () => this.tabs ?? [],
+  });
+
+  #logger = new Logger(this);
+
   override connectedCallback() {
     super.connectedCallback();
+    this.addEventListener('expand', this.#onExpand);
     this.id ||= getRandomId(this.localName);
   }
 
-  override willUpdate(): void {
+  protected override async getUpdateComplete(): Promise<boolean> {
+    const here = await super.getUpdateComplete();
+    const ps = await Promise.all(Array.from(
+      this.querySelectorAll<LitElement>('pf-tab, pf-tab-panel'),
+      x => x.updateComplete,
+    ));
+    return here && ps.every(x => !!x);
+  }
+
+  override willUpdate(changed: PropertyValues<this>): void {
+    if (changed.has('activeIndex')) {
+      this.select(this.activeIndex);
+    } else if (changed.has('activeTab') && this.activeTab) {
+      this.select(this.activeTab);
+    } else {
+      this.#updateActive();
+    }
     this.#overflow.update();
+    this.ctx = this.#ctx;
+  }
+
+  protected override updated(changed: PropertyValues<this>): void {
+    if (changed.has('activeTab') && this.activeTab?.disabled) {
+      this.#logger.warn('Active tab is disabled. Setting to first focusable tab');
+      this.activeIndex = 0;
+    }
+  }
+
+  protected override firstUpdated(): void {
+    if (this.tabs.length && this.activeIndex === -1) {
+      this.select(this.tabs.findIndex(x => !x.disabled));
+    }
   }
 
   render() {
     return html`
-      <div part="container" class="${classMap({ overflow: this.#overflow.showScrollButtons })}">
+      <div part="container"
+           class="${classMap({ overflow: this.#overflow.showScrollButtons })}">
         <div part="tabs-container">${!this.#overflow.showScrollButtons ? '' : html`
           <button id="previousTab" tabindex="-1"
               aria-label="${this.labelScrollLeft}"
@@ -198,12 +233,36 @@ export class PfTabs extends LitElement {
     }
   }
 
+  #onExpand(event: Event) {
+    if (event instanceof TabExpandEvent && !event.defaultPrevented) {
+      this.select(event.tab);
+    }
+  }
+
+  #updateActive({ force = false } = {}) {
+    if (!this.#tabindex.activeItem?.disabled) {
+      this.tabs?.forEach((tab, i) => {
+        if (force || !this.manual) {
+          const active = tab === this.#tabindex.activeItem;
+          tab.active = active;
+          if (active) {
+            this.activeIndex = i;
+            this.activeTab = tab;
+          }
+        }
+        this.#tabs.panelFor(tab)?.toggleAttribute('hidden', !tab.active);
+      });
+    }
+  }
+
   select(option: PfTab | number) {
     if (typeof option === 'number') {
-      this.#tabs.activeIndex = option;
+      const item = this.tabs[option];
+      this.#tabindex.setActiveItem(item);
     } else {
-      this.activeTab = option;
+      this.#tabindex.setActiveItem(option);
     }
+    this.#updateActive({ force: true });
   }
 }
 
diff --git a/elements/pf-tabs/test/pf-tabs.spec.ts b/elements/pf-tabs/test/pf-tabs.spec.ts
index ffdf76de93..8fab238af1 100644
--- a/elements/pf-tabs/test/pf-tabs.spec.ts
+++ b/elements/pf-tabs/test/pf-tabs.spec.ts
@@ -1,6 +1,6 @@
 import { expect, html, nextFrame } from '@open-wc/testing';
 import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
-import { a11ySnapshot, type A11yTreeSnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
 import { setViewport, sendKeys } from '@web/test-runner-commands';
 
 import { allUpdates } from '@patternfly/pfe-tools/test/utils.js';
@@ -11,37 +11,13 @@ import { PfTabPanel } from '../pf-tab-panel.js';
 
 import '@patternfly/pfe-tools/test/stub-logger.js';
 
-const TEMPLATE = html`
-    <pf-tabs>
-      <pf-tab slot="tab">Users</pf-tab>
-      <pf-tab-panel>Users</pf-tab-panel>
-      <pf-tab slot="tab">Containers</pf-tab>
-      <pf-tab-panel>Containers</pf-tab-panel>
-      <pf-tab slot="tab">Database</pf-tab>
-      <pf-tab-panel>Database</pf-tab-panel>
-    </pf-tabs>
-  `;
-
-const DISABLED = html`
-  <pf-tabs>
-    <pf-tab slot="tab" disabled>Users</pf-tab>
-    <pf-tab-panel>Users</pf-tab-panel>
-    <pf-tab slot="tab">Containers</pf-tab>
-    <pf-tab-panel>Containers</pf-tab-panel>
-    <pf-tab slot="tab">Database</pf-tab>
-    <pf-tab-panel>Database</pf-tab-panel>
-    <pf-tab slot="tab" disabled>Disabled</pf-tab>
-    <pf-tab-panel>Disabled</pf-tab-panel>
-    <pf-tab slot="tab" aria-disabled="true">Aria Disabled</pf-tab>
-    <pf-tab-panel>Aria Disabled</pf-tab-panel>
-  </pf-tabs>
-`;
+function press(key: string) {
+  return async function() {
+    await sendKeys({ press: key });
+  };
+}
 
 describe('<pf-tabs>', function() {
-  let element: PfTabs;
-  let tab: PfTab;
-  let panel: PfTabPanel;
-
   it('instantiates imperatively', function() {
     expect(document.createElement('pf-tabs')).to.be.an.instanceof(PfTabs);
     expect(document.createElement('pf-tab')).to.be.an.instanceof(PfTab);
@@ -49,29 +25,36 @@ describe('<pf-tabs>', function() {
   });
 
   it('should upgrade', async function() {
-    const el = await createFixture<PfTabs>(TEMPLATE);
+    const el = await createFixture<PfTabs>(html`<pf-tabs></pf-tabs>`);
     expect(el, 'pf-tabs should be an instance of PfeTabs')
       .to.be.an.instanceOf(customElements.get('pf-tabs'))
       .and
       .to.be.an.instanceOf(PfTabs);
   });
 
-  describe('default behavior', function() {
-    let tabs: PfTab[];
-    let tab: PfTab;
-    let panels: PfTabPanel[];
-    let panel: PfTabPanel;
+  describe('with three valid tab pairs', function() {
+    let element: PfTabs;
+
+    const updateComplete = () => allUpdates(element);
 
     beforeEach(async function() {
-      element = await createFixture<PfTabs>(TEMPLATE);
-      await allUpdates(element);
-      tabs = Array.from(element.querySelectorAll('pf-tab')!);
-      [tab] = tabs;
-      panels = Array.from(element.querySelectorAll('pf-tab-panel')!);
-      [panel] = panels;
+      element = await createFixture<PfTabs>(html`
+        <pf-tabs>
+          <pf-tab slot="tab">tab-1</pf-tab>
+          <pf-tab-panel>panel-1</pf-tab-panel>
+          <pf-tab slot="tab">tab-2</pf-tab>
+          <pf-tab-panel>panel-2</pf-tab-panel>
+          <pf-tab slot="tab">tab-3</pf-tab>
+          <pf-tab-panel>panel-3</pf-tab-panel>
+        </pf-tabs>
+      `);
     });
 
+    beforeEach(updateComplete);
+
     it('should apply aria attributes on initialization', function() {
+      const tabs = element.querySelectorAll('pf-tab');
+      const panels = element.querySelectorAll('pf-tab-panel');
       tabs.forEach(function(tab: Element, index: number) {
         const tabId = tab.getAttribute('id');
         const tabControls = tab.getAttribute('aria-controls');
@@ -84,271 +67,279 @@ describe('<pf-tabs>', function() {
       });
     });
 
-    it('should activate the first focusable tab', function() {
-      expect(tab.hasAttribute('active')).to.equal(true);
-    });
+    describe('pressing Tab', function() {
+      beforeEach(press('Tab'));
+      beforeEach(updateComplete);
+      beforeEach(nextFrame);
+      it('should activate the first focusable tab', function() {
+        expect(element.querySelector('pf-tab')).to.have.attribute('active');
+      });
 
-    it('should activate the first tab panel', function() {
-      expect(panel.hasAttribute('hidden')).to.equal(false);
+      it('should activate the first tab panel', function() {
+        expect(element.querySelector('pf-tab')).to.not.have.attribute('hidden');
+      });
     });
-  });
 
-  describe('with `vertical` attribute', function() {
-    beforeEach(async function() {
-      element = await createFixture<PfTabs>(TEMPLATE);
-      element.setAttribute('vertical', '');
-      await allUpdates(element);
-    });
+    describe('setting the `vertical` attribute', function() {
+      beforeEach(function() {
+        element.setAttribute('vertical', '');
+      });
+
+      beforeEach(updateComplete);
 
-    it('should have vertical styles', function() {
-      const tabs = element.shadowRoot!.querySelector('[part="tabs"]')!;
-      const tabsVerticalStyles = getComputedStyle(tabs).flexDirection;
-      expect(tabsVerticalStyles).to.be.equal('column');
+      it('should have vertical styles', function() {
+        // WARNING: asserting on shadow root content;
+        const tabs = element.shadowRoot!.querySelector('[part="tabs"]')!;
+        const tabsVerticalStyles = getComputedStyle(tabs).flexDirection;
+        expect(tabsVerticalStyles).to.be.equal('column');
+      });
     });
-  });
 
-  describe('when a tab is set `active`', function() {
-    let previousTab: PfTab;
-    let previousPanel: PfTabPanel;
+    describe('setting the second tab\'s `active` attribute', function() {
+      beforeEach(function() {
+        const [, tab] = element.querySelectorAll('pf-tab');
+        tab!.active = true;
+      });
 
-    beforeEach(async function() {
-      element = await createFixture<PfTabs>(TEMPLATE);
-      tab = element.querySelector('pf-tab:nth-of-type(2)')!;
-      tab.active = true;
-      await allUpdates(element);
-      panel = element.querySelector('pf-tab-panel:nth-of-type(2)')!;
-      previousTab = element.querySelector('pf-tab:first-of-type')!;
-      previousPanel = element.querySelector('pf-tab-panel:first-of-type')!;
-    });
+      beforeEach(updateComplete);
+      beforeEach(nextFrame);
 
-    it('should activate the tab', function() {
-      expect(tab.hasAttribute('active')).to.be.true;
-    });
+      it('should activate the second tab', function() {
+        const [, tab] = element.querySelectorAll('pf-tab');
+        expect(tab).to.have.attribute('active');
+      });
 
-    it('should activate its panel', function() {
-      expect(panel.hasAttribute('hidden')).to.be.false;
-    });
+      it('should activate its panel', function() {
+        const [, tab] = element.querySelectorAll('pf-tab');
+        expect(tab).to.not.have.attribute('hidden');
+      });
 
-    it('should deactivate previously active tab', function() {
-      expect(previousTab.hasAttribute('active')).to.be.false;
-    });
+      it('should deactivate previously active tab', function() {
+        expect(element.querySelector('pf-tab')).to.not.have.attribute('active');
+      });
 
-    it('should hide previously active panel', function() {
-      expect(previousPanel.hasAttribute('hidden')).to.be.true;
+      it('should hide previously active panel', function() {
+        expect(element.querySelector('pf-tab-panel')).to.have.attribute('hidden');
+      });
     });
-  });
 
-  describe('when `activeIndex` is set', function() {
-    let snapshot: A11yTreeSnapshot;
-    let index: number;
-    before(async function() {
-      element = await createFixture<PfTabs>(TEMPLATE);
-      index = 2;
-      element.activeIndex = index;
-      await allUpdates(element);
-      tab = element.querySelector('pf-tab:nth-of-type(3)')!;
-      snapshot = await a11ySnapshot();
-    });
+    describe('setting `activeIndex` to 2', function() {
+      beforeEach(function() {
+        element.activeIndex = 2;
+      });
 
-    it('should activate the tab', function() {
-      expect(tab.hasAttribute('active')).to.be.true;
-    });
+      beforeEach(updateComplete);
+      beforeEach(nextFrame);
 
-    it('should activate its panel', function() {
-      expect(panel.hasAttribute('hidden')).to.be.false;
-      expect(snapshot.children?.find(x => x.role === 'tabpanel')?.name).to.equal('Database');
-    });
-  });
+      it('should activate the third tab', function() {
+        const [,, tab] = element.querySelectorAll('pf-tab');
+        expect(tab).to.have.attribute('active');
+      });
 
-  describe('when a tab is `disabled`', function() {
-    let snapshot: A11yTreeSnapshot;
+      it('should activate the third panel', async function() {
+        const snapshot = await a11ySnapshot();
+        expect(snapshot.children?.find(x => x.role === 'tabpanel')?.name).to.equal('tab-3');
+      });
 
-    beforeEach(async function() {
-      element = await createFixture<PfTabs>(TEMPLATE);
-      tab = element.querySelector('pf-tab')!;
-      tab.disabled = true;
-      await allUpdates(element);
-      snapshot = await a11ySnapshot();
-    });
+      describe('then setting the first tab\'s `disabled` attribute', function() {
+        beforeEach(async function() {
+        element.querySelector('pf-tab')!.disabled = true;
+        });
 
-    it('should disable the button', function() {
-      const [disabledTab] = snapshot.children!;
-      const tabButton = disabledTab.children!.find(x => x.role === 'button')!;
-      expect(tabButton.disabled).to.equal(true);
-    });
+        beforeEach(updateComplete);
 
-    describe('when clicked', function() {
-      beforeEach(async function() {
-        tab.click();
-        await nextFrame();
-      });
+        it('should disable the button', async function() {
+          const snapshot = await a11ySnapshot();
+          const disabledTab = snapshot.children?.find(x => x.role === 'tab' && x.disabled);
+          expect(disabledTab).to.be.ok;
+        });
 
-      it('should not activate', function() {
-        expect(tab.hasAttribute('active')).to.be.false;
-      });
-    });
+        describe('and clicking the disabled tab', function() {
+          beforeEach(async function() {
+          element.querySelector('pf-tab')!.click();
+          });
 
-    describe('when activeIndex is set to disabled tab', function() {
-      beforeEach(async function() {
-        element.activeIndex = 0;
-        await allUpdates(element);
-      });
+          beforeEach(updateComplete);
 
-      it('should not activate', function() {
-        expect(tab.hasAttribute('active')).to.be.false;
-      });
-    });
-  });
+          it('should not activate', function() {
+            const [first] = element.querySelectorAll('pf-tab');
+            expect(first).to.not.have.attribute('active');
+          });
 
-  describe('when no active tab is given and the first tab is disabled', function() {
-    let secondTab: PfTab;
-    beforeEach(async function() {
-      element = await createFixture<PfTabs>(DISABLED);
-      await allUpdates(element);
-      secondTab = element.querySelector('pf-tab:nth-of-type(2)')!;
-    });
+          it('should present the third panel to the ax tree', async function() {
+            const snapshot = await a11ySnapshot();
+            expect(snapshot.children?.find(x => x.role === 'tabpanel')?.name).to.equal('tab-3');
+          });
+        });
 
-    it('should activate the next focusable tab', function() {
-      expect(secondTab.hasAttribute('active')).to.equal(true);
-    });
-  });
+        describe('then setting `activeIndex` to 0 (i.e. the disabled tab\'s index)', function() {
+          beforeEach(function() {
+            element.activeIndex = 0;
+          });
 
-  describe('when viewed in a small viewport', function() {
-    beforeEach(async function() {
-      await setViewport({ width: 240, height: 640 });
-      element = await createFixture<PfTabs>(TEMPLATE);
-      await allUpdates(element);
-    });
+          beforeEach(updateComplete);
 
-    it('should have visible scroll buttons if overflowed', function() {
-      /**
-       * Note: overflow buttons are not included in the accessibility tree otherwise we'd test
-       * for buttons there. tabindex="-1" is used on the buttons to prevent focus and was a
-       * decision made to keep logical keyboard navigation order flow between tabs and panels
-       * as the next overflow button exists in the DOM between the tabs container and the open panel
-       * and would disrupt the expected flow. For keyboard users they are able to scroll using the
-       * left and right arrows keys and do not need direct access to the overflow buttons but still
-       * exist as visual cues for which direction is overflowed
-       **/
-      const previousTab = element.shadowRoot!.querySelector('#previousTab')!;
-      const nextTab = element.shadowRoot!.querySelector('#nextTab')!;
-      expect(previousTab).to.not.be.null;
-      expect(nextTab).to.not.be.null;
-      const prevDisplayStyle = getComputedStyle(previousTab).display;
-      const nextDisplayStyle = getComputedStyle(nextTab).display;
-      expect(prevDisplayStyle ).to.not.equal('none');
-      expect(nextDisplayStyle).to.not.equal('none');
-    });
-  });
+          it('should not activate the first tab', function() {
+            expect(element.querySelector('pf-tab')).to.not.have.attribute('active');
+          });
 
-  describe(`when navigated by keyboard`, function() {
-    let nextTab: PfTab;
-    let afterKeyPress: Element | null;
+          it('should present the third panel to the ax tree', async function() {
+            const snapshot = await a11ySnapshot();
+            expect(snapshot.children?.find(x => x.role === 'tabpanel')?.name).to.equal('tab-3');
+          });
+        });
+      });
+    });
 
-    describe('when pressing the right arrow key from first tab', function() {
+    describe('when viewed in a small viewport', function() {
       beforeEach(async function() {
-        element = await createFixture<PfTabs>(TEMPLATE);
-        await allUpdates(element);
-        tab = element.querySelector('pf-tab:first-of-type')!;
-        tab.focus();
-        await allUpdates(element);
-        await sendKeys({ down: 'ArrowRight' });
-        await allUpdates(element);
-        afterKeyPress = document.activeElement;
-        nextTab = element.querySelector('pf-tab:nth-of-type(2)')!;
+        // this is a comically narrow viewport, but our tabs have quite short
+        // labels, so viewport must be itsy-pitsy in order to cause overflow
+        await setViewport({ width: 100, height: 640 });
       });
 
-      it('should activate the next tab', function() {
-        expect(nextTab.hasAttribute('active')).to.be.true;
-        expect(afterKeyPress).to.equal(nextTab);
+      beforeEach(nextFrame);
+      beforeEach(updateComplete);
+      beforeEach(nextFrame);
+      beforeEach(updateComplete);
+
+
+      it('should have visible scroll buttons if overflowed', function() {
+        // Note: overflow buttons are not included in the accessibility tree otherwise we'd test
+        // for buttons there. tabindex="-1" is used on the buttons to prevent focus and was a
+        // decision made to keep logical keyboard navigation order flow between tabs and panels
+        // as the next overflow button exists in the DOM between the tabs container and the open panel
+        // and would disrupt the expected flow. For keyboard users they are able to scroll using the
+        // left and right arrows keys and do not need direct access to the overflow buttons but still
+        // exist as visual cues for which direction is overflowed
+        const previousTab = element.shadowRoot!.querySelector('#previousTab')!;
+        const nextTab = element.shadowRoot!.querySelector('#nextTab')!;
+        expect(previousTab).to.not.be.null;
+        expect(nextTab).to.not.be.null;
+        const prevDisplayStyle = getComputedStyle(previousTab).display;
+        const nextDisplayStyle = getComputedStyle(nextTab).display;
+        expect(prevDisplayStyle ).to.not.equal('none');
+        expect(nextDisplayStyle).to.not.equal('none');
       });
     });
 
-    describe('when pressing the left arrow key from first tab', function() {
-      beforeEach(async function() {
-        element = await createFixture<PfTabs>(TEMPLATE);
-        await allUpdates(element);
-        tab = element.querySelector('pf-tab:first-of-type')!;
-        tab.focus();
-        await allUpdates(element);
-        await sendKeys({ down: 'ArrowLeft' });
-        await allUpdates(element);
-        afterKeyPress = document.activeElement;
-        nextTab = element.querySelector('pf-tab:last-of-type')!;
-      });
+    describe(`when navigated by keyboard`, function() {
+      describe('when focused on the first tab', function() {
+        beforeEach(async function() {
+          element.querySelector('pf-tab')!.focus();
+        });
+
+        describe('pressing ArrowRight', function() {
+          beforeEach(async function() {
+            await sendKeys({ down: 'ArrowRight' });
+          });
+
+          beforeEach(updateComplete);
+
+          it('should activate the next tab', function() {
+            const [first, second, third] = element.querySelectorAll('pf-tab');
+            expect(first).to.not.have.attribute('active');
+            expect(second).to.have.attribute('active');
+            expect(third).to.not.have.attribute('active');
+          });
+        });
 
-      it('should activate the last tab', function() {
-        expect(nextTab.hasAttribute('active')).to.be.true;
-        expect(afterKeyPress).to.equal(nextTab);
+        describe('pressing ArrowLeft', function() {
+          beforeEach(async function() {
+            await sendKeys({ down: 'ArrowLeft' });
+          });
+
+          it('should activate the last tab', function() {
+            const [first, second, third] = element.querySelectorAll('pf-tab');
+            expect(first).to.not.have.attribute('active');
+            expect(second).to.not.have.attribute('active');
+            expect(third).to.have.attribute('active');
+          });
+          describe('then pressing ArrowRight', function() {
+            beforeEach(async function() {
+              await sendKeys({ down: 'ArrowRight' });
+            });
+
+            beforeEach(updateComplete);
+
+            it('should activate the first tab', function() {
+              const [first, second, third] = element.querySelectorAll('pf-tab');
+              expect(first).to.have.attribute('active');
+              expect(second).to.not.have.attribute('active');
+              expect(third).to.not.have.attribute('active');
+            });
+          });
+        });
       });
     });
 
-    describe('when pressing the right arrow key from last tab', function() {
-      beforeEach(async function() {
-        element = await createFixture<PfTabs>(TEMPLATE);
-        await allUpdates(element);
-        tab = element.querySelector('pf-tab:last-of-type')!;
-        tab.focus();
-        await allUpdates(element);
-        await sendKeys({ down: 'ArrowRight' });
-        await allUpdates(element);
-        afterKeyPress = document.activeElement;
-        nextTab = element.querySelector('pf-tab:first-of-type')!;
+    describe('setting the `manual` attribute', function() {
+      beforeEach(function() {
+        element.setAttribute('manual', '');
       });
 
-      it('should activate the last tab', function() {
-        expect(nextTab.hasAttribute('active')).to.be.true;
-        expect(afterKeyPress).to.equal(nextTab);
+      beforeEach(updateComplete);
+
+      describe('pressing Tab', function() {
+        beforeEach(press('Tab'));
+        describe('pressing ArrowRight key', function() {
+          beforeEach(press('ArrowRight'));
+
+          beforeEach(updateComplete);
+
+          it('should not activate second tab', function() {
+            const [first, second, third] = element.querySelectorAll('pf-tab');
+            expect(first).to.have.attribute('active');
+            expect(second).to.not.have.attribute('active');
+            expect(third).to.not.have.attribute('active');
+          });
+
+          it('should focus the second tab', function() {
+            const [, second] = element.querySelectorAll('pf-tab');
+            expect(document.activeElement).to.equal(second);
+          });
+
+          describe('pressing enter key', function() {
+            beforeEach(press('Enter'));
+
+            beforeEach(updateComplete);
+
+            it('should activate second tab', function() {
+              const [first, second, third] = element.querySelectorAll('pf-tab');
+              expect(first).to.not.have.attribute('active');
+              expect(second).to.have.attribute('active');
+              expect(third).to.not.have.attribute('active');
+              expect(document.activeElement).to.equal(second);
+            });
+          });
+        });
       });
     });
   });
 
-  describe('when `manual` attribute is set', function() {
+  describe('when no active tab is given and the first tab is disabled', function() {
     let element: PfTabs;
-    let firstTab: PfTab;
-    let secondTab: PfTab;
-    let initialFocus: Element | null;
-    let afterFocus: Element | null;
 
     beforeEach(async function() {
-      element = await createFixture<PfTabs>(TEMPLATE);
-      element.manual = true;
-      await allUpdates(element);
-      [firstTab, secondTab] = element.querySelectorAll('pf-tab');
-      initialFocus = document.activeElement;
+      element = await createFixture<PfTabs>(html`
+        <pf-tabs>
+          <pf-tab slot="tab" disabled>Users</pf-tab>
+          <pf-tab-panel>Users</pf-tab-panel>
+          <pf-tab slot="tab">Containers</pf-tab>
+          <pf-tab-panel>Containers</pf-tab-panel>
+          <pf-tab slot="tab">Database</pf-tab>
+          <pf-tab-panel>Database</pf-tab-panel>
+          <pf-tab slot="tab" disabled>Disabled</pf-tab>
+          <pf-tab-panel>Disabled</pf-tab-panel>
+          <pf-tab slot="tab" aria-disabled="true">Aria Disabled</pf-tab>
+          <pf-tab-panel>Aria Disabled</pf-tab-panel>
+        </pf-tabs>
+      `);
     });
 
-    describe('pressing right arrow key', function() {
-      beforeEach(async function() {
-        firstTab?.focus(); // ensure focus on first tab
-        await sendKeys({ down: 'ArrowRight' });
-        await allUpdates(element);
-        afterFocus = document.activeElement;
-      });
-
-      it('should not activate second tab', function() {
-        expect(firstTab.active).to.be.true;
-        expect(secondTab.active).to.be.false;
-        expect(initialFocus).to.be.ok
-          .and.to.not.equal(afterFocus);
-        expect(initialFocus).to.not.equal(secondTab);
-      });
-
-      describe('pressing enter key', function() {
-        beforeEach(async function() {
-          await sendKeys({ down: 'Enter' });
-          await allUpdates(element);
-          afterFocus = document.activeElement;
-        });
-
-        it('should activate second tab', function() {
-          expect(firstTab.active).to.be.false;
-          expect(secondTab.active).to.be.true;
-          expect(afterFocus).to.equal(secondTab);
-          expect(afterFocus).to.not.equal(initialFocus);
-          expect(afterFocus).to.not.equal(firstTab);
-        });
-      });
+    it('should activate the next focusable tab', function() {
+      const [, second] = element.querySelectorAll('pf-tab');
+      expect(second).to.have.attribute('active');
     });
   });
 });
diff --git a/package-lock.json b/package-lock.json
index 038b5ce99c..b53c7b883b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,8 +20,8 @@
         "@fortawesome/free-brands-svg-icons": "^6.4.0",
         "@fortawesome/free-regular-svg-icons": "^6.4.0",
         "@fortawesome/free-solid-svg-icons": "^6.4.0",
-        "@jspm/generator": "^2.0.0",
-        "@lit/react": "^1.0.2",
+        "@jspm/generator": "^2.0.1",
+        "@lit/react": "^1.0.3",
         "@octokit/core": "^5.0.2",
         "@patternfly/patternfly": "^4.224.2",
         "@rhds/elements": "^1.3.0",
@@ -36,10 +36,10 @@
         "fuse.js": "^7.0.0",
         "husky": "^8.0.3",
         "leasot": "^13.3.0",
-        "lit": "^3.1.1",
+        "lit": "^3.1.2",
         "nunjucks": "^3.2.4",
         "prompts": "^2.4.2",
-        "wireit": "^0.14.3",
+        "wireit": "^0.14.4",
         "zero-md": "^2.5.3"
       },
       "engines": {
@@ -51,8 +51,9 @@
       "version": "2.4.1",
       "license": "MIT",
       "dependencies": {
-        "@floating-ui/dom": "^1.5.4",
-        "lit": "^3.1.1"
+        "@floating-ui/dom": "^1.6.3",
+        "@lit/context": "^1.1.0",
+        "lit": "^3.1.2"
       }
     },
     "elements": {
@@ -60,9 +61,10 @@
       "version": "2.4.0",
       "license": "MIT",
       "dependencies": {
+        "@lit/context": "^1.1.0",
         "@patternfly/icons": "^1.0.2",
         "@patternfly/pfe-core": "^2.4.1",
-        "lit": "^3.1.1",
+        "lit": "^3.1.2",
         "tslib": "^2.6.2"
       }
     },
@@ -2217,9 +2219,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.56.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.56.0.tgz",
-      "integrity": "sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==",
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz",
+      "integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
@@ -2240,11 +2242,11 @@
       }
     },
     "node_modules/@floating-ui/dom": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.4.tgz",
-      "integrity": "sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==",
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz",
+      "integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==",
       "dependencies": {
-        "@floating-ui/core": "^1.5.3",
+        "@floating-ui/core": "^1.0.0",
         "@floating-ui/utils": "^0.2.0"
       }
     },
@@ -2471,9 +2473,9 @@
       "license": "MIT"
     },
     "node_modules/@jspm/generator": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@jspm/generator/-/generator-2.0.0.tgz",
-      "integrity": "sha512-ZfKjivCvEGHKs19FDcVaYC2fVem54IBlxvU1+pOa47+wRhzvRX+c4eGyNVD6jkE860VrJMJYTJD2dfcGdEKrSQ==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@jspm/generator/-/generator-2.0.1.tgz",
+      "integrity": "sha512-MzP7CFQ4c/LYvWzpcP/gzydipEAgBZcfxQ0B4LRlt01TFbCtoGWNYkHWYEDqz0JYill5dl67l1P6nGqd9tc9eg==",
       "dependencies": {
         "@babel/core": "^7.20.12",
         "@babel/plugin-syntax-import-assertions": "^7.20.0",
@@ -2506,25 +2508,33 @@
       }
     },
     "node_modules/@lit-labs/ssr-dom-shim": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.2.tgz",
-      "integrity": "sha512-jnOD+/+dSrfTWYfSXBXlo5l5f0q1UuJo3tkbMDCYA2lKUYq79jaxqtGEvnRoh049nt1vdo1+45RinipU6FGY2g=="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.0.tgz",
+      "integrity": "sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g=="
+    },
+    "node_modules/@lit/context": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@lit/context/-/context-1.1.0.tgz",
+      "integrity": "sha512-fCyv4dsH05wCNm3AKbB+PdYbXGJd/XT8OOwo4hVmD4COq5wOWJlQreGAMDvmHZ7osqxuu06Y4nmP6ooXpN7ErA==",
+      "dependencies": {
+        "@lit/reactive-element": "^1.6.2 || ^2.0.0"
+      }
     },
     "node_modules/@lit/react": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@lit/react/-/react-1.0.2.tgz",
-      "integrity": "sha512-UJ5TQ46DPcJDIzyjbwbj6Iye0XcpCxL2yb03zcWq1BpWchpXS3Z0BPVhg7zDfZLF6JemPml8u/gt/+KwJ/23sg==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@lit/react/-/react-1.0.3.tgz",
+      "integrity": "sha512-RGoPMrAPbFjQFXFbfmYdotw000DyChehTim+d562HRXvFGw//KxouI8jNOcc3Kw/1uqUA1SJqXFtKKxK0NUrww==",
       "dev": true,
       "peerDependencies": {
         "@types/react": "17 || 18"
       }
     },
     "node_modules/@lit/reactive-element": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.3.tgz",
-      "integrity": "sha512-e067EuTNNgOHm1tZcc0Ia7TCzD/9ZpoPegHKgesrGK6pSDRGkGDAQbYuQclqLPIoJ9eC8Kb9mYtGryWcM5AywA==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz",
+      "integrity": "sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==",
       "dependencies": {
-        "@lit-labs/ssr-dom-shim": "^1.1.2"
+        "@lit-labs/ssr-dom-shim": "^1.2.0"
       }
     },
     "node_modules/@manypkg/find-root": {
@@ -6844,15 +6854,15 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.56.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.56.0.tgz",
-      "integrity": "sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==",
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz",
+      "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
         "@eslint/eslintrc": "^2.1.4",
-        "@eslint/js": "8.56.0",
-        "@humanwhocodes/config-array": "^0.11.13",
+        "@eslint/js": "8.57.0",
+        "@humanwhocodes/config-array": "^0.11.14",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
         "@ungap/structured-clone": "^1.2.0",
@@ -6976,16 +6986,17 @@
       }
     },
     "node_modules/eslint-plugin-jsonc": {
-      "version": "2.12.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jsonc/-/eslint-plugin-jsonc-2.12.2.tgz",
-      "integrity": "sha512-iv2BLi1bqkSxCPEvDOY6xiBXzAFi5iS2gTOU8fnXGfKxkC6MvC5Tw2XAgbP6R6WRlqV7AtFItx4Xb7mCONtmmw==",
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jsonc/-/eslint-plugin-jsonc-2.13.0.tgz",
+      "integrity": "sha512-2wWdJfpO/UbZzPDABuUVvlUQjfMJa2p2iQfYt/oWxOMpXCcjuiMUSaA02gtY/Dbu82vpaSqc+O7Xq6ECHwtIxA==",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "eslint-compat-utils": "^0.4.0",
         "espree": "^9.6.1",
         "graphemer": "^1.4.0",
         "jsonc-eslint-parser": "^2.0.4",
-        "natural-compare": "^1.4.0"
+        "natural-compare": "^1.4.0",
+        "synckit": "^0.6.0"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -6997,6 +7008,17 @@
         "eslint": ">=6.0.0"
       }
     },
+    "node_modules/eslint-plugin-jsonc/node_modules/synckit": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.6.2.tgz",
+      "integrity": "sha512-Vhf+bUa//YSTYKseDiiEuQmhGCoIF3CVBhunm3r/DQnYiGT4JssmnKQc44BIyOZRK2pKjXXAgbhfmbeoC9CJpA==",
+      "dependencies": {
+        "tslib": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=12.20"
+      }
+    },
     "node_modules/eslint-plugin-lit": {
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-lit/-/eslint-plugin-lit-1.11.0.tgz",
@@ -7014,9 +7036,9 @@
       }
     },
     "node_modules/eslint-plugin-lit-a11y": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-lit-a11y/-/eslint-plugin-lit-a11y-4.1.1.tgz",
-      "integrity": "sha512-PTUEwTMMtbZccrGQUPFfWI3Ope8oF8XEMLUckNbV0IvDTkEbXYlYlvNrkzI92gYKAVaVlNi2QZ/0n8Q3YiOBUg==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-lit-a11y/-/eslint-plugin-lit-a11y-4.1.2.tgz",
+      "integrity": "sha512-otrF1Q0uv6RUz/AflVgnf1rVzbfQJfgUmnB+xBl71IR8EwtJGEOrqGs3Ky/4APMda+maF6bsZLctppcz16m7Hw==",
       "dependencies": {
         "aria-query": "^5.1.3",
         "axe-core": "^4.3.3",
@@ -9949,13 +9971,13 @@
       "license": "MIT"
     },
     "node_modules/lit": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.1.tgz",
-      "integrity": "sha512-hF1y4K58+Gqrz+aAPS0DNBwPqPrg6P04DuWK52eMkt/SM9Qe9keWLcFgRcEKOLuDlRZlDsDbNL37Vr7ew1VCuw==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-3.1.2.tgz",
+      "integrity": "sha512-VZx5iAyMtX7CV4K8iTLdCkMaYZ7ipjJZ0JcSdJ0zIdGxxyurjIn7yuuSxNBD7QmjvcNJwr0JS4cAdAtsy7gZ6w==",
       "dependencies": {
-        "@lit/reactive-element": "^2.0.0",
-        "lit-element": "^4.0.0",
-        "lit-html": "^3.1.0"
+        "@lit/reactive-element": "^2.0.4",
+        "lit-element": "^4.0.4",
+        "lit-html": "^3.1.2"
       }
     },
     "node_modules/lit-analyzer": {
@@ -10047,19 +10069,19 @@
       }
     },
     "node_modules/lit-element": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.3.tgz",
-      "integrity": "sha512-2vhidmC7gGLfnVx41P8UZpzyS0Fb8wYhS5RCm16cMW3oERO0Khd3EsKwtRpOnttuByI5rURjT2dfoA7NlInCNw==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.0.4.tgz",
+      "integrity": "sha512-98CvgulX6eCPs6TyAIQoJZBCQPo80rgXR+dVBs61cstJXqtI+USQZAbA4gFHh6L/mxBx9MrgPLHLsUgDUHAcCQ==",
       "dependencies": {
-        "@lit-labs/ssr-dom-shim": "^1.1.2",
-        "@lit/reactive-element": "^2.0.0",
-        "lit-html": "^3.1.0"
+        "@lit-labs/ssr-dom-shim": "^1.2.0",
+        "@lit/reactive-element": "^2.0.4",
+        "lit-html": "^3.1.2"
       }
     },
     "node_modules/lit-element/node_modules/lit-html": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.1.tgz",
-      "integrity": "sha512-x/EwfGk2D/f4odSFM40hcGumzqoKv0/SUh6fBO+1Ragez81APrcAMPo1jIrCDd9Sn+Z4CT867HWKViByvkDZUA==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.2.tgz",
+      "integrity": "sha512-3OBZSUrPnAHoKJ9AMjRL/m01YJxQMf+TMHanNtTHG68ubjnZxK0RFl102DPzsw4mWnHibfZIBJm3LWCZ/LmMvg==",
       "dependencies": {
         "@types/trusted-types": "^2.0.2"
       }
@@ -10073,9 +10095,9 @@
       }
     },
     "node_modules/lit/node_modules/lit-html": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.1.tgz",
-      "integrity": "sha512-x/EwfGk2D/f4odSFM40hcGumzqoKv0/SUh6fBO+1Ragez81APrcAMPo1jIrCDd9Sn+Z4CT867HWKViByvkDZUA==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.1.2.tgz",
+      "integrity": "sha512-3OBZSUrPnAHoKJ9AMjRL/m01YJxQMf+TMHanNtTHG68ubjnZxK0RFl102DPzsw4mWnHibfZIBJm3LWCZ/LmMvg==",
       "dependencies": {
         "@types/trusted-types": "^2.0.2"
       }
@@ -15106,9 +15128,9 @@
       }
     },
     "node_modules/wireit": {
-      "version": "0.14.3",
-      "resolved": "https://registry.npmjs.org/wireit/-/wireit-0.14.3.tgz",
-      "integrity": "sha512-vNSzIBJ1YLMM6dzGUiUMw11KmHOFiXIaOHcQPWVT4j5oCaXQSIYS5AExEzRkAAlm5F0hRPTwDUoazUHu5ZLCNQ==",
+      "version": "0.14.4",
+      "resolved": "https://registry.npmjs.org/wireit/-/wireit-0.14.4.tgz",
+      "integrity": "sha512-WNAXEw2cJs1nSRNJNRcPypARZNumgtsRTJFTNpd6turCA6JZ6cEwl4ZU3C1IHc/3IaXoPu9LdxcI5TBTdD6/pg==",
       "dev": true,
       "dependencies": {
         "braces": "^3.0.2",
@@ -15359,12 +15381,12 @@
         "@types/eslint": "^8.56.2",
         "@typescript-eslint/eslint-plugin": "^6.19.0",
         "@typescript-eslint/parser": "^6.19.0",
-        "eslint": "^8.56.0",
+        "eslint": "^8.57.0",
         "eslint-config-google": "0.14.0",
         "eslint-plugin-html": "7.1.0",
         "eslint-plugin-json-schema-validator": "^4.8.3",
-        "eslint-plugin-jsonc": "^2.12.2",
-        "eslint-plugin-lit-a11y": "^4.1.1",
+        "eslint-plugin-jsonc": "^2.13.0",
+        "eslint-plugin-lit-a11y": "^4.1.2",
         "eslint-plugin-no-only-tests": "^3.1.0",
         "eslint-plugin-unicorn": "46.0.0"
       },
@@ -15423,7 +15445,7 @@
         "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
         "@changesets/cli": "^2.27.1",
         "@custom-elements-manifest/analyzer": "^0.5.7",
-        "@jspm/generator": "^2.0.0",
+        "@jspm/generator": "^2.0.1",
         "@koa/router": "^12.0.1",
         "@open-wc/testing": "^4.0.0",
         "@playwright/test": "^1.41.0",
@@ -15460,12 +15482,12 @@
         "esbuild": "^0.19.11",
         "esbuild-plugin-lit-css": "^2.1.0",
         "esbuild-plugin-minify-html-literals": "^1.0.6",
-        "eslint": "^8.56.0",
+        "eslint": "^8.57.0",
         "execa": "^8.0.1",
         "glob": "^10.3.10",
         "html-include-element": "^0.3.0",
         "koa-send": "^5.0.1",
-        "lit": "^3.1.1",
+        "lit": "^3.1.2",
         "markdown-it-anchor": "^8.6.7",
         "nunjucks": "^3.2.4",
         "patch-package": "^8.0.0",
@@ -15500,4 +15522,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 9f1686c012..b2df489e17 100644
--- a/package.json
+++ b/package.json
@@ -296,8 +296,8 @@
     "@fortawesome/free-brands-svg-icons": "^6.4.0",
     "@fortawesome/free-regular-svg-icons": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
-    "@jspm/generator": "^2.0.0",
-    "@lit/react": "^1.0.2",
+    "@jspm/generator": "^2.0.1",
+    "@lit/react": "^1.0.3",
     "@octokit/core": "^5.0.2",
     "@patternfly/patternfly": "^4.224.2",
     "@rhds/elements": "^1.3.0",
@@ -312,10 +312,10 @@
     "fuse.js": "^7.0.0",
     "husky": "^8.0.3",
     "leasot": "^13.3.0",
-    "lit": "^3.1.1",
+    "lit": "^3.1.2",
     "nunjucks": "^3.2.4",
     "prompts": "^2.4.2",
-    "wireit": "^0.14.3",
+    "wireit": "^0.14.4",
     "zero-md": "^2.5.3"
   },
   "workspaces": [
diff --git a/tools/eslint-config/package.json b/tools/eslint-config/package.json
index d546fbe64b..8c75edc419 100644
--- a/tools/eslint-config/package.json
+++ b/tools/eslint-config/package.json
@@ -24,12 +24,12 @@
     "@types/eslint": "^8.56.2",
     "@typescript-eslint/eslint-plugin": "^6.19.0",
     "@typescript-eslint/parser": "^6.19.0",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-config-google": "0.14.0",
     "eslint-plugin-html": "7.1.0",
     "eslint-plugin-json-schema-validator": "^4.8.3",
-    "eslint-plugin-jsonc": "^2.12.2",
-    "eslint-plugin-lit-a11y": "^4.1.1",
+    "eslint-plugin-jsonc": "^2.13.0",
+    "eslint-plugin-lit-a11y": "^4.1.2",
     "eslint-plugin-no-only-tests": "^3.1.0",
     "eslint-plugin-unicorn": "46.0.0"
   }
diff --git a/tools/pfe-tools/dev-server/config.ts b/tools/pfe-tools/dev-server/config.ts
index 004e33cb6a..85d2ccbbe4 100644
--- a/tools/pfe-tools/dev-server/config.ts
+++ b/tools/pfe-tools/dev-server/config.ts
@@ -123,6 +123,7 @@ export function pfeDevServerConfig(options?: PfeDevServerConfigOptions): DevServ
           'lit-html': 'nodemodules',
           'lit': 'nodemodules',
           '@lit/reactive-element': 'nodemodules',
+          '@lit/context': 'nodemodules',
           ...config.importMapOptions?.providers,
         },
         resolveHtmlUrl(fileUrl, rootUrl) {
diff --git a/tools/pfe-tools/package.json b/tools/pfe-tools/package.json
index 85a25af4e8..b46f742bc0 100644
--- a/tools/pfe-tools/package.json
+++ b/tools/pfe-tools/package.json
@@ -64,7 +64,7 @@
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
     "@changesets/cli": "^2.27.1",
     "@custom-elements-manifest/analyzer": "^0.5.7",
-    "@jspm/generator": "^2.0.0",
+    "@jspm/generator": "^2.0.1",
     "@koa/router": "^12.0.1",
     "@open-wc/testing": "^4.0.0",
     "@playwright/test": "^1.41.0",
@@ -101,12 +101,12 @@
     "esbuild": "^0.19.11",
     "esbuild-plugin-lit-css": "^2.1.0",
     "esbuild-plugin-minify-html-literals": "^1.0.6",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "execa": "^8.0.1",
     "glob": "^10.3.10",
     "html-include-element": "^0.3.0",
     "koa-send": "^5.0.1",
-    "lit": "^3.1.1",
+    "lit": "^3.1.2",
     "markdown-it-anchor": "^8.6.7",
     "nunjucks": "^3.2.4",
     "patch-package": "^8.0.0",