diff --git a/package-lock.json b/package-lock.json
index e9b9540e9f5..7fead466ebf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11447,9 +11447,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001613",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001613.tgz",
-      "integrity": "sha512-BNjJULJfOONQERivfxte7alLfeLW4QnwHvNW4wEcLEbXfV6VSCYvr+REbf2Sojv8tC1THpjPXBxWgDbq4NtLWg==",
+      "version": "1.0.30001620",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001620.tgz",
+      "integrity": "sha512-WJvYsOjd1/BYUY6SNGUosK9DUidBPDTnOARHp3fSmFO1ekdxaY6nKRttEVrfMmYi80ctS0kz1wiWmm14fVc3ew==",
       "dev": true,
       "funding": [
         {
@@ -36695,7 +36695,7 @@
     },
     "packages/calcite-components": {
       "name": "@esri/calcite-components",
-      "version": "2.9.0-next.19",
+      "version": "2.9.0-next.22",
       "license": "SEE LICENSE.md",
       "dependencies": {
         "@floating-ui/dom": "1.6.4",
@@ -37946,10 +37946,10 @@
     },
     "packages/calcite-components-angular/projects/component-library": {
       "name": "@esri/calcite-components-angular",
-      "version": "2.9.0-next.19",
+      "version": "2.9.0-next.22",
       "license": "SEE LICENSE.md",
       "dependencies": {
-        "@esri/calcite-components": "^2.9.0-next.19",
+        "@esri/calcite-components": "^2.9.0-next.22",
         "tslib": "2.6.2"
       },
       "peerDependencies": {
@@ -37959,10 +37959,10 @@
     },
     "packages/calcite-components-react": {
       "name": "@esri/calcite-components-react",
-      "version": "2.9.0-next.19",
+      "version": "2.9.0-next.22",
       "license": "SEE LICENSE.md",
       "dependencies": {
-        "@esri/calcite-components": "^2.9.0-next.19"
+        "@esri/calcite-components": "^2.9.0-next.22"
       },
       "peerDependencies": {
         "react": ">=16.7",
diff --git a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md
index a08816d8ad2..b8593bb117a 100644
--- a/packages/calcite-components-angular/projects/component-library/CHANGELOG.md
+++ b/packages/calcite-components-angular/projects/component-library/CHANGELOG.md
@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.9.0-next.22](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.9.0-next.21...@esri/calcite-components-angular@2.9.0-next.22) (2024-05-23)
+
+**Note:** Version bump only for package @esri/calcite-components-angular
+
+## [2.9.0-next.21](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.9.0-next.20...@esri/calcite-components-angular@2.9.0-next.21) (2024-05-23)
+
+**Note:** Version bump only for package @esri/calcite-components-angular
+
+## [2.9.0-next.20](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.9.0-next.19...@esri/calcite-components-angular@2.9.0-next.20) (2024-05-23)
+
+**Note:** Version bump only for package @esri/calcite-components-angular
+
 ## [2.9.0-next.19](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-angular@2.9.0-next.18...@esri/calcite-components-angular@2.9.0-next.19) (2024-05-23)
 
 **Note:** Version bump only for package @esri/calcite-components-angular
diff --git a/packages/calcite-components-angular/projects/component-library/package.json b/packages/calcite-components-angular/projects/component-library/package.json
index d4ecf8f92d8..43467bcfaf4 100644
--- a/packages/calcite-components-angular/projects/component-library/package.json
+++ b/packages/calcite-components-angular/projects/component-library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components-angular",
-  "version": "2.9.0-next.19",
+  "version": "2.9.0-next.22",
   "sideEffects": false,
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "description": "A set of Angular components that wrap Esri's Calcite Components.",
@@ -20,7 +20,7 @@
     "@angular/core": ">=16.0.0"
   },
   "dependencies": {
-    "@esri/calcite-components": "^2.9.0-next.19",
+    "@esri/calcite-components": "^2.9.0-next.22",
     "tslib": "2.6.2"
   },
   "lerna": {
diff --git a/packages/calcite-components-react/CHANGELOG.md b/packages/calcite-components-react/CHANGELOG.md
index 9172ddcfb37..5e7bdb319b8 100644
--- a/packages/calcite-components-react/CHANGELOG.md
+++ b/packages/calcite-components-react/CHANGELOG.md
@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.9.0-next.22](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.9.0-next.21...@esri/calcite-components-react@2.9.0-next.22) (2024-05-23)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
+## [2.9.0-next.21](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.9.0-next.20...@esri/calcite-components-react@2.9.0-next.21) (2024-05-23)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
+## [2.9.0-next.20](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.9.0-next.19...@esri/calcite-components-react@2.9.0-next.20) (2024-05-23)
+
+**Note:** Version bump only for package @esri/calcite-components-react
+
 ## [2.9.0-next.19](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@2.9.0-next.18...@esri/calcite-components-react@2.9.0-next.19) (2024-05-23)
 
 **Note:** Version bump only for package @esri/calcite-components-react
diff --git a/packages/calcite-components-react/package.json b/packages/calcite-components-react/package.json
index 312490589ee..403b6de7fb1 100644
--- a/packages/calcite-components-react/package.json
+++ b/packages/calcite-components-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@esri/calcite-components-react",
   "sideEffects": false,
-  "version": "2.9.0-next.19",
+  "version": "2.9.0-next.22",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "description": "A set of React components that wrap calcite components",
   "license": "SEE LICENSE.md",
@@ -23,7 +23,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@esri/calcite-components": "^2.9.0-next.19"
+    "@esri/calcite-components": "^2.9.0-next.22"
   },
   "peerDependencies": {
     "react": ">=16.7",
diff --git a/packages/calcite-components/CHANGELOG.md b/packages/calcite-components/CHANGELOG.md
index 5fcf16d86fd..887a2db446d 100644
--- a/packages/calcite-components/CHANGELOG.md
+++ b/packages/calcite-components/CHANGELOG.md
@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.9.0-next.22](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.9.0-next.21...@esri/calcite-components@2.9.0-next.22) (2024-05-23)
+
+### Bug Fixes
+
+- **tree:** allow single select only and add indicator ([#9405](https://github.com/Esri/calcite-design-system/issues/9405)) ([0d07b59](https://github.com/Esri/calcite-design-system/commit/0d07b59d9d55f9dcb78869b51219d9e509ff11cb)), closes [#7899](https://github.com/Esri/calcite-design-system/issues/7899)
+
+## [2.9.0-next.21](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.9.0-next.20...@esri/calcite-components@2.9.0-next.21) (2024-05-23)
+
+### Features
+
+- **split-button:** Make dividers consistent ([#9402](https://github.com/Esri/calcite-design-system/issues/9402)) ([caf27e3](https://github.com/Esri/calcite-design-system/commit/caf27e3f3bf367db26ac88effe0cd16ce35cafff)), closes [#8142](https://github.com/Esri/calcite-design-system/issues/8142)
+
+## [2.9.0-next.20](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.9.0-next.19...@esri/calcite-components@2.9.0-next.20) (2024-05-23)
+
+### Features
+
+- **stepper, stepper-item:** add separate change events to stepper and items (deprecates `calciteStepperItemChange` on the parent) ([#9351](https://github.com/Esri/calcite-design-system/issues/9351)) ([cf6a118](https://github.com/Esri/calcite-design-system/commit/cf6a11867d74d5dedd77ad039e5475d65f25a46a)), closes [#2094](https://github.com/Esri/calcite-design-system/issues/2094)
+
+### Bug Fixes
+
+- **dropdown-group:** title scale with dropdown scale ([#9360](https://github.com/Esri/calcite-design-system/issues/9360)) ([3529cdd](https://github.com/Esri/calcite-design-system/commit/3529cdd1778cb1243de23c410acc27c419d63524)), closes [#9350](https://github.com/Esri/calcite-design-system/issues/9350)
+
 ## [2.9.0-next.19](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@2.9.0-next.18...@esri/calcite-components@2.9.0-next.19) (2024-05-23)
 
 ### Bug Fixes
diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json
index a0b3877cd24..317f0dee375 100644
--- a/packages/calcite-components/package.json
+++ b/packages/calcite-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-components",
-  "version": "2.9.0-next.19",
+  "version": "2.9.0-next.22",
   "homepage": "https://developers.arcgis.com/calcite-design-system/",
   "description": "Web Components for Esri's Calcite Design System.",
   "main": "dist/index.cjs.js",
diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index 1d1784e4591..14d5926eb0e 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -7257,6 +7257,7 @@ declare global {
         new (): HTMLCalciteStackElement;
     };
     interface HTMLCalciteStepperElementEventMap {
+        "calciteStepperChange": void;
         "calciteStepperItemChange": void;
         "calciteInternalStepperItemChange": StepperItemChangeEventDetail;
     }
@@ -7277,8 +7278,8 @@ declare global {
     interface HTMLCalciteStepperItemElementEventMap {
         "calciteInternalStepperItemKeyEvent": StepperItemKeyEventDetail;
         "calciteInternalStepperItemSelect": StepperItemEventDetail;
-        "calciteInternalUserRequestedStepperItemSelect": StepperItemChangeEventDetail;
         "calciteInternalStepperItemRegister": StepperItemEventDetail;
+        "calciteStepperItemSelect": void;
     }
     interface HTMLCalciteStepperItemElement extends Components.CalciteStepperItem, HTMLStencilElement {
         addEventListener<K extends keyof HTMLCalciteStepperItemElementEventMap>(type: K, listener: (this: HTMLCalciteStepperItemElement, ev: CalciteStepperItemCustomEvent<HTMLCalciteStepperItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -12495,6 +12496,11 @@ declare namespace LocalJSX {
         /**
           * Fires when the active `calcite-stepper-item` changes.
          */
+        "onCalciteStepperChange"?: (event: CalciteStepperCustomEvent<void>) => void;
+        /**
+          * Fires when the active `calcite-stepper-item` changes.
+          * @deprecated use `calciteStepperChange` instead or `calciteStepperItemChange` on items instead.
+         */
         "onCalciteStepperItemChange"?: (event: CalciteStepperCustomEvent<void>) => void;
         /**
           * Specifies the size of the component.
@@ -12555,7 +12561,10 @@ declare namespace LocalJSX {
         "onCalciteInternalStepperItemKeyEvent"?: (event: CalciteStepperItemCustomEvent<StepperItemKeyEventDetail>) => void;
         "onCalciteInternalStepperItemRegister"?: (event: CalciteStepperItemCustomEvent<StepperItemEventDetail>) => void;
         "onCalciteInternalStepperItemSelect"?: (event: CalciteStepperItemCustomEvent<StepperItemEventDetail>) => void;
-        "onCalciteInternalUserRequestedStepperItemSelect"?: (event: CalciteStepperItemCustomEvent<StepperItemChangeEventDetail>) => void;
+        /**
+          * Fires when the active `calcite-stepper-item` changes.
+         */
+        "onCalciteStepperItemSelect"?: (event: CalciteStepperItemCustomEvent<void>) => void;
         /**
           * Specifies the size of the component inherited from the `calcite-stepper`, defaults to `m`.
          */
diff --git a/packages/calcite-components/src/components/dropdown-group/dropdown-group.scss b/packages/calcite-components/src/components/dropdown-group/dropdown-group.scss
index a9c1e93c5d0..653ec780df9 100644
--- a/packages/calcite-components/src/components/dropdown-group/dropdown-group.scss
+++ b/packages/calcite-components/src/components/dropdown-group/dropdown-group.scss
@@ -4,28 +4,7 @@
 }
 
 .container {
-  text-align: start;
-}
-
-.container--s {
-  @apply text-n2h;
-  .dropdown-title {
-    @apply p-2;
-  }
-}
-
-.container--m {
-  @apply text-n1h;
-  .dropdown-title {
-    @apply p-3;
-  }
-}
-
-.container--l {
-  @apply text-0h;
-  .dropdown-title {
-    @apply p-4;
-  }
+  @apply text-start;
 }
 
 .dropdown-title {
@@ -46,4 +25,25 @@
   background-color: theme("borderColor.color.3");
 }
 
+:host([scale="s"]) {
+  @apply text-n2h;
+  .dropdown-title {
+    @apply p-2;
+  }
+}
+
+:host([scale="m"]) {
+  @apply text-n1h;
+  .dropdown-title {
+    @apply p-3;
+  }
+}
+
+:host([scale="l"]) {
+  @apply text-0h;
+  .dropdown-title {
+    @apply p-4;
+  }
+}
+
 @include base-component();
diff --git a/packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx b/packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx
index 527cee969ac..57fa3a977b8 100644
--- a/packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx
+++ b/packages/calcite-components/src/components/dropdown-group/dropdown-group.tsx
@@ -40,7 +40,7 @@ export class DropdownGroup {
    *
    * @internal
    */
-  @Prop() scale: Scale = "m";
+  @Prop({ reflect: true }) scale: Scale = "m";
 
   /**
    * Specifies the selection mode of the component, where:
@@ -104,7 +104,6 @@ export class DropdownGroup {
         <div
           class={{
             [CSS.container]: true,
-            [`${CSS.container}--${this.scale}`]: true,
           }}
         >
           {dropdownSeparator}
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.stories.ts b/packages/calcite-components/src/components/dropdown/dropdown.stories.ts
index 030f30bff7a..65f5eb1d76e 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.stories.ts
+++ b/packages/calcite-components/src/components/dropdown/dropdown.stories.ts
@@ -501,3 +501,44 @@ export const settingFullWidthEnablesTriggerTruncation_TestOnly = (): string =>
       </calcite-dropdown-group>
     </calcite-dropdown>
   </div>`;
+
+export const openInAllScales = (): string => html`
+  <style>
+    .container {
+      display: inline-flex;
+      flex-direction: column;
+      width: 10rem;
+      padding: 25px;
+      flex-basis: 200px;
+    }
+  </style>
+  <div class="container">
+    <calcite-dropdown scale="s" width-scale="s" open>
+      <calcite-button icon-end="hamburger" appearance="outline" slot="trigger">Scale S</calcite-button>
+      <calcite-dropdown-group group-title="View">
+        <calcite-dropdown-item icon-end="list-bullet" selected>List</calcite-dropdown-item>
+        <calcite-dropdown-item icon-end="grid">Grid</calcite-dropdown-item>
+      </calcite-dropdown-group>
+    </calcite-dropdown>
+  </div>
+
+  <div class="container">
+    <calcite-dropdown scale="m" width-scale="s" open>
+      <calcite-button icon-end="hamburger" appearance="outline" slot="trigger">Scale M</calcite-button>
+      <calcite-dropdown-group group-title="View">
+        <calcite-dropdown-item icon-end="list-bullet" selected>List</calcite-dropdown-item>
+        <calcite-dropdown-item icon-end="grid">Grid</calcite-dropdown-item>
+      </calcite-dropdown-group>
+    </calcite-dropdown>
+  </div>
+
+  <div class="container">
+    <calcite-dropdown scale="l" width-scale="s" open>
+      <calcite-button icon-end="hamburger" appearance="outline" slot="trigger">Scale L</calcite-button>
+      <calcite-dropdown-group group-title="View">
+        <calcite-dropdown-item icon-end="list-bullet" selected>List</calcite-dropdown-item>
+        <calcite-dropdown-item icon-end="grid">Grid</calcite-dropdown-item>
+      </calcite-dropdown-group>
+    </calcite-dropdown>
+  </div>
+`;
diff --git a/packages/calcite-components/src/components/dropdown/dropdown.tsx b/packages/calcite-components/src/components/dropdown/dropdown.tsx
index 0bdafee7237..5287df4b7b4 100644
--- a/packages/calcite-components/src/components/dropdown/dropdown.tsx
+++ b/packages/calcite-components/src/components/dropdown/dropdown.tsx
@@ -175,6 +175,7 @@ export class Dropdown
   @Watch("scale")
   handlePropsChange(): void {
     this.updateItems();
+    this.updateGroupScale();
   }
 
   //--------------------------------------------------------------------------
@@ -495,8 +496,13 @@ export class Dropdown
     this.groups = groups;
 
     this.updateItems();
+    this.updateGroupScale();
   };
 
+  private updateGroupScale(): void {
+    this.groups?.forEach((group) => (group.scale = this.scale));
+  }
+
   resizeObserverCallback = (entries: ResizeObserverEntry[]): void => {
     entries.forEach((entry) => {
       const { target } = entry;
diff --git a/packages/calcite-components/src/components/split-button/split-button.scss b/packages/calcite-components/src/components/split-button/split-button.scss
index e1532748113..ab7b85a5a91 100644
--- a/packages/calcite-components/src/components/split-button/split-button.scss
+++ b/packages/calcite-components/src/components/split-button/split-button.scss
@@ -15,55 +15,72 @@
 }
 
 :host([kind="brand"]) {
-  --calcite-split-button-background: theme("colors.brand");
-  --calcite-split-button-divider: theme("colors.background.foreground.1");
+  --calcite-internal-split-button-background: theme("colors.brand");
+  --calcite-internal-split-button-divider: theme("colors.background.foreground.1");
 }
 
 :host([kind="danger"]) {
-  --calcite-split-button-background: theme("colors.danger");
-  --calcite-split-button-divider: theme("colors.background.foreground.1");
+  --calcite-internal-split-button-background: theme("colors.danger");
+  --calcite-internal-split-button-divider: theme("colors.background.foreground.1");
 }
 
 :host([kind="neutral"]) {
-  --calcite-split-button-background: theme("colors.background.foreground.3");
-  --calcite-split-button-divider: theme("colors.color.1");
+  --calcite-internal-split-button-background: theme("colors.background.foreground.3");
+  --calcite-internal-split-button-divider: theme("colors.color.1");
 }
 
 :host([kind="inverse"]) {
-  --calcite-split-button-background: var(--calcite-color-inverse);
-  --calcite-split-button-divider: theme("colors.background.foreground.1");
+  --calcite-internal-split-button-background: var(--calcite-color-inverse);
+  --calcite-internal-split-button-divider: theme("colors.background.foreground.1");
 }
 
 :host([appearance="transparent"]) {
-  --calcite-split-button-background: transparent;
+  --calcite-internal-split-button-background: transparent;
   &:host([kind="brand"]) {
-    --calcite-split-button-divider: theme("colors.brand");
+    --calcite-internal-split-button-divider: theme("colors.brand");
   }
   &:host([kind="danger"]) {
-    --calcite-split-button-divider: theme("colors.danger");
+    --calcite-internal-split-button-divider: theme("colors.danger");
   }
   &:host([kind="neutral"]) {
-    --calcite-split-button-divider: theme("colors.color.1");
+    --calcite-internal-split-button-divider: theme("colors.color.1");
   }
   &:host([kind="inverse"]) {
-    --calcite-split-button-divider: theme("colors.background.foreground.1");
+    --calcite-internal-split-button-divider: theme("colors.background.foreground.1");
+  }
+}
+
+:host([appearance="outline"]) {
+  &:host([kind="brand"]),
+  &:host([kind="danger"]),
+  &:host([kind="neutral"]),
+  &:host([kind="inverse"]) {
+    --calcite-internal-split-button-background: transparent;
+  }
+}
+
+:host([appearance="outline-fill"]) {
+  &:host([kind="brand"]),
+  &:host([kind="danger"]),
+  &:host([kind="neutral"]),
+  &:host([kind="inverse"]) {
+    --calcite-internal-split-button-background: var(--calcite-color-background);
   }
 }
 
 :host([appearance="outline"]),
 :host([appearance="outline-fill"]) {
-  --calcite-split-button-background: transparent;
   &:host([kind="brand"]) {
-    --calcite-split-button-divider: theme("colors.brand");
+    --calcite-internal-split-button-divider: theme("colors.brand");
   }
   &:host([kind="danger"]) {
-    --calcite-split-button-divider: theme("colors.danger");
+    --calcite-internal-split-button-divider: theme("colors.danger");
   }
   &:host([kind="neutral"]) {
-    --calcite-split-button-divider: theme("borderColor.color.1");
+    --calcite-internal-split-button-divider: theme("borderColor.color.1");
   }
   &:host([kind="inverse"]) {
-    --calcite-split-button-divider: var(--calcite-color-inverse);
+    --calcite-internal-split-button-divider: var(--calcite-color-inverse);
   }
 }
 
@@ -76,41 +93,41 @@
 
 .divider-container {
   @apply transition-default flex w-px items-stretch;
-  background-color: var(--calcite-split-button-background);
+  background-color: var(--calcite-internal-split-button-background);
 }
 
 .divider {
   @apply my-1 inline-block w-px;
-  background-color: var(--calcite-split-button-divider);
+  background-color: var(--calcite-internal-split-button-divider);
 }
 
 :host([appearance="outline-fill"]),
 :host([appearance="outline"]) {
   .divider-container {
-    border-block: 1px solid var(--calcite-split-button-divider);
+    border-block: 1px solid var(--calcite-internal-split-button-divider);
   }
   &:hover .divider-container {
-    background-color: var(--calcite-split-button-divider);
+    background-color: var(--calcite-internal-split-button-divider);
   }
 }
 
 :host([appearance="outline-fill"]:hover),
 :host([appearance="outline"]:hover) {
   .divider-container {
-    background-color: var(--calcite-split-button-divider);
+    background-color: var(--calcite-internal-split-button-divider);
   }
 }
 
 :host([appearance="outline-fill"]:focus-within),
 :host([appearance="outline"]:focus-within) {
   &:host([kind="brand"]) {
-    --calcite-split-button-divider: theme("colors.brand-press");
+    --calcite-internal-split-button-divider: theme("colors.brand-press");
   }
   &:host([kind="danger"]) {
-    --calcite-split-button-divider: theme("colors.danger-press");
+    --calcite-internal-split-button-divider: theme("colors.danger-press");
   }
   .divider-container {
-    background-color: var(--calcite-split-button-divider);
+    background-color: var(--calcite-internal-split-button-divider);
   }
 }
 
@@ -118,6 +135,12 @@
   calcite-dropdown > calcite-button {
     @apply pointer-events-none;
   }
+  &:host([appearance="outline-fill"]) .divider-container {
+    background-color: var(--calcite-color-background);
+  }
+  &:host([appearance="outline"]) .divider-container {
+    background-color: transparent;
+  }
 }
 
 @include base-component();
diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.e2e.ts b/packages/calcite-components/src/components/stepper-item/stepper-item.e2e.ts
index 36e046d267d..3985048a427 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.e2e.ts
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.e2e.ts
@@ -1,4 +1,6 @@
+import { newE2EPage } from "@stencil/core/testing";
 import { disabled, renders, hidden, t9n } from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
 
 describe("calcite-stepper-item", () => {
   describe("renders", () => {
@@ -14,6 +16,24 @@ describe("calcite-stepper-item", () => {
   });
 
   describe("translation support", () => {
-    t9n(`<calcite-stepper-item heading="Step 1" id="step-1"></calcite-stepper-item>`);
+    t9n(html`<calcite-stepper-item heading="Step 1" id="step-1"></calcite-stepper-item>`);
+  });
+
+  it("emits selection event on user interaction", async () => {
+    const page = await newE2EPage();
+    await page.setContent(html`<calcite-stepper-item heading="heading"></calcite-stepper-item>`);
+    const stepperItem = await page.find("calcite-stepper-item");
+    const stepperItemSelect = await page.spyOnEvent("calciteStepperItemSelect");
+
+    await stepperItem.setProperty("selected", true);
+    await page.waitForChanges();
+    expect(stepperItemSelect).toHaveReceivedEventTimes(0);
+
+    await stepperItem.setProperty("selected", false);
+    await page.waitForChanges();
+    expect(stepperItemSelect).toHaveReceivedEventTimes(0);
+
+    await stepperItem.click();
+    expect(stepperItemSelect).toHaveReceivedEventTimes(1);
   });
 });
diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
index 35d65c8f155..111a53af12f 100644
--- a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
+++ b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
@@ -199,13 +199,12 @@ export class StepperItem
    * @internal
    */
   @Event({ cancelable: false })
-  calciteInternalUserRequestedStepperItemSelect: EventEmitter<StepperItemChangeEventDetail>;
+  calciteInternalStepperItemRegister: EventEmitter<StepperItemEventDetail>;
 
   /**
-   * @internal
+   * Fires when the active `calcite-stepper-item` changes.
    */
-  @Event({ cancelable: false })
-  calciteInternalStepperItemRegister: EventEmitter<StepperItemEventDetail>;
+  @Event({ cancelable: false }) calciteStepperItemSelect: EventEmitter<void>;
 
   //--------------------------------------------------------------------------
   //
@@ -404,11 +403,7 @@ export class StepperItem
   private emitUserRequestedItem = (): void => {
     this.emitRequestedItem();
     if (!this.disabled) {
-      const position = this.itemPosition;
-
-      this.calciteInternalUserRequestedStepperItemSelect.emit({
-        position,
-      });
+      this.calciteStepperItemSelect.emit();
     }
   };
 
diff --git a/packages/calcite-components/src/components/stepper/stepper.e2e.ts b/packages/calcite-components/src/components/stepper/stepper.e2e.ts
index eb98a603571..4c8dad75f2b 100644
--- a/packages/calcite-components/src/components/stepper/stepper.e2e.ts
+++ b/packages/calcite-components/src/components/stepper/stepper.e2e.ts
@@ -501,12 +501,13 @@ describe("calcite-stepper", () => {
     });
   });
 
-  describe("should emit calciteStepperItemChange on user interaction", () => {
+  describe("should emit calciteStepperChange/calciteStepperItemChange on user interaction", () => {
     let layout: HTMLCalciteStepperElement["layout"];
 
     async function assertEmitting(page: E2EPage, hasContent: boolean): Promise<void> {
       const element = await page.find("calcite-stepper");
-      const eventSpy = await element.spyOnEvent("calciteStepperItemChange");
+      const itemChangeSpy = await element.spyOnEvent("calciteStepperItemChange");
+      const changeSpy = await element.spyOnEvent("calciteStepperChange");
       const firstItem = await page.find("#step-1");
 
       const getSelectedItemId = async (): Promise<string> => {
@@ -520,10 +521,12 @@ describe("calcite-stepper", () => {
       // non user interaction
       firstItem.setProperty("selected", true);
       await page.waitForChanges();
-      expect(eventSpy).toHaveReceivedEventTimes(expectedEvents);
+      expect(itemChangeSpy).toHaveReceivedEventTimes(expectedEvents);
+      expect(changeSpy).toHaveReceivedEventTimes(expectedEvents);
 
       await page.$eval("#step-2", itemClicker);
-      expect(eventSpy).toHaveReceivedEventTimes(++expectedEvents);
+      expect(itemChangeSpy).toHaveReceivedEventTimes(++expectedEvents);
+      expect(changeSpy).toHaveReceivedEventTimes(expectedEvents);
       expect(await getSelectedItemId()).toBe("step-2");
 
       if (hasContent) {
@@ -532,29 +535,35 @@ describe("calcite-stepper", () => {
         );
 
         if (layout === "vertical") {
-          expect(eventSpy).toHaveReceivedEventTimes(++expectedEvents);
+          expect(itemChangeSpy).toHaveReceivedEventTimes(++expectedEvents);
+          expect(changeSpy).toHaveReceivedEventTimes(expectedEvents);
           expect(await getSelectedItemId()).toBe("step-1");
         } else {
           // no events since horizontal layout moves content outside of item selection hit area
-          expect(eventSpy).toHaveReceivedEventTimes(expectedEvents);
+          expect(itemChangeSpy).toHaveReceivedEventTimes(expectedEvents);
+          expect(changeSpy).toHaveReceivedEventTimes(expectedEvents);
         }
       }
 
       // disabled item
       await page.$eval("#step-3", itemClicker);
-      expect(eventSpy).toHaveReceivedEventTimes(expectedEvents);
+      expect(itemChangeSpy).toHaveReceivedEventTimes(expectedEvents);
+      expect(changeSpy).toHaveReceivedEventTimes(expectedEvents);
 
       await page.$eval("#step-4", itemClicker);
-      expect(eventSpy).toHaveReceivedEventTimes(++expectedEvents);
+      expect(itemChangeSpy).toHaveReceivedEventTimes(++expectedEvents);
+      expect(changeSpy).toHaveReceivedEventTimes(expectedEvents);
       expect(await getSelectedItemId()).toBe("step-4");
 
       await element.callMethod("prevStep");
       await page.waitForChanges();
-      expect(eventSpy).toHaveReceivedEventTimes(expectedEvents);
+      expect(itemChangeSpy).toHaveReceivedEventTimes(expectedEvents);
+      expect(changeSpy).toHaveReceivedEventTimes(expectedEvents);
 
       await element.callMethod("nextStep");
       await page.waitForChanges();
-      expect(eventSpy).toHaveReceivedEventTimes(expectedEvents);
+      expect(itemChangeSpy).toHaveReceivedEventTimes(expectedEvents);
+      expect(changeSpy).toHaveReceivedEventTimes(expectedEvents);
     }
 
     describe("horizontal layout", () => {
@@ -837,26 +846,28 @@ describe("calcite-stepper", () => {
 
       const stepper = await page.find("calcite-stepper");
       const [actionStart, actionEnd] = await page.findAll("calcite-stepper >>> calcite-action");
-      const eventSpy = await stepper.spyOnEvent("calciteStepperItemChange");
-      expect(eventSpy).toHaveReceivedEventTimes(0);
+      const changeSpy = await stepper.spyOnEvent("calciteStepperChange");
+      const itemChangeSpy = await stepper.spyOnEvent("calciteStepperItemChange");
+      expect(changeSpy).toHaveReceivedEventTimes(0);
+      expect(itemChangeSpy).toHaveReceivedEventTimes(0);
 
       // shouldn't emit change event when disabled element is visible
       await actionEnd.click();
-      await page.waitForChanges();
-      expect(eventSpy).toHaveReceivedEventTimes(0);
+      expect(changeSpy).toHaveReceivedEventTimes(0);
+      expect(itemChangeSpy).toHaveReceivedEventTimes(0);
 
       await actionEnd.click();
-      await page.waitForChanges();
-      expect(eventSpy).toHaveReceivedEventTimes(1);
+      expect(changeSpy).toHaveReceivedEventTimes(1);
+      expect(itemChangeSpy).toHaveReceivedEventTimes(1);
 
       // shouldn't emit change event when disabled element is visible
       await actionStart.click();
-      await page.waitForChanges();
-      expect(eventSpy).toHaveReceivedEventTimes(1);
+      expect(changeSpy).toHaveReceivedEventTimes(1);
+      expect(itemChangeSpy).toHaveReceivedEventTimes(1);
 
       await actionStart.click();
-      await page.waitForChanges();
-      expect(eventSpy).toHaveReceivedEventTimes(2);
+      expect(changeSpy).toHaveReceivedEventTimes(2);
+      expect(itemChangeSpy).toHaveReceivedEventTimes(2);
     });
 
     it(`switching to layout="horizontal-single" dynamically from another option should display a single item (#8931)`, async () => {
diff --git a/packages/calcite-components/src/components/stepper/stepper.tsx b/packages/calcite-components/src/components/stepper/stepper.tsx
index c173138ee42..1f2748bda8c 100644
--- a/packages/calcite-components/src/components/stepper/stepper.tsx
+++ b/packages/calcite-components/src/components/stepper/stepper.tsx
@@ -122,6 +122,13 @@ export class Stepper implements LocalizedComponent, T9nComponent {
    * Fires when the active `calcite-stepper-item` changes.
    *
    */
+  @Event({ cancelable: false }) calciteStepperChange: EventEmitter<void>;
+
+  /**
+   * Fires when the active `calcite-stepper-item` changes.
+   *
+   * @deprecated use `calciteStepperChange` instead or `calciteStepperItemChange` on items instead.
+   */
   @Event({ cancelable: false }) calciteStepperItemChange: EventEmitter<void>;
 
   /**
@@ -255,9 +262,9 @@ export class Stepper implements LocalizedComponent, T9nComponent {
     });
   }
 
-  @Listen("calciteInternalUserRequestedStepperItemSelect")
-  handleUserRequestedStepperItemSelect(): void {
-    this.calciteStepperItemChange.emit();
+  @Listen("calciteStepperItemSelect")
+  handleItemSelect(): void {
+    this.emitItemSelect();
   }
 
   //--------------------------------------------------------------------------
@@ -375,6 +382,11 @@ export class Stepper implements LocalizedComponent, T9nComponent {
   //
   //--------------------------------------------------------------------------
 
+  private emitItemSelect(): void {
+    this.calciteStepperItemChange.emit();
+    this.calciteStepperChange.emit();
+  }
+
   private updateItems(): void {
     this.el.querySelectorAll("calcite-stepper-item").forEach((item) => {
       item.icon = this.icon;
@@ -477,7 +489,7 @@ export class Stepper implements LocalizedComponent, T9nComponent {
       currentActivePosition !== this.currentActivePosition &&
       !this.items[this.currentActivePosition].disabled
     ) {
-      this.calciteStepperItemChange.emit();
+      this.emitItemSelect();
     }
   };
 
diff --git a/packages/calcite-components/src/components/tree-item/tree-item.tsx b/packages/calcite-components/src/components/tree-item/tree-item.tsx
index 1c7e2fa8753..c5284322ef8 100644
--- a/packages/calcite-components/src/components/tree-item/tree-item.tsx
+++ b/packages/calcite-components/src/components/tree-item/tree-item.tsx
@@ -201,7 +201,10 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
 
   render(): VNode {
     const rtl = getElementDir(this.el) === "rtl";
-    const showBulletPoint = this.selectionMode === "single" || this.selectionMode === "children";
+    const showBulletPoint =
+      this.selectionMode === "single" ||
+      this.selectionMode === "children" ||
+      this.selectionMode === "single-persist";
     const showCheckmark =
       this.selectionMode === "multiple" || this.selectionMode === "multichildren";
     const showBlank = this.selectionMode === "none" && !this.hasChildren;
diff --git a/packages/calcite-components/src/components/tree/tree.e2e.ts b/packages/calcite-components/src/components/tree/tree.e2e.ts
index 6d90c958c5b..d35e260ee06 100644
--- a/packages/calcite-components/src/components/tree/tree.e2e.ts
+++ b/packages/calcite-components/src/components/tree/tree.e2e.ts
@@ -1348,5 +1348,36 @@ describe("calcite-tree", () => {
       await directItemClick(page, gc1);
       expect(await tree.getProperty("selectedItems")).toHaveLength(0);
     });
+
+    it("single-persist allows only one selection", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`
+        <calcite-tree selection-mode="single-persist">
+          <calcite-tree-item id="child1">Child 1</calcite-tree-item>
+          <calcite-tree-item id="sub1">
+            Child 2
+            <calcite-tree slot="children" selection-mode="single-persist">
+              <calcite-tree-item id="gc1">Grandchild 1</calcite-tree-item>
+              <calcite-tree-item>Grandchild 2</calcite-tree-item>
+            </calcite-tree>
+          </calcite-tree-item>
+        </calcite-tree>
+      `);
+      const tree = await page.find("calcite-tree");
+      expect(await tree.getProperty("selectedItems")).toHaveLength(0);
+      const child1 = await page.find("#child1");
+      await directItemClick(page, child1);
+      expect(await tree.getProperty("selectedItems")).toHaveLength(1);
+      await directItemClick(page, child1);
+      expect(await tree.getProperty("selectedItems")).toHaveLength(1);
+      const sub1 = await page.find("#sub1");
+      await directItemClick(page, sub1);
+      expect(await tree.getProperty("selectedItems")).toHaveLength(1);
+      const gc1 = await page.find("#gc1");
+      await directItemClick(page, gc1);
+      expect(await tree.getProperty("selectedItems")).toHaveLength(1);
+      await directItemClick(page, gc1);
+      expect(await tree.getProperty("selectedItems")).toHaveLength(1);
+    });
   });
 });
diff --git a/packages/calcite-components/src/components/tree/tree.stories.ts b/packages/calcite-components/src/components/tree/tree.stories.ts
index 4c6ecaa5722..487bf5842f0 100644
--- a/packages/calcite-components/src/components/tree/tree.stories.ts
+++ b/packages/calcite-components/src/components/tree/tree.stories.ts
@@ -42,7 +42,7 @@ const treeItems = html`
 const slottedLargeDropdown = html`
   <calcite-dropdown slot="actions-end" id="slottedLargeDropdown" scale="l">
     <calcite-action slot="trigger" icon="ellipsis" scale="l"></calcite-action>
-    <calcite-dropdown-group group-title="Settings" selection-mode="multi">
+    <calcite-dropdown-group group-title="Settings" selection-mode="multiple">
       <calcite-dropdown-item>Group elements</calcite-dropdown-item>
     </calcite-dropdown-group>
     <calcite-dropdown-group group-title="Display mode" selection-mode="single">
@@ -55,7 +55,7 @@ const slottedLargeDropdown = html`
 const slottedDefaultDropdown = html`
   <calcite-dropdown slot="actions-end" id="slottedDefaultDropdown">
     <calcite-action slot="trigger" icon="ellipsis"></calcite-action>
-    <calcite-dropdown-group group-title="Settings" selection-mode="multi">
+    <calcite-dropdown-group group-title="Settings" selection-mode="multiple">
       <calcite-dropdown-item>Group elements</calcite-dropdown-item>
     </calcite-dropdown-group>
     <calcite-dropdown-group group-title="Display mode" selection-mode="single">
@@ -68,7 +68,7 @@ const slottedDefaultDropdown = html`
 const slottedSmallDropdown = html`
   <calcite-dropdown slot="actions-end" id="slottedDefaultDropdown" scale="s">
     <calcite-action slot="trigger" icon="ellipsis" scale="s"></calcite-action>
-    <calcite-dropdown-group group-title="Settings" selection-mode="multi">
+    <calcite-dropdown-group group-title="Settings" selection-mode="multiple">
       <calcite-dropdown-item>Group elements</calcite-dropdown-item>
     </calcite-dropdown-group>
     <calcite-dropdown-group group-title="Display mode" selection-mode="single">
@@ -161,7 +161,7 @@ export default {
   },
 };
 
-const selectionModes = ["single", "children", "multichildren", "ancestors", "none", "multiple"];
+const selectionModes = ["single", "single-persist", "children", "multichildren", "ancestors", "none", "multiple"];
 
 export const simple = (): string => html`
   <calcite-tree
diff --git a/packages/calcite-components/src/components/tree/tree.tsx b/packages/calcite-components/src/components/tree/tree.tsx
index 29d7773aeaa..530cac5fda6 100644
--- a/packages/calcite-components/src/components/tree/tree.tsx
+++ b/packages/calcite-components/src/components/tree/tree.tsx
@@ -175,7 +175,8 @@ export class Tree {
       (((this.selectionMode === "single" || this.selectionMode === "multiple") &&
         childItems.length <= 0) ||
         this.selectionMode === "children" ||
-        this.selectionMode === "multichildren");
+        this.selectionMode === "multichildren" ||
+        (this.selectionMode === "single-persist" && !target.hasChildren));
 
     const shouldUpdateExpand =
       ["multiple", "none", "single", "single-persist"].includes(this.selectionMode) &&
diff --git a/packages/calcite-components/src/demos/split-button.html b/packages/calcite-components/src/demos/split-button.html
index 9a99363b166..e9f7431cca8 100644
--- a/packages/calcite-components/src/demos/split-button.html
+++ b/packages/calcite-components/src/demos/split-button.html
@@ -2842,6 +2842,1002 @@
         </div>
       </div>
 
+      <hr />
+
+      <!--
+      **************************************************
+      * OUTLINE FILL
+      **************************************************
+    -->
+      <div class="parent-flex">
+        <div class="child-flex right-aligned-text">Outline Fill Brand</div>
+
+        <!-- default -->
+        <div class="child-flex">
+          <calcite-split-button appearance="outline-fill" scale="s" primary-text="Button">
+            <calcite-dropdown-group selection-mode="none">
+              <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+            </calcite-dropdown-group>
+          </calcite-split-button>
+
+          <p>
+            <calcite-split-button appearance="outline-fill" scale="m" primary-text="Button">
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+
+          <p>
+            <calcite-split-button appearance="outline-fill" scale="l" primary-text="Button">
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+        </div>
+
+        <!-- disabled -->
+        <div class="child-flex">
+          <calcite-split-button disabled appearance="outline-fill" scale="s" primary-text="Button">
+            <calcite-dropdown-group selection-mode="none">
+              <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+            </calcite-dropdown-group>
+          </calcite-split-button>
+
+          <p>
+            <calcite-split-button disabled appearance="outline-fill" scale="m" primary-text="Button">
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+
+          <p>
+            <calcite-split-button disabled appearance="outline-fill" scale="l" primary-text="Button">
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+        </div>
+
+        <!-- loading -->
+        <div class="child-flex">
+          <calcite-split-button loading appearance="outline-fill" scale="s" primary-text="Button">
+            <calcite-dropdown-group selection-mode="none">
+              <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+            </calcite-dropdown-group>
+          </calcite-split-button>
+
+          <p>
+            <calcite-split-button loading appearance="outline-fill" scale="m" primary-text="Button">
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+
+          <p>
+            <calcite-split-button loading appearance="outline-fill" scale="l" primary-text="Button">
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+        </div>
+
+        <!-- icon-start -->
+        <div class="child-flex">
+          <calcite-split-button
+            primary-icon-start="i2DExplore"
+            appearance="outline-fill"
+            scale="s"
+            primary-text="Button"
+          >
+            <calcite-dropdown-group selection-mode="none">
+              <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+            </calcite-dropdown-group>
+          </calcite-split-button>
+
+          <p>
+            <calcite-split-button
+              primary-icon-start="i2DExplore"
+              appearance="outline-fill"
+              scale="m"
+              primary-text="Button"
+            >
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+
+          <p>
+            <calcite-split-button
+              primary-icon-start="i2DExplore"
+              appearance="outline-fill"
+              scale="l"
+              primary-text="Button"
+            >
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+        </div>
+
+        <!-- icon-end -->
+        <div class="child-flex">
+          <calcite-split-button primary-icon-end="i2DExplore" appearance="outline-fill" scale="s" primary-text="Button">
+            <calcite-dropdown-group selection-mode="none">
+              <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+            </calcite-dropdown-group>
+          </calcite-split-button>
+
+          <p>
+            <calcite-split-button
+              primary-icon-end="i2DExplore"
+              appearance="outline-fill"
+              scale="m"
+              primary-text="Button"
+            >
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+
+          <p>
+            <calcite-split-button
+              primary-icon-end="i2DExplore"
+              appearance="outline-fill"
+              scale="l"
+              primary-text="Button"
+            >
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+        </div>
+
+        <!-- icon-start & icon-end -->
+        <div class="child-flex">
+          <calcite-split-button
+            primary-icon-start="i2DExplore"
+            primary-icon-end="i2DExplore"
+            appearance="outline-fill"
+            scale="s"
+            primary-text="Button"
+          >
+            <calcite-dropdown-group selection-mode="none">
+              <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+            </calcite-dropdown-group>
+          </calcite-split-button>
+
+          <p>
+            <calcite-split-button
+              primary-icon-start="i2DExplore"
+              primary-icon-end="i2DExplore"
+              appearance="outline-fill"
+              scale="m"
+              primary-text="Button"
+            >
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+
+          <p>
+            <calcite-split-button
+              primary-icon-start="i2DExplore"
+              primary-icon-end="i2DExplore"
+              appearance="outline-fill"
+              scale="l"
+              primary-text="Button"
+            >
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+        </div>
+      </div>
+
+      <!--
+      **************************************************
+      * OUTLINE NEUTRAL
+      **************************************************
+    -->
+      <div class="parent-flex">
+        <div class="child-flex right-aligned-text">Outline Fill Neutral</div>
+
+        <!-- default -->
+        <div class="child-flex">
+          <calcite-split-button kind="neutral" appearance="outline-fill" scale="s" primary-text="Button">
+            <calcite-dropdown-group selection-mode="none">
+              <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+            </calcite-dropdown-group>
+          </calcite-split-button>
+
+          <p>
+            <calcite-split-button kind="neutral" appearance="outline-fill" scale="m" primary-text="Button">
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+
+          <p>
+            <calcite-split-button kind="neutral" appearance="outline-fill" scale="l" primary-text="Button">
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+        </div>
+
+        <!-- disabled -->
+        <div class="child-flex">
+          <calcite-split-button disabled kind="neutral" appearance="outline-fill" scale="s" primary-text="Button">
+            <calcite-dropdown-group selection-mode="none">
+              <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+            </calcite-dropdown-group>
+          </calcite-split-button>
+
+          <p>
+            <calcite-split-button disabled kind="neutral" appearance="outline-fill" scale="m" primary-text="Button">
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+
+          <p>
+            <calcite-split-button disabled kind="neutral" appearance="outline-fill" scale="l" primary-text="Button">
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+        </div>
+
+        <!-- loading -->
+        <div class="child-flex">
+          <calcite-split-button loading kind="neutral" appearance="outline-fill" scale="s" primary-text="Button">
+            <calcite-dropdown-group selection-mode="none">
+              <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+            </calcite-dropdown-group>
+          </calcite-split-button>
+
+          <p>
+            <calcite-split-button loading kind="neutral" appearance="outline-fill" scale="m" primary-text="Button">
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+
+          <p>
+            <calcite-split-button loading kind="neutral" appearance="outline-fill" scale="l" primary-text="Button">
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+        </div>
+
+        <!-- icon-start -->
+        <div class="child-flex">
+          <calcite-split-button
+            primary-icon-start="i2DExplore"
+            kind="neutral"
+            appearance="outline-fill"
+            scale="s"
+            primary-text="Button"
+          >
+            <calcite-dropdown-group selection-mode="none">
+              <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+            </calcite-dropdown-group>
+          </calcite-split-button>
+
+          <p>
+            <calcite-split-button
+              primary-icon-start="i2DExplore"
+              kind="neutral"
+              appearance="outline-fill"
+              scale="m"
+              primary-text="Button"
+            >
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+
+          <p>
+            <calcite-split-button
+              primary-icon-start="i2DExplore"
+              kind="neutral"
+              appearance="outline-fill"
+              scale="l"
+              primary-text="Button"
+            >
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+        </div>
+
+        <!-- icon-end -->
+        <div class="child-flex">
+          <calcite-split-button
+            primary-icon-end="i2DExplore"
+            kind="neutral"
+            appearance="outline-fill"
+            scale="s"
+            primary-text="Button"
+          >
+            <calcite-dropdown-group selection-mode="none">
+              <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+            </calcite-dropdown-group>
+          </calcite-split-button>
+
+          <p>
+            <calcite-split-button
+              primary-icon-end="i2DExplore"
+              kind="neutral"
+              appearance="outline-fill"
+              scale="m"
+              primary-text="Button"
+            >
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+
+          <p>
+            <calcite-split-button
+              primary-icon-end="i2DExplore"
+              kind="neutral"
+              appearance="outline-fill"
+              scale="l"
+              primary-text="Button"
+            >
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+        </div>
+
+        <!-- icon-start & icon-end -->
+        <div class="child-flex">
+          <calcite-split-button
+            primary-icon-start="i2DExplore"
+            primary-icon-end="i2DExplore"
+            kind="neutral"
+            appearance="outline-fill"
+            scale="s"
+            primary-text="Button"
+          >
+            <calcite-dropdown-group selection-mode="none">
+              <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+            </calcite-dropdown-group>
+          </calcite-split-button>
+
+          <p>
+            <calcite-split-button
+              primary-icon-start="i2DExplore"
+              primary-icon-end="i2DExplore"
+              kind="neutral"
+              appearance="outline-fill"
+              scale="m"
+              primary-text="Button"
+            >
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+
+          <p>
+            <calcite-split-button
+              primary-icon-start="i2DExplore"
+              primary-icon-end="i2DExplore"
+              kind="neutral"
+              appearance="outline-fill"
+              scale="l"
+              primary-text="Button"
+            >
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+        </div>
+      </div>
+
+      <!--
+      **************************************************
+      * OUTLINE INVERSE
+      **************************************************
+    -->
+      <div class="parent-flex">
+        <div class="child-flex right-aligned-text">Outline Inverse</div>
+
+        <!-- default -->
+        <div class="child-flex">
+          <calcite-split-button kind="inverse" appearance="outline-fill" scale="s" primary-text="Button">
+            <calcite-dropdown-group selection-mode="none">
+              <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+            </calcite-dropdown-group>
+          </calcite-split-button>
+
+          <p>
+            <calcite-split-button kind="inverse" appearance="outline-fill" scale="m" primary-text="Button">
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+
+          <p>
+            <calcite-split-button kind="inverse" appearance="outline-fill" scale="l" primary-text="Button">
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+        </div>
+
+        <!-- disabled -->
+        <div class="child-flex">
+          <calcite-split-button disabled kind="inverse" appearance="outline-fill" scale="s" primary-text="Button">
+            <calcite-dropdown-group selection-mode="none">
+              <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+            </calcite-dropdown-group>
+          </calcite-split-button>
+
+          <p>
+            <calcite-split-button disabled kind="inverse" appearance="outline-fill" scale="m" primary-text="Button">
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+
+          <p>
+            <calcite-split-button disabled kind="inverse" appearance="outline-fill" scale="l" primary-text="Button">
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+        </div>
+
+        <!-- loading -->
+        <div class="child-flex">
+          <calcite-split-button loading kind="inverse" appearance="outline-fill" scale="s" primary-text="Button">
+            <calcite-dropdown-group selection-mode="none">
+              <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+            </calcite-dropdown-group>
+          </calcite-split-button>
+
+          <p>
+            <calcite-split-button loading kind="inverse" appearance="outline-fill" scale="m" primary-text="Button">
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+
+          <p>
+            <calcite-split-button loading kind="inverse" appearance="outline-fill" scale="l" primary-text="Button">
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+        </div>
+
+        <!-- icon-start -->
+        <div class="child-flex">
+          <calcite-split-button
+            primary-icon-start="i2DExplore"
+            kind="inverse"
+            appearance="outline-fill"
+            scale="s"
+            primary-text="Button"
+          >
+            <calcite-dropdown-group selection-mode="none">
+              <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+            </calcite-dropdown-group>
+          </calcite-split-button>
+
+          <p>
+            <calcite-split-button
+              primary-icon-start="i2DExplore"
+              kind="inverse"
+              appearance="outline-fill"
+              scale="m"
+              primary-text="Button"
+            >
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+
+          <p>
+            <calcite-split-button
+              primary-icon-start="i2DExplore"
+              kind="inverse"
+              appearance="outline-fill"
+              scale="l"
+              primary-text="Button"
+            >
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+        </div>
+
+        <!-- icon-end -->
+        <div class="child-flex">
+          <calcite-split-button
+            primary-icon-end="i2DExplore"
+            kind="inverse"
+            appearance="outline-fill"
+            scale="s"
+            primary-text="Button"
+          >
+            <calcite-dropdown-group selection-mode="none">
+              <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+            </calcite-dropdown-group>
+          </calcite-split-button>
+
+          <p>
+            <calcite-split-button
+              primary-icon-end="i2DExplore"
+              kind="inverse"
+              appearance="outline-fill"
+              scale="m"
+              primary-text="Button"
+            >
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+
+          <p>
+            <calcite-split-button
+              primary-icon-end="i2DExplore"
+              kind="inverse"
+              appearance="outline-fill"
+              scale="l"
+              primary-text="Button"
+            >
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+        </div>
+
+        <!-- icon-start & icon-end -->
+        <div class="child-flex">
+          <calcite-split-button
+            primary-icon-start="i2DExplore"
+            primary-icon-end="i2DExplore"
+            kind="inverse"
+            appearance="outline-fill"
+            scale="s"
+            primary-text="Button"
+          >
+            <calcite-dropdown-group selection-mode="none">
+              <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+            </calcite-dropdown-group>
+          </calcite-split-button>
+
+          <p>
+            <calcite-split-button
+              primary-icon-start="i2DExplore"
+              primary-icon-end="i2DExplore"
+              kind="inverse"
+              appearance="outline-fill"
+              scale="m"
+              primary-text="Button"
+            >
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+
+          <p>
+            <calcite-split-button
+              primary-icon-start="i2DExplore"
+              primary-icon-end="i2DExplore"
+              kind="inverse"
+              appearance="outline-fill"
+              scale="l"
+              primary-text="Button"
+            >
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+        </div>
+      </div>
+
+      <!--
+      **************************************************
+      * OUTLINE DANGER
+      **************************************************
+    -->
+      <div class="parent-flex">
+        <div class="child-flex right-aligned-text">Outline Fill Danger</div>
+
+        <!-- default -->
+        <div class="child-flex">
+          <calcite-split-button kind="danger" appearance="outline-fill" scale="s" primary-text="Button">
+            <calcite-dropdown-group selection-mode="none">
+              <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+            </calcite-dropdown-group>
+          </calcite-split-button>
+
+          <p>
+            <calcite-split-button kind="danger" appearance="outline-fill" scale="m" primary-text="Button">
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+
+          <p>
+            <calcite-split-button kind="danger" appearance="outline-fill" scale="l" primary-text="Button">
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+        </div>
+
+        <!-- disabled -->
+        <div class="child-flex">
+          <calcite-split-button disabled kind="danger" appearance="outline-fill" scale="s" primary-text="Button">
+            <calcite-dropdown-group selection-mode="none">
+              <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+            </calcite-dropdown-group>
+          </calcite-split-button>
+
+          <p>
+            <calcite-split-button disabled kind="danger" appearance="outline-fill" scale="m" primary-text="Button">
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+
+          <p>
+            <calcite-split-button disabled kind="danger" appearance="outline-fill" scale="l" primary-text="Button">
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+        </div>
+
+        <!-- loading -->
+        <div class="child-flex">
+          <calcite-split-button loading kind="danger" appearance="outline-fill" scale="s" primary-text="Button">
+            <calcite-dropdown-group selection-mode="none">
+              <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+            </calcite-dropdown-group>
+          </calcite-split-button>
+
+          <p>
+            <calcite-split-button loading kind="danger" appearance="outline-fill" scale="m" primary-text="Button">
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+
+          <p>
+            <calcite-split-button loading kind="danger" appearance="outline-fill" scale="l" primary-text="Button">
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+        </div>
+
+        <!-- icon-start -->
+        <div class="child-flex">
+          <calcite-split-button
+            primary-icon-start="i2DExplore"
+            kind="danger"
+            appearance="outline-fill"
+            scale="s"
+            primary-text="Button"
+          >
+            <calcite-dropdown-group selection-mode="none">
+              <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+            </calcite-dropdown-group>
+          </calcite-split-button>
+
+          <p>
+            <calcite-split-button
+              primary-icon-start="i2DExplore"
+              kind="danger"
+              appearance="outline-fill"
+              scale="m"
+              primary-text="Button"
+            >
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+
+          <p>
+            <calcite-split-button
+              primary-icon-start="i2DExplore"
+              kind="danger"
+              appearance="outline-fill"
+              scale="l"
+              primary-text="Button"
+            >
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+        </div>
+
+        <!-- icon-end -->
+        <div class="child-flex">
+          <calcite-split-button
+            primary-icon-end="i2DExplore"
+            kind="danger"
+            appearance="outline-fill"
+            scale="s"
+            primary-text="Button"
+          >
+            <calcite-dropdown-group selection-mode="none">
+              <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+            </calcite-dropdown-group>
+          </calcite-split-button>
+
+          <p>
+            <calcite-split-button
+              primary-icon-end="i2DExplore"
+              kind="danger"
+              appearance="outline-fill"
+              scale="m"
+              primary-text="Button"
+            >
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+
+          <p>
+            <calcite-split-button
+              primary-icon-end="i2DExplore"
+              kind="danger"
+              appearance="outline-fill"
+              scale="l"
+              primary-text="Button"
+            >
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+        </div>
+
+        <!-- icon-start & icon-end -->
+        <div class="child-flex">
+          <calcite-split-button
+            primary-icon-start="i2DExplore"
+            primary-icon-end="i2DExplore"
+            kind="danger"
+            appearance="outline-fill"
+            scale="s"
+            primary-text="Button"
+          >
+            <calcite-dropdown-group selection-mode="none">
+              <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+              <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+            </calcite-dropdown-group>
+          </calcite-split-button>
+
+          <p>
+            <calcite-split-button
+              primary-icon-start="i2DExplore"
+              primary-icon-end="i2DExplore"
+              kind="danger"
+              appearance="outline-fill"
+              scale="m"
+              primary-text="Button"
+            >
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+
+          <p>
+            <calcite-split-button
+              primary-icon-start="i2DExplore"
+              primary-icon-end="i2DExplore"
+              kind="danger"
+              appearance="outline-fill"
+              scale="l"
+              primary-text="Button"
+            >
+              <calcite-dropdown-group selection-mode="none">
+                <calcite-dropdown-item>Option 2</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 3</calcite-dropdown-item>
+                <calcite-dropdown-item>Option 4</calcite-dropdown-item>
+              </calcite-dropdown-group>
+            </calcite-split-button>
+          </p>
+        </div>
+      </div>
+
       <hr />
       <!--
       **************************************************
diff --git a/packages/calcite-components/src/demos/tree.html b/packages/calcite-components/src/demos/tree.html
index 7af2b25dd65..6f6c9984966 100644
--- a/packages/calcite-components/src/demos/tree.html
+++ b/packages/calcite-components/src/demos/tree.html
@@ -95,6 +95,61 @@ <h1 style="margin: 0 auto; text-align: center">Tree</h1>
         </div>
       </div>
 
+      <!-- single-persist select -->
+      <div class="parent">
+        <div class="child right-aligned-text">single persist select</div>
+
+        <div class="child">
+          <calcite-tree lines selection-mode="single-persist" scale="s">
+            <calcite-tree-item> Child 1 </calcite-tree-item>
+
+            <calcite-tree-item>
+              Child 2
+
+              <calcite-tree slot="children" selection-mode="single-persist">
+                <calcite-tree-item> Grandchild 1 </calcite-tree-item>
+
+                <calcite-tree-item> Grandchild 2 </calcite-tree-item>
+
+                <calcite-tree-item>
+                  Grandchild 3
+                  <calcite-tree slot="children" selection-mode="single-persist">
+                    <calcite-tree-item> Great-Grandchild 1 </calcite-tree-item>
+                    <calcite-tree-item> Great-Grandchild 2 </calcite-tree-item>
+                    <calcite-tree-item> Great-Grandchild 3 </calcite-tree-item>
+                  </calcite-tree>
+                </calcite-tree-item>
+              </calcite-tree>
+            </calcite-tree-item>
+          </calcite-tree>
+        </div>
+
+        <div class="child">
+          <calcite-tree lines selection-mode="single-persist" scale="m">
+            <calcite-tree-item> Child 1 </calcite-tree-item>
+
+            <calcite-tree-item>
+              Child 2
+
+              <calcite-tree slot="children" selection-mode="single-persist">
+                <calcite-tree-item> Grandchild 1 </calcite-tree-item>
+
+                <calcite-tree-item> Grandchild 2 </calcite-tree-item>
+
+                <calcite-tree-item>
+                  Grandchild 3
+                  <calcite-tree slot="children" selection-mode="single-persist">
+                    <calcite-tree-item> Great-Grandchild 1 </calcite-tree-item>
+                    <calcite-tree-item> Great-Grandchild 2 </calcite-tree-item>
+                    <calcite-tree-item> Great-Grandchild 3 </calcite-tree-item>
+                  </calcite-tree>
+                </calcite-tree-item>
+              </calcite-tree>
+            </calcite-tree-item>
+          </calcite-tree>
+        </div>
+      </div>
+
       <!-- multiple select -->
       <div class="parent">
         <div class="child right-aligned-text">multiple select</div>