From 3f43ba92fedabee41623fca894c1ff1bc6989e2f Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Wed, 10 Jul 2024 16:14:56 -0700
Subject: [PATCH 01/10] test(card): add demo-theme helper

---
 .../calcite-components/src/demos/card.html    | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)
diff --git a/packages/calcite-components/src/demos/card.html b/packages/calcite-components/src/demos/card.html
index e7ec6046922..95816250446 100644
--- a/packages/calcite-components/src/demos/card.html
+++ b/packages/calcite-components/src/demos/card.html
@@ -49,6 +49,41 @@
 
   <body>
     <demo-dom-swapper>
+      <demo-theme
+        tokens="
+          --calcite-card-accent-color-selected,
+          --calcite-card-background-color,
+          --calcite-card-border-color,
+          --calcite-card-corner-radius,
+          --calcite-card-loader-color-end,
+          --calcite-card-loader-color-middle,
+          --calcite-card-loader-color-start,
+          --calcite-card-selection-background-color,
+          --calcite-card-selection-background-color-active,
+          --calcite-card-selection-background-color-hover,
+          --calcite-card-selection-background-color-selected,
+          --calcite-card-selection-icon-color,
+          --calcite-card-selection-icon-color-hover,
+          --calcite-card-selection-icon-color-selected,
+          --calcite-card-shadow"
+      >
+        <calcite-card>
+          <span slot="heading">Heading</span>
+          <span slot="description">Description</span>
+        </calcite-card>
+        <calcite-card selection-mode="single">
+          <span slot="heading">Heading</span>
+          <span slot="description">Description</span>
+        </calcite-card>
+        <calcite-card selected selection-mode="single">
+          <span slot="heading">Heading</span>
+          <span slot="description">Description</span>
+        </calcite-card>
+        <calcite-card loading>
+          <span slot="heading">Heading</span>
+          <span slot="description">Description</span>
+        </calcite-card>
+      </demo-theme>
       <h1 style="margin: 0 auto; text-align: center">Card</h1>
       <div class="parent">
         <div class="child">Adjust selection mode of demo Chip Groups</div>

From 246e5af5fbbe3f40fb6056943cc3fc1415127a6f Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Wed, 10 Jul 2024 16:39:49 -0700
Subject: [PATCH 02/10] adding card-group-gap

---
 .../calcite-components/src/demos/card.html    | 35 ++++++++++---------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/packages/calcite-components/src/demos/card.html b/packages/calcite-components/src/demos/card.html
index 95816250446..5f42d62f4d1 100644
--- a/packages/calcite-components/src/demos/card.html
+++ b/packages/calcite-components/src/demos/card.html
@@ -55,6 +55,7 @@
           --calcite-card-background-color,
           --calcite-card-border-color,
           --calcite-card-corner-radius,
+          --calcite-card-group-gap,
           --calcite-card-loader-color-end,
           --calcite-card-loader-color-middle,
           --calcite-card-loader-color-start,
@@ -67,22 +68,24 @@
           --calcite-card-selection-icon-color-selected,
           --calcite-card-shadow"
       >
-        <calcite-card>
-          <span slot="heading">Heading</span>
-          <span slot="description">Description</span>
-        </calcite-card>
-        <calcite-card selection-mode="single">
-          <span slot="heading">Heading</span>
-          <span slot="description">Description</span>
-        </calcite-card>
-        <calcite-card selected selection-mode="single">
-          <span slot="heading">Heading</span>
-          <span slot="description">Description</span>
-        </calcite-card>
-        <calcite-card loading>
-          <span slot="heading">Heading</span>
-          <span slot="description">Description</span>
-        </calcite-card>
+        <calcite-card-group>
+          <calcite-card>
+            <span slot="heading">Heading</span>
+            <span slot="description">Description</span>
+          </calcite-card>
+          <calcite-card selection-mode="single">
+            <span slot="heading">Heading</span>
+            <span slot="description">Description</span>
+          </calcite-card>
+          <calcite-card selected selection-mode="single">
+            <span slot="heading">Heading</span>
+            <span slot="description">Description</span>
+          </calcite-card>
+          <calcite-card loading>
+            <span slot="heading">Heading</span>
+            <span slot="description">Description</span>
+          </calcite-card>
+        </calcite-card-group>
       </demo-theme>
       <h1 style="margin: 0 auto; text-align: center">Card</h1>
       <div class="parent">

From 687b2e847a9e8fa133e0508f29e967568d39b9fc Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Thu, 11 Jul 2024 13:34:02 -0700
Subject: [PATCH 03/10] adding shell, shell-panel and shell-center-row
 demo-theme examples

---
 .../src/demos/shell-panel.html                | 369 ++++++++++--------
 1 file changed, 201 insertions(+), 168 deletions(-)

diff --git a/packages/calcite-components/src/demos/shell-panel.html b/packages/calcite-components/src/demos/shell-panel.html
index fe241d016af..b973f24da97 100644
--- a/packages/calcite-components/src/demos/shell-panel.html
+++ b/packages/calcite-components/src/demos/shell-panel.html
@@ -88,178 +88,211 @@
     <demo-dom-swapper>
       <main>
         <div class="shell-container">
