@esri/solutions-components 0.7.1 → 0.7.2

package/dist/esm/calcite-shell-panel_14.entry.js

@@ -4,28 +4,29 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { r as registerInstance, h, f as forceUpdate, g as getElement, c as createEvent, H as Host, F as Fragment } from './index-b05b3079.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-2966afcc.js';
-import { a as getElementDir, i as isPrimaryPointerButton, s as slotChangeGetAssignedElements, u as slotChangeHasAssignedElement, n as nodeListToArray, d as focusElementInGroup, y as filterDirectChildren, z as getElementProp, t as toAriaBoolean, e as focusElement, g as getSlotted } from './dom-923ca11d.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-76c0c1d9.js';
-import { c as clamp } from './math-26607e9b.js';
-import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-709a2605.js';
-import { C as CSS_UTILITY } from './resources-bb8600a6.js';
-import { g as guid } from './guid-99d025c6.js';
-import { c as createObserver } from './observers-115d1b4b.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-e95bbf6b.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-9617e31c.js';
-import { q as getItemIndex, m as mutationObserverCallback, d as deselectRemovedItems, a as deselectSiblingItems, s as selectSiblings, h as handleFilter, b as handleFilterEvent, g as getItemData, k as keyDownHandler, t as moveItemIndex, i as initialize, c as initializeObserver, f as handleInitialFilter, e as cleanUpObserver, n as calciteListFocusOutHandler, r as removeItem, j as calciteListItemChangeHandler, l as calciteInternalListItemValueChangeHandler, o as setUpItems, p as setFocus, L as List } from './shared-list-render-086be7e0.js';
-import { d as dragActive, a as disconnectSortableComponent, c as connectSortableComponent } from './sortableComponent-4a933f2e.js';
-import { C as CSS$3, S as SLOTS$3 } from './resources-4100c616.js';
-import { I as ICON_TYPES$1 } from './resources-ee6e347f.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-ea10aa41.js';
+import { a as getElementDir, i as isPrimaryPointerButton, s as slotChangeGetAssignedElements, u as slotChangeHasAssignedElement, n as nodeListToArray, d as focusElementInGroup, y as filterDirectChildren, t as toAriaBoolean, e as focusElement, g as getSlotted } from './dom-7b3caf49.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-f23b92b1.js';
+import { c as clamp } from './math-7162ad13.js';
+import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-9d03f26d.js';
+import { C as CSS_UTILITY } from './resources-99ae29ef.js';
+import { g as guid } from './guid-abceb248.js';
+import { c as createObserver } from './observers-4ec1ca0a.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-53ef126b.js';
+import { g as getIconScale } from './component-7a1690e7.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-a9b6b87e.js';
+import { q as getItemIndex, m as mutationObserverCallback, d as deselectRemovedItems, a as deselectSiblingItems, s as selectSiblings, h as handleFilter, b as handleFilterEvent, g as getItemData, k as keyDownHandler, t as moveItemIndex, i as initialize, c as initializeObserver, f as handleInitialFilter, e as cleanUpObserver, n as calciteListFocusOutHandler, r as removeItem, j as calciteListItemChangeHandler, l as calciteInternalListItemValueChangeHandler, o as setUpItems, p as setFocus, L as List } from './shared-list-render-0fe2fe03.js';
+import { d as dragActive, a as disconnectSortableComponent, c as connectSortableComponent } from './sortableComponent-0b6eef97.js';
+import { C as CSS$5, S as SLOTS$3 } from './resources-120cdd90.js';
+import { I as ICON_TYPES$1 } from './resources-8c00c1ef.js';
 import { g as getLocaleComponentStrings } from './locale-5bdc0197.js';
 import { s as state } from './solution-store-c0ac9298.js';
 import { d as EUpdateType } from './interfaces-7470d906.js';
 import { E as EFileType } from './solution-resource-be35d35b.js';
-import './key-5ab69c42.js';
-import './browser-b8a2c2d7.js';
-import './array-3a471981.js';
-import './resources-c8f83593.js';
+import './key-242646ba.js';
+import './browser-aaebde6b.js';
+import './array-5ed5be45.js';
+import './resources-91b0f96d.js';
 import './debounce-229b1a22.js';
 import './_commonjsHelpers-d5f9d613.js';
 import './index-da1495f5.js';
@@ -34,9 +35,9 @@ import './restHelpersGet-a5ec2192.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0
+ * v1.11.0
  */
