From 23f657da30a78bd725c36c4f59fbeec228e437e4 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Fri, 28 Jun 2024 14:38:41 -0700
Subject: [PATCH 01/14] temporary html setup for testing panel flow in popover
 and shell-panel

---
 .../calcite-components/src/components.d.ts    |  98 ++++
 .../src/demos/shell-panel.html                | 420 +++++++-----------
 2 files changed, 258 insertions(+), 260 deletions(-)

diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index c5ada57ac20..3a76eb679f5 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -8,86 +8,184 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
 import { RequestedItem } from "./components/accordion/interfaces";
 import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
+import { ActionMessages } from "./components/action/assets/action/t9n";
 import { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
+import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
 import { Columns } from "./components/action-group/interfaces";
+import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
+import { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
 import { AlertDuration, Sync } from "./components/alert/interfaces";
 import { NumberingSystem } from "./utils/locale";
+import { AlertMessages } from "./components/alert/assets/alert/t9n";
 import { HeadingLevel } from "./components/functional/Heading";
+import { BlockMessages } from "./components/block/assets/block/t9n";
 import { BlockSectionToggleDisplay } from "./components/block-section/interfaces";
+import { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n";
 import { ButtonAlignment, DropdownIconType } from "./components/button/interfaces";
+import { ButtonMessages } from "./components/button/assets/button/t9n";
+import { CardMessages } from "./components/card/assets/card/t9n";
 import { ArrowType, AutoplayType } from "./components/carousel/interfaces";
+import { CarouselMessages } from "./components/carousel/assets/carousel/t9n";
 import { MutableValidityState } from "./utils/form";
+import { ChipMessages } from "./components/chip/assets/chip/t9n";
 import { ColorValue, InternalColor } from "./components/color-picker/interfaces";
 import { Format } from "./components/color-picker/utils";
+import { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n";
 import { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces";
+import { ComboboxMessages } from "./components/combobox/assets/combobox/t9n";
+import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n";
 import { DateLocaleData } from "./components/date-picker/utils";
 import { HoverRange } from "./utils/date";
 import { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
 import { ItemKeyboardEvent } from "./components/dropdown/interfaces";
+import { FilterMessages } from "./components/filter/assets/filter/t9n";
 import { FlowItemLikeElement } from "./components/flow/interfaces";
+import { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n";
 import { ColorStop, DataSeries } from "./components/graph/interfaces";
+import { HandleMessages } from "./components/handle/assets/handle/t9n";
 import { HandleChange, HandleNudge } from "./components/handle/interfaces";
+import { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n";
 import { InputPlacement } from "./components/input/interfaces";
+import { InputMessages } from "./components/input/assets/input/t9n";
+import { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n";
+import { InputNumberMessages } from "./components/input-number/assets/input-number/t9n";
+import { InputTextMessages } from "./components/input-text/assets/input-text/t9n";
+import { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n";
+import { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n";
+import { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n";
 import { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces";
 import { ListDragDetail } from "./components/list/interfaces";
 import { ItemData } from "./components/list-item/interfaces";
+import { ListMessages } from "./components/list/assets/list/t9n";
 import { SelectionAppearance } from "./components/list/resources";
+import { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
+import { MenuMessages } from "./components/menu/assets/menu/t9n";
+import { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
 import { MenuItemCustomEvent } from "./components/menu-item/interfaces";
 import { MeterFillType, MeterLabelType } from "./components/meter/interfaces";
+import { ModalMessages } from "./components/modal/assets/modal/t9n";
+import { NoticeMessages } from "./components/notice/assets/notice/t9n";
+import { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
+import { PanelMessages } from "./components/panel/assets/panel/t9n";
 import { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic";
 import { ICON_TYPES } from "./components/pick-list/resources";
+import { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n";
+import { PopoverMessages } from "./components/popover/assets/popover/t9n";
+import { RatingMessages } from "./components/rating/assets/rating/t9n";
+import { ScrimMessages } from "./components/scrim/assets/scrim/t9n";
 import { DisplayMode } from "./components/sheet/interfaces";
 import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
+import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
 import { DragDetail } from "./utils/sortableComponent";
 import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
+import { StepperMessages } from "./components/stepper/assets/stepper/t9n";
+import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
 import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
+import { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n";
 import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
+import { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n";
 import { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces";
+import { TableMessages } from "./components/table/assets/table/t9n";
+import { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n";
+import { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n";
+import { TextAreaMessages } from "./components/text-area/assets/text-area/t9n";
 import { TileSelectType } from "./components/tile-select/interfaces";
 import { TileSelectGroupLayout } from "./components/tile-select-group/interfaces";
+import { TipMessages } from "./components/tip/assets/tip/t9n";
+import { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n";
 import { TreeItemSelectDetail } from "./components/tree-item/interfaces";
+import { ValueListMessages } from "./components/value-list/assets/value-list/t9n";
 import { ListItemAndHandle } from "./components/value-list-item/interfaces";
 export { Alignment, Appearance, CollapseDirection, FlipContext, IconType, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionAppearance as SelectionAppearance1, SelectionMode, Status, Width } from "./components/interfaces";
 export { RequestedItem } from "./components/accordion/interfaces";
 export { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
+export { ActionMessages } from "./components/action/assets/action/t9n";
 export { FlipPlacement, LogicalPlacement, MenuPlacement, OverlayPositioning, ReferenceElement } from "./utils/floating-ui";
+export { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
 export { Columns } from "./components/action-group/interfaces";
+export { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
+export { ActionPadMessages } from "./components/action-pad/assets/action-pad/t9n";
 export { AlertDuration, Sync } from "./components/alert/interfaces";
 export { NumberingSystem } from "./utils/locale";
+export { AlertMessages } from "./components/alert/assets/alert/t9n";
 export { HeadingLevel } from "./components/functional/Heading";
+export { BlockMessages } from "./components/block/assets/block/t9n";
 export { BlockSectionToggleDisplay } from "./components/block-section/interfaces";
+export { BlockSectionMessages } from "./components/block-section/assets/block-section/t9n";
 export { ButtonAlignment, DropdownIconType } from "./components/button/interfaces";
+export { ButtonMessages } from "./components/button/assets/button/t9n";
+export { CardMessages } from "./components/card/assets/card/t9n";
 export { ArrowType, AutoplayType } from "./components/carousel/interfaces";
+export { CarouselMessages } from "./components/carousel/assets/carousel/t9n";
 export { MutableValidityState } from "./utils/form";
+export { ChipMessages } from "./components/chip/assets/chip/t9n";
 export { ColorValue, InternalColor } from "./components/color-picker/interfaces";
 export { Format } from "./components/color-picker/utils";
+export { ColorPickerMessages } from "./components/color-picker/assets/color-picker/t9n";
 export { ComboboxChildElement, SelectionDisplay } from "./components/combobox/interfaces";
+export { ComboboxMessages } from "./components/combobox/assets/combobox/t9n";
+export { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n";
 export { DateLocaleData } from "./components/date-picker/utils";
 export { HoverRange } from "./utils/date";
 export { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
 export { ItemKeyboardEvent } from "./components/dropdown/interfaces";
+export { FilterMessages } from "./components/filter/assets/filter/t9n";
 export { FlowItemLikeElement } from "./components/flow/interfaces";
+export { FlowItemMessages } from "./components/flow-item/assets/flow-item/t9n";
 export { ColorStop, DataSeries } from "./components/graph/interfaces";
+export { HandleMessages } from "./components/handle/assets/handle/t9n";
 export { HandleChange, HandleNudge } from "./components/handle/interfaces";
+export { InlineEditableMessages } from "./components/inline-editable/assets/inline-editable/t9n";
 export { InputPlacement } from "./components/input/interfaces";
+export { InputMessages } from "./components/input/assets/input/t9n";
+export { InputDatePickerMessages } from "./components/input-date-picker/assets/input-date-picker/t9n";
+export { InputNumberMessages } from "./components/input-number/assets/input-number/t9n";
+export { InputTextMessages } from "./components/input-text/assets/input-text/t9n";
+export { InputTimePickerMessages } from "./components/input-time-picker/assets/input-time-picker/t9n";
+export { TimePickerMessages } from "./components/time-picker/assets/time-picker/t9n";
+export { InputTimeZoneMessages } from "./components/input-time-zone/assets/input-time-zone/t9n";
 export { OffsetStyle, TimeZoneMode } from "./components/input-time-zone/interfaces";
 export { ListDragDetail } from "./components/list/interfaces";
 export { ItemData } from "./components/list-item/interfaces";
+export { ListMessages } from "./components/list/assets/list/t9n";
 export { SelectionAppearance } from "./components/list/resources";
+export { ListItemMessages } from "./components/list-item/assets/list-item/t9n";
+export { MenuMessages } from "./components/menu/assets/menu/t9n";
+export { MenuItemMessages } from "./components/menu-item/assets/menu-item/t9n";
 export { MenuItemCustomEvent } from "./components/menu-item/interfaces";
 export { MeterFillType, MeterLabelType } from "./components/meter/interfaces";
+export { ModalMessages } from "./components/modal/assets/modal/t9n";
+export { NoticeMessages } from "./components/notice/assets/notice/t9n";
+export { PaginationMessages } from "./components/pagination/assets/pagination/t9n";
+export { PanelMessages } from "./components/panel/assets/panel/t9n";
 export { ItemData as ItemData1, ListFocusId } from "./components/pick-list/shared-list-logic";
 export { ICON_TYPES } from "./components/pick-list/resources";
+export { PickListItemMessages } from "./components/pick-list-item/assets/pick-list-item/t9n";
+export { PopoverMessages } from "./components/popover/assets/popover/t9n";
+export { RatingMessages } from "./components/rating/assets/rating/t9n";
+export { ScrimMessages } from "./components/scrim/assets/scrim/t9n";
 export { DisplayMode } from "./components/sheet/interfaces";
 export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
+export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
 export { DragDetail } from "./utils/sortableComponent";
 export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
+export { StepperMessages } from "./components/stepper/assets/stepper/t9n";
+export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
 export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
+export { TabNavMessages } from "./components/tab-nav/assets/tab-nav/t9n";
 export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
+export { TabTitleMessages } from "./components/tab-title/assets/tab-title/t9n";
 export { RowType, TableInteractionMode, TableLayout, TableRowFocusEvent, TableSelectionDisplay } from "./components/table/interfaces";
+export { TableMessages } from "./components/table/assets/table/t9n";
+export { TableCellMessages } from "./components/table-cell/assets/table-cell/t9n";
+export { TableHeaderMessages } from "./components/table-header/assets/table-header/t9n";
+export { TextAreaMessages } from "./components/text-area/assets/text-area/t9n";
 export { TileSelectType } from "./components/tile-select/interfaces";
 export { TileSelectGroupLayout } from "./components/tile-select-group/interfaces";
+export { TipMessages } from "./components/tip/assets/tip/t9n";
+export { TipManagerMessages } from "./components/tip-manager/assets/tip-manager/t9n";
 export { TreeItemSelectDetail } from "./components/tree-item/interfaces";
+export { ValueListMessages } from "./components/value-list/assets/value-list/t9n";
 export { ListItemAndHandle } from "./components/value-list-item/interfaces";
 export namespace Components {
     interface CalciteAccordion {
diff --git a/packages/calcite-components/src/demos/shell-panel.html b/packages/calcite-components/src/demos/shell-panel.html
index fe241d016af..dbb3dfe4074 100644
--- a/packages/calcite-components/src/demos/shell-panel.html
+++ b/packages/calcite-components/src/demos/shell-panel.html
@@ -25,288 +25,116 @@
         width: 100%;
         height: 100%;
       }
-
-      #viewDiv {
-        padding: 0;
-        margin: 0;
-        height: 100%;
-        width: 100%;
-        overflow: hidden;
-      }
-
-      calcite-notice {
-        margin-block: 1rem;
-      }
-
-      .gnav {
-        display: flex;
-        flex-direction: row;
-        padding: 1rem;
-        justify-content: space-between;
-      }
-
-      .tall-content-example {
-        display: block;
-        margin: 1rem 0;
-        background: var(--calcite-color-foreground-2);
-        height: 100rem;
-        overflow: scroll;
-      }
     </style>
-
-    <script>
-      require(["esri/WebMap", "esri/views/MapView", "esri/widgets/LayerList", "esri/widgets/Zoom"], function (
-        WebMap,
-        MapView,
-        LayerList,
-        Zoom,
-      ) {
-        const webmap = new WebMap({
-          portalItem: {
-            id: "cc316ca9e0824970ad29ac558161d42d",
-          },
-        });
-
-        const view = new MapView({
-          container: "viewDiv",
-          map: webmap,
-        });
-        view.when(function () {
-          const layerList = new LayerList({
-            view: view,
-            selectionEnabled: true,
-            container: "layerlist-container",
-          });
-
-          view.ui.move("zoom", "bottom-right");
-        });
-      });
-    </script>
   </head>
 
   <body>
     <demo-dom-swapper>
       <main>
-        <div class="shell-container">
+        <div class="shell-container" style="width: 500px; height: 400px">
           <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>
-
-            <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 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>
-
+            <div>Shell Content</div>
             <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-button appearance="outline" id="popover-button-right" icon-start="popup">
+                  Clickable popover</calcite-button
+                >
               </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-flow custom-item-selectors="custom-flow-item">
+                <calcite-flow-item heading="flow-item-1">
+                  <div slot="content-top">Slot for a content-top.</div>
+                  <img width="100" height="100" src="./_assets/images/placeholder.svg" />
+                  <div slot="content-bottom">Content bottom!</div>
+                  <div slot="footer">Footer!</div>
+                </calcite-flow-item>
+                <custom-flow-item heading="custom-flow-item">
+                  <div slot="content-top">Slot for a content-top.</div>
+                  <img width="100" height="100" src="./_assets/images/placeholder.svg" />
+                  <div slot="content-bottom">Content bottom!</div>
+                  <div slot="footer">Footer!</div>
+                </custom-flow-item>
+                <calcite-flow-item heading="flow-item-2">
+                  <div slot="content-top">Slot for a content-top.</div>
+                  <img width="100" height="100" src="./_assets/images/placeholder.svg" />
+                  <div slot="content-bottom">Content bottom!</div>
+                  <calcite-button
+                    appearance="outline"
+                    type="button"
+                    slot="footer-start"
+                    kind="neutral"
+                    scale="s"
+                    icon-start="check"
+                    id="card-icon-test-1"
+                    width="full"
+                  ></calcite-button>
+                  <calcite-button
+                    appearance="outline"
+                    slot="footer-end"
+                    type="button"
+                    scale="s"
+                    icon-end="ellipsis"
+                    kind="neutral"
+                    id="card-icon-test-3"
+                    width="full"
+                  ></calcite-button>
+                </calcite-flow-item>
+              </calcite-flow>
             </calcite-shell-panel>
             <footer slot="footer">Footer</footer>
           </calcite-shell>
         </div>
 
+        <!-- clickable popover -->
+        <calcite-popover
+          label="right start popover"
+          reference-element="popover-button-right"
+          placement="bottom"
+          id="popover-right"
+        >
+          <div style="padding: 12px 16px">Hello! I am some popover content!</div>
+          <calcite-flow custom-item-selectors="custom-flow-item">
+            <calcite-flow-item heading="flow-item-1">
+              <div slot="content-top">Slot for a content-top.</div>
+              <img width="100" height="100" src="./_assets/images/placeholder.svg" />
+              <div slot="content-bottom">Content bottom!</div>
+              <div slot="footer">Footer!</div>
+            </calcite-flow-item>
+            <custom-flow-item heading="custom-flow-item">
+              <div slot="content-top">Slot for a content-top.</div>
+              <img width="100" height="100" src="./_assets/images/placeholder.svg" />
+              <div slot="content-bottom">Content bottom!</div>
+              <div slot="footer">Footer!</div>
+            </custom-flow-item>
+            <calcite-flow-item heading="flow-item-2">
+              <div slot="content-top">Slot for a content-top.</div>
+              <img width="100" height="100" src="./_assets/images/placeholder.svg" />
+              <div slot="content-bottom">Content bottom!</div>
+              <calcite-button
+                type="button"
+                slot="footer-start"
+                kind="neutral"
+                scale="s"
+                id="card-icon-test-1"
+                icon-start="check"
+              ></calcite-button>
+              <div slot="footer-end">
+                <calcite-button type="button" scale="s" kind="neutral" id="card-icon-test-3" icon-start="ellipsis">
+                </calcite-button>
+              </div>
+            </calcite-flow-item>
+          </calcite-flow>
+        </calcite-popover>
+
         <script>
           const shell = document.querySelector("calcite-shell");
           const shellPanels = document.querySelectorAll("calcite-shell-panel");
 
-          const segmentedControlContentBehind = document.getElementById("control-content-behind");
-          const segmentedControlResize = document.getElementById("control-resizable");
-
-          segmentedControlContentBehind.addEventListener("calciteSegmentedControlChange", function () {
-            shell.contentBehind = !shell.contentBehind;
-          });
-
-          segmentedControlResize.addEventListener("calciteSegmentedControlChange", function () {
-            shellPanels.forEach((el) => (el.resizable = !el.resizable));
-          });
-
-          const segmentedControlTallContent = document.getElementById("control-tall-content");
-          const bigBois = document.querySelectorAll(".tall-content-example");
-
-          segmentedControlTallContent.addEventListener("calciteSegmentedControlChange", function () {
-            bigBois.forEach((el) => (el.style.display = el.style.display === "none" ? "block" : "none"));
-          });
-
-          const chipsTop = document.getElementById("chip-group-panel-top");
-          const chipsBottom = document.getElementById("chip-group-panel-bottom");
-          const chipsStart = document.getElementById("chip-group-panel-start");
-          const chipsEnd = document.getElementById("chip-group-panel-end");
-
-          [chipsTop, chipsBottom, chipsStart, chipsEnd].forEach((chipGroup) => {
-            chipGroup.addEventListener("calciteChipGroupSelect", function (event) {
-              const shellPanel = event.target.closest("calcite-shell-panel");
-              const prop = event.target.selectedItems[0].value;
-              shellPanel.displayMode = prop;
-            });
-          });
-
-          const panelTop = document.getElementById("panel-top");
           const panelBottom = document.getElementById("panel-bottom");
-          const panelStart = document.getElementById("panel-start");
-          const panelEnd = document.getElementById("panel-end");
+
           const actions = document.querySelectorAll("calcite-action");
 
-          [panelTop, panelBottom, panelStart, panelEnd].forEach((panel) => {
-            panel.addEventListener("calcitePanelClose", function (event) {
-              event.target.closest("calcite-shell-panel").collapsed = true;
-            });
+          panelBottom.addEventListener("calcitePanelClose", function (event) {
+            event.target.closest("calcite-shell-panel").collapsed = true;
           });
 
           actions.forEach((el) => {
@@ -317,6 +145,78 @@
               panel.closed = !panel.closed;
             });
           });
+
+          class CustomFlowItem extends HTMLElement {
+            constructor() {
+              super();
+              const shadow = this.attachShadow({ mode: "open" });
+
+              shadow.innerHTML = `
+                <style>
+                  :host {
+                    display: flex;
+                    background: #bdf2c4;
+                  }
+                </style>
+                <calcite-flow-item id="internalFlowItem">
+                  <slot></slot>
+                </calcite-flow-item>
+              `;
+
+              this.flowItemEl = shadow.getElementById("internalFlowItem");
+            }
+
+            connectedCallback() {
+              this.flowItemEl.setAttribute("heading", this.getAttribute("heading"));
+              this.flowItemEl.setAttribute("show-back-button", this.getAttribute("show-back-button"));
+              this.flowItemEl.setAttribute("menu-open", this.getAttribute("menu-open"));
+            }
+
+            get heading() {
+              return this.getAttribute("heading");
+            }
+
+            set heading(value) {
+              this.flowItemEl.heading = value;
+            }
+
+            get hidden() {
+              return this.hasAttribute("hidden");
+            }
+
+            set hidden(value) {
+              this.toggleAttribute("hidden", value);
+              this.flowItemEl.toggleAttribute("hidden", value);
+            }
+
+            get menuOpen() {
+              return this.hasAttribute("menu-open");
+            }
+
+            set menuOpen(value) {
+              this.toggleAttribute("menu-open", value);
+              this.flowItemEl.menuOpen = value;
+            }
+
+            get showBackButton() {
+              return this.hasAttribute("show-back-button");
+            }
+
+            set showBackButton(value) {
+              this.toggleAttribute("show-back-button", value);
+              this.flowItemEl.showBackButton = value;
+            }
+
+            async beforeBack() {
+              // no op
+            }
+
+            async setFocus() {
+              await this.flowItemEl.setFocus();
+            }
+          }
+
+          customElements.define("custom-flow-item", CustomFlowItem);
         </script>
       </main>
     </demo-dom-swapper>

From c585a0850a0443bbaf0f657b82350d7a204bd7cd Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Fri, 28 Jun 2024 15:47:36 -0700
Subject: [PATCH 02/14] panelFlowScaleInPopoverAndInShellPanel story

---
 .../calcite-components/src/components.d.ts    |  8 ++
 .../src/components/panel/panel.stories.ts     | 86 +++++++++++++++++++
 2 files changed, 94 insertions(+)

diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index 3a76eb679f5..58f76549e4b 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -3722,6 +3722,10 @@ export namespace Components {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning": OverlayPositioning;
+        /**
+          * Specifies the size of the component.
+         */
+        "scale": Scale;
         /**
           * Scrolls the component's content to a specified set of coordinates.
           * @example myCalciteFlowItem.scrollContentTo({   left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element   behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value). });
@@ -11684,6 +11688,10 @@ declare namespace LocalJSX {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning"?: OverlayPositioning;
+        /**
+          * Specifies the size of the component.
+         */
+        "scale"?: Scale;
     }
     /**
      * @deprecated Use the `calcite-list` component instead.
diff --git a/packages/calcite-components/src/components/panel/panel.stories.ts b/packages/calcite-components/src/components/panel/panel.stories.ts
index ea0af7aa81e..2b99037c270 100644
--- a/packages/calcite-components/src/components/panel/panel.stories.ts
+++ b/packages/calcite-components/src/components/panel/panel.stories.ts
@@ -431,3 +431,89 @@ export const footerSlotPrecedence = (): string => html`
     ${footerHTML}
   </calcite-panel>
 `;
+
+export const panelFlowScaleInPopoverAndInShellPanel = (): string => html`
+  <div class="shell-container" style="width: 500px; height: 400px">
+    <calcite-shell>
+      <div>Shell Content</div>
+      <calcite-shell-panel layout="horizontal" slot="panel-bottom" position="end">
+        <calcite-action-bar slot="action-bar" expand-disabled>
+          <calcite-button appearance="outline" id="popover-button-right" icon-start="popup">
+            Clickable popover</calcite-button
+          >
+        </calcite-action-bar>
+        <calcite-flow custom-item-selectors="custom-flow-item">
+          <calcite-flow-item heading="flow-item-1">
+            <div slot="content-top">Slot for a content-top.</div>
+            <img width="100" height="100" src="./_assets/images/placeholder.svg" />
+            <div slot="content-bottom">Content bottom!</div>
+            <div slot="footer">Footer!</div>
+          </calcite-flow-item>
+          <custom-flow-item heading="custom-flow-item">
+            <div slot="content-top">Slot for a content-top.</div>
+            <img width="100" height="100" src="./_assets/images/placeholder.svg" />
+            <div slot="content-bottom">Content bottom!</div>
+            <div slot="footer">Footer!</div>
+          </custom-flow-item>
+          <calcite-flow-item heading="flow-item-2">
+            <div slot="content-top">Slot for a content-top.</div>
+            <img width="100" height="100" src="./_assets/images/placeholder.svg" />
+            <div slot="content-bottom">Content bottom!</div>
+            <calcite-button
+              appearance="outline"
+              type="button"
+              slot="footer-start"
+              scale="s"
+              icon-start="check"
+              width="full"
+            ></calcite-button>
+            <calcite-button
+              appearance="outline"
+              slot="footer-end"
+              type="button"
+              scale="s"
+              icon-end="ellipsis"
+              width="full"
+            ></calcite-button>
+          </calcite-flow-item>
+        </calcite-flow>
+      </calcite-shell-panel>
+      <footer slot="footer">Footer</footer>
+    </calcite-shell>
+  </div>
+  <calcite-popover
+    label="right start popover"
+    reference-element="popover-button-right"
+    placement="bottom"
+    id="popover-right"
+    open
+  >
+    <div style="padding: 12px 16px">Hello! I am some popover content!</div>
+    <calcite-flow custom-item-selectors="custom-flow-item">
+      <calcite-flow-item heading="flow-item-1">
+        <div slot="content-top">Slot for a content-top.</div>
+        <img width="100" height="100" src="./_assets/images/placeholder.svg" />
+        <div slot="content-bottom">Content bottom!</div>
+        <div slot="footer">Footer!</div>
+      </calcite-flow-item>
+      <custom-flow-item heading="custom-flow-item">
+        <div slot="content-top">Slot for a content-top.</div>
+        <img width="100" height="100" src="./_assets/images/placeholder.svg" />
+        <div slot="content-bottom">Content bottom!</div>
+        <div slot="footer">Footer!</div>
+      </custom-flow-item>
+      <calcite-flow-item heading="flow-item-2">
+        <div slot="content-top">Slot for a content-top.</div>
+        <img width="100" height="100" src="./_assets/images/placeholder.svg" />
+        <div slot="content-bottom">Content bottom!</div>
+        <calcite-button
+          appearance="outline"
+          type="button"
+          scale="s"
+          icon-start="ellipsis"
+          width="full"
+        ></calcite-button>
+      </calcite-flow-item>
+    </calcite-flow>
+  </calcite-popover>
+`;

From f4656022f5a0beac76e4c67c1f48e62ec26baa0a Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Mon, 1 Jul 2024 12:12:36 -0700
Subject: [PATCH 03/14] add scale to panel and flow

---
 packages/calcite-components/src/components.d.ts   |  8 ++++++++
 .../src/components/flow-item/flow-item.tsx        |  5 +++++
 .../src/components/panel/panel.tsx                |  7 +++++++
 .../calcite-components/src/demos/shell-panel.html | 15 +++------------
 4 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index 58f76549e4b..c0a6852bd0e 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -1930,6 +1930,10 @@ export namespace Components {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning": OverlayPositioning;
+        /**
+          * Specifies the size of the component.
+         */
+        "scale": Scale;
         /**
           * Scrolls the component's content to a specified set of coordinates.
           * @example myCalciteFlowItem.scrollContentTo({   left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element   behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value). });
@@ -9799,6 +9803,10 @@ declare namespace LocalJSX {
           * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
          */
         "overlayPositioning"?: OverlayPositioning;
+        /**
+          * Specifies the size of the component.
+         */
+        "scale"?: Scale;
         /**
           * When `true`, displays a back button in the component's header.
          */
diff --git a/packages/calcite-components/src/components/flow-item/flow-item.tsx b/packages/calcite-components/src/components/flow-item/flow-item.tsx
index 9d87efa0715..6ddfe096888 100644
--- a/packages/calcite-components/src/components/flow-item/flow-item.tsx
+++ b/packages/calcite-components/src/components/flow-item/flow-item.tsx
@@ -37,6 +37,7 @@ import { HeadingLevel } from "../functional/Heading";
 import { SLOTS as PANEL_SLOTS } from "../panel/resources";
 import { OverlayPositioning } from "../../utils/floating-ui";
 import { CollapseDirection } from "../interfaces";
+import { Scale } from "../interfaces";
 import { FlowItemMessages } from "./assets/flow-item/t9n";
 import { CSS, ICONS, SLOTS } from "./resources";
 
@@ -155,6 +156,9 @@ export class FlowItem
    */
   @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = "absolute";
 
+  /** Specifies the size of the component. */
+  @Prop({ reflect: true }) scale: Scale = "m";
+
   /**
    * When `true`, displays a back button in the component's header.
    *
@@ -382,6 +386,7 @@ export class FlowItem
             onCalcitePanelToggle={this.handlePanelToggle}
             overlayPositioning={overlayPositioning}
             ref={this.setContainerRef}
+            scale={this.scale}
           >
             {this.renderBackButton()}
             <slot name={SLOTS.actionBar} slot={PANEL_SLOTS.actionBar} />
diff --git a/packages/calcite-components/src/components/panel/panel.tsx b/packages/calcite-components/src/components/panel/panel.tsx
index f23e41871bc..1e63dc7ac15 100644
--- a/packages/calcite-components/src/components/panel/panel.tsx
+++ b/packages/calcite-components/src/components/panel/panel.tsx
@@ -43,6 +43,7 @@ import {
 } from "../../utils/t9n";
 import { OverlayPositioning } from "../../utils/floating-ui";
 import { CollapseDirection } from "../interfaces";
+import { Scale } from "../interfaces";
 import { PanelMessages } from "./assets/panel/t9n";
 import { CSS, ICONS, SLOTS } from "./resources";
 
@@ -156,6 +157,9 @@ export class Panel
    */
   @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = "absolute";
 
+  /** Specifies the size of the component. */
+  @Prop({ reflect: true }) scale: Scale = "m";
+
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -471,6 +475,7 @@ export class Panel
         data-test="collapse"
         icon={collapsed ? icons[0] : icons[1]}
         onClick={this.collapse}
+        scale={this.scale}
         text={collapse}
         title={collapsed ? expand : collapse}
       />
@@ -482,6 +487,7 @@ export class Panel
         data-test="close"
         icon={ICONS.close}
         onClick={this.close}
+        scale={this.scale}
         text={close}
         title={close}
       />
@@ -522,6 +528,7 @@ export class Panel
       >
         <calcite-action
           icon={ICONS.menu}
+          scale={this.scale}
           slot={ACTION_MENU_SLOTS.trigger}
           text={messages.options}
         />
diff --git a/packages/calcite-components/src/demos/shell-panel.html b/packages/calcite-components/src/demos/shell-panel.html
index dbb3dfe4074..d1c810c2d4f 100644
--- a/packages/calcite-components/src/demos/shell-panel.html
+++ b/packages/calcite-components/src/demos/shell-panel.html
@@ -61,10 +61,8 @@
                     appearance="outline"
                     type="button"
                     slot="footer-start"
-                    kind="neutral"
                     scale="s"
                     icon-start="check"
-                    id="card-icon-test-1"
                     width="full"
                   ></calcite-button>
                   <calcite-button
@@ -73,8 +71,6 @@
                     type="button"
                     scale="s"
                     icon-end="ellipsis"
-                    kind="neutral"
-                    id="card-icon-test-3"
                     width="full"
                   ></calcite-button>
                 </calcite-flow-item>
@@ -110,17 +106,12 @@
               <img width="100" height="100" src="./_assets/images/placeholder.svg" />
               <div slot="content-bottom">Content bottom!</div>
               <calcite-button
+                appearance="outline"
                 type="button"
-                slot="footer-start"
-                kind="neutral"
                 scale="s"
-                id="card-icon-test-1"
-                icon-start="check"
+                icon-start="ellipsis"
+                width="full"
               ></calcite-button>
-              <div slot="footer-end">
-                <calcite-button type="button" scale="s" kind="neutral" id="card-icon-test-3" icon-start="ellipsis">
-                </calcite-button>
-              </div>
             </calcite-flow-item>
           </calcite-flow>
         </calcite-popover>

From 64f1bbb0901fdc906ac5167c07e58a69306c802d Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Tue, 2 Jul 2024 15:26:55 -0700
Subject: [PATCH 04/14] heading and description scales

---
 .../src/components/panel/panel.scss           | 39 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 2 deletions(-)

diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss
index d588d8d2b85..dcbe62d90ad 100644
--- a/packages/calcite-components/src/components/panel/panel.scss
+++ b/packages/calcite-components/src/components/panel/panel.scss
@@ -23,6 +23,16 @@
   .content-bottom {
     padding: var(--calcite-spacing-sm);
   }
+
+  .header-content {
+    .heading {
+      font-size: theme("fontSize.n1h");
+    }
+
+    .description {
+      font-size: theme("fontSize.n2h");
+    }
+  }
 }
 
 :host([scale="m"]) {
@@ -30,6 +40,16 @@
   .content-bottom {
     padding: var(--calcite-spacing-md);
   }
+
+  .header-content {
+    .heading {
+      font-size: theme("fontSize.0h");
+    }
+
+    .description {
+      font-size: theme("fontSize.n1h");
+    }
+  }
 }
 
 :host([scale="l"]) {
@@ -37,6 +57,16 @@
   .content-bottom {
     padding: var(--calcite-spacing-xl);
   }
+
+  .header-content {
+    .heading {
+      font-size: theme("fontSize.1h");
+    }
+
+    .description {
+      font-size: theme("fontSize.0h");
+    }
+  }
 }
 
 .content-top,
@@ -90,21 +120,26 @@
     overflow-hidden
     px-3
     py-3.5;
+
   margin-inline-end: auto;
+
   .heading,
   .description {
     @apply block
       break-words
       p-0;
   }
+
   .heading {
-    @apply text-0h mx-0 mt-0 mb-1 font-medium;
+    @apply mx-0 mt-0 mb-1 font-medium text-color-1;
+
     &:only-child {
       @apply mb-0;
     }
   }
+
   .description {
-    @apply text-color-2 text-n1h;
+    @apply text-color-2;
   }
 }
 

From aa1a77f3b0b88b2fdfee41eddd59e90dca7ea5a3 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Tue, 2 Jul 2024 16:24:57 -0700
Subject: [PATCH 05/14] custom flow support and scales

---
 .../calcite-components/src/demos/flow.html    | 44 ++++++++++++++++---
 1 file changed, 37 insertions(+), 7 deletions(-)

diff --git a/packages/calcite-components/src/demos/flow.html b/packages/calcite-components/src/demos/flow.html
index f0f4dceefd0..866f9ca53bc 100644
--- a/packages/calcite-components/src/demos/flow.html
+++ b/packages/calcite-components/src/demos/flow.html
@@ -39,19 +39,19 @@
 
         <div class="child">
           <calcite-flow custom-item-selectors="custom-flow-item">
-            <calcite-flow-item heading="flow-item-1">
+            <calcite-flow-item heading="custom-flow-item-1" description="description">
               <div slot="content-top">Slot for a content-top.</div>
               <img width="250" height="250" src="./_assets/images/placeholder.svg" />
               <div slot="content-bottom">Content bottom!</div>
               <div slot="footer">Footer!</div>
             </calcite-flow-item>
-            <custom-flow-item heading="custom-flow-item">
+            <custom-flow-item heading="custom-flow-item-2" description="description">
               <div slot="content-top">Slot for a content-top.</div>
               <img width="250" height="250" src="./_assets/images/placeholder.svg" />
               <div slot="content-bottom">Content bottom!</div>
               <div slot="footer">Footer!</div>
             </custom-flow-item>
-            <calcite-flow-item heading="flow-item-2">
+            <calcite-flow-item heading="custom-flow-item-3" description="description">
               <div slot="content-top">Slot for a content-top.</div>
               <img width="250" height="250" src="./_assets/images/placeholder.svg" />
               <div slot="content-bottom">Content bottom!</div>
@@ -64,10 +64,6 @@
                 icon-start="check"
               ></calcite-button>
               <div slot="footer-end">
-                <calcite-button type="button" scale="s" kind="neutral" id="card-icon-test-2" icon-start="stairs">
-                </calcite-button>
-                <calcite-button type="button" scale="s" kind="neutral" id="card-icon-test-3" icon-start="ellipsis">
-                </calcite-button>
                 <calcite-dropdown type="hover">
                   <calcite-button id="card-icon-test-4" slot="trigger" scale="s" kind="neutral" icon-start="caret-down">
                   </calcite-button>
@@ -103,8 +99,15 @@
 
               connectedCallback() {
                 this.flowItemEl.setAttribute("heading", this.getAttribute("heading"));
+                this.flowItemEl.setAttribute("description", this.getAttribute("description"));
                 this.flowItemEl.setAttribute("show-back-button", this.getAttribute("show-back-button"));
                 this.flowItemEl.setAttribute("menu-open", this.getAttribute("menu-open"));
+
+                // Inherit scale from parent calcite-flow
+                const parentCalciteFlow = this.closest("calcite-flow");
+                if (parentCalciteFlow && parentCalciteFlow.getAttribute("scale")) {
+                  this.flowItemEl.setAttribute("scale", parentCalciteFlow.getAttribute("scale"));
+                }
               }
 
               get heading() {
@@ -155,6 +158,33 @@
           </script>
         </div>
       </div>
+
+      <div class="parent">
+        <div class="child right-aligned-text">scale small</div>
+        <div class="child">
+          <calcite-flow>
+            <calcite-flow-item heading="Flow-item heading" description="Flow-item description" scale="s" />
+          </calcite-flow>
+        </div>
+      </div>
+
+      <div class="parent">
+        <div class="child right-aligned-text">scale medium</div>
+        <div class="child">
+          <calcite-flow>
+            <calcite-flow-item heading="Flow-item heading" description="Flow-item description" scale="m" />
+          </calcite-flow>
+        </div>
+      </div>
+
+      <div class="parent">
+        <div class="child right-aligned-text">scale large</div>
+        <div class="child">
+          <calcite-flow>
+            <calcite-flow-item heading="Flow-item heading" description="Flow-item description" scale="l" />
+          </calcite-flow>
+        </div>
+      </div>
     </demo-dom-swapper>
   </body>
 </html>

From ee25373d6d83f8e6da42d1a788be1d0d6ce98c48 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Tue, 2 Jul 2024 16:38:53 -0700
Subject: [PATCH 06/14] WIP

---
 packages/calcite-components/src/demos/flow.html | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/packages/calcite-components/src/demos/flow.html b/packages/calcite-components/src/demos/flow.html
index 866f9ca53bc..d7db12ba504 100644
--- a/packages/calcite-components/src/demos/flow.html
+++ b/packages/calcite-components/src/demos/flow.html
@@ -39,19 +39,19 @@
 
         <div class="child">
           <calcite-flow custom-item-selectors="custom-flow-item">
-            <calcite-flow-item heading="custom-flow-item-1" description="description">
+            <calcite-flow-item heading="custom-flow-item-1" description="description" scale="m">
               <div slot="content-top">Slot for a content-top.</div>
               <img width="250" height="250" src="./_assets/images/placeholder.svg" />
               <div slot="content-bottom">Content bottom!</div>
               <div slot="footer">Footer!</div>
             </calcite-flow-item>
-            <custom-flow-item heading="custom-flow-item-2" description="description">
+            <custom-flow-item heading="custom-flow-item-2" description="description" scale="m">
               <div slot="content-top">Slot for a content-top.</div>
               <img width="250" height="250" src="./_assets/images/placeholder.svg" />
               <div slot="content-bottom">Content bottom!</div>
               <div slot="footer">Footer!</div>
             </custom-flow-item>
-            <calcite-flow-item heading="custom-flow-item-3" description="description">
+            <calcite-flow-item heading="custom-flow-item-3" description="description" scale="m">
               <div slot="content-top">Slot for a content-top.</div>
               <img width="250" height="250" src="./_assets/images/placeholder.svg" />
               <div slot="content-bottom">Content bottom!</div>
@@ -100,14 +100,9 @@
               connectedCallback() {
                 this.flowItemEl.setAttribute("heading", this.getAttribute("heading"));
                 this.flowItemEl.setAttribute("description", this.getAttribute("description"));
+                this.flowItemEl.setAttribute("scale", this.getAttribute("scale"));
                 this.flowItemEl.setAttribute("show-back-button", this.getAttribute("show-back-button"));
                 this.flowItemEl.setAttribute("menu-open", this.getAttribute("menu-open"));
-
-                // Inherit scale from parent calcite-flow
-                const parentCalciteFlow = this.closest("calcite-flow");
-                if (parentCalciteFlow && parentCalciteFlow.getAttribute("scale")) {
-                  this.flowItemEl.setAttribute("scale", parentCalciteFlow.getAttribute("scale"));
-                }
               }
 
               get heading() {

From 7fc091c0d2b547274b8a7eb29e327c9149652263 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Tue, 2 Jul 2024 16:51:18 -0700
Subject: [PATCH 07/14] WIP

---
 .../calcite-components/src/demos/flow.html    |  6 +++---
 .../src/demos/shell-panel.html                | 20 +++++++++++--------
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/packages/calcite-components/src/demos/flow.html b/packages/calcite-components/src/demos/flow.html
index d7db12ba504..ae88887f75e 100644
--- a/packages/calcite-components/src/demos/flow.html
+++ b/packages/calcite-components/src/demos/flow.html
@@ -39,19 +39,19 @@
 
         <div class="child">
           <calcite-flow custom-item-selectors="custom-flow-item">
-            <calcite-flow-item heading="custom-flow-item-1" description="description" scale="m">
+            <calcite-flow-item heading="flow-item-1" description="description" scale="m">
               <div slot="content-top">Slot for a content-top.</div>
               <img width="250" height="250" src="./_assets/images/placeholder.svg" />
               <div slot="content-bottom">Content bottom!</div>
               <div slot="footer">Footer!</div>
             </calcite-flow-item>
-            <custom-flow-item heading="custom-flow-item-2" description="description" scale="m">
+            <custom-flow-item heading="custom-flow-item" description="description" scale="m">
               <div slot="content-top">Slot for a content-top.</div>
               <img width="250" height="250" src="./_assets/images/placeholder.svg" />
               <div slot="content-bottom">Content bottom!</div>
               <div slot="footer">Footer!</div>
             </custom-flow-item>
-            <calcite-flow-item heading="custom-flow-item-3" description="description" scale="m">
+            <calcite-flow-item heading="flow-item-2" description="description" scale="m">
               <div slot="content-top">Slot for a content-top.</div>
               <img width="250" height="250" src="./_assets/images/placeholder.svg" />
               <div slot="content-bottom">Content bottom!</div>
diff --git a/packages/calcite-components/src/demos/shell-panel.html b/packages/calcite-components/src/demos/shell-panel.html
index d1c810c2d4f..b2c9f8568a0 100644
--- a/packages/calcite-components/src/demos/shell-panel.html
+++ b/packages/calcite-components/src/demos/shell-panel.html
@@ -41,19 +41,23 @@
                 >
               </calcite-action-bar>
               <calcite-flow custom-item-selectors="custom-flow-item">
-                <calcite-flow-item heading="flow-item-1">
+                <calcite-flow-item heading="flow-item-1 heading" description="flow-item-1 description" scale="s">
                   <div slot="content-top">Slot for a content-top.</div>
                   <img width="100" height="100" src="./_assets/images/placeholder.svg" />
                   <div slot="content-bottom">Content bottom!</div>
                   <div slot="footer">Footer!</div>
                 </calcite-flow-item>
-                <custom-flow-item heading="custom-flow-item">
+                <custom-flow-item
+                  heading="custom flow-item heading"
+                  description="custom-flow-item description"
+                  scale="s"
+                >
                   <div slot="content-top">Slot for a content-top.</div>
                   <img width="100" height="100" src="./_assets/images/placeholder.svg" />
                   <div slot="content-bottom">Content bottom!</div>
                   <div slot="footer">Footer!</div>
                 </custom-flow-item>
-                <calcite-flow-item heading="flow-item-2">
+                <calcite-flow-item heading="flow-item-2 heading" description="flow-item-2 description" scale="s">
                   <div slot="content-top">Slot for a content-top.</div>
                   <img width="100" height="100" src="./_assets/images/placeholder.svg" />
                   <div slot="content-bottom">Content bottom!</div>
@@ -89,19 +93,19 @@
         >
           <div style="padding: 12px 16px">Hello! I am some popover content!</div>
           <calcite-flow custom-item-selectors="custom-flow-item">
-            <calcite-flow-item heading="flow-item-1">
+            <calcite-flow-item heading="flow-item-1 heading" description="flow-item-1 description" scale="s">
               <div slot="content-top">Slot for a content-top.</div>
               <img width="100" height="100" src="./_assets/images/placeholder.svg" />
               <div slot="content-bottom">Content bottom!</div>
               <div slot="footer">Footer!</div>
             </calcite-flow-item>
-            <custom-flow-item heading="custom-flow-item">
+            <custom-flow-item heading="custom-flow-item heading" description="custom-flow-item description" scale="s">
               <div slot="content-top">Slot for a content-top.</div>
               <img width="100" height="100" src="./_assets/images/placeholder.svg" />
               <div slot="content-bottom">Content bottom!</div>
               <div slot="footer">Footer!</div>
             </custom-flow-item>
-            <calcite-flow-item heading="flow-item-2">
+            <calcite-flow-item heading="flow-item-2 heading" description="flow-item-2 description" scale="s">
               <div slot="content-top">Slot for a content-top.</div>
               <img width="100" height="100" src="./_assets/images/placeholder.svg" />
               <div slot="content-bottom">Content bottom!</div>
@@ -119,9 +123,7 @@
         <script>
           const shell = document.querySelector("calcite-shell");
           const shellPanels = document.querySelectorAll("calcite-shell-panel");
-
           const panelBottom = document.getElementById("panel-bottom");
-
           const actions = document.querySelectorAll("calcite-action");
 
           panelBottom.addEventListener("calcitePanelClose", function (event) {
@@ -159,6 +161,8 @@
 
             connectedCallback() {
               this.flowItemEl.setAttribute("heading", this.getAttribute("heading"));
+              this.flowItemEl.setAttribute("description", this.getAttribute("description"));
+              this.flowItemEl.setAttribute("scale", this.getAttribute("scale"));
               this.flowItemEl.setAttribute("show-back-button", this.getAttribute("show-back-button"));
               this.flowItemEl.setAttribute("menu-open", this.getAttribute("menu-open"));
             }

From c0fcb6bdad4d5deaf01c48919e36103687c9dfeb Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Wed, 3 Jul 2024 10:38:06 -0700
Subject: [PATCH 08/14] flow-item scale stories

---
 .../src/components/flow/flow.stories.ts       | 14 ++++++++++
 .../calcite-components/src/demos/flow.html    | 27 -------------------
 2 files changed, 14 insertions(+), 27 deletions(-)

diff --git a/packages/calcite-components/src/components/flow/flow.stories.ts b/packages/calcite-components/src/components/flow/flow.stories.ts
index ab1d3848898..091590cf7c0 100644
--- a/packages/calcite-components/src/components/flow/flow.stories.ts
+++ b/packages/calcite-components/src/components/flow/flow.stories.ts
@@ -189,3 +189,17 @@ export const noDoubleScrollbars_TestOnly = (): string => html`
     </calcite-flow>
   </div>
 `;
+
+export const scales = (): string => html`
+  <calcite-flow style="height: 100px; width: 300px;">
+    <calcite-flow-item heading="Flow-item heading" description="Flow-item description" scale="s" />
+  </calcite-flow>
+
+  <calcite-flow style="height: 100px">
+    <calcite-flow-item heading="Flow-item heading" description="Flow-item description" scale="m" />
+  </calcite-flow>
+
+  <calcite-flow style="height: 100px">
+    <calcite-flow-item heading="Flow-item heading" description="Flow-item description" scale="l" />
+  </calcite-flow>
+`;
diff --git a/packages/calcite-components/src/demos/flow.html b/packages/calcite-components/src/demos/flow.html
index ae88887f75e..2fb717ff697 100644
--- a/packages/calcite-components/src/demos/flow.html
+++ b/packages/calcite-components/src/demos/flow.html
@@ -153,33 +153,6 @@
           </script>
         </div>
       </div>
-
-      <div class="parent">
-        <div class="child right-aligned-text">scale small</div>
-        <div class="child">
-          <calcite-flow>
-            <calcite-flow-item heading="Flow-item heading" description="Flow-item description" scale="s" />
-          </calcite-flow>
-        </div>
-      </div>
-
-      <div class="parent">
-        <div class="child right-aligned-text">scale medium</div>
-        <div class="child">
-          <calcite-flow>
-            <calcite-flow-item heading="Flow-item heading" description="Flow-item description" scale="m" />
-          </calcite-flow>
-        </div>
-      </div>
-
-      <div class="parent">
-        <div class="child right-aligned-text">scale large</div>
-        <div class="child">
-          <calcite-flow>
-            <calcite-flow-item heading="Flow-item heading" description="Flow-item description" scale="l" />
-          </calcite-flow>
-        </div>
-      </div>
     </demo-dom-swapper>
   </body>
 </html>

From b4d49f2841a2b831f3f68ff12263bec034f4efa2 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Wed, 3 Jul 2024 10:47:02 -0700
Subject: [PATCH 09/14] revert changes to shell-panel demo

---
 .../src/demos/shell-panel.html                | 419 +++++++++++-------
 1 file changed, 261 insertions(+), 158 deletions(-)

diff --git a/packages/calcite-components/src/demos/shell-panel.html b/packages/calcite-components/src/demos/shell-panel.html
index b2c9f8568a0..ccbce45df27 100644
--- a/packages/calcite-components/src/demos/shell-panel.html
+++ b/packages/calcite-components/src/demos/shell-panel.html
@@ -3,9 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
-
     <title>Shell Panel</title>
-
     <script src="./_assets/head.js"></script>
     <script>
       const dojoConfig = {
@@ -25,109 +23,288 @@
         width: 100%;
         height: 100%;
       }
+
+      #viewDiv {
+        padding: 0;
+        margin: 0;
+        height: 100%;
+        width: 100%;
+        overflow: hidden;
+      }
+
+      calcite-notice {
+        margin-block: 1rem;
+      }
+
+      .gnav {
+        display: flex;
+        flex-direction: row;
+        padding: 1rem;
+        justify-content: space-between;
+      }
+
+      .tall-content-example {
+        display: block;
+        margin: 1rem 0;
+        background: var(--calcite-color-foreground-2);
+        height: 100rem;
+        overflow: scroll;
+      }
     </style>
+
+    <script>
+      require(["esri/WebMap", "esri/views/MapView", "esri/widgets/LayerList", "esri/widgets/Zoom"], function (
+        WebMap,
+        MapView,
+        LayerList,
+        Zoom,
+      ) {
+        const webmap = new WebMap({
+          portalItem: {
+            id: "cc316ca9e0824970ad29ac558161d42d",
+          },
+        });
+
+        const view = new MapView({
+          container: "viewDiv",
+          map: webmap,
+        });
+        view.when(function () {
+          const layerList = new LayerList({
+            view: view,
+            selectionEnabled: true,
+            container: "layerlist-container",
+          });
+
+          view.ui.move("zoom", "bottom-right");
+        });
+      });
+    </script>
   </head>
 
   <body>
     <demo-dom-swapper>
       <main>
-        <div class="shell-container" style="width: 500px; height: 400px">
+        <div class="shell-container">
           <calcite-shell>
-            <div>Shell Content</div>
+            <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>
+
+            <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-bottom" position="end">
               <calcite-action-bar slot="action-bar" expand-disabled>
-                <calcite-button appearance="outline" id="popover-button-right" icon-start="popup">
-                  Clickable popover</calcite-button
-                >
+                <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-flow custom-item-selectors="custom-flow-item">
-                <calcite-flow-item heading="flow-item-1 heading" description="flow-item-1 description" scale="s">
-                  <div slot="content-top">Slot for a content-top.</div>
-                  <img width="100" height="100" src="./_assets/images/placeholder.svg" />
-                  <div slot="content-bottom">Content bottom!</div>
-                  <div slot="footer">Footer!</div>
-                </calcite-flow-item>
-                <custom-flow-item
-                  heading="custom flow-item heading"
-                  description="custom-flow-item description"
-                  scale="s"
-                >
-                  <div slot="content-top">Slot for a content-top.</div>
-                  <img width="100" height="100" src="./_assets/images/placeholder.svg" />
-                  <div slot="content-bottom">Content bottom!</div>
-                  <div slot="footer">Footer!</div>
-                </custom-flow-item>
-                <calcite-flow-item heading="flow-item-2 heading" description="flow-item-2 description" scale="s">
-                  <div slot="content-top">Slot for a content-top.</div>
-                  <img width="100" height="100" src="./_assets/images/placeholder.svg" />
-                  <div slot="content-bottom">Content bottom!</div>
-                  <calcite-button
-                    appearance="outline"
-                    type="button"
-                    slot="footer-start"
-                    scale="s"
-                    icon-start="check"
-                    width="full"
-                  ></calcite-button>
-                  <calcite-button
-                    appearance="outline"
-                    slot="footer-end"
-                    type="button"
-                    scale="s"
-                    icon-end="ellipsis"
-                    width="full"
-                  ></calcite-button>
-                </calcite-flow-item>
-              </calcite-flow>
+              <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>
         </div>
 
-        <!-- clickable popover -->
-        <calcite-popover
-          label="right start popover"
-          reference-element="popover-button-right"
-          placement="bottom"
-          id="popover-right"
-        >
-          <div style="padding: 12px 16px">Hello! I am some popover content!</div>
-          <calcite-flow custom-item-selectors="custom-flow-item">
-            <calcite-flow-item heading="flow-item-1 heading" description="flow-item-1 description" scale="s">
-              <div slot="content-top">Slot for a content-top.</div>
-              <img width="100" height="100" src="./_assets/images/placeholder.svg" />
-              <div slot="content-bottom">Content bottom!</div>
-              <div slot="footer">Footer!</div>
-            </calcite-flow-item>
-            <custom-flow-item heading="custom-flow-item heading" description="custom-flow-item description" scale="s">
-              <div slot="content-top">Slot for a content-top.</div>
-              <img width="100" height="100" src="./_assets/images/placeholder.svg" />
-              <div slot="content-bottom">Content bottom!</div>
-              <div slot="footer">Footer!</div>
-            </custom-flow-item>
-            <calcite-flow-item heading="flow-item-2 heading" description="flow-item-2 description" scale="s">
-              <div slot="content-top">Slot for a content-top.</div>
-              <img width="100" height="100" src="./_assets/images/placeholder.svg" />
-              <div slot="content-bottom">Content bottom!</div>
-              <calcite-button
-                appearance="outline"
-                type="button"
-                scale="s"
-                icon-start="ellipsis"
-                width="full"
-              ></calcite-button>
-            </calcite-flow-item>
-          </calcite-flow>
-        </calcite-popover>
-
         <script>
           const shell = document.querySelector("calcite-shell");
           const shellPanels = document.querySelectorAll("calcite-shell-panel");
+
+          const segmentedControlContentBehind = document.getElementById("control-content-behind");
+          const segmentedControlResize = document.getElementById("control-resizable");
+
+          segmentedControlContentBehind.addEventListener("calciteSegmentedControlChange", function () {
+            shell.contentBehind = !shell.contentBehind;
+          });
+
+          segmentedControlResize.addEventListener("calciteSegmentedControlChange", function () {
+            shellPanels.forEach((el) => (el.resizable = !el.resizable));
+          });
+
+          const segmentedControlTallContent = document.getElementById("control-tall-content");
+          const bigBois = document.querySelectorAll(".tall-content-example");
+
+          segmentedControlTallContent.addEventListener("calciteSegmentedControlChange", function () {
+            bigBois.forEach((el) => (el.style.display = el.style.display === "none" ? "block" : "none"));
+          });
+
+          const chipsTop = document.getElementById("chip-group-panel-top");
+          const chipsBottom = document.getElementById("chip-group-panel-bottom");
+          const chipsStart = document.getElementById("chip-group-panel-start");
+          const chipsEnd = document.getElementById("chip-group-panel-end");
+
+          [chipsTop, chipsBottom, chipsStart, chipsEnd].forEach((chipGroup) => {
+            chipGroup.addEventListener("calciteChipGroupSelect", function (event) {
+              const shellPanel = event.target.closest("calcite-shell-panel");
+              const prop = event.target.selectedItems[0].value;
+              shellPanel.displayMode = prop;
+            });
+          });
+
+          const panelTop = document.getElementById("panel-top");
           const panelBottom = document.getElementById("panel-bottom");
+          const panelStart = document.getElementById("panel-start");
+          const panelEnd = document.getElementById("panel-end");
           const actions = document.querySelectorAll("calcite-action");
 
-          panelBottom.addEventListener("calcitePanelClose", function (event) {
-            event.target.closest("calcite-shell-panel").collapsed = true;
+          [panelTop, panelBottom, panelStart, panelEnd].forEach((panel) => {
+            panel.addEventListener("calcitePanelClose", function (event) {
+              event.target.closest("calcite-shell-panel").collapsed = true;
+            });
           });
 
           actions.forEach((el) => {
@@ -138,80 +315,6 @@
               panel.closed = !panel.closed;
             });
           });
-
-          class CustomFlowItem extends HTMLElement {
-            constructor() {
-              super();
-              const shadow = this.attachShadow({ mode: "open" });
-
-              shadow.innerHTML = `
-                <style>
-                  :host {
-                    display: flex;
-                    background: #bdf2c4;
-                  }
-                </style>
-                <calcite-flow-item id="internalFlowItem">
-                  <slot></slot>
-                </calcite-flow-item>
-              `;
-
-              this.flowItemEl = shadow.getElementById("internalFlowItem");
-            }
-
-            connectedCallback() {
-              this.flowItemEl.setAttribute("heading", this.getAttribute("heading"));
-              this.flowItemEl.setAttribute("description", this.getAttribute("description"));
-              this.flowItemEl.setAttribute("scale", this.getAttribute("scale"));
-              this.flowItemEl.setAttribute("show-back-button", this.getAttribute("show-back-button"));
-              this.flowItemEl.setAttribute("menu-open", this.getAttribute("menu-open"));
-            }
-
-            get heading() {
-              return this.getAttribute("heading");
-            }
-
-            set heading(value) {
-              this.flowItemEl.heading = value;
-            }
-
-            get hidden() {
-              return this.hasAttribute("hidden");
-            }
-
-            set hidden(value) {
-              this.toggleAttribute("hidden", value);
-              this.flowItemEl.toggleAttribute("hidden", value);
-            }
-
-            get menuOpen() {
-              return this.hasAttribute("menu-open");
-            }
-
-            set menuOpen(value) {
-              this.toggleAttribute("menu-open", value);
-              this.flowItemEl.menuOpen = value;
-            }
-
-            get showBackButton() {
-              return this.hasAttribute("show-back-button");
-            }
-
-            set showBackButton(value) {
-              this.toggleAttribute("show-back-button", value);
-              this.flowItemEl.showBackButton = value;
-            }
-
-            async beforeBack() {
-              // no op
-            }
-
-            async setFocus() {
-              await this.flowItemEl.setFocus();
-            }
-          }
-
-          customElements.define("custom-flow-item", CustomFlowItem);
         </script>
       </main>
     </demo-dom-swapper>

From a5084fdf1dc60602dbcad1736e1e8e1624ccb390 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Wed, 3 Jul 2024 10:48:17 -0700
Subject: [PATCH 10/14] WIP

---
 packages/calcite-components/src/demos/shell-panel.html | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/calcite-components/src/demos/shell-panel.html b/packages/calcite-components/src/demos/shell-panel.html
index ccbce45df27..fe241d016af 100644
--- a/packages/calcite-components/src/demos/shell-panel.html
+++ b/packages/calcite-components/src/demos/shell-panel.html
@@ -3,7 +3,9 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+
     <title>Shell Panel</title>
+
     <script src="./_assets/head.js"></script>
     <script>
       const dojoConfig = {

From 5cd864ec2b4a15188a7c07b5a1a0fcf06e154304 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Wed, 3 Jul 2024 11:04:09 -0700
Subject: [PATCH 11/14] panel scales story

---
 .../src/components/panel/panel.stories.ts     | 92 ++-----------------
 1 file changed, 9 insertions(+), 83 deletions(-)

diff --git a/packages/calcite-components/src/components/panel/panel.stories.ts b/packages/calcite-components/src/components/panel/panel.stories.ts
index 2b99037c270..928e1745a25 100644
--- a/packages/calcite-components/src/components/panel/panel.stories.ts
+++ b/packages/calcite-components/src/components/panel/panel.stories.ts
@@ -432,88 +432,14 @@ export const footerSlotPrecedence = (): string => html`
   </calcite-panel>
 `;
 
-export const panelFlowScaleInPopoverAndInShellPanel = (): string => html`
-  <div class="shell-container" style="width: 500px; height: 400px">
-    <calcite-shell>
-      <div>Shell Content</div>
-      <calcite-shell-panel layout="horizontal" slot="panel-bottom" position="end">
-        <calcite-action-bar slot="action-bar" expand-disabled>
-          <calcite-button appearance="outline" id="popover-button-right" icon-start="popup">
-            Clickable popover</calcite-button
-          >
-        </calcite-action-bar>
-        <calcite-flow custom-item-selectors="custom-flow-item">
-          <calcite-flow-item heading="flow-item-1">
-            <div slot="content-top">Slot for a content-top.</div>
-            <img width="100" height="100" src="./_assets/images/placeholder.svg" />
-            <div slot="content-bottom">Content bottom!</div>
-            <div slot="footer">Footer!</div>
-          </calcite-flow-item>
-          <custom-flow-item heading="custom-flow-item">
-            <div slot="content-top">Slot for a content-top.</div>
-            <img width="100" height="100" src="./_assets/images/placeholder.svg" />
-            <div slot="content-bottom">Content bottom!</div>
-            <div slot="footer">Footer!</div>
-          </custom-flow-item>
-          <calcite-flow-item heading="flow-item-2">
-            <div slot="content-top">Slot for a content-top.</div>
-            <img width="100" height="100" src="./_assets/images/placeholder.svg" />
-            <div slot="content-bottom">Content bottom!</div>
-            <calcite-button
-              appearance="outline"
-              type="button"
-              slot="footer-start"
-              scale="s"
-              icon-start="check"
-              width="full"
-            ></calcite-button>
-            <calcite-button
-              appearance="outline"
-              slot="footer-end"
-              type="button"
-              scale="s"
-              icon-end="ellipsis"
-              width="full"
-            ></calcite-button>
-          </calcite-flow-item>
-        </calcite-flow>
-      </calcite-shell-panel>
-      <footer slot="footer">Footer</footer>
-    </calcite-shell>
-  </div>
-  <calcite-popover
-    label="right start popover"
-    reference-element="popover-button-right"
-    placement="bottom"
-    id="popover-right"
-    open
+export const scales = (): string => html`
+  <calcite-panel heading="This is a heading" description="And that's a description" scale="s" style="height: 150px"
+    >Instead of the mahi mahi, may I just get the one mahi because I’m not that hungry?</calcite-panel
+  >
+  <calcite-panel heading="This is a heading" description="And that's a description" scale="m" style="height: 150px"
+    >Instead of the mahi mahi, may I just get the one mahi because I’m not that hungry?</calcite-panel
+  >
+  <calcite-panel heading="This is a heading" description="And that's a description" scale="l" style="height: 150px"
+    >Instead of the mahi mahi, may I just get the one mahi because I’m not that hungry?</calcite-panel
   >
-    <div style="padding: 12px 16px">Hello! I am some popover content!</div>
-    <calcite-flow custom-item-selectors="custom-flow-item">
-      <calcite-flow-item heading="flow-item-1">
-        <div slot="content-top">Slot for a content-top.</div>
-        <img width="100" height="100" src="./_assets/images/placeholder.svg" />
-        <div slot="content-bottom">Content bottom!</div>
-        <div slot="footer">Footer!</div>
-      </calcite-flow-item>
-      <custom-flow-item heading="custom-flow-item">
-        <div slot="content-top">Slot for a content-top.</div>
-        <img width="100" height="100" src="./_assets/images/placeholder.svg" />
-        <div slot="content-bottom">Content bottom!</div>
-        <div slot="footer">Footer!</div>
-      </custom-flow-item>
-      <calcite-flow-item heading="flow-item-2">
-        <div slot="content-top">Slot for a content-top.</div>
-        <img width="100" height="100" src="./_assets/images/placeholder.svg" />
-        <div slot="content-bottom">Content bottom!</div>
-        <calcite-button
-          appearance="outline"
-          type="button"
-          scale="s"
-          icon-start="ellipsis"
-          width="full"
-        ></calcite-button>
-      </calcite-flow-item>
-    </calcite-flow>
-  </calcite-popover>
 `;

From 1d8e57393b3f394232810313f2ee12d09426bb99 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Wed, 3 Jul 2024 11:40:19 -0700
Subject: [PATCH 12/14] footer padding

---
 .../src/components/panel/panel.scss           | 11 ++++--
 .../src/components/panel/panel.stories.ts     | 38 +++++++++++++++----
 2 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss
index dcbe62d90ad..52c6e1ebbe7 100644
--- a/packages/calcite-components/src/components/panel/panel.scss
+++ b/packages/calcite-components/src/components/panel/panel.scss
@@ -20,7 +20,8 @@
 
 :host([scale="s"]) {
   .content-top,
-  .content-bottom {
+  .content-bottom,
+  .footer {
     padding: var(--calcite-spacing-sm);
   }
 
@@ -37,7 +38,8 @@
 
 :host([scale="m"]) {
   .content-top,
-  .content-bottom {
+  .content-bottom,
+  .footer {
     padding: var(--calcite-spacing-md);
   }
 
@@ -54,8 +56,9 @@
 
 :host([scale="l"]) {
   .content-top,
-  .content-bottom {
-    padding: var(--calcite-spacing-xl);
+  .content-bottom,
+  .footer {
+    padding: var(--calcite-spacing-lg);
   }
 
   .header-content {
diff --git a/packages/calcite-components/src/components/panel/panel.stories.ts b/packages/calcite-components/src/components/panel/panel.stories.ts
index 928e1745a25..c3859ce4027 100644
--- a/packages/calcite-components/src/components/panel/panel.stories.ts
+++ b/packages/calcite-components/src/components/panel/panel.stories.ts
@@ -432,14 +432,38 @@ export const footerSlotPrecedence = (): string => html`
   </calcite-panel>
 `;
 
-export const scales = (): string => html`
-  <calcite-panel heading="This is a heading" description="And that's a description" scale="s" style="height: 150px"
-    >Instead of the mahi mahi, may I just get the one mahi because I’m not that hungry?</calcite-panel
+export const scalesFontAndPadding = (): string => html`
+  <calcite-panel
+    heading="This is a heading"
+    description="And that's a description"
+    scale="s"
+    style="height: 220px; margin: 50px;"
   >
-  <calcite-panel heading="This is a heading" description="And that's a description" scale="m" style="height: 150px"
-    >Instead of the mahi mahi, may I just get the one mahi because I’m not that hungry?</calcite-panel
+    <div slot="content-top">Content Top</div>
+    <div>Instead of the mahi mahi, may I just get the one mahi because I’m not that hungry?</div>
+    <div slot="content-bottom">Content Bottom</div>
+    ${footerHTML}
+  </calcite-panel>
+  <calcite-panel
+    heading="This is a heading"
+    description="And that's a description"
+    scale="m"
+    style="height: 250px; margin: 50px;"
   >
-  <calcite-panel heading="This is a heading" description="And that's a description" scale="l" style="height: 150px"
-    >Instead of the mahi mahi, may I just get the one mahi because I’m not that hungry?</calcite-panel
+    <div slot="content-top">Content Top</div>
+    <div>Instead of the mahi mahi, may I just get the one mahi because I’m not that hungry?</div>
+    <div slot="content-bottom">Content Bottom</div>
+    ${footerHTML}
+  </calcite-panel>
+  <calcite-panel
+    heading="This is a heading"
+    description="And that's a description"
+    scale="l"
+    style="height: 260px; margin: 50px;"
   >
+    <div slot="content-top">Content Top</div>
+    <div>Instead of the mahi mahi, may I just get the one mahi because I’m not that hungry?</div>
+    <div slot="content-bottom">Content Bottom</div>
+    ${footerHTML}
+  </calcite-panel>
 `;

From 0317585430dc0d26e8a0e6f6e9b7001464e80409 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Mon, 8 Jul 2024 12:30:54 -0700
Subject: [PATCH 13/14] fix header and footer padding

---
 .../src/components/panel/panel.scss                   | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss
index 52c6e1ebbe7..aa1cb3d8309 100644
--- a/packages/calcite-components/src/components/panel/panel.scss
+++ b/packages/calcite-components/src/components/panel/panel.scss
@@ -21,7 +21,8 @@
 :host([scale="s"]) {
   .content-top,
   .content-bottom,
-  .footer {
+  .footer,
+  .header-content {
     padding: var(--calcite-spacing-sm);
   }
 
@@ -39,7 +40,8 @@
 :host([scale="m"]) {
   .content-top,
   .content-bottom,
-  .footer {
+  .footer,
+  .header-content {
     padding: var(--calcite-spacing-md);
   }
 
@@ -57,8 +59,9 @@
 :host([scale="l"]) {
   .content-top,
   .content-bottom,
-  .footer {
-    padding: var(--calcite-spacing-lg);
+  .footer,
+  .header-content {
+    padding: var(--calcite-spacing-xl);
   }
 
   .header-content {

From 8ff8e6fa25ba2c06d98fbd9a0315089b212b78c0 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Mon, 8 Jul 2024 12:39:57 -0700
Subject: [PATCH 14/14] scale defaults

---
 .../src/components/flow-item/flow-item.e2e.ts                 | 4 ++++
 packages/calcite-components/src/components/panel/panel.e2e.ts | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts b/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts
index 56b34c2390b..a6856d7fb13 100644
--- a/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts
+++ b/packages/calcite-components/src/components/flow-item/flow-item.e2e.ts
@@ -61,6 +61,10 @@ describe("calcite-flow-item", () => {
         propertyName: "overlayPositioning",
         defaultValue: "absolute",
       },
+      {
+        propertyName: "scale",
+        defaultValue: "m",
+      },
       {
         propertyName: "showBackButton",
         defaultValue: false,
diff --git a/packages/calcite-components/src/components/panel/panel.e2e.ts b/packages/calcite-components/src/components/panel/panel.e2e.ts
index e1708b73b32..0bce0e9cc3b 100644
--- a/packages/calcite-components/src/components/panel/panel.e2e.ts
+++ b/packages/calcite-components/src/components/panel/panel.e2e.ts
@@ -59,6 +59,10 @@ describe("calcite-panel", () => {
         propertyName: "overlayPositioning",
         defaultValue: "absolute",
       },
+      {
+        propertyName: "scale",
+        defaultValue: "m",
+      },
     ]);
   });