@esri/solutions-components 0.6.2 → 0.6.3

package/dist/esm/calcite-rating.entry.js

@@ -4,22 +4,23 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-d298aca9.js';
-import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-58f5ab7c.js';
-import { g as guid } from './guid-5c8ddb45.js';
-import { u as updateHostInteraction } from './interactive-eaa1e00b.js';
-import { c as connectLabel, d as disconnectLabel } from './label-10a81bc6.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable-fca3f617.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-b550eae4.js';
-import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-4c43412c.js';
-import './dom-e14bb980.js';
-import './resources-a9874e81.js';
-import './key-2c25459c.js';
-import './observers-b17e5da7.js';
+import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-8396f037.js';
+import { g as guid } from './guid-1fbbc894.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-e5b2cca0.js';
+import { c as connectLabel, d as disconnectLabel } from './label-6db1573f.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable-3cf62971.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-ead7fa24.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-ece1047e.js';
+import './dom-03275741.js';
+import './resources-ee3b03a3.js';
+import './browser-f8ca09b7.js';
+import './key-d6bc268b.js';
+import './observers-76deadbc.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.2
+ * v1.4.3
  */
 const StarIcon = ({ full, scale, partial }) => (h("calcite-icon", { ...{
     class: partial ? undefined : "icon",
@@ -158,6 +159,7 @@ const Rating = class {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
     connectLabel(this);
@@ -206,6 +208,7 @@ const Rating = class {
     setComponentLoaded(this);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
     disconnectLabel(this);

package/dist/esm/calcite-scrim.entry.js

@@ -4,32 +4,48 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { r as registerInstance, h, g as getElement } from './index-d298aca9.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-b550eae4.js';
-import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-4c43412c.js';
-import './dom-e14bb980.js';
-import './guid-5c8ddb45.js';
-import './resources-a9874e81.js';
-import './key-2c25459c.js';
-import './observers-b17e5da7.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-ead7fa24.js';
+import { u as updateMessages, c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n-ece1047e.js';
+import { c as createObserver } from './observers-76deadbc.js';
+import './dom-03275741.js';
+import './guid-1fbbc894.js';
+import './resources-ee3b03a3.js';
+import './key-d6bc268b.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.2
+ * v1.4.3
  */
 const CSS = {
   scrim: "scrim",
   content: "content"
 };
+const BREAKPOINTS = {
+  s: 72,
+  // medium is assumed default.
+  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 Scrim = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.resizeObserver = createObserver("resize", () => this.handleResize());
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.storeLoaderEl = (el) => {
+      this.loaderEl = el;
+      this.handleResize();
+    };
     this.loading = false;
     this.messages = undefined;
     this.messageOverrides = undefined;
+    this.loaderScale = undefined;
     this.defaultMessages = undefined;
     this.effectiveLocale = "";
   }
@@ -63,10 +79,29 @@ const Scrim = class {
   render() {
     const { el, loading, messages } = this;
     const hasContent = el.innerHTML.trim().length > 0;
-    const loaderNode = loading ? h("calcite-loader", { label: messages.loading }) : null;
+    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));
   }
+  getScale(size) {
+    if (size < BREAKPOINTS.s) {
+      return "s";
+    }
+    else if (size >= BREAKPOINTS.l) {
+      return "l";
+    }
+    else {
+      return "m";
+    }
+  }
+  handleResize() {
+    var _a;
+    const { loaderEl, el } = this;
+    if (!loaderEl) {
+      return;
+    }
+    this.loaderScale = this.getScale((_a = Math.min(el.clientHeight, el.clientWidth)) !== null && _a !== void 0 ? _a : 0);
+  }
   static get assetsDirs() { return ["assets"]; }
   get el() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/calcite-segmented-control_2.entry.js

@@ -0,0 +1,253 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-d298aca9.js';
+import { b as getElementDir, g as getElementProp, t as toAriaBoolean } from './dom-03275741.js';
+import { a as afterConnectDefaultValueSet, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form-8396f037.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-e5b2cca0.js';
+import { c as connectLabel, d as disconnectLabel } from './label-6db1573f.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable-3cf62971.js';
+import './guid-1fbbc894.js';
+import './resources-ee3b03a3.js';
+import './browser-f8ca09b7.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 SegmentedControl = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteSegmentedControlChange = createEvent(this, "calciteSegmentedControlChange", 6);
+    //--------------------------------------------------------------------------
+    //
+    //  Event Listeners
+    //
+    //--------------------------------------------------------------------------
+    this.handleClick = (event) => {
+      if (this.disabled) {
+        return;
+      }
+      if (event.target.localName === "calcite-segmented-control-item") {
+        this.selectItem(event.target, true);
+      }
+    };
+    this.appearance = "solid";
+    this.disabled = false;
+    this.form = undefined;
+    this.required = false;
+    this.layout = "horizontal";
+    this.name = undefined;
+    this.scale = "m";
+    this.value = null;
+    this.selectedItem = undefined;
+    this.width = "auto";
+  }
+  valueHandler(value) {
+    const items = this.getItems();
+    items.forEach((item) => (item.checked = item.value === value));
+  }
+  handleSelectedItemChange(newItem, oldItem) {
+    this.value = newItem === null || newItem === void 0 ? void 0 : newItem.value;
+    if (newItem === oldItem) {
+      return;
+    }
+    const items = this.getItems();
+    const match = items.filter((item) => item === newItem).pop();
+    if (match) {
+      this.selectItem(match);
+    }
+    else if (items[0]) {
+      items[0].tabIndex = 0;
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  componentWillLoad() {
+    setUpLoadableComponent(this);
+    const items = this.getItems();
+    const lastChecked = items.filter((item) => item.checked).pop();
+    if (lastChecked) {
+      this.selectItem(lastChecked);
+    }
+    else if (items[0]) {
+      items[0].tabIndex = 0;
+    }
+  }
+  componentDidLoad() {
+    afterConnectDefaultValueSet(this, this.value);
+    setComponentLoaded(this);
+  }
+  connectedCallback() {
+    connectInteractive(this);
+    connectLabel(this);
+    connectForm(this);
+  }
+  disconnectedCallback() {
+    disconnectInteractive(this);
+    disconnectLabel(this);
+    disconnectForm(this);
+  }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
+  render() {
+    return (h(Host, { onClick: this.handleClick, role: "radiogroup" }, h("slot", null), h(HiddenFormInputSlot, { component: this })));
+  }
+  handleSelected(event) {
+    event.preventDefault();
+    this.selectItem(event.target);
+    event.stopPropagation();
+  }
+  handleKeyDown(event) {
+    const keys = ["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", " "];
+    const { key } = event;
+    const { el, selectedItem } = this;
+    if (keys.indexOf(key) === -1) {
+      return;
+    }
+    let adjustedKey = key;
+    if (getElementDir(el) === "rtl") {
+      if (key === "ArrowRight") {
+        adjustedKey = "ArrowLeft";
+      }
+      if (key === "ArrowLeft") {
+        adjustedKey = "ArrowRight";
+      }
+    }
+    const items = this.getItems();
+    let selectedIndex = -1;
+    items.forEach((item, index) => {
+      if (item === selectedItem) {
+        selectedIndex = index;
+      }
+    });
+    switch (adjustedKey) {
+      case "ArrowLeft":
+      case "ArrowUp":
+        event.preventDefault();
+        const previous = selectedIndex < 1 ? items[items.length - 1] : items[selectedIndex - 1];
+        this.selectItem(previous, true);
+        return;
+      case "ArrowRight":
+      case "ArrowDown":
+        event.preventDefault();
+        const next = selectedIndex === -1 ? items[1] : items[selectedIndex + 1] || items[0];
+        this.selectItem(next, true);
+        return;
+      case " ":
+        event.preventDefault();
+        this.selectItem(event.target, true);
+        return;
+      default:
+        return;
+    }
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Methods
+  //
+  // --------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    var _a;
+    await componentLoaded(this);
+    (_a = (this.selectedItem || this.getItems()[0])) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  onLabelClick() {
+    this.setFocus();
+  }
+  getItems() {
+    return Array.from(this.el.querySelectorAll("calcite-segmented-control-item"));
+  }
+  selectItem(selected, emit = false) {
+    if (selected === this.selectedItem) {
+      return;
+    }
+    const items = this.getItems();
+    let match = null;
+    items.forEach((item) => {
+      const matches = item === selected;
+      if ((matches && !item.checked) || (!matches && item.checked)) {
+        item.checked = matches;
+      }
+      item.tabIndex = matches ? 0 : -1;
+      if (matches) {
+        match = item;
+        if (emit) {
+          this.calciteSegmentedControlChange.emit();
+        }
+      }
+    });
+    this.selectedItem = match;
+    if (match) {
+      match.focus();
+    }
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "value": ["valueHandler"],
+    "selectedItem": ["handleSelectedItemChange"]
+  }; }
+};
+SegmentedControl.style = segmentedControlCss;
+
+/*!
+ * 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
+ */
+const SLOTS = {
+  input: "input"
+};
+const CSS = {
+  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{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}:host([icon-end]) .label--scale-s .segmented-control-item-icon{-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}:host([icon-start]) .label--scale-m .segmented-control-item-icon{-webkit-margin-end:0.75rem;margin-inline-end:0.75rem}:host([icon-end]) .label--scale-m .segmented-control-item-icon{-webkit-margin-start:0.75rem;margin-inline-start:0.75rem}:host([icon-start]) .label--scale-l .segmented-control-item-icon{-webkit-margin-end:1rem;margin-inline-end:1rem}:host([icon-end]) .label--scale-l .segmented-control-item-icon{-webkit-margin-start:1rem;margin-inline-start:1rem}";
+
+const SegmentedControlItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteInternalSegmentedControlItemChange = createEvent(this, "calciteInternalSegmentedControlItemChange", 6);
+    this.checked = false;
+    this.iconFlipRtl = false;
+    this.iconStart = undefined;
+    this.iconEnd = undefined;
+    this.value = undefined;
+  }
+  handleCheckedChange() {
+    this.calciteInternalSegmentedControlItemChange.emit();
+  }
+  render() {
+    const { checked, value } = this;
+    const scale = getElementProp(this.el, "scale", "m");
+    const appearance = getElementProp(this.el, "appearance", "solid");
+    const layout = getElementProp(this.el, "layout", "horizontal");
+    const iconStartEl = this.iconStart ? (h("calcite-icon", { class: CSS.segmentedControlItemIcon, flipRtl: this.iconFlipRtl, icon: this.iconStart, key: "icon-start", scale: "s" })) : null;
+    const iconEndEl = this.iconEnd ? (h("calcite-icon", { class: CSS.segmentedControlItemIcon, flipRtl: this.iconFlipRtl, icon: this.iconEnd, key: "icon-end", scale: "s" })) : null;
+    return (h(Host, { "aria-checked": toAriaBoolean(checked), "aria-label": value, role: "radio" }, h("label", { class: {
+        "label--scale-s": scale === "s",
+        "label--scale-m": scale === "m",
+        "label--scale-l": scale === "l",
+        "label--horizontal": layout === "horizontal",
+        "label--outline": appearance === "outline",
+        "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 getElement(this); }
+  static get watchers() { return {
+    "checked": ["handleCheckedChange"]
+  }; }
+};
+SegmentedControlItem.style = segmentedControlItemCss;
+
+export { SegmentedControl as calcite_segmented_control, SegmentedControlItem as calcite_segmented_control_item };

package/dist/esm/calcite-shell-center-row.entry.js

@@ -4,16 +4,16 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { r as registerInstance, h, g as getElement, F as Fragment } from './index-d298aca9.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-e9ec914f.js';
-import { a as getSlotted } from './dom-e14bb980.js';
-import './observers-b17e5da7.js';
-import './guid-5c8ddb45.js';
-import './resources-a9874e81.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-b651e48a.js';
+import { a as getSlotted } from './dom-03275741.js';
+import './observers-76deadbc.js';
+import './guid-1fbbc894.js';
+import './resources-ee3b03a3.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.2
+ * v1.4.3
  */
 const CSS = {
   actionBarContainer: "action-bar-container",

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

@@ -4,26 +4,27 @@
  * 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-d298aca9.js';
-import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-e9ec914f.js';
-import { b as getElementDir, i as isPrimaryPointerButton, s as slotChangeGetAssignedElements, a as getSlotted, n as nodeListToArray, h as focusElementInGroup, v as filterDirectChildren, g as getElementProp, t as toAriaBoolean, j as focusElement } from './dom-e14bb980.js';
-import { c as connectLocalized, d as disconnectLocalized } from './locale-b550eae4.js';
-import { c as clamp } from './math-778f9699.js';
-import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-4c43412c.js';
-import { C as CSS_UTILITY } from './resources-a9874e81.js';
-import { g as guid } from './guid-5c8ddb45.js';
-import { c as createObserver } from './observers-b17e5da7.js';
-import { u as updateHostInteraction } from './interactive-eaa1e00b.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable-fca3f617.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-86d8dcb7.js';
-import { d as disconnectSortableComponent, c as connectSortableComponent, o as onSortingStart, a as onSortingEnd } from './sortableComponent-267e5853.js';
-import { C as CSS$3, S as SLOTS$3 } from './resources-ac65ccee.js';
-import { I as ICON_TYPES$1 } from './resources-bf1eeffc.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-b651e48a.js';
+import { b as getElementDir, i as isPrimaryPointerButton, s as slotChangeGetAssignedElements, a as getSlotted, n as nodeListToArray, f as focusElementInGroup, x as filterDirectChildren, g as getElementProp, t as toAriaBoolean, e as focusElement } from './dom-03275741.js';
+import { c as connectLocalized, d as disconnectLocalized } from './locale-ead7fa24.js';
+import { c as clamp } from './math-5e1080da.js';
+import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-ece1047e.js';
+import { C as CSS_UTILITY } from './resources-ee3b03a3.js';
+import { g as guid } from './guid-1fbbc894.js';
+import { c as createObserver } from './observers-76deadbc.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-e5b2cca0.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable-3cf62971.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-19de1661.js';
+import { d as disconnectSortableComponent, c as connectSortableComponent, o as onSortingStart, a as onSortingEnd } from './sortableComponent-dab8ef70.js';
+import { C as CSS$3, S as SLOTS$3 } from './resources-e7e4115c.js';
+import { I as ICON_TYPES$1 } from './resources-4d6ec614.js';
 import { g as getLocaleComponentStrings } from './locale-54cac39a.js';
-import { s as state, E as EFileType } from './solution-store-70f874f8.js';
-import { d as EUpdateType } from './interfaces-523c6558.js';
-import './key-2c25459c.js';
-import './array-af5e433b.js';
-import './resources-23bce35b.js';
+import { s as state, E as EFileType } from './solution-store-c107ca4d.js';
+import { d as EUpdateType } from './interfaces-bf20e69c.js';
+import './key-d6bc268b.js';
+import './browser-f8ca09b7.js';
+import './array-e32fb269.js';
+import './resources-a3b9b875.js';
 import './debounce-4c884e5c.js';
 import './_commonjsHelpers-d5f9d613.js';
 import './index-4c4a4f3d.js';
@@ -31,7 +32,7 @@ import './index-4c4a4f3d.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.2
+ * v1.4.3
  */
 const CSS$2 = {
   container: "container",
@@ -739,7 +740,7 @@ TabNav.style = tabNavCss;
 /*!
  * 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.2
+ * v1.4.3
  */
 const CSS$1 = {
   closeButton: "close-button",
@@ -822,6 +823,7 @@ const TabTitle = class {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
     this.setupTextContentObserver();
@@ -836,6 +838,7 @@ const TabTitle = class {
       detail: this.el
     }));
     (_c = this.resizeObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
+    disconnectInteractive(this);
     disconnectLocalized(this);
     disconnectMessages(this);
   }
@@ -1016,7 +1019,7 @@ TabTitle.style = tabTitleCss;
 /*!
  * 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.2
+ * v1.4.3
  */
 const SLOTS$1 = {
   titleGroup: "title-group"
@@ -1136,7 +1139,7 @@ Tabs.style = tabsCss;
 /*!
  * 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.2
+ * v1.4.3
  */
 const CSS = {
   container: "container",
@@ -1150,7 +1153,7 @@ var ICON_TYPES;
 /*!
  * 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.2
+ * v1.4.3
  */
 function getScreenReaderText(item, status, valueList) {
   const { items, messages } = valueList;
@@ -1279,6 +1282,7 @@ const ValueList = class {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
+    connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
     initialize.call(this);
@@ -1297,6 +1301,7 @@ const ValueList = class {
     updateHostInteraction(this);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectSortableComponent(this);
     disconnectLocalized(this);
     disconnectMessages(this);
@@ -1424,7 +1429,7 @@ ValueList.style = valueListCss;
 /*!
  * 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.2
+ * v1.4.3
  */
 const ICONS = {
   drag: "drag"
@@ -1482,9 +1487,11 @@ const ValueListItem = class {
   // --------------------------------------------------------------------------
   connectedCallback() {
     connectConditionalSlotComponent(this);
+    connectInteractive(this);
   }
   disconnectedCallback() {
     disconnectConditionalSlotComponent(this);
+    disconnectInteractive(this);
   }
   componentWillLoad() {
     setUpLoadableComponent(this);

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

@@ -4,17 +4,18 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-d298aca9.js';
-import { u as updateHostInteraction } from './interactive-eaa1e00b.js';
-import { c as createObserver } from './observers-b17e5da7.js';
-import { d as disconnectSortableComponent, c as connectSortableComponent, o as onSortingStart, a as onSortingEnd } from './sortableComponent-267e5853.js';
-import { j as focusElement } from './dom-e14bb980.js';
-import './guid-5c8ddb45.js';
-import './resources-a9874e81.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive-e5b2cca0.js';
+import { c as createObserver } from './observers-76deadbc.js';
+import { d as disconnectSortableComponent, c as connectSortableComponent, o as onSortingStart, a as onSortingEnd } from './sortableComponent-dab8ef70.js';
+import { e as focusElement } from './dom-03275741.js';
+import './browser-f8ca09b7.js';
+import './guid-1fbbc894.js';
+import './resources-ee3b03a3.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.2
+ * v1.4.3
  */
 const CSS = {
   sortItem: "sort-item",
@@ -48,8 +49,10 @@ const SortableList = class {
   connectedCallback() {
     this.setUpSorting();
     this.beginObserving();
+    connectInteractive(this);
   }
   disconnectedCallback() {
+    disconnectInteractive(this);
     disconnectSortableComponent(this);
     this.endObserving();
   }