@esri/calcite-components 1.0.0-next.282 → 1.0.0-next.283

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

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-1554a132.js';
-import { d as defaultOffsetDistance, u as updatePopper, c as createPopper, C as CSS$1 } from './popper-58fae6b8.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-f8f0bea7.js';
+import { d as defaultOffsetDistance, u as updatePopper, c as createPopper, C as CSS$1 } from './popper-2757192a.js';
 import { g as guid } from './guid-09142681.js';
-import { q as queryElementRoots, g as getElementDir, C as CSS_UTILITY, j as queryElementsRoots } from './dom-0b02c0cf.js';
-import { C as CalciteHeading } from './CalciteHeading-ea5ec96c.js';
+import { q as queryElementRoots, g as getElementDir, C as CSS_UTILITY, h as queryElementsRoots } from './dom-b369a031.js';
+import { C as CalciteHeading } from './CalciteHeading-29855e9f.js';
 
 const CSS = {
   container: "container",
@@ -169,6 +169,7 @@ const CalcitePopover = class {
   //  Public Methods
   //
   // --------------------------------------------------------------------------
+  /** Updates the position of the component. */
   async reposition() {
     const { popper, el, placement } = this;
     const modifiers = this.getModifiers();
@@ -181,6 +182,7 @@ const CalcitePopover = class {
       })
       : this.createPopper();
   }
+  /** Sets focus on the component. */
   async setFocus(focusId) {
     var _a;
     const { closeButtonEl } = this;
@@ -191,6 +193,7 @@ const CalcitePopover = class {
     }
     (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
   }
+  /** Toggles the popover's open property. */
   async toggle(value = !this.open) {
     this.open = value;
   }
@@ -303,6 +306,10 @@ const CalcitePopoverManager = class {
      * @default `[data-calcite-popover-reference]`
      */
     this.selector = `[${POPOVER_REFERENCE}]`;
+    /**
+     * Automatically closes any currently open popovers when clicking outside of a popover.
+     */
+    this.autoClose = false;
     //--------------------------------------------------------------------------
     //
     //  Private Methods

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-1554a132.js';
+import { r as registerInstance, h, g as getElement } from './index-f8f0bea7.js';
 
 const calciteProgressCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:300ms}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{position:relative;display:block;width:100%}.track,.bar{position:absolute;top:0;height:2px}.track{z-index:0;width:100%;overflow:hidden;background:var(--calcite-ui-border-3)}.bar{background-color:var(--calcite-ui-brand);z-index:0}.indeterminate{width:20%;-webkit-animation:looping-progress-bar-ani 2200ms linear infinite;animation:looping-progress-bar-ani 2200ms linear infinite}.reversed{animation-direction:reverse}.text{padding-top:1rem;padding-bottom:0;padding-left:0;padding-right:0;text-align:center;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-medium)}@-webkit-keyframes looping-progress-bar-ani{0%{-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0)}50%{width:40%}100%{-webkit-transform:translate3d(600%, 0, 0);transform:translate3d(600%, 0, 0)}}@keyframes looping-progress-bar-ani{0%{-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0)}50%{width:40%}100%{-webkit-transform:translate3d(600%, 0, 0);transform:translate3d(600%, 0, 0)}}";
 

package/dist/esm/calcite-radio-button-group.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-1554a132.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f8f0bea7.js';
 
 const calciteRadioButtonGroupCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:300ms}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex;max-width:100vw}:host([layout=horizontal]){-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}:host([layout=horizontal][scale=s]){grid-gap:1rem;gap:1rem}:host([layout=horizontal][scale=m]){grid-gap:1.25rem;gap:1.25rem}:host([layout=horizontal][scale=l]){grid-gap:1.5rem;gap:1.5rem}:host([layout=vertical]){-ms-flex-direction:column;flex-direction:column}";
 

package/dist/esm/calcite-radio-group_2.entry.js

@@ -1,6 +1,8 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-1554a132.js';
-import { h as hasLabel, g as getElementDir, d as getElementProp } from './dom-0b02c0cf.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f8f0bea7.js';
+import { g as getElementDir, d as getElementProp } from './dom-b369a031.js';
 import { g as getKey } from './key-ec82f942.js';