-          <calcite-shell>
-            <div class="gnav" slot="header">
-              <calcite-segmented-control id="control-content-behind">
-                <calcite-segmented-control-item value="not-content-behind" checked>
-                  Not content behind
-                </calcite-segmented-control-item>
-                <calcite-segmented-control-item value="content-behind"> Content behind </calcite-segmented-control-item>
-              </calcite-segmented-control>
-              <calcite-segmented-control id="control-tall-content">
-                <calcite-segmented-control-item value="not-tall-content" checked>
-                  Not tall content
-                </calcite-segmented-control-item>
-                <calcite-segmented-control-item value="tall-content">Tall content</calcite-segmented-control-item>
-              </calcite-segmented-control>
-              <calcite-segmented-control id="control-resizable">
-                <calcite-segmented-control-item value="not-resizable" checked>
-                  Not resizable
-                </calcite-segmented-control-item>
-                <calcite-segmented-control-item value="resizable"> Resizable </calcite-segmented-control-item>
-              </calcite-segmented-control>
-            </div>
+          <demo-theme
+            tokens="
+              --calcite-shell-center-row-background-color,
+              --calcite-shell-center-row-border-color,
+              --calcite-shell-center-row-border-radius,
+              --calcite-shell-panel-background-color,
+              --calcite-shell-panel-content-width,
+              --calcite-shell-panel-corner-radius,
+              --calcite-shell-panel-detached-max-height,
+              --calcite-shell-panel-height,
+              --calcite-shell-panel-max-height,
+              --calcite-shell-panel-max-width,
+              --calcite-shell-panel-min-height,
+              --calcite-shell-panel-min-width,
+              --calcite-shell-panel-shadow,
+              --calcite-shell-panel-z-index"
+          >
+            <calcite-shell>
+              <calcite-shell-center-row detached slot="center-row">
+                <calcite-action-bar class="calcite-mode-dark" slot="action-bar">
+                  <calcite-action-group>
+                    <calcite-action text="Add" label="Add Item" icon="plus"></calcite-action>
+                    <calcite-action text="Save" label="Save Item" icon="save"></calcite-action>
+                  </calcite-action-group>
+                </calcite-action-bar>
+              </calcite-shell-center-row>
+              <div class="gnav" slot="header">
+                <calcite-segmented-control id="control-content-behind">
+                  <calcite-segmented-control-item value="not-content-behind" checked>
+                    Not content behind
+                  </calcite-segmented-control-item>
+                  <calcite-segmented-control-item value="content-behind">
+                    Content behind
+                  </calcite-segmented-control-item>
+                </calcite-segmented-control>
+                <calcite-segmented-control id="control-tall-content">
+                  <calcite-segmented-control-item value="not-tall-content" checked>
+                    Not tall content
+                  </calcite-segmented-control-item>
+                  <calcite-segmented-control-item value="tall-content">Tall content</calcite-segmented-control-item>
+                </calcite-segmented-control>
+                <calcite-segmented-control id="control-resizable">
+                  <calcite-segmented-control-item value="not-resizable" checked>
+                    Not resizable
+                  </calcite-segmented-control-item>
+                  <calcite-segmented-control-item value="resizable"> Resizable </calcite-segmented-control-item>
+                </calcite-segmented-control>
+              </div>
 
-            <div id="viewDiv"></div>
-            <calcite-shell-panel slot="panel-start" style="--calcite-shell-panel-height: 40vh">
-              <calcite-action-bar slot="action-bar" class="calcite-mode-dark">
-                <calcite-action-group>
-                  <calcite-action text="Save" icon="save" indicator> </calcite-action>
-                  <calcite-action text-enabled icon="map" text="New" slot="menu-actions"> </calcite-action>
-                  <calcite-action text-enabled icon="collection" text="Open" slot="menu-actions"> </calcite-action>
-                </calcite-action-group>
-                <calcite-action-group>
-                  <calcite-action icon="layers" text="Layers" active> </calcite-action>
-                  <calcite-action icon="basemap" text="Basemaps"> </calcite-action>
-                  <calcite-action icon="legend" text="Legend"> </calcite-action>
-                  <calcite-action icon="bookmark" text="Bookmarks"> </calcite-action>
-                </calcite-action-group>
-                <calcite-action-group>
-                  <calcite-action text="Share" icon="share"></calcite-action>
-                  <calcite-action text="Print" icon="print"></calcite-action>
-                </calcite-action-group>
-                <calcite-action-group slot="actions-end">
-                  <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
-                  <calcite-action text="What's next" icon="mega-phone"></calcite-action>
-                </calcite-action-group>
-              </calcite-action-bar>
-              <calcite-panel closable heading="Layers" height-scale="l" width-scale="m" id="panel-start">
-                <calcite-block open heading="Preview display-mode">
-                  <calcite-chip-group id="chip-group-panel-start" selection-mode="single-persist">
-                    <calcite-chip selected value="dock">dock</calcite-chip>
-                    <calcite-chip value="float">float</calcite-chip>
-                    <calcite-chip value="overlay">overlay</calcite-chip>
-                  </calcite-chip-group>
-                  <div class="tall-content-example" style="display: none"></div>
-                </calcite-block>
-              </calcite-panel>
-            </calcite-shell-panel>
+              <div id="viewDiv"></div>
+              <calcite-shell-panel slot="panel-start" style="--calcite-shell-panel-height: 40vh">
+                <calcite-action-bar slot="action-bar" class="calcite-mode-dark">
+                  <calcite-action-group>
+                    <calcite-action text="Save" icon="save" indicator> </calcite-action>
+                    <calcite-action text-enabled icon="map" text="New" slot="menu-actions"> </calcite-action>
+                    <calcite-action text-enabled icon="collection" text="Open" slot="menu-actions"> </calcite-action>
+                  </calcite-action-group>
+                  <calcite-action-group>
+                    <calcite-action icon="layers" text="Layers" active> </calcite-action>
+                    <calcite-action icon="basemap" text="Basemaps"> </calcite-action>
+                    <calcite-action icon="legend" text="Legend"> </calcite-action>
+                    <calcite-action icon="bookmark" text="Bookmarks"> </calcite-action>
+                  </calcite-action-group>
+                  <calcite-action-group>
+                    <calcite-action text="Share" icon="share"></calcite-action>
+                    <calcite-action text="Print" icon="print"></calcite-action>
+                  </calcite-action-group>
+                  <calcite-action-group slot="actions-end">
+                    <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
+                    <calcite-action text="What's next" icon="mega-phone"></calcite-action>
+                  </calcite-action-group>
+                </calcite-action-bar>
+                <calcite-panel closable heading="Layers" height-scale="l" width-scale="m" id="panel-start">
+                  <calcite-block open heading="Preview display-mode">
+                    <calcite-chip-group id="chip-group-panel-start" selection-mode="single-persist">
+                      <calcite-chip selected value="dock">dock</calcite-chip>
+                      <calcite-chip value="float">float</calcite-chip>
+                      <calcite-chip value="overlay">overlay</calcite-chip>
+                    </calcite-chip-group>
+                    <div class="tall-content-example" style="display: none"></div>
+                  </calcite-block>
+                </calcite-panel>
+              </calcite-shell-panel>
 
