From c88cb3f4dd8a4c4bffe670b2aa1908457e364b49 Mon Sep 17 00:00:00 2001
From: Cristiano Rastelli <public@didoo.net>
Date: Tue, 17 Dec 2024 20:22:35 +0000
Subject: [PATCH] =?UTF-8?q?added=20=E2=80=9Cdemo=E2=80=9D=20frameless=20pa?=
 =?UTF-8?q?ge=20for=20theming=20testing?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/hds/theme-switcher/index.hbs   |   1 +
 showcase/app/components/mock/app/index.gts    |  24 +-
 .../components/mock/app/main/form-complex.gts | 357 ++++++++++++++++++
 .../mock/app/main/generic-text-content.gts    |  16 +-
 .../components/mock/app/main/pagination.gts   |  31 ++
 .../mock/app/main/table-complex.gts           | 191 ++++++++++
 .../components/mock/app/sidebar/side-nav.gts  |   2 +
 .../demo-application-with-theme-switcher.js   |  12 +
 .../{theming.js => theming/index.js}          |   0
 showcase/app/router.ts                        |   6 +-
 .../demo-application-with-theme-switcher.hbs  | 307 +++++++++++++++
 .../{theming.hbs => theming/index.hbs}        |   0
 showcase/types/template-registry.ts           |   9 +
 13 files changed, 953 insertions(+), 3 deletions(-)
 create mode 100644 showcase/app/components/mock/app/main/form-complex.gts
 create mode 100644 showcase/app/components/mock/app/main/pagination.gts
 create mode 100644 showcase/app/components/mock/app/main/table-complex.gts
 create mode 100644 showcase/app/controllers/foundations/theming/frameless/demo-application-with-theme-switcher.js
 rename showcase/app/controllers/foundations/{theming.js => theming/index.js} (100%)
 create mode 100644 showcase/app/templates/foundations/theming/frameless/demo-application-with-theme-switcher.hbs
 rename showcase/app/templates/foundations/{theming.hbs => theming/index.hbs} (100%)

diff --git a/packages/components/src/components/hds/theme-switcher/index.hbs b/packages/components/src/components/hds/theme-switcher/index.hbs
index 01f5c5cdd2c..97bf5999b53 100644
--- a/packages/components/src/components/hds/theme-switcher/index.hbs
+++ b/packages/components/src/components/hds/theme-switcher/index.hbs
@@ -5,6 +5,7 @@
 <Hds::Form::Select::Base
   {{on "change" this._onChangePageTheme}}
   class="hds-theme-switcher-control"
+  ...attributes
   as |C|
 >
   <C.Options>
diff --git a/showcase/app/components/mock/app/index.gts b/showcase/app/components/mock/app/index.gts
index bf583de6cdd..5beeb3814e6 100644
--- a/showcase/app/components/mock/app/index.gts
+++ b/showcase/app/components/mock/app/index.gts
@@ -9,10 +9,16 @@ import MockAppHeaderAppHeader from './header/app-header';
 import MockAppSidebarSideNav from './sidebar/side-nav';
 import MockAppMainPageHeader from './main/page-header';
 import MockAppMainGenericTextContent from './main/generic-text-content';
+import MockAppMainFormComplex from './main/form-complex';
+import MockAppMainTableComplex from './main/table-complex';
+import MockAppMainPagination from './main/pagination';
 import MockAppFooterAppFooter from './footer/app-footer';
 
 // HDS components
-import { HdsAppFrame } from '@hashicorp/design-system-components/components';
+import {
+  HdsAlert,
+  HdsAppFrame,
+} from '@hashicorp/design-system-components/components';
 
 // types
 import type { ComponentLike } from '@glint/template';
@@ -21,10 +27,14 @@ import type { MockAppHeaderAppHeaderSignature } from './header/app-header';
 import type { MockAppSidebarSideNavSignature } from './sidebar/side-nav';
 import type { MockAppMainPageHeaderSignature } from './main/page-header';
 import type { MockAppMainGenericTextContentSignature } from './main/generic-text-content';