+import { c as connectLabel, d as disconnectLabel } from './label-7b249c54.js';
+import { c as createObserver } from './observers-c93d4fe5.js';
 import './guid-09142681.js';
 
 const calciteRadioGroupCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:300ms}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex;background-color:var(--calcite-ui-foreground-1);width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;outline:1px solid var(--calcite-ui-border-input);outline-offset:-1px}:host([layout=vertical]){-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;-ms-flex-item-align:start;align-self:flex-start}:host([width=full]){width:100%;min-width:-moz-fit-content;min-width:-webkit-fit-content;min-width:fit-content}:host([width=full]) ::slotted(calcite-radio-group-item){-ms-flex:1 1 auto;flex:1 1 auto}:host([width=full][layout=vertical]) ::slotted(calcite-radio-group-item){-ms-flex-pack:start;justify-content:flex-start}::slotted(calcite-radio-group-item[checked]),::slotted(calcite-radio-group-item:focus){z-index:0}:host([disabled]){opacity:var(--calcite-ui-opacity-disabled);pointer-events:none}";
@@ -16,6 +18,8 @@ const CalciteRadioGroup = class {
     //--------------------------------------------------------------------------
     /** specify the appearance style of the radio group, defaults to solid. */
     this.appearance = "solid";
+    /** is the radio group disabled  */
+    this.disabled = false;
     /** specify the layout of the radio group, defaults to horizontal */
     this.layout = "horizontal";
     /** The scale of the radio group */
@@ -24,15 +28,28 @@ const CalciteRadioGroup = class {
     this.width = "auto";
     //--------------------------------------------------------------------------
     //
-    //  Private State/Props
+    //  Event Listeners
     //
     //--------------------------------------------------------------------------
+    this.handleClick = (event) => {
+      if (event.target.localName === "calcite-radio-group-item") {
+        this.selectItem(event.target);
+      }
+    };
     this.hiddenInput = (() => {
       const input = document.createElement("input");
       input.type = "hidden";
       this.el.appendChild(input);
       return input;
     })();
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.onLabelClick = () => {
+      this.setFocus();
+    };
   }
   handleNameChange(value) {
     this.hiddenInput.name = value;
@@ -76,27 +93,16 @@ const CalciteRadioGroup = class {
     if (lastChecked) {
       hiddenInput.value = lastChecked.value;
     }
+    connectLabel(this);
+  }
+  disconnectedCallback() {
+    disconnectLabel(this);
   }
   componentDidLoad() {
     this.hasLoaded = true;
   }
   render() {
-    return (h(Host, { role: "radiogroup", tabIndex: this.disabled ? -1 : null }, h("slot", null)));
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Event Listeners
-  //
-  //--------------------------------------------------------------------------
-  handleLabelFocus(e) {
-    if (hasLabel(e.detail.labelEl, this.el)) {
-      this.setFocus();
-    }
-  }
-  handleClick(event) {
-    if (event.target.localName === "calcite-radio-group-item") {
-      this.selectItem(event.target);
-    }
+    return (h(Host, { onClick: this.handleClick, role: "radiogroup", tabIndex: this.disabled ? -1 : null }, h("slot", null)));
   }
   handleSelected(event) {
     // only fire after initial setup to prevent semi-infinite loops
@@ -155,16 +161,11 @@ const CalciteRadioGroup = class {
   //  Methods
   //
   // --------------------------------------------------------------------------
-  /** Focuses the selected item. If there is no selection, it focuses the first item. */
+  /** Sets focus on the component. */
   async setFocus() {
     var _a;
     (_a = (this.selectedItem || this.getItems()[0])) === null || _a === void 0 ? void 0 : _a.focus();
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
   getItems() {
     return this.el.querySelectorAll("calcite-radio-group-item");
   }
@@ -221,9 +222,11 @@ const CalciteRadioGroupItem = class {
     //--------------------------------------------------------------------------
     /** Indicates whether the control is checked. */
     this.checked = false;
+    /** flip the icon in rtl */
+    this.iconFlipRtl = false;
     /** optionally used with icon, select where to position the icon */
     this.iconPosition = "start";
-    this.mutationObserver = this.getMutationObserver();
+    this.mutationObserver = createObserver("mutation", () => this.syncFromExternalInput());
   }
   handleCheckedChange() {
     this.calciteRadioGroupItemChange.emit();
@@ -235,18 +238,18 @@ const CalciteRadioGroupItem = class {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    var _a;
     const inputProxy = this.el.querySelector(`input[slot=${SLOTS.input}]`);
     if (inputProxy) {
       this.value = inputProxy.value;
       this.checked = inputProxy.checked;
-      {
-        this.mutationObserver.observe(inputProxy, { attributes: true });
-      }
+      (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(inputProxy, { attributes: true });
     }
     this.inputProxy = inputProxy;
   }
   disconnectedCallback() {
-    this.mutationObserver.disconnect();
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   componentWillLoad() {
     // only use default slot content in browsers that support shadow dom
@@ -274,9 +277,6 @@ const CalciteRadioGroupItem = class {
   //  Private Methods
   //
   //--------------------------------------------------------------------------
-  getMutationObserver() {
-    return new MutationObserver(() => this.syncFromExternalInput());
-  }
   syncFromExternalInput() {
     if (this.inputProxy) {
       this.value = this.inputProxy.value;

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

@@ -1,6 +1,7 @@
-import { r as registerInstance, h, c as createEvent, g as getElement } from './index-1554a132.js';
+import { r as registerInstance, h, c as createEvent, g as getElement } from './index-f8f0bea7.js';
 import { g as guid } from './guid-09142681.js';
-import { f as focusElement, c as closestElementCrossShadowBoundary } from './dom-0b02c0cf.js';
+import { f as focusElement, c as closestElementCrossShadowBoundary } from './dom-b369a031.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-7b249c54.js';
 import { h as hiddenInputStyle } from './form-8aa0d95b.js';
 
 const calciteRadioCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:300ms}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:block}:host .radio{background-color:var(--calcite-ui-foreground-1);border-radius:9999px;cursor:pointer;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input);box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input)}:host([hovered]) .radio,:host(:not([checked])[focused]) .radio{-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-brand);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}:host([disabled]) .radio{cursor:default;opacity:var(--calcite-ui-opacity-disabled)}:host([hovered][disabled]) .radio{-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input);box-shadow:inset 0 0 0 1px var(--calcite-ui-border-input)}:host([scale=s]){--calcite-radio-size:var(--calcite-font-size--2)}:host([scale=m]){--calcite-radio-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-radio-size:var(--calcite-font-size-0)}.radio{height:var(--calcite-radio-size);max-width:var(--calcite-radio-size);min-width:var(--calcite-radio-size)}:host([scale=s][checked]) .radio,:host([hovered][scale=s][checked][disabled]) .radio{-webkit-box-shadow:inset 0 0 0 4px var(--calcite-ui-brand);box-shadow:inset 0 0 0 4px var(--calcite-ui-brand)}:host([scale=s][focused][checked]) .radio{-webkit-box-shadow:inset 0 0 0 4px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);box-shadow:inset 0 0 0 4px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand)}:host([scale=m][checked]) .radio,:host([hovered][scale=m][checked][disabled]) .radio{-webkit-box-shadow:inset 0 0 0 5px var(--calcite-ui-brand);box-shadow:inset 0 0 0 5px var(--calcite-ui-brand)}:host([scale=m][focused][checked]) .radio{-webkit-box-shadow:inset 0 0 0 5px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);box-shadow:inset 0 0 0 5px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand)}:host([scale=l][checked]) .radio,:host([hovered][scale=l][checked][disabled]) .radio{-webkit-box-shadow:inset 0 0 0 6px var(--calcite-ui-brand);box-shadow:inset 0 0 0 6px var(--calcite-ui-brand)}:host([scale=l][focused][checked]) .radio{-webkit-box-shadow:inset 0 0 0 6px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);box-shadow:inset 0 0 0 6px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand)}:host([hidden]){display:none}";
@@ -19,14 +20,14 @@ const CalciteRadio = class {
     this.disabled = false;
     /**
      * The focused state of the radio.
-     * @private
+     * @internal
      */
     this.focused = false;
     /** The radio's hidden status. */
     this.hidden = false;
     /**
      * The hovered state of the radio.
-     * @private
+     * @internal
      */
     this.hovered = false;
     /** The scale (size) of the radio. */
@@ -66,20 +67,56 @@ const CalciteRadioButton = class {
     this.disabled = false;
     /**
      * The focused state of the radio button.
-     * @private
+     * @internal
      */
     this.focused = false;
     /** The radio button's hidden status.  When a radio button is hidden it is not focusable or checkable. */
     this.hidden = false;
     /**
      * The hovered state of the radio button.
-     * @private
+     * @internal
      */
     this.hovered = false;
     /** Requires that a value is selected for the radio button group before the parent form will submit. */
     this.required = false;
     /** The scale (size) of the radio button. `scale` is passed as a property automatically from `calcite-radio-button-group`. */
     this.scale = "m";
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.selectItem = (items, selectedIndex) => {
+      items.forEach((item, index) => {
+        const selected = index === selectedIndex;
+        item.checked = selected;
+        item.focused = selected;
+      });
+    };
+    this.toggle = () => {
+      this.uncheckAllRadioButtonsInGroup();
+      this.checked = true;
+      this.focused = true;
+      this.calciteRadioButtonChange.emit();
+    };
+    this.clickHandler = () => {
+      this.toggle();
+    };
+    this.onLabelClick = (event) => {
+      if (!this.disabled && !this.hidden) {
+        this.uncheckOtherRadioButtonsInGroup();
+        const label = event.currentTarget;
+        const radioButton = label.for
+          ? this.rootNode.querySelector(`calcite-radio-button[id="${label.for}"]`)
+          : label.querySelector(`calcite-radio-button[name="${this.name}"]`);
+        if (radioButton) {
+          radioButton.checked = true;
+          radioButton.focused = true;
+        }
+        this.calciteRadioButtonChange.emit();
+        this.setFocus();
+      }
+    };
     this.setInputEl = (el) => {
       this.inputEl = el;
     };
@@ -147,14 +184,10 @@ const CalciteRadioButton = class {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
   async setFocus() {
     focusElement(this.inputEl);
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
   checkLastRadioButton() {
     const radioButtons = Array.from(this.rootNode.querySelectorAll("calcite-radio-button")).filter((radioButton) => radioButton.name === this.name);
     const checkedRadioButtons = radioButtons.filter((radioButton) => radioButton.checked);
@@ -195,18 +228,6 @@ const CalciteRadioButton = class {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  check(event) {
-    // Prevent parent label from clicking the first radio when calcite-radio-button is clicked
-    if (this.el.closest("label") && event.composedPath().includes(this.el)) {
-      event.preventDefault();
-    }
-    if (!this.disabled && !this.hidden) {
-      this.uncheckOtherRadioButtonsInGroup();
-      this.checked = true;
-      this.focused = true;
-      this.calciteRadioButtonChange.emit();
-    }
-  }
   mouseenter() {
     this.hovered = true;
   }
@@ -229,6 +250,7 @@ const CalciteRadioButton = class {
     if (form) {
       form.addEventListener("reset", this.formResetHandler);
     }
+    connectLabel(this);
   }
   componentDidLoad() {
     this.hideInputEl();
@@ -241,6 +263,7 @@ const CalciteRadioButton = class {
     if (form) {
       form.removeEventListener("reset", this.formResetHandler);
     }
+    disconnectLabel(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -250,7 +273,7 @@ const CalciteRadioButton = class {
   render() {
     var _a;
     const value = (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString();
-    return (h("div", { class: CSS.container }, h("input", { "aria-label": this.label || null, checked: this.checked, disabled: this.disabled, hidden: this.hidden, id: `${this.guid}-input`, name: this.name, onBlur: this.onInputBlur, onFocus: this.onInputFocus, ref: this.setInputEl, required: this.required, type: "radio", value: value }), h("calcite-radio", { checked: this.checked, disabled: this.disabled, focused: this.focused, hidden: this.hidden, hovered: this.hovered, scale: this.scale })));
+    return (h("div", { class: CSS.container, onClick: this.clickHandler }, h("input", { "aria-label": getLabelText(this), checked: this.checked, disabled: this.disabled, hidden: this.hidden, id: `${this.guid}-input`, name: this.name, onBlur: this.onInputBlur, onFocus: this.onInputFocus, ref: this.setInputEl, required: this.required, type: "radio", value: value }), h("calcite-radio", { checked: this.checked, disabled: this.disabled, focused: this.focused, hidden: this.hidden, hovered: this.hovered, scale: this.scale })));
   }
   get el() { return getElement(this); }
   static get watchers() { return {

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

@@ -1,6 +1,7 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-1554a132.js';
-import { h as hasLabel, g as getElementDir, C as CSS_UTILITY } from './dom-0b02c0cf.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-f8f0bea7.js';
+import { g as getElementDir, C as CSS_UTILITY } from './dom-b369a031.js';
 import { g as guid } from './guid-09142681.js';
+import { c as connectLabel, d as disconnectLabel } from './label-7b249c54.js';
 
 const TEXT = {
   rating: "Rating",
@@ -36,20 +37,32 @@ const CalciteRating = class {
      * @default "Stars: ${num}"
      */
     this.intlStars = TEXT.stars;
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.onLabelClick = () => {
+      this.setFocus();
+    };
     this.guid = `calcite-ratings-${guid()}`;
   }
   //--------------------------------------------------------------------------
   //
-  //  Event Listeners
+  //  Lifecycle
   //
   //--------------------------------------------------------------------------
-  handleLabelFocus(e) {
-    if (hasLabel(e.detail.labelEl, this.el) &&
-      e.detail.interactedEl !== this.el &&
-      !this.el.contains(e.detail.interactedEl)) {
-      this.setFocus();
-    }
+  connectedCallback() {
+    connectLabel(this);
+  }
+  disconnectedCallback() {
+    disconnectLabel(this);
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
   blurHandler() {
     this.hasFocus = false;
   }
@@ -80,11 +93,6 @@ const CalciteRating = class {
     return (h(Fragment, null, h("fieldset", { class: { fieldset: true, [CSS_UTILITY.rtl]: dir === "rtl" }, onBlur: () => (this.hoverValue = null), onMouseLeave: () => (this.hoverValue = null), onTouchEnd: () => (this.hoverValue = null) }, h("legend", { class: "visually-hidden" }, intlRating), this.renderStars()), (count || average) && showChip ? (h("calcite-chip", { class: { [CSS_UTILITY.rtl]: dir === "rtl" }, dir: dir, scale: scale, value: count === null || count === void 0 ? void 0 : count.toString() }, !!average && h("span", { class: "number--average" }, average.toString()), !!count && h("span", { class: "number--count" }, "(", count === null || count === void 0 ? void 0 :
       count.toString(), ")"))) : null));
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
   updateValue(value) {
     this.value = value;
     this.calciteRatingChange.emit({ value });
@@ -94,6 +102,7 @@ const CalciteRating = class {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
   async setFocus() {
     this.inputFocusRef.focus();
   }

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-1554a132.js';
+import { r as registerInstance, h, g as getElement } from './index-f8f0bea7.js';
 
 const CSS = {
   scrim: "scrim",

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, F as Fragment, g as getElement, c as createEvent } from './index-1554a132.js';
-import { a as getSlotted, g as getElementDir, C as CSS_UTILITY } from './dom-0b02c0cf.js';
+import { r as registerInstance, h, F as Fragment, g as getElement, c as createEvent } from './index-f8f0bea7.js';
+import { a as getSlotted, g as getElementDir, C as CSS_UTILITY } from './dom-b369a031.js';
 import './guid-09142681.js';
 
 const CSS$2 = {
@@ -22,6 +22,15 @@ const calciteShellCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@key
 const CalciteShell = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    // --------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    // --------------------------------------------------------------------------
+    /**
+     * Positions the center content behind any calcite-shell-panels.
+     */
+    this.contentBehind = false;
   }
   // --------------------------------------------------------------------------
   //

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

@@ -1,7 +1,15 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-1554a132.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-f8f0bea7.js';
 import { S as Sortable } from './sortable.esm-2f5354d3.js';
+import { c as createObserver } from './observers-c93d4fe5.js';
 
-const calciteSortableListCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:300ms}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex}";
+const CSS = {
+  sortItem: "sort-item",
+  container: "container",
+  containerHorizontal: "container--horizontal",
+  containerVertical: "container--vertical"
+};
+
+const calciteSortableListCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:300ms}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex}.container{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto}.container--vertical{-ms-flex-direction:column;flex-direction:column}.container--horizontal{-ms-flex-direction:row;flex-direction:row}";
 
 const CalciteSortableList = class {
   constructor(hostRef) {
@@ -11,6 +19,10 @@ const CalciteSortableList = class {
      * The selector for the handle elements.
      */
     this.handleSelector = "calcite-handle";
+    /**
+     * Indicates the horizontal or vertical orientation of the component.
+     */
+    this.layout = "vertical";
     /**
      * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
      */
@@ -21,7 +33,8 @@ const CalciteSortableList = class {
     this.loading = false;
     this.handleActivated = false;
     this.items = [];
-    this.observer = new MutationObserver(() => {
+    this.mutationObserver = createObserver("mutation", () => {
+      this.cleanUpDragAndDrop();
       this.items = Array.from(this.el.children);
       this.setUpDragAndDrop();
     });
@@ -37,10 +50,12 @@ const CalciteSortableList = class {
     this.beginObserving();
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     this.cleanUpDragAndDrop();
   }
   calciteHandleNudgeHandler(event) {
+    var _a;
     const sortItem = this.items.find((item) => {
       return item.contains(event.detail.handle) || event.composedPath().includes(item);
     });
@@ -73,7 +88,7 @@ const CalciteSortableList = class {
       default:
         return;
     }
-    this.observer.disconnect();
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     if (appendInstead) {
       sortItem.parentElement.appendChild(sortItem);
     }
@@ -103,7 +118,8 @@ const CalciteSortableList = class {
       },
       // Element dragging started
       onStart: () => {
-        this.observer.disconnect();
+        var _a;
+        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
       },
       // Element dragging ended
       onEnd: () => {
@@ -121,7 +137,8 @@ const CalciteSortableList = class {
     this.sortable = null;
   }
   beginObserving() {
-    this.observer.observe(this.el, { childList: true, subtree: true });
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
   }
   // --------------------------------------------------------------------------
   //
@@ -129,7 +146,13 @@ const CalciteSortableList = class {
   //
   // --------------------------------------------------------------------------
   render() {
-    return h("slot", null);
+    const { layout } = this;
+    const horizontal = layout === "horizontal" || false;
+    return (h("div", { class: {
+        [CSS.container]: true,
+        [CSS.containerVertical]: !horizontal,
+        [CSS.containerHorizontal]: horizontal
+      } }, h("slot", null)));
   }
   get el() { return getElement(this); }
 };

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-1554a132.js';
-import { g as getElementDir } from './dom-0b02c0cf.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-f8f0bea7.js';
+import { g as getElementDir } from './dom-b369a031.js';
 import './guid-09142681.js';
 
 const CSS = {
@@ -22,6 +22,13 @@ const CalciteSplitButton = class {
     this.appearance = "solid";
     /** specify the color of the control, defaults to blue */
     this.color = "blue";
+    /** is the control disabled  */
+    this.disabled = false;
+    /**
+     * Is the dropdown currently active or not
+     * @internal
+     */
+    this.active = false;
     /** specify the icon used for the dropdown menu, defaults to chevron */
     this.dropdownIconType = "chevron";
     /** optionally add a calcite-loader component to the control,