@esri/solutions-components 0.6.5 → 0.6.6

package/dist/components/refine-selection2.js

@@ -9,28 +9,30 @@ import { f as getFeatureLayerView, i as getIdSets, j as highlightAllFeatures } f
 import { d as queryFeaturesByGeometry } from './queryUtils.js';
 import { s as state } from './publicNotificationStore.js';
 import { g as getLocaleComponentStrings } from './locale.js';
-import { d as defineCustomElement$o } from './action.js';
-import { d as defineCustomElement$n } from './button.js';
-import { d as defineCustomElement$m } from './chip.js';
-import { d as defineCustomElement$l } from './combobox.js';
-import { d as defineCustomElement$k } from './combobox-item.js';
-import { d as defineCustomElement$j } from './dropdown.js';
-import { d as defineCustomElement$i } from './dropdown-group.js';
-import { d as defineCustomElement$h } from './dropdown-item.js';
-import { d as defineCustomElement$g } from './filter2.js';
-import { d as defineCustomElement$f } from './icon.js';
-import { d as defineCustomElement$e } from './input.js';
-import { d as defineCustomElement$d } from './label2.js';
-import { d as defineCustomElement$c } from './list.js';
-import { d as defineCustomElement$b } from './list-item2.js';
-import { d as defineCustomElement$a } from './loader.js';
-import { d as defineCustomElement$9 } from './option.js';
-import { d as defineCustomElement$8 } from './popover.js';
-import { d as defineCustomElement$7 } from './progress.js';
-import { d as defineCustomElement$6 } from './scrim.js';
-import { d as defineCustomElement$5 } from './segmented-control.js';
-import { d as defineCustomElement$4 } from './segmented-control-item.js';
-import { d as defineCustomElement$3 } from './select.js';
+import { d as defineCustomElement$q } from './action.js';
+import { d as defineCustomElement$p } from './button.js';
+import { d as defineCustomElement$o } from './chip.js';
+import { d as defineCustomElement$n } from './combobox.js';
+import { d as defineCustomElement$m } from './combobox-item.js';
+import { d as defineCustomElement$l } from './dropdown.js';
+import { d as defineCustomElement$k } from './dropdown-group.js';
+import { d as defineCustomElement$j } from './dropdown-item.js';
+import { d as defineCustomElement$i } from './filter2.js';
+import { d as defineCustomElement$h } from './handle.js';
+import { d as defineCustomElement$g } from './icon.js';
+import { d as defineCustomElement$f } from './input.js';
+import { d as defineCustomElement$e } from './label2.js';
+import { d as defineCustomElement$d } from './list.js';
+import { d as defineCustomElement$c } from './list-item2.js';
+import { d as defineCustomElement$b } from './loader.js';
+import { d as defineCustomElement$a } from './option.js';
+import { d as defineCustomElement$9 } from './popover.js';
+import { d as defineCustomElement$8 } from './progress.js';
+import { d as defineCustomElement$7 } from './scrim.js';
+import { d as defineCustomElement$6 } from './segmented-control.js';
+import { d as defineCustomElement$5 } from './segmented-control-item.js';
+import { d as defineCustomElement$4 } from './select.js';
+import { d as defineCustomElement$3 } from './stack.js';
 import { d as defineCustomElement$2 } from './map-draw-tools2.js';
 import { d as defineCustomElement$1 } from './map-layer-picker2.js';
 