-            <calcite-shell-panel slot="panel-end" position="end">
-              <calcite-action-bar slot="action-bar">
-                <calcite-tooltip slot="expand-tooltip" label="tooltip" pointer-disabled>Add layers</calcite-tooltip>
-                <calcite-action-group>
-                  <calcite-action text="Layer properties" icon="sliders-horizontal"> </calcite-action>
-                  <calcite-action text="Styles" icon="shapes"> </calcite-action>
-                  <calcite-action text="Filter" icon="layer-filter"> </calcite-action>
-                  <calcite-action text="Configure pop-ups" icon="popup" active> </calcite-action>
-                  <calcite-action text-enabled text="Configure attributes" icon="feature-details" slot="menu-actions">
-                  </calcite-action>
-                  <calcite-action text-enabled text="Labels" icon="label" slot="menu-actions"> </calcite-action>
-                  <calcite-action text-enabled text="Tables" icon="table" slot="menu-actions"> </calcite-action>
-                </calcite-action-group>
-                <calcite-action-group>
-                  <calcite-action icon="search" text="Search"></calcite-action>
-                  <calcite-action icon="measure" text="Measure"></calcite-action>
-                  <calcite-action text-enabled icon="road-sign" text="Directions" slot="menu-actions"></calcite-action>
-                  <calcite-action text-enabled icon="point" text="Location" slot="menu-actions"></calcite-action>
-                  <calcite-action text-enabled icon="pencil-square" text="Edit" disabled slot="menu-actions">
-                  </calcite-action>
-                  <calcite-action text-enabled icon="clock" text="Time" disabled slot="menu-actions"></calcite-action>
-                </calcite-action-group>
-                <calcite-action-group slot="actions-end">
-                  <calcite-action text="Tips" id="tip-manager-button">
-                    <calcite-icon icon="lightbulb" scale="s"></calcite-icon>
-                  </calcite-action>
-                </calcite-action-group>
-              </calcite-action-bar>
-              <calcite-panel
-                id="panel-end"
-                closable
-                heading="Configure popup"
-                description="Popular Demographics in the United States (Beta) - County"
-                width-scale="m"
-              >
-                <calcite-block open heading="Preview display-mode">
-                  <calcite-chip-group id="chip-group-panel-end" selection-mode="single-persist">
-                    <calcite-chip selected value="dock">dock</calcite-chip>
-                    <calcite-chip value="float">float</calcite-chip>
-                    <calcite-chip value="overlay">overlay</calcite-chip>
-                  </calcite-chip-group>
-                  <div class="tall-content-example" style="display: none"></div>
-                </calcite-block>
-              </calcite-panel>
-            </calcite-shell-panel>
+              <calcite-shell-panel slot="panel-end" position="end">
+                <calcite-action-bar slot="action-bar">
+                  <calcite-tooltip slot="expand-tooltip" label="tooltip" pointer-disabled>Add layers</calcite-tooltip>
+                  <calcite-action-group>
+                    <calcite-action text="Layer properties" icon="sliders-horizontal"> </calcite-action>
+                    <calcite-action text="Styles" icon="shapes"> </calcite-action>
+                    <calcite-action text="Filter" icon="layer-filter"> </calcite-action>
+                    <calcite-action text="Configure pop-ups" icon="popup" active> </calcite-action>
+                    <calcite-action text-enabled text="Configure attributes" icon="feature-details" slot="menu-actions">
+                    </calcite-action>
+                    <calcite-action text-enabled text="Labels" icon="label" slot="menu-actions"> </calcite-action>
+                    <calcite-action text-enabled text="Tables" icon="table" slot="menu-actions"> </calcite-action>
+                  </calcite-action-group>
+                  <calcite-action-group>
+                    <calcite-action icon="search" text="Search"></calcite-action>
+                    <calcite-action icon="measure" text="Measure"></calcite-action>
+                    <calcite-action
+                      text-enabled
+                      icon="road-sign"
+                      text="Directions"
+                      slot="menu-actions"
+                    ></calcite-action>
+                    <calcite-action text-enabled icon="point" text="Location" slot="menu-actions"></calcite-action>
+                    <calcite-action text-enabled icon="pencil-square" text="Edit" disabled slot="menu-actions">
+                    </calcite-action>
+                    <calcite-action text-enabled icon="clock" text="Time" disabled slot="menu-actions"></calcite-action>
+                  </calcite-action-group>
+                  <calcite-action-group slot="actions-end">
+                    <calcite-action text="Tips" id="tip-manager-button">
+                      <calcite-icon icon="lightbulb" scale="s"></calcite-icon>
+                    </calcite-action>
+                  </calcite-action-group>
+                </calcite-action-bar>
+                <calcite-panel
+                  id="panel-end"
+                  closable
+                  heading="Configure popup"
+                  description="Popular Demographics in the United States (Beta) - County"
+                  width-scale="m"
+                >
+                  <calcite-block open heading="Preview display-mode">
+                    <calcite-chip-group id="chip-group-panel-end" selection-mode="single-persist">
+                      <calcite-chip selected value="dock">dock</calcite-chip>
+                      <calcite-chip value="float">float</calcite-chip>
+                      <calcite-chip value="overlay">overlay</calcite-chip>
+                    </calcite-chip-group>
+                    <div class="tall-content-example" style="display: none"></div>
+                  </calcite-block>
+                </calcite-panel>
+              </calcite-shell-panel>
 
