From 4633e251cac7d5e012f493ec3169db7735a4e98a Mon Sep 17 00:00:00 2001
From: Kristin Bradley <kristin.bradley@hashicorp.com>
Date: Tue, 28 Oct 2025 16:42:05 -0700
Subject: [PATCH 01/14] HDS-5572 Fix inheritance of color styles for Buttons
 witin Modals triggered from within the SideNav or AppHeader

---
 .changeset/fine-rocks-trade.md                |  5 +++
 .../src/styles/components/app-header.scss     |  7 +++-
 .../styles/components/side-nav/header.scss    |  7 +++-
 .../components/mock/app/sidebar/side-nav.gts  | 34 +++++++++++++++++++
 4 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/fine-rocks-trade.md

diff --git a/.changeset/fine-rocks-trade.md b/.changeset/fine-rocks-trade.md
new file mode 100644
index 00000000000..1fe8547a316
--- /dev/null
+++ b/.changeset/fine-rocks-trade.md
@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": patch
+---
+
+`Button` - Fixed color inheritance for Buttons within a `Modal` triggered from either the `SideNav` or `AppHeader`
diff --git a/packages/components/src/styles/components/app-header.scss b/packages/components/src/styles/components/app-header.scss
index 46167a0f7ae..afe1404bea7 100644
--- a/packages/components/src/styles/components/app-header.scss
+++ b/packages/components/src/styles/components/app-header.scss
@@ -110,7 +110,12 @@
   .hds-dropdown-toggle-button,
   .hds-dropdown-toggle-icon {
     // Apply dark theme to child interactive components not within a nested dropdown
-    &:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *) {
+    &:not(
+      .hds-dropdown * *,
+      .ember-basic-dropdown-trigger * *,
+      .ember-basic-dropdown-content * *,
+      .hds-dialog-primitive__wrapper *
+    ) {
       @include hds-interactive-dark-theme();
 
       // disabled state:
diff --git a/packages/components/src/styles/components/side-nav/header.scss b/packages/components/src/styles/components/side-nav/header.scss
index e79eb3d3add..4b02de0cf59 100644
--- a/packages/components/src/styles/components/side-nav/header.scss
+++ b/packages/components/src/styles/components/side-nav/header.scss
@@ -76,7 +76,12 @@
   .hds-dropdown-toggle-button,
   .hds-dropdown-toggle-icon {
     // Apply dark theme to child interactive components not within a nested dropdown
-    &:not(.hds-dropdown * *, .ember-basic-dropdown-trigger * *, .ember-basic-dropdown-content * *) {
+    &:not(
+      .hds-dropdown * *,
+      .ember-basic-dropdown-trigger * *,
+      .ember-basic-dropdown-content * *,
+      .hds-dialog-primitive__wrapper *
+    ) {
       @include hds-interactive-dark-theme();
 
       // disabled state:
diff --git a/showcase/app/components/mock/app/sidebar/side-nav.gts b/showcase/app/components/mock/app/sidebar/side-nav.gts
index c5f61f41237..cf0793e5295 100644
--- a/showcase/app/components/mock/app/sidebar/side-nav.gts
+++ b/showcase/app/components/mock/app/sidebar/side-nav.gts
@@ -13,8 +13,12 @@ import {
   HdsSideNavList,
   HdsButton,
   HdsDropdown,
+  HdsButtonSet,
 } from '@hashicorp/design-system-components/components';
 
+import ModalWithTrigger from '../../../page-components/modal/code-fragments/with-trigger';
+import { on } from '@ember/modifier';
+
 // types
 import type { HdsSideNavSignature } from '@hashicorp/design-system-components/components/hds/side-nav/index';
 import type Owner from '@ember/owner';
@@ -152,8 +156,38 @@ export default class MockAppSidebarOldSideNav extends Component<MockAppSidebarOl
             @icon="guide"
             @text="Documentation"
           />
+          <SNL.Item>
+            <ModalWithTrigger @triggerText="Open basic modal" id="basic-modal">
+              <:modal as |M|>
+                <M.Header>
+                  Modal title
+                </M.Header>
+                <M.Body>
+                  <p class="hds-typography-body-300 hds-foreground-primary">
+                    Modal content
+                  </p>
+                </M.Body>
+                <M.Footer as |F|>
+                  <HdsButtonSet>
+                    <HdsButton
+                      type="submit"
+                      @text="Leave Beta"
+                      {{on "click" F.close}}
+                    />
+                    <HdsButton
+                      type="button"
+                      @text="Cancel"
+                      @color="secondary"
+                      {{on "click" F.close}}
+                    />
+                  </HdsButtonSet>
+                </M.Footer>
+              </:modal>
+            </ModalWithTrigger>
+          </SNL.Item>
         </HdsSideNavList>
       </:body>
+
       <:footer>
         {{#if this.showFooter}}
           <HdsDropdown

From dae122cdc7ee288360357a277eb3b3fdb636ffbc Mon Sep 17 00:00:00 2001
From: Kristin Bradley <kristin.bradley@hashicorp.com>
Date: Tue, 28 Oct 2025 16:48:09 -0700
Subject: [PATCH 02/14] Fix color inheritance for Buttons in Modal

---
 .changeset/fine-rocks-trade.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.changeset/fine-rocks-trade.md b/.changeset/fine-rocks-trade.md
index 1fe8547a316..e858a37cd63 100644
--- a/.changeset/fine-rocks-trade.md
+++ b/.changeset/fine-rocks-trade.md
@@ -2,4 +2,6 @@
 "@hashicorp/design-system-components": patch
 ---
 
-`Button` - Fixed color inheritance for Buttons within a `Modal` triggered from either the `SideNav` or `AppHeader`
+<!-- START components/button -->
+`Button` - Fixed color inheritance for Buttons within a `Modal` which is triggered from either the `SideNav` or `AppHeader`
+<!-- END -->

From 8518743141d2f76edcca1a861e2ddeb6dea4deea Mon Sep 17 00:00:00 2001
From: Kristin Bradley <kristin.bradley@hashicorp.com>
Date: Tue, 28 Oct 2025 16:48:44 -0700
Subject: [PATCH 03/14] Update
 showcase/app/components/mock/app/sidebar/side-nav.gts

---
 showcase/app/components/mock/app/sidebar/side-nav.gts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/showcase/app/components/mock/app/sidebar/side-nav.gts b/showcase/app/components/mock/app/sidebar/side-nav.gts
index cf0793e5295..4eb88f0c893 100644
--- a/showcase/app/components/mock/app/sidebar/side-nav.gts
+++ b/showcase/app/components/mock/app/sidebar/side-nav.gts
@@ -187,7 +187,6 @@ export default class MockAppSidebarOldSideNav extends Component<MockAppSidebarOl
           </SNL.Item>
         </HdsSideNavList>
       </:body>
-
       <:footer>
         {{#if this.showFooter}}
           <HdsDropdown

From 70c026b158cf0d29a82bcfb4eb29d54e20fe408d Mon Sep 17 00:00:00 2001
From: Kristin Bradley <kristin.bradley@hashicorp.com>
Date: Wed, 29 Oct 2025 11:36:23 -0700
Subject: [PATCH 04/14] HDS-5572 Remove Modal example from AppFrame demo, add
 nested Button content examples to SideNav Showcase

---
 .../components/mock/app/sidebar/side-nav.gts  |  33 ----
 .../side-nav/sub-sections/content.gts         | 183 ++++++++++++++++++
 2 files changed, 183 insertions(+), 33 deletions(-)

diff --git a/showcase/app/components/mock/app/sidebar/side-nav.gts b/showcase/app/components/mock/app/sidebar/side-nav.gts
index 4eb88f0c893..c5f61f41237 100644
--- a/showcase/app/components/mock/app/sidebar/side-nav.gts
+++ b/showcase/app/components/mock/app/sidebar/side-nav.gts
@@ -13,12 +13,8 @@ import {
   HdsSideNavList,
   HdsButton,
   HdsDropdown,
-  HdsButtonSet,
 } from '@hashicorp/design-system-components/components';
 
-import ModalWithTrigger from '../../../page-components/modal/code-fragments/with-trigger';
-import { on } from '@ember/modifier';
-
 // types
 import type { HdsSideNavSignature } from '@hashicorp/design-system-components/components/hds/side-nav/index';
 import type Owner from '@ember/owner';
@@ -156,35 +152,6 @@ export default class MockAppSidebarOldSideNav extends Component<MockAppSidebarOl
             @icon="guide"
             @text="Documentation"
           />
-          <SNL.Item>
-            <ModalWithTrigger @triggerText="Open basic modal" id="basic-modal">
-              <:modal as |M|>
-                <M.Header>
-                  Modal title
-                </M.Header>
-                <M.Body>
-                  <p class="hds-typography-body-300 hds-foreground-primary">
-                    Modal content
-                  </p>
-                </M.Body>
-                <M.Footer as |F|>
-                  <HdsButtonSet>
-                    <HdsButton
-                      type="submit"
-                      @text="Leave Beta"
-                      {{on "click" F.close}}
-                    />
-                    <HdsButton
-                      type="button"
-                      @text="Cancel"
-                      @color="secondary"
-                      {{on "click" F.close}}
-                    />
-                  </HdsButtonSet>
-                </M.Footer>
-              </:modal>
-            </ModalWithTrigger>
-          </SNL.Item>
         </HdsSideNavList>
       </:body>
       <:footer>
diff --git a/showcase/app/components/page-components/side-nav/sub-sections/content.gts b/showcase/app/components/page-components/side-nav/sub-sections/content.gts
index 11f6f5c7c8c..0b8b411d38b 100644
--- a/showcase/app/components/page-components/side-nav/sub-sections/content.gts
+++ b/showcase/app/components/page-components/side-nav/sub-sections/content.gts
@@ -12,10 +12,22 @@ import ShwTextH3 from 'showcase/components/shw/text/h3';
 
 import {
   HdsSideNav,
+  HdsSideNavHeader,
+  HdsSideNavHeaderHomeLink,
   HdsSideNavPortal,
   HdsSideNavPortalTarget,
+  HdsSideNavList,
+  HdsButton,
+  HdsButtonSet,
+  HdsDropdown,
 } from '@hashicorp/design-system-components/components';
 
+import ModalWithTrigger from '../../../page-components/modal/code-fragments/with-trigger';
+import SuperSelectWithButtons from 'showcase/components/page-components/form/super-select/code-fragments/with-multiple-base-element';
+import FlyoutWithTrigger from 'showcase/components/page-components/flyout/code-fragments/with-trigger';
+
+import { on } from '@ember/modifier';
+
 const SubSectionContent: TemplateOnlyComponent = <template>
   <ShwTextH2>Content</ShwTextH2>
 
@@ -141,6 +153,177 @@ const SubSectionContent: TemplateOnlyComponent = <template>
       <ShwPlaceholder @height="72px" @text="extraAfter" @background="#f3d9c5" />
     </Nav.ExtraAfter>
   </HdsSideNavPortal>
+
+  <ShwDivider @level={{2}} />
+
+  <ShwTextH3>With nested button content</ShwTextH3>
+
+  <ShwFlex as |SF|>
+    <SF.Item @label="">
+      <HdsSideNav @isResponsive={{false}} @hasA11yRefocus={{false}}>
+        <:header>
+          <HdsSideNavHeader>
+            <:logo>
+              <HdsSideNavHeaderHomeLink
+                @icon="hashicorp"
+                @ariaLabel="HashiCorp"
+                @href="#"
+              />
+            </:logo>
+            <:actions>
+              <HdsButton @icon="search" @isIconOnly={{true}} @text="Search" />
+              <HdsDropdown @enableCollisionDetection={{true}} as |dd|>
+                <dd.ToggleIcon @icon="help" @text="help menu" />
+                <dd.Title @text="Help & Support" />
+                <dd.Interactive @href="#">Documentation</dd.Interactive>
+                <dd.Interactive @href="#">Tutorials</dd.Interactive>
+                <dd.Interactive @href="#">Terraform Provider</dd.Interactive>
+                <dd.Interactive @href="#">Changelog</dd.Interactive>
+                <dd.Separator />
+                <dd.Interactive @href="#">Create support ticket</dd.Interactive>
+                <dd.Interactive @href="#">Give feedback</dd.Interactive>
+              </HdsDropdown>
+              <HdsDropdown @enableCollisionDetection={{true}} as |dd|>
+                <dd.ToggleIcon @icon="user" @text="user menu" />
+                <dd.Title @text="Signed In" />
+                <dd.Description @text="email@domain.com" />
+                <dd.Interactive @href="#">Account Settings</dd.Interactive>
+              </HdsDropdown>
+            </:actions>
+          </HdsSideNavHeader>
+        </:header>
+
+        <:body>
+          <HdsSideNavList as |SNL|>
+            <SNL.Item>
+              <HdsDropdown as |D|>
+                <D.ToggleButton @text="Dropdown" />
+                <D.Interactive @href="#">Add</D.Interactive>
+                <D.Interactive @href="#">Add More</D.Interactive>
+                <D.Interactive @href="#">Add Another Thing Too</D.Interactive>
+                <D.Footer @hasDivider={{true}}>
+                  <HdsButtonSet>
+                    <HdsButton
+                      @text="Apply filters"
+                      @isFullWidth={{true}}
+                      @size="small"
+                    />
+                    <HdsButton
+                      @text="Cancel"
+                      @color="secondary"
+                      @size="small"
+                    />
+                  </HdsButtonSet>
+                </D.Footer>
+              </HdsDropdown>
+            </SNL.Item>
+            <SNL.Item>
+              <SuperSelectWithButtons @isSelected={{true}} />
+            </SNL.Item>
+            <SNL.Item>
+              <ModalWithTrigger @triggerText="Open modal" id="basic-modal">
+                <:modal as |M|>
+                  <M.Header>
+                    Modal title
+                  </M.Header>
+                  <M.Body>
+                    <p class="hds-typography-body-300 hds-foreground-primary">
+                      Modal content
+                    </p>
+                  </M.Body>
+                  <M.Footer as |F|>
+                    <HdsButtonSet>
+                      <HdsButton
+                        type="submit"
+                        @text="Leave Beta"
+                        {{on "click" F.close}}
+                      />
+                      <HdsButton
+                        type="button"
+                        @text="Cancel"
+                        @color="secondary"
+                        {{on "click" F.close}}
+                      />
+                    </HdsButtonSet>
+                  </M.Footer>
+                </:modal>
+              </ModalWithTrigger>
+            </SNL.Item>
+            <SNL.Item>
+              <FlyoutWithTrigger
+                @triggerText="Open medium flyout"
+                id="medium-flyout"
+              >
+                <:flyout as |F|>
+                  <F.Header>
+                    Medium flyout title
+                  </F.Header>
+                  <F.Body>
+                    <p class="hds-typography-body-300 hds-foreground-primary">
+                      Aliquam ac enim iaculis, faucibus enim id, dapibus quam.
+                      Nunc nibh mi, vehicula sed enim eget, lacinia venenatis
+                      tortor. Quisque vitae accumsan est, eu vehicula arcu.
+                      Pellentesque ut turpis tortor. Curabitur eu turpis nec
+                      tellus vehicula imperdiet finibus in magna. Fusce
+                      tincidunt condimentum tristique. Ut mauris enim, finibus
+                      pulvinar vulputate at, ultrices ut purus. Aenean tincidunt
+                      eros a scelerisque blandit. Praesent vel fermentum velit,
+                      nec sodales turpis. Suspendisse ac rhoncus urna. Donec
+                      fermentum, justo aliquam facilisis sodales, quam magna
+                      pulvinar turpis, ut commodo diam ex ut arcu. Ut suscipit
+                      nisi sed bibendum pretium. Quisque efficitur, arcu quis
+                      congue consectetur, ex lorem euismod arcu, id viverra
+                      velit lacus non odio. Vestibulum ac mauris tortor.
+                      Pellentesque nec dignissim libero.
+                    </p>
+                    <p class="hds-typography-body-300 hds-foreground-primary">
+                      Duis euismod semper egestas. Vivamus consectetur augue eu
+                      mattis suscipit. Ut libero ipsum, sollicitudin a ornare
+                      ornare, consectetur eget mauris. Pellentesque sodales
+                      ligula eget purus congue molestie. Vivamus dolor magna,
+                      condimentum at consectetur vestibulum, mollis a purus.
+                      Aliquam malesuada arcu quis orci imperdiet accumsan. Donec
+                      pharetra odio libero, id cursus ipsum tristique vitae.
+                      Morbi placerat hendrerit massa vel varius. Vestibulum ante
+                      ipsum primis in faucibus orci luctus et ultrices posuere
+                      cubilia curae; Donec maximus porttitor ipsum, sed
+                      ultricies est fermentum at. In dignissim luctus ex vel
+                      condimentum.
+                    </p>
+                    <p class="hds-typography-body-300 hds-foreground-primary">
+                      Nulla facilisi. Mauris consequat vehicula nunc, ut rutrum
+                      elit posuere quis. Duis convallis elit ac nibh viverra
+                      dapibus. Quisque eu laoreet arcu, in pharetra sapien.
+                      Nulla velit urna, elementum non dignissim in, gravida et
+                      dui. Praesent tincidunt vel leo sed ornare. Proin finibus
+                      metus dictum odio blandit dictum. Donec ipsum tellus,
+                      molestie nec aliquam sit amet, sollicitudin non neque.
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    </p>
+                  </F.Body>
+                  <F.Footer as |FF|>
+                    <HdsButtonSet>
+                      <HdsButton
+                        type="submit"
+                        @text="Primary"
+                        {{on "click" FF.close}}
+                      />
+                      <HdsButton
+                        type="button"
+                        @text="Secondary"
+                        @color="secondary"
+                        {{on "click" FF.close}}
+                      />
+                    </HdsButtonSet>
+                  </F.Footer>
+                </:flyout>
+              </FlyoutWithTrigger>
+            </SNL.Item>
+          </HdsSideNavList>
+        </:body>
+      </HdsSideNav>
+    </SF.Item>
+  </ShwFlex>
 </template>;
 
 export default SubSectionContent;

From fd1af58333bd10a1f557cc25f391f76f2a6ee16c Mon Sep 17 00:00:00 2001
From: Kristin Bradley <kristin.bradley@hashicorp.com>
Date: Thu, 30 Oct 2025 11:52:47 -0700
Subject: [PATCH 05/14] HDS-5572 Simplify content in SideNav nested Button
 content Showcase examples

---
 .../with-minimal-content-and-buttons.gts      |  51 +++++++++
 .../side-nav/sub-sections/content.gts         | 104 +++---------------
 2 files changed, 64 insertions(+), 91 deletions(-)
 create mode 100644 showcase/app/components/page-components/form/super-select/code-fragments/with-minimal-content-and-buttons.gts

diff --git a/showcase/app/components/page-components/form/super-select/code-fragments/with-minimal-content-and-buttons.gts b/showcase/app/components/page-components/form/super-select/code-fragments/with-minimal-content-and-buttons.gts
new file mode 100644
index 00000000000..b89a3562445
--- /dev/null
+++ b/showcase/app/components/page-components/form/super-select/code-fragments/with-minimal-content-and-buttons.gts
@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import Component from '@glimmer/component';
+import { fn } from '@ember/helper';
+import { tracked } from '@glimmer/tracking';
+import type Owner from '@ember/owner';
+
+import { HdsFormSuperSelectMultipleBase } from '@hashicorp/design-system-components/components';
+
+import type { HdsFormSuperSelectMultipleBaseSignature } from '@hashicorp/design-system-components/components/hds/form/super-select/multiple/base';
+
+const OPTIONS = ['Option 1'];
+
+export interface CodeFragmentWithMultipleBaseElementSignature {
+  Args: {
+    placeholder?: HdsFormSuperSelectMultipleBaseSignature['Args']['placeholder'];
+    isSelected?: boolean;
+    options?: string;
+  };
+  Element: HdsFormSuperSelectMultipleBaseSignature['Element'];
+}
+
+export default class CodeFragmentWithMultipleBaseElement extends Component<CodeFragmentWithMultipleBaseElementSignature> {
+  @tracked selectedOptions: string[] = [];
+
+  options = OPTIONS;
+
+  constructor(
+    owner: Owner,
+    args: CodeFragmentWithMultipleBaseElementSignature['Args'],
+  ) {
+    super(owner, args);
+  }
+
+  <template>
+    <HdsFormSuperSelectMultipleBase
+      @onChange={{fn (mut this.selectedOptions)}}
+      @options={{this.options}}
+      @selected={{this.selectedOptions}}
+      @placeholder={{@placeholder}}
+      @showAfterOptions={{true}}
+      @ariaLabel="Label"
+      ...attributes
+      as |option|
+    >
+      {{option}}
+    </HdsFormSuperSelectMultipleBase>
+  </template>
+}
diff --git a/showcase/app/components/page-components/side-nav/sub-sections/content.gts b/showcase/app/components/page-components/side-nav/sub-sections/content.gts
index 0b8b411d38b..4c849abe290 100644
--- a/showcase/app/components/page-components/side-nav/sub-sections/content.gts
+++ b/showcase/app/components/page-components/side-nav/sub-sections/content.gts
@@ -12,8 +12,6 @@ import ShwTextH3 from 'showcase/components/shw/text/h3';
 
 import {
   HdsSideNav,
-  HdsSideNavHeader,
-  HdsSideNavHeaderHomeLink,
   HdsSideNavPortal,
   HdsSideNavPortalTarget,
   HdsSideNavList,
@@ -23,7 +21,7 @@ import {
 } from '@hashicorp/design-system-components/components';
 
 import ModalWithTrigger from '../../../page-components/modal/code-fragments/with-trigger';
-import SuperSelectWithButtons from 'showcase/components/page-components/form/super-select/code-fragments/with-multiple-base-element';
+import SuperSelectWithButtons from 'showcase/components/page-components/form/super-select/code-fragments/with-minimal-content-and-buttons';
 import FlyoutWithTrigger from 'showcase/components/page-components/flyout/code-fragments/with-trigger';
 
 import { on } from '@ember/modifier';
@@ -161,55 +159,23 @@ const SubSectionContent: TemplateOnlyComponent = <template>
   <ShwFlex as |SF|>
     <SF.Item @label="">
       <HdsSideNav @isResponsive={{false}} @hasA11yRefocus={{false}}>
-        <:header>
-          <HdsSideNavHeader>
-            <:logo>
-              <HdsSideNavHeaderHomeLink
-                @icon="hashicorp"
-                @ariaLabel="HashiCorp"
-                @href="#"
-              />
-            </:logo>
-            <:actions>
-              <HdsButton @icon="search" @isIconOnly={{true}} @text="Search" />
-              <HdsDropdown @enableCollisionDetection={{true}} as |dd|>
-                <dd.ToggleIcon @icon="help" @text="help menu" />
-                <dd.Title @text="Help & Support" />
-                <dd.Interactive @href="#">Documentation</dd.Interactive>
-                <dd.Interactive @href="#">Tutorials</dd.Interactive>
-                <dd.Interactive @href="#">Terraform Provider</dd.Interactive>
-                <dd.Interactive @href="#">Changelog</dd.Interactive>
-                <dd.Separator />
-                <dd.Interactive @href="#">Create support ticket</dd.Interactive>
-                <dd.Interactive @href="#">Give feedback</dd.Interactive>
-              </HdsDropdown>
-              <HdsDropdown @enableCollisionDetection={{true}} as |dd|>
-                <dd.ToggleIcon @icon="user" @text="user menu" />
-                <dd.Title @text="Signed In" />
-                <dd.Description @text="email@domain.com" />
-                <dd.Interactive @href="#">Account Settings</dd.Interactive>
-              </HdsDropdown>
-            </:actions>
-          </HdsSideNavHeader>
-        </:header>
-
         <:body>
           <HdsSideNavList as |SNL|>
+            <SNL.Item>
+              <SuperSelectWithButtons @placeholder="SuperSelect" />
+            </SNL.Item>
             <SNL.Item>
               <HdsDropdown as |D|>
                 <D.ToggleButton @text="Dropdown" />
-                <D.Interactive @href="#">Add</D.Interactive>
-                <D.Interactive @href="#">Add More</D.Interactive>
-                <D.Interactive @href="#">Add Another Thing Too</D.Interactive>
-                <D.Footer @hasDivider={{true}}>
+                <D.Footer>
                   <HdsButtonSet>
                     <HdsButton
-                      @text="Apply filters"
+                      @text="Primary"
                       @isFullWidth={{true}}
                       @size="small"
                     />
                     <HdsButton
-                      @text="Cancel"
+                      @text="Secondary"
                       @color="secondary"
                       @size="small"
                     />
@@ -218,10 +184,7 @@ const SubSectionContent: TemplateOnlyComponent = <template>
               </HdsDropdown>
             </SNL.Item>
             <SNL.Item>
-              <SuperSelectWithButtons @isSelected={{true}} />
-            </SNL.Item>
-            <SNL.Item>
-              <ModalWithTrigger @triggerText="Open modal" id="basic-modal">
+              <ModalWithTrigger @triggerText="Open modal" id="nested-modal">
                 <:modal as |M|>
                   <M.Header>
                     Modal title
@@ -235,12 +198,12 @@ const SubSectionContent: TemplateOnlyComponent = <template>
                     <HdsButtonSet>
                       <HdsButton
                         type="submit"
-                        @text="Leave Beta"
+                        @text="Primary"
                         {{on "click" F.close}}
                       />
                       <HdsButton
                         type="button"
-                        @text="Cancel"
+                        @text="Secondary"
                         @color="secondary"
                         {{on "click" F.close}}
                       />
@@ -250,55 +213,14 @@ const SubSectionContent: TemplateOnlyComponent = <template>
               </ModalWithTrigger>
             </SNL.Item>
             <SNL.Item>
-              <FlyoutWithTrigger
-                @triggerText="Open medium flyout"
-                id="medium-flyout"
-              >
+              <FlyoutWithTrigger @triggerText="Open flyout" id="nested-flyout">
                 <:flyout as |F|>
                   <F.Header>
-                    Medium flyout title
+                    Flyout title
                   </F.Header>
                   <F.Body>
                     <p class="hds-typography-body-300 hds-foreground-primary">
-                      Aliquam ac enim iaculis, faucibus enim id, dapibus quam.
-                      Nunc nibh mi, vehicula sed enim eget, lacinia venenatis
-                      tortor. Quisque vitae accumsan est, eu vehicula arcu.
-                      Pellentesque ut turpis tortor. Curabitur eu turpis nec
-                      tellus vehicula imperdiet finibus in magna. Fusce
-                      tincidunt condimentum tristique. Ut mauris enim, finibus
-                      pulvinar vulputate at, ultrices ut purus. Aenean tincidunt
-                      eros a scelerisque blandit. Praesent vel fermentum velit,
-                      nec sodales turpis. Suspendisse ac rhoncus urna. Donec
-                      fermentum, justo aliquam facilisis sodales, quam magna
-                      pulvinar turpis, ut commodo diam ex ut arcu. Ut suscipit
-                      nisi sed bibendum pretium. Quisque efficitur, arcu quis
-                      congue consectetur, ex lorem euismod arcu, id viverra
-                      velit lacus non odio. Vestibulum ac mauris tortor.
-                      Pellentesque nec dignissim libero.
-                    </p>
-                    <p class="hds-typography-body-300 hds-foreground-primary">
-                      Duis euismod semper egestas. Vivamus consectetur augue eu
-                      mattis suscipit. Ut libero ipsum, sollicitudin a ornare
-                      ornare, consectetur eget mauris. Pellentesque sodales
-                      ligula eget purus congue molestie. Vivamus dolor magna,
-                      condimentum at consectetur vestibulum, mollis a purus.
-                      Aliquam malesuada arcu quis orci imperdiet accumsan. Donec
-                      pharetra odio libero, id cursus ipsum tristique vitae.
-                      Morbi placerat hendrerit massa vel varius. Vestibulum ante
-                      ipsum primis in faucibus orci luctus et ultrices posuere
-                      cubilia curae; Donec maximus porttitor ipsum, sed
-                      ultricies est fermentum at. In dignissim luctus ex vel
-                      condimentum.
-                    </p>
-                    <p class="hds-typography-body-300 hds-foreground-primary">
-                      Nulla facilisi. Mauris consequat vehicula nunc, ut rutrum
-                      elit posuere quis. Duis convallis elit ac nibh viverra
-                      dapibus. Quisque eu laoreet arcu, in pharetra sapien.
-                      Nulla velit urna, elementum non dignissim in, gravida et
-                      dui. Praesent tincidunt vel leo sed ornare. Proin finibus
-                      metus dictum odio blandit dictum. Donec ipsum tellus,
-                      molestie nec aliquam sit amet, sollicitudin non neque.
-                      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                      Flyout body
                     </p>
                   </F.Body>
                   <F.Footer as |FF|>

From f7927e9dd887c8ffa8aad192cf32769b2a879771 Mon Sep 17 00:00:00 2001
From: Kristin Bradley <kristin.bradley@hashicorp.com>
Date: Thu, 30 Oct 2025 13:36:37 -0700
Subject: [PATCH 06/14] HDS-5572 Add nested Button and Modal content examples
 to AppHeader Showcase

---
 .../app-header/sub-sections/content.gts       | 85 ++++++++++++++++++-
 1 file changed, 84 insertions(+), 1 deletion(-)

diff --git a/showcase/app/components/page-components/app-header/sub-sections/content.gts b/showcase/app/components/page-components/app-header/sub-sections/content.gts
index 08b08a580db..5f457961ad4 100644
--- a/showcase/app/components/page-components/app-header/sub-sections/content.gts
+++ b/showcase/app/components/page-components/app-header/sub-sections/content.gts
@@ -11,12 +11,20 @@ import ShwFlex from 'showcase/components/shw/flex';
 import ShwPlaceholder from 'showcase/components/shw/placeholder';
 import ShwDivider from 'showcase/components/shw/divider';
 
+import ModalWithTrigger from '../../../page-components/modal/code-fragments/with-trigger';
+import SuperSelectWithButtons from 'showcase/components/page-components/form/super-select/code-fragments/with-minimal-content-and-buttons';
+import FlyoutWithTrigger from 'showcase/components/page-components/flyout/code-fragments/with-trigger';
 import CodeFragmentWithGenericContent from 'showcase/components/page-components/app-header/code-fragments/with-generic-content';
 
+import { on } from '@ember/modifier';
+
 import {
   HdsAppHeader,
   HdsAppHeaderHomeLink,
   HdsBadge,
+  HdsButton,
+  HdsButtonSet,
+  HdsDropdown,
 } from '@hashicorp/design-system-components/components';
 
 const SubSectionContent: TemplateOnlyComponent = <template>
@@ -156,9 +164,84 @@ const SubSectionContent: TemplateOnlyComponent = <template>
         </:globalActions>
       </HdsAppHeader>
     </SF.Item>
-
   </ShwFlex>
 
+  <ShwDivider @level={{2}} />
+
+  <ShwTextH3>With nested button content</ShwTextH3>
+
+  <HdsAppHeader @hasA11yRefocus={{false}}>
+    <:logo>
+      {{! empty span for layout purposes}}
+      <span />
+    </:logo>
+    <:globalActions>
+      <SuperSelectWithButtons @placeholder="SuperSelect" />
+
+      <HdsDropdown as |D|>
+        <D.ToggleButton @text="Dropdown" />
+        <D.Footer>
+          <HdsButtonSet>
+            <HdsButton @text="Primary" @isFullWidth={{true}} @size="small" />
+            <HdsButton @text="Secondary" @color="secondary" @size="small" />
+          </HdsButtonSet>
+        </D.Footer>
+      </HdsDropdown>
+
+      <ModalWithTrigger @triggerText="Open modal" id="nested-modal">
+        <:modal as |M|>
+          <M.Header>
+            Modal title
+          </M.Header>
+          <M.Body>
+            <p class="hds-typography-body-300 hds-foreground-primary">
+              Modal content
+            </p>
+          </M.Body>
+          <M.Footer as |F|>
+            <HdsButtonSet>
+              <HdsButton type="submit" @text="Primary" {{on "click" F.close}} />
+              <HdsButton
+                type="button"
+                @text="Secondary"
+                @color="secondary"
+                {{on "click" F.close}}
+              />
+            </HdsButtonSet>
+          </M.Footer>
+        </:modal>
+      </ModalWithTrigger>
+
+      <FlyoutWithTrigger @triggerText="Open flyout" id="nested-flyout">
+        <:flyout as |F|>
+          <F.Header>
+            Flyout title
+          </F.Header>
+          <F.Body>
+            <p class="hds-typography-body-300 hds-foreground-primary">
+              Flyout body
+            </p>
+          </F.Body>
+          <F.Footer as |FF|>
+            <HdsButtonSet>
+              <HdsButton
+                type="submit"
+                @text="Primary"
+                {{on "click" FF.close}}
+              />
+              <HdsButton
+                type="button"
+                @text="Secondary"
+                @color="secondary"
+                {{on "click" FF.close}}
+              />
+            </HdsButtonSet>
+          </F.Footer>
+        </:flyout>
+      </FlyoutWithTrigger>
+    </:globalActions>
+  </HdsAppHeader>
+
   <ShwDivider />
 </template>;
 

From 72e143a834ab56b46bfeecc794300339d4027c58 Mon Sep 17 00:00:00 2001
From: Kristin Bradley <kristin.bradley@hashicorp.com>
Date: Thu, 30 Oct 2025 13:39:54 -0700
Subject: [PATCH 07/14] Fix color inheritance for Buttons in DialogPrimitive

---
 .changeset/fine-rocks-trade.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/fine-rocks-trade.md b/.changeset/fine-rocks-trade.md
index e858a37cd63..433236f17b9 100644
--- a/.changeset/fine-rocks-trade.md
+++ b/.changeset/fine-rocks-trade.md
@@ -3,5 +3,5 @@
 ---
 
 <!-- START components/button -->
-`Button` - Fixed color inheritance for Buttons within a `Modal` which is triggered from either the `SideNav` or `AppHeader`
+`Button` - Fixed color inheritance for Buttons within `DialogPrimitive` based components (such as the `Modal` and `Flyout`) when triggered from within the `SideNav` or `AppHeader`
 <!-- END -->

From 74daf2158e5bdc68c2f45a748c39d0cf0c02cef9 Mon Sep 17 00:00:00 2001
From: Kristin Bradley <kristin.bradley@hashicorp.com>
Date: Thu, 30 Oct 2025 15:26:58 -0700
Subject: [PATCH 08/14] HDS-5572 Update styles for Show Frame open link to meet
 a11y touch target dimension requirements

---
 .../app/styles/showcase-components/frame.scss    | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/showcase/app/styles/showcase-components/frame.scss b/showcase/app/styles/showcase-components/frame.scss
index cf57890321f..3f06392e9a3 100644
--- a/showcase/app/styles/showcase-components/frame.scss
+++ b/showcase/app/styles/showcase-components/frame.scss
@@ -34,8 +34,18 @@ $shw-frame-navigation-bar-height: 48px;
 }
 
 .shw-frame__open-link {
-  width: 16px;
-  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  // dimensions meet a11y touch target minimums
+  width: 48px;
+  height: 48px;
+
+  > .hds-icon {
+    width: 16px;
+    height: 16px;
+  }
+
   color: var(--shw-color-gray-300);
 
   &:hover {
@@ -52,4 +62,4 @@ $shw-frame-navigation-bar-height: 48px;
   width: 100%;
   height: calc(100% - #{$shw-frame-navigation-bar-height});
   border: none;
-}
\ No newline at end of file
+}

From 425e11ab4c047f0afa61b07e268b6dc2c46ed614 Mon Sep 17 00:00:00 2001
From: Kristin Bradley <kristin.bradley@hashicorp.com>
Date: Fri, 31 Oct 2025 10:01:32 -0700
Subject: [PATCH 09/14] HDS-5572 Add separate styling for link in AdvancedTable
 Showcase

---
 .../advanced-table/sub-sections/basic.gts            |  2 +-
 .../app/styles/showcase-pages/advanced-table.scss    | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/showcase/app/components/page-components/advanced-table/sub-sections/basic.gts b/showcase/app/components/page-components/advanced-table/sub-sections/basic.gts
index ea369a041e0..5033aa09ace 100644
--- a/showcase/app/components/page-components/advanced-table/sub-sections/basic.gts
+++ b/showcase/app/components/page-components/advanced-table/sub-sections/basic.gts
@@ -47,7 +47,7 @@ const BASIC_MUSIC_COLUMNS = [
 const SubSectionBasic: TemplateOnlyComponent = <template>
   <ShwTextBody>
     <a
-      class="shw-frame__open-link"
+      class="shw-component-advanced-table__open-link"
       href="/layouts/app-frame/frameless/demo-full-app-frame-with-advanced-table"
       target="_blank"
       rel="noopener noreferrer"
diff --git a/showcase/app/styles/showcase-pages/advanced-table.scss b/showcase/app/styles/showcase-pages/advanced-table.scss
index 6d139e9ea97..4695b2800e6 100644
--- a/showcase/app/styles/showcase-pages/advanced-table.scss
+++ b/showcase/app/styles/showcase-pages/advanced-table.scss
@@ -93,4 +93,16 @@ body.page-components-advanced-table {
     visibility: visible;
     opacity: 1;
   }
+
+  .shw-component-advanced-table__open-link {
+    color: var(--shw-color-gray-300);
+
+     &:hover {
+      color: var(--shw-color-gray-200);
+    }
+
+    &:active {
+      color: var(--shw-color-gray-100);
+    }
+  }
 }

From 28bbb8a6bca02af434a128a73ca95bac3478bc32 Mon Sep 17 00:00:00 2001
From: Kristin Bradley <kristin.bradley@hashicorp.com>
Date: Mon, 3 Nov 2025 09:48:35 -0800
Subject: [PATCH 10/14] Update fine-rocks-trade.md

---
 .changeset/fine-rocks-trade.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/.changeset/fine-rocks-trade.md b/.changeset/fine-rocks-trade.md
index 433236f17b9..25934037f70 100644
--- a/.changeset/fine-rocks-trade.md
+++ b/.changeset/fine-rocks-trade.md
@@ -5,3 +5,11 @@
 <!-- START components/button -->
 `Button` - Fixed color inheritance for Buttons within `DialogPrimitive` based components (such as the `Modal` and `Flyout`) when triggered from within the `SideNav` or `AppHeader`
 <!-- END -->
+
+<!-- START components/side-nav -->
+`SideNav` - Fixed color inheritance for Buttons within `DialogPrimitive` based components (such as the `Modal` and `Flyout`) when triggered from within the `SideNav`
+<!-- END -->
+
+<!-- START components/app-header -->
+`AppHeader` - Fixed color inheritance for Buttons within `DialogPrimitive` based components (such as the `Modal` and `Flyout`) when triggered from within the `AppHeader`
+<!-- END -->

From 08612b300ded661c6b71f1f78f00afe5fc23b5b1 Mon Sep 17 00:00:00 2001
From: Kristin Bradley <kristin.bradley@hashicorp.com>
Date: Mon, 3 Nov 2025 10:01:45 -0800
Subject: [PATCH 11/14] Apply suggestions from code review

Co-authored-by: Lee White <lee.white@hashicorp.com>
---
 .../page-components/app-header/sub-sections/content.gts         | 2 +-
 .../page-components/side-nav/sub-sections/content.gts           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/showcase/app/components/page-components/app-header/sub-sections/content.gts b/showcase/app/components/page-components/app-header/sub-sections/content.gts
index 5f457961ad4..850af5466a4 100644
--- a/showcase/app/components/page-components/app-header/sub-sections/content.gts
+++ b/showcase/app/components/page-components/app-header/sub-sections/content.gts
@@ -11,7 +11,7 @@ import ShwFlex from 'showcase/components/shw/flex';
 import ShwPlaceholder from 'showcase/components/shw/placeholder';
 import ShwDivider from 'showcase/components/shw/divider';
 
-import ModalWithTrigger from '../../../page-components/modal/code-fragments/with-trigger';
+import ModalWithTrigger from 'showcase/components/page-components/modal/code-fragments/with-trigger';
 import SuperSelectWithButtons from 'showcase/components/page-components/form/super-select/code-fragments/with-minimal-content-and-buttons';
 import FlyoutWithTrigger from 'showcase/components/page-components/flyout/code-fragments/with-trigger';
 import CodeFragmentWithGenericContent from 'showcase/components/page-components/app-header/code-fragments/with-generic-content';
diff --git a/showcase/app/components/page-components/side-nav/sub-sections/content.gts b/showcase/app/components/page-components/side-nav/sub-sections/content.gts
index 4c849abe290..c9acf802f05 100644
--- a/showcase/app/components/page-components/side-nav/sub-sections/content.gts
+++ b/showcase/app/components/page-components/side-nav/sub-sections/content.gts
@@ -20,7 +20,7 @@ import {
   HdsDropdown,
 } from '@hashicorp/design-system-components/components';
 
-import ModalWithTrigger from '../../../page-components/modal/code-fragments/with-trigger';
+import ModalWithTrigger from 'showcase/components/page-components/modal/code-fragments/with-trigger';
 import SuperSelectWithButtons from 'showcase/components/page-components/form/super-select/code-fragments/with-minimal-content-and-buttons';
 import FlyoutWithTrigger from 'showcase/components/page-components/flyout/code-fragments/with-trigger';
 

From 2b395329476771c59e46777b4dc91e97ccc88bb3 Mon Sep 17 00:00:00 2001
From: Kristin Bradley <kristin.bradley@hashicorp.com>
Date: Mon, 3 Nov 2025 10:07:53 -0800
Subject: [PATCH 12/14] HDS-5572 Comment out style changes for frame link to
 test

---
 .../app/styles/showcase-components/frame.scss    | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/showcase/app/styles/showcase-components/frame.scss b/showcase/app/styles/showcase-components/frame.scss
index 3f06392e9a3..f78c29b34cf 100644
--- a/showcase/app/styles/showcase-components/frame.scss
+++ b/showcase/app/styles/showcase-components/frame.scss
@@ -34,17 +34,17 @@ $shw-frame-navigation-bar-height: 48px;
 }
 
 .shw-frame__open-link {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  // dimensions meet a11y touch target minimums
-  width: 48px;
-  height: 48px;
+  // display: flex;
+  // align-items: center;
+  // justify-content: flex-end;
+  // // dimensions meet a11y touch target minimums
+  // width: 48px;
+  // height: 48px;
 
-  > .hds-icon {
+  // > .hds-icon {
     width: 16px;
     height: 16px;
-  }
+  // }
 
   color: var(--shw-color-gray-300);
 

From e8fc4f8bb22b4f124951807f24cb5f0d90549aea Mon Sep 17 00:00:00 2001
From: Kristin Bradley <kristin.bradley@hashicorp.com>
Date: Mon, 3 Nov 2025 10:15:29 -0800
Subject: [PATCH 13/14] HDS-5572 Remove unneeded constructor

---
 .../code-fragments/with-minimal-content-and-buttons.gts   | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/showcase/app/components/page-components/form/super-select/code-fragments/with-minimal-content-and-buttons.gts b/showcase/app/components/page-components/form/super-select/code-fragments/with-minimal-content-and-buttons.gts
index b89a3562445..70fb0e475a1 100644
--- a/showcase/app/components/page-components/form/super-select/code-fragments/with-minimal-content-and-buttons.gts
+++ b/showcase/app/components/page-components/form/super-select/code-fragments/with-minimal-content-and-buttons.gts
@@ -5,7 +5,6 @@
 import Component from '@glimmer/component';
 import { fn } from '@ember/helper';
 import { tracked } from '@glimmer/tracking';
-import type Owner from '@ember/owner';
 
 import { HdsFormSuperSelectMultipleBase } from '@hashicorp/design-system-components/components';
 
@@ -27,13 +26,6 @@ export default class CodeFragmentWithMultipleBaseElement extends Component<CodeF
 
   options = OPTIONS;
 
-  constructor(
-    owner: Owner,
-    args: CodeFragmentWithMultipleBaseElementSignature['Args'],
-  ) {
-    super(owner, args);
-  }
-
   <template>
     <HdsFormSuperSelectMultipleBase
       @onChange={{fn (mut this.selectedOptions)}}

From 1b6235e21be24c5064d858b0417b31e1cf6f3126 Mon Sep 17 00:00:00 2001
From: Kristin Bradley <kristin.bradley@hashicorp.com>
Date: Mon, 3 Nov 2025 13:50:21 -0800
Subject: [PATCH 14/14] HDS-5572 Uncomment out styles for frame link

---
 .../app/styles/showcase-components/frame.scss    | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/showcase/app/styles/showcase-components/frame.scss b/showcase/app/styles/showcase-components/frame.scss
index f78c29b34cf..3f06392e9a3 100644
--- a/showcase/app/styles/showcase-components/frame.scss
+++ b/showcase/app/styles/showcase-components/frame.scss
@@ -34,17 +34,17 @@ $shw-frame-navigation-bar-height: 48px;
 }
 
 .shw-frame__open-link {
-  // display: flex;
-  // align-items: center;
-  // justify-content: flex-end;
-  // // dimensions meet a11y touch target minimums
-  // width: 48px;
-  // height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  // dimensions meet a11y touch target minimums
+  width: 48px;
+  height: 48px;
 
-  // > .hds-icon {
+  > .hds-icon {
     width: 16px;
     height: 16px;
-  // }
+  }
 
   color: var(--shw-color-gray-300);