@@ -439,7 +441,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["refine-selection", "calcite-action", "calcite-button", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-dropdown", "calcite-dropdown-group", "calcite-dropdown-item", "calcite-filter", "calcite-icon", "calcite-input", "calcite-label", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-option", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-segmented-control", "calcite-segmented-control-item", "calcite-select", "map-draw-tools", "map-layer-picker"];
+  const components = ["refine-selection", "calcite-action", "calcite-button", "calcite-chip", "calcite-combobox", "calcite-combobox-item", "calcite-dropdown", "calcite-dropdown-group", "calcite-dropdown-item", "calcite-filter", "calcite-handle", "calcite-icon", "calcite-input", "calcite-label", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-option", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-segmented-control", "calcite-segmented-control-item", "calcite-select", "calcite-stack", "map-draw-tools", "map-layer-picker"];
   components.forEach(tagName => { switch (tagName) {
     case "refine-selection":
       if (!customElements.get(tagName)) {
@@ -448,110 +450,120 @@ function defineCustomElement() {
       break;
     case "calcite-action":
       if (!customElements.get(tagName)) {
-        defineCustomElement$o();
+        defineCustomElement$q();
       }
       break;
     case "calcite-button":
       if (!customElements.get(tagName)) {
-        defineCustomElement$n();
+        defineCustomElement$p();
       }
       break;
     case "calcite-chip":
       if (!customElements.get(tagName)) {
-        defineCustomElement$m();
+        defineCustomElement$o();
       }
       break;
     case "calcite-combobox":
       if (!customElements.get(tagName)) {
-        defineCustomElement$l();
+        defineCustomElement$n();
       }
       break;
     case "calcite-combobox-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$k();
+        defineCustomElement$m();
       }
       break;
     case "calcite-dropdown":
       if (!customElements.get(tagName)) {
-        defineCustomElement$j();
+        defineCustomElement$l();
       }
       break;
     case "calcite-dropdown-group":
       if (!customElements.get(tagName)) {
-        defineCustomElement$i();
+        defineCustomElement$k();
       }
       break;
     case "calcite-dropdown-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$h();
+        defineCustomElement$j();
       }
       break;
     case "calcite-filter":
       if (!customElements.get(tagName)) {
-        defineCustomElement$g();
+        defineCustomElement$i();
+      }
+      break;
+    case "calcite-handle":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$h();
       }
       break;
     case "calcite-icon":
       if (!customElements.get(tagName)) {
-        defineCustomElement$f();
+        defineCustomElement$g();
       }
       break;
     case "calcite-input":
       if (!customElements.get(tagName)) {
-        defineCustomElement$e();
+        defineCustomElement$f();
       }
       break;
     case "calcite-label":
       if (!customElements.get(tagName)) {
-        defineCustomElement$d();
+        defineCustomElement$e();
       }
       break;
     case "calcite-list":
       if (!customElements.get(tagName)) {
-        defineCustomElement$c();
+        defineCustomElement$d();
       }
       break;
     case "calcite-list-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$b();
+        defineCustomElement$c();
       }
       break;
     case "calcite-loader":
       if (!customElements.get(tagName)) {
-        defineCustomElement$a();
+        defineCustomElement$b();
       }
       break;
     case "calcite-option":
       if (!customElements.get(tagName)) {
-        defineCustomElement$9();
+        defineCustomElement$a();
       }
       break;
     case "calcite-popover":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$9();
       }
       break;
     case "calcite-progress":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$8();
       }
       break;
     case "calcite-scrim":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$7();
       }
       break;
     case "calcite-segmented-control":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$6();
       }
       break;
     case "calcite-segmented-control-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "calcite-select":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "calcite-stack":
       if (!customElements.get(tagName)) {
         defineCustomElement$3();
       }

package/dist/components/resources.js

@@ -5,8 +5,8 @@
  */
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.3
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.6.0
  */
 const autoMode = "calcite-mode-auto";
 const darkMode = "calcite-mode-dark";
@@ -22,7 +22,7 @@ const CSS_UTILITY = {
   calciteAnimateInDown: "calcite-animate__in-down",
   calciteAnimateInRight: "calcite-animate__in-right",
   calciteAnimateInLeft: "calcite-animate__in-left",
-  calciteAnimateInScale: "calcite-animate__in-scale"
+  calciteAnimateInScale: "calcite-animate__in-scale",
 };
 
 export { CSS_UTILITY as C, autoMode as a, darkMode as d };

package/dist/components/resources2.js