-            <calcite-shell-panel layout="horizontal" slot="panel-top" position="start">
-              <calcite-action-bar slot="action-bar" expand-disabled>
-                <calcite-action-group>
-                  <calcite-action text="Save" icon="save" indicator> </calcite-action>
-                  <calcite-action text-enabled icon="map" text="New" slot="menu-actions"> </calcite-action>
-                  <calcite-action text-enabled icon="collection" text="Open" slot="menu-actions"> </calcite-action>
-                </calcite-action-group>
-                <calcite-action-group>
-                  <calcite-action icon="layers" text="Layers" active> </calcite-action>
-                  <calcite-action icon="basemap" text="Basemaps"> </calcite-action>
-                  <calcite-action icon="legend" text="Legend"> </calcite-action>
-                  <calcite-action icon="bookmark" text="Bookmarks"> </calcite-action>
-                </calcite-action-group>
-                <calcite-action-group>
-                  <calcite-action text="Share" icon="share"></calcite-action>
-                  <calcite-action text="Print" icon="print"></calcite-action>
-                </calcite-action-group>
-                <calcite-action-group slot="actions-end">
-                  <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
-                  <calcite-action text="What's next" icon="mega-phone"></calcite-action>
-                </calcite-action-group>
-              </calcite-action-bar>
-              <calcite-panel heading="Example" closable id="panel-top">
-                <calcite-block open heading="Preview display-mode">
-                  <calcite-chip-group id="chip-group-panel-top" selection-mode="single-persist">
-                    <calcite-chip selected value="dock">dock</calcite-chip>
-                    <calcite-chip value="float">float</calcite-chip>
-                    <calcite-chip value="overlay">overlay</calcite-chip>
-                  </calcite-chip-group>
-                  <div class="tall-content-example" style="display: none"></div>
-                </calcite-block>
-              </calcite-panel>
-            </calcite-shell-panel>
+              <calcite-shell-panel layout="horizontal" slot="panel-top" position="start">
+                <calcite-action-bar slot="action-bar" expand-disabled>
+                  <calcite-action-group>
+                    <calcite-action text="Save" icon="save" indicator> </calcite-action>
+                    <calcite-action text-enabled icon="map" text="New" slot="menu-actions"> </calcite-action>
+                    <calcite-action text-enabled icon="collection" text="Open" slot="menu-actions"> </calcite-action>
+                  </calcite-action-group>
+                  <calcite-action-group>
+                    <calcite-action icon="layers" text="Layers" active> </calcite-action>
+                    <calcite-action icon="basemap" text="Basemaps"> </calcite-action>
+                    <calcite-action icon="legend" text="Legend"> </calcite-action>
+                    <calcite-action icon="bookmark" text="Bookmarks"> </calcite-action>
+                  </calcite-action-group>
+                  <calcite-action-group>
+                    <calcite-action text="Share" icon="share"></calcite-action>
+                    <calcite-action text="Print" icon="print"></calcite-action>
+                  </calcite-action-group>
+                  <calcite-action-group slot="actions-end">
+                    <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
+                    <calcite-action text="What's next" icon="mega-phone"></calcite-action>
+                  </calcite-action-group>
+                </calcite-action-bar>
+                <calcite-panel heading="Example" closable id="panel-top">
+                  <calcite-block open heading="Preview display-mode">
+                    <calcite-chip-group id="chip-group-panel-top" selection-mode="single-persist">
+                      <calcite-chip selected value="dock">dock</calcite-chip>
+                      <calcite-chip value="float">float</calcite-chip>
+                      <calcite-chip value="overlay">overlay</calcite-chip>
+                    </calcite-chip-group>
+                    <div class="tall-content-example" style="display: none"></div>
+                  </calcite-block>
+                </calcite-panel>
+              </calcite-shell-panel>
 