+import type { MockAppMainFormComplexSignature } from './main/form-complex';
+import type { MockAppMainTableComplexSignature } from './main/table-complex';
+import type { MockAppMainPaginationSignature } from './main/pagination';
 import type { MockAppFooterAppFooterSignature } from './footer/app-footer';
 
 export interface MockAppSignature {
   Args: {
+    hasPageAlert?: boolean;
     hasHeader?: HdsAppFrameSignature['Args']['hasHeader'];
     hasSidebar?: HdsAppFrameSignature['Args']['hasSidebar'];
     hasFooter?: HdsAppFrameSignature['Args']['hasFooter'];
@@ -44,6 +54,9 @@ export interface MockAppSignature {
       {
         PageHeader?: ComponentLike<MockAppMainPageHeaderSignature>;
         GenericTextContent?: ComponentLike<MockAppMainGenericTextContentSignature>;
+        MockAppMainFormComplex?: ComponentLike<MockAppMainFormComplexSignature>;
+        MockAppMainTableComplex?: ComponentLike<MockAppMainTableComplexSignature>;
+        MockAppMainPagination?: ComponentLike<MockAppMainPaginationSignature>;
       },
     ];
     footer?: [
@@ -80,11 +93,20 @@ export default class MockApp extends Component<MockAppSignature> {
         {{/if}}
       </Frame.Sidebar>
       <Frame.Main>
+        {{#if @hasPageAlert}}
+          <HdsAlert @type="page" @color="highlight" as |A|>
+            <A.Title>Lorem ipsum</A.Title>
+            <A.Description>Lorem ipsum dolor sit amet.</A.Description>
+          </HdsAlert>
+        {{/if}}
         <div class="mock-app-layout-main-content-wrapper">
           {{yield
             (hash
               PageHeader=MockAppMainPageHeader
               GenericTextContent=MockAppMainGenericTextContent
+              FormComplex=MockAppMainFormComplex
+              TableComplex=MockAppMainTableComplex
+              Pagination=MockAppMainPagination
             )
             to="main"
           }}
diff --git a/showcase/app/components/mock/app/main/form-complex.gts b/showcase/app/components/mock/app/main/form-complex.gts
new file mode 100644
index 00000000000..d9198fc8094
--- /dev/null
+++ b/showcase/app/components/mock/app/main/form-complex.gts
@@ -0,0 +1,357 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import style from 'ember-style-modifier/modifiers/style';
+
+// HDS components
+import {
+  HdsButton,
+  HdsButtonSet,
+  HdsFormCheckboxGroup,
+  HdsFormFileInputField,
+  HdsFormMaskedInputField,
+  HdsFormRadioGroup,
+  HdsFormRadioCardGroup,
+  HdsFormSelectField,
+  HdsFormSuperSelectSingleField,
+  HdsFormSuperSelectMultipleField,
+  HdsFormTextInputField,
+  HdsFormTextareaField,
+  HdsFormToggleField,
+  HdsLinkInline,
+  HdsSeparator,
+  HdsTextBody,
+  HdsTextDisplay,
+} from '@hashicorp/design-system-components/components';
+
+const RADIOCARDS = [
+  {
+    value: '1',
+    label: 'Radio card label 1',
+    badge: 'Badge',
+    checked: true,
+    description: 'Radio card description 1',
+    generic: 'Radio card custom content 1',
+  },
+  {
+    value: '2',
+    label: 'Radio card label 2',
+    badge: 'Badge',
+    description: 'Radio card description 2',
+    generic: 'Radio card custom content 2',
+  },
+  {
+    value: '3',
+    label: 'Radio card label 3',
+    badge: 'Badge',
+    description: 'Radio card description 3',
+    generic: 'Radio card custom content 3',
+  },
+];
+
+const SUPERSELECT1_OPTIONS = [
+  {
+    size: 'Extra Small',
+    description: '2 vCPU | 1 GiB RAM',
+    price: '$0.02',
+  },
+  {
+    size: 'Small',
+    description: '2 vCPU | 2 GiB RAM',
+    price: '$0.04',
+    disabled: true,
+  },
+  {
+    size: 'Medium',
+    description: '4 vCPU | 4 GiB RAM',
+    price: '$0.08',
+    disabled: true,
+  },
+  { size: 'Large', description: '8 vCPU | 8 GiB RAM', price: '$0.16' },
+  {
+    size: 'Extra Large',
+    description: '16 vCPU | 16 GiB RAM',
+    price: '$0.32',
+  },
+];
+const SELECTED_SUPERSELECT1_OPTION = SUPERSELECT1_OPTIONS[1];
+
+const SUPERSELECT2_OPTIONS = ['Option 1', 'Option 2', 'Option 3'];
+const SELECTED_SUPERSELECT2_OPTIONS = [
+  SUPERSELECT2_OPTIONS[0],
+  SUPERSELECT2_OPTIONS[1],
+];
+
+const noop = () => {};
+
+export interface MockAppMainFormComplexSignature {
+  Args: {
+    showErrors?: boolean;
+    showIntro?: boolean;
+    showCheckbox?: boolean;
+    showFileInput?: boolean;
+    showMaskedInput?: boolean;
+    showRadio?: boolean;
+    showRadioCard?: boolean;
+    showSelect?: boolean;
+    showSuperSelect?: boolean;
+    showTextarea?: boolean;
+    showTextInput?: boolean;
+    showToggle?: boolean;
+    showButtons?: boolean;
+    showErrors?: boolean;
+  };
+  Element: HTMLDivElement;
+}
+
+export default class MockAppMainFormComplex extends Component<MockAppMainFormComplexSignature> {
+  _showIntro;
+  _showCheckbox;
+  _showFileInput;
+  _showMaskedInput;
+  _showRadio;
+  _showRadioCard;
+  _showSelect;
+  _showSuperSelect;
+  _showTextarea;
+  _showTextInput;
+  _showToggle;
+  _showButtons;
+  _showErrors;
+
+  constructor(owner: unknown, args: MockAppMainFormComplexSignature['Args']) {
+    super(owner, args);
+    this._showIntro = this.args.showIntro ?? this.args.showAll ?? false;
+    this._showCheckbox = this.args.showCheckbox ?? this.args.showAll ?? false;
+    this._showFileInput = this.args.showFileInput ?? this.args.showAll ?? false;
+    this._showMaskedInput =
+      this.args.showMaskedInput ?? this.args.showAll ?? false;
+    this._showRadio = this.args.showRadio ?? this.args.showAll ?? false;
+    this._showRadioCard = this.args.showRadioCard ?? this.args.showAll ?? false;
+    this._showSelect = this.args.showSelect ?? this.args.showAll ?? false;
+    this._showSuperSelect =
+      this.args.showSuperSelect ?? this.args.showAll ?? false;
+    this._showTextarea = this.args.showTextarea ?? this.args.showAll ?? false;
+    this._showToggle = this.args.showToggle ?? this.args.showAll ?? false;
+    this._showErrors = this.args.showErrors ?? this.args.showAll ?? false;
+    // we want at least something to be visible by default
+    this._showTextInput = this.args.showTextInput ?? this.args.showAll ?? true;
+    this._showButtons = this.args._showButtons ?? this.args.showAll ?? true;
+  }
+
+  <template>
+    <div ...attributes>
+      {{#if this._something}}
+        <pre>TODO</pre>
+      {{/if}}
+      <form
+        {{style
+          display="flex"
+          flex-direction="column"
+          gap="16px"
+          max-width="400px"
+        }}
+      >
+        {{#if this._showIntro}}
+          <HdsTextDisplay @tag="h4" @size="400">Lorem ipsum dolor sit amet</HdsTextDisplay>
+          <HdsTextBody @tag="p" @size="200">Lorem ipsum dolor sit amet,
+            consectetur adipisicing elit. Excepturi
+            <HdsLinkInline @href="#" @color="primary">aperiam a molestias
+              quisquam</HdsLinkInline>
+            sapiente alias corporis sit aliquid similique esse illum at itaque
+            ducimus, eligendi eos. Iure dolor eos
+            <HdsLinkInline @href="#" @color="secondary">cumque autem placeat</HdsLinkInline></HdsTextBody>
+          <HdsSeparator @spacing="0" />
+        {{/if}}
+
+        {{#if this._showTextInput}}
+          <HdsFormTextInputField @isRequired={{true}} @value="Lorem" as |F|>
+            <F.Label>Text input</F.Label>
+            <F.HelperText>Lorem ipsum dolor sit amet, consectetur adipisicing
+              elit.</F.HelperText>
+          </HdsFormTextInputField>
+          <HdsFormTextInputField
+            @value=""
+            @isInvalid={{this._showErrors}}
+            as |F|
+          >
+            <F.Label>Another text input</F.Label>
+            <F.HelperText>Reiciendis exercitationem quod deserunt inventore</F.HelperText>
+            {{#if this._showErrors}}
+              <F.Error>Excepturi aperiam a molestias</F.Error>
+            {{/if}}
+          </HdsFormTextInputField>
+          <HdsSeparator @spacing="0" />
+        {{/if}}
+
+        {{#if this._showCheckbox}}
+          <HdsFormCheckboxGroup
+            @layout="horizontal"
+            @name="control-horizontal-01"
+            as |G|
+          >
+            <G.Legend>Checkbox group</G.Legend>
+            <G.CheckboxField as |F|>
+              <F.Label>Label of control #1</F.Label>
+            </G.CheckboxField>
+            <G.CheckboxField checked="checked" as |F|>
+              <F.Label>Label of control #2</F.Label>
+            </G.CheckboxField>
+            <G.CheckboxField indeterminate={{true}} as |F|>
+              <F.Label>Label of control #3</F.Label>
+            </G.CheckboxField>
+          </HdsFormCheckboxGroup>
+          <HdsSeparator @spacing="0" />
+        {{/if}}
+
+        {{#if this._showFileInput}}
+          <HdsFormFileInputField
+            @value="Lorem ipsum dolor"
+            @isInvalid={{true}}
+            as |F|
+          >
+            <F.Label>File input</F.Label>
+            <F.HelperText>This is the helper text</F.HelperText>
+          </HdsFormFileInputField>
+          <HdsSeparator @spacing="0" />
+        {{/if}}
+
+        {{#if this._showMaskedInput}}
+          <HdsFormMaskedInputField
+            @value="Masked input"
+            @isInvalid={{this._showErrors}}
+            as |F|
+          >
+            <F.Label>Masked input</F.Label>
+            <F.HelperText>This is the helper text</F.HelperText>
+            {{#if this._showErrors}}
+              <F.Error as |E|>
+                <E.Message>First error message</E.Message>
+                <E.Message>Second error message</E.Message>
+              </F.Error>
+            {{/if}}
+          </HdsFormMaskedInputField>
+          <HdsSeparator @spacing="0" />
+        {{/if}}
+
+        {{#if this._showRadio}}
+          <HdsFormRadioGroup @name="control-vertical-03" as |G|>
+            <G.Legend>Radio group</G.Legend>
+            <G.RadioField as |F|>
+              <F.Label>Label of control #1</F.Label>
+              <F.HelperText>Helper text for control #1</F.HelperText>
+            </G.RadioField>
+            <G.RadioField checked="checked" as |F|>
+              <F.Label>Label of control #2</F.Label>
+              <F.HelperText>Helper text for control #2</F.HelperText>
+            </G.RadioField>
+            <G.RadioField as |F|>
+              <F.Label>Label of control #3</F.Label>
+              <F.HelperText>Helper text for control #3</F.HelperText>
+            </G.RadioField>
+          </HdsFormRadioGroup>
+          <HdsSeparator @spacing="0" />
+        {{/if}}
+
+        {{#if this._showRadioCard}}
+          <HdsFormRadioCardGroup
+            @name="radio-card-default"
+            @controlPosition="left"
+            @layout="vertical"
+            as |G|
+          >
+            <G.Legend>Radio cards</G.Legend>
+            {{#each RADIOCARDS as |item|}}
+              <G.RadioCard
+                @checked={{item.checked}}
+                @value={{item.value}}
+                as |R|
+              >
+                <R.Icon @name="hexagon" />
+                <R.Label>{{item.label}}</R.Label>
+                <R.Badge @text={{item.badge}} />
+                <R.Description>{{item.description}}</R.Description>
+              </G.RadioCard>
+            {{/each}}
+          </HdsFormRadioCardGroup>
+          <HdsSeparator @spacing="0" />
+        {{/if}}
+
+        {{#if this._showSelect}}
+          <HdsFormSelectField as |F|>
+            <F.Label>Select</F.Label>
+            <F.HelperText>This is the helper text</F.HelperText>
+            <F.Options>
+              <option selected>Lorem ipsum dolor</option>
+              <option>Sine qua non est</option>
+            </F.Options>
+          </HdsFormSelectField>
+          <HdsSeparator @spacing="0" />
+        {{/if}}
+
+        {{#if this._showSuperSelect}}
+          <HdsFormSuperSelectSingleField
+            @options={{SUPERSELECT1_OPTIONS}}
+            @selected={{SELECTED_SUPERSELECT1_OPTION}}
+            @onChange={{noop}}
+            @verticalPosition="below"
+            as |F|
+          >
+            <F.Label>SuperSelect #1</F.Label>
+            <F.Options>
+              {{#let F.options as |option|}}
+                <div class="shw-component-form-super-select-option-rich-header">
+                  <strong>{{option.size}}</strong>
+                  <strong>{{option.price}}/hr</strong>
+                </div>
+                <div>{{option.description}}</div>
+              {{/let}}
+            </F.Options>
+          </HdsFormSuperSelectSingleField>
+          <HdsFormSuperSelectMultipleField
+            @options={{SUPERSELECT2_OPTIONS}}
+            @selected={{SELECTED_SUPERSELECT2_OPTIONS}}
+            @onChange={{noop}}
+            @verticalPosition="below"
+            @isOptional={{true}}
+            as |F|
+          >
+            <F.Label>SuperSelect #2</F.Label>
+            {{F.options}}
+          </HdsFormSuperSelectMultipleField>
+          <HdsSeparator @spacing="0" />
+        {{/if}}
+
+        {{#if this._showTextarea}}
+          <HdsFormTextareaField
+            @value="Ut enim ad minim veniam, quis nostrud exercitation ullamco"
+            as |F|
+          >
+            <F.Label>Textarea</F.Label>
+            <F.HelperText>This is the helper text</F.HelperText>
+          </HdsFormTextareaField>
+          <HdsSeparator @spacing="0" />
+        {{/if}}
+
+        {{#if this._showToggle}}
+          <HdsFormToggleField checked="checked" as |F|>
+            <F.Label>Toggle</F.Label>
+            <F.HelperText>This is the helper text</F.HelperText>
+          </HdsFormToggleField>
+          <HdsSeparator @spacing="0" />
+        {{/if}}
+
+        {{#if this._showButtons}}
+          <HdsButtonSet>
+            <HdsButton type="submit" @text="Submit" />
+            <HdsButton @color="secondary" @text="Cancel" />
+          </HdsButtonSet>
+        {{/if}}
+      </form>
+
+    </div>
+  </template>
+}
diff --git a/showcase/app/components/mock/app/main/generic-text-content.gts b/showcase/app/components/mock/app/main/generic-text-content.gts
index 9c15bb89b5c..5a24e765690 100644
--- a/showcase/app/components/mock/app/main/generic-text-content.gts
+++ b/showcase/app/components/mock/app/main/generic-text-content.gts
@@ -6,14 +6,22 @@
 // HDS components
 import {
   HdsLinkInline,
+  HdsTextDisplay,
   HdsTextBody,
 } from '@hashicorp/design-system-components/components';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export interface MockAppMainGenericTextContentSignature {}
+export interface MockAppMainGenericTextContentSignature {
+  Args: {
+    showHeadings?: boolean;
+  };
+}
 
 <template>
   <div class="mock-app-main-generic-text-content">
+    {{#if @showHeadings}}
+      <HdsTextDisplay @tag="h2" @size="400">Lorem ipsum dolor</HdsTextDisplay>
+    {{/if}}
     <HdsTextBody @tag="p" @size="200">Lorem ipsum dolor sit amet, consectetur
       adipisicing elit. Excepturi
       <HdsLinkInline @href="#" @color="primary">aperiam a molestias quisquam</HdsLinkInline>
@@ -23,6 +31,9 @@ export interface MockAppMainGenericTextContentSignature {}
       pariatur voluptate deserunt quas, iste quo alias? Sequi, qui ipsa.
       Laborum, ipsa atque alias nostrum nihil repudiandae ratione inventore, qui
       impedit obcaecati facilis quaerat aliquam omnis consequuntur.</HdsTextBody>
+    {{#if @showHeadings}}
+      <HdsTextDisplay @tag="h3" @size="300">Veritatis fugiat eligendi</HdsTextDisplay>
+    {{/if}}
     <HdsTextBody @tag="p" @size="200">Ab, deleniti vel. Optio consequuntur sint
       officiis distinctio dolorem nobis porro ipsum natus hic debitis nihil at
       nostrum, reiciendis exercitationem quod deserunt inventore, repellendus
@@ -32,6 +43,9 @@ export interface MockAppMainGenericTextContentSignature {}
       dolorem Quos reprehenderit molestiae veritatis fugiat eligendi temporibus
       fuga modi, id recusandae dolor mollitia accusantium soluta cumque corporis
       ipsa tempore amet dolorum.</HdsTextBody>
+    {{#if @showHeadings}}
+      <HdsTextDisplay @tag="h3" @size="300">Facere aut animi praesentium</HdsTextDisplay>
+    {{/if}}
     <HdsTextBody @tag="p" @size="200">Velit nemo voluptatum, culpa libero
       assumenda ea quae dolorem molestias fugiat, maxime eveniet ipsum, et
       facere aut animi praesentium. Eum voluptatum eaque fugit aspernatur
diff --git a/showcase/app/components/mock/app/main/pagination.gts b/showcase/app/components/mock/app/main/pagination.gts
new file mode 100644
index 00000000000..62c6f6b712f
--- /dev/null
+++ b/showcase/app/components/mock/app/main/pagination.gts
@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { array } from '@ember/helper';
+import style from 'ember-style-modifier/modifiers/style';
+
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+
+// HDS components
+import { HdsPaginationNumbered } from '@hashicorp/design-system-components/components';
+
+// types
+import type { HdsPaginationNumberedSignature } from '@hashicorp/design-system-components/components/hds/pagination/numbered/index';
+
+export interface MockAppMainPaginationSignature {
+  Element: HdsPaginationNumberedSignature['Element'];
+}
+
+const MockAppMainPagination: TemplateOnlyComponent<MockAppMainPaginationSignature> =
+  <template>
+    <HdsPaginationNumbered
+      @totalItems={{39}}
+      @currentPageSize={{10}}
+      @pageSizes={{array 5 10 30}}
+      {{style margin-top="16px"}}
+      ...attributes
+    />
+  </template>;
+export default MockAppMainPagination;
diff --git a/showcase/app/components/mock/app/main/table-complex.gts b/showcase/app/components/mock/app/main/table-complex.gts
new file mode 100644
index 00000000000..ad3d2bc3c8a
--- /dev/null
+++ b/showcase/app/components/mock/app/main/table-complex.gts
@@ -0,0 +1,191 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import style from 'ember-style-modifier/modifiers/style';
+
+// HDS components
+import {
+  HdsBadge,
+  HdsButton,
+  HdsButtonSet,
+  HdsDropdown,
+  HdsFormTextInputBase,
+  HdsSegmentedGroup,
+  HdsTable,
+} from '@hashicorp/design-system-components/components';
+
+// types
+import type { HdsTableSignature } from '@hashicorp/design-system-components/components/hds/table/index';
+
+import { array, hash } from '@ember/helper';
+import { tracked } from '@glimmer/tracking';
+import { eq } from 'ember-truth-helpers';
+
+// local components
+import MockAppMainPagination from './pagination';
+
+export interface MockAppMainTableComplexSignature {
+  Args: {
+    showActionButton?: boolean;
+    showActionDropdown?: boolean;
+  };
+  Element: HdsTableSignature['Element'];
+}
+
+export default class MockAppMainTableComplex extends Component<MockAppMainTableComplexSignature> {
+  _showFilters;
+  _showPagination;
+  @tracked _model;
+
+  constructor(owner: unknown, args: MockAppMainTableComplexSignature['Args']) {
+    super(owner, args);
+    this._showFilters = this.args.showFilters ?? false;
+    this._showPagination = this.args.showPagination ?? false;
+    this._model = [];
+    this.loadClusters();
+  }
+
+  async loadClusters() {
+    const responseClusters = await fetch('/api/mock-clusters-with-status.json');
+    this._model = await responseClusters.json();
+    console.log(this._model);
+  }
+
+  <template>
+    {{#if this._showFilters}}
+      <div {{style margin-bottom="16px"}}>
+        <HdsSegmentedGroup as |SGR|>
+          <SGR.TextInput @type="search" placeholder="Search" />
+          <SGR.Dropdown as |D|>
+            <D.ToggleButton @color="secondary" @text="Cluster" />
+            <D.Header @hasDivider={{true}}>
+              <HdsFormTextInputBase
+                @type="search"
+                placeholder="Narrow results"
+              />
+            </D.Header>
+            <D.Checkbox
+              name="checkbox-item-dropdown"
+              @count="1"
+            >Lorem</D.Checkbox>
+            <D.Checkbox
+              name="checkbox-item-dropdown"
+              @count="23"
+              checked
+            >Ipsum</D.Checkbox>
+            <D.Checkbox
+              name="checkbox-item-dropdown"
+              @count="456"
+            >Dolor</D.Checkbox>
+            <D.Footer @hasDivider={{true}}>
+              <HdsButtonSet>
+                <HdsButton @text="Apply" @isFullWidth={{true}} @size="small" />
+                <HdsButton
+                  @text="Cancel"
+                  @color="secondary"
+                  @isFullWidth={{true}}
+                  @size="small"
+                />
+              </HdsButtonSet>
+            </D.Footer>
+          </SGR.Dropdown>
+          <SGR.Dropdown as |D|>
+            <D.ToggleButton @color="secondary" @text="Status" />
+            <D.Radio name="radio-item-dropdown">Active</D.Radio>
+            <D.Radio name="radio-item-dropdown">Establishing</D.Radio>
+            <D.Radio name="radio-item-dropdown">Pending</D.Radio>
+            <D.Radio name="radio-item-dropdown">Failing</D.Radio>
+          </SGR.Dropdown>
+        </HdsSegmentedGroup>
+      </div>
+    {{/if}}
+    <HdsTable
+      @isSelectable={{true}}
+      @model={{this._model}}
+      @columns={{array
+        (hash label="Peer name" isSortable=true key="peer-name")
+        (hash label="Cluster partition")
+        (hash label="Status")
+        (hash label="Imported services")
+        (hash label="Exported services")
+        (hash
+          label="Select an action from the menu"
+          width="55px"
+          isVisuallyHidden=true
+        )
+      }}
+      @sortBy="peer-name"
+      @sortOrder="asc"
+    >
+      <:body as |B|>
+        <B.Tr
+          @selectionKey={{B.data.id}}
+          @isSelected={{eq B.data.id 2}}
+          @selectionAriaLabelSuffix="row #{{B.data.peer-name}}"
+        >
+          <B.Td>{{B.data.peer-name}}</B.Td>
+          <B.Td>{{B.data.cluster-partition}}</B.Td>
+          <B.Td>
+            {{#if (eq B.data.status "failing")}}
+              <HdsBadge
+                @text="Failing"
+                @color="critical"
+                @icon="x"
+                @type="outlined"
+              />
+            {{else if (eq B.data.status "active")}}
+              <HdsBadge
+                @text="Active"
+                @color="success"
+                @icon="check"
+                @type="outlined"
+              />
+            {{else if (eq B.data.status "pending")}}
+              <HdsBadge
+                @text="Pending"
+                @color="neutral"
+                @icon="loading"
+                @type="outlined"
+              />
+            {{else if (eq B.data.status "establishing")}}
+              <HdsBadge
+                @text="Establishing"
+                @color="highlight"
+                @icon="loading"
+                @type="outlined"
+              />
+            {{/if}}
+          </B.Td>
+          <B.Td>{{B.data.services.imported}}</B.Td>
+          <B.Td>{{B.data.services.exported}}</B.Td>
+          <B.Td @align="right">
+            <HdsDropdown @isInline={{true}} as |dd|>
+              <dd.ToggleIcon
+                @icon="more-horizontal"
+                @text="Overflow Options"
+                @hasChevron={{false}}
+                @size="small"
+              />
+              <dd.Interactive @href="#">Create</dd.Interactive>
+              <dd.Interactive @href="#">Read</dd.Interactive>
+              <dd.Interactive @href="#">Update</dd.Interactive>
+              <dd.Separator />
+              <dd.Interactive
+                @href="#"
+                @color="critical"
+                @icon="trash"
+              >Delete</dd.Interactive>
+            </HdsDropdown>
+          </B.Td>
+        </B.Tr>
+      </:body>
+    </HdsTable>
+
+    {{#if this._showPagination}}
+      <MockAppMainPagination />
+    {{/if}}
+  </template>
+}
diff --git a/showcase/app/components/mock/app/sidebar/side-nav.gts b/showcase/app/components/mock/app/sidebar/side-nav.gts
index 8f898ff264c..38477289ef9 100644
--- a/showcase/app/components/mock/app/sidebar/side-nav.gts
+++ b/showcase/app/components/mock/app/sidebar/side-nav.gts
@@ -152,9 +152,11 @@ export default class MockAppSidebarSideNav extends Component<MockAppSidebarSideN
             @text="Documentation"
           />
         </HdsSideNavList>
+        {{yield to="extraBodyAfter"}}
       </:body>
       <:footer>
         {{#if this.showFooter}}
+          {{yield to="extraFooterBefore"}}
           <HdsDropdown
             class="hds-side-nav-hide-when-minimized shw-layout-app-frame-full-width-elem"
             @enableCollisionDetection={{true}}
diff --git a/showcase/app/controllers/foundations/theming/frameless/demo-application-with-theme-switcher.js b/showcase/app/controllers/foundations/theming/frameless/demo-application-with-theme-switcher.js
new file mode 100644
index 00000000000..57fb2d2ca9a
--- /dev/null
+++ b/showcase/app/controllers/foundations/theming/frameless/demo-application-with-theme-switcher.js
@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+
+export default class DemoApplicationWithThemeSwitcherController extends Controller {
+  @action
+  noop() {}
+}
diff --git a/showcase/app/controllers/foundations/theming.js b/showcase/app/controllers/foundations/theming/index.js
similarity index 100%
rename from showcase/app/controllers/foundations/theming.js
rename to showcase/app/controllers/foundations/theming/index.js
diff --git a/showcase/app/router.ts b/showcase/app/router.ts
index 5371f7e42d0..0d5f16c58e0 100644
--- a/showcase/app/router.ts
+++ b/showcase/app/router.ts
@@ -16,7 +16,11 @@ Router.map(function () {
     this.route('typography');
     this.route('elevation');
     this.route('focus-ring');
-    this.route('theming');
+    this.route('theming', function () {
+      this.route('frameless', function () {
+        this.route('demo-application-with-theme-switcher');
+      });
+    });
   });
   this.route('components', function () {
     this.route('accordion');
diff --git a/showcase/app/templates/foundations/theming/frameless/demo-application-with-theme-switcher.hbs b/showcase/app/templates/foundations/theming/frameless/demo-application-with-theme-switcher.hbs
new file mode 100644
index 00000000000..5eca165934d
--- /dev/null
+++ b/showcase/app/templates/foundations/theming/frameless/demo-application-with-theme-switcher.hbs
@@ -0,0 +1,307 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+
+{{page-title "AppFrame Component - Frameless"}}
+
+<Mock::App @hasPageAlert="true" @hasHeader={{false}}>
+  <:sidebar as |S|>
+    <S.SideNav>
+      <:extraBodyAfter>
+        <div {{style margin-top="16px"}}>
+          <Hds::ThemeSwitcher />
+        </div>
+      </:extraBodyAfter>
+    </S.SideNav>
+  </:sidebar>
+  <:main as |M|>
+    <M.PageHeader @showActionButton={{true}} @showActionDropdown={{true}} />
+
+    <Hds::Text::Display @tag="h1" @size="500" {{style margin="32px 0 24px"}}>Text</Hds::Text::Display>
+
+    <Hds::Tabs as |T|>
+      <T.Tab>Text components</T.Tab>
+      <T.Tab>Helper classes</T.Tab>
+      <T.Tab>Tokens</T.Tab>
+      <T.Panel {{style padding-top="16px"}}>
+        <M.GenericTextContent @showHeadings={{true}} />
+      </T.Panel>
+      <T.Panel {{style padding-top="16px"}}>
+        <Shw::Flex @direction="column" as |SF|>
+          <SF.Item>
+            <h2 class="hds-typography-display-200 hds-foreground-strong">Heading with hds-typography-display-500 /
+              hds-foreground-strong</h2>
+          </SF.Item>
+          <SF.Item>
+            <p class="hds-typography-body-300 hds-foreground-primary">Paragraph with hds-typography-body-300 /
+              hds-foreground-primary</p>
+          </SF.Item>
+          <SF.Item>
+            <code class="hds-typography-code-300 hds-foreground-success">Code with hds-typography-code-300 /
+              hds-foreground-success</code>
+          </SF.Item>
+        </Shw::Flex>
+      </T.Panel>
+      <T.Panel {{style padding-top="16px"}}>
+        <Shw::Flex @direction="column" as |SF|>
+          <SF.Item>
+            <h2
+              {{style
+                font-family="var(--token-typography-display-200-font-family)"
+                font-size="var(--token-typography-display-200-font-size)"
+                line-height="var(--token-typography-display-200-line-height)"
+                color="var(--token-color-foreground-strong)"
+                margin="0"
+              }}
+            >Heading with --token-typography-display-200-font-family / --token-typography-display-200-font-size /
+              --token-typography-display-200-line-height / --token-color-foreground-strong</h2>
+          </SF.Item>
+          <SF.Item>
+            <p
+              {{style
+                font-family="var(--token-typography-body-300-font-family)"
+                font-size="var(--token-typography-body-300-font-size)"
+                line-height="var(--token-typography-body-300-line-height)"
+                color="var(--token-color-foreground-primary)"
+                margin="0"
+              }}
+            >Paragraph with --token-typography-body-300-font-family / --token-typography-body-300-font-size /
+              --token-typography-body-300-line-height / --token-color-foreground-primary</p>
+          </SF.Item>
+          <SF.Item>
+            <code
+              {{style
+                font-family="var(--token-typography-code-300-font-family)"
+                font-size="var(--token-typography-code-300-font-size)"
+                line-height="var(--token-typography-code-300-line-height)"
+                color="var(--token-color-foreground-success)"
+                margin="0"
+              }}
+            >Code with --token-typography-code-300-font-family / --token-typography-code-300-font-size /
+              --token-typography-code-300-line-height / --token-color-foreground-success</code>
+          </SF.Item>
+        </Shw::Flex>
+      </T.Panel>
+    </Hds::Tabs>
+
+    <Shw::Divider />
+
+    <Hds::Text::Display @tag="h1" @size="500" {{style margin="32px 0 24px"}}>Table</Hds::Text::Display>
+
+    <M.TableComplex @showFilters={{true}} @showPagination={{true}} />
+
+    <Shw::Divider />
+
+    <Hds::Text::Display @tag="h1" @size="500" {{style margin="32px 0 24px"}}>Form</Hds::Text::Display>
+
+    <M.FormComplex @showAll={{true}} />
+
+    <Shw::Divider />
+
+    <Hds::Text::Display @tag="h1" @size="500" {{style margin="32px 0 24px"}}>Overlays</Hds::Text::Display>
+
+    <Shw::Flex @direction="column" as |SF|>
+      <SF.Item>
+
+        <button type="button" {{on "click" (set this "isShowingFlyout" true)}}>Open flyout</button>
+
+        {{#if this.isShowingFlyout}}
+          <Hds::Flyout @onClose={{set this "isShowingFlyout" false}} as |F|>
+            <F.Header @tagline="Tagline" @icon="info">
+              Title
+            </F.Header>
+            <F.Description>Lorem ipsum dolor sit amet</F.Description>
+            <F.Body>
+              <M.GenericTextContent />
+            </F.Body>
+            <F.Footer as |FF|>
+              <Hds::ButtonSet>
+                <Hds::Button type="button" @text="Primary" {{on "click" FF.close}} />
+                <Hds::Button type="button" @text="Secondary" @color="secondary" {{on "click" FF.close}} />
+                <Hds::Button
+                  type="button"
+                  @text="Tertiary"
+                  @color="tertiary"
+                  @icon="arrow-right"
+                  @iconPosition="trailing"
+                  {{on "click" FF.close}}
+                />
+              </Hds::ButtonSet>
+            </F.Footer>
+          </Hds::Flyout>
+        {{/if}}
+
+      </SF.Item>
+      <SF.Item>
+
+        <button type="button" {{on "click" (set this "isShowingModal" true)}}>Open modal</button>
+
+        {{#if this.isShowingModal}}
+          <Hds::Modal @color="critical" @onClose={{set this "isShowingModal" false}} as |MM|>
+            <MM.Header @tagline="Tagline" @icon="alert-diamond">
+              Title
+            </MM.Header>
+            <MM.Body>
+              <M.GenericTextContent />
+            </MM.Body>
+            <MM.Footer as |F|>
+              <Hds::ButtonSet>
+                <Hds::Button type="button" @text="Primary" @color="critical" {{on "click" F.close}} />
+                <Hds::Button type="button" @text="Secondary" @color="secondary" {{on "click" F.close}} />
+                <Hds::Button type="button" @text="Tertiary" @color="tertiary" @icon="plus" {{on "click" F.close}} />
+              </Hds::ButtonSet>
+            </MM.Footer>
+          </Hds::Modal>
+        {{/if}}
+
+      </SF.Item>
+      <SF.Item>
+
+        <Hds::TooltipButton
+          aria-label="Information"
+          @text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+        >
+          <Hds::Badge @icon="info" @text="Open tooltip" />
+        </Hds::TooltipButton>
+
+      </SF.Item>
+      <SF.Item>
+
+        <Hds::RichTooltip as |RT|>
+          <RT.Toggle @text="Open rich tooltip" @isInline={{true}} />
+          <RT.Bubble>
+            <Hds::Text::Body @tag="p" size="100">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+              tempor incididunt ut labore et dolore magna aliqua.</Hds::Text::Body>
+          </RT.Bubble>
+        </Hds::RichTooltip>
+
+      </SF.Item>
+    </Shw::Flex>
+
+    <Shw::Divider />
+
+    <Hds::Text::Display @tag="h1" @size="500" {{style margin="32px 0 24px"}}>Alerts</Hds::Text::Display>
+
+    <Shw::Flex @direction="column" as |SF|>
+      <SF.Item>
+        <Hds::Alert @type="page" @color="success" as |A|>
+          <A.Title>Lorem ipsum</A.Title>
+          <A.Description>Lorem ipsum dolor sit amet.</A.Description>
+        </Hds::Alert>
+      </SF.Item>
+      <SF.Item>
+        <Hds::Alert @type="inline" @color="warning" as |A|>
+          <A.Title>Lorem ipsum</A.Title>
+          <A.Description>Lorem ipsum dolor sit amet.</A.Description>
+        </Hds::Alert>
+      </SF.Item>
+      <SF.Item>
+        <Hds::Alert @type="compact" @color="critical" as |A|>
+          <A.Title>Lorem ipsum</A.Title>
+          <A.Description>Lorem ipsum dolor sit amet.</A.Description>
+        </Hds::Alert>
+      </SF.Item>
+    </Shw::Flex>
+
+    <Shw::Divider @level={{2}} />
+
+    <Shw::Flex @direction="column" as |SF|>
+      <SF.Item>
+        <Hds::Toast @color="success" @onDismiss={{this.noop}} as |T|>
+          <T.Title>A toast with a rich description (HTML)</T.Title>
+          <T.Description>Using the
+            <code>A.Description</code>
+            contextual component it's possible to have content that contains HTML tags, like
+            <strong>strong text</strong>
+            and
+            <em>emphasized text</em>
+            as well as
+            <code>code</code>,
+            <pre>pre</pre>
+            and
+            <a href="#">inline links</a>.</T.Description>
+        </Hds::Toast>
+      </SF.Item>
+      <SF.Item>
+        <Hds::Toast @color="warning" as |A|>
+          <A.Title>A toast comparing different types of links in the description</A.Title>
+          <A.Description>
+            Description with
+            <a href="#">HTML link</a>
+            compared with
+            <Hds::Link::Inline @href="#">Primary Hds::Link::Inline</Hds::Link::Inline>
+            and
+            <Hds::Link::Inline @href="#" @color="secondary">Secondary Hds::Link::Inline</Hds::Link::Inline>.
+          </A.Description>
+        </Hds::Toast>
+      </SF.Item>
+      <SF.Item>
+        <Hds::Toast @color="critical" @onDismiss={{this.noop}} as |T|>
+          <T.Title>With multiple actions passed as yielded components</T.Title>
+          <T.Description>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</T.Description>
+          <T.Button @text="Secondary" @color="secondary" />
+          <T.Button @icon="plus" @text="Tertiary" @color="tertiary" />
+          <T.LinkStandalone @icon="plus" @text="Standalone" @href="#" @color="secondary" />
+        </Hds::Toast>
+      </SF.Item>
+    </Shw::Flex>
+
+    <Shw::Divider @level={{2}} />
+
+    <Shw::Flex @direction="column" as |SF|>
+      <SF.Item>
+        <Hds::ApplicationState as |A|>
+          <A.Header @title="Empty state title" @icon="alert-circle" @errorCode="404" />
+          <A.Body
+            @text="Sorry, an unexpected error has occurred. Please try again later or contact support for assistance."
+          />
+          <A.Body
+            @text="Sorry, we couldn't find any results matching your search criteria. Please try again with different search terms or refine your filters."
+          />
+          <A.Footer @hasDivider={{true}} as |F|>
+            <F.Button @color="primary" @text="Primary action" />
+            <F.LinkStandalone @icon="docs-link" @text="Learn more" @iconPosition="trailing" @href="#" />
+          </A.Footer>
+        </Hds::ApplicationState>
+      </SF.Item>
+    </Shw::Flex>
+
+    <Shw::Divider />
+
+    <Hds::Text::Display @tag="h1" @size="500" {{style margin="32px 0 24px"}}>Code blocks</Hds::Text::Display>
+    {{! template-lint-disable no-whitespace-for-layout }}
+    <Hds::CodeBlock
+      id="clipboardTarget2"
+      @hasCopyButton={{true}}
+      @hasLineNumbers={{true}}
+      @highlightLines="4-6, 11"
+      @language="javascript"
+      @value="function convertObjectToArray (obj) {
+  let arr = Object
+    .keys(obj) // return object's keys as an array
+    .map(key => {return [key, obj[key] ]}) // map a function on each array item
+    .flat()
+    .sort()
+  ;
+  return arr;
+}
+function assertObjectsEqual (actual, expected, testName) {
+  let actualStr = JSON.stringify( convertObjectToArray(actual) );
+  let expectedStr = JSON.stringify( convertObjectToArray(expected) );
+  console.log(`ACTUAL: ${actualStr}  EXPECTED: ${expectedStr}`);
+  if (actualStr === expectedStr) {
+    console.log('passed');
+  } else {
+    console.log(`FAILED [${testName}] Expected ${JSON.stringify(expected)}, but got ${JSON.stringify(actual)}`);
+  }
+}"
+      as |CB|
+    >
+      <CB.Title>Title</CB.Title>
+      <CB.Description>Description</CB.Description>
+    </Hds::CodeBlock>
+    {{! template-lint-enable no-whitespace-for-layout }}
+
+  </:main>
+</Mock::App>
\ No newline at end of file
diff --git a/showcase/app/templates/foundations/theming.hbs b/showcase/app/templates/foundations/theming/index.hbs
similarity index 100%
rename from showcase/app/templates/foundations/theming.hbs
rename to showcase/app/templates/foundations/theming/index.hbs
diff --git a/showcase/types/template-registry.ts b/showcase/types/template-registry.ts
index 6ee40e4417b..d1b89ca5cee 100644
--- a/showcase/types/template-registry.ts
+++ b/showcase/types/template-registry.ts
@@ -26,6 +26,9 @@ import MockAppHeaderAppHeader from '../app/components/mock/app/header/app-header
 import MockAppSidebarSideNav from '../app/components/mock/app/sidebar/side-nav';
 import MockAppMainPageHeader from '../app/components/mock/app/main/page-header';
 import MockAppMainGenericTextContent from '../app/components/mock/app/main/generic-text-content';
+import MockAppMainFormComplex from '../app/components/mock/app/main/form-complex';
+import MockAppMainTableComplex from '../app/components/mock/app/main/table-complex';
+import MockAppMainPagination from '../app/components/mock/app/main/pagination';
 import MockAppFooterAppFooter from '../app/components/mock/app/footer/app-footer';
 
 export default interface ShowcaseTemplateRegistry {
@@ -75,6 +78,12 @@ export default interface ShowcaseTemplateRegistry {
   'mock/app/main/page-header': typeof MockAppMainPageHeader;
   'Mock::App::Main::GenericTextContent': typeof MockAppMainGenericTextContent;
   'mock/app/main/generic-text-content': typeof MockAppMainGenericTextContent;
+  'Mock::App::Main::FormComplex': typeof MockAppMainFormComplex;
+  'mock/app/main/form-complex': typeof MockAppMainFormComplex;
+  'Mock::App::Main::TableComplex': typeof MockAppMainTableComplex;
+  'mock/app/main/table-complex': typeof MockAppMainTableComplex;
+  'Mock::App::Main::Pagination': typeof MockAppMainPagination;
+  'mock/app/main/pagination': typeof MockAppMainPagination;
   'Mock::App::Footer::AppFooter': typeof MockAppFooterAppFooter;
   'mock/app/footer/app-footer': typeof MockAppFooterAppFooter;
 }