-const CSS$2 = {
+const CSS$4 = {
   container: "container",
   content: "content",
   contentHeader: "content__header",
@@ -298,7 +299,7 @@ const ShellPanel = class {
   //
   // --------------------------------------------------------------------------
   renderHeader() {
-    return (h("div", { class: CSS$2.contentHeader, hidden: !this.hasHeader, key: "header" }, h("slot", { name: SLOTS$2.header, onSlotchange: this.handleHeaderSlotChange })));
+    return (h("div", { class: CSS$4.contentHeader, hidden: !this.hasHeader, key: "header" }, h("slot", { name: SLOTS$2.header, onSlotchange: this.handleHeaderSlotChange })));
   }
   render() {
     const { collapsed, position, initialContentWidth, initialContentHeight, contentWidth, contentWidthMax, contentWidthMin, contentHeight, contentHeightMax, contentHeightMin, resizable, layout, displayMode, } = this;
@@ -315,7 +316,7 @@ const ShellPanel = class {
       : null;
     const separatorNode = !collapsed && allowResizing ? (h("div", { "aria-label": this.messages.resize, "aria-orientation": layout === "horizontal" ? "vertical" : "horizontal", "aria-valuemax": layout == "horizontal" ? contentHeightMax : contentWidthMax, "aria-valuemin": layout == "horizontal" ? contentHeightMin : contentWidthMin, "aria-valuenow": layout == "horizontal"
         ? contentHeight !== null && contentHeight !== void 0 ? contentHeight : initialContentHeight
-        : contentWidth !== null && contentWidth !== void 0 ? contentWidth : initialContentWidth, class: CSS$2.separator, key: "separator", onKeyDown: this.separatorKeyDown, role: "separator", tabIndex: 0, "touch-action": "none",
+        : contentWidth !== null && contentWidth !== void 0 ? contentWidth : initialContentWidth, class: CSS$4.separator, key: "separator", onKeyDown: this.separatorKeyDown, role: "separator", tabIndex: 0, "touch-action": "none",
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.connectSeparator })) : null;
     const getAnimationDir = () => {
@@ -331,20 +332,20 @@ const ShellPanel = class {
     };
     const contentNode = (h("div", { class: {
         [CSS_UTILITY.rtl]: dir === "rtl",
-        [CSS$2.content]: true,
-        [CSS$2.contentOverlay]: displayMode === "overlay",
-        [CSS$2.contentFloat]: displayMode === "float",
+        [CSS$4.content]: true,
+        [CSS$4.contentOverlay]: displayMode === "overlay",
+        [CSS$4.contentFloat]: displayMode === "float",
         [CSS_UTILITY.calciteAnimate]: displayMode === "overlay",
         [getAnimationDir()]: displayMode === "overlay",
       }, hidden: collapsed, key: "content", style: style,
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-      ref: this.storeContentEl }, this.renderHeader(), h("div", { class: CSS$2.contentBody }, h("slot", null)), separatorNode));
+      ref: this.storeContentEl }, this.renderHeader(), h("div", { class: CSS$4.contentBody }, h("slot", null)), separatorNode));
     const actionBarNode = (h("slot", { key: "action-bar", name: SLOTS$2.actionBar, onSlotchange: this.handleActionBarSlotChange }));
     const mainNodes = [actionBarNode, contentNode];
     if (position === "end") {
       mainNodes.reverse();
     }
-    return h("div", { class: { [CSS$2.container]: true } }, mainNodes);
+    return h("div", { class: { [CSS$4.container]: true } }, mainNodes);
   }
   // --------------------------------------------------------------------------
   //
@@ -420,7 +421,17 @@ const ShellPanel = class {
 };
 ShellPanel.style = shellPanelCss;
 
-const tabCss = ":host([selected]) section,:host([selected]) .container{display:block}:host{display:none;block-size:100%;inline-size:100%}:host([selected]){display:block;block-size:100%;inline-size:100%;overflow:auto}section,.container{display:none;block-size:100%;inline-size:100%}:host([scale=s]){padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]){padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){font-size:var(--calcite-font-size-0);line-height:1.25rem;padding-block:13px}:host([hidden]){display:none}[hidden]{display:none}";
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.11.0
+ */
+const CSS$3 = {
+  container: "container",
+  content: "content",
+};
+
+const tabCss = ":host([selected]) section,:host([selected]) .container{display:block}:host{display:none;block-size:100%;inline-size:100%}:host([selected]){display:block;block-size:100%;inline-size:100%;overflow:auto}.scale-s .content{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}.scale-m .content{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}.scale-l .content{padding-block:0.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}section,.container{display:none;block-size:100%;inline-size:100%}:host([hidden]){display:none}[hidden]{display:none}";
 
 const Tab = class {
   constructor(hostRef) {
@@ -439,7 +450,7 @@ const Tab = class {
   //--------------------------------------------------------------------------
   render() {
     const id = this.el.id || this.guid;
-    return (h(Host, { "aria-labelledby": this.labeledBy, id: id }, h("div", { class: "container", role: "tabpanel", tabIndex: this.selected ? 0 : -1 }, h("section", null, h("slot", null)))));
+    return (h(Host, { "aria-labelledby": this.labeledBy, id: id }, h("div", { class: { [CSS$3.container]: true, [`scale-${this.scale}`]: true }, role: "tabpanel", tabIndex: this.selected ? 0 : -1 }, h("section", { class: CSS$3.content }, h("slot", null)))));
   }
   connectedCallback() {
     this.parentTabsEl = this.el.closest("calcite-tabs");
@@ -447,10 +458,6 @@ const Tab = class {
   componentDidLoad() {
     this.calciteInternalTabRegister.emit();
   }
-  componentWillRender() {
-    var _a;
-    this.scale = (_a = this.parentTabsEl) === null || _a === void 0 ? void 0 : _a.scale;
-  }
   disconnectedCallback() {
     var _a;
     // Dispatching to body in order to be listened by other elements that are still connected to the DOM.
@@ -511,7 +518,16 @@ const Tab = class {
 };
 Tab.style = tabCss;
 
-const tabNavCss = ":host{position:relative;display:flex}:host([scale=s]){min-block-size:1.5rem}:host([scale=m]){min-block-size:2rem}:host([scale=l]){min-block-size:2.75rem}.tab-nav{display:flex;inline-size:100%;justify-content:flex-start;overflow:auto}.tab-nav-active-indicator-container{position:absolute;inset-inline:0px;inset-block-end:0px;block-size:0.125rem;inline-size:100%;overflow:hidden}.tab-nav-active-indicator{position:absolute;inset-block-end:0px;display:block;block-size:0.125rem;background-color:var(--calcite-ui-brand);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}:host([layout=center]) .tab-nav{justify-content:space-evenly}:host([position=bottom]) .tab-nav-active-indicator{inset-block-end:unset;inset-block-start:0px}:host([position=bottom]) .tab-nav-active-indicator-container{inset-block-end:unset;inset-block-start:0px}:host([bordered]) .tab-nav-active-indicator-container{inset-block-end:unset}:host([bordered][position=bottom]) .tab-nav-active-indicator-container{inset-block-end:0;inset-block-start:unset}@media (forced-colors: active){.tab-nav-active-indicator{background-color:highlight}}:host([hidden]){display:none}[hidden]{display:none}";
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.11.0
+ */
+const CSS$2 = {
+  container: "tab-nav",
+};
+
+const tabNavCss = ":host{position:relative;display:flex}.scale-s{min-block-size:1.5rem}.scale-m{min-block-size:2rem}.scale-l{min-block-size:2.75rem}:host([layout=center]:not([bordered])){padding-inline:1.25rem}:host([layout=center]:not([bordered])) .tab-nav ::slotted(calcite-tab-title:last-child){margin-inline-end:0px}:host(:not([bordered])) .scale-l ::slotted(calcite-tab-title){margin-inline-end:1.5rem}:host(:not([bordered])) .scale-m ::slotted(calcite-tab-title){margin-inline-end:1.25rem}:host(:not([bordered])) .scale-s ::slotted(calcite-tab-title){margin-inline-end:1rem}.tab-nav{display:flex;inline-size:100%;justify-content:flex-start;overflow:auto}.tab-nav-active-indicator-container{position:absolute;inset-inline:0px;inset-block-end:0px;block-size:0.125rem;inline-size:100%;overflow:hidden}.tab-nav-active-indicator{position:absolute;inset-block-end:0px;display:block;block-size:0.125rem;background-color:var(--calcite-ui-brand);transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}:host([layout=center]) .tab-nav{justify-content:space-evenly}:host .position-bottom .tab-nav-active-indicator{inset-block-end:unset;inset-block-start:0px}:host .position-bottom .tab-nav-active-indicator-container{inset-block-end:unset;inset-block-start:0px}:host([bordered]) .tab-nav-active-indicator-container{inset-block-end:unset}:host([bordered]) .position-bottom .tab-nav-active-indicator-container{inset-block-end:0;inset-block-start:unset}@media (forced-colors: active){.tab-nav-active-indicator{background-color:highlight}}:host([hidden]){display:none}[hidden]{display:none}";
 
 const TabNav = class {
   constructor(hostRef) {
@@ -581,10 +597,6 @@ const TabNav = class {
     this.parentTabsEl = this.el.closest("calcite-tabs");
     (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el);
   }
-  disconnectedCallback() {
-    var _a;
-    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-  }
   componentWillLoad() {
     const storageKey = `calcite-tab-nav-${this.storageId}`;
     if (localStorage && this.storageId && localStorage.getItem(storageKey)) {
@@ -595,8 +607,6 @@ const TabNav = class {
   componentWillRender() {
     const { parentTabsEl } = this;
     this.layout = parentTabsEl === null || parentTabsEl === void 0 ? void 0 : parentTabsEl.layout;
-    this.position = parentTabsEl === null || parentTabsEl === void 0 ? void 0 : parentTabsEl.position;
-    this.scale = parentTabsEl === null || parentTabsEl === void 0 ? void 0 : parentTabsEl.scale;
     this.bordered = parentTabsEl === null || parentTabsEl === void 0 ? void 0 : parentTabsEl.bordered;
     // fix issue with active tab-title not lining up with blue indicator
     if (this.selectedTitle) {
@@ -615,12 +625,20 @@ const TabNav = class {
       });
     }
   }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
   render() {
     const dir = getElementDir(this.el);
     const width = `${this.indicatorWidth}px`;
     const offset = `${this.indicatorOffset}px`;
     const indicatorStyle = dir !== "rtl" ? { width, left: offset } : { width, right: offset };
-    return (h(Host, { role: "tablist" }, h("div", { class: "tab-nav", onScroll: this.handleContainerScroll,
+    return (h(Host, { role: "tablist" }, h("div", { class: {
+        [CSS$2.container]: true,
+        [`scale-${this.scale}`]: true,
+        [`position-${this.position}`]: true,
+      }, onScroll: this.handleContainerScroll,
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.tabNavEl = el) }, h("slot", null), h("div", { class: "tab-nav-active-indicator-container",
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
@@ -745,7 +763,7 @@ TabNav.style = tabNavCss;
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0
+ * v1.11.0
  */
 const CSS$1 = {
   closeButton: "close-button",
@@ -753,15 +771,15 @@ const CSS$1 = {
   content: "content",
   contentHasText: "content--has-text",
   iconEnd: "icon-end",
-  iconStart: "icon-start",
   iconPresent: "icon-present",
+  iconStart: "icon-start",
   titleIcon: "calcite-tab-title--icon",
 };
 const ICONS$1 = {
   close: "x",
 };
 
-const tabTitleCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block;flex:0 1 auto;outline:2px solid transparent;outline-offset:2px;margin-inline-start:0px;margin-inline-end:1.25rem}:host([layout=center][scale=s]),:host([layout=center][scale=m]),:host([layout=center][scale=l]){margin-block:0px;text-align:center;margin-inline-end:0px;flex-basis:12rem}:host([layout=center][scale=s]) .content,:host([layout=center][scale=m]) .content,:host([layout=center][scale=l]) .content{margin:auto}:host([layout=center][closable]) .content{padding-inline-start:32px}:host([layout=center][bordered][closable][scale=s]) .content{padding-inline-start:36px}:host([layout=center][bordered][closable][scale=m]) .content{padding-inline-start:40px}:host([layout=center][closable][scale=l]) .content{padding-inline-start:40px}:host([layout=center][closable][bordered][scale=l]) .content{padding-inline-start:52px}:host([position=bottom]) .container{border-block-end-width:0px;border-block-start-width:2px;border-block-start-color:transparent;border-block-start-style:solid}:host([closed]){display:none}.container{outline-color:transparent}:host(:focus) .container{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}:host(:focus) .container:focus-within{outline-color:transparent}:host(:active) a,:host(:focus) a,:host(:hover) a{border-color:var(--calcite-ui-border-2);color:var(--calcite-ui-text-1);-webkit-text-decoration-line:none;text-decoration-line:none}:host([selected]) .container{border-color:transparent;color:var(--calcite-ui-text-1)}:host([disabled]) .container{pointer-events:none;opacity:0.5}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([scale=s]){margin-inline-end:1rem}:host([scale=s]) .content{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=m]) .content{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=l]){margin-inline-end:1.5rem}:host([scale=l]) .content{padding-block:0.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}.container{box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-content:center;justify-content:space-between;border-block-end-width:2px;padding-inline:0px;font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-ui-text-3);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-block-end-color:transparent;border-block-end-style:solid}.content{display:flex;align-items:center;justify-content:center}.calcite-tab-title--icon{position:relative;margin:0px;display:inline-flex;align-self:center}.calcite-tab-title--icon svg{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.content--has-text{padding:0.25rem}.content--has-text .calcite-tab-title--icon.icon-start{margin-inline-end:0.5rem}.content--has-text .calcite-tab-title--icon.icon-end{margin-inline-start:0.5rem}.close-button{display:flex;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-style:none;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-3);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;block-size:calc(100% - 2px);background-color:var(--calcite-button-transparent-1);margin-inline-start:auto}.close-button:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          );outline-offset:-1px}.close-button:focus,.close-button:hover{color:var(--calcite-ui-text-1);background-color:var(--calcite-ui-foreground-2)}.close-button:active{color:var(--calcite-ui-text-1);background-color:var(--calcite-ui-foreground-3)}.close-button calcite-icon{color:inherit}:host([icon-start][icon-end]) .calcite-tab-title--icon:first-child{margin-inline-end:0.5rem}:host([bordered]){margin-inline-end:0}:host([bordered][selected]){box-shadow:inset 0px -2px var(--calcite-ui-foreground-1)}:host([bordered][selected][position=bottom]){box-shadow:inset 0 2px 0 var(--calcite-ui-foreground-1)}:host([bordered]:hover) .container,:host([bordered]:focus) .container,:host([bordered]:active) .container{position:relative}:host([bordered]:hover) .container{background-color:var(--calcite-button-transparent-hover)}:host([closable]) .container,:host([bordered]) .container{border-inline-start:1px solid transparent;border-inline-end:1px solid transparent}:host([closable]) .container .close-button,:host([bordered]) .container .close-button{margin-inline:0}:host([closable]) .content{box-sizing:border-box;block-size:100%;border-block-end-color:transparent}:host([closable][position=bottom]) .container,:host([bordered][position=bottom]) .container{border-block-start-style:unset}:host([selected][bordered]) .container{border-inline-start-color:var(--calcite-ui-border-1);border-inline-end-color:var(--calcite-ui-border-1)}:host([bordered]) .content{padding-inline:0.75rem}:host([bordered][scale=s]) .content{padding-inline:0.5rem}:host([bordered][scale=l]) .content{padding-inline:1rem}@media (forced-colors: active){:host{outline-width:0;outline-offset:0}:host(:focus) .container{outline-color:highlight}:host([bordered]) .container{border-block-end-style:solid}:host([bordered][position=bottom]) .container{border-block-start-style:solid}:host([bordered][selected]) .container{border-block-end-style:none}:host([bordered][position=bottom][selected]) .container{border-block-start-style:none}.close-button{z-index:var(--calcite-app-z-index)}}:host([hidden]){display:none}[hidden]{display:none}";
+const tabTitleCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block;outline:2px solid transparent;outline-offset:2px;margin-inline-start:0px}:host([layout=inline]){flex:0 1 auto}:host([layout=center]){flex:1 1 auto}:host([layout=center]) .scale-s,:host([layout=center]) .scale-m,:host([layout=center]) .scale-l{margin-block:0px;text-align:center;flex-basis:12rem}:host([layout=center]) .scale-s .content,:host([layout=center]) .scale-m .content,:host([layout=center]) .scale-l .content{margin:auto}:host([layout=center][closable]) .content{padding-inline-start:32px}:host([layout=center][bordered][closable]) .scale-s .content{padding-inline-start:36px}:host([layout=center][bordered][closable]) .scale-m .content{padding-inline-start:40px}:host([layout=center][closable]) .scale-l .content{padding-inline-start:40px}:host([layout=center][closable][bordered]) .scale-s .content{padding-inline-start:52px}:host([position=bottom]) .container{border-block-end-width:0px;border-block-start-width:2px;border-block-start-color:transparent;border-block-start-style:solid}:host([closed]){display:none}.container{outline-color:transparent}:host(:focus) .container{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}:host(:focus) .container:focus-within{outline-color:transparent}:host(:active) a,:host(:focus) a,:host(:hover) a{border-color:var(--calcite-ui-border-2);color:var(--calcite-ui-text-1);-webkit-text-decoration-line:none;text-decoration-line:none}:host([selected]) .container{border-color:transparent;color:var(--calcite-ui-text-1)}:host([disabled]) .container{pointer-events:none;opacity:0.5}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.scale-s .content{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}.scale-m .content{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}.scale-l .content{padding-block:0.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}.container{box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;align-content:center;justify-content:space-between;border-block-end-width:2px;padding-inline:0px;font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-ui-text-3);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-block-end-color:transparent;border-block-end-style:solid}.content{display:flex;align-items:center;justify-content:center}.calcite-tab-title--icon{position:relative;margin:0px;display:inline-flex;align-self:center}.calcite-tab-title--icon svg{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}.content--has-text{padding:0.25rem}.content--has-text .calcite-tab-title--icon.icon-start{margin-inline-end:0.5rem}.content--has-text .calcite-tab-title--icon.icon-end{margin-inline-start:0.5rem}.close-button{display:flex;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-style:none;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-3);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;block-size:calc(100% - 2px);background-color:var(--calcite-button-transparent-1);margin-inline-start:auto}.close-button:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          );outline-offset:-1px}.close-button:focus,.close-button:hover{color:var(--calcite-ui-text-1);background-color:var(--calcite-ui-foreground-2)}.close-button:active{color:var(--calcite-ui-text-1);background-color:var(--calcite-ui-foreground-3)}.close-button calcite-icon{color:inherit}:host([icon-start][icon-end]) .calcite-tab-title--icon:first-child{margin-inline-end:0.5rem}:host([bordered]){margin-inline-end:0}:host([bordered][selected]){box-shadow:inset 0px -2px var(--calcite-ui-foreground-1)}:host([bordered][selected][position=bottom]){box-shadow:inset 0 2px 0 var(--calcite-ui-foreground-1)}:host([bordered]:hover) .container,:host([bordered]:focus) .container,:host([bordered]:active) .container{position:relative}:host([bordered]:hover) .container{background-color:var(--calcite-button-transparent-hover)}:host([closable]) .container,:host([bordered]) .container{border-inline-start:1px solid transparent;border-inline-end:1px solid transparent}:host([closable]) .container .close-button,:host([bordered]) .container .close-button{margin-inline:0}:host([closable]) .content{box-sizing:border-box;block-size:100%;border-block-end-color:transparent}:host([closable][position=bottom]) .container,:host([bordered][position=bottom]) .container{border-block-start-style:unset}:host([selected][bordered]) .container{border-inline-start-color:var(--calcite-ui-border-1);border-inline-end-color:var(--calcite-ui-border-1)}:host([bordered]) .content{padding-inline:0.75rem}:host([bordered]) .scale-s .content{padding-inline:0.5rem}:host([bordered]) .scale-l .content{padding-inline:1rem}@media (forced-colors: active){:host{outline-width:0;outline-offset:0}:host(:focus) .container{outline-color:highlight}:host([bordered]) .container{border-block-end-style:solid}:host([bordered][position=bottom]) .container{border-block-start-style:solid}:host([bordered][selected]) .container{border-block-end-style:none}:host([bordered][position=bottom][selected]) .container{border-block-start-style:none}.close-button{z-index:var(--calcite-app-z-index)}}:host([hidden]){display:none}[hidden]{display:none}";
 
 const TabTitle = class {
   constructor(hostRef) {
@@ -798,8 +816,8 @@ const TabTitle = class {
     this.iconFlipRtl = undefined;
     this.iconStart = undefined;
     this.layout = undefined;
-    this.position = undefined;
-    this.scale = undefined;
+    this.position = "top";
+    this.scale = "m";
     this.bordered = false;
     this.tab = undefined;
     this.messages = undefined;
@@ -854,24 +872,18 @@ const TabTitle = class {
   componentWillRender() {
     if (this.parentTabsEl) {
       this.layout = this.parentTabsEl.layout;
-      this.position = this.parentTabsEl.position;
-      this.scale = this.parentTabsEl.scale;
       this.bordered = this.parentTabsEl.bordered;
     }
-    // handle case when tab-nav is only parent
-    if (!this.parentTabsEl && this.parentTabNavEl) {
-      this.position = getElementProp(this.parentTabNavEl, "position", this.position);
-      this.scale = getElementProp(this.parentTabNavEl, "scale", this.scale);
-    }
   }
   render() {
     const { el, closed } = this;
     const id = el.id || this.guid;
-    const iconStartEl = (h("calcite-icon", { class: { [CSS$1.titleIcon]: true, [CSS$1.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: this.scale === "l" ? "m" : "s" }));
-    const iconEndEl = (h("calcite-icon", { class: { [CSS$1.titleIcon]: true, [CSS$1.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: this.scale === "l" ? "m" : "s" }));
+    const iconStartEl = (h("calcite-icon", { class: { [CSS$1.titleIcon]: true, [CSS$1.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
+    const iconEndEl = (h("calcite-icon", { class: { [CSS$1.titleIcon]: true, [CSS$1.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: getIconScale(this.scale) }));
     return (h(Host, { "aria-controls": this.controls, "aria-selected": toAriaBoolean(this.selected), id: id, role: "tab", tabIndex: this.selected ? 0 : -1 }, h("div", { class: {
         container: true,
         [CSS$1.iconPresent]: !!this.iconStart || !!this.iconEnd,
+        [`scale-${this.scale}`]: true,
       }, hidden: closed,
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => { var _a; return (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(el); } }, h("div", { class: { [CSS$1.content]: true, [CSS$1.contentHasText]: this.hasText } }, this.iconStart ? iconStartEl : null, h("slot", null), this.iconEnd ? iconEndEl : null), this.renderCloseButton())));
@@ -880,7 +892,7 @@ const TabTitle = class {
     const { closable, messages } = this;
     return closable ? (h("button", { "aria-label": messages.close, class: CSS$1.closeButton, disabled: false, key: CSS$1.closeButton, onClick: this.closeClickHandler, title: messages.close, type: "button",
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-      ref: (el) => (this.closeButtonEl = el) }, h("calcite-icon", { icon: ICONS$1.close, scale: this.scale === "l" ? "m" : "s" }))) : null;
+      ref: (el) => (this.closeButtonEl = el) }, h("calcite-icon", { icon: ICONS$1.close, scale: getIconScale(this.scale) }))) : null;
   }
   async componentDidLoad() {
     this.calciteInternalTabTitleRegister.emit(await this.getTabIdentifier());
@@ -1019,7 +1031,7 @@ TabTitle.style = tabTitleCss;
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0
+ * v1.11.0
  */
 const SLOTS$1 = {
   titleGroup: "title-group",
@@ -1030,6 +1042,16 @@ const tabsCss = ":host{display:flex;flex-direction:column}:host([bordered]){box-
 const Tabs = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.mutationObserver = createObserver("mutation", (mutationsList) => {
+      for (const mutation of mutationsList) {
+        const target = mutation.target;
+        if (target.nodeName === "CALCITE-TAB-NAV" ||
+          target.nodeName === "CALCITE-TAB-TITLE" ||
+          target.nodeName === "CALCITE-TAB") {
+          this.updateItems();
+        }
+      }
+    });
     this.layout = "inline";
     this.position = "top";
     this.scale = "m";
@@ -1037,11 +1059,25 @@ const Tabs = class {
     this.titles = [];
     this.tabs = [];
   }
+  handleInheritableProps() {
+    this.updateItems();
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  connectedCallback() {
+    this.mutationObserver.observe(this.el, { childList: true });
+    this.updateItems();
+  }
+  async componentWillLoad() {
+    this.updateItems();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
   render() {
     return (h(Fragment, null, h("slot", { name: SLOTS$1.titleGroup }), h("section", null, h("slot", null))));
   }
@@ -1086,6 +1122,23 @@ const Tabs = class {
     this.registryHandler();
     event.stopPropagation();
   }
+  updateItems() {
+    const { position, scale } = this;
+    const nav = this.el.querySelector("calcite-tab-nav");
+    if (nav) {
+      nav.position = position;
+      nav.scale = scale;
+    }
+    Array.from(this.el.querySelectorAll("calcite-tab")).forEach((tab) => {
+      if (tab.parentElement === this.el) {
+        tab.scale = scale;
+      }
+    });
+    Array.from(this.el.querySelectorAll("calcite-tab-nav > calcite-tab-title")).forEach((title) => {
+      title.position = position;
+      title.scale = scale;
+    });
+  }
   //--------------------------------------------------------------------------
   //
   //  Private Methods
@@ -1133,13 +1186,17 @@ const Tabs = class {
     this.titles.forEach((el) => el.updateAriaInfo(tabIds, titleIds));
   }
   get el() { return getElement(this); }
+  static get watchers() { return {
+    "position": ["handleInheritableProps"],
+    "scale": ["handleInheritableProps"]
+  }; }
 };
 Tabs.style = tabsCss;
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0
+ * v1.11.0
  */
 const CSS = {
   container: "container",
@@ -1153,7 +1210,7 @@ var ICON_TYPES;
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0
+ * v1.11.0
  */
 function getScreenReaderText(item, status, valueList) {
   const { items, messages } = valueList;
@@ -1432,7 +1489,7 @@ ValueList.style = valueListCss;
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0
+ * v1.11.0
  */
 const ICONS = {
   drag: "drag",
@@ -1548,9 +1605,11 @@ const ValueListItem = class {
     const { icon, iconFlipRtl } = this;
     if (icon === ICON_TYPES$1.grip) {
       return (h("span", { class: {
-          [CSS$3.handle]: true,
-          [CSS$3.handleActivated]: this.handleActivated,
-        }, "data-js-handle": true, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => (this.handleEl = el), role: "button", tabindex: "0" }, h("calcite-icon", { flipRtl: iconFlipRtl, icon: ICONS.drag, scale: "s" })));
+          [CSS$5.handle]: true,
+          [CSS$5.handleActivated]: this.handleActivated,
+        }, "data-js-handle": true, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, role: "button", tabindex: "0",
+        // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+        ref: (el) => (this.handleEl = el) }, h("calcite-icon", { flipRtl: iconFlipRtl, icon: ICONS.drag, scale: "s" })));
     }
   }
   render() {

package/dist/esm/calcite-sortable-list.entry.js

@@ -4,18 +4,18 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-b05b3079.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-e95bbf6b.js';
-import { c as createObserver } from './observers-115d1b4b.js';
-import { d as dragActive, a as disconnectSortableComponent, c as connectSortableComponent } from './sortableComponent-4a933f2e.js';
-import { e as focusElement } from './dom-923ca11d.js';
-import './browser-b8a2c2d7.js';
-import './guid-99d025c6.js';
-import './resources-bb8600a6.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-53ef126b.js';
+import { c as createObserver } from './observers-4ec1ca0a.js';
+import { d as dragActive, a as disconnectSortableComponent, c as connectSortableComponent } from './sortableComponent-0b6eef97.js';
+import { e as focusElement } from './dom-7b3caf49.js';
+import './browser-aaebde6b.js';
+import './guid-abceb248.js';
+import './resources-99ae29ef.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0
+ * v1.11.0
  */
 const CSS = {
   sortItem: "sort-item",

package/dist/esm/calcite-split-button.entry.js

@@ -4,25 +4,25 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-b05b3079.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive-e95bbf6b.js';
-import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-9617e31c.js';
-import './browser-b8a2c2d7.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive } from './interactive-53ef126b.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-a9b6b87e.js';
+import './browser-aaebde6b.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0
+ * v1.11.0
  */
 const CSS = {
-  container: "split-button__container",
-  dividerContainer: "split-button__divider-container",
-  divider: "split-button__divider",
+  container: "container",
+  dividerContainer: "divider-container",
+  divider: "divider",
   widthAuto: "width-auto",
   widthHalf: "width-half",
   widthFull: "width-full",
 };
 
-const splitButtonCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block}:host .split-button__container{display:flex;align-items:stretch}:host .split-button__container>calcite-dropdown>calcite-button{block-size:100%;vertical-align:top}:host:host([kind=brand]){--calcite-split-button-background:var(--calcite-ui-brand);--calcite-split-button-divider:var(--calcite-ui-foreground-1)}:host:host([kind=danger]){--calcite-split-button-background:var(--calcite-ui-danger);--calcite-split-button-divider:var(--calcite-ui-foreground-1)}:host:host([kind=neutral]){--calcite-split-button-background:var(--calcite-ui-foreground-3);--calcite-split-button-divider:var(--calcite-ui-text-1)}:host:host([kind=inverse]){--calcite-split-button-background:var(--calcite-ui-inverse);--calcite-split-button-divider:var(--calcite-ui-foreground-1)}:host([appearance=transparent]):host([kind=brand]){--calcite-split-button-divider:var(--calcite-ui-brand);--calcite-split-button-background:transparent}:host([appearance=transparent]):host([kind=danger]){--calcite-split-button-divider:var(--calcite-ui-danger);--calcite-split-button-background:transparent}:host([appearance=transparent]):host([kind=neutral]){--calcite-split-button-divider:var(--calcite-ui-text-1);--calcite-split-button-background:transparent}:host([appearance=transparent]):host([kind=inverse]){--calcite-split-button-divider:var(--calcite-ui-foreground-1);--calcite-split-button-background:transparent}:host([appearance=outline]){--calcite-split-button-background:transparent}:host([appearance=outline-fill]){--calcite-split-button-background:var(--calcite-ui-foreground-1)}:host([appearance=outline]):host([kind=brand]),:host([appearance=outline-fill]):host([kind=brand]){--calcite-split-button-divider:var(--calcite-ui-brand)}:host([appearance=outline]):host([kind=danger]),:host([appearance=outline-fill]):host([kind=danger]){--calcite-split-button-divider:var(--calcite-ui-danger)}:host([appearance=outline]):host([kind=neutral]),:host([appearance=outline-fill]):host([kind=neutral]){--calcite-split-button-divider:var(--calcite-ui-border-1);--calcite-split-button-background:var(--calcite-ui-border-1)}:host([appearance=outline]):host([kind=inverse]),:host([appearance=outline-fill]):host([kind=inverse]){--calcite-split-button-divider:var(--calcite-ui-inverse)}.width-auto{inline-size:auto}.width-half{inline-size:50%}.width-full{inline-size:100%}.split-button__divider-container{display:flex;inline-size:1px;align-items:stretch;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;background-color:var(--calcite-split-button-background)}.split-button__divider{margin-block:0.25rem;display:inline-block;inline-size:1px;background-color:var(--calcite-split-button-divider)}:host([appearance=outline-fill]) .split-button__divider-container,:host([appearance=outline]) .split-button__divider-container{border-block:1px solid var(--calcite-split-button-divider)}:host([appearance=outline-fill]):hover .split-button__divider-container,:host([appearance=outline]):hover .split-button__divider-container{background-color:var(--calcite-split-button-divider)}:host([appearance=outline-fill]:hover) .split-button__divider-container,:host([appearance=outline]:hover) .split-button__divider-container{background-color:var(--calcite-split-button-divider)}:host([appearance=outline-fill]:focus-within):host([kind=brand]),:host([appearance=outline]:focus-within):host([kind=brand]){--calcite-split-button-divider:var(--calcite-ui-brand-press)}:host([appearance=outline-fill]:focus-within):host([kind=danger]),:host([appearance=outline]:focus-within):host([kind=danger]){--calcite-split-button-divider:var(--calcite-ui-danger-press)}:host([appearance=outline-fill]:focus-within) .split-button__divider-container,:host([appearance=outline]:focus-within) .split-button__divider-container{background-color:var(--calcite-split-button-divider)}:host([disabled]) .split-button__divider-container{opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) calcite-dropdown>calcite-button{pointer-events:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([hidden]){display:none}[hidden]{display:none}";
+const splitButtonCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block}:host([width=auto]){inline-size:auto}:host([width=half]){inline-size:50%}:host([width=full]){inline-size:100%}:host:host([kind=brand]){--calcite-split-button-background:var(--calcite-ui-brand);--calcite-split-button-divider:var(--calcite-ui-foreground-1)}:host:host([kind=danger]){--calcite-split-button-background:var(--calcite-ui-danger);--calcite-split-button-divider:var(--calcite-ui-foreground-1)}:host:host([kind=neutral]){--calcite-split-button-background:var(--calcite-ui-foreground-3);--calcite-split-button-divider:var(--calcite-ui-text-1)}:host:host([kind=inverse]){--calcite-split-button-background:var(--calcite-ui-inverse);--calcite-split-button-divider:var(--calcite-ui-foreground-1)}:host([appearance=transparent]):host([kind=brand]){--calcite-split-button-divider:var(--calcite-ui-brand);--calcite-split-button-background:transparent}:host([appearance=transparent]):host([kind=danger]){--calcite-split-button-divider:var(--calcite-ui-danger);--calcite-split-button-background:transparent}:host([appearance=transparent]):host([kind=neutral]){--calcite-split-button-divider:var(--calcite-ui-text-1);--calcite-split-button-background:transparent}:host([appearance=transparent]):host([kind=inverse]){--calcite-split-button-divider:var(--calcite-ui-foreground-1);--calcite-split-button-background:transparent}:host([appearance=outline]){--calcite-split-button-background:transparent}:host([appearance=outline-fill]){--calcite-split-button-background:var(--calcite-ui-foreground-1)}:host([appearance=outline]):host([kind=brand]),:host([appearance=outline-fill]):host([kind=brand]){--calcite-split-button-divider:var(--calcite-ui-brand)}:host([appearance=outline]):host([kind=danger]),:host([appearance=outline-fill]):host([kind=danger]){--calcite-split-button-divider:var(--calcite-ui-danger)}:host([appearance=outline]):host([kind=neutral]),:host([appearance=outline-fill]):host([kind=neutral]){--calcite-split-button-divider:var(--calcite-ui-border-1);--calcite-split-button-background:var(--calcite-ui-border-1)}:host([appearance=outline]):host([kind=inverse]),:host([appearance=outline-fill]):host([kind=inverse]){--calcite-split-button-divider:var(--calcite-ui-inverse)}.container{display:flex;align-items:stretch}.container>calcite-dropdown>calcite-button{block-size:100%;vertical-align:top}.divider-container{display:flex;inline-size:1px;align-items:stretch;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;background-color:var(--calcite-split-button-background)}.divider{margin-block:0.25rem;display:inline-block;inline-size:1px;background-color:var(--calcite-split-button-divider)}:host([appearance=outline-fill]) .divider-container,:host([appearance=outline]) .divider-container{border-block:1px solid var(--calcite-split-button-divider)}:host([appearance=outline-fill]):hover .divider-container,:host([appearance=outline]):hover .divider-container{background-color:var(--calcite-split-button-divider)}:host([appearance=outline-fill]:hover) .divider-container,:host([appearance=outline]:hover) .divider-container{background-color:var(--calcite-split-button-divider)}:host([appearance=outline-fill]:focus-within):host([kind=brand]),:host([appearance=outline]:focus-within):host([kind=brand]){--calcite-split-button-divider:var(--calcite-ui-brand-press)}:host([appearance=outline-fill]:focus-within):host([kind=danger]),:host([appearance=outline]:focus-within):host([kind=danger]){--calcite-split-button-divider:var(--calcite-ui-danger-press)}:host([appearance=outline-fill]:focus-within) .divider-container,:host([appearance=outline]:focus-within) .divider-container{background-color:var(--calcite-split-button-divider)}:host([disabled]) .divider-container{opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) calcite-dropdown>calcite-button{pointer-events:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([hidden]){display:none}[hidden]{display:none}";
 
 const SplitButton = class {
   constructor(hostRef) {
@@ -88,14 +88,8 @@ const SplitButton = class {
     disconnectInteractive(this);
   }
   render() {
-    const widthClasses = {
-      [CSS.container]: true,
-      [CSS.widthAuto]: this.width === "auto",
-      [CSS.widthHalf]: this.width === "half",
-      [CSS.widthFull]: this.width === "full",
-    };
     const buttonWidth = this.width === "auto" ? "auto" : "full";
-    return (h("div", { class: widthClasses }, h("calcite-button", { appearance: this.appearance, disabled: this.disabled, "icon-end": this.primaryIconEnd ? this.primaryIconEnd : null, "icon-start": this.primaryIconStart ? this.primaryIconStart : null, iconFlipRtl: this.primaryIconFlipRtl ? this.primaryIconFlipRtl : null, kind: this.kind, label: this.primaryLabel, loading: this.loading, onClick: this.calciteSplitButtonPrimaryClickHandler, scale: this.scale, splitChild: "primary", type: "button", width: buttonWidth }, this.primaryText), h("div", { class: CSS.dividerContainer }, h("div", { class: CSS.divider })), h("calcite-dropdown", { disabled: this.disabled, onClick: this.calciteSplitButtonSecondaryClickHandler, open: this.active, overlayPositioning: this.overlayPositioning, placement: "bottom-end", scale: this.scale, width: this.scale }, h("calcite-button", { appearance: this.appearance, disabled: this.disabled, "icon-start": this.dropdownIcon, kind: this.kind, label: this.dropdownLabel, scale: this.scale, slot: "trigger", splitChild: "secondary", type: "button" }), h("slot", null))));
+    return (h("div", { class: CSS.container }, h("calcite-button", { appearance: this.appearance, disabled: this.disabled, "icon-end": this.primaryIconEnd ? this.primaryIconEnd : null, "icon-start": this.primaryIconStart ? this.primaryIconStart : null, iconFlipRtl: this.primaryIconFlipRtl ? this.primaryIconFlipRtl : null, kind: this.kind, label: this.primaryLabel, loading: this.loading, onClick: this.calciteSplitButtonPrimaryClickHandler, scale: this.scale, splitChild: "primary", type: "button", width: buttonWidth }, this.primaryText), h("div", { class: CSS.dividerContainer }, h("div", { class: CSS.divider })), h("calcite-dropdown", { disabled: this.disabled, onClick: this.calciteSplitButtonSecondaryClickHandler, open: this.active, overlayPositioning: this.overlayPositioning, placement: "bottom-end", scale: this.scale, width: this.scale }, h("calcite-button", { appearance: this.appearance, disabled: this.disabled, "icon-start": this.dropdownIcon, kind: this.kind, label: this.dropdownLabel, scale: this.scale, slot: "trigger", splitChild: "secondary", type: "button" }), h("slot", null))));
   }
   get dropdownIcon() {
     return this.dropdownIconType === "chevron"