-            <calcite-shell-panel layout="horizontal" slot="panel-bottom" position="end">
-              <calcite-action-bar slot="action-bar" expand-disabled>
-                <calcite-action-group>
-                  <calcite-action text="Save" icon="save" indicator> </calcite-action>
-                  <calcite-action text-enabled icon="map" text="New" slot="menu-actions"> </calcite-action>
-                  <calcite-action text-enabled icon="collection" text="Open" slot="menu-actions"> </calcite-action>
-                </calcite-action-group>
-                <calcite-action-group>
-                  <calcite-action icon="layers" text="Layers" active> </calcite-action>
-                  <calcite-action icon="basemap" text="Basemaps"> </calcite-action>
-                  <calcite-action icon="legend" text="Legend"> </calcite-action>
-                  <calcite-action icon="bookmark" text="Bookmarks"> </calcite-action>
-                </calcite-action-group>
-                <calcite-action-group>
-                  <calcite-action text="Share" icon="share"></calcite-action>
-                  <calcite-action text="Print" icon="print"></calcite-action>
-                </calcite-action-group>
-                <calcite-action-group slot="actions-end">
-                  <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
-                  <calcite-action text="What's next" icon="mega-phone"></calcite-action>
-                </calcite-action-group>
-              </calcite-action-bar>
-              <calcite-panel heading="Example" closable id="panel-bottom">
-                <calcite-block open heading="Preview display-mode">
-                  <calcite-chip-group id="chip-group-panel-bottom" selection-mode="single-persist">
-                    <calcite-chip selected value="dock">dock</calcite-chip>
-                    <calcite-chip value="float">float</calcite-chip>
-                    <calcite-chip value="overlay">overlay</calcite-chip>
-                  </calcite-chip-group>
-                  <div class="tall-content-example" style="display: none"></div>
-                </calcite-block>
-              </calcite-panel>
-            </calcite-shell-panel>
-            <footer slot="footer">Footer</footer>
-          </calcite-shell>
+              <calcite-shell-panel layout="horizontal" slot="panel-bottom" position="end">
+                <calcite-action-bar slot="action-bar" expand-disabled>
+                  <calcite-action-group>
+                    <calcite-action text="Save" icon="save" indicator> </calcite-action>
+                    <calcite-action text-enabled icon="map" text="New" slot="menu-actions"> </calcite-action>
+                    <calcite-action text-enabled icon="collection" text="Open" slot="menu-actions"> </calcite-action>
+                  </calcite-action-group>
+                  <calcite-action-group>
+                    <calcite-action icon="layers" text="Layers" active> </calcite-action>
+                    <calcite-action icon="basemap" text="Basemaps"> </calcite-action>
+                    <calcite-action icon="legend" text="Legend"> </calcite-action>
+                    <calcite-action icon="bookmark" text="Bookmarks"> </calcite-action>
+                  </calcite-action-group>
+                  <calcite-action-group>
+                    <calcite-action text="Share" icon="share"></calcite-action>
+                    <calcite-action text="Print" icon="print"></calcite-action>
+                  </calcite-action-group>
+                  <calcite-action-group slot="actions-end">
+                    <calcite-action text="Feedback" icon="speech-bubble-plus"></calcite-action>
+                    <calcite-action text="What's next" icon="mega-phone"></calcite-action>
+                  </calcite-action-group>
+                </calcite-action-bar>
+                <calcite-panel heading="Example" closable id="panel-bottom">
+                  <calcite-block open heading="Preview display-mode">
+                    <calcite-chip-group id="chip-group-panel-bottom" selection-mode="single-persist">
+                      <calcite-chip selected value="dock">dock</calcite-chip>
+                      <calcite-chip value="float">float</calcite-chip>
+                      <calcite-chip value="overlay">overlay</calcite-chip>
+                    </calcite-chip-group>
+                    <div class="tall-content-example" style="display: none"></div>
+                  </calcite-block>
+                </calcite-panel>
+              </calcite-shell-panel>
+              <footer slot="footer">Footer</footer>
+            </calcite-shell>
+          </demo-theme>
         </div>
 
         <script>

From 749d63b1f363317a39b3eceafa395e47e848a9ac Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Thu, 11 Jul 2024 13:37:23 -0700
Subject: [PATCH 04/10] adding stepper demo-theme example

---
 .../src/components/stepper/stepper.scss       | 14 ++++-----
 .../calcite-components/src/demos/stepper.html | 29 +++++++++++++++++++
 2 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/packages/calcite-components/src/components/stepper/stepper.scss b/packages/calcite-components/src/components/stepper/stepper.scss
index e72722e14a5..5f8b299a311 100644
--- a/packages/calcite-components/src/components/stepper/stepper.scss
+++ b/packages/calcite-components/src/components/stepper/stepper.scss
@@ -8,13 +8,13 @@
  * @prop --calcite-stepper-action-background-color: defines the background color of an action sub-component inside the component.
  * @prop --calcite-stepper-action-background-color-hover: defines the background color of an action sub-component when hovered or focused.
  * @prop --calcite-stepper-action-background-color-active: defines the background color of an action sub-component when active.
- * @prop --calcite-stepper-step-bar-fill-color : Specifies fill color for step-bar.
- * @prop --calcite-stepper-step-bar-fill-color-hover : Specifies fill color for step-bar when hovered.
- * @prop --calcite-stepper-step-bar-selected-fill-color : Specifies fill color for selected step-bar.
- * @prop --calcite-stepper-step-bar-complete-fill-color : Specifies fill color for completed step-bar.
- * @prop --calcite-stepper-step-bar-completed-fill-color-hover : Specifies fill color for completed step-bar when hovered.
- * @prop --calcite-stepper-step-bar-error-fill-color : Specifies fill color for error step-bar.
- * @prop --calcite-stepper-step-bar-error-fill-color-hover : Specifies fill color for error step-bar when hovered.
+ * @prop --calcite-stepper-step-bar-fill-color: Specifies fill color for step-bar.
+ * @prop --calcite-stepper-step-bar-fill-color-hover: Specifies fill color for step-bar when hovered.
+ * @prop --calcite-stepper-step-bar-selected-fill-color: Specifies fill color for selected step-bar.
+ * @prop --calcite-stepper-step-bar-complete-fill-color: Specifies fill color for completed step-bar.
+ * @prop --calcite-stepper-step-bar-completed-fill-color-hover: Specifies fill color for completed step-bar when hovered.
+ * @prop --calcite-stepper-step-bar-error-fill-color: Specifies fill color for error step-bar.
+ * @prop --calcite-stepper-step-bar-error-fill-color-hover: Specifies fill color for error step-bar when hovered.
  *
  */
 