@@ -5,8 +5,8 @@
  */
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.3
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.6.0
  */
 var KindIcons;
 (function (KindIcons) {

package/dist/components/resources3.js

@@ -5,11 +5,11 @@
  */
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.3
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.6.0
  */
 const CSS = {
-  sticky: "sticky-pos"
+  sticky: "sticky-pos",
 };
 var ICON_TYPES;
 (function (ICON_TYPES) {
@@ -18,7 +18,7 @@ var ICON_TYPES;
   ICON_TYPES["grip"] = "grip";
 })(ICON_TYPES || (ICON_TYPES = {}));
 const SLOTS = {
-  menuActions: "menu-actions"
+  menuActions: "menu-actions",
 };
 
 export { CSS as C, ICON_TYPES as I, SLOTS as S };

package/dist/components/resources4.js

@@ -5,16 +5,16 @@
  */
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.3
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.6.0
  */
 const CSS = {
   heading: "heading",
   container: "container",
-  indented: "container--indented"
+  indented: "container--indented",
 };
 const SLOTS = {
-  parentItem: "parent-item"
+  parentItem: "parent-item",
 };
 
 export { CSS as C, SLOTS as S };

package/dist/components/scrim.js

@@ -4,27 +4,28 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { c as connectLocalized, a as disconnectLocalized } from './locale2.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n.js';
 import { c as createObserver } from './observers.js';
+import { u as slotChangeHasContent } from './dom.js';
 import { d as defineCustomElement$1 } from './loader.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.3
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.6.0
  */
 const CSS = {
   scrim: "scrim",
-  content: "content"
+  content: "content",
 };
 const BREAKPOINTS = {
   s: 72,
   // medium is assumed default.
-  l: 480 // Greater than or equal to 480px.
+  l: 480, // Greater than or equal to 480px.
 };
 
-const scrimCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host{position:absolute;inset:0px;z-index:var(--calcite-app-z-index-overlay);display:flex;block-size:100%;inline-size:100%;flex-direction:column;align-items:stretch}@keyframes calcite-scrim-fade-in{0%{--tw-bg-opacity:0}100%{--tw-text-opacity:1}}.scrim{position:absolute;inset:0px;display:flex;flex-direction:column;align-content:center;align-items:center;justify-content:center;overflow:hidden;animation:calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;background-color:var(--calcite-scrim-background, var(--calcite-scrim-background-internal))}.content{padding:1rem}";
+const scrimCss = ":host{position:absolute;inset:0px;z-index:var(--calcite-app-z-index-overlay);display:flex;block-size:100%;inline-size:100%;flex-direction:column;align-items:stretch}@keyframes calcite-scrim-fade-in{0%{--tw-bg-opacity:0}100%{--tw-text-opacity:1}}.scrim{position:absolute;inset:0px;display:flex;flex-direction:column;align-content:center;align-items:center;justify-content:center;overflow:hidden;animation:calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;background-color:var(--calcite-scrim-background, var(--calcite-scrim-background-internal))}.content{padding:1rem}:host([hidden]){display:none}[hidden]{display:none}";
 
 const Scrim = /*@__PURE__*/ proxyCustomElement(class Scrim extends HTMLElement {
   constructor() {
@@ -37,6 +38,9 @@ const Scrim = /*@__PURE__*/ proxyCustomElement(class Scrim extends HTMLElement {
     //  Private Methods
     //
     // --------------------------------------------------------------------------
+    this.handleDefaultSlotChange = (event) => {
+      this.hasContent = slotChangeHasContent(event);
+    };
     this.storeLoaderEl = (el) => {
       this.loaderEl = el;
       this.handleResize();
@@ -47,6 +51,7 @@ const Scrim = /*@__PURE__*/ proxyCustomElement(class Scrim extends HTMLElement {
     this.loaderScale = undefined;
     this.defaultMessages = undefined;
     this.effectiveLocale = "";
+    this.hasContent = false;
   }
   onMessagesChange() {
     /* wired up by t9n util */
@@ -60,15 +65,19 @@ const Scrim = /*@__PURE__*/ proxyCustomElement(class Scrim extends HTMLElement {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    var _a;
     connectLocalized(this);
     connectMessages(this);
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el);
   }
   async componentWillLoad() {
     await setUpMessages(this);
   }
   disconnectedCallback() {
+    var _a;
     disconnectLocalized(this);
     disconnectMessages(this);
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   // --------------------------------------------------------------------------
   //
@@ -76,11 +85,8 @@ const Scrim = /*@__PURE__*/ proxyCustomElement(class Scrim extends HTMLElement {
   //
   // --------------------------------------------------------------------------
   render() {
-    const { el, loading, messages } = this;
-    const hasContent = el.innerHTML.trim().length > 0;
-    const loaderNode = loading ? (h("calcite-loader", { label: messages.loading, ref: this.storeLoaderEl, scale: this.loaderScale })) : null;
-    const contentNode = hasContent ? (h("div", { class: CSS.content }, h("slot", null))) : null;
-    return (h("div", { class: CSS.scrim }, loaderNode, contentNode));
+    const { hasContent, loading, messages } = this;
+    return (h("div", { class: CSS.scrim }, loading ? (h("calcite-loader", { label: messages.loading, ref: this.storeLoaderEl, scale: this.loaderScale })) : null, h("div", { class: CSS.content, hidden: !hasContent }, h("slot", { onSlotchange: this.handleDefaultSlotChange }))));
   }
   getScale(size) {
     if (size < BREAKPOINTS.s) {
@@ -114,7 +120,8 @@ const Scrim = /*@__PURE__*/ proxyCustomElement(class Scrim extends HTMLElement {
     "messageOverrides": [1040],
     "loaderScale": [32],
     "defaultMessages": [32],
-    "effectiveLocale": [32]
+    "effectiveLocale": [32],
+    "hasContent": [32]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/segmented-control-item.js

@@ -4,22 +4,22 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { e as getElementProp, t as toAriaBoolean } from './dom.js';
+import { y as getElementProp, t as toAriaBoolean } from './dom.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.3
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.6.0
  */
 const SLOTS = {
-  input: "input"
+  input: "input",
 };
 const CSS = {
-  segmentedControlItemIcon: "segmented-control-item-icon"
+  segmentedControlItemIcon: "segmented-control-item-icon",
 };
 
-const segmentedControlItemCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}:host{display:flex;cursor:pointer;align-self:stretch;font-weight:var(--calcite-font-weight-normal);transition:background-color var(--calcite-internal-animation-timing-fast) ease-in-out, border-color var(--calcite-animation-timing) ease-in-out}:host label{pointer-events:none;margin:0.125rem;box-sizing:border-box;display:flex;flex:1 1 0%;align-items:center;color:var(--calcite-ui-text-3);transition:background-color var(--calcite-internal-animation-timing-fast) ease-in-out, border-color var(--calcite-internal-animation-timing-fast) ease-in-out, color var(--calcite-internal-animation-timing-fast) ease-in-out}.label--horizontal{justify-content:center}:host{outline-color:transparent}:host(: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}.label--scale-s{padding-inline:0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem;padding-block:0.125rem}.label--scale-m{padding-inline:0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem;padding-block:0.375rem}.label--scale-l{padding-inline:1rem;padding-block:0.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host(:hover) label{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1)}:host(:active) label{background-color:var(--calcite-ui-foreground-3)}:host([checked]) label{cursor:default;border-color:var(--calcite-ui-brand);background-color:var(--calcite-ui-brand);color:var(--calcite-ui-background)}:host([checked]) .label--outline,:host([checked]) .label--outline-fill{border-color:var(--calcite-ui-brand);background-color:var(--calcite-ui-foreground-1);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand);color:var(--calcite-ui-brand)}:host([checked]) .label--outline{background-color:transparent}::slotted(input){display:none}@media (forced-colors: active){:host([checked]) label{background-color:highlight}:host([checked]) .label--outline,:host([checked]) .label--outline-fill{outline:2px solid transparent;outline-offset:2px}:host([checked]) label:not([class~=label--outline]) .segmented-control-item-icon{color:highlightText}}.segmented-control-item-icon{position:relative;margin:0px;display:inline-flex;line-height:inherit}:host([icon-start]) .label--scale-s .segmented-control-item-icon{margin-inline-end:0.5rem}:host([icon-end]) .label--scale-s .segmented-control-item-icon{margin-inline-start:0.5rem}:host([icon-start]) .label--scale-m .segmented-control-item-icon{margin-inline-end:0.75rem}:host([icon-end]) .label--scale-m .segmented-control-item-icon{margin-inline-start:0.75rem}:host([icon-start]) .label--scale-l .segmented-control-item-icon{margin-inline-end:1rem}:host([icon-end]) .label--scale-l .segmented-control-item-icon{margin-inline-start:1rem}";
+const segmentedControlItemCss = ":host{display:flex;cursor:pointer;align-self:stretch;font-weight:var(--calcite-font-weight-normal);transition:background-color var(--calcite-internal-animation-timing-fast) ease-in-out, border-color var(--calcite-animation-timing) ease-in-out}:host label{pointer-events:none;margin:0.125rem;box-sizing:border-box;display:flex;flex:1 1 0%;align-items:center;color:var(--calcite-ui-text-3);transition:background-color var(--calcite-internal-animation-timing-fast) ease-in-out, border-color var(--calcite-internal-animation-timing-fast) ease-in-out, color var(--calcite-internal-animation-timing-fast) ease-in-out}.label--horizontal{justify-content:center}:host{outline-color:transparent}:host(: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}.label--scale-s{padding-inline:0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem;padding-block:0.125rem}.label--scale-m{padding-inline:0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem;padding-block:0.375rem}.label--scale-l{padding-inline:1rem;padding-block:0.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host(:hover) label{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1)}:host(:active) label{background-color:var(--calcite-ui-foreground-3)}:host([checked]) label{cursor:default;border-color:var(--calcite-ui-brand);background-color:var(--calcite-ui-brand);color:var(--calcite-ui-background)}:host([checked]) .label--outline,:host([checked]) .label--outline-fill{border-color:var(--calcite-ui-brand);background-color:var(--calcite-ui-foreground-1);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand);color:var(--calcite-ui-brand)}:host([checked]) .label--outline{background-color:transparent}::slotted(input){display:none}@media (forced-colors: active){:host([checked]) label{background-color:highlight}:host([checked]) .label--outline,:host([checked]) .label--outline-fill{outline:2px solid transparent;outline-offset:2px}:host([checked]) label:not([class~=label--outline]) .segmented-control-item-icon{color:highlightText}}.segmented-control-item-icon{position:relative;margin:0px;display:inline-flex;line-height:inherit}:host([icon-start]) .label--scale-s .segmented-control-item-icon{margin-inline-end:0.5rem}:host([icon-end]) .label--scale-s .segmented-control-item-icon{margin-inline-start:0.5rem}:host([icon-start]) .label--scale-m .segmented-control-item-icon{margin-inline-end:0.75rem}:host([icon-end]) .label--scale-m .segmented-control-item-icon{margin-inline-start:0.75rem}:host([icon-start]) .label--scale-l .segmented-control-item-icon{margin-inline-end:1rem}:host([icon-end]) .label--scale-l .segmented-control-item-icon{margin-inline-start:1rem}:host([hidden]){display:none}[hidden]{display:none}";
 
 const SegmentedControlItem = /*@__PURE__*/ proxyCustomElement(class SegmentedControlItem extends HTMLElement {
   constructor() {
@@ -49,7 +49,7 @@ const SegmentedControlItem = /*@__PURE__*/ proxyCustomElement(class SegmentedCon
         "label--scale-l": scale === "l",
         "label--horizontal": layout === "horizontal",
         "label--outline": appearance === "outline",
-        "label--outline-fill": appearance === "outline-fill"
+        "label--outline-fill": appearance === "outline-fill",
       } }, this.iconStart ? iconStartEl : null, h("slot", null, value), h("slot", { name: SLOTS.input }), this.iconEnd ? iconEndEl : null)));
   }
   get el() { return this; }

package/dist/components/segmented-control.js

@@ -8,9 +8,9 @@ import { g as getElementDir } from './dom.js';
 import { a as afterConnectDefaultValueSet, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive.js';
 import { c as connectLabel, d as disconnectLabel } from './label.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
 
-const segmentedControlCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}: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:flex;background-color:var(--calcite-ui-foreground-1);inline-size:-moz-fit-content;inline-size:fit-content;outline:1px solid var(--calcite-ui-border-input);outline-offset:-1px}:host([appearance=outline]){background-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([layout=vertical]){flex-direction:column;align-items:flex-start;align-self:flex-start}:host([width=full]){inline-size:100%;min-inline-size:-moz-fit-content;min-inline-size:fit-content}:host([width=full]) ::slotted(calcite-segmented-control-item){flex:1 1 auto}:host([width=full][layout=vertical]) ::slotted(calcite-segmented-control-item){justify-content:flex-start}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
+const segmentedControlCss = ":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:flex;background-color:var(--calcite-ui-foreground-1);inline-size:-moz-fit-content;inline-size:fit-content;outline:1px solid var(--calcite-ui-border-input);outline-offset:-1px}:host([appearance=outline]){background-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([layout=vertical]){flex-direction:column;align-items:flex-start;align-self:flex-start}:host([width=full]){inline-size:100%;min-inline-size:-moz-fit-content;min-inline-size:fit-content}:host([width=full]) ::slotted(calcite-segmented-control-item){flex:1 1 auto}:host([width=full][layout=vertical]) ::slotted(calcite-segmented-control-item){justify-content:flex-start}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
 
 const SegmentedControl = /*@__PURE__*/ proxyCustomElement(class SegmentedControl extends HTMLElement {
   constructor() {
@@ -153,7 +153,7 @@ const SegmentedControl = /*@__PURE__*/ proxyCustomElement(class SegmentedControl
   /** Sets focus on the component. */
   async setFocus() {
     var _a;
-    await componentLoaded(this);
+    await componentFocusable(this);
     (_a = (this.selectedItem || this.getItems()[0])) === null || _a === void 0 ? void 0 : _a.focus();
   }
   //--------------------------------------------------------------------------

package/dist/components/select.js

@@ -8,22 +8,22 @@ import { f as focusElement } from './dom.js';
 import { c as connectForm, d as disconnectForm, a as afterConnectDefaultValueSet, H as HiddenFormInputSlot } from './form.js';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive.js';
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
 import { c as createObserver } from './observers.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.3
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.6.0
  */
 const CSS = {
   icon: "icon",
   iconContainer: "icon-container",
-  select: "select"
+  select: "select",
 };
 
-const selectCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:host{--calcite-icon-size:1rem;--calcite-spacing-eighth:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}: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{position:relative;display:flex;align-items:stretch;inline-size:var(--select-width)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([scale=s]){block-size:1.5rem;--calcite-select-font-size:var(--calcite-font-size--2);--calcite-select-spacing-inline:0.5rem 2rem}:host([scale=s]) .icon-container{padding-inline:0.5rem}:host([scale=m]){block-size:2rem;--calcite-select-font-size:var(--calcite-font-size--1);--calcite-select-spacing-inline:0.75rem 2.5rem}:host([scale=m]) .icon-container{padding-inline:0.75rem}:host([scale=l]){block-size:44px;--calcite-select-font-size:var(--calcite-font-size-0);--calcite-select-spacing-inline:1rem 3rem}:host([scale=l]) .icon-container{padding-inline:1rem}:host([width=auto]){inline-size:auto}:host([width=half]){inline-size:50%}:host([width=full]){inline-size:100%}.select{margin:0px;box-sizing:border-box;inline-size:100%;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:0px;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-foreground-1);font-family:inherit;color:var(--calcite-ui-text-2);outline-color:transparent;font-size:var(--calcite-select-font-size);padding-inline:var(--calcite-select-spacing-inline);border-inline-end-width:0px}.select: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          )}.select:hover{background-color:var(--calcite-ui-foreground-2)}select:disabled{border-color:var(--calcite-ui-border-input);--tw-bg-opacity:1}.icon-container{pointer-events:none;position:absolute;inset-block:0px;display:flex;align-items:center;border-width:0px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:transparent;color:var(--calcite-ui-text-2);inset-inline-end:0px;border-inline-width:0px 1px}.select:focus~.icon-container{border-color:transparent}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
+const selectCss = ":host{--calcite-icon-size:1rem;--calcite-spacing-eighth:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}: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{position:relative;display:flex;align-items:stretch;inline-size:var(--select-width)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([scale=s]){block-size:1.5rem;--calcite-select-font-size:var(--calcite-font-size--2);--calcite-select-spacing-inline:0.5rem 2rem}:host([scale=s]) .icon-container{padding-inline:0.5rem}:host([scale=m]){block-size:2rem;--calcite-select-font-size:var(--calcite-font-size--1);--calcite-select-spacing-inline:0.75rem 2.5rem}:host([scale=m]) .icon-container{padding-inline:0.75rem}:host([scale=l]){block-size:44px;--calcite-select-font-size:var(--calcite-font-size-0);--calcite-select-spacing-inline:1rem 3rem}:host([scale=l]) .icon-container{padding-inline:1rem}:host([width=auto]){inline-size:auto}:host([width=half]){inline-size:50%}:host([width=full]){inline-size:100%}.select{margin:0px;box-sizing:border-box;inline-size:100%;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:0px;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-foreground-1);font-family:inherit;color:var(--calcite-ui-text-2);outline-color:transparent;font-size:var(--calcite-select-font-size);padding-inline:var(--calcite-select-spacing-inline);border-inline-end-width:0px}.select: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          )}.select:hover{background-color:var(--calcite-ui-foreground-2)}select:disabled{border-color:var(--calcite-ui-border-input);--tw-bg-opacity:1}.icon-container{pointer-events:none;position:absolute;inset-block:0px;display:flex;align-items:center;border-width:0px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:transparent;color:var(--calcite-ui-text-2);inset-inline-end:0px;border-inline-width:0px 1px}.select:focus~.icon-container{border-color:transparent}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}";
 
 function isOption(optionOrGroup) {
   return optionOrGroup.tagName === "CALCITE-OPTION";
@@ -85,7 +85,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     const { el } = this;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(el, {
       subtree: true,
-      childList: true
+      childList: true,
     });
     connectInteractive(this);
     connectLabel(this);
@@ -116,7 +116,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    await componentLoaded(this);
+    await componentFocusable(this);
     focusElement(this.selectEl);
   }
   handleOptionOrGroupChange(event) {

package/dist/components/shared-list-render.js

@@ -12,8 +12,8 @@ import { C as CSS, S as SLOTS$1 } from './resources3.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.3
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.6.0
  */
 function mutationObserverCallback() {
   this.setUpItems();
@@ -321,16 +321,16 @@ function getItemData() {
     label: item.label,
     description: item.description,
     metadata: item.metadata,
-    value: item.value
+    value: item.value,
   }));
 }
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.3
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.6.0
  */
-const List = ({ props: { disabled, loading, filterEnabled, dataForFilter, handleFilterEvent, filterPlaceholder, filterText, setFilterEl, dragEnabled, storeAssistiveEl }, ...rest }) => {
+const List = ({ props: { disabled, loading, filterEnabled, dataForFilter, handleFilterEvent, filterPlaceholder, filterText, setFilterEl, dragEnabled, storeAssistiveEl, }, ...rest }) => {
   const defaultSlot = h("slot", null);
   return (h(Host, { "aria-busy": toAriaBoolean(loading), role: "menu", ...rest }, h("section", null, dragEnabled ? (h("span", { "aria-live": "assertive", class: "assistive-text",
     // eslint-disable-next-line react/jsx-sort-props