diff --git a/packages/calcite-components/src/demos/stepper.html b/packages/calcite-components/src/demos/stepper.html
index cf2d7a88e33..916ac30cc82 100644
--- a/packages/calcite-components/src/demos/stepper.html
+++ b/packages/calcite-components/src/demos/stepper.html
@@ -41,6 +41,35 @@
 
   <body>
     <demo-dom-swapper>
+      <demo-theme
+        tokens="
+          --calcite-stepper-action-background-color,
+          --calcite-stepper-action-background-color-hover,
+          --calcite-stepper-action-background-color-active,
+          --calcite-stepper-step-bar-fill-color,
+          --calcite-stepper-step-bar-fill-color-hover,
+          --calcite-stepper-step-bar-selected-fill-color,
+          --calcite-stepper-step-bar-complete-fill-color,
+          --calcite-stepper-step-bar-completed-fill-color-hover,
+          --calcite-stepper-step-bar-error-fill-color,
+          --calcite-stepper-step-bar-error-fill-color-hover"
+      >
+        <calcite-stepper layout="horizontal-single" numbered icon scale="s">
+          <calcite-stepper-item heading="Confirm and complete">
+            <div>Step 4 Content Goes Here</div>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Choose method" selected>
+            <div>Step 1 Content Goes Here</div>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Compile member list" complete>
+            <div>Step 2 Content Goes Here</div>
+          </calcite-stepper-item>
+          <calcite-stepper-item heading="Set member properties" description="Some subtext" error>
+            <div>Step 3 Content Goes Here</div>
+          </calcite-stepper-item>
+        </calcite-stepper>
+      </demo-theme>
+
       <!--
       **************************************************
       * SMALL horizontal-single

From 8deabf96f78f2dd7bee117a124f0a3bf0d2698bd Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Thu, 11 Jul 2024 13:38:11 -0700
Subject: [PATCH 05/10] stepper-item

---
 packages/calcite-components/src/demos/stepper.html | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/calcite-components/src/demos/stepper.html b/packages/calcite-components/src/demos/stepper.html
index 916ac30cc82..dc4b6d326c3 100644
--- a/packages/calcite-components/src/demos/stepper.html
+++ b/packages/calcite-components/src/demos/stepper.html
@@ -46,6 +46,11 @@
           --calcite-stepper-action-background-color,
           --calcite-stepper-action-background-color-hover,
           --calcite-stepper-action-background-color-active,
+          --calcite-stepper-item-description-text-color,
+          --calcite-stepper-item-heading-text-color,
+          --calcite-stepper-item-icon-color,
+          --calcite-stepper-item-number-text-color,
+          --calcite-stepper-item-text-color,
           --calcite-stepper-step-bar-fill-color,
           --calcite-stepper-step-bar-fill-color-hover,
           --calcite-stepper-step-bar-selected-fill-color,

From 56f8b8285a3968d6687617e81a753678b281a578 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Thu, 11 Jul 2024 13:40:55 -0700
Subject: [PATCH 06/10] switch

---
 packages/calcite-components/src/demos/switch.html | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/calcite-components/src/demos/switch.html b/packages/calcite-components/src/demos/switch.html
index 2d04b593703..8198c18d66f 100644
--- a/packages/calcite-components/src/demos/switch.html
+++ b/packages/calcite-components/src/demos/switch.html
@@ -36,6 +36,17 @@
   </head>
 
   <body>
+    <demo-theme
+      tokens="
+        --calcite-switch-corner-radius,
+        --calcite-switch-handle-background-color,
+        --calcite-switch-handle-border-color,
+        --calcite-switch-track-background-color,
+        --calcite-switch-border-color"
+    >
+      <calcite-switch></calcite-switch>
+      <calcite-switch checked></calcite-switch>
+    </demo-theme>
     <demo-dom-swapper>
       <h1 style="margin: 0 auto; text-align: center">Switch</h1>
 

From a646df592f6960799113589003f49fa43913d855 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Thu, 11 Jul 2024 13:47:52 -0700
Subject: [PATCH 07/10] tile/tile-group

---
 .../calcite-components/src/demos/tile.html    | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/packages/calcite-components/src/demos/tile.html b/packages/calcite-components/src/demos/tile.html
index 3a884f63ee5..5c5414fb486 100644
--- a/packages/calcite-components/src/demos/tile.html
+++ b/packages/calcite-components/src/demos/tile.html
@@ -39,6 +39,35 @@
   </head>
 
   <body>
+    <demo-theme
+      tokens="
+        --calcite-tile-background-color,
+        --calcite-tile-border-color,
+        --calcite-tile-description-text-color,
+        --calcite-tile-heading-text-color,
+        --calcite-tile-icon-color,
+        --calcite-tile-selection-icon-color-hover"
+    >
+      <calcite-tile-group selection-mode="single">
+        <calcite-tile
+          heading="Tile heading lorem ipsum"
+          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+          icon="layers"
+        ></calcite-tile>
+        <calcite-tile
+          heading="Tile heading lorem ipsum"
+          description="Leverage agile frameworks to provide a robust synopsis for high level overviews."
+          icon="layers"
+          selected
+        ></calcite-tile>
+        <calcite-tile
+          heading="Tile heading lorem ipsum"
+          description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall."
+          icon="layers"
+        ></calcite-tile>
+      </calcite-tile-group>
+    </demo-theme>
+
     <demo-dom-swapper>
       <div class="parent">
         <div class="child right-aligned-text">scale</div>

From 23e2ec6f8dcca5beb154fb9f2d754df70aea6035 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Thu, 11 Jul 2024 13:53:11 -0700
Subject: [PATCH 08/10] tip, tip-group, tip-manager

---
 .../src/demos/tip-manager.html                | 93 +++++++++++++++++++
 1 file changed, 93 insertions(+)

diff --git a/packages/calcite-components/src/demos/tip-manager.html b/packages/calcite-components/src/demos/tip-manager.html
index dd06942a4d2..16a48ab9c52 100644
--- a/packages/calcite-components/src/demos/tip-manager.html
+++ b/packages/calcite-components/src/demos/tip-manager.html
@@ -40,6 +40,99 @@
   </head>
 
   <body>
+    <demo-theme
+      tokens="
+        --calcite-tip-background-color,
+        --calcite-tip-border-color,
+        --calcite-tip-close-background-color-active,
+        --calcite-tip-close-background-color-hover,
+        --calcite-tip-close-background-color,
+        --calcite-tip-close-text-color-hover,
+        --calcite-tip-close-text-color,
+        --calcite-tip-heading-text-color,
+        --calcite-tip-text-color,
+        --calcite-tip-group-background-color,
+        --calcite-tip-group-text-color,
+        --calcite-tip-manager-background-color,
+        --calcite-tip-manager-border-color,
+        --calcite-tip-manager-close-background-color-active,
+        --calcite-tip-manager-close-background-color-hover,
+        --calcite-tip-manager-close-background-color,
+        --calcite-tip-manager-close-icon-color-active,
+        --calcite-tip-manager-close-icon-color-hover,
+        --calcite-tip-manager-close-icon-color,
+        --calcite-tip-manager-close-text-color-active,
+        --calcite-tip-manager-close-text-color-hover,
+        --calcite-tip-manager-close-text-color,
+        --calcite-tip-manager-content-height,
+        --calcite-tip-manager-heading-text-color,
+        --calcite-tip-manager-height,
+        --calcite-tip-manager-text-color,
+        --calcite-tip-max-width"
+    >
+      <calcite-tip-manager>
+        <calcite-tip-group group-title="Astronomy">
+          <calcite-tip heading="The Red Rocks and Blue Water">
+            <img
+              slot="thumbnail"
+              width="1000"
+              height="600"
+              src="./_assets/images/placeholder.svg"
+              alt="This is an image of nature."
+            />
+            <p>
+              This tip is how a tip should really look. It has a landscape or square image and a small amount of text
+              content. This paragraph is in an "info" slot.
+            </p>
+            <p>
+              This is another paragraph in a subsequent "info" slot. In publishing and graphic design, Lorem ipsum is a
+              placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful
+              content (also called greeking). Replacing the actual content with placeholder text allows designers to
+              design the form of the content before the content itself has been produced.
+            </p>
+            <a href="http://www.esri.com">This is the "link" slot.</a>
+          </calcite-tip>
+          <calcite-tip heading="The Long Trees">
+            <img
+              slot="thumbnail"
+              width="1000"
+              height="600"
+              src="./_assets/images/placeholder.svg"
+              alt="This is an image of nature."
+            />
+            <p>This tip has an image that is a pretty tall. And the text will run out before the end of the image.</p>
+            <p>In astronomy, the terms object and body are often used interchangeably.</p>
+            <a href="http://www.esri.com">View Esri</a>
+          </calcite-tip>
+        </calcite-tip-group>
+        <calcite-tip heading="Square Nature">
+          <img
+            slot="thumbnail"
+            width="1000"
+            height="600"
+            src="./_assets/images/placeholder.svg"
+            alt="This is an image of nature."
+          />
+          <p>This tip has an image that is square. And the text will run out before the end of the image.</p>
+          <p>In astronomy, the terms object and body are often used interchangeably.</p>
+          <p>
+            In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual
+            form of a document without relying on meaningful content (also called greeking). Replacing the actual
+            content with placeholder text allows designers to design the form of the content before the content itself
+            has been produced.
+          </p>
+          <a href="http://www.esri.com">View Esri</a>
+        </calcite-tip>
+        <calcite-tip heading="The lack of imagery">
+          <p>This tip has no image. As such, the content area will take up the entire width of the tip.</p>
+          <p>
+            This is the next paragraph and should show how wide the content area is now. Of course, the width of the
+            overall tip will affect things. In astronomy, the terms object and body are often used interchangeably.
+          </p>
+          <a href="http://www.esri.com">View Esri</a>
+        </calcite-tip>
+      </calcite-tip-manager>
+    </demo-theme>
     <demo-dom-swapper>
       <!-- tip with thumbnail -->
       <div class="parent">

From 57d85f353ed801b015554c6f02141429a57c86ef Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Thu, 11 Jul 2024 13:55:11 -0700
Subject: [PATCH 09/10] tooltip

---
 .../calcite-components/src/demos/tooltip.html   | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/packages/calcite-components/src/demos/tooltip.html b/packages/calcite-components/src/demos/tooltip.html
index cff1015e8a9..2d92fc5d306 100644
--- a/packages/calcite-components/src/demos/tooltip.html
+++ b/packages/calcite-components/src/demos/tooltip.html
@@ -31,6 +31,23 @@
   </head>
 
   <body>
+    <demo-theme
+      tokens="
+        --calcite-tooltip-background-color,
+        --calcite-tooltip-border-color,
+        --calcite-tooltip-corner-radius,
+        --calcite-tooltip-shadow,
+        --calcite-tooltip-text-color,
+        --calcite-tooltip-z-index"
+    >
+      <calcite-tooltip placement="auto" reference-element="tooltip-auto-ref" open>
+        <p>placement: auto</p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua.
+      </calcite-tooltip>
+      <calcite-button appearance="outline" id="tooltip-auto-ref">auto</calcite-button>
+    </demo-theme>
+
     <demo-dom-swapper>
       <h1 style="margin: 0 auto; text-align: center">Tooltip</h1>
 

From 220350269796aad450e7ed53f4b92d067befa0e6 Mon Sep 17 00:00:00 2001
From: Erik Harper <eriklharper@pm.me>
Date: Thu, 11 Jul 2024 13:59:12 -0700
Subject: [PATCH 10/10] tree/tree-item

---
 .../calcite-components/src/demos/tree.html    | 79 +++++++++++++++++++
 1 file changed, 79 insertions(+)

diff --git a/packages/calcite-components/src/demos/tree.html b/packages/calcite-components/src/demos/tree.html
index 6f6c9984966..ef55d40c59f 100644
--- a/packages/calcite-components/src/demos/tree.html
+++ b/packages/calcite-components/src/demos/tree.html
@@ -30,6 +30,85 @@
   </head>
 
   <body>
+    <demo-theme
+      tokens="
+        --calcite-tree-item-checkbox-background-color-checked,
+        --calcite-tree-item-checkbox-background-color,
+        --calcite-tree-item-checkbox-shadow-checked,
+        --calcite-tree-item-checkbox-shadow-hover,
+        --calcite-tree-item-checkbox-shadow,
+        --calcite-tree-item-chevron-color-active,
+        --calcite-tree-item-chevron-color-hover,
+        --calcite-tree-item-chevron-color,
+        --calcite-tree-item-icon-color,
+        --calcite-tree-item-line-color,
+        --calcite-tree-item-selection-icon-color,
+        --calcite-tree-item-text-color"
+    >
+      <calcite-tree id="root" lines>
+        <calcite-tree-item icon-start="palette" expanded>
+          Parent
+          <calcite-tree slot="children">
+            <calcite-tree-item id="child">child</calcite-tree-item>
+          </calcite-tree>
+        </calcite-tree-item>
+      </calcite-tree>
+      <calcite-tree selection-mode="ancestors">
+        <calcite-tree-item selected><span>Child 1</span></calcite-tree-item>
+        <calcite-tree-item expanded>
+          <span>Child 2</span>
+          <calcite-tree slot="children">
+            <calcite-tree-item selected><span>Grandchild 1</span></calcite-tree-item>
+            <calcite-tree-item><span>Grandchild 2</span></calcite-tree-item>
+            <calcite-tree-item expanded>
+              <span>Grandchild 3</span>
+              <calcite-tree slot="children">
+                <calcite-tree-item><span>Great-Grandchild 1</span></calcite-tree-item>
+                <calcite-tree-item><span>Great-Grandchild 2</span></calcite-tree-item>
+                <calcite-tree-item><span>Great-Grandchild 3</span></calcite-tree-item>
+              </calcite-tree>
+            </calcite-tree-item>
+          </calcite-tree>
+        </calcite-tree-item>
+      </calcite-tree>
+      <calcite-tree selection-mode="multiple">
+        <calcite-tree-item selected><span>Child 1</span></calcite-tree-item>
+        <calcite-tree-item expanded>
+          <span>Child 2</span>
+          <calcite-tree slot="children">
+            <calcite-tree-item selected><span>Grandchild 1</span></calcite-tree-item>
+            <calcite-tree-item><span>Grandchild 2</span></calcite-tree-item>
+            <calcite-tree-item expanded>
+              <span>Grandchild 3</span>
+              <calcite-tree slot="children">
+                <calcite-tree-item><span>Great-Grandchild 1</span></calcite-tree-item>
+                <calcite-tree-item><span>Great-Grandchild 2</span></calcite-tree-item>
+                <calcite-tree-item><span>Great-Grandchild 3</span></calcite-tree-item>
+              </calcite-tree>
+            </calcite-tree-item>
+          </calcite-tree>
+        </calcite-tree-item>
+      </calcite-tree>
+      <calcite-tree selection-mode="single">
+        <calcite-tree-item selected><span>Child 1</span></calcite-tree-item>
+        <calcite-tree-item expanded>
+          <span>Child 2</span>
+          <calcite-tree slot="children">
+            <calcite-tree-item><span>Grandchild 1</span></calcite-tree-item>
+            <calcite-tree-item><span>Grandchild 2</span></calcite-tree-item>
+            <calcite-tree-item>
+              <span>Grandchild 3</span>
+              <calcite-tree slot="children">
+                <calcite-tree-item><span>Great-Grandchild 1</span></calcite-tree-item>
+                <calcite-tree-item><span>Great-Grandchild 2</span></calcite-tree-item>
+                <calcite-tree-item><span>Great-Grandchild 3</span></calcite-tree-item>
+              </calcite-tree>
+            </calcite-tree-item>
+          </calcite-tree>
+        </calcite-tree-item>
+      </calcite-tree>
+    </demo-theme>
+
     <demo-dom-swapper>
       <h1 style="margin: 0 auto; text-align: center">Tree</h1>
 
