@esri/calcite-components 1.0.0-next.291 → 1.0.0-next.295

package/dist/custom-elements/index.js

@@ -2,7 +2,7 @@
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
-import { attachShadow, createEvent, h, Host, Build, forceUpdate, Fragment, getAssetPath, proxyCustomElement } from '@stencil/core/internal/client';
+import { createEvent, h, Host, Build, forceUpdate, Fragment, getAssetPath, proxyCustomElement } from '@stencil/core/internal/client';
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
 
 /**
@@ -39,7 +39,7 @@ let CalciteAccordion$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteAccordionChange = createEvent(this, "calciteAccordionChange", 7);
     //--------------------------------------------------------------------------
     //
@@ -336,7 +336,7 @@ let CalciteAccordionItem$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteAccordionItemKeyEvent = createEvent(this, "calciteAccordionItemKeyEvent", 7);
     this.calciteAccordionItemSelect = createEvent(this, "calciteAccordionItemSelect", 7);
     this.calciteAccordionItemClose = createEvent(this, "calciteAccordionItemClose", 7);
@@ -483,7 +483,7 @@ let CalciteAction$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteActionClick = createEvent(this, "calciteActionClick", 7);
     // --------------------------------------------------------------------------
     //
@@ -1980,7 +1980,7 @@ let CalciteActionBar$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteActionBarToggle = createEvent(this, "calciteActionBarToggle", 7);
     // --------------------------------------------------------------------------
     //
@@ -2156,7 +2156,7 @@ let CalciteActionGroup$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -2223,7 +2223,7 @@ let CalciteActionMenu$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteActionMenuOpenChange = createEvent(this, "calciteActionMenuOpenChange", 7);
     // --------------------------------------------------------------------------
     //
@@ -2424,11 +2424,13 @@ let CalciteActionMenu$1 = class extends HTMLElement {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
-    this.mutationObserver.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 });
     this.getActions();
   }
   disconnectedCallback() {
-    this.mutationObserver.disconnect();
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     this.disconnectMenuButtonEl();
   }
   expandedHandler() {
@@ -2510,7 +2512,7 @@ let CalciteActionPad$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteActionPadToggle = createEvent(this, "calciteActionPadToggle", 7);
     // --------------------------------------------------------------------------
     //
@@ -2637,13 +2639,13 @@ var StatusIcons;
   StatusIcons["blue"] = "lightbulb";
 })(StatusIcons || (StatusIcons = {}));
 
-const calciteAlertCss = "@-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([scale=s]){--calcite-alert-width:40em;--calcite-alert-spacing-token-small:0.5rem;--calcite-alert-spacing-token-large:0.75rem}:host([scale=s]) slot[name=title]::slotted(*),:host([scale=s]) *::slotted([slot=title]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=s]) slot[name=message]::slotted(*),:host([scale=s]) *::slotted([slot=message]){font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) slot[name=link]::slotted(*),:host([scale=s]) *::slotted([slot=link]){font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) .alert-queue-count{margin-left:0.5rem;margin-right:0.5rem}:host([scale=s]) .container{--calcite-alert-min-height:3.5rem}:host([scale=s]) .alert-close{padding:0.5rem}:host([scale=m]){--calcite-alert-width:50em;--calcite-alert-spacing-token-small:0.75rem;--calcite-alert-spacing-token-large:1rem}:host([scale=m]) slot[name=title]::slotted(*),:host([scale=m]) *::slotted([slot=title]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=m]) slot[name=message]::slotted(*),:host([scale=m]) *::slotted([slot=message]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) slot[name=link]::slotted(*),:host([scale=m]) *::slotted([slot=link]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) .alert-queue-count{margin-left:0.75rem;margin-right:0.75rem}:host([scale=m]) .container{--calcite-alert-min-height:4.1875rem}:host([scale=l]){--calcite-alert-width:60em;--calcite-alert-spacing-token-small:1rem;--calcite-alert-spacing-token-large:1.25rem}:host([scale=l]) slot[name=title]::slotted(*),:host([scale=l]) *::slotted([slot=title]){font-size:var(--calcite-font-size-1);line-height:1.375;margin-bottom:0.25rem}:host([scale=l]) slot[name=message]::slotted(*),:host([scale=l]) *::slotted([slot=message]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) slot[name=link]::slotted(*),:host([scale=l]) *::slotted([slot=link]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) .alert-queue-count{margin-left:1rem;margin-right:1rem}:host([scale=l]) .container{--calcite-alert-min-height:5.625rem}:host{display:block}:host .container{-webkit-box-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);box-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);display:-ms-flexbox;display:flex;position:fixed;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;pointer-events:none;margin-top:0;margin-bottom:0;margin-left:auto;margin-right:auto;background-color:var(--calcite-ui-foreground-1);opacity:0;left:0;right:0;bottom:0;border-radius:var(--calcite-border-radius);border-top:0px solid transparent;border-left:1px solid var(--calcite-ui-border-3);border-right:1px solid var(--calcite-ui-border-3);border-bottom:1px solid var(--calcite-ui-border-3);min-height:var(--calcite-alert-min-height);width:var(--calcite-alert-width);max-width:90%;max-height:0;z-index:101;-webkit-transform:translate3d(0, 1.5rem, 0);transform:translate3d(0, 1.5rem, 0);-webkit-transition:300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), all 0.15s ease-in-out;transition:300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), all 0.15s ease-in-out}@media only screen and (max-width: 860px){:host .container{width:100%;max-width:100%;border-radius:0}}.container{display:-ms-flexbox;display:flex;width:100%;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.alert-close{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}.alert-close:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}:host([active]) .container:not(.queued){opacity:1;max-height:100%;border-top-width:2px;-webkit-transform:translate3d(0, -1.5rem, 0);transform:translate3d(0, -1.5rem, 0);pointer-events:initial}@media only screen and (max-width: 860px){:host([active]) .container:not(.queued){-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}}slot[name=title]::slotted(*),*::slotted([slot=title]){font-weight:var(--calcite-font-weight-medium);font-size:var(--calcite-font-size-0);line-height:1.375;color:var(--calcite-ui-text-1)}slot[name=message]::slotted(*),*::slotted([slot=message]){display:inline;margin:0;margin-right:0.5rem;font-weight:var(--calcite-font-weight-normal);font-size:var(--calcite-font-size--1);line-height:1.375;color:var(--calcite-ui-text-2)}slot[name=link]::slotted(*),*::slotted([slot=link]){color:var(--calcite-ui-text-link);display:-ms-inline-flexbox;display:inline-flex}.calcite--rtl slot[name=message]::slotted(*),.calcite--rtl *::slotted([slot=message]){margin-left:0.5rem;margin-right:unset}.alert-content{padding:var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-large);-ms-flex:0 0 auto;flex:0 0 auto;-webkit-transition:all 0.15s ease-in-out;transition:all 0.15s ease-in-out;word-wrap:break-word;overflow-wrap:break-word;background-color:var(--calcite-ui-foreground-1);-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;padding:var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-small) 0;border-bottom-left-radius:var(--calcite-border-radius);border-bottom-right-radius:var(--calcite-border-radius)}@media only screen and (max-width: 860px){.alert-content{padding:1rem}}.alert-content:first-of-type:not(:only-child){padding-left:var(--calcite-alert-spacing-token-large)}.alert-content:only-child{padding:var(--calcite-alert-spacing-token-small)}@media only screen and (max-width: 860px){.alert-content{padding:var(--calcite-alert-spacing-token-large) var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-large) 0}}.calcite--rtl .alert-content{padding:var(--calcite-alert-spacing-token-small) 0 var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-small)}.calcite--rtl .alert-content:first-of-type:not(:only-child){padding-right:var(--calcite-alert-spacing-token-large)}@media only screen and (max-width: 860px){.calcite--rtl .alert-content{padding:var(--calcite-alert-spacing-token-large) 0 var(--calcite-alert-spacing-token-large) var(--calcite-alert-spacing-token-small)}}.alert-icon{padding:var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-large);-ms-flex:0 0 auto;flex:0 0 auto;-webkit-transition:all 0.15s ease-in-out;transition:all 0.15s ease-in-out;padding-top:0;padding-bottom:0;display:-ms-flexbox;display:flex;-ms-flex-item-align:stretch;align-self:stretch;-ms-flex-align:center;align-items:center;background-color:var(--calcite-ui-foreground-1)}@media only screen and (max-width: 860px){.alert-icon{padding:1rem}}@media only screen and (min-width: 860px){.alert-icon{border-bottom-left-radius:var(--calcite-border-radius)}}.alert-close{padding:var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-large);-ms-flex:0 0 auto;flex:0 0 auto;-webkit-transition:all 0.15s ease-in-out;transition:all 0.15s ease-in-out;padding-top:0;padding-bottom:0;-ms-flex-item-align:stretch;align-self:stretch;background-color:var(--calcite-ui-foreground-1);border-style:none;outline:2px solid transparent;outline-offset:2px;cursor:pointer;color:var(--calcite-ui-text-3);overflow:hidden;border-bottom-right-radius:var(--calcite-border-radius)}@media only screen and (max-width: 860px){.alert-close{padding:1rem}}.alert-close:hover,.alert-close:focus{color:var(--calcite-ui-text-1);background-color:var(--calcite-ui-foreground-2)}.alert-close:active{background-color:var(--calcite-ui-foreground-3)}@media only screen and (max-width: 860px){.alert-close{border-radius:0}}.calcite--rtl .alert-close{border-bottom-left-radius:var(--calcite-border-radius);border-bottom-right-radius:unset}.alert-queue-count{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-item-align:stretch;align-self:stretch;overflow:hidden;visibility:hidden;font-weight:var(--calcite-font-weight-medium);text-align:center;color:var(--calcite-ui-text-2);background-color:var(--calcite-ui-foreground-1);opacity:0;cursor:default;border-left:0px solid transparent;border-right:0px solid transparent;border-top-right-radius:0;-webkit-transition:all 0.15s ease-in-out;transition:all 0.15s ease-in-out}.alert-queue-count.active{visibility:visible;opacity:1}@media only screen and (min-width: 860px){.alert-queue-count.active{border-bottom-right-radius:var(--calcite-border-radius)}}:host([auto-dismiss])>.alert-queue-count{border-right:0px solid transparent}:host([auto-dismiss]) .calcite--rtl>.alert-queue-count{border-left:0px solid transparent}.alert-dismiss-progress{display:block;position:absolute;left:0;right:0;width:100%;overflow:hidden;top:-2px;height:2px;z-index:103;border-radius:var(--calcite-border-radius) var(--calcite-border-radius) 0 0}.alert-dismiss-progress:after{top:0;right:0;display:block;position:absolute;height:2px;content:\"\";background-color:var(--calcite-alert-dismiss-progress-background);z-index:104}.calcite--rtl .alert-dismiss-progress:after{left:0;right:initial}:host([color=blue]) .container{border-top-color:var(--calcite-ui-info)}:host([color=blue]) .container .alert-icon{color:var(--calcite-ui-info)}:host([color=red]) .container{border-top-color:var(--calcite-ui-danger)}:host([color=red]) .container .alert-icon{color:var(--calcite-ui-danger)}:host([color=yellow]) .container{border-top-color:var(--calcite-ui-warning)}:host([color=yellow]) .container .alert-icon{color:var(--calcite-ui-warning)}:host([color=green]) .container{border-top-color:var(--calcite-ui-success)}:host([color=green]) .container .alert-icon{color:var(--calcite-ui-success)}:host([auto-dismiss-duration=fast]) .alert-dismiss-progress:after{-webkit-animation:dismissProgress 6000ms ease-out;animation:dismissProgress 6000ms ease-out}:host([auto-dismiss-duration=medium]) .alert-dismiss-progress:after{-webkit-animation:dismissProgress 10000ms ease-out;animation:dismissProgress 10000ms ease-out}:host([auto-dismiss-duration=slow]) .alert-dismiss-progress:after{-webkit-animation:dismissProgress 14000ms ease-out;animation:dismissProgress 14000ms ease-out}@-webkit-keyframes dismissProgress{0%{width:0;opacity:0.75}100%{width:100%;opacity:1}}@keyframes dismissProgress{0%{width:0;opacity:0.75}100%{width:100%;opacity:1}}";
+const calciteAlertCss = "@-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([scale=s]){--calcite-alert-width:40em;--calcite-alert-spacing-token-small:0.5rem;--calcite-alert-spacing-token-large:0.75rem}:host([scale=s]) slot[name=title]::slotted(*),:host([scale=s]) *::slotted([slot=title]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=s]) slot[name=message]::slotted(*),:host([scale=s]) *::slotted([slot=message]){font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) slot[name=link]::slotted(*),:host([scale=s]) *::slotted([slot=link]){font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) .alert-queue-count{margin-left:0.5rem;margin-right:0.5rem}:host([scale=s]) .container{--calcite-alert-min-height:3.5rem}:host([scale=s]) .alert-close{padding:0.5rem}:host([scale=m]){--calcite-alert-width:50em;--calcite-alert-spacing-token-small:0.75rem;--calcite-alert-spacing-token-large:1rem}:host([scale=m]) slot[name=title]::slotted(*),:host([scale=m]) *::slotted([slot=title]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=m]) slot[name=message]::slotted(*),:host([scale=m]) *::slotted([slot=message]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) slot[name=link]::slotted(*),:host([scale=m]) *::slotted([slot=link]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) .alert-queue-count{margin-left:0.75rem;margin-right:0.75rem}:host([scale=m]) .container{--calcite-alert-min-height:4.1875rem}:host([scale=l]){--calcite-alert-width:60em;--calcite-alert-spacing-token-small:1rem;--calcite-alert-spacing-token-large:1.25rem}:host([scale=l]) slot[name=title]::slotted(*),:host([scale=l]) *::slotted([slot=title]){font-size:var(--calcite-font-size-1);line-height:1.375;margin-bottom:0.25rem}:host([scale=l]) slot[name=message]::slotted(*),:host([scale=l]) *::slotted([slot=message]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) slot[name=link]::slotted(*),:host([scale=l]) *::slotted([slot=link]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) .alert-queue-count{margin-left:1rem;margin-right:1rem}:host([scale=l]) .container{--calcite-alert-min-height:5.625rem}:host{display:block}:host .container{-webkit-box-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);box-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);display:-ms-flexbox;display:flex;position:fixed;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;pointer-events:none;margin-top:0;margin-bottom:0;margin-left:auto;margin-right:auto;background-color:var(--calcite-ui-foreground-1);opacity:0;left:0;right:0;bottom:0;border-radius:var(--calcite-border-radius);border-top:0px solid transparent;border-left:1px solid var(--calcite-ui-border-3);border-right:1px solid var(--calcite-ui-border-3);border-bottom:1px solid var(--calcite-ui-border-3);min-height:var(--calcite-alert-min-height);width:var(--calcite-alert-width);max-width:90%;max-height:0;z-index:101;-webkit-transform:translate3d(0, 1.5rem, 0);transform:translate3d(0, 1.5rem, 0);-webkit-transition:300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), all 0.15s ease-in-out;transition:300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), all 0.15s ease-in-out}.container{display:-ms-flexbox;display:flex;width:100%;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.alert-close{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}.alert-close:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}:host([active]) .container:not(.queued){opacity:1;max-height:100%;border-top-width:2px;-webkit-transform:translate3d(0, -1.5rem, 0);transform:translate3d(0, -1.5rem, 0);pointer-events:initial}slot[name=title]::slotted(*),*::slotted([slot=title]){font-weight:var(--calcite-font-weight-medium);font-size:var(--calcite-font-size-0);line-height:1.375;color:var(--calcite-ui-text-1)}slot[name=message]::slotted(*),*::slotted([slot=message]){display:inline;margin:0;margin-right:0.5rem;font-weight:var(--calcite-font-weight-normal);font-size:var(--calcite-font-size--1);line-height:1.375;color:var(--calcite-ui-text-2)}slot[name=link]::slotted(*),*::slotted([slot=link]){color:var(--calcite-ui-text-link);display:-ms-inline-flexbox;display:inline-flex}.calcite--rtl slot[name=message]::slotted(*),.calcite--rtl *::slotted([slot=message]){margin-left:0.5rem;margin-right:unset}.alert-content{padding:var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-large);-ms-flex:0 0 auto;flex:0 0 auto;-webkit-transition:all 0.15s ease-in-out;transition:all 0.15s ease-in-out;word-wrap:break-word;overflow-wrap:break-word;background-color:var(--calcite-ui-foreground-1);-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;padding:var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-small) 0;border-bottom-left-radius:var(--calcite-border-radius);border-bottom-right-radius:var(--calcite-border-radius)}.alert-content:first-of-type:not(:only-child){padding-left:var(--calcite-alert-spacing-token-large)}.alert-content:only-child{padding:var(--calcite-alert-spacing-token-small)}.calcite--rtl .alert-content{padding:var(--calcite-alert-spacing-token-small) 0 var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-small)}.calcite--rtl .alert-content:first-of-type:not(:only-child){padding-right:var(--calcite-alert-spacing-token-large)}.alert-icon{padding:var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-large);-ms-flex:0 0 auto;flex:0 0 auto;-webkit-transition:all 0.15s ease-in-out;transition:all 0.15s ease-in-out;padding-top:0;padding-bottom:0;display:-ms-flexbox;display:flex;-ms-flex-item-align:stretch;align-self:stretch;-ms-flex-align:center;align-items:center;background-color:var(--calcite-ui-foreground-1)}.alert-close{padding:var(--calcite-alert-spacing-token-small) var(--calcite-alert-spacing-token-large);-ms-flex:0 0 auto;flex:0 0 auto;-webkit-transition:all 0.15s ease-in-out;transition:all 0.15s ease-in-out;padding-top:0;padding-bottom:0;-ms-flex-item-align:stretch;align-self:stretch;background-color:var(--calcite-ui-foreground-1);border-style:none;outline:2px solid transparent;outline-offset:2px;cursor:pointer;color:var(--calcite-ui-text-3);overflow:hidden;border-bottom-right-radius:var(--calcite-border-radius)}.alert-close:hover,.alert-close:focus{color:var(--calcite-ui-text-1);background-color:var(--calcite-ui-foreground-2)}.alert-close:active{background-color:var(--calcite-ui-foreground-3)}.calcite--rtl .alert-close{border-bottom-left-radius:var(--calcite-border-radius);border-bottom-right-radius:unset}.alert-queue-count{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-item-align:stretch;align-self:stretch;overflow:hidden;visibility:hidden;font-weight:var(--calcite-font-weight-medium);text-align:center;color:var(--calcite-ui-text-2);background-color:var(--calcite-ui-foreground-1);opacity:0;cursor:default;border-left:0px solid transparent;border-right:0px solid transparent;border-top-right-radius:0;-webkit-transition:all 0.15s ease-in-out;transition:all 0.15s ease-in-out}.alert-queue-count.active{visibility:visible;opacity:1}:host([auto-dismiss])>.alert-queue-count{border-right:0px solid transparent}:host([auto-dismiss]) .calcite--rtl>.alert-queue-count{border-left:0px solid transparent}.alert-dismiss-progress{display:block;position:absolute;left:0;right:0;width:100%;overflow:hidden;top:-2px;height:2px;z-index:103;border-radius:var(--calcite-border-radius) var(--calcite-border-radius) 0 0}.alert-dismiss-progress:after{top:0;right:0;display:block;position:absolute;height:2px;content:\"\";background-color:var(--calcite-alert-dismiss-progress-background);z-index:104}.calcite--rtl .alert-dismiss-progress:after{left:0;right:initial}:host([color=blue]) .container{border-top-color:var(--calcite-ui-info)}:host([color=blue]) .container .alert-icon{color:var(--calcite-ui-info)}:host([color=red]) .container{border-top-color:var(--calcite-ui-danger)}:host([color=red]) .container .alert-icon{color:var(--calcite-ui-danger)}:host([color=yellow]) .container{border-top-color:var(--calcite-ui-warning)}:host([color=yellow]) .container .alert-icon{color:var(--calcite-ui-warning)}:host([color=green]) .container{border-top-color:var(--calcite-ui-success)}:host([color=green]) .container .alert-icon{color:var(--calcite-ui-success)}:host([auto-dismiss-duration=fast]) .alert-dismiss-progress:after{-webkit-animation:dismissProgress 6000ms ease-out;animation:dismissProgress 6000ms ease-out}:host([auto-dismiss-duration=medium]) .alert-dismiss-progress:after{-webkit-animation:dismissProgress 10000ms ease-out;animation:dismissProgress 10000ms ease-out}:host([auto-dismiss-duration=slow]) .alert-dismiss-progress:after{-webkit-animation:dismissProgress 14000ms ease-out;animation:dismissProgress 14000ms ease-out}@-webkit-keyframes dismissProgress{0%{width:0;opacity:0.75}100%{width:100%;opacity:1}}@keyframes dismissProgress{0%{width:0;opacity:0.75}100%{width:100%;opacity:1}}";
 
 let CalciteAlert$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteAlertClose = createEvent(this, "calciteAlertClose", 7);
     this.calciteAlertOpen = createEvent(this, "calciteAlertOpen", 7);
     this.calciteAlertSync = createEvent(this, "calciteAlertSync", 7);
@@ -2971,7 +2973,7 @@ let CalciteAvatar$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -3094,13 +3096,13 @@ const CalciteHeading = (props, children) => {
   return h(HeadingTag, Object.assign({}, props), children);
 };
 
-const calciteBlockCss = "@-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}:host{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}: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-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;-ms-flex-direction:column;flex-direction:column;padding:0;-webkit-transition-property:margin;transition-property:margin;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.215, 0.440, 0.420, 0.880);transition-timing-function:cubic-bezier(0.215, 0.440, 0.420, 0.880);border-width:0;border-bottom-width:1px;border-color:var(--calcite-ui-border-3);border-style:solid;-ms-flex-preferred-size:auto;flex-basis:auto}.header{margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:justify;align-content:space-between;color:var(--calcite-ui-text-2);}.heading{font-weight:var(--calcite-font-weight-medium);margin:0;padding:0}.header .heading{-ms-flex:1 1 auto;flex:1 1 auto;padding:0.5rem}h1.heading{font-size:var(--calcite-font-size-2);line-height:1.5rem}h2.heading{font-size:var(--calcite-font-size-1);line-height:1.5rem}h3.heading{font-size:var(--calcite-font-size-0);line-height:1.25rem}h4.heading,h5.heading{font-size:var(--calcite-font-size--1);line-height:1rem}.header{-ms-flex-pack:start;justify-content:flex-start;padding:0}.header,.toggle{grid-area:header}.header-container{display:grid;-ms-flex-align:stretch;align-items:stretch;grid-template:auto/auto 1fr auto auto;grid-template-areas:\"handle header control menu\";grid-column:header-start/menu-end;grid-row:1/2}.header-container>.header{padding-top:0.75rem;padding-bottom:0.75rem;padding-left:0;padding-right:0}.toggle{display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:justify;justify-content:space-between;font-family:inherit;-ms-flex-align:center;align-items:center;margin:0;padding-top:0.75rem;padding-bottom:0.75rem;padding-left:0;padding-right:0;border-style:none;cursor:pointer;text-align:left;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;background-color:transparent}.toggle:hover{background-color:var(--calcite-ui-foreground-2)}.toggle:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}calcite-loader[inline]{grid-area:control;align-self:center}calcite-handle{grid-area:handle}.title{margin:0;padding-left:1rem;padding-right:1rem;padding-top:0;padding-bottom:0}.header .title .heading{padding:0;font-size:var(--calcite-font-size--1);color:var(--calcite-ui-text-2);font-weight:var(--calcite-font-weight-medium);word-wrap:break-word;word-break:break-word;line-height:1.25;-webkit-transition-property:color;transition-property:color;-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)}.summary{padding:0;font-size:var(--calcite-font-size--2);color:var(--calcite-ui-text-3);margin-top:0.125rem;word-wrap:break-word;word-break:break-word}.icon{margin-left:0.75rem}.status-icon.valid{color:var(--calcite-ui-success)}.status-icon.invalid{color:var(--calcite-ui-danger)}.status-icon.loading{-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.toggle-icon{margin-right:1rem;-ms-flex-item-align:center;align-self:center;color:var(--calcite-ui-text-3);-webkit-transition-property:color;transition-property:color;-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)}.toggle:hover .toggle-icon{color:var(--calcite-ui-text-1)}.content{padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;position:relative;-webkit-animation:in var(--calcite-animation-timing) ease-in-out;animation:in var(--calcite-animation-timing) ease-in-out}.control-container{display:-ms-flexbox;display:flex;margin:0;grid-area:control}calcite-action-menu{grid-area:menu}.calcite--rtl .toggle-icon{margin-right:0;margin-left:1rem}.calcite--rtl .icon{margin-left:0;margin-right:0.75rem}:host([open]){margin-top:0.5rem;margin-bottom:0.5rem}:host([open]) .header .title .heading{color:var(--calcite-ui-text-1)}:host([disabled]){pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;user-select:none}:host([disabled]) .header-container{opacity:0.5}:host([drag-handle]) .calcite--rtl .title{padding-left:0;padding-right:0.25rem}";
+const calciteBlockCss = "@-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}:host{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}: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-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex;-ms-flex-positive:0;flex-grow:0;-ms-flex-negative:0;flex-shrink:0;-ms-flex-direction:column;flex-direction:column;padding:0;-webkit-transition-property:margin;transition-property:margin;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.215, 0.440, 0.420, 0.880);transition-timing-function:cubic-bezier(0.215, 0.440, 0.420, 0.880);border-width:0;border-bottom-width:1px;border-color:var(--calcite-ui-border-3);border-style:solid;-ms-flex-preferred-size:auto;flex-basis:auto}.header{margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:justify;align-content:space-between;color:var(--calcite-ui-text-2);}.heading{font-weight:var(--calcite-font-weight-medium);margin:0;padding:0}.header .heading{-ms-flex:1 1 auto;flex:1 1 auto;padding:0.5rem}h1.heading{font-size:var(--calcite-font-size-2);line-height:1.5rem}h2.heading{font-size:var(--calcite-font-size-1);line-height:1.5rem}h3.heading{font-size:var(--calcite-font-size-0);line-height:1.25rem}h4.heading,h5.heading{font-size:var(--calcite-font-size--1);line-height:1rem}.header{-ms-flex-pack:start;justify-content:flex-start;padding:0}.header,.toggle{grid-area:header}.header-container{display:grid;-ms-flex-align:stretch;align-items:stretch;grid-template:auto/auto 1fr auto auto;grid-template-areas:\"handle header control menu\";grid-column:header-start/menu-end;grid-row:1/2}.header-container>.header{padding-top:0.75rem;padding-bottom:0.75rem;padding-left:0;padding-right:0}.toggle{display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:justify;justify-content:space-between;font-family:inherit;-ms-flex-align:center;align-items:center;margin:0;padding-top:0.75rem;padding-bottom:0.75rem;padding-left:0;padding-right:0;border-style:none;cursor:pointer;text-align:left;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;background-color:transparent}.toggle:hover{background-color:var(--calcite-ui-foreground-2)}.toggle:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}calcite-loader[inline]{grid-area:control;align-self:center}calcite-handle{grid-area:handle}.title{margin:0;padding-left:0.75rem;padding-right:0.75rem;padding-top:0;padding-bottom:0}.header .title .heading{padding:0;font-size:var(--calcite-font-size--1);color:var(--calcite-ui-text-2);font-weight:var(--calcite-font-weight-medium);word-wrap:break-word;word-break:break-word;line-height:1.25;-webkit-transition-property:color;transition-property:color;-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)}.summary{padding:0;font-size:var(--calcite-font-size--2);color:var(--calcite-ui-text-3);margin-top:0.125rem;word-wrap:break-word;word-break:break-word}.icon{margin-left:0.75rem}.status-icon.valid{color:var(--calcite-ui-success)}.status-icon.invalid{color:var(--calcite-ui-danger)}.status-icon.loading{-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.toggle-icon{margin-right:1rem;-ms-flex-item-align:center;align-self:center;color:var(--calcite-ui-text-3);-webkit-transition-property:color;transition-property:color;-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)}.toggle:hover .toggle-icon{color:var(--calcite-ui-text-1)}.content{padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;position:relative;-webkit-animation:in var(--calcite-animation-timing) ease-in-out;animation:in var(--calcite-animation-timing) ease-in-out}.control-container{display:-ms-flexbox;display:flex;margin:0;grid-area:control}calcite-action-menu{grid-area:menu}.calcite--rtl .toggle-icon{margin-right:0;margin-left:1rem}.calcite--rtl .icon{margin-left:0;margin-right:0.75rem}:host([open]){margin-top:0.5rem;margin-bottom:0.5rem}:host([open]) .header .title .heading{color:var(--calcite-ui-text-1)}:host([disabled]){pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;user-select:none}:host([disabled]) .header-container{opacity:0.5}:host([drag-handle]) .calcite--rtl .title{padding-left:0;padding-right:0.25rem}";
 
 let CalciteBlock$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteBlockToggle = createEvent(this, "calciteBlockToggle", 7);
     // --------------------------------------------------------------------------
     //
@@ -3216,7 +3218,7 @@ let CalciteBlockSection$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteBlockSectionToggle = createEvent(this, "calciteBlockSectionToggle", 7);
     /**
      * When true, the block's section content will be displayed.
@@ -3325,14 +3327,43 @@ const TEXT$h = {
   loading: "Loading"
 };
 
-const labelTagName = "calcite-label";
+/**
+ * Exported for testing purposes only
+ * @internal
+ */
 const labelClickEvent = "calciteInternalLabelClick";
+const labelTagName = "calcite-label";
 const onLabelClickMap = new WeakMap();
 const findLabelForComponent = (componentEl) => {
-  const id = componentEl.id;
-  return ((id && queryElementRoots(componentEl, `${labelTagName}[for="${id}"]`)) ||
-    closestElementCrossShadowBoundary(componentEl, labelTagName));
+  const { id } = componentEl;
+  const forLabel = id && queryElementRoots(componentEl, `${labelTagName}[for="${id}"]`);
+  if (forLabel) {
+    return forLabel;
+  }
+  const parentLabel = closestElementCrossShadowBoundary(componentEl, labelTagName);
+  if (!parentLabel ||
+    // labelable components within other custom elements are not considered labelable
+    hasAncestorCustomElements(parentLabel, componentEl)) {
+    return null;
+  }
+  return parentLabel;
 };
+function hasAncestorCustomElements(label, componentEl) {
+  let traversedElements;
+  const customElementAncestorCheckEventType = "custom-element-ancestor-check";
+  const listener = (event) => {
+    event.stopImmediatePropagation();
+    const composedPath = event.composedPath();
+    traversedElements = composedPath.slice(composedPath.indexOf(componentEl), composedPath.indexOf(label));
+  };
+  label.addEventListener(customElementAncestorCheckEventType, listener, { once: true });
+  componentEl.dispatchEvent(new CustomEvent(customElementAncestorCheckEventType, { composed: true, bubbles: true }));
+  label.removeEventListener(customElementAncestorCheckEventType, listener);
+  const ancestorCustomElements = traversedElements
+    .filter((el) => el !== componentEl && el !== label)
+    .filter((el) => { var _a; return (_a = el.tagName) === null || _a === void 0 ? void 0 : _a.includes("-"); });
+  return ancestorCustomElements.length > 0;
+}
 /**
  * Helper to set up label interactions on connectedCallback.
  */
@@ -3372,13 +3403,13 @@ function onLabelClick(event) {
   this.onLabelClick(event);
 }
 
-const calciteButtonCss = "@-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:inline-block;width:auto;vertical-align:middle}:host([round]){border-radius:50px}:host([round]) a,:host([round]) button{border-radius:50px}:host button,:host a{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}:host button:focus,:host a:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}:host button,:host a{--calcite-button-content-margin:0.5rem;--calcite-button-padding-x:7px;--calcite-button-padding-y:3px;padding:var(--calcite-button-padding-y) var(--calcite-button-padding-x) var(--calcite-button-padding-y) var(--calcite-button-padding-x);position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;text-decoration:none;width:100%;height:100%;border-radius:0;border-style:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:inherit;font-weight:var(--calcite-font-weight-normal);-webkit-transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out, -webkit-box-shadow 0.15s ease-in-out;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out, -webkit-box-shadow 0.15s ease-in-out;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out, -webkit-box-shadow 0.15s ease-in-out}:host button:hover,:host a:hover{text-decoration:none}.content{display:-ms-flexbox;display:flex;-ms-flex-preferred-size:auto;flex-basis:auto;margin-left:var(--calcite-button-content-margin);margin-right:var(--calcite-button-content-margin)}:host([scale=m]) button,:host([scale=m]) a{--calcite-button-content-margin:0.75rem}:host([scale=l]) button,:host([scale=l]) a{--calcite-button-content-margin:1rem}:host(:not([icon-start])) .content{margin-left:unset}:host(:not([icon-end])) .content{margin-right:unset}:host([icon-start]:not([icon-end])) .calcite--rtl .content{margin-left:unset;margin-right:var(--calcite-button-content-margin)}:host([icon-end]:not([icon-start])) .calcite--rtl .content{margin-right:unset;margin-left:var(--calcite-button-content-margin)}:host([width=auto]){width:auto}:host([width=half]){width:50%}:host([width=full]){width:100%}:host([alignment=center]:not([width=auto])) a,:host([alignment=center]:not([width=auto])) button{-ms-flex-pack:center;justify-content:center}:host([alignment=start]:not([width=auto])) a,:host([alignment=start]:not([width=auto])) button{-ms-flex-pack:start;justify-content:flex-start}:host([alignment=end]:not([width=auto])) a,:host([alignment=end]:not([width=auto])) button{-ms-flex-pack:end;justify-content:flex-end}:host([alignment*=space-between]:not([width=auto])) a,:host([alignment*=space-between]:not([width=auto])) button{-ms-flex-pack:justify;justify-content:space-between}:host([alignment=icon-start-space-between]:not([width=auto])) .icon--start{margin-right:auto}:host([alignment=icon-start-space-between]:not([width=auto])) a,:host([alignment=icon-start-space-between]:not([width=auto])) button{text-align:unset}:host([alignment=icon-end-space-between]:not([width=auto])) .icon--end{margin-left:auto}:host([alignment=icon-end-space-between]:not([width=auto])) a,:host([alignment=icon-end-space-between]:not([width=auto])) button{text-align:unset}:host([alignment=icon-start-space-between]:not([width=auto])) .calcite--rtl .icon--start{margin-right:unset;margin-left:auto}:host([alignment=icon-end-space-between]:not([width=auto])) .calcite--rtl .icon--end{margin-left:unset;margin-right:auto}:host([alignment=center]) a:not(.content--slotted) .icon--start+.icon--end,:host([alignment=center]) button:not(.content--slotted) .icon--start+.icon--end{margin-left:var(--calcite-button-content-margin)}:host([alignment=center]) a.calcite--rtl:not(.content--slotted) .icon--start+.icon--end,:host([alignment=center]) button.calcite--rtl:not(.content--slotted) .icon--start+.icon--end{margin-left:unset;margin-right:var(--calcite-button-content-margin)}.icon{display:-ms-inline-flexbox;display:inline-flex;position:relative;margin:0;font-weight:var(--calcite-font-weight-normal);line-height:inherit}:host([loading]),:host([disabled]){pointer-events:none}:host([loading]) button,:host([loading]) a,:host([disabled]) button,:host([disabled]) a{pointer-events:none;opacity:var(--calcite-ui-opacity-disabled)}@-webkit-keyframes loader-in{0%{width:0;opacity:0;-webkit-transform:scale(0.5);transform:scale(0.5)}100%{width:1em;opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes loader-in{0%{width:0;opacity:0;-webkit-transform:scale(0.5);transform:scale(0.5)}100%{width:1em;opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes loader-out{0%{width:1em;opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{width:0;opacity:0;-webkit-transform:scale(0.5);transform:scale(0.5)}}@keyframes loader-out{0%{width:1em;opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{width:0;opacity:0;-webkit-transform:scale(0.5);transform:scale(0.5)}}.calcite-button--loader{display:-ms-flexbox;display:flex}.calcite-button--loader calcite-loader{margin:0;-webkit-transition:width 300ms ease-in-out, opacity 300ms ease-in-out, -webkit-transform 300ms ease-in-out;transition:width 300ms ease-in-out, opacity 300ms ease-in-out, -webkit-transform 300ms ease-in-out;transition:width 300ms ease-in-out, opacity 300ms ease-in-out, transform 300ms ease-in-out;transition:width 300ms ease-in-out, opacity 300ms ease-in-out, transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out}.calcite-button--loader calcite-loader.loading-in{-webkit-animation-name:loader-in;animation-name:loader-in;-webkit-animation-duration:310ms;animation-duration:310ms}.calcite-button--loader calcite-loader.loading-out{-webkit-animation-name:loader-out;animation-name:loader-out;-webkit-animation-duration:310ms;animation-duration:310ms}:host([loading]) button.content--slotted .calcite-button--loader calcite-loader,:host([loading]) a.content--slotted .calcite-button--loader calcite-loader{-webkit-margin-end:var(--calcite-button-content-margin);margin-inline-end:var(--calcite-button-content-margin)}:host([loading]) button:not(.content--slotted) .icon--start,:host([loading]) button:not(.content--slotted) .icon--end,:host([loading]) a:not(.content--slotted) .icon--start,:host([loading]) a:not(.content--slotted) .icon--end{display:none}:host([appearance=solid]) button,:host([appearance=solid]) a{border-width:1px;border-style:solid;border-color:transparent}:host([appearance=solid][color=blue]) button,:host([appearance=solid][color=blue]) a{color:var(--calcite-ui-text-inverse);background-color:var(--calcite-ui-brand)}:host([appearance=solid][color=blue]) button:hover,:host([appearance=solid][color=blue]) button:focus,:host([appearance=solid][color=blue]) a:hover,:host([appearance=solid][color=blue]) a:focus{background-color:var(--calcite-ui-brand-hover)}:host([appearance=solid][color=blue]) button:active,:host([appearance=solid][color=blue]) a:active{background-color:var(--calcite-ui-brand-press)}:host([appearance=solid][color=blue]) button calcite-loader,:host([appearance=solid][color=blue]) a calcite-loader{color:var(--calcite-ui-text-inverse)}:host([appearance=solid][color=red]) button,:host([appearance=solid][color=red]) a{color:var(--calcite-ui-text-inverse);background-color:var(--calcite-ui-danger)}:host([appearance=solid][color=red]) button:hover,:host([appearance=solid][color=red]) button:focus,:host([appearance=solid][color=red]) a:hover,:host([appearance=solid][color=red]) a:focus{background-color:var(--calcite-ui-danger-hover)}:host([appearance=solid][color=red]) button:active,:host([appearance=solid][color=red]) a:active{background-color:var(--calcite-ui-danger-press)}:host([appearance=solid][color=red]) button calcite-loader,:host([appearance=solid][color=red]) a calcite-loader{color:var(--calcite-ui-text-inverse)}:host([appearance=solid][color=neutral]) button,:host([appearance=solid][color=neutral]) a{color:var(--calcite-ui-text-1);background-color:var(--calcite-ui-foreground-3)}:host([appearance=solid][color=neutral]) button:hover,:host([appearance=solid][color=neutral]) button:focus,:host([appearance=solid][color=neutral]) a:hover,:host([appearance=solid][color=neutral]) a:focus{background-color:var(--calcite-ui-foreground-2)}:host([appearance=solid][color=neutral]) button:active,:host([appearance=solid][color=neutral]) a:active{background-color:var(--calcite-ui-foreground-1)}:host([appearance=solid][color=neutral]) button calcite-loader,:host([appearance=solid][color=neutral]) a calcite-loader{color:var(--calcite-ui-text-1)}:host([appearance=solid][color=inverse]) button,:host([appearance=solid][color=inverse]) a{color:var(--calcite-ui-text-inverse);background-color:var(--calcite-ui-inverse)}:host([appearance=solid][color=inverse]) button:hover,:host([appearance=solid][color=inverse]) button:focus,:host([appearance=solid][color=inverse]) a:hover,:host([appearance=solid][color=inverse]) a:focus{background-color:var(--calcite-ui-inverse-hover)}:host([appearance=solid][color=inverse]) button:active,:host([appearance=solid][color=inverse]) a:active{background-color:var(--calcite-ui-inverse-press)}:host([appearance=solid][color=inverse]) button calcite-loader,:host([appearance=solid][color=inverse]) a calcite-loader{color:var(--calcite-ui-text-inverse)}:host([appearance=outline]) button,:host([appearance=outline]) a{background-color:var(--calcite-ui-foreground-1);border-width:1px;border-style:solid;-webkit-box-shadow:inset 0 0 0 1px transparent;box-shadow:inset 0 0 0 1px transparent}:host([appearance=outline][color=blue]) button,:host([appearance=outline][color=blue]) a{border-color:var(--calcite-ui-brand);color:var(--calcite-ui-brand)}:host([appearance=outline][color=blue]) button:hover,:host([appearance=outline][color=blue]) a:hover{border-color:var(--calcite-ui-brand-hover);color:var(--calcite-ui-brand-hover);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-brand-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand-hover)}:host([appearance=outline][color=blue]) button:focus,:host([appearance=outline][color=blue]) a:focus{border-color:var(--calcite-ui-brand);color:var(--calcite-ui-brand);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-brand);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}:host([appearance=outline][color=blue]) button:active,:host([appearance=outline][color=blue]) a:active{border-color:var(--calcite-ui-brand-press);color:var(--calcite-ui-brand-press);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-brand-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand-press)}:host([appearance=outline][color=blue]) button calcite-loader,:host([appearance=outline][color=blue]) a calcite-loader{color:var(--calcite-ui-brand)}:host([appearance=outline][color=red]) button,:host([appearance=outline][color=red]) a{border-color:var(--calcite-ui-danger);color:var(--calcite-ui-danger)}:host([appearance=outline][color=red]) button:hover,:host([appearance=outline][color=red]) a:hover{border-color:var(--calcite-ui-danger-hover);color:var(--calcite-ui-danger-hover);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-danger-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-danger-hover)}:host([appearance=outline][color=red]) button:focus,:host([appearance=outline][color=red]) a:focus{border-color:var(--calcite-ui-danger);color:var(--calcite-ui-danger);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-danger);box-shadow:inset 0 0 0 2px var(--calcite-ui-danger)}:host([appearance=outline][color=red]) button:active,:host([appearance=outline][color=red]) a:active{border-color:var(--calcite-ui-danger-press);color:var(--calcite-ui-danger-press);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-danger-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-danger-press)}:host([appearance=outline][color=red]) button calcite-loader,:host([appearance=outline][color=red]) a calcite-loader{color:var(--calcite-ui-danger)}:host([appearance=outline][color=neutral]) button,:host([appearance=outline][color=neutral]) a{color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-foreground-3)}:host([appearance=outline][color=neutral]) button:hover,:host([appearance=outline][color=neutral]) a:hover{-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-foreground-3);box-shadow:inset 0 0 0 1px var(--calcite-ui-foreground-3)}:host([appearance=outline][color=neutral]) button:focus,:host([appearance=outline][color=neutral]) a:focus{-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-3);box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-3)}:host([appearance=outline][color=neutral]) button:active,:host([appearance=outline][color=neutral]) a:active{-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-3);box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-3)}:host([appearance=outline][color=neutral]) button calcite-loader,:host([appearance=outline][color=neutral]) a calcite-loader{color:var(--calcite-ui-text-1)}:host([appearance=outline][color=inverse]) button,:host([appearance=outline][color=inverse]) a{color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-inverse)}:host([appearance=outline][color=inverse]) button:hover,:host([appearance=outline][color=inverse]) a:hover{border-color:var(--calcite-ui-inverse-hover);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-inverse-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-inverse-hover)}:host([appearance=outline][color=inverse]) button:focus,:host([appearance=outline][color=inverse]) a:focus{border-color:var(--calcite-ui-inverse);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse);box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse)}:host([appearance=outline][color=inverse]) button:active,:host([appearance=outline][color=inverse]) a:active{border-color:var(--calcite-ui-inverse-press);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse-press)}:host([appearance=outline][color=inverse]) button calcite-loader,:host([appearance=outline][color=inverse]) a calcite-loader{color:var(--calcite-ui-text-1)}:host([appearance=clear]) button,:host([appearance=clear]) a{background-color:transparent;border-width:1px;border-style:solid;-webkit-box-shadow:inset 0 0 0 1px transparent;box-shadow:inset 0 0 0 1px transparent}:host([appearance=clear][color=blue]) button,:host([appearance=clear][color=blue]) a{border-color:var(--calcite-ui-brand);color:var(--calcite-ui-brand)}:host([appearance=clear][color=blue]) button:hover,:host([appearance=clear][color=blue]) a:hover{border-color:var(--calcite-ui-brand-hover);color:var(--calcite-ui-brand-hover);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-brand-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand-hover)}:host([appearance=clear][color=blue]) button:focus,:host([appearance=clear][color=blue]) a:focus{border-color:var(--calcite-ui-brand);color:var(--calcite-ui-brand);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-brand);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}:host([appearance=clear][color=blue]) button:active,:host([appearance=clear][color=blue]) a:active{border-color:var(--calcite-ui-brand-press);color:var(--calcite-ui-brand-press);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-brand-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand-press)}:host([appearance=clear][color=blue]) button calcite-loader,:host([appearance=clear][color=blue]) a calcite-loader{color:var(--calcite-ui-brand)}:host([appearance=clear][color=red]) button,:host([appearance=clear][color=red]) a{border-color:var(--calcite-ui-danger);color:var(--calcite-ui-danger)}:host([appearance=clear][color=red]) button:hover,:host([appearance=clear][color=red]) a:hover{border-color:var(--calcite-ui-danger-hover);color:var(--calcite-ui-danger-hover);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-danger-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-danger-hover)}:host([appearance=clear][color=red]) button:focus,:host([appearance=clear][color=red]) a:focus{border-color:var(--calcite-ui-danger);color:var(--calcite-ui-danger);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-danger);box-shadow:inset 0 0 0 2px var(--calcite-ui-danger)}:host([appearance=clear][color=red]) button:active,:host([appearance=clear][color=red]) a:active{border-color:var(--calcite-ui-danger-press);color:var(--calcite-ui-danger-press);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-danger-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-danger-press)}:host([appearance=clear][color=red]) button calcite-loader,:host([appearance=clear][color=red]) a calcite-loader{color:var(--calcite-ui-danger)}:host([appearance=clear][color=neutral]) button,:host([appearance=clear][color=neutral]) a{color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-foreground-3)}:host([appearance=clear][color=neutral]) button:hover,:host([appearance=clear][color=neutral]) a:hover{-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-foreground-3);box-shadow:inset 0 0 0 1px var(--calcite-ui-foreground-3)}:host([appearance=clear][color=neutral]) button:focus,:host([appearance=clear][color=neutral]) a:focus{-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-3);box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-3)}:host([appearance=clear][color=neutral]) button:active,:host([appearance=clear][color=neutral]) a:active{-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-3);box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-3)}:host([appearance=clear][color=neutral]) button calcite-loader,:host([appearance=clear][color=neutral]) a calcite-loader{color:var(--calcite-ui-text-1)}:host([appearance=clear][color=inverse]) button,:host([appearance=clear][color=inverse]) a{color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-inverse)}:host([appearance=clear][color=inverse]) button:hover,:host([appearance=clear][color=inverse]) a:hover{border-color:var(--calcite-ui-inverse-hover);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-inverse-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-inverse-hover)}:host([appearance=clear][color=inverse]) button:focus,:host([appearance=clear][color=inverse]) a:focus{border-color:var(--calcite-ui-inverse);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse);box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse)}:host([appearance=clear][color=inverse]) button:active,:host([appearance=clear][color=inverse]) a:active{border-color:var(--calcite-ui-inverse-press);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse-press)}:host([appearance=clear][color=inverse]) button calcite-loader,:host([appearance=clear][color=inverse]) a calcite-loader{color:var(--calcite-ui-text-1)}:host([appearance=outline][split-child=primary]) button,:host([appearance=clear][split-child=primary]) button{border-right-width:0;border-left-width:1px}:host([appearance=outline][split-child=primary]) button.calcite--rtl,:host([appearance=clear][split-child=primary]) button.calcite--rtl{border-left-width:0;border-right-width:1px}:host([appearance=outline][split-child=secondary]) button,:host([appearance=clear][split-child=secondary]) button{border-left-width:0;border-right-width:1px}:host([appearance=outline][split-child=secondary]) button.calcite--rtl,:host([appearance=clear][split-child=secondary]) button.calcite--rtl{border-right-width:0;border-left-width:1px}:host([appearance=transparent]:not(.calcite-inline-editable__enable-editing-button)) button,:host([appearance=transparent]:not(.calcite-inline-editable__enable-editing-button)) a{background-color:transparent}:host([appearance=transparent]:not(.calcite-inline-editable__enable-editing-button)) button:hover,:host([appearance=transparent]:not(.calcite-inline-editable__enable-editing-button)) button:focus,:host([appearance=transparent]:not(.calcite-inline-editable__enable-editing-button)) a:hover,:host([appearance=transparent]:not(.calcite-inline-editable__enable-editing-button)) a:focus{background-color:var(--calcite-button-transparent-hover)}:host([appearance=transparent]:not(.calcite-inline-editable__enable-editing-button)) button:active,:host([appearance=transparent]:not(.calcite-inline-editable__enable-editing-button)) a:active{background-color:var(--calcite-button-transparent-press)}:host([appearance=transparent][color=blue]) button,:host([appearance=transparent][color=blue]) a{color:var(--calcite-ui-brand)}:host([appearance=transparent][color=blue]) button:hover,:host([appearance=transparent][color=blue]) a:hover{color:var(--calcite-ui-brand-hover)}:host([appearance=transparent][color=blue]) button:focus,:host([appearance=transparent][color=blue]) a:focus{color:var(--calcite-ui-brand)}:host([appearance=transparent][color=blue]) button:active,:host([appearance=transparent][color=blue]) a:active{color:var(--calcite-ui-brand-press)}:host([appearance=transparent][color=blue]) button calcite-loader,:host([appearance=transparent][color=blue]) a calcite-loader{color:var(--calcite-ui-brand)}:host([appearance=transparent][color=red]) button,:host([appearance=transparent][color=red]) a{color:var(--calcite-ui-danger)}:host([appearance=transparent][color=red]) button:hover,:host([appearance=transparent][color=red]) a:hover{color:var(--calcite-ui-danger-hover)}:host([appearance=transparent][color=red]) button:focus,:host([appearance=transparent][color=red]) a:focus{color:var(--calcite-ui-danger)}:host([appearance=transparent][color=red]) button:active,:host([appearance=transparent][color=red]) a:active{color:var(--calcite-ui-danger-press)}:host([appearance=transparent][color=red]) button calcite-loader,:host([appearance=transparent][color=red]) a calcite-loader{color:var(--calcite-ui-danger)}:host([appearance=transparent][color=neutral]:not(.calcite-inline-editable__cancel-editing-button)) button,:host([appearance=transparent][color=neutral]:not(.calcite-inline-editable__cancel-editing-button)) a,:host([appearance=transparent][color=neutral]:not(.calcite-inline-editable__cancel-editing-button)) calcite-loader{color:var(--calcite-ui-text-1)}:host([appearance=transparent][color=neutral].calcite-inline-editable__cancel-editing-button) button{color:var(--calcite-ui-text-3);border-top-width:1px;border-top-color:var(--calcite-ui-border-input);border-bottom-width:1px;border-bottom-color:var(--calcite-ui-border-input);border-bottom-style:solid;border-top-style:solid}:host([appearance=transparent][color=neutral].calcite-inline-editable__cancel-editing-button) button:not(.content--slotted){--calcite-button-padding-y:0}:host([appearance=transparent][color=neutral].calcite-inline-editable__cancel-editing-button) button:hover{color:var(--calcite-ui-text-1)}:host([appearance=transparent][color=neutral].calcite-inline-editable__enable-editing-button) button{background-color:transparent}:host([appearance=transparent][color=inverse]) button,:host([appearance=transparent][color=inverse]) a,:host([appearance=transparent][color=inverse]) calcite-loader{color:var(--calcite-ui-text-inverse)}:host([scale=s]) button.content--slotted,:host([scale=s]) a.content--slotted{font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=s][appearance=transparent]) button.content--slotted,:host([scale=s][appearance=transparent]) a.content--slotted{--calcite-button-padding-x:0.5rem;--calcite-button-padding-y:0.25rem}:host([scale=m]) button.content--slotted,:host([scale=m]) a.content--slotted{--calcite-button-padding-x:11px;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=m]:not([appearance=transparent])) button.content--slotted,:host([scale=m]:not([appearance=transparent])) a.content--slotted{--calcite-button-padding-y:7px}:host([scale=m][appearance=transparent]) button.content--slotted,:host([scale=m][appearance=transparent]) a.content--slotted{--calcite-button-padding-x:0.75rem;--calcite-button-padding-y:0.5rem}:host([scale=l]) button.content--slotted,:host([scale=l]) a.content--slotted{--calcite-button-padding-x:15px;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l]:not([appearance=transparent])) button.content--slotted,:host([scale=l]:not([appearance=transparent])) a.content--slotted{--calcite-button-padding-y:11px}:host([scale=l][appearance=transparent]) button.content--slotted,:host([scale=l][appearance=transparent]) a.content--slotted{--calcite-button-padding-x:1rem;--calcite-button-padding-y:0.75rem}:host([scale=s]) button:not(.content--slotted),:host([scale=s]) a:not(.content--slotted){--calcite-button-padding-x:0.125rem;--calcite-button-padding-y:3px;font-size:var(--calcite-font-size-0);line-height:1.25rem;width:1.5rem;min-height:1.5rem}:host([scale=s][appearance=transparent]) button:not(.content--slotted),:host([scale=s][appearance=transparent]) a:not(.content--slotted){--calcite-button-padding-y:0.25rem}:host([scale=m]) button:not(.content--slotted),:host([scale=m]) a:not(.content--slotted){--calcite-button-padding-x:0.125rem;--calcite-button-padding-y:7px;font-size:var(--calcite-font-size-0);line-height:1.25rem;width:2rem;min-height:2rem}:host([scale=m][appearance=transparent]) button:not(.content--slotted),:host([scale=m][appearance=transparent]) a:not(.content--slotted){--calcite-button-padding-y:0.5rem}:host([scale=l]) button:not(.content--slotted),:host([scale=l]) a:not(.content--slotted){--calcite-button-padding-x:0.125rem;--calcite-button-padding-y:9px;font-size:var(--calcite-font-size-0);line-height:1.25rem;width:2.75rem;min-height:2.75rem}:host([scale=l][appearance=transparent]) button:not(.content--slotted),:host([scale=l][appearance=transparent]) a:not(.content--slotted){--calcite-button-padding-y:0.625rem}:host([scale=s][icon-start][icon-end]) button:not(.content--slotted),:host([scale=s][icon-start][icon-end]) a:not(.content--slotted){--calcite-button-padding-x:23px;font-size:var(--calcite-font-size-0);line-height:1.25rem;height:1.5rem}:host([scale=s][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),:host([scale=s][icon-start][icon-end][appearance=transparent]) a:not(.content--slotted){--calcite-button-padding-x:1.5rem}:host([scale=m][icon-start][icon-end]) button:not(.content--slotted),:host([scale=m][icon-start][icon-end]) a:not(.content--slotted){--calcite-button-padding-x:2rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;height:2rem}:host([scale=m][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),:host([scale=m][icon-start][icon-end][appearance=transparent]) a:not(.content--slotted){--calcite-button-padding-x:33px}:host([scale=l][icon-start][icon-end]) button:not(.content--slotted),:host([scale=l][icon-start][icon-end]) a:not(.content--slotted){--calcite-button-padding-x:43px;font-size:var(--calcite-font-size-0);line-height:1.25rem;height:2.75rem}:host([scale=l][icon-start][icon-end]) button:not(.content--slotted) .icon--start+.icon--end,:host([scale=l][icon-start][icon-end]) a:not(.content--slotted) .icon--start+.icon--end{-webkit-margin-start:1rem;margin-inline-start:1rem}:host([scale=l][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),:host([scale=l][icon-start][icon-end][appearance=transparent]) a:not(.content--slotted){--calcite-button-padding-x:2.75rem}";
+const calciteButtonCss = "@-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:inline-block;width:auto;vertical-align:middle}:host([round]){border-radius:50px}:host([round]) a,:host([round]) button{border-radius:50px}:host button,:host a{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}:host button:focus,:host a:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}:host button,:host a{--calcite-button-content-margin:0.5rem;--calcite-button-padding-x:7px;--calcite-button-padding-y:3px;padding:var(--calcite-button-padding-y) var(--calcite-button-padding-x) var(--calcite-button-padding-y) var(--calcite-button-padding-x);position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;text-decoration:none;width:100%;height:100%;border-radius:0;border-style:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:inherit;font-weight:var(--calcite-font-weight-normal);-webkit-transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out, -webkit-box-shadow 0.15s ease-in-out;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out, -webkit-box-shadow 0.15s ease-in-out;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:color 0.15s ease-in-out, background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out, -webkit-box-shadow 0.15s ease-in-out}:host button:hover,:host a:hover{text-decoration:none}.content{display:-ms-flexbox;display:flex;-ms-flex-preferred-size:auto;flex-basis:auto;margin-left:var(--calcite-button-content-margin);margin-right:var(--calcite-button-content-margin)}:host([scale=m]) button,:host([scale=m]) a{--calcite-button-content-margin:0.75rem}:host([scale=l]) button,:host([scale=l]) a{--calcite-button-content-margin:1rem}:host(:not([icon-start])) .content{margin-left:unset}:host(:not([icon-end])) .content{margin-right:unset}:host([icon-start]:not([icon-end])) .calcite--rtl .content{margin-left:unset;margin-right:var(--calcite-button-content-margin)}:host([icon-end]:not([icon-start])) .calcite--rtl .content{margin-right:unset;margin-left:var(--calcite-button-content-margin)}:host([width=auto]){width:auto}:host([width=half]){width:50%}:host([width=full]){width:100%}:host([alignment=center]:not([width=auto])) a,:host([alignment=center]:not([width=auto])) button{-ms-flex-pack:center;justify-content:center}:host([alignment=start]:not([width=auto])) a,:host([alignment=start]:not([width=auto])) button{-ms-flex-pack:start;justify-content:flex-start}:host([alignment=end]:not([width=auto])) a,:host([alignment=end]:not([width=auto])) button{-ms-flex-pack:end;justify-content:flex-end}:host([alignment*=space-between]:not([width=auto])) a,:host([alignment*=space-between]:not([width=auto])) button{-ms-flex-pack:justify;justify-content:space-between}:host([alignment=icon-start-space-between]:not([width=auto])) .icon--start{margin-right:auto}:host([alignment=icon-start-space-between]:not([width=auto])) a,:host([alignment=icon-start-space-between]:not([width=auto])) button{text-align:unset}:host([alignment=icon-end-space-between]:not([width=auto])) .icon--end{margin-left:auto}:host([alignment=icon-end-space-between]:not([width=auto])) a,:host([alignment=icon-end-space-between]:not([width=auto])) button{text-align:unset}:host([alignment=icon-start-space-between]:not([width=auto])) .calcite--rtl .icon--start{margin-right:unset;margin-left:auto}:host([alignment=icon-end-space-between]:not([width=auto])) .calcite--rtl .icon--end{margin-left:unset;margin-right:auto}:host([alignment=center]) a:not(.content--slotted) .icon--start+.icon--end,:host([alignment=center]) button:not(.content--slotted) .icon--start+.icon--end{margin-left:var(--calcite-button-content-margin)}:host([alignment=center]) a.calcite--rtl:not(.content--slotted) .icon--start+.icon--end,:host([alignment=center]) button.calcite--rtl:not(.content--slotted) .icon--start+.icon--end{margin-left:unset;margin-right:var(--calcite-button-content-margin)}.icon{display:-ms-inline-flexbox;display:inline-flex;position:relative;margin:0;font-weight:var(--calcite-font-weight-normal);line-height:inherit}:host([loading]),:host([disabled]){pointer-events:none}:host([loading]) button,:host([loading]) a,:host([disabled]) button,:host([disabled]) a{pointer-events:none;opacity:var(--calcite-ui-opacity-disabled)}@-webkit-keyframes loader-in{0%{width:0;opacity:0;-webkit-transform:scale(0.5);transform:scale(0.5)}100%{width:1em;opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes loader-in{0%{width:0;opacity:0;-webkit-transform:scale(0.5);transform:scale(0.5)}100%{width:1em;opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes loader-out{0%{width:1em;opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{width:0;opacity:0;-webkit-transform:scale(0.5);transform:scale(0.5)}}@keyframes loader-out{0%{width:1em;opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{width:0;opacity:0;-webkit-transform:scale(0.5);transform:scale(0.5)}}.calcite-button--loader{display:-ms-flexbox;display:flex}.calcite-button--loader calcite-loader{margin:0;-webkit-transition:width 300ms ease-in-out, opacity 300ms ease-in-out, -webkit-transform 300ms ease-in-out;transition:width 300ms ease-in-out, opacity 300ms ease-in-out, -webkit-transform 300ms ease-in-out;transition:width 300ms ease-in-out, opacity 300ms ease-in-out, transform 300ms ease-in-out;transition:width 300ms ease-in-out, opacity 300ms ease-in-out, transform 300ms ease-in-out, -webkit-transform 300ms ease-in-out}.calcite-button--loader calcite-loader.loading-in{-webkit-animation-name:loader-in;animation-name:loader-in;-webkit-animation-duration:310ms;animation-duration:310ms}.calcite-button--loader calcite-loader.loading-out{-webkit-animation-name:loader-out;animation-name:loader-out;-webkit-animation-duration:310ms;animation-duration:310ms}:host([loading]) button.content--slotted .calcite-button--loader calcite-loader,:host([loading]) a.content--slotted .calcite-button--loader calcite-loader{-webkit-margin-end:var(--calcite-button-content-margin);margin-inline-end:var(--calcite-button-content-margin)}:host([loading]) button:not(.content--slotted) .icon--start,:host([loading]) button:not(.content--slotted) .icon--end,:host([loading]) a:not(.content--slotted) .icon--start,:host([loading]) a:not(.content--slotted) .icon--end{display:none}:host([appearance=solid]) button,:host([appearance=solid]) a{border-width:1px;border-style:solid;border-color:transparent}:host([appearance=solid][color=blue]) button,:host([appearance=solid][color=blue]) a{color:var(--calcite-ui-text-inverse);background-color:var(--calcite-ui-brand)}:host([appearance=solid][color=blue]) button:hover,:host([appearance=solid][color=blue]) button:focus,:host([appearance=solid][color=blue]) a:hover,:host([appearance=solid][color=blue]) a:focus{background-color:var(--calcite-ui-brand-hover)}:host([appearance=solid][color=blue]) button:active,:host([appearance=solid][color=blue]) a:active{background-color:var(--calcite-ui-brand-press)}:host([appearance=solid][color=blue]) button calcite-loader,:host([appearance=solid][color=blue]) a calcite-loader{color:var(--calcite-ui-text-inverse)}:host([appearance=solid][color=red]) button,:host([appearance=solid][color=red]) a{color:var(--calcite-ui-text-inverse);background-color:var(--calcite-ui-danger)}:host([appearance=solid][color=red]) button:hover,:host([appearance=solid][color=red]) button:focus,:host([appearance=solid][color=red]) a:hover,:host([appearance=solid][color=red]) a:focus{background-color:var(--calcite-ui-danger-hover)}:host([appearance=solid][color=red]) button:active,:host([appearance=solid][color=red]) a:active{background-color:var(--calcite-ui-danger-press)}:host([appearance=solid][color=red]) button calcite-loader,:host([appearance=solid][color=red]) a calcite-loader{color:var(--calcite-ui-text-inverse)}:host([appearance=solid][color=neutral]) button,:host([appearance=solid][color=neutral]) a{color:var(--calcite-ui-text-1);background-color:var(--calcite-ui-foreground-3)}:host([appearance=solid][color=neutral]) button:hover,:host([appearance=solid][color=neutral]) button:focus,:host([appearance=solid][color=neutral]) a:hover,:host([appearance=solid][color=neutral]) a:focus{background-color:var(--calcite-ui-foreground-2)}:host([appearance=solid][color=neutral]) button:active,:host([appearance=solid][color=neutral]) a:active{background-color:var(--calcite-ui-foreground-1)}:host([appearance=solid][color=neutral]) button calcite-loader,:host([appearance=solid][color=neutral]) a calcite-loader{color:var(--calcite-ui-text-1)}:host([appearance=solid][color=inverse]) button,:host([appearance=solid][color=inverse]) a{color:var(--calcite-ui-text-inverse);background-color:var(--calcite-ui-inverse)}:host([appearance=solid][color=inverse]) button:hover,:host([appearance=solid][color=inverse]) button:focus,:host([appearance=solid][color=inverse]) a:hover,:host([appearance=solid][color=inverse]) a:focus{background-color:var(--calcite-ui-inverse-hover)}:host([appearance=solid][color=inverse]) button:active,:host([appearance=solid][color=inverse]) a:active{background-color:var(--calcite-ui-inverse-press)}:host([appearance=solid][color=inverse]) button calcite-loader,:host([appearance=solid][color=inverse]) a calcite-loader{color:var(--calcite-ui-text-inverse)}:host([appearance=outline]) button,:host([appearance=outline]) a{background-color:var(--calcite-ui-foreground-1);border-width:1px;border-style:solid;-webkit-box-shadow:inset 0 0 0 1px transparent;box-shadow:inset 0 0 0 1px transparent}:host([appearance=outline][color=blue]) button,:host([appearance=outline][color=blue]) a{border-color:var(--calcite-ui-brand);color:var(--calcite-ui-brand)}:host([appearance=outline][color=blue]) button:hover,:host([appearance=outline][color=blue]) a:hover{border-color:var(--calcite-ui-brand-hover);color:var(--calcite-ui-brand-hover);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-brand-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand-hover)}:host([appearance=outline][color=blue]) button:focus,:host([appearance=outline][color=blue]) a:focus{border-color:var(--calcite-ui-brand);color:var(--calcite-ui-brand);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-brand);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}:host([appearance=outline][color=blue]) button:active,:host([appearance=outline][color=blue]) a:active{border-color:var(--calcite-ui-brand-press);color:var(--calcite-ui-brand-press);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-brand-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand-press)}:host([appearance=outline][color=blue]) button calcite-loader,:host([appearance=outline][color=blue]) a calcite-loader{color:var(--calcite-ui-brand)}:host([appearance=outline][color=red]) button,:host([appearance=outline][color=red]) a{border-color:var(--calcite-ui-danger);color:var(--calcite-ui-danger)}:host([appearance=outline][color=red]) button:hover,:host([appearance=outline][color=red]) a:hover{border-color:var(--calcite-ui-danger-hover);color:var(--calcite-ui-danger-hover);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-danger-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-danger-hover)}:host([appearance=outline][color=red]) button:focus,:host([appearance=outline][color=red]) a:focus{border-color:var(--calcite-ui-danger);color:var(--calcite-ui-danger);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-danger);box-shadow:inset 0 0 0 2px var(--calcite-ui-danger)}:host([appearance=outline][color=red]) button:active,:host([appearance=outline][color=red]) a:active{border-color:var(--calcite-ui-danger-press);color:var(--calcite-ui-danger-press);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-danger-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-danger-press)}:host([appearance=outline][color=red]) button calcite-loader,:host([appearance=outline][color=red]) a calcite-loader{color:var(--calcite-ui-danger)}:host([appearance=outline][color=neutral]) button,:host([appearance=outline][color=neutral]) a{color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-foreground-3)}:host([appearance=outline][color=neutral]) button:hover,:host([appearance=outline][color=neutral]) a:hover{-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-foreground-3);box-shadow:inset 0 0 0 1px var(--calcite-ui-foreground-3)}:host([appearance=outline][color=neutral]) button:focus,:host([appearance=outline][color=neutral]) a:focus{-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-3);box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-3)}:host([appearance=outline][color=neutral]) button:active,:host([appearance=outline][color=neutral]) a:active{-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-3);box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-3)}:host([appearance=outline][color=neutral]) button calcite-loader,:host([appearance=outline][color=neutral]) a calcite-loader{color:var(--calcite-ui-text-1)}:host([appearance=outline][color=inverse]) button,:host([appearance=outline][color=inverse]) a{color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-inverse)}:host([appearance=outline][color=inverse]) button:hover,:host([appearance=outline][color=inverse]) a:hover{border-color:var(--calcite-ui-inverse-hover);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-inverse-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-inverse-hover)}:host([appearance=outline][color=inverse]) button:focus,:host([appearance=outline][color=inverse]) a:focus{border-color:var(--calcite-ui-inverse);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse);box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse)}:host([appearance=outline][color=inverse]) button:active,:host([appearance=outline][color=inverse]) a:active{border-color:var(--calcite-ui-inverse-press);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse-press)}:host([appearance=outline][color=inverse]) button calcite-loader,:host([appearance=outline][color=inverse]) a calcite-loader{color:var(--calcite-ui-text-1)}:host([appearance=clear]) button,:host([appearance=clear]) a{background-color:transparent;border-width:1px;border-style:solid;-webkit-box-shadow:inset 0 0 0 1px transparent;box-shadow:inset 0 0 0 1px transparent}:host([appearance=clear][color=blue]) button,:host([appearance=clear][color=blue]) a{border-color:var(--calcite-ui-brand);color:var(--calcite-ui-brand)}:host([appearance=clear][color=blue]) button:hover,:host([appearance=clear][color=blue]) a:hover{border-color:var(--calcite-ui-brand-hover);color:var(--calcite-ui-brand-hover);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-brand-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand-hover)}:host([appearance=clear][color=blue]) button:focus,:host([appearance=clear][color=blue]) a:focus{border-color:var(--calcite-ui-brand);color:var(--calcite-ui-brand);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-brand);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}:host([appearance=clear][color=blue]) button:active,:host([appearance=clear][color=blue]) a:active{border-color:var(--calcite-ui-brand-press);color:var(--calcite-ui-brand-press);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-brand-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand-press)}:host([appearance=clear][color=blue]) button calcite-loader,:host([appearance=clear][color=blue]) a calcite-loader{color:var(--calcite-ui-brand)}:host([appearance=clear][color=red]) button,:host([appearance=clear][color=red]) a{border-color:var(--calcite-ui-danger);color:var(--calcite-ui-danger)}:host([appearance=clear][color=red]) button:hover,:host([appearance=clear][color=red]) a:hover{border-color:var(--calcite-ui-danger-hover);color:var(--calcite-ui-danger-hover);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-danger-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-danger-hover)}:host([appearance=clear][color=red]) button:focus,:host([appearance=clear][color=red]) a:focus{border-color:var(--calcite-ui-danger);color:var(--calcite-ui-danger);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-danger);box-shadow:inset 0 0 0 2px var(--calcite-ui-danger)}:host([appearance=clear][color=red]) button:active,:host([appearance=clear][color=red]) a:active{border-color:var(--calcite-ui-danger-press);color:var(--calcite-ui-danger-press);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-danger-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-danger-press)}:host([appearance=clear][color=red]) button calcite-loader,:host([appearance=clear][color=red]) a calcite-loader{color:var(--calcite-ui-danger)}:host([appearance=clear][color=neutral]) button,:host([appearance=clear][color=neutral]) a{color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-foreground-3)}:host([appearance=clear][color=neutral]) button:hover,:host([appearance=clear][color=neutral]) a:hover{-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-foreground-3);box-shadow:inset 0 0 0 1px var(--calcite-ui-foreground-3)}:host([appearance=clear][color=neutral]) button:focus,:host([appearance=clear][color=neutral]) a:focus{-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-3);box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-3)}:host([appearance=clear][color=neutral]) button:active,:host([appearance=clear][color=neutral]) a:active{-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-3);box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-3)}:host([appearance=clear][color=neutral]) button calcite-loader,:host([appearance=clear][color=neutral]) a calcite-loader{color:var(--calcite-ui-text-1)}:host([appearance=clear][color=inverse]) button,:host([appearance=clear][color=inverse]) a{color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-inverse)}:host([appearance=clear][color=inverse]) button:hover,:host([appearance=clear][color=inverse]) a:hover{border-color:var(--calcite-ui-inverse-hover);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-inverse-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-inverse-hover)}:host([appearance=clear][color=inverse]) button:focus,:host([appearance=clear][color=inverse]) a:focus{border-color:var(--calcite-ui-inverse);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse);box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse)}:host([appearance=clear][color=inverse]) button:active,:host([appearance=clear][color=inverse]) a:active{border-color:var(--calcite-ui-inverse-press);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse-press)}:host([appearance=clear][color=inverse]) button calcite-loader,:host([appearance=clear][color=inverse]) a calcite-loader{color:var(--calcite-ui-text-1)}:host([appearance=outline][split-child=primary]) button,:host([appearance=clear][split-child=primary]) button{border-right-width:0;border-left-width:1px}:host([appearance=outline][split-child=primary]) button.calcite--rtl,:host([appearance=clear][split-child=primary]) button.calcite--rtl{border-left-width:0;border-right-width:1px}:host([appearance=outline][split-child=secondary]) button,:host([appearance=clear][split-child=secondary]) button{border-left-width:0;border-right-width:1px}:host([appearance=outline][split-child=secondary]) button.calcite--rtl,:host([appearance=clear][split-child=secondary]) button.calcite--rtl{border-right-width:0;border-left-width:1px}:host([appearance=transparent]:not(.enable-editing-button)) button,:host([appearance=transparent]:not(.enable-editing-button)) a{background-color:transparent}:host([appearance=transparent]:not(.enable-editing-button)) button:hover,:host([appearance=transparent]:not(.enable-editing-button)) button:focus,:host([appearance=transparent]:not(.enable-editing-button)) a:hover,:host([appearance=transparent]:not(.enable-editing-button)) a:focus{background-color:var(--calcite-button-transparent-hover)}:host([appearance=transparent]:not(.enable-editing-button)) button:active,:host([appearance=transparent]:not(.enable-editing-button)) a:active{background-color:var(--calcite-button-transparent-press)}:host([appearance=transparent][color=blue]) button,:host([appearance=transparent][color=blue]) a{color:var(--calcite-ui-brand)}:host([appearance=transparent][color=blue]) button:hover,:host([appearance=transparent][color=blue]) a:hover{color:var(--calcite-ui-brand-hover)}:host([appearance=transparent][color=blue]) button:focus,:host([appearance=transparent][color=blue]) a:focus{color:var(--calcite-ui-brand)}:host([appearance=transparent][color=blue]) button:active,:host([appearance=transparent][color=blue]) a:active{color:var(--calcite-ui-brand-press)}:host([appearance=transparent][color=blue]) button calcite-loader,:host([appearance=transparent][color=blue]) a calcite-loader{color:var(--calcite-ui-brand)}:host([appearance=transparent][color=red]) button,:host([appearance=transparent][color=red]) a{color:var(--calcite-ui-danger)}:host([appearance=transparent][color=red]) button:hover,:host([appearance=transparent][color=red]) a:hover{color:var(--calcite-ui-danger-hover)}:host([appearance=transparent][color=red]) button:focus,:host([appearance=transparent][color=red]) a:focus{color:var(--calcite-ui-danger)}:host([appearance=transparent][color=red]) button:active,:host([appearance=transparent][color=red]) a:active{color:var(--calcite-ui-danger-press)}:host([appearance=transparent][color=red]) button calcite-loader,:host([appearance=transparent][color=red]) a calcite-loader{color:var(--calcite-ui-danger)}:host([appearance=transparent][color=neutral]:not(.cancel-editing-button)) button,:host([appearance=transparent][color=neutral]:not(.cancel-editing-button)) a,:host([appearance=transparent][color=neutral]:not(.cancel-editing-button)) calcite-loader{color:var(--calcite-ui-text-1)}:host([appearance=transparent][color=neutral].cancel-editing-button) button{color:var(--calcite-ui-text-3);border-top-width:1px;border-top-color:var(--calcite-ui-border-input);border-bottom-width:1px;border-bottom-color:var(--calcite-ui-border-input);border-bottom-style:solid;border-top-style:solid}:host([appearance=transparent][color=neutral].cancel-editing-button) button:not(.content--slotted){--calcite-button-padding-y:0}:host([appearance=transparent][color=neutral].cancel-editing-button) button:hover{color:var(--calcite-ui-text-1)}:host([appearance=transparent][color=neutral].enable-editing-button) button{background-color:transparent}:host(.confirm-changes-button) button:focus,:host(.cancel-editing-button) button:focus,:host(.enable-editing-button) button:focus{outline-offset:-2px}:host([appearance=transparent][color=inverse]) button,:host([appearance=transparent][color=inverse]) a,:host([appearance=transparent][color=inverse]) calcite-loader{color:var(--calcite-ui-text-inverse)}:host([scale=s]) button.content--slotted,:host([scale=s]) a.content--slotted{font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=s][appearance=transparent]) button.content--slotted,:host([scale=s][appearance=transparent]) a.content--slotted{--calcite-button-padding-x:0.5rem;--calcite-button-padding-y:0.25rem}:host([scale=m]) button.content--slotted,:host([scale=m]) a.content--slotted{--calcite-button-padding-x:11px;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=m]:not([appearance=transparent])) button.content--slotted,:host([scale=m]:not([appearance=transparent])) a.content--slotted{--calcite-button-padding-y:7px}:host([scale=m][appearance=transparent]) button.content--slotted,:host([scale=m][appearance=transparent]) a.content--slotted{--calcite-button-padding-x:0.75rem;--calcite-button-padding-y:0.5rem}:host([scale=l]) button.content--slotted,:host([scale=l]) a.content--slotted{--calcite-button-padding-x:15px;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l]:not([appearance=transparent])) button.content--slotted,:host([scale=l]:not([appearance=transparent])) a.content--slotted{--calcite-button-padding-y:11px}:host([scale=l][appearance=transparent]) button.content--slotted,:host([scale=l][appearance=transparent]) a.content--slotted{--calcite-button-padding-x:1rem;--calcite-button-padding-y:0.75rem}:host([scale=s]) button:not(.content--slotted),:host([scale=s]) a:not(.content--slotted){--calcite-button-padding-x:0.125rem;--calcite-button-padding-y:3px;font-size:var(--calcite-font-size-0);line-height:1.25rem;width:1.5rem;min-height:1.5rem}:host([scale=s][appearance=transparent]) button:not(.content--slotted),:host([scale=s][appearance=transparent]) a:not(.content--slotted){--calcite-button-padding-y:0.25rem}:host([scale=m]) button:not(.content--slotted),:host([scale=m]) a:not(.content--slotted){--calcite-button-padding-x:0.125rem;--calcite-button-padding-y:7px;font-size:var(--calcite-font-size-0);line-height:1.25rem;width:2rem;min-height:2rem}:host([scale=m][appearance=transparent]) button:not(.content--slotted),:host([scale=m][appearance=transparent]) a:not(.content--slotted){--calcite-button-padding-y:0.5rem}:host([scale=l]) button:not(.content--slotted),:host([scale=l]) a:not(.content--slotted){--calcite-button-padding-x:0.125rem;--calcite-button-padding-y:9px;font-size:var(--calcite-font-size-0);line-height:1.25rem;width:2.75rem;min-height:2.75rem}:host([scale=l][appearance=transparent]) button:not(.content--slotted),:host([scale=l][appearance=transparent]) a:not(.content--slotted){--calcite-button-padding-y:0.625rem}:host([scale=s][icon-start][icon-end]) button:not(.content--slotted),:host([scale=s][icon-start][icon-end]) a:not(.content--slotted){--calcite-button-padding-x:23px;font-size:var(--calcite-font-size-0);line-height:1.25rem;height:1.5rem}:host([scale=s][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),:host([scale=s][icon-start][icon-end][appearance=transparent]) a:not(.content--slotted){--calcite-button-padding-x:1.5rem}:host([scale=m][icon-start][icon-end]) button:not(.content--slotted),:host([scale=m][icon-start][icon-end]) a:not(.content--slotted){--calcite-button-padding-x:2rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;height:2rem}:host([scale=m][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),:host([scale=m][icon-start][icon-end][appearance=transparent]) a:not(.content--slotted){--calcite-button-padding-x:33px}:host([scale=l][icon-start][icon-end]) button:not(.content--slotted),:host([scale=l][icon-start][icon-end]) a:not(.content--slotted){--calcite-button-padding-x:43px;font-size:var(--calcite-font-size-0);line-height:1.25rem;height:2.75rem}:host([scale=l][icon-start][icon-end]) button:not(.content--slotted) .icon--start+.icon--end,:host([scale=l][icon-start][icon-end]) a:not(.content--slotted) .icon--start+.icon--end{-webkit-margin-start:1rem;margin-inline-start:1rem}:host([scale=l][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),:host([scale=l][icon-start][icon-end][appearance=transparent]) a:not(.content--slotted){--calcite-button-padding-x:2.75rem}";
 
 let CalciteButton$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -3542,7 +3573,7 @@ let CalciteCard$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteCardSelect = createEvent(this, "calciteCardSelect", 7);
     //--------------------------------------------------------------------------
     //
@@ -3609,7 +3640,7 @@ let CalciteCard$1 = class extends HTMLElement {
   }
   renderCheckbox() {
     const checkboxLabel = this.selected ? this.intlDeselect : this.intlSelect;
-    return (h("label", { "aria-label": checkboxLabel, class: CSS$H.checkboxWrapper, onClick: this.cardSelectClick, onKeyDown: this.cardSelectKeyDown, title: checkboxLabel }, h("calcite-checkbox", { checked: this.selected })));
+    return (h("calcite-label", { class: CSS$H.checkboxWrapper, onClick: this.cardSelectClick, onKeyDown: this.cardSelectKeyDown }, h("calcite-checkbox", { checked: this.selected, label: checkboxLabel })));
   }
   renderHeader() {
     const title = this.el.querySelector(`[slot=${SLOTS$j.title}]`);
@@ -3627,28 +3658,179 @@ let CalciteCard$1 = class extends HTMLElement {
   static get style() { return calciteCardCss; }
 };
 
-const hiddenInputStyle = `
-  bottom: 0 !important;
-  left: 0 !important;
-  margin: 0 !important;
-  opacity: 0 !important;
-  outline: none !important;
-  padding: 0 !important;
-  position: absolute !important;
-  right: 0 !important;
-  top: 0 !important;
-  transform: none !important;
-  -webkit-appearance: none !important;
-  z-index: -1 !important;
-`;
+/**
+ * Exported for testing purposes.
+ */
+const hiddenFormInputSlotName = "hidden-form-input";
+function isCheckable(component) {
+  return "checked" in component;
+}
+const onFormResetMap = new WeakMap();
+const formComponentSet = new WeakSet();
+function hasRegisteredFormComponentParent(form, formComponentEl) {
+  // we use events as a way to test for nested form-associated components across shadow bounds
+  const formComponentRegisterEventName = "calciteInternalFormComponentRegister";
+  let hasRegisteredFormComponentParent = false;
+  form.addEventListener(formComponentRegisterEventName, (event) => {
+    hasRegisteredFormComponentParent = event
+      .composedPath()
+      .some((element) => formComponentSet.has(element));
+    event.stopPropagation();
+  }, { once: true });
+  formComponentEl.dispatchEvent(new CustomEvent(formComponentRegisterEventName, {
+    bubbles: true,
+    composed: true
+  }));
+  return hasRegisteredFormComponentParent;
+}
+/**
+ * Helper to set up form interactions on connectedCallback.
+ */
+function connectForm(component) {
+  const { el, value } = component;
+  const form = closestElementCrossShadowBoundary(el, "form");
+  if (!form || hasRegisteredFormComponentParent(form, el)) {
+    return;
+  }
+  component.formEl = form;
+  component.defaultValue = value;
+  if (isCheckable(component)) {
+    component.defaultChecked = component.checked;
+  }
+  const boundOnFormReset = (component.onFormReset || onFormReset).bind(component);
+  form.addEventListener("reset", boundOnFormReset);
+  formComponentSet.add(el);
+}
+function onFormReset() {
+  if (isCheckable(this)) {
+    this.checked = this.defaultChecked;
+    return;
+  }
+  this.value = this.defaultValue;
+}
+/**
+ * Helper to tear down form interactions on disconnectedCallback.
+ */
+function disconnectForm(component) {
+  const { el, formEl } = component;
+  if (!formEl) {
+    return;
+  }
+  const boundOnFormReset = onFormResetMap.get(el);
+  formEl.removeEventListener("reset", boundOnFormReset);
+  onFormResetMap.delete(el);
+  component.formEl = null;
+  formComponentSet.delete(el);
+}
+/**
+ * Helper for setting the default value on initialization after connectedCallback.
+ *
+ * Note that this is only needed if the default value cannot be determined on connectedCallback.
+ */
+function afterConnectDefaultValueSet(component, value) {
+  component.defaultValue = value;
+}
+/**
+ * Helper for maintaining a form-associated's hidden input in sync with the component.
+ *
+ * Based on Ionic's approach: https://github.com/ionic-team/ionic-framework/blob/e4bf052794af9aac07f887013b9250d2a045eba3/core/src/utils/helpers.ts#L198
+ */
+function syncHiddenFormInput(component) {
+  const { el, formEl, name, value } = component;
+  const { ownerDocument } = el;
+  const inputs = el.querySelectorAll(`input[slot="${hiddenFormInputSlotName}"]`);
+  if (!formEl || !name) {
+    inputs.forEach((input) => input.remove());
+    return;
+  }
+  const values = Array.isArray(value) ? value : [value];
+  const extra = [];
+  const seen = new Set();
+  inputs.forEach((input) => {
+    const valueMatch = values.find((val) => 
+    /* intentional non-strict equality check */
+    val == input.value);
+    if (valueMatch != null) {
+      seen.add(valueMatch);
+      defaultSyncHiddenFormInput(component, input, valueMatch);
+    }
+    else {
+      extra.push(input);
+    }
+  });
+  let docFrag;
+  values.forEach((value) => {
+    if (seen.has(value)) {
+      return;
+    }
+    let input = extra.pop();
+    if (!input) {
+      input = ownerDocument.createElement("input");
+      input.slot = hiddenFormInputSlotName;
+    }
+    if (!docFrag) {
+      docFrag = ownerDocument.createDocumentFragment();
+    }
+    docFrag.append(input);
+    defaultSyncHiddenFormInput(component, input, value);
+  });
+  if (docFrag) {
+    el.append(docFrag);
+  }
+  extra.forEach((input) => input.remove());
+}
+function defaultSyncHiddenFormInput(component, input, value) {
+  var _a;
+  const { defaultValue, disabled, name, required } = component;
+  // keep in sync to prevent losing reset value
+  input.defaultValue = defaultValue;
+  input.disabled = disabled;
+  input.name = name;
+  input.required = required;
+  input.tabIndex = -1;
+  if (isCheckable(component)) {
+    // keep in sync to prevent losing reset value
+    input.defaultChecked = component.defaultChecked;
+    // heuristic to support default/on mode from https://html.spec.whatwg.org/multipage/input.html#dom-input-value-default-on
+    input.value = component.checked ? value || "on" : "";
+    // we disable the component when not checked to avoid having its value submitted
+    if (!disabled && !component.checked) {
+      input.disabled = true;
+    }
+  }
+  else {
+    input.value = value || "";
+  }
+  (_a = component.syncHiddenFormInput) === null || _a === void 0 ? void 0 : _a.call(component, input);
+}
+/**
+ * Helper to render the slot for form-associated component's hidden input.
+ *
+ * If the component has a default slot, this must be placed at the bottom of the component's root container to ensure it is the last child.
+ *
+ * render(): VNode {
+ *   <Host>
+ *     <div class={CSS.container}>
+ *     // ...
+ *     <HiddenFormInputSlot component={this} />
+ *     </div>
+ *   </Host>
+ * }
+ *
+ * Note that the hidden-form-input Sass mixin must be added to the component's style to apply specific styles.
+ */
+const HiddenFormInputSlot = ({ component }) => {
+  syncHiddenFormInput(component);
+  return h("slot", { name: hiddenFormInputSlotName });
+};
 
-const calciteCheckboxCss = "@-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([scale=s]){--calcite-checkbox-size:0.75rem}:host([scale=m]){--calcite-checkbox-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-checkbox-size:1rem}:host{display:-ms-inline-flexbox;display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host .check-svg{overflow:hidden;display:block;background-color:var(--calcite-ui-foreground-1);pointer-events:none;-webkit-box-sizing:border-box;box-sizing:border-box;-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);stroke:currentColor;stroke-width:1;fill:currentColor;width:var(--calcite-checkbox-size);height:var(--calcite-checkbox-size);-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);color:var(--calcite-ui-background)}:host ::slotted(input){width:var(--calcite-checkbox-size);height:var(--calcite-checkbox-size)}:host(:hover) .check-svg,:host([hovered]) .check-svg{-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-brand);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}:host([checked]) .check-svg,:host([indeterminate]) .check-svg{background-color:var(--calcite-ui-brand);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-brand);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand)}:host .focused .check-svg{-webkit-box-shadow:inset 0 0 0 1px 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 1px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);-webkit-transition:150ms ease-in-out;transition:150ms ease-in-out}:host([disabled]){cursor:default;opacity:var(--calcite-ui-opacity-disabled);pointer-events:none}";
+const calciteCheckboxCss = "@-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([scale=s]){--calcite-checkbox-size:0.75rem}:host([scale=m]){--calcite-checkbox-size:var(--calcite-font-size--1)}:host([scale=l]){--calcite-checkbox-size:1rem}:host{display:-ms-inline-flexbox;display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host .check-svg{overflow:hidden;display:block;background-color:var(--calcite-ui-foreground-1);pointer-events:none;-webkit-box-sizing:border-box;box-sizing:border-box;-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);stroke:currentColor;stroke-width:1;fill:currentColor;width:var(--calcite-checkbox-size);height:var(--calcite-checkbox-size);-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);color:var(--calcite-ui-background)}:host([checked]) .check-svg,:host([indeterminate]) .check-svg{background-color:var(--calcite-ui-brand);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-brand);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand)}:host([hovered]) .toggle .check-svg,:host .toggle:hover .check-svg{-webkit-box-shadow:inset 0 0 0 2px var(--calcite-ui-brand);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}:host .toggle:focus .check-svg,:host .toggle:active .check-svg{-webkit-box-shadow:inset 0 0 0 1px 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 1px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);-webkit-transition:150ms ease-in-out;transition:150ms ease-in-out}:host([disabled]){cursor:default;opacity:var(--calcite-ui-opacity-disabled);pointer-events:none}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
 
 let CalciteCheckbox$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteInternalCheckboxBlur = createEvent(this, "calciteInternalCheckboxBlur", 7);
     this.calciteCheckboxChange = createEvent(this, "calciteCheckboxChange", 7);
     this.calciteInternalCheckboxFocus = createEvent(this, "calciteInternalCheckboxFocus", 7);
@@ -3672,8 +3854,12 @@ let CalciteCheckbox$1 = class extends HTMLElement {
      * https://css-tricks.com/indeterminate-checkboxes/
      * */
     this.indeterminate = false;
-    /** The name of the checkbox input */
-    this.name = "";
+    /**
+     * When true, makes the component required for form-submission.
+     *
+     * @internal
+     */
+    this.required = false;
     /** specify the scale of the checkbox, defaults to m */
     this.scale = "m";
     //--------------------------------------------------------------------------
@@ -3685,13 +3871,6 @@ let CalciteCheckbox$1 = class extends HTMLElement {
     this.indeterminatePath = "M13 8v1H3V8z";
     //--------------------------------------------------------------------------
     //
-    //  State
-    //
-    //--------------------------------------------------------------------------
-    /** The focused state of the checkbox. */
-    this.focused = false;
-    //--------------------------------------------------------------------------
-    //
     //  Private Methods
     //
     //--------------------------------------------------------------------------
@@ -3699,26 +3878,34 @@ let CalciteCheckbox$1 = class extends HTMLElement {
     this.toggle = () => {
       if (!this.disabled) {
         this.checked = !this.checked;
-        focusElement(this.input);
+        this.setFocus();
         this.indeterminate = false;
         this.calciteCheckboxChange.emit();
       }
     };
+    this.keyDownHandler = (event) => {
+      if (event.key === " " || event.key === "Enter") {
+        this.toggle();
+        event.preventDefault();
+      }
+    };
     this.clickHandler = () => {
       this.toggle();
     };
-    this.formResetHandler = () => {
-      this.checked = this.initialChecked;
+    //--------------------------------------------------------------------------
+    //
+    //  Event Listeners
+    //
+    //--------------------------------------------------------------------------
+    this.onToggleBlur = () => {
+      this.calciteInternalCheckboxBlur.emit(false);
+    };
+    this.onToggleFocus = () => {
+      this.calciteInternalCheckboxFocus.emit(true);
+    };
+    this.onLabelClick = () => {
+      this.toggle();
     };
-  }
-  checkedWatcher(newChecked) {
-    this.input.checked = newChecked;
-  }
-  disabledChanged(disabled) {
-    this.input.disabled = disabled;
-  }
-  nameChanged(newName) {
-    this.input.name = newName;
   }
   //--------------------------------------------------------------------------
   //
@@ -3727,29 +3914,8 @@ let CalciteCheckbox$1 = class extends HTMLElement {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    focusElement(this.input);
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Event Listeners
-  //
-  //--------------------------------------------------------------------------
-  mouseenter() {
-    this.hovered = true;
-  }
-  mouseleave() {
-    this.hovered = false;
-  }
-  onInputBlur() {
-    this.focused = false;
-    this.calciteInternalCheckboxBlur.emit(false);
-  }
-  onInputFocus() {
-    this.focused = true;
-    this.calciteInternalCheckboxFocus.emit(true);
-  }
-  onLabelClick() {
-    this.toggle();
+    var _a;
+    (_a = this.toggleEl) === null || _a === void 0 ? void 0 : _a.focus();
   }
   //--------------------------------------------------------------------------
   //
@@ -3758,55 +3924,22 @@ let CalciteCheckbox$1 = class extends HTMLElement {
   //--------------------------------------------------------------------------
   connectedCallback() {
     this.guid = this.el.id || `calcite-checkbox-${guid()}`;
-    this.initialChecked = this.checked;
-    this.renderHiddenCheckboxInput();
-    const form = closestElementCrossShadowBoundary(this.el, "form");
-    if (form) {
-      form.addEventListener("reset", this.formResetHandler);
-    }
     connectLabel(this);
-  }
-  componentDidLoad() {
-    this.input.setAttribute("aria-label", getLabelText(this));
+    connectForm(this);
   }
   disconnectedCallback() {
-    this.input.parentNode.removeChild(this.input);
-    const form = closestElementCrossShadowBoundary(this.el, "form");
-    if (form) {
-      form.removeEventListener("reset", this.formResetHandler);
-    }
     disconnectLabel(this);
+    disconnectForm(this);
   }
   // --------------------------------------------------------------------------
   //
   //  Render Methods
   //
   // --------------------------------------------------------------------------
-  renderHiddenCheckboxInput() {
-    this.input = document.createElement("input");
-    this.checked && this.input.setAttribute("checked", "");
-    this.input.disabled = this.disabled;
-    this.input.id = `${this.guid}-input`;
-    this.input.name = this.name;
-    this.input.onblur = this.onInputBlur.bind(this);
-    this.input.onfocus = this.onInputFocus.bind(this);
-    this.input.style.cssText = hiddenInputStyle;
-    this.input.type = "checkbox";
-    this.input.setAttribute("aria-label", getLabelText(this));
-    if (this.value) {
-      this.input.value = this.value != null ? this.value.toString() : "";
-    }
-    this.el.appendChild(this.input);
-  }
   render() {
-    return (h(Host, { onClick: this.clickHandler }, h("div", { class: { focused: this.focused } }, h("svg", { class: "check-svg", viewBox: "0 0 16 16" }, h("path", { d: this.getPath() })), h("slot", null))));
+    return (h(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h("div", { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), class: "toggle", onBlur: this.onToggleBlur, onFocus: this.onToggleFocus, ref: (toggleEl) => (this.toggleEl = toggleEl), role: "checkbox", tabIndex: 0 }, h("svg", { class: "check-svg", viewBox: "0 0 16 16" }, h("path", { d: this.getPath() })), h("slot", null)), h(HiddenFormInputSlot, { component: this })));
   }
   get el() { return this; }
-  static get watchers() { return {
-    "checked": ["checkedWatcher"],
-    "disabled": ["disabledChanged"],
-    "name": ["nameChanged"]
-  }; }
   static get style() { return calciteCheckboxCss; }
 };
 
@@ -3832,7 +3965,7 @@ let CalciteChip$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteChipDismiss = createEvent(this, "calciteChipDismiss", 7);
     //--------------------------------------------------------------------------
     //
@@ -6102,7 +6235,7 @@ let CalciteColorPicker$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteColorPickerChange = createEvent(this, "calciteColorPickerChange", 7);
     this.calciteColorPickerInput = createEvent(this, "calciteColorPickerInput", 7);
     //--------------------------------------------------------------------------
@@ -6229,9 +6362,9 @@ let CalciteColorPicker$1 = class extends HTMLElement {
      * @see [ColorValue](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-color-picker/interfaces.ts#L10)
      */
     this.value = defaultValue;
-    this.colorUpdateLocked = false;
     this.colorFieldAndSliderHovered = false;
     this.hueThumbState = "idle";
+    this.internalColorUpdateContext = null;
     this.mode = CSSColorMode.HEX;
     this.shiftKeyChannelAdjustment = 0;
     this.sliderThumbState = "idle";
@@ -6540,7 +6673,7 @@ let CalciteColorPicker$1 = class extends HTMLElement {
     this.drawColorFieldAndSlider();
     this.updateChannelsFromColor(color);
     this.previousColor = oldColor;
-    if (this.colorUpdateLocked) {
+    if (this.internalColorUpdateContext) {
       return;
     }
     this.value = this.toValue(color);
@@ -6567,7 +6700,10 @@ let CalciteColorPicker$1 = class extends HTMLElement {
       this.setMode(nextMode);
     }
     const dragging = this.sliderThumbState === "drag" || this.hueThumbState === "drag";
-    if (this.colorUpdateLocked) {
+    if (this.internalColorUpdateContext) {
+      if (this.internalColorUpdateContext === "initial") {
+        return;
+      }
       this.calciteColorPickerInput.emit();
       if (!dragging) {
         this.calciteColorPickerChange.emit();
@@ -6638,15 +6774,15 @@ let CalciteColorPicker$1 = class extends HTMLElement {
   }
   connectedCallback() {
     const { allowEmpty, color: color$1, format, value } = this;
-    const valueIsNoColor = allowEmpty && !value;
+    const willSetNoColor = allowEmpty && !value;
     const parsedMode = parseMode(value);
-    const valueIsCompatible = (format === "auto" && parsedMode) || format === parsedMode;
-    const initialColor = valueIsNoColor ? null : valueIsCompatible ? color(value) : color$1;
+    const valueIsCompatible = willSetNoColor || (format === "auto" && parsedMode) || format === parsedMode;
+    const initialColor = willSetNoColor ? null : valueIsCompatible ? color(value) : color$1;
     if (!valueIsCompatible) {
       this.showIncompatibleColorWarning(value, format);
     }
     this.setMode(format);
-    this.internalColorSet(initialColor, false);
+    this.internalColorSet(initialColor, false, "initial");
     this.updateDimensions(this.scale);
   }
   disconnectedCallback() {
@@ -6711,14 +6847,14 @@ let CalciteColorPicker$1 = class extends HTMLElement {
     }
     return "none";
   }
-  internalColorSet(color, skipEqual = true) {
+  internalColorSet(color, skipEqual = true, context = "internal") {
     if (skipEqual && colorEqual(color, this.color)) {
       return;
     }
-    this.colorUpdateLocked = true;
+    this.internalColorUpdateContext = context;
     this.color = color;
     this.value = this.toValue(color);
-    this.colorUpdateLocked = false;
+    this.internalColorUpdateContext = null;
   }
   toValue(color, format = this.mode) {
     if (!color) {
@@ -6873,7 +7009,7 @@ let CalciteColorPickerHexInput$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteColorPickerHexInputChange = createEvent(this, "calciteColorPickerHexInputChange", 7);
     //--------------------------------------------------------------------------
     //
@@ -6904,8 +7040,8 @@ let CalciteColorPickerHexInput$1 = class extends HTMLElement {
      * The hex value.
      */
     this.value = normalizeHex(DEFAULT_COLOR.hex());
-    this.onCalciteInputBlur = (event) => {
-      const node = event.currentTarget;
+    this.onCalciteInputBlur = () => {
+      const node = this.inputNode;
       const inputValue = node.value;
       const hex = `#${inputValue}`;
       const willClearValue = this.allowEmpty && !inputValue;
@@ -6918,9 +7054,8 @@ let CalciteColorPickerHexInput$1 = class extends HTMLElement {
           ? ""
           : this.formatForInternalInput(rgbToHex(this.internalColor.object()));
     };
-    this.onInputChange = (event) => {
-      const node = event.currentTarget;
-      const inputValue = node.value;
+    this.onInputChange = () => {
+      const inputValue = this.inputNode.value;
       let value;
       if (inputValue) {
         const hex = inputValue;
@@ -6996,8 +7131,12 @@ let CalciteColorPickerHexInput$1 = class extends HTMLElement {
   // using @Listen as a workaround for VDOM listener not firing
   onInputKeyDown(event) {
     const { altKey, ctrlKey, metaKey, shiftKey } = event;
-    const { el, inputNode, internalColor, value } = this;
+    const { internalColor, value } = this;
     const key = getKey(event.key);
+    if (key === "Tab" || key === "Enter") {
+      this.onInputChange();
+      return;
+    }
     const isNudgeKey = key === "ArrowDown" || key === "ArrowUp";
     if (isNudgeKey) {
       if (!value) {
@@ -7012,16 +7151,9 @@ let CalciteColorPickerHexInput$1 = class extends HTMLElement {
       return;
     }
     const withModifiers = altKey || ctrlKey || metaKey;
-    const exceededHexLength = inputNode.value.length >= 6;
-    const focusedElement = el.shadowRoot.activeElement;
-    const hasTextSelection = 
-    // can't use window.getSelection() because of FF bug: https://bugzilla.mozilla.org/show_bug.cgi?id=85686
-    focusedElement.selectionStart != focusedElement.selectionEnd;
     const singleChar = key.length === 1;
     const validHexChar = hexChar.test(key);
-    if (singleChar &&
-      !withModifiers &&
-      (!validHexChar || (!hasTextSelection && exceededHexLength))) {
+    if (singleChar && !withModifiers && !validHexChar) {
       event.preventDefault();
     }
   }
@@ -7034,7 +7166,7 @@ let CalciteColorPickerHexInput$1 = class extends HTMLElement {
     const { el, intlHex, value } = this;
     const hexInputValue = this.formatForInternalInput(value);
     const elementDir = getElementDir(el);
-    return (h("div", { class: CSS$E.container }, h("calcite-input", { class: CSS$E.input, dir: elementDir, label: intlHex, onCalciteInputBlur: this.onCalciteInputBlur, onChange: this.onInputChange, prefixText: "#", ref: this.storeInputRef, scale: this.scale, value: hexInputValue }), hexInputValue ? (h("calcite-color-picker-swatch", { active: true, class: CSS$E.preview, color: `#${hexInputValue}`, scale: this.scale })) : null));
+    return (h("div", { class: CSS$E.container }, h("calcite-input", { class: CSS$E.input, dir: elementDir, label: intlHex, maxLength: 6, onCalciteInputBlur: this.onCalciteInputBlur, onCalciteInputChange: this.onInputChange, prefixText: "#", ref: this.storeInputRef, scale: this.scale, value: hexInputValue }), hexInputValue ? (h("calcite-color-picker-swatch", { active: true, class: CSS$E.preview, color: `#${hexInputValue}`, scale: this.scale })) : null));
   }
   //--------------------------------------------------------------------------
   //
@@ -7073,7 +7205,7 @@ let CalciteColorPickerSwatch$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -8913,9 +9045,9 @@ function createPopper({ referenceEl, el, placement, overlayPositioning = "absolu
     modifiers
   });
 }
-function updatePopper({ el, modifiers, placement: PopperPlacement, popper }) {
+async function updatePopper({ el, modifiers, placement: PopperPlacement, popper }) {
   const placement = getPlacement(el, PopperPlacement);
-  popper.setOptions({
+  await popper.setOptions({
     modifiers,
     placement
   });
@@ -8956,14 +9088,14 @@ function getDepth(element) {
   return result.snapshotLength;
 }
 
-const calciteComboboxCss = "@-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;position:relative}:host([disabled]){pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:0.5}:host([scale=s]){font-size:var(--calcite-font-size--2);--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-input-height:1.5rem}:host([scale=m]){font-size:var(--calcite-font-size--1);--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-input-height:2rem}:host([scale=l]){font-size:var(--calcite-font-size-0);--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.75rem;--calcite-combobox-input-height:2.75rem}.wrapper{display:-ms-flexbox;display:flex;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-1);outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;-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);padding:0 var(--calcite-combobox-item-spacing-unit-l) 0 var(--calcite-combobox-item-spacing-unit-l)}:host(:focus-within) .wrapper,.wrapper--active{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.wrapper--single{padding:0 var(--calcite-combobox-item-spacing-unit-l);cursor:pointer;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.grid-input{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;padding:0}.input{-ms-flex-positive:1;flex-grow:1;font-family:inherit;padding:0;background-color:transparent;border-style:none;color:var(--calcite-ui-text-1);-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:inherit;height:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height);min-width:120px;margin-bottom:var(--calcite-combobox-item-spacing-unit-s)}.input:focus{outline:2px solid transparent;outline-offset:2px}.input--transparent{opacity:0}.input--single{margin-bottom:0;margin-top:0;padding:0}.wrapper--active .input-single{cursor:text}.input--hidden{width:0;min-width:0;opacity:0;pointer-events:none}.input--icon{padding:0 var(--calcite-combobox-item-spacing-unit-l)}.input-wrap{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1}.input-wrap--single{-ms-flex:1 1 auto;flex:1 1 auto;overflow:hidden}.label{padding:0;display:-ms-flexbox;display:flex;font-weight:var(--calcite-font-weight-normal);-ms-flex:1 1 auto;flex:1 1 auto;pointer-events:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;height:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height)}.label--spaced{padding-top:0;padding-bottom:0;padding-left:var(--calcite-combobox-item-spacing-unit-l);padding-right:var(--calcite-combobox-item-spacing-unit-l)}.icon-end,.icon-start{cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:1rem}.icon-end{-ms-flex:none;flex:none}.popper-container{width:100%;display:block;position:absolute;z-index:900;-webkit-transform:scale(0);transform:scale(0);visibility:hidden;pointer-events:none}.popper-container .calcite-popper-anim{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:0.25rem}.popper-container[data-popper-placement^=bottom] .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}.popper-container[data-popper-placement^=top] .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}.popper-container[data-popper-placement^=left] .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}.popper-container[data-popper-placement^=right] .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}.popper-container[data-popper-placement] .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}.popper-container--active{pointer-events:initial;visibility:visible}.screen-readers-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.list-container{overflow-y:auto;max-height:100vh;background-color:var(--calcite-ui-foreground-1);width:var(--calcite-dropdown-width)}.list{display:block;margin:0;padding:0}.list--hide{height:0;overflow:hidden}.chip{margin:calc(var(--calcite-combobox-item-spacing-unit-s) / 2) var(--calcite-combobox-item-spacing-unit-s) calc(var(--calcite-combobox-item-spacing-unit-s) / 2) 0;max-width:100%}.chip--active{background-color:var(--calcite-ui-foreground-3)}.chip:last-child{margin-right:0}.chip--rtl{margin-right:unset;margin-left:var(--calcite-combobox-item-spacing-unit-l)}.chip--rtl:last-child{margin-left:0}.item{display:block}";
+const calciteComboboxCss = "@-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;position:relative}:host([disabled]){pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:0.5}:host([scale=s]){font-size:var(--calcite-font-size--2);--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-input-height:1.5rem}:host([scale=m]){font-size:var(--calcite-font-size--1);--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-input-height:2rem}:host([scale=l]){font-size:var(--calcite-font-size-0);--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.75rem;--calcite-combobox-input-height:2.75rem}.wrapper{display:-ms-flexbox;display:flex;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-1);outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;-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);padding:0 var(--calcite-combobox-item-spacing-unit-l) 0 var(--calcite-combobox-item-spacing-unit-l)}:host(:focus-within) .wrapper,.wrapper--active{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.wrapper--single{padding:0 var(--calcite-combobox-item-spacing-unit-l);cursor:pointer;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.grid-input{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:center;align-items:center;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.input{-ms-flex-positive:1;flex-grow:1;font-family:inherit;padding:0;background-color:transparent;border-style:none;color:var(--calcite-ui-text-1);-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:inherit;height:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height);min-width:120px;margin-bottom:var(--calcite-combobox-item-spacing-unit-s)}.input:focus{outline:2px solid transparent;outline-offset:2px}.input--transparent{opacity:0}.input--single{margin-bottom:0;margin-top:0;padding:0}.wrapper--active .input-single{cursor:text}.input--hidden{width:0;min-width:0;opacity:0;pointer-events:none}.input--icon{padding:0 var(--calcite-combobox-item-spacing-unit-l)}.input-wrap{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1}.input-wrap--single{-ms-flex:1 1 auto;flex:1 1 auto;overflow:hidden}.label{padding:0;display:-ms-flexbox;display:flex;font-weight:var(--calcite-font-weight-normal);-ms-flex:1 1 auto;flex:1 1 auto;pointer-events:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;height:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height)}.label--spaced{padding-top:0;padding-bottom:0;padding-left:var(--calcite-combobox-item-spacing-unit-l);padding-right:var(--calcite-combobox-item-spacing-unit-l)}.icon-end,.icon-start{cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:1rem}.icon-end{-ms-flex:none;flex:none}.popper-container{width:100%;display:block;position:absolute;z-index:900;-webkit-transform:scale(0);transform:scale(0);visibility:hidden;pointer-events:none}.popper-container .calcite-popper-anim{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:0.25rem}.popper-container[data-popper-placement^=bottom] .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}.popper-container[data-popper-placement^=top] .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}.popper-container[data-popper-placement^=left] .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}.popper-container[data-popper-placement^=right] .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}.popper-container[data-popper-placement] .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}.popper-container--active{pointer-events:initial;visibility:visible}.screen-readers-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.list-container{overflow-y:auto;max-height:100vh;background-color:var(--calcite-ui-foreground-1);width:var(--calcite-dropdown-width)}.list{display:block;margin:0;padding:0}.list--hide{height:0;overflow:hidden}.chip{margin:calc(var(--calcite-combobox-item-spacing-unit-s) / 2) var(--calcite-combobox-item-spacing-unit-s) calc(var(--calcite-combobox-item-spacing-unit-s) / 2) 0;max-width:100%}.chip--active{background-color:var(--calcite-ui-foreground-3)}.chip:last-child{margin-right:0}.chip--rtl{margin-right:unset;margin-left:var(--calcite-combobox-item-spacing-unit-l)}.chip--rtl:last-child{margin-left:0}.item{display:block}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
 
 const isGroup = (el) => el.tagName === ComboboxItemGroup;
 let CalciteCombobox$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteLookupChange = createEvent(this, "calciteLookupChange", 7);
     this.calciteComboboxChange = createEvent(this, "calciteComboboxChange", 7);
     this.calciteComboboxFilterChange = createEvent(this, "calciteComboboxFilterChange", 7);
@@ -8983,6 +9115,12 @@ let CalciteCombobox$1 = class extends HTMLElement {
     this.maxItems = 0;
     /** Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */
     this.overlayPositioning = "absolute";
+    /**
+     * When true, makes the component required for form-submission.
+     *
+     * @internal
+     */
+    this.required = false;
     /** specify the selection mode
      * - multi: allow any number of selected items (default)
      * - single: only one selection)
@@ -8991,6 +9129,14 @@ let CalciteCombobox$1 = class extends HTMLElement {
     this.selectionMode = "multi";
     /** Specify the scale of the combobox, defaults to m */
     this.scale = "m";
+    /** The value(s) of the selectedItem(s) */
+    this.value = null;
+    //--------------------------------------------------------------------------
+    //
+    //  Private State/Props
+    //
+    //--------------------------------------------------------------------------
+    this.internalValueChangeFlag = false;
     this.items = [];
     this.groupItems = [];
     this.selectedItems = [];
@@ -9009,6 +9155,18 @@ let CalciteCombobox$1 = class extends HTMLElement {
     this.inputHeight = 0;
     this.ignoreSelectedEventsFlag = false;
     this.activeTransitionProp = "opacity";
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.getValue = () => {
+      const items = this.selectedItems.map((item) => item === null || item === void 0 ? void 0 : item.value.toString());
+      return (items === null || items === void 0 ? void 0 : items.length) ? (items.length > 1 ? items : items[0]) : "";
+    };
+    this.onLabelClick = () => {
+      this.setFocus();
+    };
     this.keydownHandler = (event) => {
       const key = getKey(event.key, getElementDir(this.el));
       switch (key) {
@@ -9103,7 +9261,10 @@ let CalciteCombobox$1 = class extends HTMLElement {
       }
       this.calciteComboboxChipDismiss.emit(event.detail);
     };
-    this.setFocusClick = () => {
+    this.setFocusClick = (event) => {
+      if (event.composedPath().some((node) => node.tagName === "CALCITE-CHIP")) {
+        return;
+      }
       this.setFocus();
     };
     this.setInactiveIfNotContained = (event) => {
@@ -9191,8 +9352,9 @@ let CalciteCombobox$1 = class extends HTMLElement {
       }
     };
     this.comboboxFocusHandler = () => {
+      var _a;
       this.active = true;
-      this.textInput.focus();
+      (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus();
     };
     this.comboboxBlurHandler = (event) => {
       this.setInactiveIfNotContained(event);
@@ -9219,6 +9381,21 @@ let CalciteCombobox$1 = class extends HTMLElement {
   maxItemsHandler() {
     this.setMaxScrollerHeight();
   }
+  valueHandler(value) {
+    if (!this.internalValueChangeFlag) {
+      const items = this.getItems();
+      if (Array.isArray(value)) {
+        items.forEach((item) => (item.selected = value.includes(item.value)));
+      }
+      else if (value) {
+        items.forEach((item) => (item.selected = value === item.value));
+      }
+      else {
+        items.forEach((item) => (item.selected = false));
+      }
+      this.updateItems();
+    }
+  }
   //--------------------------------------------------------------------------
   //
   //  Event Listeners
@@ -9244,7 +9421,7 @@ let CalciteCombobox$1 = class extends HTMLElement {
     const { popper, menuEl } = this;
     const modifiers = this.getModifiers();
     popper
-      ? updatePopper({
+      ? await updatePopper({
         el: menuEl,
         modifiers,
         placement: ComboboxDefaultPlacement,
@@ -9267,13 +9444,20 @@ let CalciteCombobox$1 = class extends HTMLElement {
   // --------------------------------------------------------------------------
   connectedCallback() {
     var _a;
+    this.internalValueChangeFlag = true;
+    this.value = this.getValue();
+    this.internalValueChangeFlag = false;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     this.createPopper();
     connectLabel(this);
+    connectForm(this);
   }
   componentWillLoad() {
     this.updateItems();
   }
+  componentDidLoad() {
+    afterConnectDefaultValueSet(this, this.getValue());
+  }
   componentDidRender() {
     if (this.el.offsetHeight !== this.inputHeight) {
       this.reposition();
@@ -9285,19 +9469,17 @@ let CalciteCombobox$1 = class extends HTMLElement {
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     this.destroyPopper();
     disconnectLabel(this);
+    disconnectForm(this);
+  }
+  selectedItemsHandler() {
+    this.internalValueChangeFlag = true;
+    this.value = this.getValue();
+    this.internalValueChangeFlag = false;
   }
   /** when search text is cleared, reset active to  */
   textHandler() {
     this.updateActiveItemIndex(-1);
   }
-  // --------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  // --------------------------------------------------------------------------
-  onLabelClick() {
-    this.setFocus();
-  }
   getModifiers() {
     const flipModifier = {
       name: "flip",
@@ -9345,9 +9527,11 @@ let CalciteCombobox$1 = class extends HTMLElement {
   calculateSingleItemHeight(item) {
     let height = item.offsetHeight;
     // if item has children items, don't count their height twice
-    const children = item.querySelectorAll(ComboboxChildSelector);
-    children.forEach((child) => {
-      height -= child.offsetHeight;
+    const children = Array.from(item.querySelectorAll(ComboboxChildSelector));
+    children
+      .map((child) => child === null || child === void 0 ? void 0 : child.offsetHeight)
+      .forEach((offsetHeight) => {
+      height -= offsetHeight;
     });
     return height;
   }
@@ -9365,16 +9549,17 @@ let CalciteCombobox$1 = class extends HTMLElement {
       this.emitCalciteLookupChange();
       this.emitComboboxChange();
       this.resetText();
-      this.textInput.focus();
       this.filterItems("");
     }
     else {
       this.ignoreSelectedEventsFlag = true;
-      this.items.forEach((el) => (el.selected = el === item));
+      this.items.forEach((el) => (el.selected = el === item ? value : false));
       this.ignoreSelectedEventsFlag = false;
       this.selectedItems = this.getSelectedItems();
       this.emitComboboxChange();
-      this.textInput.value = item.textLabel;
+      if (this.textInput) {
+        this.textInput.value = item.textLabel;
+      }
       this.active = false;
       this.updateActiveItemIndex(-1);
       this.resetText();
@@ -9431,7 +9616,9 @@ let CalciteCombobox$1 = class extends HTMLElement {
     return this.selectionMode === "single" && this.items.some((item) => item.icon);
   }
   resetText() {
-    this.textInput.value = "";
+    if (this.textInput) {
+      this.textInput.value = "";
+    }
     this.text = "";
   }
   getItems() {
@@ -9519,6 +9706,7 @@ let CalciteCombobox$1 = class extends HTMLElement {
     }
   }
   updateActiveItemIndex(index) {
+    var _a;
     this.activeItemIndex = index;
     let activeDescendant = null;
     this.visibleItems.forEach((el, i) => {
@@ -9533,7 +9721,7 @@ let CalciteCombobox$1 = class extends HTMLElement {
     this.activeDescendant = activeDescendant;
     if (this.activeItemIndex > -1) {
       this.activeChipIndex = -1;
-      this.textInput.focus();
+      (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus();
     }
   }
   isMulti() {
@@ -9610,12 +9798,14 @@ let CalciteCombobox$1 = class extends HTMLElement {
         wrapper: true,
         "wrapper--single": single || !this.selectedItems.length,
         "wrapper--active": open
-      }, onClick: this.setFocusClick, ref: this.setReferenceEl, role: "combobox" }, h("div", { class: "grid-input" }, this.renderIconStart(), !single && this.renderChips(), h("label", { class: "screen-readers-only", htmlFor: `${guid}-input`, id: labelId }, label), this.renderInput()), this.renderIconEnd()), h("ul", { "aria-labelledby": labelId, "aria-multiselectable": "true", class: "screen-readers-only", id: guid, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()), this.renderPopperContainer()));
+      }, onClick: this.setFocusClick, ref: this.setReferenceEl, role: "combobox" }, h("div", { class: "grid-input" }, this.renderIconStart(), !single && this.renderChips(), h("label", { class: "screen-readers-only", htmlFor: `${guid}-input`, id: labelId }, label), this.renderInput()), this.renderIconEnd()), h("ul", { "aria-labelledby": labelId, "aria-multiselectable": "true", class: "screen-readers-only", id: guid, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()), this.renderPopperContainer(), h(HiddenFormInputSlot, { component: this })));
   }
   get el() { return this; }
   static get watchers() { return {
     "active": ["activeHandler"],
     "maxItems": ["maxItemsHandler"],
+    "value": ["valueHandler"],
+    "selectedItems": ["selectedItemsHandler"],
     "text": ["textHandler"]
   }; }
   static get style() { return calciteComboboxCss; }
@@ -9640,7 +9830,7 @@ let CalciteComboboxItem$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteComboboxItemChange = createEvent(this, "calciteComboboxItemChange", 7);
     // --------------------------------------------------------------------------
     //
@@ -9759,7 +9949,7 @@ let CalciteComboboxItemGroup$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.guid = guid();
     this.scale = "m";
   }
@@ -10145,7 +10335,7 @@ let CalciteDatePicker$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteDatePickerChange = createEvent(this, "calciteDatePickerChange", 7);
     this.calciteDatePickerRangeChange = createEvent(this, "calciteDatePickerRangeChange", 7);
     /** Localized string for "previous month" (used for aria label)
@@ -10279,7 +10469,9 @@ let CalciteDatePicker$1 = class extends HTMLElement {
      */
     this.reset = () => {
       var _a, _b, _c, _d, _e, _f;
-      if (this.valueAsDate && ((_a = this.valueAsDate) === null || _a === void 0 ? void 0 : _a.getTime()) !== ((_b = this.activeDate) === null || _b === void 0 ? void 0 : _b.getTime())) {
+      if (!Array.isArray(this.valueAsDate) &&
+        this.valueAsDate &&
+        ((_a = this.valueAsDate) === null || _a === void 0 ? void 0 : _a.getTime()) !== ((_b = this.activeDate) === null || _b === void 0 ? void 0 : _b.getTime())) {
         this.activeDate = new Date(this.valueAsDate);
       }
       if (this.startAsDate && ((_c = this.startAsDate) === null || _c === void 0 ? void 0 : _c.getTime()) !== ((_d = this.activeStartDate) === null || _d === void 0 ? void 0 : _d.getTime())) {
@@ -10348,8 +10540,10 @@ let CalciteDatePicker$1 = class extends HTMLElement {
     };
   }
   handleValueAsDate(date) {
-    this.activeDate = date;
-    this.calciteDatePickerChange.emit(date);
+    if (!Array.isArray(date) && date && date !== this.activeDate) {
+      this.activeDate = date;
+      this.calciteDatePickerChange.emit(date);
+    }
   }
   handleRangeChange() {
     const { startAsDate: startDate, endAsDate: endDate } = this;
@@ -10362,7 +10556,12 @@ let CalciteDatePicker$1 = class extends HTMLElement {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
-    if (this.value) {
+    if (Array.isArray(this.value)) {
+      this.valueAsDate = this.value.map((v) => dateFromISO(v));
+      this.start = this.value[0];
+      this.end = this.value[1];
+    }
+    else if (this.value) {
       this.valueAsDate = dateFromISO(this.value);
     }
     if (this.start) {
@@ -10413,8 +10612,17 @@ let CalciteDatePicker$1 = class extends HTMLElement {
     const dir = getElementDir(this.el);
     return (h(Host, { onBlur: this.reset, onKeyUp: this.keyUpHandler, role: "application" }, this.renderCalendar(activeDate, dir, maxDate, minDate, date, endDate)));
   }
-  valueWatcher(value) {
-    this.valueAsDate = dateFromISO(value);
+  valueHandler(value) {
+    if (Array.isArray(value)) {
+      this.valueAsDate = value.map((v) => dateFromISO(v));
+      this.start = value[0];
+      this.end = value[1];
+    }
+    else if (value) {
+      this.valueAsDate = dateFromISO(value);
+      this.start = "";
+      this.end = "";
+    }
   }
   startWatcher(start) {
     this.setStartAsDate(dateFromISO(start));
@@ -10492,7 +10700,7 @@ let CalciteDatePicker$1 = class extends HTMLElement {
     "valueAsDate": ["handleValueAsDate"],
     "startAsDate": ["handleRangeChange"],
     "endAsDate": ["handleRangeChange"],
-    "value": ["valueWatcher"],
+    "value": ["valueHandler"],
     "start": ["startWatcher"],
     "end": ["endWatcher"],
     "locale": ["loadLocaleData"]
@@ -10506,7 +10714,7 @@ let CalciteDatePickerDay$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteDaySelect = createEvent(this, "calciteDaySelect", 7);
     this.calciteDayHover = createEvent(this, "calciteDayHover", 7);
     /** Date is outside of range and can't be selected */
@@ -10570,7 +10778,7 @@ let CalciteDatePickerMonth$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteDatePickerSelect = createEvent(this, "calciteDatePickerSelect", 7);
     this.calciteDatePickerHover = createEvent(this, "calciteDatePickerHover", 7);
     this.calciteDatePickerActiveDateChange = createEvent(this, "calciteDatePickerActiveDateChange", 7);
@@ -10845,7 +11053,7 @@ let CalciteDatePickerMonthHeader$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteDatePickerSelect = createEvent(this, "calciteDatePickerSelect", 7);
     //--------------------------------------------------------------------------
     //
@@ -10978,7 +11186,7 @@ let CalciteDropdown$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteDropdownSelect = createEvent(this, "calciteDropdownSelect", 7);
     this.calciteDropdownOpen = createEvent(this, "calciteDropdownOpen", 7);
     this.calciteDropdownClose = createEvent(this, "calciteDropdownClose", 7);
@@ -11026,14 +11234,26 @@ let CalciteDropdown$1 = class extends HTMLElement {
     //
     //--------------------------------------------------------------------------
     this.items = [];
-    /** specifies the item wrapper height; it is updated when maxItems is > 0  **/
-    this.maxScrollerHeight = 0;
     this.activeTransitionProp = "opacity";
+    this.mutationObserver = createObserver("mutation", () => this.updateItems());
     //--------------------------------------------------------------------------
     //
     //  Private Methods
     //
     //--------------------------------------------------------------------------
+    this.updateItems = () => {
+      this.updateSelectedItems();
+      this.triggers = Array.from(this.el.querySelectorAll("[slot=dropdown-trigger]"));
+      this.items = Array.from(this.el.querySelectorAll("calcite-dropdown-item"));
+      this.reposition();
+    };
+    this.setMaxScrollerHeight = () => {
+      const { scrollerEl } = this;
+      if (scrollerEl) {
+        const maxScrollerHeight = this.getMaxScrollerHeight();
+        scrollerEl.style.maxHeight = maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : "";
+      }
+    };
     this.setScrollerEl = (scrollerEl) => {
       this.scrollerEl = scrollerEl;
     };
@@ -11086,6 +11306,9 @@ let CalciteDropdown$1 = class extends HTMLElement {
   activeHandler() {
     this.reposition();
   }
+  maxItemsHandler() {
+    this.reposition();
+  }
   placementHandler() {
     this.reposition();
   }
@@ -11095,20 +11318,17 @@ let CalciteDropdown$1 = class extends HTMLElement {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     this.createPopper();
-  }
-  componentWillLoad() {
-    // get initially selected items
-    this.updateSelectedItems();
+    this.updateItems();
   }
   componentDidLoad() {
-    this.triggers = Array.from(this.el.querySelectorAll("[slot=dropdown-trigger]"));
-    const groups = Array.from(this.el.querySelectorAll("calcite-dropdown-group"));
-    this.maxScrollerHeight = this.getMaxScrollerHeight(groups);
-    this.items = Array.from(this.el.querySelectorAll("calcite-dropdown-item"));
     this.reposition();
   }
   disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     this.destroyPopper();
   }
   render() {
@@ -11127,13 +11347,11 @@ let CalciteDropdown$1 = class extends HTMLElement {
   //--------------------------------------------------------------------------
   /** Updates the position of the component. */
   async reposition() {
-    const { popper, menuEl, placement, scrollerEl, maxScrollerHeight } = this;
-    if (scrollerEl) {
-      scrollerEl.style.maxHeight = maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : "";
-    }
+    const { popper, menuEl, placement } = this;
+    this.setMaxScrollerHeight();
     const modifiers = this.getModifiers();
     popper
-      ? updatePopper({
+      ? await updatePopper({
         el: menuEl,
         modifiers,
         placement,
@@ -11245,7 +11463,8 @@ let CalciteDropdown$1 = class extends HTMLElement {
     const items = Array.from(this.el.querySelectorAll("calcite-dropdown-item"));
     this.selectedItems = items.filter((item) => item.active);
   }
-  getMaxScrollerHeight(groups) {
+  getMaxScrollerHeight() {
+    const groups = Array.from(this.el.querySelectorAll("calcite-dropdown-group"));
     const { maxItems } = this;
     let itemsToProcess = 0;
     let maxScrollerHeight = 0;
@@ -11305,6 +11524,7 @@ let CalciteDropdown$1 = class extends HTMLElement {
   get el() { return this; }
   static get watchers() { return {
     "active": ["activeHandler"],
+    "maxItems": ["maxItemsHandler"],
     "placement": ["placementHandler"]
   }; }
   static get style() { return calciteDropdownCss; }
@@ -11322,7 +11542,7 @@ let CalciteDropdownGroup$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteDropdownItemChange = createEvent(this, "calciteDropdownItemChange", 7);
     /** specify the selection mode - multi (allow any number of (or no) active items), single (allow and require one active item),
      none (no active items), defaults to single */
@@ -11383,13 +11603,13 @@ const CSS$y = {
   containerNone: "container--none-selection"
 };
 
-const calciteDropdownItemCss = "@-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}.container--s{font-size:var(--calcite-font-size--2);line-height:1rem;padding-right:0.5rem;padding-left:1.5rem;padding-top:0.25rem;padding-bottom:0.25rem}.container--m{font-size:var(--calcite-font-size--1);line-height:1rem;padding-right:0.75rem;padding-left:2rem;padding-top:0.5rem;padding-bottom:0.5rem}.container--l{font-size:var(--calcite-font-size-0);line-height:1.25rem;padding-right:1rem;padding-left:2.5rem;padding-top:0.75rem;padding-bottom:0.75rem}.container--s.calcite--rtl{padding-right:1.5rem;padding-left:0.5rem}.container--m.calcite--rtl{padding-right:2rem;padding-left:0.75rem}.container--l.calcite--rtl{padding-right:2.5rem;padding-left:1rem}:host{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;position:relative}.container{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;color:var(--calcite-ui-text-3);-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);cursor:pointer;text-decoration:none;outline:2px solid transparent;outline-offset:2px;position:relative}.dropdown-item-content{margin-right:auto;margin-left:0.25rem}.calcite--rtl .dropdown-item-content{margin-left:auto;margin-right:0}:host,.container--link a{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}:host(:focus),.container--link a:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.container--link{padding:0}.container--link a{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;color:var(--calcite-ui-text-3);-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);cursor:pointer;text-decoration:none;outline:2px solid transparent;outline-offset:2px;position:relative}.container--s .dropdown-link{padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem}.container--m .dropdown-link{padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem}.container--l .dropdown-link{padding-left:1.25rem;padding-right:1.25rem;padding-top:1rem;padding-bottom:1rem}:host(:hover) .container,:host(:active) .container{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1);text-decoration:none}:host(:focus) .container{color:var(--calcite-ui-text-1);text-decoration:none}:host(:active) .container{background-color:var(--calcite-ui-foreground-3)}:host(:hover) .container:before,:host(:active) .container:before,:host(:focus) .container:before{opacity:1}.calcite--rtl:before{left:unset;right:1rem}:host([active]) .container:not(.container--none-selection){color:var(--calcite-ui-text-1);font-weight:var(--calcite-font-weight-medium)}:host([active]) .container:not(.container--none-selection):before{opacity:1;color:var(--calcite-ui-brand)}:host([active]) .container:not(.container--none-selection) calcite-icon{color:var(--calcite-ui-brand)}.container--s.container--none-selection{padding-left:0.25rem}.container--m.container--none-selection{padding-left:0.5rem}.container--l.container--none-selection{padding-left:0.75rem}.container--multi-selection:before,.container--none-selection:before{display:none}.container--s:before{left:0.5rem}.container--m:before{left:0.75rem}.container--l:before{left:1rem}.calcite--rtl:before{left:unset}.container--s.calcite--rtl:before{right:0.5rem}.container--m.calcite--rtl:before{right:0.75rem}.container--l.calcite--rtl:before{right:1rem}.dropdown-item-icon{position:absolute;opacity:0;-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-transform:scale(0.9);transform:scale(0.9)}.container--s .dropdown-item-icon{left:0.25rem}.container--m .dropdown-item-icon{left:0.5rem}.container--l .dropdown-item-icon{left:0.75rem}.calcite--rtl .dropdown-item-icon{left:unset;margin-left:0}.container--s.calcite--rtl .dropdown-item-icon{right:0.25rem}.container--m.calcite--rtl .dropdown-item-icon{right:0.5rem}.container--l.calcite--rtl .dropdown-item-icon{right:0.75rem}:host(:hover) .dropdown-item-icon{color:var(--calcite-ui-border-1);opacity:1}:host([active]) .dropdown-item-icon{color:var(--calcite-ui-brand);opacity:1}.container--s .dropdown-item-icon-start{margin-right:0.5rem;margin-left:0.25rem}.container--s .dropdown-item-icon-end{margin-left:0.5rem}.container--m .dropdown-item-icon-start{margin-right:0.75rem;margin-left:0.25rem}.container--m .dropdown-item-icon-end{margin-left:0.75rem}.container--l .dropdown-item-icon-start{margin-right:1rem;margin-left:0.25rem}.container--l .dropdown-item-icon-end{margin-left:1rem}.calcite--rtl .dropdown-item-icon-start{margin-right:0}.calcite--rtl .dropdown-item-icon-end{margin-left:0}.container--s.calcite--rtl .dropdown-item-icon-start{margin-left:0.5rem}.container--s.calcite--rtl .dropdown-item-icon-end{margin-right:0.5rem}.container--m.calcite--rtl .dropdown-item-icon-start{margin-left:0.75rem}.container--m.calcite--rtl .dropdown-item-icon-end{margin-right:0.75rem}.container--l.calcite--rtl .dropdown-item-icon-start{margin-left:1rem}.container--l.calcite--rtl .dropdown-item-icon-end{margin-right:1rem}.calcite--rtl calcite-icon{margin-right:0;margin-left:0.75rem}";
+const calciteDropdownItemCss = "@-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}.container--s{font-size:var(--calcite-font-size--2);line-height:1rem;padding-right:0.5rem;padding-left:1.5rem;padding-top:0.25rem;padding-bottom:0.25rem}.container--m{font-size:var(--calcite-font-size--1);line-height:1rem;padding-right:0.75rem;padding-left:2rem;padding-top:0.5rem;padding-bottom:0.5rem}.container--l{font-size:var(--calcite-font-size-0);line-height:1.25rem;padding-right:1rem;padding-left:2.5rem;padding-top:0.75rem;padding-bottom:0.75rem}.container--s.calcite--rtl{padding-right:1.5rem;padding-left:0.5rem}.container--m.calcite--rtl{padding-right:2rem;padding-left:0.75rem}.container--l.calcite--rtl{padding-right:2.5rem;padding-left:1rem}:host{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;position:relative}.container{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;color:var(--calcite-ui-text-3);-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);cursor:pointer;text-decoration:none;outline:2px solid transparent;outline-offset:2px;position:relative}.dropdown-item-content{margin-right:auto;margin-left:0.25rem}.calcite--rtl .dropdown-item-content{margin-left:auto;margin-right:0}:host,.container--link a{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}:host(:focus){outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.container--link{padding:0}.container--link a{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;color:var(--calcite-ui-text-3);-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);cursor:pointer;text-decoration:none;outline:2px solid transparent;outline-offset:2px;position:relative}.container--s .dropdown-link{font-size:var(--calcite-font-size--2);line-height:1rem;padding-right:0.5rem;padding-left:1.5rem;padding-top:0.25rem;padding-bottom:0.25rem}.container--m .dropdown-link{font-size:var(--calcite-font-size--1);line-height:1rem;padding-right:0.75rem;padding-left:2rem;padding-top:0.5rem;padding-bottom:0.5rem}.container--l .dropdown-link{font-size:var(--calcite-font-size-0);line-height:1.25rem;padding-right:1rem;padding-left:2.5rem;padding-top:0.75rem;padding-bottom:0.75rem}:host(:hover) .container,:host(:active) .container{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1);text-decoration:none}:host(:hover) .container--link .dropdown-link,:host(:active) .container--link .dropdown-link{color:var(--calcite-ui-text-1)}:host(:focus) .container{color:var(--calcite-ui-text-1);text-decoration:none}:host(:active) .container{background-color:var(--calcite-ui-foreground-3)}:host(:hover) .container:before,:host(:active) .container:before,:host(:focus) .container:before{opacity:1}.calcite--rtl:before{left:unset;right:1rem}.calcite--rtl .dropdown-link{padding-right:0;padding-left:0}:host([active]) .container:not(.container--none-selection),:host([active]) .container--link .dropdown-link{color:var(--calcite-ui-text-1);font-weight:var(--calcite-font-weight-medium)}:host([active]) .container:not(.container--none-selection):before,:host([active]) .container--link .dropdown-link:before{opacity:1;color:var(--calcite-ui-brand)}:host([active]) .container:not(.container--none-selection) calcite-icon,:host([active]) .container--link .dropdown-link calcite-icon{color:var(--calcite-ui-brand)}.container--multi-selection:before,.container--none-selection:before{display:none}.container--s:before{left:0.5rem}.container--m:before{left:0.75rem}.container--l:before{left:1rem}.calcite--rtl:before{left:unset}.container--s.calcite--rtl:before{right:0.5rem}.container--m.calcite--rtl:before{right:0.75rem}.container--l.calcite--rtl:before{right:1rem}.dropdown-item-icon{position:absolute;opacity:0;-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-transform:scale(0.9);transform:scale(0.9)}.container--s .dropdown-item-icon{left:0.25rem}.container--m .dropdown-item-icon{left:0.5rem}.container--l .dropdown-item-icon{left:0.75rem}.calcite--rtl .dropdown-item-icon{left:unset;margin-left:0}.container--s.calcite--rtl .dropdown-item-icon{right:0.25rem}.container--m.calcite--rtl .dropdown-item-icon{right:0.5rem}.container--l.calcite--rtl .dropdown-item-icon{right:0.75rem}:host(:hover) .dropdown-item-icon{color:var(--calcite-ui-border-1);opacity:1}:host([active]) .dropdown-item-icon{color:var(--calcite-ui-brand);opacity:1}.container--s .dropdown-item-icon-start{margin-right:0.5rem;margin-left:0.25rem}.container--s .dropdown-item-icon-end{margin-left:0.5rem}.container--m .dropdown-item-icon-start{margin-right:0.75rem;margin-left:0.25rem}.container--m .dropdown-item-icon-end{margin-left:0.75rem}.container--l .dropdown-item-icon-start{margin-right:1rem;margin-left:0.25rem}.container--l .dropdown-item-icon-end{margin-left:1rem}.calcite--rtl .dropdown-item-icon-start{margin-right:0}.calcite--rtl .dropdown-item-icon-end{margin-left:0}.container--s.calcite--rtl .dropdown-item-icon-start{margin-left:0.5rem}.container--s.calcite--rtl .dropdown-item-icon-end{margin-right:0.5rem}.container--m.calcite--rtl .dropdown-item-icon-start{margin-left:0.75rem}.container--m.calcite--rtl .dropdown-item-icon-end{margin-right:0.75rem}.container--l.calcite--rtl .dropdown-item-icon-start{margin-left:1rem}.container--l.calcite--rtl .dropdown-item-icon-end{margin-right:1rem}.calcite--rtl calcite-icon{margin-right:0;margin-left:0.75rem}";
 
 let CalciteDropdownItem$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteDropdownItemSelect = createEvent(this, "calciteDropdownItemSelect", 7);
     this.calciteDropdownItemKeyEvent = createEvent(this, "calciteDropdownItemKeyEvent", 7);
     this.calciteDropdownCloseRequest = createEvent(this, "calciteDropdownCloseRequest", 7);
@@ -11548,7 +11768,7 @@ let CalciteFab$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -11631,13 +11851,18 @@ let CalciteFilter$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteFilterChange = createEvent(this, "calciteFilterChange", 7);
     /**
      * When true, disabled prevents interaction. This state shows items with lower opacity/grayed.
      */
     this.disabled = false;
-    this.empty = true;
+    /**
+     * The resulting items after filtering.
+     *
+     * @readonly
+     */
+    this.filteredItems = [];
     // --------------------------------------------------------------------------
     //
     //  Private Methods
@@ -11645,10 +11870,8 @@ let CalciteFilter$1 = class extends HTMLElement {
     // --------------------------------------------------------------------------
     this.filter = debounce$1((value) => {
       const regex = new RegExp(value, "i");
-      if (this.data.length === 0) {
-        console.warn(`No data was passed to calcite-filter.
-      The data property expects an array of objects`);
-        this.calciteFilterChange.emit([]);
+      if (this.items.length === 0) {
+        this.updateFiltered([]);
         return;
       }
       const find = (input, RE) => {
@@ -11668,15 +11891,14 @@ let CalciteFilter$1 = class extends HTMLElement {
         });
         return found;
       };
-      const result = this.data.filter((item) => {
+      const result = this.items.filter((item) => {
         return find(item, regex);
       });
-      this.calciteFilterChange.emit(result);
+      this.updateFiltered(result);
     }, filterDebounceInMs);
     this.inputHandler = (event) => {
       const target = event.target;
-      this.empty = target.value === "";
-      this.filter(target.value);
+      this.value = target.value;
     };
     this.keyDownHandler = ({ key }) => {
       if (key === "Escape") {
@@ -11684,12 +11906,29 @@ let CalciteFilter$1 = class extends HTMLElement {
       }
     };
     this.clear = () => {
-      this.textInput.value = "";
-      this.empty = true;
-      this.calciteFilterChange.emit(this.data);
+      this.value = "";
       this.setFocus();
     };
   }
+  watchDataHandler(value) {
+    this.items = value;
+  }
+  watchItemsHandler() {
+    this.filter(this.value);
+  }
+  valueHandler(value) {
+    this.filter(value);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    if (this.data && !this.items) {
+      this.items = this.data;
+    }
+  }
   // --------------------------------------------------------------------------
   //
   //  Public Methods
@@ -11699,6 +11938,11 @@ let CalciteFilter$1 = class extends HTMLElement {
   async setFocus() {
     focusElement(this.textInput);
   }
+  updateFiltered(filtered) {
+    this.filteredItems.length = 0;
+    this.filteredItems = this.filteredItems.concat(filtered);
+    this.calciteFilterChange.emit(filtered);
+  }
   // --------------------------------------------------------------------------
   //
   //  Render Methods
@@ -11709,9 +11953,14 @@ let CalciteFilter$1 = class extends HTMLElement {
     const { disabled } = this;
     return (h(Fragment, null, disabled ? h("calcite-scrim", null) : null, h("div", { class: CSS$w.container }, h("label", { class: rtl ? CSS_UTILITY.rtl : null }, h("calcite-input", { "aria-label": this.intlLabel || TEXT$c.filterLabel, class: rtl ? CSS_UTILITY.rtl : null, disabled: this.disabled, icon: ICONS$8.search, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, ref: (el) => {
         this.textInput = el;
-      }, type: "text", value: "" })), !this.empty ? (h("button", { "aria-label": this.intlClear || TEXT$c.clear, class: CSS$w.clearButton, onClick: this.clear }, h("calcite-icon", { icon: ICONS$8.close }))) : null)));
+      }, type: "text", value: this.value })), this.value ? (h("button", { "aria-label": this.intlClear || TEXT$c.clear, class: CSS$w.clearButton, onClick: this.clear }, h("calcite-icon", { icon: ICONS$8.close }))) : null)));
   }
   get el() { return this; }
+  static get watchers() { return {
+    "data": ["watchDataHandler"],
+    "items": ["watchItemsHandler"],
+    "value": ["valueHandler"]
+  }; }
   static get style() { return calciteFilterCss; }
 };
 
@@ -11727,7 +11976,7 @@ let CalciteFlow$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.panelCount = 0;
     this.flowDirection = null;
     this.panels = [];
@@ -11872,7 +12121,7 @@ function translate({ width, height, min, max }) {
   const rangeX = max[0] - min[0];
   const rangeY = max[1] - min[1];
   return (point) => {
-    const x = (point[0] / rangeX) * width;
+    const x = ((point[0] - min[0]) / rangeX) * width;
     const y = height - (point[1] / rangeY) * height;
     return [x, y];
   };
@@ -11930,7 +12179,7 @@ let CalciteGraph$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -11958,17 +12207,25 @@ let CalciteGraph$1 = class extends HTMLElement {
   //
   //--------------------------------------------------------------------------
   render() {
-    const { data, colorStops, width, height, highlightMax, highlightMin } = this;
+    const { data, colorStops, width, height, highlightMax, highlightMin, min, max } = this;
     const id = this.graphId;
     // if we have no data, return empty svg
     if (!data || data.length === 0) {
       return (h("svg", { class: "svg", height: height, preserveAspectRatio: "none", viewBox: `0 0 ${width} ${height}`, width: width }));
     }
-    const { min, max } = range(data);
-    const t = translate({ min, max, width, height });
-    const [hMinX] = t([highlightMin, max[1]]);
-    const [hMaxX] = t([highlightMax, max[1]]);
-    const areaPath = area({ data, min, max, t });
+    const { min: rangeMin, max: rangeMax } = range(data);
+    let currentMin = rangeMin;
+    let currentMax = rangeMax;
+    if (min < rangeMin[0]) {
+      currentMin = [min, 0];
+    }
+    if (max > rangeMax[0]) {
+      currentMax = [max, rangeMax[1]];
+    }
+    const t = translate({ min: currentMin, max: currentMax, width, height });
+    const [hMinX] = t([highlightMin, currentMax[1]]);
+    const [hMaxX] = t([highlightMax, currentMax[1]]);
+    const areaPath = area({ data, min: rangeMin, max: rangeMax, t });
     const fill = colorStops ? `url(#linear-gradient-${id})` : undefined;
     return (h("svg", { class: "svg", height: height, preserveAspectRatio: "none", viewBox: `0 0 ${width} ${height}`, width: width }, colorStops ? (h("defs", null, h("linearGradient", { id: `linear-gradient-${id}`, x1: "0", x2: "1", y1: "0", y2: "0" }, colorStops.map(({ offset, color, opacity }) => (h("stop", { offset: `${offset * 100}%`, "stop-color": color, "stop-opacity": opacity })))))) : null, highlightMin !== undefined ? ([
       h("mask", { height: "100%", id: `${id}1`, width: "100%", x: "0%", y: "0%" }, h("path", { d: `
@@ -12015,7 +12272,7 @@ let CalciteHandle$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteHandleNudge = createEvent(this, "calciteHandleNudge", 7);
     // --------------------------------------------------------------------------
     //
@@ -12149,7 +12406,7 @@ let CalciteIcon$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -12237,13 +12494,13 @@ let CalciteIcon$1 = class extends HTMLElement {
 };
 
 const CSS$s = {
-  wrapper: "calcite-inline-editable__wrapper",
-  confirmChangesButton: "calcite-inline-editable__confirm-changes-button",
-  cancelEditingButton: "calcite-inline-editable__cancel-editing-button",
-  inputWrapper: "calcite-inline-editable__input-wrapper",
-  cancelEditingButtonWrapper: "calcite-inline-editable__cancel-editing-button-wrapper",
-  enableEditingButton: "calcite-inline-editable__enable-editing-button",
-  controlsWrapper: "calcite-inline-editable__controls-wrapper"
+  wrapper: "wrapper",
+  confirmChangesButton: "confirm-changes-button",
+  cancelEditingButton: "cancel-editing-button",
+  inputWrapper: "input-wrapper",
+  cancelEditingButtonWrapper: "cancel-editing-button-wrapper",
+  enableEditingButton: "enable-editing-button",
+  controlsWrapper: "controls-wrapper"
 };
 const TEXT$b = {
   intlEnablingEditing: "Click to edit",
@@ -12251,12 +12508,13 @@ const TEXT$b = {
   intlConfirmChanges: "Save"
 };
 
-const calciteInlineEditableCss = "@-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)}}.sc-calcite-inline-editable:root{--calcite-animation-timing:300ms}.calcite-animate.sc-calcite-inline-editable{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.sc-calcite-inline-editable{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down.sc-calcite-inline-editable{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up.sc-calcite-inline-editable{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale.sc-calcite-inline-editable{-webkit-animation-name:in-scale;animation-name:in-scale}.sc-calcite-inline-editable:root{--calcite-popper-transition:150ms ease-in-out}[hidden].sc-calcite-inline-editable-h{display:none}[scale=s].sc-calcite-inline-editable-h .calcite-inline-editable__controls-wrapper.sc-calcite-inline-editable{height:1.5rem}[scale=m].sc-calcite-inline-editable-h .calcite-inline-editable__controls-wrapper.sc-calcite-inline-editable{height:2rem}[scale=l].sc-calcite-inline-editable-h .calcite-inline-editable__controls-wrapper.sc-calcite-inline-editable{height:2.75rem}.sc-calcite-inline-editable-h:not([editing-enabled]):not([disabled]) .calcite-inline-editable__wrapper.sc-calcite-inline-editable:hover{background-color:var(--calcite-ui-foreground-2)}.calcite-inline-editable__wrapper.sc-calcite-inline-editable{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;background-color:var(--calcite-ui-foreground-1);-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s}.calcite-inline-editable__wrapper.sc-calcite-inline-editable .calcite-inline-editable__input-wrapper.sc-calcite-inline-editable{-ms-flex:1 1 0%;flex:1 1 0%}.calcite-inline-editable__controls-wrapper.sc-calcite-inline-editable{display:-ms-flexbox;display:flex}[disabled].sc-calcite-inline-editable-h .calcite-inline-editable__cancel-editing-button-wrapper.sc-calcite-inline-editable{border-color:var(--calcite-ui-border-2)}.sc-calcite-inline-editable-h.sc-calcite-inline-editable-s .calcite-input__element-wrapper textarea,.sc-calcite-inline-editable-h.sc-calcite-inline-editable-s .calcite-input__element-wrapper input{-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s}.sc-calcite-inline-editable-h:not([editing-enabled]).sc-calcite-inline-editable-s .calcite-input__element-wrapper{background-color:transparent}.sc-calcite-inline-editable-h:not([editing-enabled]).sc-calcite-inline-editable-s .sc-calcite-input{display:none}.sc-calcite-inline-editable-h:not([editing-enabled]).sc-calcite-inline-editable-s .calcite-input__element-wrapper{display:-ms-flexbox;display:flex;cursor:pointer}.sc-calcite-inline-editable-h:not([editing-enabled]).sc-calcite-inline-editable-s .calcite-input__element-wrapper textarea,.sc-calcite-inline-editable-h:not([editing-enabled]).sc-calcite-inline-editable-s .calcite-input__element-wrapper input{display:-ms-flexbox;display:flex;cursor:pointer;padding-left:0;border-color:transparent}.sc-calcite-inline-editable-h:not([editing-enabled]):not([disabled]):hover.sc-calcite-inline-editable-s textarea,.sc-calcite-inline-editable-h:not([editing-enabled]):not([disabled]):hover.sc-calcite-inline-editable-s input{background-color:var(--calcite-ui-foreground-2)}.sc-calcite-inline-editable-h[dir=rtl]:not([editing-enabled]).sc-calcite-inline-editable-s .calcite-input__element-wrapper textarea,.sc-calcite-inline-editable-h[dir=rtl]:not([editing-enabled]).sc-calcite-inline-editable-s .calcite-input__element-wrapper input{padding-left:unset;padding-right:0}[dir=rtl] .sc-calcite-inline-editable-h:not([editing-enabled]).sc-calcite-inline-editable-s .calcite-input__element-wrapper textarea,[dir=rtl] .sc-calcite-inline-editable-h:not([editing-enabled]).sc-calcite-inline-editable-s .calcite-input__element-wrapper input{padding-left:unset;padding-right:0}";
+const calciteInlineEditableCss = "@-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([scale=s]) .controls-wrapper{height:1.5rem}:host([scale=m]) .controls-wrapper{height:2rem}:host([scale=l]) .controls-wrapper{height:2.75rem}:host(:not([editing-enabled]):not([disabled])) .wrapper:hover{background-color:var(--calcite-ui-foreground-2)}.wrapper{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;background-color:var(--calcite-ui-foreground-1);-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s}.wrapper .input-wrapper{-ms-flex:1 1 0%;flex:1 1 0%}.controls-wrapper{display:-ms-flexbox;display:flex}:host([disabled]) .cancel-editing-button-wrapper{border-color:var(--calcite-ui-border-2)}";
 
 let CalciteInlineEditable$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.calciteInlineEditableEditingCancel = createEvent(this, "calciteInlineEditableEditingCancel", 7);
     this.calciteInlineEditableChangesConfirm = createEvent(this, "calciteInlineEditableChangesConfirm", 7);
     this.calciteInlineEditableEnableEditingChange = createEvent(this, "calciteInlineEditableEnableEditingChange", 7);
@@ -12285,39 +12543,38 @@ let CalciteInlineEditable$1 = class extends HTMLElement {
      * @default "Save"
      */
     this.intlConfirmChanges = TEXT$b.intlConfirmChanges;
-    this.editingCancelTransitionProp = "border-top-color";
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
     this.transitionEnd = (event) => {
-      if (!this.editingEnabled && event.propertyName === this.editingCancelTransitionProp) {
+      if (!this.editingEnabled && !!this.shouldEmitCancel) {
         this.calciteInlineEditableEditingCancel.emit(event);
       }
     };
     this.enableEditing = () => {
-      this.htmlInput.tabIndex = undefined;
       this.valuePriorToEditing = this.inputElement.value;
       this.editingEnabled = true;
       this.inputElement.setFocus();
       this.calciteInlineEditableEnableEditingChange.emit();
     };
     this.disableEditing = () => {
-      this.htmlInput.tabIndex = -1;
       this.editingEnabled = false;
     };
-    this.cancelEditingEnd = () => {
-      this.enableEditingButton.setFocus();
-      this.el.removeEventListener("calciteInlineEditableEditingCancel", this.cancelEditingEnd);
-    };
     this.cancelEditing = () => {
       this.inputElement.value = this.valuePriorToEditing;
-      this.el.addEventListener("calciteInlineEditableEditingCancel", this.cancelEditingEnd);
       this.disableEditing();
+      this.enableEditingButton.setFocus();
     };
     this.escapeKeyHandler = async (e) => {
       if (e.key !== "Escape") {
+        if (e.key === "Tab" && this.shouldShowControls) {
+          if (!e.shiftKey && e.target === this.inputElement) {
+            e.preventDefault();
+            this.cancelEditingButton.setFocus();
+          }
+          if (!!e.shiftKey && e.target === this.cancelEditingButton) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.inputElement.setFocus();
+          }
+        }
         return;
       }
       this.cancelEditing();
@@ -12346,6 +12603,7 @@ let CalciteInlineEditable$1 = class extends HTMLElement {
           this.loading = true;
           await this.afterConfirm();
           this.disableEditing();
+          this.enableEditingButton.setFocus();
         }
       }
       catch (e) {
@@ -12358,11 +12616,23 @@ let CalciteInlineEditable$1 = class extends HTMLElement {
   disabledWatcher(disabled) {
     this.inputElement.disabled = disabled;
   }
+  editingEnabledWatcher(newValue, oldValue) {
+    this.inputElement.editingEnabled = newValue;
+    if (!newValue && !!oldValue) {
+      this.shouldEmitCancel = true;
+    }
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  connectedCallback() {
+    connectLabel(this);
+  }
+  disconnectedCallback() {
+    disconnectLabel(this);
+  }
   componentWillLoad() {
     this.inputElement = this.el.querySelector("calcite-input");
     this.inputElement.disabled = this.disabled;
@@ -12370,21 +12640,12 @@ let CalciteInlineEditable$1 = class extends HTMLElement {
     this.scale =
       this.scale || this.inputElement.scale || getElementProp(this.el, "scale", undefined);
   }
-  componentDidLoad() {
-    this.htmlInput = this.inputElement.querySelector("input");
-    if (!this.editingEnabled) {
-      this.htmlInput.tabIndex = -1;
-    }
-  }
-  connectedCallback() {
-    connectLabel(this);
-  }
-  disconnectedCallback() {
-    disconnectLabel(this);
-  }
   render() {
-    return (h("div", { class: CSS$s.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler, onTransitionEnd: this.transitionEnd }, h("div", { class: CSS$s.inputWrapper }, h("slot", null)), h("div", { class: CSS$s.controlsWrapper }, !this.editingEnabled && (h("calcite-button", { appearance: "transparent", class: CSS$s.enableEditingButton, color: "neutral", disabled: this.disabled, iconStart: "pencil", label: this.intlEnableEditing, onClick: this.enableEditingHandler, ref: (el) => (this.enableEditingButton = el), scale: this.scale })), this.shouldShowControls && [
-      h("div", { class: CSS$s.cancelEditingButtonWrapper }, h("calcite-button", { appearance: "transparent", class: CSS$s.cancelEditingButton, color: "neutral", disabled: this.disabled, iconStart: "x", label: this.intlCancelEditing, onClick: this.cancelEditingHandler, scale: this.scale })),
+    return (h("div", { class: CSS$s.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler, onTransitionEnd: this.transitionEnd }, h("div", { class: CSS$s.inputWrapper }, h("slot", null)), h("div", { class: CSS$s.controlsWrapper }, h("calcite-button", { appearance: "transparent", class: CSS$s.enableEditingButton, color: "neutral", disabled: this.disabled, iconStart: "pencil", label: this.intlEnableEditing, onClick: this.enableEditingHandler, ref: (el) => (this.enableEditingButton = el), scale: this.scale, style: {
+        opacity: this.editingEnabled ? "0" : "1",
+        width: this.editingEnabled ? "0" : "inherit"
+      } }), this.shouldShowControls && [
+      h("div", { class: CSS$s.cancelEditingButtonWrapper }, h("calcite-button", { appearance: "transparent", class: CSS$s.cancelEditingButton, color: "neutral", disabled: this.disabled, iconStart: "x", label: this.intlCancelEditing, onClick: this.cancelEditingHandler, ref: (el) => (this.cancelEditingButton = el), scale: this.scale })),
       h("calcite-button", { appearance: "solid", class: CSS$s.confirmChangesButton, color: "blue", disabled: this.disabled, iconStart: "check", label: this.intlConfirmChanges, loading: this.loading, onClick: this.confirmChangesHandler, scale: this.scale })
     ])));
   }
@@ -12398,9 +12659,6 @@ let CalciteInlineEditable$1 = class extends HTMLElement {
       this.disableEditing();
     }
   }
-  onLabelClick() {
-    this.setFocus();
-  }
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -12415,29 +12673,40 @@ let CalciteInlineEditable$1 = class extends HTMLElement {
       (_b = this.enableEditingButton) === null || _b === void 0 ? void 0 : _b.setFocus();
     }
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  onLabelClick() {
+    this.setFocus();
+  }
   get shouldShowControls() {
     return this.editingEnabled && this.controls;
   }
   get el() { return this; }
   static get watchers() { return {
-    "disabled": ["disabledWatcher"]
+    "disabled": ["disabledWatcher"],
+    "editingEnabled": ["editingEnabledWatcher"]
   }; }
   static get style() { return calciteInlineEditableCss; }
 };
 
 const CSS$r = {
-  loader: "calcite-input__loader",
-  clearButton: "calcite-input__clear-button",
-  inputIcon: "calcite-input__icon",
-  prefix: "calcite-input__prefix",
-  suffix: "calcite-input__suffix",
-  numberButtonWrapper: "calcite-input__number-button-wrapper",
-  buttonItemHorizontal: "calcite-input__number-button-item--horizontal",
-  wrapper: "calcite-input__element-wrapper",
-  inputWrapper: "calcite-input__wrapper",
-  actionWrapper: "calcite-input__action-wrapper",
-  resizeIconWrapper: "calcite-input__resize-icon-wrapper",
-  numberButtonItem: "calcite-input__number-button-item"
+  loader: "loader",
+  clearButton: "clear-button",
+  editingEnabled: "editing-enabled",
+  inlineChild: "inline-child",
+  inputIcon: "icon",
+  prefix: "prefix",
+  suffix: "suffix",
+  numberButtonWrapper: "number-button-wrapper",
+  buttonItemHorizontal: "number-button-item--horizontal",
+  wrapper: "element-wrapper",
+  inputWrapper: "wrapper",
+  actionWrapper: "action-wrapper",
+  resizeIconWrapper: "resize-icon-wrapper",
+  numberButtonItem: "number-button-item"
 };
 const INPUT_TYPE_ICONS = {
   tel: "phone",
@@ -12451,12 +12720,13 @@ const SLOTS$g = {
   action: "action"
 };
 
-const calciteInputCss = "@-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)}}.sc-calcite-input:root{--calcite-animation-timing:300ms}.calcite-animate.sc-calcite-input{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.sc-calcite-input{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down.sc-calcite-input{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up.sc-calcite-input{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale.sc-calcite-input{-webkit-animation-name:in-scale;animation-name:in-scale}.sc-calcite-input:root{--calcite-popper-transition:150ms ease-in-out}[hidden].sc-calcite-input-h{display:none}[scale=s].sc-calcite-input-h input.sc-calcite-input,[scale=s].sc-calcite-input-h .calcite-input__prefix.sc-calcite-input,[scale=s].sc-calcite-input-h .calcite-input__suffix.sc-calcite-input{font-size:var(--calcite-font-size--2);line-height:1rem;padding:0.5rem;height:1.5rem}[scale=s].sc-calcite-input-h textarea.sc-calcite-input{height:1.5rem;min-height:1.5rem}[scale=s].sc-calcite-input-h .calcite-input__number-button-wrapper.sc-calcite-input,[scale=s].sc-calcite-input-h .calcite-input__action-wrapper.sc-calcite-input calcite-button.sc-calcite-input,[scale=s].sc-calcite-input-h .calcite-input__action-wrapper.sc-calcite-input calcite-button.sc-calcite-input button.sc-calcite-input{height:1.5rem}[scale=s].sc-calcite-input-h input[type=file].sc-calcite-input{height:1.5rem}[scale=s].sc-calcite-input-h .calcite-input__clear-button.sc-calcite-input{min-height:1.5rem;min-width:1.5rem}[scale=s].sc-calcite-input-h textarea.sc-calcite-input{font-size:var(--calcite-font-size--2);line-height:1rem;padding-top:0.25rem;padding-bottom:0.25rem;padding-left:0.5rem;padding-right:0.5rem;height:auto}[scale=m].sc-calcite-input-h input.sc-calcite-input,[scale=m].sc-calcite-input-h .calcite-input__prefix.sc-calcite-input,[scale=m].sc-calcite-input-h .calcite-input__suffix.sc-calcite-input{font-size:var(--calcite-font-size--1);line-height:1rem;padding:0.75rem;height:2rem}[scale=m].sc-calcite-input-h textarea.sc-calcite-input{min-height:2rem}[scale=m].sc-calcite-input-h .calcite-input__number-button-wrapper.sc-calcite-input,[scale=m].sc-calcite-input-h .calcite-input__action-wrapper.sc-calcite-input calcite-button.sc-calcite-input,[scale=m].sc-calcite-input-h .calcite-input__action-wrapper.sc-calcite-input calcite-button.sc-calcite-input button.sc-calcite-input{height:2rem}[scale=m].sc-calcite-input-h input[type=file].sc-calcite-input{height:2rem}[scale=m].sc-calcite-input-h .calcite-input__clear-button.sc-calcite-input{min-height:2rem;min-width:2rem}[scale=m].sc-calcite-input-h textarea.sc-calcite-input{font-size:var(--calcite-font-size--1);line-height:1rem;padding-top:0.5rem;padding-bottom:0.5rem;padding-left:0.75rem;padding-right:0.75rem;height:auto}[scale=l].sc-calcite-input-h input.sc-calcite-input,[scale=l].sc-calcite-input-h .calcite-input__prefix.sc-calcite-input,[scale=l].sc-calcite-input-h .calcite-input__suffix.sc-calcite-input{font-size:var(--calcite-font-size-0);line-height:1.25rem;padding:1rem;height:2.75rem}[scale=l].sc-calcite-input-h textarea.sc-calcite-input{min-height:2.75rem}[scale=l].sc-calcite-input-h .calcite-input__number-button-wrapper.sc-calcite-input,[scale=l].sc-calcite-input-h .calcite-input__action-wrapper.sc-calcite-input calcite-button.sc-calcite-input,[scale=l].sc-calcite-input-h .calcite-input__action-wrapper.sc-calcite-input calcite-button.sc-calcite-input button.sc-calcite-input{height:2.75rem}[scale=l].sc-calcite-input-h input[type=file].sc-calcite-input{height:2.75rem}[scale=l].sc-calcite-input-h .calcite-input__clear-button.sc-calcite-input{min-height:2.75rem;min-width:2.75rem}[scale=l].sc-calcite-input-h textarea.sc-calcite-input{font-size:var(--calcite-font-size-0);line-height:1.25rem;padding-top:0.75rem;padding-bottom:0.75rem;padding-left:1rem;padding-right:1rem;height:auto}[disabled].sc-calcite-input-h{pointer-events:none}[disabled].sc-calcite-input-h .calcite-input__wrapper.sc-calcite-input{pointer-events:none;--text-opacity:var(--calcite-ui-opacity-disabled)}[disabled].sc-calcite-input-h button.sc-calcite-input,[disabled].sc-calcite-input-h textarea.sc-calcite-input,[disabled].sc-calcite-input-h input.sc-calcite-input{pointer-events:none}[disabled].sc-calcite-input-h textarea.sc-calcite-input{resize:none}.sc-calcite-input-h textarea.sc-calcite-input,.sc-calcite-input-h input.sc-calcite-input{-webkit-transition:150ms ease-in-out, height 0s;transition:150ms ease-in-out, height 0s;-webkit-appearance:none;width:100%;border-radius:0;position:relative;max-height:100%;max-width:100%;margin:0;font-weight:var(--calcite-font-weight-normal);font-family:inherit;-ms-flex:1 1 0%;flex:1 1 0%;display:-ms-flexbox;display:flex;color:var(--calcite-ui-text-1);-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1)}.sc-calcite-input-h input[type=search].sc-calcite-input::-webkit-search-decoration{-webkit-appearance:none}.sc-calcite-input-h input.sc-calcite-input,.sc-calcite-input-h textarea.sc-calcite-input{color:var(--calcite-ui-text-1);border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input)}.sc-calcite-input-h input.sc-calcite-input:-ms-input-placeholder,.sc-calcite-input-h textarea.sc-calcite-input:-ms-input-placeholder{color:var(--calcite-ui-text-3);font-weight:var(--calcite-font-weight-normal)}.sc-calcite-input-h input.sc-calcite-input::-ms-input-placeholder,.sc-calcite-input-h textarea.sc-calcite-input::-ms-input-placeholder{color:var(--calcite-ui-text-3);font-weight:var(--calcite-font-weight-normal)}.sc-calcite-input-h input.sc-calcite-input::placeholder,.sc-calcite-input-h input.sc-calcite-input:-ms-input-placeholder,.sc-calcite-input-h input.sc-calcite-input::-ms-input-placeholder,.sc-calcite-input-h textarea.sc-calcite-input::placeholder,.sc-calcite-input-h textarea.sc-calcite-input:-ms-input-placeholder,.sc-calcite-input-h textarea.sc-calcite-input::-ms-input-placeholder{color:var(--calcite-ui-text-3);font-weight:var(--calcite-font-weight-normal)}.sc-calcite-input-h input.sc-calcite-input:focus,.sc-calcite-input-h textarea.sc-calcite-input:focus{border-color:var(--calcite-ui-brand);color:var(--calcite-ui-text-1)}.sc-calcite-input-h input[readonly].sc-calcite-input,.sc-calcite-input-h textarea[readonly].sc-calcite-input{background-color:var(--calcite-ui-background)}.sc-calcite-input-h input[readonly].sc-calcite-input:focus,.sc-calcite-input-h textarea[readonly].sc-calcite-input:focus{color:var(--calcite-ui-text-1)}.sc-calcite-input-h calcite-icon.sc-calcite-input{color:var(--calcite-ui-text-3)}.sc-calcite-input-h textarea.sc-calcite-input,.sc-calcite-input-h input.sc-calcite-input{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}.sc-calcite-input-h textarea.sc-calcite-input:focus,.sc-calcite-input-h input.sc-calcite-input:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}[status=invalid].sc-calcite-input-h input.sc-calcite-input,[status=invalid].sc-calcite-input-h textarea.sc-calcite-input{border-color:var(--calcite-ui-danger)}[status=invalid].sc-calcite-input-h input.sc-calcite-input:focus,[status=invalid].sc-calcite-input-h textarea.sc-calcite-input:focus{outline:2px solid var(--calcite-ui-danger);outline-offset:-2px}[scale=s].sc-calcite-input-h .calcite-input__icon.sc-calcite-input{left:0.5rem}[scale=s].sc-calcite-input-h .calcite--rtl.sc-calcite-input .calcite-input__icon.sc-calcite-input{left:unset;right:0.5rem}[scale=m].sc-calcite-input-h .calcite-input__icon.sc-calcite-input{left:0.75rem}[scale=m].sc-calcite-input-h .calcite--rtl.sc-calcite-input .calcite-input__icon.sc-calcite-input{left:unset;right:0.75rem}[scale=l].sc-calcite-input-h .calcite-input__icon.sc-calcite-input{left:1rem}[scale=l].sc-calcite-input-h .calcite--rtl.sc-calcite-input .calcite-input__icon.sc-calcite-input{left:unset;right:1rem}[icon][scale=s].sc-calcite-input-h input.sc-calcite-input{padding-left:2rem}[icon][scale=s].sc-calcite-input-h .calcite--rtl.sc-calcite-input input.sc-calcite-input{padding-right:2rem;padding-left:0.5rem}[icon][scale=m].sc-calcite-input-h input.sc-calcite-input{padding-left:2.5rem}[icon][scale=m].sc-calcite-input-h .calcite--rtl.sc-calcite-input input.sc-calcite-input{padding-right:2.5rem;padding-left:0.5rem}[icon][scale=l].sc-calcite-input-h input.sc-calcite-input{padding-left:3rem}[icon][scale=l].sc-calcite-input-h .calcite--rtl.sc-calcite-input input.sc-calcite-input{padding-right:3rem;padding-left:0.5rem}.calcite-input__element-wrapper.sc-calcite-input{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex:1 1 0%;flex:1 1 0%;position:relative;-ms-flex-order:3;order:3}.calcite-input__icon.sc-calcite-input{display:block;position:absolute;pointer-events:none;z-index:10;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s}input[type=text].sc-calcite-input::-ms-clear,input[type=text].sc-calcite-input::-ms-reveal{display:none;width:0;height:0}input[type=search].sc-calcite-input::-webkit-search-decoration,input[type=search].sc-calcite-input::-webkit-search-cancel-button,input[type=search].sc-calcite-input::-webkit-search-results-button,input[type=search].sc-calcite-input::-webkit-search-results-decoration,input[type=date].sc-calcite-input::-webkit-clear-button,input[type=time].sc-calcite-input::-webkit-clear-button{display:none}.calcite-input__clear-button.sc-calcite-input{pointer-events:initial;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;display:-ms-flexbox;display:flex;-ms-flex-item-align:stretch;align-self:stretch;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;min-height:100%;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-foreground-1);border-left-width:0;-ms-flex-order:4;order:4;margin:0}.calcite-input__clear-button.sc-calcite-input:hover{background-color:var(--calcite-ui-foreground-2);-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s}.calcite-input__clear-button.sc-calcite-input:hover calcite-icon.sc-calcite-input{color:var(--calcite-ui-text-1);-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s}.calcite-input__clear-button.sc-calcite-input:active{background-color:var(--calcite-ui-foreground-3)}.calcite-input__clear-button.sc-calcite-input:active calcite-icon.sc-calcite-input{color:var(--calcite-ui-text-1)}.calcite-input__clear-button.sc-calcite-input:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.calcite-input__clear-button.sc-calcite-input:disabled{opacity:var(--calcite-ui-opacity-disabled)}.calcite--rtl.sc-calcite-input .calcite-input__clear-button.sc-calcite-input{border-left-color:var(--calcite-ui-border-input);border-width:1px;border-right-width:0}.calcite-input__loader.sc-calcite-input{top:1px;left:1px;right:1px;display:block;pointer-events:none;position:absolute}.calcite-input__action-wrapper.sc-calcite-input{display:-ms-flexbox;display:flex;-ms-flex-order:7;order:7}.calcite-input__prefix.sc-calcite-input,.calcite-input__suffix.sc-calcite-input{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;height:auto;min-height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;box-sizing:border-box;font-weight:var(--calcite-font-weight-medium);border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-background);color:var(--calcite-ui-text-2);line-height:1;word-wrap:break-word;overflow-wrap:break-word}.calcite-input__prefix.sc-calcite-input{-ms-flex-order:2;order:2;border-right-width:0}.calcite-input__suffix.sc-calcite-input{-ms-flex-order:5;order:5;border-left-width:0}.calcite--rtl.sc-calcite-input .calcite-input__prefix.sc-calcite-input{border-right-width:1px;border-left-width:0}.calcite--rtl.sc-calcite-input .calcite-input__suffix.sc-calcite-input{border-left-width:1px;border-right-width:0}[alignment=start].sc-calcite-input-h textarea.sc-calcite-input,[alignment=start].sc-calcite-input-h input.sc-calcite-input{text-align:left}[alignment=start].sc-calcite-input-h .calcite--rtl.sc-calcite-input textarea.sc-calcite-input,[alignment=start].sc-calcite-input-h .calcite--rtl.sc-calcite-input input.sc-calcite-input{text-align:right}[alignment=end].sc-calcite-input-h textarea.sc-calcite-input,[alignment=end].sc-calcite-input-h input.sc-calcite-input{text-align:right}[alignment=end].sc-calcite-input-h .calcite--rtl.sc-calcite-input textarea.sc-calcite-input,[alignment=end].sc-calcite-input-h .calcite--rtl.sc-calcite-input input.sc-calcite-input{text-align:left}.sc-calcite-input-h input[type=number].sc-calcite-input{-moz-appearance:textfield}.sc-calcite-input-h input[type=number].sc-calcite-input::-webkit-inner-spin-button,.sc-calcite-input-h input[type=number].sc-calcite-input::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:textfield;margin:0}.calcite-input__number-button-wrapper.sc-calcite-input{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;pointer-events:none;-ms-flex-order:6;order:6;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s}[number-button-type=vertical].sc-calcite-input-h .calcite-input__wrapper.sc-calcite-input{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex}[number-button-type=vertical].sc-calcite-input-h input.sc-calcite-input,[number-button-type=vertical].sc-calcite-input-h textarea.sc-calcite-input{-ms-flex-order:2;order:2}[number-button-type=horizontal].sc-calcite-input-h .calcite--rtl.sc-calcite-input .calcite-input__number-button-item[data-adjustment=down].sc-calcite-input calcite-icon.sc-calcite-input{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}[number-button-type=horizontal].sc-calcite-input-h .calcite--rtl.sc-calcite-input .calcite-input__number-button-item[data-adjustment=up].sc-calcite-input calcite-icon.sc-calcite-input{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.calcite-input__number-button-item.calcite-input__number-button-item--horizontal[data-adjustment=down].sc-calcite-input,.calcite-input__number-button-item.calcite-input__number-button-item--horizontal[data-adjustment=up].sc-calcite-input{min-height:100%;max-height:100%;-ms-flex-order:1;order:1;-ms-flex-item-align:stretch;align-self:stretch}.calcite-input__number-button-item.calcite-input__number-button-item--horizontal[data-adjustment=down].sc-calcite-input calcite-icon.sc-calcite-input,.calcite-input__number-button-item.calcite-input__number-button-item--horizontal[data-adjustment=up].sc-calcite-input calcite-icon.sc-calcite-input{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.calcite-input__number-button-item.calcite-input__number-button-item--horizontal[data-adjustment=down].sc-calcite-input{border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);border-right-width:0}.calcite-input__number-button-item.calcite-input__number-button-item--horizontal[data-adjustment=down].sc-calcite-input:hover{background-color:var(--calcite-ui-foreground-2)}.calcite-input__number-button-item.calcite-input__number-button-item--horizontal[data-adjustment=down].sc-calcite-input:hover calcite-icon.sc-calcite-input{color:var(--calcite-ui-text-1)}.calcite-input__number-button-item.calcite-input__number-button-item--horizontal[data-adjustment=up].sc-calcite-input{-ms-flex-order:5;order:5}.calcite-input__number-button-item.calcite-input__number-button-item--horizontal[data-adjustment=up].sc-calcite-input:hover{background-color:var(--calcite-ui-foreground-2)}.calcite-input__number-button-item.calcite-input__number-button-item--horizontal[data-adjustment=up].sc-calcite-input:hover calcite-icon.sc-calcite-input{color:var(--calcite-ui-text-1)}[number-button-type=vertical].sc-calcite-input-h .calcite-input__number-button-item[data-adjustment=down].sc-calcite-input:hover{background-color:var(--calcite-ui-foreground-2)}[number-button-type=vertical].sc-calcite-input-h .calcite-input__number-button-item[data-adjustment=down].sc-calcite-input:hover calcite-icon.sc-calcite-input{color:var(--calcite-ui-text-1)}[number-button-type=vertical].sc-calcite-input-h .calcite-input__number-button-item[data-adjustment=up].sc-calcite-input:hover{background-color:var(--calcite-ui-foreground-2)}[number-button-type=vertical].sc-calcite-input-h .calcite-input__number-button-item[data-adjustment=up].sc-calcite-input:hover calcite-icon.sc-calcite-input{color:var(--calcite-ui-text-1)}.calcite--rtl.sc-calcite-input .calcite-input__number-button-item.calcite-input__number-button-item--horizontal[data-adjustment=down].sc-calcite-input{border-width:1px;border-left-width:0;border-color:var(--calcite-ui-border-input)}.calcite--rtl.sc-calcite-input .calcite-input__number-button-item.calcite-input__number-button-item--horizontal[data-adjustment=up].sc-calcite-input{border-width:1px;border-right-width:0;border-color:var(--calcite-ui-border-input)}[number-button-type=vertical].sc-calcite-input-h .calcite-input__number-button-item[data-adjustment=down].sc-calcite-input,[number-button-type=vertical].sc-calcite-input-h .calcite--rtl.sc-calcite-input .calcite-input__number-button-item[data-adjustment=down].sc-calcite-input{border-top-width:0}.calcite-input__number-button-item.sc-calcite-input{max-height:50%;min-height:50%;pointer-events:initial;display:-ms-flexbox;display:flex;-ms-flex-item-align:center;align-self:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;padding-top:0;padding-bottom:0;padding-left:0.5rem;padding-right:0.5rem;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-foreground-1);border-left-width:0;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s;margin:0}.calcite-input__number-button-item.sc-calcite-input calcite-icon.sc-calcite-input{pointer-events:none;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s}.calcite-input__number-button-item.sc-calcite-input:focus{background-color:var(--calcite-ui-foreground-2)}.calcite-input__number-button-item.sc-calcite-input:focus calcite-icon.sc-calcite-input{color:var(--calcite-ui-text-1)}.calcite-input__number-button-item.sc-calcite-input:active{background-color:var(--calcite-ui-foreground-3)}[number-button-type=vertical].sc-calcite-input-h .calcite--rtl.sc-calcite-input .calcite-input__number-button-item.sc-calcite-input{border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);border-right-width:0}.calcite-input__wrapper.sc-calcite-input{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;position:relative}.sc-calcite-input-h input.sc-calcite-input::-webkit-calendar-picker-indicator{display:none}.sc-calcite-input-h input[type=date].sc-calcite-input::-webkit-input-placeholder{visibility:hidden !important}.sc-calcite-input-h textarea.sc-calcite-input::-webkit-resizer{-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;bottom:0;right:0;padding-top:0;padding-bottom:0;padding-left:0.25rem;padding-right:0.25rem}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){.calcite-input__resize-icon-wrapper.sc-calcite-input{display:none}}.calcite-input__resize-icon-wrapper.sc-calcite-input{bottom:2px;right:2px;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-3);position:absolute;z-index:10;pointer-events:none;width:0.75rem;height:0.75rem}.calcite-input__resize-icon-wrapper.sc-calcite-input calcite-icon.sc-calcite-input{bottom:0.25rem;right:0.25rem;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.calcite--rtl.sc-calcite-input textarea.sc-calcite-input::-webkit-resizer{right:unset;left:0}.calcite--rtl.sc-calcite-input .calcite-input__resize-icon-wrapper.sc-calcite-input{left:2px;right:unset}.calcite--rtl.sc-calcite-input .calcite-input__resize-icon-wrapper.sc-calcite-input calcite-icon.sc-calcite-input{bottom:0.25rem;right:0.25rem;-webkit-transform:rotate(45deg);transform:rotate(45deg)}[type=color].sc-calcite-input-h input.sc-calcite-input{padding:0.25rem}[type=file].sc-calcite-input-h input.sc-calcite-input{background-color:var(--calcite-ui-foreground-1);cursor:pointer;border-width:1px;border-style:dashed;border-color:var(--calcite-ui-border-input);text-align:center}[type=file][scale=s].sc-calcite-input-h input.sc-calcite-input{padding-top:1px;padding-bottom:1px;padding-left:0.5rem;padding-right:0.5rem}[type=file][scale=m].sc-calcite-input-h input.sc-calcite-input{padding-top:0.25rem;padding-bottom:0.25rem;padding-left:0.75rem;padding-right:0.75rem}[type=file][scale=l].sc-calcite-input-h input.sc-calcite-input{padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:1rem}.no-bottom-border.sc-calcite-input-h input.sc-calcite-input.sc-calcite-input{border-bottom-width:0}.border-t-color-1.sc-calcite-input-h input.sc-calcite-input.sc-calcite-input{border-top-color:var(--calcite-ui-border-1)}";
+const calciteInputCss = "@-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([scale=s]) input,:host([scale=s]) .prefix,:host([scale=s]) .suffix{font-size:var(--calcite-font-size--2);line-height:1rem;padding:0.5rem;height:1.5rem}:host([scale=s]) textarea{height:1.5rem;min-height:1.5rem}:host([scale=s]) .number-button-wrapper,:host([scale=s]) .action-wrapper calcite-button,:host([scale=s]) .action-wrapper calcite-button button{height:1.5rem}:host([scale=s]) input[type=file]{height:1.5rem}:host([scale=s]) .clear-button{min-height:1.5rem;min-width:1.5rem}:host([scale=s]) textarea{font-size:var(--calcite-font-size--2);line-height:1rem;padding-top:0.25rem;padding-bottom:0.25rem;padding-left:0.5rem;padding-right:0.5rem;height:auto}:host([scale=m]) input,:host([scale=m]) .prefix,:host([scale=m]) .suffix{font-size:var(--calcite-font-size--1);line-height:1rem;padding:0.75rem;height:2rem}:host([scale=m]) textarea{min-height:2rem}:host([scale=m]) .number-button-wrapper,:host([scale=m]) .action-wrapper calcite-button,:host([scale=m]) .action-wrapper calcite-button button{height:2rem}:host([scale=m]) input[type=file]{height:2rem}:host([scale=m]) .clear-button{min-height:2rem;min-width:2rem}:host([scale=m]) textarea{font-size:var(--calcite-font-size--1);line-height:1rem;padding-top:0.5rem;padding-bottom:0.5rem;padding-left:0.75rem;padding-right:0.75rem;height:auto}:host([scale=l]) input,:host([scale=l]) .prefix,:host([scale=l]) .suffix{font-size:var(--calcite-font-size-0);line-height:1.25rem;padding:1rem;height:2.75rem}:host([scale=l]) textarea{min-height:2.75rem}:host([scale=l]) .number-button-wrapper,:host([scale=l]) .action-wrapper calcite-button,:host([scale=l]) .action-wrapper calcite-button button{height:2.75rem}:host([scale=l]) input[type=file]{height:2.75rem}:host([scale=l]) .clear-button{min-height:2.75rem;min-width:2.75rem}:host([scale=l]) textarea{font-size:var(--calcite-font-size-0);line-height:1.25rem;padding-top:0.75rem;padding-bottom:0.75rem;padding-left:1rem;padding-right:1rem;height:auto}:host([disabled]){pointer-events:none}:host([disabled]) .wrapper{pointer-events:none;--text-opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) button,:host([disabled]) textarea,:host([disabled]) input{pointer-events:none}:host([disabled]) textarea{resize:none}:host textarea,:host input{-webkit-transition:150ms ease-in-out, height 0s;transition:150ms ease-in-out, height 0s;-webkit-appearance:none;width:100%;border-radius:0;position:relative;max-height:100%;max-width:100%;margin:0;font-weight:var(--calcite-font-weight-normal);font-family:inherit;-ms-flex:1 1 0%;flex:1 1 0%;display:-ms-flexbox;display:flex;color:var(--calcite-ui-text-1);-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1)}:host input[type=search]::-webkit-search-decoration{-webkit-appearance:none}:host input,:host textarea{color:var(--calcite-ui-text-1);border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input)}:host input:-ms-input-placeholder,:host textarea:-ms-input-placeholder{color:var(--calcite-ui-text-3);font-weight:var(--calcite-font-weight-normal)}:host input::-ms-input-placeholder,:host textarea::-ms-input-placeholder{color:var(--calcite-ui-text-3);font-weight:var(--calcite-font-weight-normal)}:host input::placeholder,:host input:-ms-input-placeholder,:host input::-ms-input-placeholder,:host textarea::placeholder,:host textarea:-ms-input-placeholder,:host textarea::-ms-input-placeholder{color:var(--calcite-ui-text-3);font-weight:var(--calcite-font-weight-normal)}:host input:focus,:host textarea:focus{border-color:var(--calcite-ui-brand);color:var(--calcite-ui-text-1)}:host input[readonly],:host textarea[readonly]{background-color:var(--calcite-ui-background)}:host input[readonly]:focus,:host textarea[readonly]:focus{color:var(--calcite-ui-text-1)}:host calcite-icon{color:var(--calcite-ui-text-3)}:host textarea,:host input{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out}:host textarea:focus,:host input:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}:host([status=invalid]) input,:host([status=invalid]) textarea{border-color:var(--calcite-ui-danger)}:host([status=invalid]) input:focus,:host([status=invalid]) textarea:focus{outline:2px solid var(--calcite-ui-danger);outline-offset:-2px}:host([scale=s]) .icon{left:0.5rem}:host([scale=s]) .calcite--rtl .icon{left:unset;right:0.5rem}:host([scale=m]) .icon{left:0.75rem}:host([scale=m]) .calcite--rtl .icon{left:unset;right:0.75rem}:host([scale=l]) .icon{left:1rem}:host([scale=l]) .calcite--rtl .icon{left:unset;right:1rem}:host([icon][scale=s]) input{padding-left:2rem}:host([icon][scale=s]) .calcite--rtl input{padding-right:2rem;padding-left:0.5rem}:host([icon][scale=m]) input{padding-left:2.5rem}:host([icon][scale=m]) .calcite--rtl input{padding-right:2.5rem;padding-left:0.5rem}:host([icon][scale=l]) input{padding-left:3rem}:host([icon][scale=l]) .calcite--rtl input{padding-right:3rem;padding-left:0.5rem}.element-wrapper{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;-ms-flex:1 1 0%;flex:1 1 0%;position:relative;-ms-flex-order:3;order:3}.icon{display:block;position:absolute;pointer-events:none;z-index:10;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s}input[type=text]::-ms-clear,input[type=text]::-ms-reveal{display:none;width:0;height:0}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration,input[type=date]::-webkit-clear-button,input[type=time]::-webkit-clear-button{display:none}.clear-button{pointer-events:initial;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;display:-ms-flexbox;display:flex;-ms-flex-item-align:stretch;align-self:stretch;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;min-height:100%;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-foreground-1);border-left-width:0;-ms-flex-order:4;order:4;margin:0}.clear-button:hover{background-color:var(--calcite-ui-foreground-2);-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s}.clear-button:hover calcite-icon{color:var(--calcite-ui-text-1);-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s}.clear-button:active{background-color:var(--calcite-ui-foreground-3)}.clear-button:active calcite-icon{color:var(--calcite-ui-text-1)}.clear-button:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.clear-button:disabled{opacity:var(--calcite-ui-opacity-disabled)}.calcite--rtl .clear-button{border-left-color:var(--calcite-ui-border-input);border-width:1px;border-right-width:0}.loader{top:1px;left:1px;right:1px;display:block;pointer-events:none;position:absolute}.action-wrapper{display:-ms-flexbox;display:flex;-ms-flex-order:7;order:7}.prefix,.suffix{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;height:auto;min-height:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-box-sizing:border-box;box-sizing:border-box;font-weight:var(--calcite-font-weight-medium);border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-background);color:var(--calcite-ui-text-2);line-height:1;word-wrap:break-word;overflow-wrap:break-word}.prefix{-ms-flex-order:2;order:2;border-right-width:0}.suffix{-ms-flex-order:5;order:5;border-left-width:0}.calcite--rtl .prefix{border-right-width:1px;border-left-width:0}.calcite--rtl .suffix{border-left-width:1px;border-right-width:0}:host([alignment=start]) textarea,:host([alignment=start]) input{text-align:left}:host([alignment=start]) .calcite--rtl textarea,:host([alignment=start]) .calcite--rtl input{text-align:right}:host([alignment=end]) textarea,:host([alignment=end]) input{text-align:right}:host([alignment=end]) .calcite--rtl textarea,:host([alignment=end]) .calcite--rtl input{text-align:left}:host input[type=number]{-moz-appearance:textfield}:host input[type=number]::-webkit-inner-spin-button,:host input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;-moz-appearance:textfield;margin:0}.number-button-wrapper{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;pointer-events:none;-ms-flex-order:6;order:6;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s}:host([number-button-type=vertical]) .wrapper{-ms-flex-direction:row;flex-direction:row;display:-ms-flexbox;display:flex}:host([number-button-type=vertical]) input,:host([number-button-type=vertical]) textarea{-ms-flex-order:2;order:2}:host([number-button-type=horizontal]) .calcite--rtl .number-button-item[data-adjustment=down] calcite-icon{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}:host([number-button-type=horizontal]) .calcite--rtl .number-button-item[data-adjustment=up] calcite-icon{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.number-button-item.number-button-item--horizontal[data-adjustment=down],.number-button-item.number-button-item--horizontal[data-adjustment=up]{min-height:100%;max-height:100%;-ms-flex-order:1;order:1;-ms-flex-item-align:stretch;align-self:stretch}.number-button-item.number-button-item--horizontal[data-adjustment=down] calcite-icon,.number-button-item.number-button-item--horizontal[data-adjustment=up] calcite-icon{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.number-button-item.number-button-item--horizontal[data-adjustment=down]{border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);border-right-width:0}.number-button-item.number-button-item--horizontal[data-adjustment=down]:hover{background-color:var(--calcite-ui-foreground-2)}.number-button-item.number-button-item--horizontal[data-adjustment=down]:hover calcite-icon{color:var(--calcite-ui-text-1)}.number-button-item.number-button-item--horizontal[data-adjustment=up]{-ms-flex-order:5;order:5}.number-button-item.number-button-item--horizontal[data-adjustment=up]:hover{background-color:var(--calcite-ui-foreground-2)}.number-button-item.number-button-item--horizontal[data-adjustment=up]:hover calcite-icon{color:var(--calcite-ui-text-1)}:host([number-button-type=vertical]) .number-button-item[data-adjustment=down]:hover{background-color:var(--calcite-ui-foreground-2)}:host([number-button-type=vertical]) .number-button-item[data-adjustment=down]:hover calcite-icon{color:var(--calcite-ui-text-1)}:host([number-button-type=vertical]) .number-button-item[data-adjustment=up]:hover{background-color:var(--calcite-ui-foreground-2)}:host([number-button-type=vertical]) .number-button-item[data-adjustment=up]:hover calcite-icon{color:var(--calcite-ui-text-1)}.calcite--rtl .number-button-item.number-button-item--horizontal[data-adjustment=down]{border-width:1px;border-left-width:0;border-color:var(--calcite-ui-border-input)}.calcite--rtl .number-button-item.number-button-item--horizontal[data-adjustment=up]{border-width:1px;border-right-width:0;border-color:var(--calcite-ui-border-input)}:host([number-button-type=vertical]) .number-button-item[data-adjustment=down],:host([number-button-type=vertical]) .calcite--rtl .number-button-item[data-adjustment=down]{border-top-width:0}.number-button-item{max-height:50%;min-height:50%;pointer-events:initial;display:-ms-flexbox;display:flex;-ms-flex-item-align:center;align-self:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;padding-top:0;padding-bottom:0;padding-left:0.5rem;padding-right:0.5rem;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-foreground-1);border-left-width:0;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s;margin:0}.number-button-item calcite-icon{pointer-events:none;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s}.number-button-item:focus{background-color:var(--calcite-ui-foreground-2)}.number-button-item:focus calcite-icon{color:var(--calcite-ui-text-1)}.number-button-item:active{background-color:var(--calcite-ui-foreground-3)}:host([number-button-type=vertical]) .calcite--rtl .number-button-item{border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);border-right-width:0}.wrapper{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;position:relative}:host input::-webkit-calendar-picker-indicator{display:none}:host input[type=date]::-webkit-input-placeholder{visibility:hidden !important}:host textarea::-webkit-resizer{-webkit-box-sizing:border-box;box-sizing:border-box;position:absolute;bottom:0;right:0;padding-top:0;padding-bottom:0;padding-left:0.25rem;padding-right:0.25rem}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){.resize-icon-wrapper{display:none}}.resize-icon-wrapper{bottom:2px;right:2px;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-3);position:absolute;z-index:10;pointer-events:none;width:0.75rem;height:0.75rem}.resize-icon-wrapper calcite-icon{bottom:0.25rem;right:0.25rem;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.calcite--rtl textarea::-webkit-resizer{right:unset;left:0}.calcite--rtl .resize-icon-wrapper{left:2px;right:unset}.calcite--rtl .resize-icon-wrapper calcite-icon{bottom:0.25rem;right:0.25rem;-webkit-transform:rotate(45deg);transform:rotate(45deg)}:host([type=color]) input{padding:0.25rem}:host([type=file]) input{background-color:var(--calcite-ui-foreground-1);cursor:pointer;border-width:1px;border-style:dashed;border-color:var(--calcite-ui-border-input);text-align:center}:host([type=file][scale=s]) input{padding-top:1px;padding-bottom:1px;padding-left:0.5rem;padding-right:0.5rem}:host([type=file][scale=m]) input{padding-top:0.25rem;padding-bottom:0.25rem;padding-left:0.75rem;padding-right:0.75rem}:host([type=file][scale=l]) input{padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:1rem}:host(.no-bottom-border) input{border-bottom-width:0}:host(.border-t-color-1) input{border-top-color:var(--calcite-ui-border-1)}:host .inline-child{-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-delay:0s;transition-delay:0s;background-color:transparent}:host .inline-child .editing-enabled{background-color:inherit}:host .inline-child:not(.editing-enabled){display:-ms-flexbox;display:flex;cursor:pointer;border-color:transparent;-webkit-padding-start:0;padding-inline-start:0}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
 
 let CalciteInput$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.calciteInputFocus = createEvent(this, "calciteInputFocus", 7);
     this.calciteInputBlur = createEvent(this, "calciteInputBlur", 7);
     this.calciteInputInput = createEvent(this, "calciteInputInput", 7);
@@ -12478,6 +12748,8 @@ let CalciteInput$1 = class extends HTMLElement {
     this.disabled = false;
     /** for number values, displays the locale's group separator */
     this.groupSeparator = false;
+    /** when true, the component will not be visible */
+    this.hidden = false;
     /**
      * string to override English loading text
      * @default "Loading"
@@ -12504,6 +12776,8 @@ let CalciteInput$1 = class extends HTMLElement {
     this.scale = "m";
     /** specify the status of the input field, determines message and icons */
     this.status = "idle";
+    /** @internal adds inline styles for text input when slotted in calcite-inline-editable */
+    this.editingEnabled = false;
     /**
      * specify the input type
      *
@@ -12512,6 +12786,20 @@ let CalciteInput$1 = class extends HTMLElement {
     this.type = "text";
     /** keep track of the rendered child type */
     this.childElType = "input";
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.keyDownHandler = (event) => {
+      if (this.readOnly || this.disabled) {
+        return;
+      }
+      if (this.isClearable && getKey(event.key) === "Escape") {
+        this.clearInputValue(event);
+        event.preventDefault();
+      }
+    };
     this.clearInputValue = (nativeEvent) => {
       this.setValue(null, nativeEvent, true);
     };
@@ -12613,36 +12901,27 @@ let CalciteInput$1 = class extends HTMLElement {
       event.preventDefault();
     };
     this.nudgeNumberValue = (direction, nativeEvent) => {
-      if (this.type !== "number") {
+      if ((nativeEvent instanceof KeyboardEvent && nativeEvent.repeat) || this.type !== "number") {
         return;
       }
-      const value = this.value;
       const inputMax = this.maxString ? parseFloat(this.maxString) : null;
       const inputMin = this.minString ? parseFloat(this.minString) : null;
-      const inputStep = this.step === "any" ? 1 : Math.abs(this.step || 1);
-      const inputVal = value && value !== "" ? parseFloat(value) : 0;
-      let newValue = value;
-      if (direction === "up" && ((!inputMax && inputMax !== 0) || inputVal < inputMax)) {
-        newValue = (inputVal + inputStep).toString();
-      }
-      if (direction === "down" && ((!inputMin && inputMin !== 0) || inputVal > inputMin)) {
-        newValue = (inputVal - inputStep).toString();
-      }
-      this.setValue(newValue, nativeEvent, true);
+      const valueNudgeDelayInMs = 500;
+      this.incrementOrDecrementNumberValue(direction, inputMax, inputMin, nativeEvent);
+      this.nudgeNumberValueIntervalId = setInterval(() => {
+        this.incrementOrDecrementNumberValue(direction, inputMax, inputMin, nativeEvent);
+      }, valueNudgeDelayInMs);
+    };
+    this.numberButtonMouseUpAndMouseOutHandler = () => {
+      clearInterval(this.nudgeNumberValueIntervalId);
     };
-    this.numberButtonClickHandler = (event) => {
+    this.numberButtonMouseDownHandler = (event) => {
       // todo, when dropping ie11 support, refactor to use stepup/stepdown
       // prevent blur and re-focus of input on mousedown
       event.preventDefault();
       const direction = event.target.dataset.adjustment;
       this.nudgeNumberValue(direction, event);
     };
-    this.reset = (nativeEvent) => {
-      if (this.type === "number") {
-        nativeEvent.preventDefault();
-      }
-      this.setValue(this.defaultValue, nativeEvent);
-    };
     this.setChildElRef = (el) => {
       this.childEl = el;
     };
@@ -12676,6 +12955,9 @@ let CalciteInput$1 = class extends HTMLElement {
         }
       }
     };
+    this.inputKeyUpHandler = () => {
+      clearInterval(this.nudgeNumberValueIntervalId);
+    };
   }
   disabledWatcher() {
     this.setDisabledAction();
@@ -12716,10 +12998,10 @@ let CalciteInput$1 = class extends HTMLElement {
   //--------------------------------------------------------------------------
   connectedCallback() {
     var _a;
-    this.form = closestElementCrossShadowBoundary(this.el, "form");
-    (_a = this.form) === null || _a === void 0 ? void 0 : _a.addEventListener("reset", this.reset);
     this.scale = getElementProp(this.el, "scale", this.scale);
     this.status = getElementProp(this.el, "status", this.status);
+    this.inlineEditableEl = this.el.closest("calcite-inline-editable");
+    this.editingEnabled = (_a = this.inlineEditableEl) === null || _a === void 0 ? void 0 : _a.editingEnabled;
     if (this.type === "number" && this.value) {
       if (isValidNumber(this.value)) {
         this.localizedValue = localizeNumberString(this.value, this.locale, this.groupSeparator);
@@ -12729,16 +13011,15 @@ let CalciteInput$1 = class extends HTMLElement {
       }
     }
     connectLabel(this);
+    connectForm(this);
   }
   disconnectedCallback() {
-    var _a;
-    (_a = this.form) === null || _a === void 0 ? void 0 : _a.removeEventListener("reset", this.reset);
     disconnectLabel(this);
+    disconnectForm(this);
   }
   componentWillLoad() {
     var _a, _b;
     this.childElType = this.type === "textarea" ? "textarea" : "input";
-    this.defaultValue = this.value;
     this.maxString = (_a = this.max) === null || _a === void 0 ? void 0 : _a.toString();
     this.minString = (_b = this.min) === null || _b === void 0 ? void 0 : _b.toString();
     this.requestedIcon = setRequestedIcon(INPUT_TYPE_ICONS, this.icon, this.type);
@@ -12746,9 +13027,6 @@ let CalciteInput$1 = class extends HTMLElement {
   componentDidLoad() {
     this.slottedActionEl = this.el.querySelector("[slot=action]");
     this.setDisabledAction();
-    if (this.type === "number" && this.childEl) {
-      this.childEl.style.cssText = hiddenInputStyle;
-    }
   }
   componentShouldUpdate(newValue, oldValue, property) {
     if (this.type === "number" && property === "value" && newValue && !isValidNumber(newValue)) {
@@ -12759,20 +13037,6 @@ let CalciteInput$1 = class extends HTMLElement {
   }
   //--------------------------------------------------------------------------
   //
-  //  Event Listeners
-  //
-  //--------------------------------------------------------------------------
-  keyDownHandler(event) {
-    if (this.readOnly || this.disabled) {
-      return;
-    }
-    if (this.isClearable && getKey(event.key) === "Escape") {
-      this.clearInputValue(event);
-      event.preventDefault();
-    }
-  }
-  //--------------------------------------------------------------------------
-  //
   //  Public Methods
   //
   //--------------------------------------------------------------------------
@@ -12786,14 +13050,45 @@ let CalciteInput$1 = class extends HTMLElement {
       (_b = this.childEl) === null || _b === void 0 ? void 0 : _b.focus();
     }
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
   onLabelClick() {
     this.setFocus();
   }
+  incrementOrDecrementNumberValue(direction, inputMax, inputMin, nativeEvent) {
+    const value = this.value;
+    const inputStep = this.step === "any" ? 1 : Math.abs(this.step || 1);
+    const inputVal = value && value !== "" ? parseFloat(value) : 0;
+    let newValue = value;
+    if (direction === "up" && ((!inputMax && inputMax !== 0) || inputVal < inputMax)) {
+      newValue = (inputVal + inputStep).toString();
+    }
+    if (direction === "down" && ((!inputMin && inputMin !== 0) || inputVal > inputMin)) {
+      newValue = (inputVal - inputStep).toString();
+    }
+    this.setValue(newValue, nativeEvent, true);
+  }
+  onFormReset() {
+    this.setValue(this.defaultValue);
+  }
+  syncHiddenFormInput(input) {
+    var _a, _b, _c, _d;
+    if (this.type === "number") {
+      input.type = "number";
+      input.min = (_b = (_a = this.min) === null || _a === void 0 ? void 0 : _a.toString(10)) !== null && _b !== void 0 ? _b : "";
+      input.max = (_d = (_c = this.max) === null || _c === void 0 ? void 0 : _c.toString(10)) !== null && _d !== void 0 ? _d : "";
+    }
+    else if (this.type === "text") {
+      input.type = "text";
+      if (this.minLength != null) {
+        input.minLength = this.minLength;
+      }
+      if (this.maxLength != null) {
+        input.maxLength = this.maxLength;
+      }
+    }
+    else if (this.type === "password") {
+      input.type = "password";
+    }
+  }
   setDisabledAction() {
     if (!this.slottedActionEl) {
       return;
@@ -12817,26 +13112,31 @@ let CalciteInput$1 = class extends HTMLElement {
     const numberButtonsHorizontalUp = (h("button", { class: {
         [CSS$r.numberButtonItem]: true,
         [CSS$r.buttonItemHorizontal]: isHorizontalNumberButton
-      }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onClick: this.numberButtonClickHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { icon: "chevron-up", scale: "s" })));
+      }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onMouseDown: this.numberButtonMouseDownHandler, onMouseOut: this.numberButtonMouseUpAndMouseOutHandler, onMouseUp: this.numberButtonMouseUpAndMouseOutHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { icon: "chevron-up", scale: "s" })));
     const numberButtonsHorizontalDown = (h("button", { class: {
         [CSS$r.numberButtonItem]: true,
         [CSS$r.buttonItemHorizontal]: isHorizontalNumberButton
-      }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onClick: this.numberButtonClickHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { icon: "chevron-down", scale: "s" })));
+      }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onMouseDown: this.numberButtonMouseDownHandler, onMouseOut: this.numberButtonMouseUpAndMouseOutHandler, onMouseUp: this.numberButtonMouseUpAndMouseOutHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { icon: "chevron-down", scale: "s" })));
     const numberButtonsVertical = (h("div", { class: CSS$r.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
     const prefixText = h("div", { class: CSS$r.prefix }, this.prefixText);
     const suffixText = h("div", { class: CSS$r.suffix }, this.suffixText);
-    const localeNumberInput = this.type === "number" ? (h("input", { "aria-label": getLabelText(this), autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, name: undefined, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildNumberElRef, tabIndex: this.disabled ? -1 : 0, type: "text", value: this.localizedValue })) : null;
-    const childEl = [
-      h(this.childElType, { "aria-label": getLabelText(this), autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, max: this.maxString, maxLength: this.maxLength, min: this.minString, minLength: this.minLength, name: this.name, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeyDownHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildElRef, required: this.required ? true : null, step: this.step, tabIndex: this.disabled || this.type === "number" ? -1 : null, type: this.type, value: this.value }),
-      this.isTextarea ? (h("div", { class: CSS$r.resizeIconWrapper }, h("calcite-icon", { icon: "chevron-down", scale: "s" }))) : null
-    ];
-    return (h(Host, { onClick: this.inputFocusHandler }, h("div", { class: { [CSS$r.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" }, dir: dir }, this.type === "number" && this.numberButtonType === "horizontal"
+    const localeNumberInput = this.type === "number" ? (h("input", { "aria-label": getLabelText(this), autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.el.enterKeyHint, inputMode: this.el.inputMode, key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, name: undefined, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, onKeyUp: this.inputKeyUpHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildNumberElRef, tabIndex: this.disabled ? -1 : 0, type: "text", value: this.localizedValue })) : null;
+    const childEl = this.type !== "number"
+      ? [
+        h(this.childElType, { "aria-label": getLabelText(this), autofocus: this.autofocus ? true : null, class: {
+            [CSS$r.editingEnabled]: this.editingEnabled,
+            [CSS$r.inlineChild]: !!this.inlineEditableEl
+          }, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.el.enterKeyHint, inputMode: this.el.inputMode, max: this.maxString, maxLength: this.maxLength, min: this.minString, minLength: this.minLength, name: this.name, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeyDownHandler, onKeyUp: this.inputKeyUpHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildElRef, required: this.required ? true : null, step: this.step, tabIndex: this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null, type: this.type, value: this.value }),
+        this.isTextarea ? (h("div", { class: CSS$r.resizeIconWrapper }, h("calcite-icon", { icon: "chevron-down", scale: "s" }))) : null
+      ]
+      : null;
+    return (h(Host, { onClick: this.inputFocusHandler, onKeyDown: this.keyDownHandler }, h("div", { class: { [CSS$r.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" }, dir: dir }, this.type === "number" && this.numberButtonType === "horizontal"
       ? numberButtonsHorizontalDown
       : null, this.prefixText ? prefixText : null, h("div", { class: CSS$r.wrapper }, localeNumberInput, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), h("div", { class: CSS$r.actionWrapper }, h("slot", { name: SLOTS$g.action })), this.type === "number" && this.numberButtonType === "vertical"
       ? numberButtonsVertical
       : null, this.suffixText ? suffixText : null, this.type === "number" && this.numberButtonType === "horizontal"
       ? numberButtonsHorizontalUp
-      : null)));
+      : null, h(HiddenFormInputSlot, { component: this }))));
   }
   get el() { return this; }
   static get watchers() { return {
@@ -12850,18 +13150,27 @@ let CalciteInput$1 = class extends HTMLElement {
   static get style() { return calciteInputCss; }
 };
 
-const calciteInputDatePickerCss = "@-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}: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-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{-webkit-box-shadow:none;box-shadow:none;display:inline-block;vertical-align:top;width:100%;position:relative;overflow:visible}:host .menu-container .calcite-popper-anim{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:0.25rem}:host .menu-container[data-popper-placement^=bottom] .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}:host .menu-container[data-popper-placement^=top] .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}:host .menu-container[data-popper-placement^=left] .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}:host .menu-container[data-popper-placement^=right] .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}:host .menu-container[data-popper-placement] .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}.calendar-picker-wrapper{-webkit-box-shadow:none;box-shadow:none;position:static;width:100%;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.input-wrapper{position:relative}:host([range]) .input-container{display:-ms-flexbox;display:flex}:host([range]) .input-wrapper{-ms-flex:1 1 auto;flex:1 1 auto}:host([range]) .horizontal-arrow-container{background-color:var(--calcite-ui-background);padding-top:0;padding-bottom:0;padding-left:0.25rem;padding-right:0.25rem;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);border-left-width:0;border-right-width:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host([range][layout=vertical]) .input-wrapper{width:100%}:host([range][layout=vertical]) .input-container{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}:host([range][layout=vertical]) .calendar-picker-wrapper--end{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}:host([range][layout=vertical]) .vertical-arrow-container{top:1.5rem;left:0;padding-left:0.625rem;padding-right:0.625rem;margin-left:1px;margin-right:1px;position:absolute;z-index:10;background-color:var(--calcite-ui-foreground-1)}:host([scale=s][range]:not([layout=vertical])) .calendar-picker-wrapper{width:216px}:host([scale=m][range]:not([layout=vertical])) .calendar-picker-wrapper{width:286px}:host([scale=l][range]:not([layout=vertical])) .calendar-picker-wrapper{width:398px}.menu-container{display:block;position:absolute;z-index:900;-webkit-transform:scale(0);transform:scale(0);visibility:hidden;pointer-events:none}:host([active]) .menu-container{visibility:visible;pointer-events:auto}.input .calcite-input__wrapper{margin-top:0}:host([range][layout=vertical][scale=m]) .vertical-arrow-container{top:1.5rem;padding-left:0.75rem}:host([range][layout=vertical][scale=m]) .vertical-arrow-container calcite-icon{width:0.75rem;height:0.75rem;min-width:0}:host([range][layout=vertical][scale=l]) .vertical-arrow-container{top:2.25rem;padding-left:0.875rem;padding-right:0.875rem}:host([range][layout=vertical][active]) .vertical-arrow-container{display:none}";
+const calciteInputDatePickerCss = "@-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}: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-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{-webkit-box-shadow:none;box-shadow:none;display:inline-block;vertical-align:top;width:100%;position:relative;overflow:visible}:host .menu-container .calcite-popper-anim{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:0.25rem}:host .menu-container[data-popper-placement^=bottom] .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}:host .menu-container[data-popper-placement^=top] .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}:host .menu-container[data-popper-placement^=left] .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}:host .menu-container[data-popper-placement^=right] .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}:host .menu-container[data-popper-placement] .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}.calendar-picker-wrapper{-webkit-box-shadow:none;box-shadow:none;position:static;width:100%;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.input-wrapper{position:relative}:host([range]) .input-container{display:-ms-flexbox;display:flex}:host([range]) .input-wrapper{-ms-flex:1 1 auto;flex:1 1 auto}:host([range]) .horizontal-arrow-container{background-color:var(--calcite-ui-background);padding-top:0;padding-bottom:0;padding-left:0.25rem;padding-right:0.25rem;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);border-left-width:0;border-right-width:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}:host([range][layout=vertical]) .input-wrapper{width:100%}:host([range][layout=vertical]) .input-container{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}:host([range][layout=vertical]) .calendar-picker-wrapper--end{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}:host([range][layout=vertical]) .vertical-arrow-container{top:1.5rem;left:0;padding-left:0.625rem;padding-right:0.625rem;margin-left:1px;margin-right:1px;position:absolute;z-index:10;background-color:var(--calcite-ui-foreground-1)}:host([scale=s][range]:not([layout=vertical])) .calendar-picker-wrapper{width:216px}:host([scale=m][range]:not([layout=vertical])) .calendar-picker-wrapper{width:286px}:host([scale=l][range]:not([layout=vertical])) .calendar-picker-wrapper{width:398px}.menu-container{display:block;position:absolute;z-index:900;-webkit-transform:scale(0);transform:scale(0);visibility:hidden;pointer-events:none}:host([active]) .menu-container{visibility:visible;pointer-events:auto}.input .calcite-input__wrapper{margin-top:0}:host([range][layout=vertical][scale=m]) .vertical-arrow-container{top:1.5rem;padding-left:0.75rem}:host([range][layout=vertical][scale=m]) .vertical-arrow-container calcite-icon{width:0.75rem;height:0.75rem;min-width:0}:host([range][layout=vertical][scale=l]) .vertical-arrow-container{top:2.25rem;padding-left:0.875rem;padding-right:0.875rem}:host([range][layout=vertical][active]) .vertical-arrow-container{display:none}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
 
 const DEFAULT_PLACEMENT = "bottom-leading";
 let CalciteInputDatePicker$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteDatePickerChange = createEvent(this, "calciteDatePickerChange", 7);
     this.calciteDatePickerRangeChange = createEvent(this, "calciteDatePickerRangeChange", 7);
     this.calciteInputDatePickerOpen = createEvent(this, "calciteInputDatePickerOpen", 7);
     this.calciteInputDatePickerClose = createEvent(this, "calciteInputDatePickerClose", 7);
+    //--------------------------------------------------------------------------
+    //
+    //  Public Properties
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * When false, the component won't be interactive.
+     */
+    this.disabled = false;
     /** Expand or collapse when calendar does not have input */
     this.active = false;
     /** Localized string for "previous month" (used for aria label)
@@ -12878,6 +13187,12 @@ let CalciteInputDatePicker$1 = class extends HTMLElement {
     this.scale = "m";
     /** Range mode activation */
     this.range = false;
+    /**
+     * When true, makes the component required for form-submission.
+     *
+     * @internal
+     */
+    this.required = false;
     /** Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */
     this.overlayPositioning = "absolute";
     /** Disables the default behaviour on the third click of narrowing or extending the range and instead starts a new range. */
@@ -12952,6 +13267,7 @@ let CalciteInputDatePicker$1 = class extends HTMLElement {
       const { startDate, endDate } = event.detail;
       this.start = dateToISO(startDate);
       this.end = dateToISO(endDate);
+      this.value = [this.start, this.end];
       if (this.shouldFocusRangeEnd()) {
         (_a = this.endInput) === null || _a === void 0 ? void 0 : _a.setFocus();
       }
@@ -12960,6 +13276,23 @@ let CalciteInputDatePicker$1 = class extends HTMLElement {
       }
     };
   }
+  valueHandler(value) {
+    if (Array.isArray(value)) {
+      this.valueAsDate = value.map((v) => dateFromISO(v));
+      this.start = value[0];
+      this.end = value[1];
+    }
+    else if (value) {
+      this.valueAsDate = dateFromISO(value);
+      this.start = "";
+      this.end = "";
+    }
+    else {
+      this.valueAsDate = undefined;
+      this.start = undefined;
+      this.end = undefined;
+    }
+  }
   activeHandler() {
     this.reposition();
   }
@@ -12989,7 +13322,7 @@ let CalciteInputDatePicker$1 = class extends HTMLElement {
     const { popper, menuEl } = this;
     const modifiers = this.getModifiers();
     popper
-      ? updatePopper({
+      ? await updatePopper({
         el: menuEl,
         modifiers,
         placement: DEFAULT_PLACEMENT,
@@ -13003,8 +13336,15 @@ let CalciteInputDatePicker$1 = class extends HTMLElement {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
-    if (this.value) {
+    if (Array.isArray(this.value)) {
+      this.valueAsDate = this.value.map((v) => dateFromISO(v));
+      this.start = this.value[0];
+      this.end = this.value[1];
+    }
+    else if (this.value) {
       this.valueAsDate = dateFromISO(this.value);
+      this.start = "";
+      this.end = "";
     }
     if (this.start) {
       this.startAsDate = dateFromISO(this.start);
@@ -13020,6 +13360,7 @@ let CalciteInputDatePicker$1 = class extends HTMLElement {
     }
     this.createPopper();
     connectLabel(this);
+    connectForm(this);
   }
   async componentWillLoad() {
     await this.loadLocaleData();
@@ -13027,9 +13368,11 @@ let CalciteInputDatePicker$1 = class extends HTMLElement {
   disconnectedCallback() {
     this.destroyPopper();
     disconnectLabel(this);
+    disconnectForm(this);
   }
   render() {
     var _a, _b;
+    const { disabled } = this;
     const date = dateFromRange(this.range ? this.startAsDate : this.valueAsDate, this.minAsDate, this.maxAsDate);
     const endDate = this.range
       ? dateFromRange(this.endAsDate, this.minAsDate, this.maxAsDate)
@@ -13037,7 +13380,7 @@ let CalciteInputDatePicker$1 = class extends HTMLElement {
     const formattedEndDate = endDate ? endDate.toLocaleDateString(this.locale) : "";
     const formattedDate = date ? date.toLocaleDateString(this.locale) : "";
     const dir = getElementDir(this.el);
-    return (h(Host, { onBlur: this.deactivate, onKeyUp: this.keyUpHandler, role: "application" }, this.localeData && (h("div", { "aria-expanded": this.active.toString(), class: "input-container", dir: dir, role: "application" }, h("div", { class: "input-wrapper", ref: this.setStartWrapper }, h("calcite-input", { class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, icon: "calendar", label: getLabelText(this), "number-button-type": "none", onCalciteInputBlur: this.inputBlur, onCalciteInputFocus: this.startInputFocus, onCalciteInputInput: this.inputInput, placeholder: (_a = this.localeData) === null || _a === void 0 ? void 0 : _a.placeholder, ref: this.setStartInput, scale: this.scale, type: "text", value: formattedDate })), h("div", { "aria-hidden": (!this.active).toString(), class: "menu-container", ref: this.setMenuEl }, h("div", { class: {
+    return (h(Host, { onBlur: this.deactivate, onKeyUp: this.keyUpHandler, role: "application" }, this.localeData && (h("div", { "aria-expanded": this.active.toString(), class: "input-container", dir: dir, role: "application" }, h("div", { class: "input-wrapper", ref: this.setStartWrapper }, h("calcite-input", { class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, disabled: disabled, icon: "calendar", label: getLabelText(this), "number-button-type": "none", onCalciteInputBlur: this.inputBlur, onCalciteInputFocus: this.startInputFocus, onCalciteInputInput: this.inputInput, placeholder: (_a = this.localeData) === null || _a === void 0 ? void 0 : _a.placeholder, ref: this.setStartInput, scale: this.scale, type: "text", value: formattedDate })), h("div", { "aria-hidden": (!this.active).toString(), class: "menu-container", ref: this.setMenuEl }, h("div", { class: {
         ["calendar-picker-wrapper"]: true,
         ["calendar-picker-wrapper--end"]: this.focusedInput === "end",
         [CSS$C.animation]: true,
@@ -13045,7 +13388,7 @@ let CalciteInputDatePicker$1 = class extends HTMLElement {
       }, onTransitionEnd: this.transitionEnd }, h("calcite-date-picker", { activeRange: this.focusedInput, endAsDate: this.endAsDate, headingLevel: this.headingLevel, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, locale: this.locale, max: this.max, maxAsDate: this.maxAsDate, min: this.min, minAsDate: this.minAsDate, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, startAsDate: this.startAsDate, tabIndex: 0, valueAsDate: this.valueAsDate }))), this.range && this.layout === "horizontal" && (h("div", { class: "horizontal-arrow-container" }, h("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: "s" }))), this.range && this.layout === "vertical" && this.scale !== "s" && (h("div", { class: "vertical-arrow-container" }, h("calcite-icon", { icon: "arrow-down", scale: "s" }))), this.range && (h("div", { class: "input-wrapper", ref: this.setEndWrapper }, h("calcite-input", { class: {
         input: true,
         "border-t-color-1": this.layout === "vertical" && this.range
-      }, icon: "calendar", "number-button-type": "none", onCalciteInputBlur: this.inputBlur, onCalciteInputFocus: this.endInputFocus, onCalciteInputInput: this.inputInput, placeholder: (_b = this.localeData) === null || _b === void 0 ? void 0 : _b.placeholder, ref: this.setEndInput, scale: this.scale, type: "text", value: formattedEndDate })))))));
+      }, disabled: disabled, icon: "calendar", "number-button-type": "none", onCalciteInputBlur: this.inputBlur, onCalciteInputFocus: this.endInputFocus, onCalciteInputInput: this.inputInput, placeholder: (_b = this.localeData) === null || _b === void 0 ? void 0 : _b.placeholder, ref: this.setEndInput, scale: this.scale, type: "text", value: formattedEndDate }))))), h(HiddenFormInputSlot, { component: this })));
   }
   setReferenceEl() {
     const { focusedInput, layout, endWrapper, startWrapper } = this;
@@ -13095,9 +13438,6 @@ let CalciteInputDatePicker$1 = class extends HTMLElement {
     }
     this.popper = null;
   }
-  valueWatcher(value) {
-    this.valueAsDate = dateFromISO(value);
-  }
   startWatcher(start) {
     this.startAsDate = dateFromISO(start);
   }
@@ -13113,14 +13453,16 @@ let CalciteInputDatePicker$1 = class extends HTMLElement {
   }
   clearCurrentValue() {
     if (!this.range) {
-      this.value = undefined;
+      this.value = "";
       return;
     }
     const { focusedInput } = this;
     if (focusedInput === "start") {
+      this.value = Array.isArray(this.value) ? ["", this.value[1] || ""] : [""];
       this.start = undefined;
     }
     else if (focusedInput === "end") {
+      this.value = Array.isArray(this.value) ? [this.value[0] || "", ""] : ["", ""];
       this.end = undefined;
     }
   }
@@ -13140,7 +13482,11 @@ let CalciteInputDatePicker$1 = class extends HTMLElement {
     const { focusedInput } = this;
     if (focusedInput === "start") {
       if (!this.startAsDate || !sameDate(date, this.startAsDate)) {
-        this.start = dateToISO(date);
+        const startDateISO = dateToISO(date);
+        this.value = Array.isArray(this.value)
+          ? [startDateISO, this.value[1] || ""]
+          : [startDateISO];
+        this.start = startDateISO;
         this.calciteDatePickerRangeChange.emit({
           startDate: date,
           endDate: this.endAsDate
@@ -13149,7 +13495,11 @@ let CalciteInputDatePicker$1 = class extends HTMLElement {
     }
     else if (focusedInput === "end") {
       if (!this.endAsDate || !sameDate(date, this.endAsDate)) {
-        this.end = dateToISO(date);
+        const endDateISO = dateToISO(date);
+        this.value = Array.isArray(this.value)
+          ? [this.value[0] || "", endDateISO]
+          : ["", endDateISO];
+        this.end = endDateISO;
         this.calciteDatePickerRangeChange.emit({
           startDate: this.startAsDate,
           endDate: date
@@ -13165,7 +13515,9 @@ let CalciteInputDatePicker$1 = class extends HTMLElement {
     const date = this.getDateFromInput(target.value);
     if (!date) {
       if (!range && valueAsDate) {
-        target.value = valueAsDate.toLocaleDateString(locale);
+        target.value = Array.isArray(valueAsDate)
+          ? valueAsDate[focusedInput === "end" ? 1 : 0].toLocaleDateString(locale)
+          : valueAsDate.toLocaleDateString(locale);
       }
       else if (focusedInput === "start" && startAsDate) {
         target.value = startAsDate.toLocaleDateString(locale);
@@ -13216,10 +13568,10 @@ let CalciteInputDatePicker$1 = class extends HTMLElement {
   }
   get el() { return this; }
   static get watchers() { return {
+    "value": ["valueHandler"],
     "active": ["activeHandler"],
     "layout": ["setReferenceEl"],
     "focusedInput": ["setReferenceEl"],
-    "value": ["valueWatcher"],
     "start": ["startWatcher"],
     "end": ["endWatcher"],
     "locale": ["loadLocaleData"]
@@ -13240,7 +13592,7 @@ let CalciteInputMessage$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -13344,13 +13696,13 @@ function formatTimePart(number) {
   return number >= 0 && number <= 9 ? numberAsString.padStart(2, "0") : numberAsString;
 }
 
-const calciteInputTimePickerCss = "@-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:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}";
+const calciteInputTimePickerCss = "@-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:inline-block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
 
 let CalciteInputTimePicker$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteInputTimePickerChange = createEvent(this, "calciteInputTimePickerChange", 7);
     //--------------------------------------------------------------------------
     //
@@ -13363,6 +13715,12 @@ let CalciteInputTimePicker$1 = class extends HTMLElement {
     this.disabled = false;
     /** Format of the hour value (12-hour or 24-hour) (this will be replaced by locale eventually) */
     this.hourDisplayFormat = "12";
+    /**
+     * When true, makes the component required for form-submission.
+     *
+     * @internal
+     */
+    this.required = false;
     /** The scale (size) of the time input */
     this.scale = "m";
     /** number that specifies the granularity that the value must adhere to */
@@ -13508,6 +13866,7 @@ let CalciteInputTimePicker$1 = class extends HTMLElement {
       this.setValue({ value: this.value, origin: "loading" });
     }
     connectLabel(this);
+    connectForm(this);
   }
   componentDidLoad() {
     if (this.calciteInputEl.value !== this.value) {
@@ -13516,6 +13875,7 @@ let CalciteInputTimePicker$1 = class extends HTMLElement {
   }
   disconnectedCallback() {
     disconnectLabel(this);
+    disconnectForm(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -13525,7 +13885,7 @@ let CalciteInputTimePicker$1 = class extends HTMLElement {
   render() {
     const { hour, minute, second } = parseTimeString(this.value);
     const popoverId = `${this.referenceElementId}-popover`;
-    return (h(Host, null, h("div", { "aria-controls": popoverId, "aria-haspopup": "dialog", "aria-label": this.name, "aria-owns": popoverId, id: this.referenceElementId, role: "combobox" }, h("calcite-input", { disabled: this.disabled, icon: "clock", label: getLabelText(this), name: this.name, onCalciteInputBlur: this.calciteInputBlurHandler, onCalciteInputFocus: this.calciteInputFocusHandler, onCalciteInputInput: this.calciteInputInputHandler, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })), h("calcite-popover", { id: popoverId, label: "Time Picker", open: this.active || false, referenceElement: this.referenceElementId }, h("calcite-time-picker", { hour: hour, "hour-display-format": this.hourDisplayFormat, intlHour: this.intlHour, intlHourDown: this.intlHourDown, intlHourUp: this.intlHourUp, intlMeridiem: this.intlMeridiem, intlMeridiemDown: this.intlMeridiemDown, intlMeridiemUp: this.intlMeridiemUp, intlMinute: this.intlMinute, intlMinuteDown: this.intlMinuteDown, intlMinuteUp: this.intlMinuteUp, intlSecond: this.intlSecond, intlSecondDown: this.intlSecondDown, intlSecondUp: this.intlSecondUp, minute: minute, scale: this.scale, second: second, step: this.step }))));
+    return (h(Host, null, h("div", { "aria-controls": popoverId, "aria-haspopup": "dialog", "aria-label": this.name, "aria-owns": popoverId, id: this.referenceElementId, role: "combobox" }, h("calcite-input", { disabled: this.disabled, icon: "clock", label: getLabelText(this), onCalciteInputBlur: this.calciteInputBlurHandler, onCalciteInputFocus: this.calciteInputFocusHandler, onCalciteInputInput: this.calciteInputInputHandler, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })), h("calcite-popover", { id: popoverId, label: "Time Picker", open: this.active || false, referenceElement: this.referenceElementId }, h("calcite-time-picker", { hour: hour, "hour-display-format": this.hourDisplayFormat, intlHour: this.intlHour, intlHourDown: this.intlHourDown, intlHourUp: this.intlHourUp, intlMeridiem: this.intlMeridiem, intlMeridiemDown: this.intlMeridiemDown, intlMeridiemUp: this.intlMeridiemUp, intlMinute: this.intlMinute, intlMinuteDown: this.intlMinuteDown, intlMinuteUp: this.intlMinuteUp, intlSecond: this.intlSecond, intlSecondDown: this.intlSecondDown, intlSecondUp: this.intlSecondUp, minute: minute, scale: this.scale, second: second, step: this.step })), h(HiddenFormInputSlot, { component: this })));
   }
   get el() { return this; }
   static get watchers() { return {
@@ -13544,7 +13904,7 @@ let CalciteLabel$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteInternalLabelClick = createEvent(this, "calciteInternalLabelClick", 3);
     //--------------------------------------------------------------------------
     //
@@ -13593,7 +13953,7 @@ let CalciteLink$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -13658,7 +14018,7 @@ let CalciteList$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
   }
   // --------------------------------------------------------------------------
   //
@@ -13708,7 +14068,7 @@ let CalciteListItem$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -13782,7 +14142,7 @@ let CalciteListItemGroup$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
   }
   // --------------------------------------------------------------------------
   //
@@ -13801,13 +14161,13 @@ let CalciteListItemGroup$1 = class extends HTMLElement {
   static get style() { return calciteListItemGroupCss; }
 };
 
-const calciteLoaderCss = "@charset \"UTF-8\";@-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{-ms-flex-align:center;align-items:center;position:relative;-ms-flex-pack:center;justify-content:center;display:none;margin-left:auto;margin-right:auto;opacity:1;padding-top:4rem;padding-bottom:4rem;min-height:var(--calcite-loader-size);font-size:var(--calcite-loader-font-size);stroke:var(--calcite-ui-brand);stroke-width:3;fill:none;-webkit-transform:scale(1, 1);transform:scale(1, 1);animation:loader-color-shift 6s alternate-reverse infinite linear}:host([scale=s]){--calcite-loader-font-size:var(--calcite-font-size--2);--calcite-loader-size:2rem;--calcite-loader-size-inline:0.75rem}:host([scale=m]){--calcite-loader-font-size:var(--calcite-font-size-0);--calcite-loader-size:4rem;--calcite-loader-size-inline:1rem}:host([scale=l]){--calcite-loader-font-size:var(--calcite-font-size-2);--calcite-loader-size:6rem;--calcite-loader-size-inline:1.25rem}:host([no-padding]){padding-top:0;padding-bottom:0}:host([active]){display:-ms-flexbox;display:flex}.loader__text{display:block;font-size:var(--calcite-font-size--2);line-height:1rem;text-align:center;color:var(--calcite-ui-text-1);margin-top:calc(var(--calcite-loader-size) + 1.5rem)}.loader__percentage{display:block;position:absolute;color:var(--calcite-ui-text-1);text-align:center;font-size:var(--calcite-loader-font-size);width:var(--calcite-loader-size);top:4rem;left:50%;margin-left:calc(var(--calcite-loader-size) / 2 * -1);margin-top:calc(var(--calcite-loader-size) / 2);line-height:0.25;-webkit-transform:scale(1, 1);transform:scale(1, 1)}.loader__svgs{position:absolute;overflow:visible;opacity:1;width:var(--calcite-loader-size);height:var(--calcite-loader-size);top:4rem;left:50%;margin-left:calc(var(--calcite-loader-size) / 2 * -1);-webkit-transform:scale(1, 1);transform:scale(1, 1)}.loader__svg{position:absolute;overflow:visible;top:0;left:0;-webkit-transform-origin:center;transform-origin:center;width:var(--calcite-loader-size);height:var(--calcite-loader-size);-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-name:loader-clockwise;animation-name:loader-clockwise}@supports (display: grid){.loader__svg--1{-webkit-animation-name:loader-offset-1;animation-name:loader-offset-1}.loader__svg--2{-webkit-animation-name:loader-offset-2;animation-name:loader-offset-2}.loader__svg--3{-webkit-animation-name:loader-offset-3;animation-name:loader-offset-3}}:host([type=determinate]){-webkit-animation:none;animation:none;stroke:var(--calcite-ui-border-3)}:host([type=determinate]) .loader__svg--3{-webkit-animation:none;animation:none;stroke:var(--calcite-ui-brand);stroke-dasharray:150.79632;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transition:all 100ms linear;transition:all 100ms linear}:host([inline]){position:relative;margin:0;padding-top:0;padding-bottom:0;-webkit-animation:none;animation:none;stroke:currentColor;stroke-width:2;height:var(--calcite-loader-size-inline);min-height:var(--calcite-loader-size-inline);width:var(--calcite-loader-size-inline);margin-right:calc(var(--calcite-loader-size-inline) * 0.5);vertical-align:calc(var(--calcite-loader-size-inline) * -1 * 0.2)}:host([inline][dir=rtl]){margin-right:0;margin-left:calc(var(--calcite-loader-size-inline) * 0.5)}:host([active][inline]){display:inline-block}:host([inline]) .loader__svgs{top:0;left:0;margin:0;width:var(--calcite-loader-size-inline);height:var(--calcite-loader-size-inline)}:host([inline]) .loader__svg{width:var(--calcite-loader-size-inline);height:var(--calcite-loader-size-inline)}:host([complete]){opacity:0;-webkit-transform:scale(0.75, 0.75);transform:scale(0.75, 0.75);-webkit-transform-origin:center;transform-origin:center;-webkit-transition:opacity 200ms linear 1000ms, -webkit-transform 200ms linear 1000ms;transition:opacity 200ms linear 1000ms, -webkit-transform 200ms linear 1000ms;transition:opacity 200ms linear 1000ms, transform 200ms linear 1000ms;transition:opacity 200ms linear 1000ms, transform 200ms linear 1000ms, -webkit-transform 200ms linear 1000ms}:host([complete]) .loader__svgs{opacity:0;-webkit-transform:scale(0.75, 0.75);transform:scale(0.75, 0.75);-webkit-transform-origin:center;transform-origin:center;-webkit-transition:opacity 180ms linear 800ms, -webkit-transform 180ms linear 800ms;transition:opacity 180ms linear 800ms, -webkit-transform 180ms linear 800ms;transition:opacity 180ms linear 800ms, transform 180ms linear 800ms;transition:opacity 180ms linear 800ms, transform 180ms linear 800ms, -webkit-transform 180ms linear 800ms}:host([complete]) .loader__percentage{color:var(--calcite-ui-brand);-webkit-transform:scale(1.05, 1.05);transform:scale(1.05, 1.05);-webkit-transform-origin:center;transform-origin:center;-webkit-transition:color 200ms linear, -webkit-transform 200ms linear;transition:color 200ms linear, -webkit-transform 200ms linear;transition:color 200ms linear, transform 200ms linear;transition:color 200ms linear, transform 200ms linear, -webkit-transform 200ms linear}.loader__svg--1{stroke-dasharray:27.9252444444% 139.6262222222%;-webkit-animation-duration:0.72s;animation-duration:0.72s}@-webkit-keyframes loader-offset-1{0%{stroke-dasharray:27.9252444444% 251.3272%;stroke-dashoffset:0}50%{stroke-dasharray:139.6262222222% 139.6262222222%;stroke-dashoffset:-83.7757333333%}100%{stroke-dasharray:27.9252444444% 251.3272%;stroke-dashoffset:-279.2524444444%}}@keyframes loader-offset-1{0%{stroke-dasharray:27.9252444444% 251.3272%;stroke-dashoffset:0}50%{stroke-dasharray:139.6262222222% 139.6262222222%;stroke-dashoffset:-83.7757333333%}100%{stroke-dasharray:27.9252444444% 251.3272%;stroke-dashoffset:-279.2524444444%}}.loader__svg--2{stroke-dasharray:55.8504888889% 139.6262222222%;-webkit-animation-duration:0.96s;animation-duration:0.96s}@-webkit-keyframes loader-offset-2{0%{stroke-dasharray:55.8504888889% 223.4019555556%;stroke-dashoffset:0}50%{stroke-dasharray:139.6262222222% 139.6262222222%;stroke-dashoffset:-97.7383555556%}100%{stroke-dasharray:55.8504888889% 223.4019555556%;stroke-dashoffset:-279.2524444444%}}@keyframes loader-offset-2{0%{stroke-dasharray:55.8504888889% 223.4019555556%;stroke-dashoffset:0}50%{stroke-dasharray:139.6262222222% 139.6262222222%;stroke-dashoffset:-97.7383555556%}100%{stroke-dasharray:55.8504888889% 223.4019555556%;stroke-dashoffset:-279.2524444444%}}.loader__svg--3{stroke-dasharray:13.9626222222% 139.6262222222%;-webkit-animation-duration:1.16s;animation-duration:1.16s}@-webkit-keyframes loader-offset-3{0%{stroke-dasharray:13.9626222222% 265.2898222222%;stroke-dashoffset:0}50%{stroke-dasharray:139.6262222222% 139.6262222222%;stroke-dashoffset:-76.7944222222%}100%{stroke-dasharray:13.9626222222% 265.2898222222%;stroke-dashoffset:-279.2524444444%}}@keyframes loader-offset-3{0%{stroke-dasharray:13.9626222222% 265.2898222222%;stroke-dashoffset:0}50%{stroke-dasharray:139.6262222222% 139.6262222222%;stroke-dashoffset:-76.7944222222%}100%{stroke-dasharray:13.9626222222% 265.2898222222%;stroke-dashoffset:-279.2524444444%}}@-webkit-keyframes loader-color-shift{0%{stroke:var(--calcite-ui-brand)}33%{stroke:var(--calcite-ui-brand-press)}66%{stroke:var(--calcite-ui-brand-hover)}100%{stroke:var(--calcite-ui-brand)}}@keyframes loader-color-shift{0%{stroke:var(--calcite-ui-brand)}33%{stroke:var(--calcite-ui-brand-press)}66%{stroke:var(--calcite-ui-brand-hover)}100%{stroke:var(--calcite-ui-brand)}}@-webkit-keyframes loader-clockwise{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loader-clockwise{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}";
+const calciteLoaderCss = "@charset \"UTF-8\";@-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{-ms-flex-align:center;align-items:center;position:relative;-ms-flex-pack:center;justify-content:center;display:none;margin-left:auto;margin-right:auto;opacity:1;padding-top:4rem;padding-bottom:4rem;min-height:var(--calcite-loader-size);font-size:var(--calcite-loader-font-size);stroke:var(--calcite-ui-brand);stroke-width:3;fill:none;-webkit-transform:scale(1, 1);transform:scale(1, 1);animation:loader-color-shift 6s alternate-reverse infinite linear}:host([scale=s]){--calcite-loader-font-size:var(--calcite-font-size--2);--calcite-loader-size:2rem;--calcite-loader-size-inline:0.75rem}:host([scale=m]){--calcite-loader-font-size:var(--calcite-font-size-0);--calcite-loader-size:4rem;--calcite-loader-size-inline:1rem}:host([scale=l]){--calcite-loader-font-size:var(--calcite-font-size-2);--calcite-loader-size:6rem;--calcite-loader-size-inline:1.25rem}:host([no-padding]){padding-top:0;padding-bottom:0}:host([active]){display:-ms-flexbox;display:flex}.loader__text{display:block;font-size:var(--calcite-font-size--2);line-height:1rem;text-align:center;color:var(--calcite-ui-text-1);margin-top:calc(var(--calcite-loader-size) + 1.5rem)}.loader__percentage{display:block;position:absolute;color:var(--calcite-ui-text-1);text-align:center;font-size:var(--calcite-loader-font-size);width:var(--calcite-loader-size);left:50%;margin-left:calc(var(--calcite-loader-size) / 2 * -1);line-height:0.25;-webkit-transform:scale(1, 1);transform:scale(1, 1)}.loader__svgs{position:absolute;overflow:visible;opacity:1;width:var(--calcite-loader-size);height:var(--calcite-loader-size);left:50%;margin-left:calc(var(--calcite-loader-size) / 2 * -1);-webkit-transform:scale(1, 1);transform:scale(1, 1)}.loader__svg{position:absolute;overflow:visible;top:0;left:0;-webkit-transform-origin:center;transform-origin:center;width:var(--calcite-loader-size);height:var(--calcite-loader-size);-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-name:loader-clockwise;animation-name:loader-clockwise}@supports (display: grid){.loader__svg--1{-webkit-animation-name:loader-offset-1;animation-name:loader-offset-1}.loader__svg--2{-webkit-animation-name:loader-offset-2;animation-name:loader-offset-2}.loader__svg--3{-webkit-animation-name:loader-offset-3;animation-name:loader-offset-3}}:host([type=determinate]){-webkit-animation:none;animation:none;stroke:var(--calcite-ui-border-3)}:host([type=determinate]) .loader__svg--3{-webkit-animation:none;animation:none;stroke:var(--calcite-ui-brand);stroke-dasharray:150.79632;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);-webkit-transition:all 100ms linear;transition:all 100ms linear}:host([inline]){position:relative;margin:0;padding-top:0;padding-bottom:0;-webkit-animation:none;animation:none;stroke:currentColor;stroke-width:2;height:var(--calcite-loader-size-inline);min-height:var(--calcite-loader-size-inline);width:var(--calcite-loader-size-inline);margin-right:calc(var(--calcite-loader-size-inline) * 0.5);vertical-align:calc(var(--calcite-loader-size-inline) * -1 * 0.2)}:host([inline][dir=rtl]){margin-right:0;margin-left:calc(var(--calcite-loader-size-inline) * 0.5)}:host([active][inline]){display:inline-block}:host([inline]) .loader__svgs{top:0;left:0;margin:0;width:var(--calcite-loader-size-inline);height:var(--calcite-loader-size-inline)}:host([inline]) .loader__svg{width:var(--calcite-loader-size-inline);height:var(--calcite-loader-size-inline)}:host([complete]){opacity:0;-webkit-transform:scale(0.75, 0.75);transform:scale(0.75, 0.75);-webkit-transform-origin:center;transform-origin:center;-webkit-transition:opacity 200ms linear 1000ms, -webkit-transform 200ms linear 1000ms;transition:opacity 200ms linear 1000ms, -webkit-transform 200ms linear 1000ms;transition:opacity 200ms linear 1000ms, transform 200ms linear 1000ms;transition:opacity 200ms linear 1000ms, transform 200ms linear 1000ms, -webkit-transform 200ms linear 1000ms}:host([complete]) .loader__svgs{opacity:0;-webkit-transform:scale(0.75, 0.75);transform:scale(0.75, 0.75);-webkit-transform-origin:center;transform-origin:center;-webkit-transition:opacity 180ms linear 800ms, -webkit-transform 180ms linear 800ms;transition:opacity 180ms linear 800ms, -webkit-transform 180ms linear 800ms;transition:opacity 180ms linear 800ms, transform 180ms linear 800ms;transition:opacity 180ms linear 800ms, transform 180ms linear 800ms, -webkit-transform 180ms linear 800ms}:host([complete]) .loader__percentage{color:var(--calcite-ui-brand);-webkit-transform:scale(1.05, 1.05);transform:scale(1.05, 1.05);-webkit-transform-origin:center;transform-origin:center;-webkit-transition:color 200ms linear, -webkit-transform 200ms linear;transition:color 200ms linear, -webkit-transform 200ms linear;transition:color 200ms linear, transform 200ms linear;transition:color 200ms linear, transform 200ms linear, -webkit-transform 200ms linear}.loader__svg--1{stroke-dasharray:27.9252444444% 139.6262222222%;-webkit-animation-duration:0.72s;animation-duration:0.72s}@-webkit-keyframes loader-offset-1{0%{stroke-dasharray:27.9252444444% 251.3272%;stroke-dashoffset:0}50%{stroke-dasharray:139.6262222222% 139.6262222222%;stroke-dashoffset:-83.7757333333%}100%{stroke-dasharray:27.9252444444% 251.3272%;stroke-dashoffset:-279.2524444444%}}@keyframes loader-offset-1{0%{stroke-dasharray:27.9252444444% 251.3272%;stroke-dashoffset:0}50%{stroke-dasharray:139.6262222222% 139.6262222222%;stroke-dashoffset:-83.7757333333%}100%{stroke-dasharray:27.9252444444% 251.3272%;stroke-dashoffset:-279.2524444444%}}.loader__svg--2{stroke-dasharray:55.8504888889% 139.6262222222%;-webkit-animation-duration:0.96s;animation-duration:0.96s}@-webkit-keyframes loader-offset-2{0%{stroke-dasharray:55.8504888889% 223.4019555556%;stroke-dashoffset:0}50%{stroke-dasharray:139.6262222222% 139.6262222222%;stroke-dashoffset:-97.7383555556%}100%{stroke-dasharray:55.8504888889% 223.4019555556%;stroke-dashoffset:-279.2524444444%}}@keyframes loader-offset-2{0%{stroke-dasharray:55.8504888889% 223.4019555556%;stroke-dashoffset:0}50%{stroke-dasharray:139.6262222222% 139.6262222222%;stroke-dashoffset:-97.7383555556%}100%{stroke-dasharray:55.8504888889% 223.4019555556%;stroke-dashoffset:-279.2524444444%}}.loader__svg--3{stroke-dasharray:13.9626222222% 139.6262222222%;-webkit-animation-duration:1.16s;animation-duration:1.16s}@-webkit-keyframes loader-offset-3{0%{stroke-dasharray:13.9626222222% 265.2898222222%;stroke-dashoffset:0}50%{stroke-dasharray:139.6262222222% 139.6262222222%;stroke-dashoffset:-76.7944222222%}100%{stroke-dasharray:13.9626222222% 265.2898222222%;stroke-dashoffset:-279.2524444444%}}@keyframes loader-offset-3{0%{stroke-dasharray:13.9626222222% 265.2898222222%;stroke-dashoffset:0}50%{stroke-dasharray:139.6262222222% 139.6262222222%;stroke-dashoffset:-76.7944222222%}100%{stroke-dasharray:13.9626222222% 265.2898222222%;stroke-dashoffset:-279.2524444444%}}@-webkit-keyframes loader-color-shift{0%{stroke:var(--calcite-ui-brand)}33%{stroke:var(--calcite-ui-brand-press)}66%{stroke:var(--calcite-ui-brand-hover)}100%{stroke:var(--calcite-ui-brand)}}@keyframes loader-color-shift{0%{stroke:var(--calcite-ui-brand)}33%{stroke:var(--calcite-ui-brand-press)}66%{stroke:var(--calcite-ui-brand-hover)}100%{stroke:var(--calcite-ui-brand)}}@-webkit-keyframes loader-clockwise{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loader-clockwise{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}";
 
 let CalciteLoader$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -14019,7 +14379,7 @@ let CalciteModal$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteModalOpen = createEvent(this, "calciteModalOpen", 7);
     this.calciteModalClose = createEvent(this, "calciteModalClose", 7);
     //--------------------------------------------------------------------------
@@ -14257,7 +14617,7 @@ let CalciteNotice$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteNoticeClose = createEvent(this, "calciteNoticeClose", 7);
     this.calciteNoticeOpen = createEvent(this, "calciteNoticeOpen", 7);
     //--------------------------------------------------------------------------
@@ -14341,7 +14701,7 @@ let CalciteOption$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteOptionChange = createEvent(this, "calciteOptionChange", 7);
     //--------------------------------------------------------------------------
     //
@@ -14420,7 +14780,7 @@ let CalciteOptionGroup$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteOptionGroupChange = createEvent(this, "calciteOptionGroupChange", 7);
     //--------------------------------------------------------------------------
     //
@@ -14472,7 +14832,7 @@ let CalcitePagination$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calcitePaginationUpdate = createEvent(this, "calcitePaginationUpdate", 7);
     this.calcitePaginationChange = createEvent(this, "calcitePaginationChange", 7);
     //--------------------------------------------------------------------------
@@ -14660,13 +15020,13 @@ const TEXT$7 = {
 };
 const HEADING_LEVEL$4 = 3;
 
-const calcitePanelCss = "@-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}:host{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;overflow:hidden;position:relative;width:100%;--calcite-min-header-height:calc(var(--calcite-icon-size) * 3);--calcite-panel-max-height:unset;--calcite-panel-width:100%;--calcite-panel-min-width:unset;--calcite-panel-max-width:unset}.header{margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:justify;align-content:space-between;color:var(--calcite-ui-text-2);}.heading{font-weight:var(--calcite-font-weight-medium);margin:0;padding:0}.header .heading{-ms-flex:1 1 auto;flex:1 1 auto;padding:0.5rem}h1.heading{font-size:var(--calcite-font-size-2);line-height:1.5rem}h2.heading{font-size:var(--calcite-font-size-1);line-height:1.5rem}h3.heading{font-size:var(--calcite-font-size-0);line-height:1.25rem}h4.heading,h5.heading{font-size:var(--calcite-font-size--1);line-height:1rem}.container{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch;background-color:var(--calcite-ui-background);width:100%;padding:0;margin:0;max-height:var(--calcite-panel-max-height);width:var(--calcite-panel-width);max-width:var(--calcite-panel-max-width);min-width:var(--calcite-panel-min-width);-webkit-transition:max-height 150ms ease-in-out, width 150ms ease-in-out;transition:max-height 150ms ease-in-out, width 150ms ease-in-out}:host([height-scale=s]){--calcite-panel-max-height:40vh}:host([height-scale=m]){--calcite-panel-max-height:60vh}:host([height-scale=l]){--calcite-panel-max-height:80vh}:host([width-scale=s]){--calcite-panel-width:calc(var(--calcite-panel-width-multiplier) * 12vw);--calcite-panel-max-width:calc(var(--calcite-panel-width-multiplier) * 300px);--calcite-panel-min-width:calc(var(--calcite-panel-width-multiplier) * 150px)}:host([width-scale=m]){--calcite-panel-width:calc(var(--calcite-panel-width-multiplier) * 20vw);--calcite-panel-max-width:calc(var(--calcite-panel-width-multiplier) * 420px);--calcite-panel-min-width:calc(var(--calcite-panel-width-multiplier) * 240px)}:host([width-scale=l]){--calcite-panel-width:calc(var(--calcite-panel-width-multiplier) * 45vw);--calcite-panel-max-width:calc(var(--calcite-panel-width-multiplier) * 680px);--calcite-panel-min-width:calc(var(--calcite-panel-width-multiplier) * 340px)}.container[hidden]{display:none}:host([loading]) .container,:host([disabled]) .container{position:relative;z-index:1}.header{border-bottom:1px solid;-ms-flex-align:stretch;align-items:stretch;background-color:var(--calcite-ui-foreground-1);-ms-flex-pack:start;justify-content:flex-start;position:-webkit-sticky;position:sticky;top:0;border-bottom-color:var(--calcite-ui-border-2);width:100%;-ms-flex:0 0 auto;flex:0 0 auto;min-height:3rem;z-index:2}.header-content{display:block;overflow:hidden;margin-right:auto;padding:1rem}.header-content .heading,.header-content .summary{padding:0;display:block;overflow:hidden;white-space:nowrap;width:100%;text-overflow:ellipsis}.header-content .heading{font-weight:var(--calcite-font-weight-medium);margin-top:0;margin-left:0;margin-right:0;margin-bottom:0.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}.header-content .heading:only-child{margin-bottom:0}.header-content .summary{color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1);line-height:1rem}.back-button{border-color:var(--calcite-ui-border-2);border-style:solid;border-width:0;border-right-width:1px}.calcite--rtl .back-button{border-right-width:0;border-left-width:1px}.header-actions{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.header-actions--end{margin-left:auto}.menu-container:only-child{margin-left:auto}.menu-button{-ms-flex-item-align:stretch;align-self:stretch;-ms-flex:0 1 auto;flex:0 1 auto;height:100%;position:relative}.menu{min-width:10rem;-ms-flex-flow:column nowrap;flex-flow:column nowrap}.content-container{-ms-flex-align:stretch;align-items:stretch;background-color:var(--calcite-ui-background);display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;overflow:auto;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-direction:column;flex-direction:column}.footer{border-top:1px solid;background-color:var(--calcite-ui-foreground-1);border-top-color:var(--calcite-ui-border-3);display:-ms-flexbox;display:flex;-ms-flex-pack:space-evenly;justify-content:space-evenly;position:-webkit-sticky;position:sticky;bottom:0;width:100%;-ms-flex:0 0 auto;flex:0 0 auto;min-height:3rem;padding:0.5rem}.calcite--rtl .header-content{margin-left:auto;margin-right:unset}.calcite--rtl .header-actions--end{margin-right:auto;margin-left:unset}.calcite--rtl .menu-container:only-child{margin-right:auto;margin-left:unset}.fab-container{display:inline-block;position:-webkit-sticky;position:sticky;margin-top:0;margin-bottom:0;margin-left:auto;margin-right:auto;padding:0.5rem;bottom:0;left:0;right:0;z-index:1}";
+const calcitePanelCss = "@-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}:host{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;overflow:hidden;position:relative;width:100%;--calcite-min-header-height:calc(var(--calcite-icon-size) * 3);--calcite-panel-max-height:unset;--calcite-panel-width:100%;--calcite-panel-min-width:unset;--calcite-panel-max-width:unset}.header{margin:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:justify;align-content:space-between;color:var(--calcite-ui-text-2);}.heading{font-weight:var(--calcite-font-weight-medium);margin:0;padding:0}.header .heading{-ms-flex:1 1 auto;flex:1 1 auto;padding:0.5rem}h1.heading{font-size:var(--calcite-font-size-2);line-height:1.5rem}h2.heading{font-size:var(--calcite-font-size-1);line-height:1.5rem}h3.heading{font-size:var(--calcite-font-size-0);line-height:1.25rem}h4.heading,h5.heading{font-size:var(--calcite-font-size--1);line-height:1rem}.container{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:stretch;align-items:stretch;background-color:var(--calcite-ui-background);width:100%;padding:0;margin:0;max-height:var(--calcite-panel-max-height);width:var(--calcite-panel-width);max-width:var(--calcite-panel-max-width);min-width:var(--calcite-panel-min-width);-webkit-transition:max-height 150ms ease-in-out, width 150ms ease-in-out;transition:max-height 150ms ease-in-out, width 150ms ease-in-out}:host([height-scale=s]){--calcite-panel-max-height:40vh}:host([height-scale=m]){--calcite-panel-max-height:60vh}:host([height-scale=l]){--calcite-panel-max-height:80vh}:host([width-scale=s]){--calcite-panel-width:calc(var(--calcite-panel-width-multiplier) * 12vw);--calcite-panel-max-width:calc(var(--calcite-panel-width-multiplier) * 300px);--calcite-panel-min-width:calc(var(--calcite-panel-width-multiplier) * 150px)}:host([width-scale=m]){--calcite-panel-width:calc(var(--calcite-panel-width-multiplier) * 20vw);--calcite-panel-max-width:calc(var(--calcite-panel-width-multiplier) * 420px);--calcite-panel-min-width:calc(var(--calcite-panel-width-multiplier) * 240px)}:host([width-scale=l]){--calcite-panel-width:calc(var(--calcite-panel-width-multiplier) * 45vw);--calcite-panel-max-width:calc(var(--calcite-panel-width-multiplier) * 680px);--calcite-panel-min-width:calc(var(--calcite-panel-width-multiplier) * 340px)}.container[hidden]{display:none}:host([loading]) .container,:host([disabled]) .container{position:relative;z-index:1}.header{border-bottom:1px solid;-ms-flex-align:stretch;align-items:stretch;background-color:var(--calcite-ui-foreground-1);-ms-flex-pack:start;justify-content:flex-start;position:-webkit-sticky;position:sticky;top:0;border-bottom-color:var(--calcite-ui-border-3);width:100%;-ms-flex:0 0 auto;flex:0 0 auto;min-height:3rem;z-index:2}.header-content{overflow:hidden;margin-right:auto;padding-left:0.75rem;padding-right:0.75rem;padding-top:1rem;padding-bottom:1rem;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.header-content .heading,.header-content .summary{padding:0;display:block;overflow:hidden;white-space:nowrap;width:100%;text-overflow:ellipsis}.header-content .heading{font-weight:var(--calcite-font-weight-medium);margin-top:0;margin-left:0;margin-right:0;margin-bottom:0.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}.header-content .heading:only-child{margin-bottom:0}.header-content .summary{color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1);line-height:1rem}.back-button{border-color:var(--calcite-ui-border-3);border-style:solid;border-width:0;border-right-width:1px}.calcite--rtl .back-button{border-right-width:0;border-left-width:1px}.header-actions{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.header-actions--end{margin-left:auto}.menu-container:only-child{margin-left:auto}.menu-button{-ms-flex-item-align:stretch;align-self:stretch;-ms-flex:0 1 auto;flex:0 1 auto;height:100%;position:relative}.menu{min-width:10rem;-ms-flex-flow:column nowrap;flex-flow:column nowrap}.content-container{-ms-flex-align:stretch;align-items:stretch;background-color:var(--calcite-ui-background);display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;overflow:auto;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-direction:column;flex-direction:column}.footer{border-top:1px solid;background-color:var(--calcite-ui-foreground-1);border-top-color:var(--calcite-ui-border-3);display:-ms-flexbox;display:flex;-ms-flex-pack:space-evenly;justify-content:space-evenly;position:-webkit-sticky;position:sticky;bottom:0;width:100%;-ms-flex:0 0 auto;flex:0 0 auto;min-height:3rem;padding:0.5rem}.calcite--rtl .header-content{margin-left:auto;margin-right:unset}.calcite--rtl .header-actions--end{margin-right:auto;margin-left:unset}.calcite--rtl .menu-container:only-child{margin-right:auto;margin-left:unset}.fab-container{display:inline-block;position:-webkit-sticky;position:sticky;margin-top:0;margin-bottom:0;margin-left:auto;margin-right:auto;padding:0.5rem;bottom:0;left:0;right:0;z-index:1}";
 
 let CalcitePanel$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calcitePanelDismissedChange = createEvent(this, "calcitePanelDismissedChange", 7);
     this.calcitePanelScroll = createEvent(this, "calcitePanelScroll", 7);
     this.calcitePanelBackClick = createEvent(this, "calcitePanelBackClick", 7);
@@ -15139,7 +15499,7 @@ let CalcitePickList$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteListChange = createEvent(this, "calciteListChange", 7);
     // --------------------------------------------------------------------------
     //
@@ -15272,7 +15632,7 @@ let CalcitePickListGroup$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
   }
   // --------------------------------------------------------------------------
   //
@@ -15332,7 +15692,7 @@ let CalcitePickListItem$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteListItemChange = createEvent(this, "calciteListItemChange", 7);
     this.calciteListItemRemove = createEvent(this, "calciteListItemRemove", 7);
     this.calciteListItemPropsChange = createEvent(this, "calciteListItemPropsChange", 7);
@@ -15495,13 +15855,13 @@ const ARIA_CONTROLS = "aria-controls";
 const ARIA_EXPANDED = "aria-expanded";
 const HEADING_LEVEL$2 = 2;
 
-const calcitePopoverCss = "@-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;position:absolute;z-index:900;-webkit-transform:scale(0);transform:scale(0)}.calcite-popper-anim{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:0.25rem}:host([data-popper-placement^=bottom]) .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}:host([data-popper-placement^=top]) .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}:host([data-popper-placement^=left]) .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}:host([data-popper-placement^=right]) .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}:host([data-popper-placement]) .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}.arrow,.arrow::before{position:absolute;width:8px;height:8px;z-index:-1}.arrow::before{content:\"\";-webkit-box-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);box-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);-webkit-transform:rotate(45deg);transform:rotate(45deg);background:var(--calcite-ui-foreground-1)}:host([data-popper-placement^=top]) .arrow{bottom:-4px}:host([data-popper-placement^=bottom]) .arrow{top:-4px}:host([data-popper-placement^=left]) .arrow{right:-4px}:host([data-popper-placement^=right]) .arrow{left:-4px}:host{pointer-events:none}:host([open]){pointer-events:initial}.calcite-popper-anim{background-color:var(--calcite-ui-foreground-1);border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);border-radius:0.25rem}.arrow::before{outline:1px solid var(--calcite-ui-border-3)}.header{border-width:0;border-bottom-width:1px;border-bottom-color:var(--calcite-ui-border-3);border-style:solid;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-align:stretch;align-items:stretch;background-color:var(--calcite-ui-foreground-1);-ms-flex-pack:start;justify-content:flex-start}.heading{display:block;-ms-flex:1 1 auto;flex:1 1 auto;font-weight:var(--calcite-font-weight-medium);margin:0;padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem;-ms-flex-item-align:center;align-self:center;color:var(--calcite-ui-text-1);font-size:var(--calcite-font-size-0);line-height:1.375;white-space:normal;word-wrap:break-word;word-break:break-word}.container{background-color:var(--calcite-ui-foreground-1);position:relative;display:-ms-flexbox;display:flex;overflow:hidden;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-direction:row;flex-direction:row;height:100%;color:var(--calcite-ui-text-1);border-radius:0.25rem}.container.has-header{-ms-flex-direction:column;flex-direction:column}.content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-item-align:center;align-self:center;height:100%}.calcite--rtl .close-button{border-radius:0.25rem 0 0 0.25rem}::slotted(calcite-panel),::slotted(calcite-flow){height:100%}";
+const calcitePopoverCss = "@-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;position:absolute;z-index:900;-webkit-transform:scale(0);transform:scale(0)}.calcite-popper-anim{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:0.25rem}:host([data-popper-placement^=bottom]) .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}:host([data-popper-placement^=top]) .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}:host([data-popper-placement^=left]) .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}:host([data-popper-placement^=right]) .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}:host([data-popper-placement]) .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}.arrow,.arrow::before{position:absolute;width:8px;height:8px;z-index:-1}.arrow::before{content:\"\";-webkit-box-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);box-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);-webkit-transform:rotate(45deg);transform:rotate(45deg);background:var(--calcite-ui-foreground-1)}:host([data-popper-placement^=top]) .arrow{bottom:-4px}:host([data-popper-placement^=bottom]) .arrow{top:-4px}:host([data-popper-placement^=left]) .arrow{right:-4px}:host([data-popper-placement^=right]) .arrow{left:-4px}:host{pointer-events:none}:host([open]){pointer-events:initial}.calcite-popper-anim{background-color:var(--calcite-ui-foreground-1);border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);border-radius:0.25rem}.arrow::before{outline:1px solid var(--calcite-ui-border-3)}.header{border-width:0;border-bottom-width:1px;border-bottom-color:var(--calcite-ui-border-3);border-style:solid;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-align:stretch;align-items:stretch;background-color:var(--calcite-ui-foreground-1);-ms-flex-pack:start;justify-content:flex-start}.heading{display:block;-ms-flex:1 1 auto;flex:1 1 auto;font-weight:var(--calcite-font-weight-medium);margin:0;padding-left:1rem;padding-right:1rem;padding-top:0.75rem;padding-bottom:0.75rem;-ms-flex-item-align:center;align-self:center;color:var(--calcite-ui-text-1);font-size:var(--calcite-font-size-0);line-height:1.375;white-space:normal;word-wrap:break-word;word-break:break-word}.container{background-color:var(--calcite-ui-foreground-1);position:relative;display:-ms-flexbox;display:flex;overflow:hidden;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-direction:row;flex-direction:row;height:100%;color:var(--calcite-ui-text-1);border-radius:0.25rem}.container.has-header{-ms-flex-direction:column;flex-direction:column}.content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-item-align:center;align-self:center;height:100%;width:100%}.calcite--rtl .close-button{border-radius:0.25rem 0 0 0.25rem}::slotted(calcite-panel),::slotted(calcite-flow){height:100%}";
 
 let CalcitePopover$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calcitePopoverClose = createEvent(this, "calcitePopoverClose", 7);
     this.calcitePopoverOpen = createEvent(this, "calcitePopoverOpen", 7);
     // --------------------------------------------------------------------------
@@ -15648,7 +16008,7 @@ let CalcitePopover$1 = class extends HTMLElement {
     const { popper, el, placement } = this;
     const modifiers = this.getModifiers();
     popper
-      ? updatePopper({
+      ? await updatePopper({
         el,
         modifiers,
         placement,
@@ -15771,7 +16131,7 @@ let CalcitePopoverManager$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -15837,7 +16197,7 @@ let CalciteProgress$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     /** Use indeterminate if finding actual progress value is impossible */
     this.type = "determinate";
     /** Fraction completed, in the range of 0 - 1.0 */
@@ -15864,7 +16224,7 @@ let CalciteRadio$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -15901,15 +16261,16 @@ let CalciteRadio$1 = class extends HTMLElement {
 };
 
 const CSS$e = {
-  container: "calcite-radio-button__container"
+  container: "container"
 };
 
-const calciteRadioButtonCss = "@-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)}}.sc-calcite-radio-button:root{--calcite-animation-timing:300ms}.calcite-animate.sc-calcite-radio-button{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.sc-calcite-radio-button{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down.sc-calcite-radio-button{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up.sc-calcite-radio-button{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale.sc-calcite-radio-button{-webkit-animation-name:in-scale;animation-name:in-scale}.sc-calcite-radio-button:root{--calcite-popper-transition:150ms ease-in-out}[hidden].sc-calcite-radio-button-h{display:none}.sc-calcite-radio-button-h{cursor:pointer;display:block}.sc-calcite-radio-button-h .calcite-radio-button__container.sc-calcite-radio-button{position:relative}[disabled].sc-calcite-radio-button-h{cursor:pointer}";
+const calciteRadioButtonCss = "@-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{cursor:pointer;display:block}:host .container{position:relative;outline:2px solid transparent;outline-offset:2px}:host([disabled]){cursor:pointer}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
 
 let CalciteRadioButton$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.__attachShadow();
     this.calciteInternalRadioButtonBlur = createEvent(this, "calciteInternalRadioButtonBlur", 7);
     this.calciteRadioButtonChange = createEvent(this, "calciteRadioButtonChange", 7);
     this.calciteInternalRadioButtonCheckedChange = createEvent(this, "calciteInternalRadioButtonCheckedChange", 7);
@@ -15951,31 +16312,77 @@ let CalciteRadioButton$1 = class extends HTMLElement {
         item.focused = selected;
       });
     };
-    this.toggle = () => {
+    this.queryButtons = () => {
+      return Array.from(this.rootNode.querySelectorAll("calcite-radio-button:not([hidden]")).filter((radioButton) => radioButton.name === this.name);
+    };
+    this.isDefaultSelectable = () => {
+      const radioButtons = this.queryButtons();
+      return !radioButtons.some((radioButton) => radioButton.checked) && radioButtons[0] === this.el;
+    };
+    this.check = () => {
+      if (this.disabled) {
+        return;
+      }
       this.uncheckAllRadioButtonsInGroup();
       this.checked = true;
       this.focused = true;
       this.calciteRadioButtonChange.emit();
     };
     this.clickHandler = () => {
-      this.toggle();
-    };
-    this.setInputEl = (el) => {
-      this.inputEl = el;
+      this.check();
     };
-    this.formResetHandler = () => {
-      var _a;
-      this.checked = this.initialChecked;
-      this.initialChecked && ((_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setAttribute("checked", ""));
+    this.setContainerEl = (el) => {
+      this.containerEl = el;
     };
-    this.hideInputEl = () => {
-      this.inputEl.style.cssText = hiddenInputStyle;
+    this.handleKeyDown = (event) => {
+      const keys = ["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", " "];
+      const key = getKey(event.key);
+      const { el } = this;
+      if (keys.indexOf(key) === -1) {
+        return;
+      }
+      if (key === " ") {
+        this.check();
+        return;
+      }
+      let adjustedKey = key;
+      if (getElementDir(el) === "rtl") {
+        if (key === "ArrowRight") {
+          adjustedKey = "ArrowLeft";
+        }
+        if (key === "ArrowLeft") {
+          adjustedKey = "ArrowRight";
+        }
+      }
+      const radioButtons = Array.from(this.rootNode.querySelectorAll("calcite-radio-button:not([hidden]")).filter((radioButton) => radioButton.name === this.name);
+      let currentIndex = 0;
+      const radioButtonsLength = radioButtons.length;
+      radioButtons.some((item, index) => {
+        if (item.checked) {
+          currentIndex = index;
+          return true;
+        }
+      });
+      switch (adjustedKey) {
+        case "ArrowLeft":
+        case "ArrowUp":
+          event.preventDefault();
+          this.selectItem(radioButtons, getRoundRobinIndex(Math.max(currentIndex - 1, -1), radioButtonsLength));
+          return;
+        case "ArrowRight":
+        case "ArrowDown":
+          event.preventDefault();
+          this.selectItem(radioButtons, getRoundRobinIndex(currentIndex + 1, radioButtonsLength));
+          return;
+        default:
+          return;
+      }
     };
-    this.onInputBlur = () => {
+    this.onContainerBlur = () => {
       this.focused = false;
       this.calciteInternalRadioButtonBlur.emit();
     };
-    this.onInputFocus = () => {
+    this.onContainerFocus = () => {
       this.focused = true;
       this.calciteInternalRadioButtonFocus.emit();
     };
@@ -15984,44 +16391,15 @@ let CalciteRadioButton$1 = class extends HTMLElement {
     if (newChecked) {
       this.uncheckOtherRadioButtonsInGroup();
     }
-    if (this.inputEl) {
-      this.inputEl.checked = newChecked;
-    }
     this.calciteInternalRadioButtonCheckedChange.emit(newChecked);
   }
-  disabledChanged(disabled) {
-    this.inputEl.disabled = disabled;
-  }
-  focusedChanged(focused) {
-    if (!this.inputEl) {
-      return;
-    }
-    if (focused && !this.el.hasAttribute("hidden")) {
-      this.inputEl.focus();
-    }
-    else {
-      this.inputEl.blur();
-    }
-  }
-  hiddenChanged(newHidden) {
-    this.inputEl.hidden = newHidden;
-  }
-  nameChanged(newName) {
-    if (this.name === newName) {
-      return;
-    }
-    if (this.inputEl) {
-      this.inputEl.name = newName;
-    }
+  nameChanged() {
     this.checkLastRadioButton();
     const currentValue = this.rootNode.querySelector(`input[name="${this.name}"]:checked`);
     if (!(currentValue === null || currentValue === void 0 ? void 0 : currentValue.value)) {
       this.uncheckAllRadioButtonsInGroup();
     }
   }
-  requiredChanged(required) {
-    this.inputEl.required = required;
-  }
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -16029,7 +16407,7 @@ let CalciteRadioButton$1 = class extends HTMLElement {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    focusElement(this.inputEl);
+    focusElement(this.containerEl);
   }
   onLabelClick(event) {
     if (!this.disabled && !this.hidden) {
@@ -16047,7 +16425,7 @@ let CalciteRadioButton$1 = class extends HTMLElement {
     }
   }
   checkLastRadioButton() {
-    const radioButtons = Array.from(this.rootNode.querySelectorAll("calcite-radio-button")).filter((radioButton) => radioButton.name === this.name);
+    const radioButtons = this.queryButtons();
     const checkedRadioButtons = radioButtons.filter((radioButton) => radioButton.checked);
     if ((checkedRadioButtons === null || checkedRadioButtons === void 0 ? void 0 : checkedRadioButtons.length) > 1) {
       const lastCheckedRadioButton = checkedRadioButtons[checkedRadioButtons.length - 1];
@@ -16064,16 +16442,17 @@ let CalciteRadioButton$1 = class extends HTMLElement {
     this.calciteInternalRadioButtonCheckedChange.emit();
   }
   uncheckAllRadioButtonsInGroup() {
-    const otherRadioButtons = Array.from(this.rootNode.querySelectorAll("calcite-radio-button")).filter((radioButton) => radioButton.name === this.name);
-    otherRadioButtons.forEach((otherRadioButton) => {
-      if (otherRadioButton.checked) {
-        otherRadioButton.checked = false;
-        otherRadioButton.focused = false;
+    const radioButtons = this.queryButtons();
+    radioButtons.forEach((radioButton) => {
+      if (radioButton.checked) {
+        radioButton.checked = false;
+        radioButton.focused = false;
       }
     });
   }
   uncheckOtherRadioButtonsInGroup() {
-    const otherRadioButtons = Array.from(this.rootNode.querySelectorAll("calcite-radio-button")).filter((radioButton) => radioButton.name === this.name && radioButton.guid !== this.guid);
+    const radioButtons = this.queryButtons();
+    const otherRadioButtons = radioButtons.filter((radioButton) => radioButton.guid !== this.guid);
     otherRadioButtons.forEach((otherRadioButton) => {
       if (otherRadioButton.checked) {
         otherRadioButton.checked = false;
@@ -16100,28 +16479,20 @@ let CalciteRadioButton$1 = class extends HTMLElement {
   connectedCallback() {
     this.rootNode = this.el.getRootNode();
     this.guid = this.el.id || `calcite-radio-button-${guid()}`;
-    this.initialChecked = this.checked;
     if (this.name) {
       this.checkLastRadioButton();
     }
-    const form = closestElementCrossShadowBoundary(this.el, "form");
-    if (form) {
-      form.addEventListener("reset", this.formResetHandler);
-    }
     connectLabel(this);
+    connectForm(this);
   }
   componentDidLoad() {
-    this.hideInputEl();
     if (this.focused) {
-      this.inputEl.focus();
+      this.containerEl.focus();
     }
   }
   disconnectedCallback() {
-    const form = closestElementCrossShadowBoundary(this.el, "form");
-    if (form) {
-      form.removeEventListener("reset", this.formResetHandler);
-    }
     disconnectLabel(this);
+    disconnectForm(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -16129,18 +16500,12 @@ let CalciteRadioButton$1 = class extends HTMLElement {
   //
   // --------------------------------------------------------------------------
   render() {
-    var _a;
-    const value = (_a = this.value) === null || _a === void 0 ? void 0 : _a.toString();
-    return (h(Host, { onClick: this.clickHandler }, h("div", { class: CSS$e.container }, 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 }))));
+    return (h(Host, { onClick: this.clickHandler, onKeyDown: this.handleKeyDown }, h("div", { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), class: CSS$e.container, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, ref: this.setContainerEl, role: "radio", tabIndex: this.checked || this.isDefaultSelectable() ? 0 : -1 }, h("calcite-radio", { checked: this.checked, disabled: this.disabled, focused: this.focused, hidden: this.hidden, hovered: this.hovered, scale: this.scale })), h(HiddenFormInputSlot, { component: this })));
   }
   get el() { return this; }
   static get watchers() { return {
     "checked": ["checkedChanged"],
-    "disabled": ["disabledChanged"],
-    "focused": ["focusedChanged"],
-    "hidden": ["hiddenChanged"],
-    "name": ["nameChanged"],
-    "required": ["requiredChanged"]
+    "name": ["nameChanged"]
   }; }
   static get style() { return calciteRadioButtonCss; }
 };
@@ -16151,7 +16516,7 @@ let CalciteRadioButtonGroup$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteRadioButtonGroupChange = createEvent(this, "calciteRadioButtonGroupChange", 7);
     //--------------------------------------------------------------------------
     //
@@ -16232,13 +16597,13 @@ let CalciteRadioButtonGroup$1 = class extends HTMLElement {
   static get style() { return calciteRadioButtonGroupCss; }
 };
 
-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}";
+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}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
 
 let CalciteRadioGroup$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteRadioGroupChange = createEvent(this, "calciteRadioGroupChange", 7);
     //--------------------------------------------------------------------------
     //
@@ -16249,10 +16614,18 @@ let CalciteRadioGroup$1 = class extends HTMLElement {
     this.appearance = "solid";
     /** is the radio group disabled  */
     this.disabled = false;
+    /**
+     * When true, makes the component required for form-submission.
+     *
+     * @internal
+     */
+    this.required = false;
     /** specify the layout of the radio group, defaults to horizontal */
     this.layout = "horizontal";
     /** The scale of the radio group */
     this.scale = "m";
+    /** The value of the selectedItem */
+    this.value = null;
     /** specify the width of the group, defaults to auto */
     this.width = "auto";
     //--------------------------------------------------------------------------
@@ -16265,17 +16638,13 @@ let CalciteRadioGroup$1 = class extends HTMLElement {
         this.selectItem(event.target);
       }
     };
-    this.hiddenInput = (() => {
-      const input = document.createElement("input");
-      input.type = "hidden";
-      this.el.appendChild(input);
-      return input;
-    })();
   }
-  handleNameChange(value) {
-    this.hiddenInput.name = value;
+  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;
     }
@@ -16307,23 +16676,18 @@ let CalciteRadioGroup$1 = class extends HTMLElement {
     else if (items[0]) {
       items[0].tabIndex = 0;
     }
-    const { hiddenInput, name } = this;
-    if (name) {
-      hiddenInput.name = name;
-    }
-    if (lastChecked) {
-      hiddenInput.value = lastChecked.value;
-    }
     connectLabel(this);
+    connectForm(this);
   }
   disconnectedCallback() {
     disconnectLabel(this);
+    disconnectForm(this);
   }
   componentDidLoad() {
     this.hasLoaded = true;
   }
   render() {
-    return (h(Host, { onClick: this.handleClick, role: "radiogroup", tabIndex: this.disabled ? -1 : null }, h("slot", null)));
+    return (h(Host, { onClick: this.handleClick, role: "radiogroup", tabIndex: this.disabled ? -1 : null }, h("slot", null), h(HiddenFormInputSlot, { component: this })));
   }
   handleSelected(event) {
     // only fire after initial setup to prevent semi-infinite loops
@@ -16415,17 +16779,13 @@ let CalciteRadioGroup$1 = class extends HTMLElement {
       }
     });
     this.selectedItem = match;
-    this.syncWithInputProxy(match);
     if (Build.isBrowser && match) {
       match.focus();
     }
   }
-  syncWithInputProxy(item) {
-    this.hiddenInput.value = item ? item.value : "";
-  }
   get el() { return this; }
   static get watchers() { return {
-    "name": ["handleNameChange"],
+    "value": ["valueHandler"],
     "selectedItem": ["handleSelectedItemChange"]
   }; }
   static get style() { return calciteRadioGroupCss; }
@@ -16444,7 +16804,7 @@ let CalciteRadioGroupItem$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteRadioGroupItemChange = createEvent(this, "calciteRadioGroupItemChange", 7);
     //--------------------------------------------------------------------------
     //
@@ -16538,13 +16898,13 @@ const TEXT$4 = {
   stars: "Stars: ${num}"
 };
 
-const calciteRatingCss = "@-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;-ms-flex-align:center;align-items:center;position:relative;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content}:host([scale=s]){height:1.5rem;--calcite-rating-spacing-unit:0.25rem}:host([scale=m]){height:2rem;--calcite-rating-spacing-unit:0.5rem}:host([scale=l]){height:2.75rem;--calcite-rating-spacing-unit:0.75rem}:host([disabled]){pointer-events:none;opacity:0.5}:host([read-only]){pointer-events:none}.fieldset{padding:0;margin:0;border-width:0;display:-ms-flexbox;display:flex}.wrapper{display:inline-block;margin-right:var(--calcite-rating-spacing-unit)}.calcite--rtl .wrapper{margin-right:0;margin-left:var(--calcite-rating-spacing-unit)}.star{position:relative;display:-ms-flexbox;display:flex;cursor:pointer;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;color:var(--calcite-ui-border-input);-webkit-transition:150ms ease-in-out;transition:150ms ease-in-out;-webkit-transform:scale(1);transform:scale(1)}.star:active{-webkit-transform:scale(1.1);transform:scale(1.1)}.focused{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}.average,.fraction{color:var(--calcite-ui-warning)}.hovered,.selected,:host([read-only]) .average,:host([read-only]) .fraction{color:var(--calcite-ui-brand)}.hovered:not(.selected){-webkit-transform:scale(0.9);transform:scale(0.9)}:host .fraction{position:absolute;overflow:hidden;pointer-events:none;top:0;left:0;-webkit-transition:150ms ease-in-out;transition:150ms ease-in-out}.calcite--rtl .fraction{right:0;left:auto}calcite-chip{cursor:default;pointer-events:none}.number--average{font-weight:var(--calcite-font-weight-bold)}.number--count{color:var(--calcite-ui-text-2);font-style:italic}.number--count:not(:first-child){margin-left:var(--calcite-rating-spacing-unit)}.calcite--rtl .number--count:not(:first-child){margin-left:0;margin-right:var(--calcite-rating-spacing-unit)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}";
+const calciteRatingCss = "@-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;-ms-flex-align:center;align-items:center;position:relative;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content}:host([scale=s]){height:1.5rem;--calcite-rating-spacing-unit:0.25rem}:host([scale=m]){height:2rem;--calcite-rating-spacing-unit:0.5rem}:host([scale=l]){height:2.75rem;--calcite-rating-spacing-unit:0.75rem}:host([disabled]){pointer-events:none;opacity:0.5}:host([read-only]){pointer-events:none}.fieldset{padding:0;margin:0;border-width:0;display:-ms-flexbox;display:flex}.wrapper{display:inline-block;margin-right:var(--calcite-rating-spacing-unit)}.calcite--rtl .wrapper{margin-right:0;margin-left:var(--calcite-rating-spacing-unit)}.star{position:relative;display:-ms-flexbox;display:flex;cursor:pointer;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;color:var(--calcite-ui-border-input);-webkit-transition:150ms ease-in-out;transition:150ms ease-in-out;-webkit-transform:scale(1);transform:scale(1)}.star:active{-webkit-transform:scale(1.1);transform:scale(1.1)}.focused{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}.average,.fraction{color:var(--calcite-ui-warning)}.hovered,.selected,:host([read-only]) .average,:host([read-only]) .fraction{color:var(--calcite-ui-brand)}.hovered:not(.selected){-webkit-transform:scale(0.9);transform:scale(0.9)}:host .fraction{position:absolute;overflow:hidden;pointer-events:none;top:0;left:0;-webkit-transition:150ms ease-in-out;transition:150ms ease-in-out}.calcite--rtl .fraction{right:0;left:auto}calcite-chip{cursor:default;pointer-events:none}.number--average{font-weight:var(--calcite-font-weight-bold)}.number--count{color:var(--calcite-ui-text-2);font-style:italic}.number--count:not(:first-child){margin-left:var(--calcite-rating-spacing-unit)}.calcite--rtl .number--count:not(:first-child){margin-left:0;margin-right:var(--calcite-rating-spacing-unit)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
 
 let CalciteRating$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteRatingChange = createEvent(this, "calciteRatingChange", 7);
     // --------------------------------------------------------------------------
     //
@@ -16569,6 +16929,12 @@ let CalciteRating$1 = class extends HTMLElement {
      * @default "Stars: ${num}"
      */
     this.intlStars = TEXT$4.stars;
+    /**
+     * When true, makes the component required for form-submission.
+     *
+     * @internal
+     */
+    this.required = false;
     this.guid = `calcite-ratings-${guid()}`;
   }
   //--------------------------------------------------------------------------
@@ -16578,9 +16944,11 @@ let CalciteRating$1 = class extends HTMLElement {
   //--------------------------------------------------------------------------
   connectedCallback() {
     connectLabel(this);
+    connectForm(this);
   }
   disconnectedCallback() {
     disconnectLabel(this);
+    disconnectForm(this);
   }
   //--------------------------------------------------------------------------
   //
@@ -16615,7 +16983,7 @@ let CalciteRating$1 = class extends HTMLElement {
     const { intlRating, showChip, scale, count, average } = this;
     const dir = getElementDir(this.el);
     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));
+      count.toString(), ")"))) : null, h(HiddenFormInputSlot, { component: this })));
   }
   //--------------------------------------------------------------------------
   //
@@ -16656,7 +17024,7 @@ let CalciteScrim$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -16694,7 +17062,7 @@ const CSS$b = {
   select: "select"
 };
 
-const calciteSelectCss = "@-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}: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-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;position:relative;width:var(--select-width)}:host([scale=s]){height:1.5rem;--calcite-select-font-size:var(--calcite-font-size--2);--calcite-select-spacing:0 2rem 0 0.5rem;--calcite-select-spacing-rtl:0 0.5rem 0 2rem}:host([scale=s]) .icon-container{padding-left:0.5rem;padding-right:0.5rem}:host([scale=m]){height:2rem;--calcite-select-font-size:var(--calcite-font-size--1);--calcite-select-spacing:0 2.5rem 0 0.75rem;--calcite-select-spacing-rtl:0 0.75rem 0 2.5rem}:host([scale=m]) .icon-container{padding-left:0.75rem;padding-right:0.75rem}:host([scale=l]){height:44px;--calcite-select-font-size:var(--calcite-font-size-0);--calcite-select-spacing:0 3rem 0 1rem;--calcite-select-spacing-rtl:0 1rem 0 3rem}:host([scale=l]) .icon-container{padding-left:1rem;padding-right:1rem}:host([width=auto]){width:auto}:host([width=half]){width:50%}:host([width=full]){width:100%}.select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:1px;border-style:solid;border-right-width:0;background-color:var(--calcite-ui-foreground-1);border-color:var(--calcite-ui-border-input);border-radius:0;color:var(--calcite-ui-text-2);cursor:pointer;font-family:inherit;margin:0;width:100%;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--calcite-select-font-size);padding:var(--calcite-select-spacing)}.select:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.select:hover{background-color:var(--calcite-ui-foreground-2)}.select.calcite--rtl{border-width:1px;border-color:var(--calcite-ui-border-input);padding:var(--calcite-select-spacing-rtl)}select:disabled{border-color:var(--calcite-ui-border-input);--bg-opacity:1}:host([disabled]){pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}.icon-container{-ms-flex-align:center;align-items:center;background-color:transparent;border-width:0;border-right-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);border-left-width:0;color:var(--calcite-ui-text-2);display:-ms-flexbox;display:flex;pointer-events:none;position:absolute;right:0;top:0;bottom:0}.icon-container.calcite--rtl{border-left-width:1px;border-right-width:0;left:0;right:unset}.select:focus~.icon-container{border-color:transparent}";
+const calciteSelectCss = "@-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}: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-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;position:relative;width:var(--select-width)}:host([scale=s]){height:1.5rem;--calcite-select-font-size:var(--calcite-font-size--2);--calcite-select-spacing:0 2rem 0 0.5rem;--calcite-select-spacing-rtl:0 0.5rem 0 2rem}:host([scale=s]) .icon-container{padding-left:0.5rem;padding-right:0.5rem}:host([scale=m]){height:2rem;--calcite-select-font-size:var(--calcite-font-size--1);--calcite-select-spacing:0 2.5rem 0 0.75rem;--calcite-select-spacing-rtl:0 0.75rem 0 2.5rem}:host([scale=m]) .icon-container{padding-left:0.75rem;padding-right:0.75rem}:host([scale=l]){height:44px;--calcite-select-font-size:var(--calcite-font-size-0);--calcite-select-spacing:0 3rem 0 1rem;--calcite-select-spacing-rtl:0 1rem 0 3rem}:host([scale=l]) .icon-container{padding-left:1rem;padding-right:1rem}:host([width=auto]){width:auto}:host([width=half]){width:50%}:host([width=full]){width:100%}.select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:1px;border-style:solid;border-right-width:0;background-color:var(--calcite-ui-foreground-1);border-color:var(--calcite-ui-border-input);border-radius:0;color:var(--calcite-ui-text-2);cursor:pointer;font-family:inherit;margin:0;width:100%;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--calcite-select-font-size);padding:var(--calcite-select-spacing)}.select:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.select:hover{background-color:var(--calcite-ui-foreground-2)}.select.calcite--rtl{border-width:1px;border-color:var(--calcite-ui-border-input);padding:var(--calcite-select-spacing-rtl)}select:disabled{border-color:var(--calcite-ui-border-input);--bg-opacity:1}:host([disabled]){pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}.icon-container{-ms-flex-align:center;align-items:center;background-color:transparent;border-width:0;border-right-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);border-left-width:0;color:var(--calcite-ui-text-2);display:-ms-flexbox;display:flex;pointer-events:none;position:absolute;right:0;top:0;bottom:0}.icon-container.calcite--rtl{border-left-width:1px;border-right-width:0;left:0;right:unset}.select:focus~.icon-container{border-color:transparent}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
 
 function isOption(optionOrGroup) {
   return optionOrGroup.tagName === "CALCITE-OPTION";
@@ -16706,7 +17074,7 @@ let CalciteSelect$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteSelectChange = createEvent(this, "calciteSelectChange", 7);
     //--------------------------------------------------------------------------
     //
@@ -16717,10 +17085,18 @@ let CalciteSelect$1 = class extends HTMLElement {
      * When true, it prevents the option from being selected.
      */
     this.disabled = false;
+    /**
+     * When true, makes the component required for form-submission.
+     *
+     * @internal
+     */
+    this.required = false;
     /**
      * The component scale.
      */
     this.scale = "m";
+    /** The value of the selectedOption */
+    this.value = null;
     /**
      * The component width.
      */
@@ -16733,7 +17109,7 @@ let CalciteSelect$1 = class extends HTMLElement {
       requestAnimationFrame(() => this.emitChangeEvent());
     };
     this.populateInternalSelect = () => {
-      const optionsAndGroups = Array.from(this.el.children);
+      const optionsAndGroups = Array.from(this.el.children).filter((child) => child.tagName === "CALCITE-OPTION" || child.tagName === "CALCITE-OPTION-GROUP");
       this.clearInternalSelect();
       optionsAndGroups.forEach((optionOrGroup) => { var _a; return (_a = this.selectEl) === null || _a === void 0 ? void 0 : _a.append(this.toNativeElement(optionOrGroup)); });
     };
@@ -16747,6 +17123,13 @@ let CalciteSelect$1 = class extends HTMLElement {
       this.calciteSelectChange.emit();
     };
   }
+  valueHandler(value) {
+    const items = this.el.querySelectorAll("calcite-option");
+    items.forEach((item) => (item.selected = item.value === value));
+  }
+  selectedOptionHandler(selectedOption) {
+    this.value = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value;
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -16760,11 +17143,17 @@ let CalciteSelect$1 = class extends HTMLElement {
       childList: true
     });
     connectLabel(this);
+    connectForm(this);
   }
   disconnectedCallback() {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     disconnectLabel(this);
+    disconnectForm(this);
+  }
+  componentDidLoad() {
+    var _a, _b;
+    afterConnectDefaultValueSet(this, (_b = (_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "");
   }
   //--------------------------------------------------------------------------
   //
@@ -16865,9 +17254,13 @@ let CalciteSelect$1 = class extends HTMLElement {
   }
   render() {
     const dir = getElementDir(this.el);
-    return (h(Fragment, null, h("select", { "aria-label": this.label, class: { [CSS$b.select]: true, [CSS_UTILITY.rtl]: dir === "rtl" }, disabled: this.disabled, onChange: this.handleInternalSelectChange, ref: this.storeSelectRef }, h("slot", null)), this.renderChevron(dir)));
+    return (h(Fragment, null, h("select", { "aria-label": this.label, class: { [CSS$b.select]: true, [CSS_UTILITY.rtl]: dir === "rtl" }, disabled: this.disabled, onChange: this.handleInternalSelectChange, ref: this.storeSelectRef }, h("slot", null)), this.renderChevron(dir), h(HiddenFormInputSlot, { component: this })));
   }
   get el() { return this; }
+  static get watchers() { return {
+    "value": ["valueHandler"],
+    "selectedOption": ["selectedOptionHandler"]
+  }; }
   static get style() { return calciteSelectCss; }
 };
 
@@ -16886,13 +17279,13 @@ const SLOTS$7 = {
   footer: "footer"
 };
 
-const calciteShellCss = "@-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}:host{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{width:100%;height:100%;position:absolute;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden;top:0;right:0;bottom:0;left:0;--calcite-shell-tip-spacing:26vw}.main{height:100%;width:100%;-ms-flex:1 1 auto;flex:1 1 auto;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;position:relative;border-width:0;border-top-width:1px;border-bottom-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);-ms-flex-pack:justify;justify-content:space-between;overflow:hidden}.main--reversed{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.content{display:-ms-flexbox;display:flex;height:100%;overflow:auto;width:100%;border-width:0;border-left-width:1px;border-right-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);-ms-flex-flow:column nowrap;flex-flow:column nowrap}.content ::slotted(calcite-shell-center-row),.content ::slotted(calcite-panel),.content ::slotted(calcite-flow){-ms-flex-item-align:stretch;align-self:stretch;-ms-flex:1 1 auto;flex:1 1 auto;max-height:unset}.content--behind{border-width:0;position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;display:initial}::slotted(calcite-shell-center-row){width:unset}::slotted(.header .heading){font-weight:var(--calcite-font-weight-normal);font-size:var(--calcite-font-size--2);line-height:1.375}::slotted(calcite-shell-panel),::slotted(calcite-shell-center-row){position:relative;z-index:1}slot[name=center-row]::slotted(calcite-shell-center-row:not([detached])){border-left-width:1px;border-right-width:1px;border-color:var(--calcite-ui-border-3)}::slotted(calcite-tip-manager){border-radius:0.25rem;-webkit-box-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);box-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);position:absolute;-webkit-animation:in-up var(--calcite-animation-timing) ease-in-out;animation:in-up var(--calcite-animation-timing) ease-in-out;-webkit-box-sizing:border-box;box-sizing:border-box;bottom:0.5rem;left:var(--calcite-shell-tip-spacing);right:var(--calcite-shell-tip-spacing);z-index:2}";
+const calciteShellCss = "@-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}:host{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{width:100%;height:100%;position:absolute;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden;top:0;right:0;bottom:0;left:0;--calcite-shell-tip-spacing:26vw}.main{height:100%;width:100%;-ms-flex:1 1 auto;flex:1 1 auto;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;position:relative;-ms-flex-pack:justify;justify-content:space-between;overflow:hidden}.main--reversed{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;height:100%;overflow:auto;width:100%}.content ::slotted(calcite-shell-center-row),.content ::slotted(calcite-panel),.content ::slotted(calcite-flow){-ms-flex-item-align:stretch;align-self:stretch;-ms-flex:1 1 auto;flex:1 1 auto;max-height:unset}.content--behind{border-width:0;position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;display:initial}::slotted(calcite-shell-center-row){width:unset}::slotted(.header .heading){font-weight:var(--calcite-font-weight-normal);font-size:var(--calcite-font-size--2);line-height:1.375}::slotted(calcite-shell-panel),::slotted(calcite-shell-center-row){position:relative;z-index:1}::slotted(calcite-panel),::slotted(calcite-flow){border-width:1px;border-color:var(--calcite-ui-border-3);border-style:solid;border-left-width:0;border-right-width:0}slot[name=center-row]::slotted(calcite-shell-center-row:not([detached])){border-left-width:1px;border-right-width:1px;border-color:var(--calcite-ui-border-3)}::slotted(calcite-tip-manager){border-radius:0.25rem;-webkit-box-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);box-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);position:absolute;-webkit-animation:in-up var(--calcite-animation-timing) ease-in-out;animation:in-up var(--calcite-animation-timing) ease-in-out;-webkit-box-sizing:border-box;box-sizing:border-box;bottom:0.5rem;left:var(--calcite-shell-tip-spacing);right:var(--calcite-shell-tip-spacing);z-index:2}";
 
 let CalciteShell$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -16959,7 +17352,7 @@ let CalciteShellCenterRow$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -17000,6 +17393,7 @@ let CalciteShellCenterRow$1 = class extends HTMLElement {
 };
 
 const CSS$8 = {
+  container: "container",
   content: "content",
   contentHeader: "content__header",
   contentBody: "content__body",
@@ -17010,13 +17404,13 @@ const SLOTS$5 = {
   header: "header"
 };
 
-const calciteShellPanelCss = "@-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}:host{-webkit-box-sizing:border-box;box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}:host *{-webkit-box-sizing:border-box;box-sizing:border-box}:root{--calcite-popper-transition:150ms ease-in-out}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;background-color:transparent;pointer-events:none;--calcite-shell-panel-detached-max-height:unset}::slotted(calcite-panel),::slotted(calcite-flow){-ms-flex:1 1 auto;flex:1 1 auto;height:100%;width:100%;max-height:unset;max-width:unset}::slotted(.calcite-match-height){display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;overflow:hidden}.content{-ms-flex-align:stretch;align-items:stretch;-ms-flex-item-align:stretch;align-self:stretch;background-color:var(--calcite-ui-background);display:-ms-flexbox;display:flex;padding:0;pointer-events:auto;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;width:var(--calcite-shell-panel-width);max-width:var(--calcite-shell-panel-max-width);min-width:var(--calcite-shell-panel-min-width);-webkit-transition:max-height 150ms ease-in-out, max-width 150ms ease-in-out;transition:max-height 150ms ease-in-out, max-width 150ms ease-in-out}.content__header{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex:0 1 auto;flex:0 1 auto;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:stretch;align-items:stretch}.content__body{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-direction:column;flex-direction:column;overflow:hidden}:host([width-scale=s]) .content{--calcite-shell-panel-width:calc(var(--calcite-panel-width-multiplier) * 12vw);--calcite-shell-panel-max-width:calc(var(--calcite-panel-width-multiplier) * 300px);--calcite-shell-panel-min-width:calc(var(--calcite-panel-width-multiplier) * 150px)}:host([width-scale=m]) .content{--calcite-shell-panel-width:calc(var(--calcite-panel-width-multiplier) * 20vw);--calcite-shell-panel-max-width:calc(var(--calcite-panel-width-multiplier) * 420px);--calcite-shell-panel-min-width:calc(var(--calcite-panel-width-multiplier) * 240px)}:host([width-scale=l]) .content{--calcite-shell-panel-width:calc(var(--calcite-panel-width-multiplier) * 45vw);--calcite-shell-panel-max-width:calc(var(--calcite-panel-width-multiplier) * 680px);--calcite-shell-panel-min-width:calc(var(--calcite-panel-width-multiplier) * 340px)}:host([detached-height-scale=s]) .content--detached{--calcite-shell-panel-detached-max-height:40vh}:host([detached-height-scale=m]) .content--detached{--calcite-shell-panel-detached-max-height:60vh}:host([detached-height-scale=l]) .content--detached{--calcite-shell-panel-detached-max-height:80vh}.content--detached{border-radius:0.25rem;-webkit-box-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);box-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);height:auto;overflow:hidden;margin-top:0.5rem;margin-bottom:auto;margin-left:0.5rem;margin-right:0.5rem;max-height:var(--calcite-shell-panel-detached-max-height)}.content--detached ::slotted(calcite-panel),.content--detached ::slotted(calcite-flow){max-height:unset}.content[hidden]{display:none}:host([position=start]) slot[name=action-bar]::slotted(calcite-action-bar){border-right-width:1px;border-right-color:var(--calcite-ui-border-3);border-right-style:solid}:host([position=end]) slot[name=action-bar]::slotted(calcite-action-bar){border-left-width:1px;border-left-color:var(--calcite-ui-border-3);border-left-style:solid}";
+const calciteShellPanelCss = "@-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;-ms-flex-align:stretch;align-items:stretch;-ms-flex:0 1 auto;flex:0 1 auto;--calcite-shell-panel-detached-max-height:unset}.container{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:stretch;align-items:stretch;background-color:transparent;-ms-flex:1 1 auto;flex:1 1 auto;pointer-events:none;color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}.container *{-webkit-box-sizing:border-box;box-sizing:border-box}::slotted(calcite-panel),::slotted(calcite-flow){-ms-flex:1 1 auto;flex:1 1 auto;height:100%;width:100%;max-height:unset;max-width:unset}::slotted(.calcite-match-height){display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;overflow:hidden}.content{-ms-flex-align:stretch;align-items:stretch;-ms-flex-item-align:stretch;align-self:stretch;background-color:var(--calcite-ui-background);display:-ms-flexbox;display:flex;padding:0;pointer-events:auto;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;width:var(--calcite-shell-panel-width);max-width:var(--calcite-shell-panel-max-width);min-width:var(--calcite-shell-panel-min-width);-webkit-transition:max-height 150ms ease-in-out, max-width 150ms ease-in-out;transition:max-height 150ms ease-in-out, max-width 150ms ease-in-out}.content__header{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex:0 1 auto;flex:0 1 auto;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:stretch;align-items:stretch}.content__body{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-direction:column;flex-direction:column;overflow:hidden}:host([width-scale=s]) .content{--calcite-shell-panel-width:calc(var(--calcite-panel-width-multiplier) * 12vw);--calcite-shell-panel-max-width:calc(var(--calcite-panel-width-multiplier) * 300px);--calcite-shell-panel-min-width:calc(var(--calcite-panel-width-multiplier) * 150px)}:host([width-scale=m]) .content{--calcite-shell-panel-width:calc(var(--calcite-panel-width-multiplier) * 20vw);--calcite-shell-panel-max-width:calc(var(--calcite-panel-width-multiplier) * 420px);--calcite-shell-panel-min-width:calc(var(--calcite-panel-width-multiplier) * 240px)}:host([width-scale=l]) .content{--calcite-shell-panel-width:calc(var(--calcite-panel-width-multiplier) * 45vw);--calcite-shell-panel-max-width:calc(var(--calcite-panel-width-multiplier) * 680px);--calcite-shell-panel-min-width:calc(var(--calcite-panel-width-multiplier) * 340px)}:host([detached-height-scale=s]) .content--detached{--calcite-shell-panel-detached-max-height:40vh}:host([detached-height-scale=m]) .content--detached{--calcite-shell-panel-detached-max-height:60vh}:host([detached-height-scale=l]) .content--detached{--calcite-shell-panel-detached-max-height:80vh}.content--detached{border-radius:0.25rem;-webkit-box-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);box-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);height:auto;overflow:hidden;margin-top:0.5rem;margin-bottom:auto;margin-left:0.5rem;margin-right:0.5rem;max-height:var(--calcite-shell-panel-detached-max-height)}.content--detached ::slotted(calcite-panel),.content--detached ::slotted(calcite-flow){max-height:unset}:host([position=start]) .content--detached ::slotted(calcite-panel),:host([position=start]) .content--detached ::slotted(calcite-flow),:host([position=end]) .content--detached ::slotted(calcite-panel),:host([position=end]) .content--detached ::slotted(calcite-flow){border-style:none}.content[hidden]{display:none}slot[name=action-bar]::slotted(calcite-action-bar),.content ::slotted(calcite-flow),.content ::slotted(calcite-panel){border-width:1px;border-color:var(--calcite-ui-border-3);border-style:solid}:host([position=start]) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=start]) .content ::slotted(calcite-flow),:host([position=start]) .content ::slotted(calcite-panel){-webkit-border-start:none;border-inline-start:none}:host([position=end]) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=end]) .content ::slotted(calcite-flow),:host([position=end]) .content ::slotted(calcite-panel){-webkit-border-end:none;border-inline-end:none}";
 
 let CalciteShellPanel$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteShellPanelToggle = createEvent(this, "calciteShellPanelToggle", 7);
     // --------------------------------------------------------------------------
     //
@@ -17061,7 +17455,7 @@ let CalciteShellPanel$1 = class extends HTMLElement {
     if (position === "end") {
       mainNodes.reverse();
     }
-    return h(Fragment, null, mainNodes);
+    return h("div", { class: { [CSS$8.container]: true } }, mainNodes);
   }
   get el() { return this; }
   static get watchers() { return {
@@ -17070,13 +17464,13 @@ let CalciteShellPanel$1 = class extends HTMLElement {
   static get style() { return calciteShellPanelCss; }
 };
 
-const calciteSliderCss = "@charset \"UTF-8\";@-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}.container{display:block;position:relative;padding:7px 0;margin:7px 0.5rem}:host([disabled]){opacity:var(--calcite-ui-opacity-disabled);pointer-events:none}:host([disabled]) .track__range,:host([disabled]) .tick--active{background-color:var(--calcite-ui-text-3)}:host([disabled]) .graph .graph-path--highlight{fill:var(--calcite-ui-text-3)}:host([label-handles]) .container,:host([precise]:not([precise=false])) .container{margin-top:21px}:host([label-ticks]),:host([precise]:not([precise=false])) .container--range{margin-bottom:21px}:host([precise]:not([precise=false])[label-handles]) .container{margin-top:35px}:host([precise]:not([precise=false])[label-handles]) .container--range{margin-bottom:35px}.thumb{position:absolute;border-style:none;background-color:transparent;cursor:pointer;outline:2px solid transparent;outline-offset:2px;padding:0;margin:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;font-family:inherit;z-index:2;-webkit-transform:translate(7px, -8px);transform:translate(7px, -8px)}.thumb .handle__label{font-size:0.75rem;line-height:1.5;font-weight:500;line-height:1;color:var(--calcite-ui-text-2);margin-bottom:5px}.thumb .handle__label.static,.thumb .handle__label.transformed{opacity:0;position:absolute;top:0;bottom:0}.thumb .handle__label.hyphen::after{content:\"—\";display:inline-block;width:1em}.thumb .handle{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;height:14px;width:14px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:100%;background-color:var(--calcite-ui-foreground-1);-webkit-box-shadow:0 0 0 2px var(--calcite-ui-text-3) inset;box-shadow:0 0 0 2px var(--calcite-ui-text-3) inset;-webkit-transition:border 0.25s ease, background-color 0.25s ease, -webkit-box-shadow 0.25s ease;transition:border 0.25s ease, background-color 0.25s ease, -webkit-box-shadow 0.25s ease;transition:border 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;transition:border 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease, -webkit-box-shadow 0.25s ease}.thumb .handle-extension{width:2px;height:7px;background-color:var(--calcite-ui-text-3)}.thumb:hover .handle{-webkit-box-shadow:0 0 0 3px var(--calcite-ui-brand) inset;box-shadow:0 0 0 3px var(--calcite-ui-brand) inset}.thumb:hover .handle-extension{background-color:var(--calcite-ui-brand)}.thumb:focus .handle{outline:2px solid var(--calcite-ui-brand);outline-offset:2px;outline-offset:2px}.thumb:focus .handle-extension{background-color:var(--calcite-ui-brand)}.thumb--minValue{-webkit-transform:translate(-7px, -8px);transform:translate(-7px, -8px)}:host([label-handles]) .thumb{-webkit-transform:translate(50%, -25px);transform:translate(50%, -25px)}:host([label-handles]) .thumb--minValue{-webkit-transform:translate(-50%, -25px);transform:translate(-50%, -25px)}:host([has-histogram][label-handles]) .thumb{-webkit-transform:translate(50%, -8px);transform:translate(50%, -8px)}:host([has-histogram][label-handles]) .thumb .handle__label{margin-bottom:unset;margin-top:5px}:host([has-histogram][label-handles]) .thumb--minValue{-webkit-transform:translate(-50%, -8px);transform:translate(-50%, -8px)}:host([precise]:not([precise=false])) .thumb{-webkit-transform:translate(7px, -21px);transform:translate(7px, -21px)}:host([precise]:not([precise=false])) .thumb--minValue{-webkit-transform:translate(-7px, -2px);transform:translate(-7px, -2px)}:host([precise]:not([precise=false])) .thumb--minValue .handle__label{margin-bottom:unset;margin-top:5px}:host([has-histogram][precise]:not([precise=false])) .thumb{-webkit-transform:translate(7px, -2px);transform:translate(7px, -2px)}:host([has-histogram][precise]:not([precise=false])) .thumb--minValue{-webkit-transform:translate(-50%, -2px);transform:translate(-50%, -2px)}:host([ticks][precise]:not([precise=false])) .thumb{-webkit-transform:translate(7px, -20px);transform:translate(7px, -20px)}:host([ticks][precise]:not([precise=false])) .thumb--minValue{-webkit-transform:translate(-7px, -3px);transform:translate(-7px, -3px)}:host([has-histogram][ticks][precise]:not([precise=false])) .thumb{-webkit-transform:translate(7px, -3px);transform:translate(7px, -3px)}:host([has-histogram][ticks][precise]:not([precise=false])) .thumb--minValue{-webkit-transform:translate(-50%, -3px);transform:translate(-50%, -3px)}:host([label-handles][precise]:not([precise=false])) .thumb{-webkit-transform:translate(50%, -38px);transform:translate(50%, -38px)}:host([label-handles][precise]:not([precise=false])) .thumb--minValue{-webkit-transform:translate(-50%, -2px);transform:translate(-50%, -2px)}:host([has-histogram][label-handles][precise]:not([precise=false])) .thumb{-webkit-transform:translate(50%, -2px);transform:translate(50%, -2px)}:host([has-histogram][label-handles][precise]:not([precise=false])) .thumb--minValue{-webkit-transform:translate(-50%, -2px);transform:translate(-50%, -2px)}:host([ticks][label-handles][precise]:not([precise=false])) .thumb{-webkit-transform:translate(50%, -37px);transform:translate(50%, -37px)}:host([ticks][label-handles][precise]:not([precise=false])) .thumb--minValue{-webkit-transform:translate(-50%, -3px);transform:translate(-50%, -3px)}:host([has-histogram][ticks][label-handles][precise]:not([precise=false])) .thumb{-webkit-transform:translate(50%, -3px);transform:translate(50%, -3px)}:host([has-histogram][ticks][label-handles][precise]:not([precise=false])) .thumb--minValue{-webkit-transform:translate(-50%, -3px);transform:translate(-50%, -3px)}.thumb:focus,.thumb--active{z-index:3}.thumb:focus .handle,.thumb--active .handle{background-color:var(--calcite-ui-brand);-webkit-box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16)}.thumb:hover.thumb--precise:after,.thumb:focus.thumb--precise:after,.thumb--active.thumb--precise:after{background-color:var(--calcite-ui-brand)}.track{height:2px;border-radius:0;z-index:1;background-color:var(--calcite-ui-border-2);-webkit-transition:all 250ms ease-in;transition:all 250ms ease-in;position:relative}.track__range{position:absolute;top:0;height:2px;background-color:var(--calcite-ui-brand)}.container--range .track__range:hover{cursor:ew-resize}.container--range .track__range:after{content:\"\";position:absolute;top:-5px;width:100%;height:14px}.tick{position:absolute;top:-2px;width:2px;height:4px;left:var(--calcite-ui-border-1-offset);margin-left:-2px;border:1px solid var(--calcite-ui-foreground-1);background-color:var(--calcite-ui-border-1)}.tick--active{background-color:var(--calcite-ui-brand)}.tick__label{position:absolute;font-size:0.75rem;line-height:1.5;font-weight:500;color:var(--calcite-ui-text-2);width:4em;margin:14px -2em;text-align:center;display:block;pointer-events:none}.tick__label--min{left:0;margin:14px -3px;text-align:left;-webkit-transition:opacity 150ms;transition:opacity 150ms}.tick__label--max{left:unset;right:0;margin:14px -3px;text-align:right;-webkit-transition:opacity 50ms;transition:opacity 50ms}:host([has-histogram][label-handles]) .tick__label--min,:host([has-histogram][label-handles]) .tick__label--max{margin:6px -3px;font-weight:300;color:var(--calcite-ui-text-3)}:host([has-histogram][precise]:not([precise=false])) .tick__label--min,:host([has-histogram][precise]:not([precise=false])) .tick__label--max{margin:6px -3px;font-weight:300;color:var(--calcite-ui-text-3)}.graph{color:var(--calcite-ui-foreground-3)}:host([mirrored]:not([has-histogram])) .tick__label--min{right:0;left:unset;text-align:right}:host([mirrored]:not([has-histogram])) .tick__label--max{right:unset;left:0;text-align:left}";
+const calciteSliderCss = "@charset \"UTF-8\";@-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}.container{display:block;position:relative;padding:7px 0;margin:7px 0.5rem}:host([disabled]){opacity:var(--calcite-ui-opacity-disabled);pointer-events:none}:host([disabled]) .track__range,:host([disabled]) .tick--active{background-color:var(--calcite-ui-text-3)}:host([disabled]) .graph .graph-path--highlight{fill:var(--calcite-ui-text-3)}:host([label-handles]) .container,:host([precise]:not([precise=false])) .container{margin-top:21px}:host([label-ticks]),:host([precise]:not([precise=false])) .container--range{margin-bottom:21px}:host([precise]:not([precise=false])[label-handles]) .container{margin-top:35px}:host([precise]:not([precise=false])[label-handles]) .container--range{margin-bottom:35px}.thumb{position:absolute;border-style:none;background-color:transparent;cursor:pointer;outline:2px solid transparent;outline-offset:2px;padding:0;margin:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;font-family:inherit;z-index:2;-webkit-transform:translate(7px, -8px);transform:translate(7px, -8px)}.thumb .handle__label{font-size:var(--calcite-font-size--2);font-weight:500;line-height:1;color:var(--calcite-ui-text-2);margin-bottom:5px}.thumb .handle__label.static,.thumb .handle__label.transformed{opacity:0;position:absolute;top:0;bottom:0}.thumb .handle__label.hyphen::after{content:\"—\";display:inline-block;width:1em}.thumb .handle{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;height:14px;width:14px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:100%;background-color:var(--calcite-ui-foreground-1);-webkit-box-shadow:0 0 0 2px var(--calcite-ui-text-3) inset;box-shadow:0 0 0 2px var(--calcite-ui-text-3) inset;-webkit-transition:border 0.25s ease, background-color 0.25s ease, -webkit-box-shadow 0.25s ease;transition:border 0.25s ease, background-color 0.25s ease, -webkit-box-shadow 0.25s ease;transition:border 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;transition:border 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease, -webkit-box-shadow 0.25s ease}.thumb .handle-extension{width:2px;height:7px;background-color:var(--calcite-ui-text-3)}.thumb:hover .handle{-webkit-box-shadow:0 0 0 3px var(--calcite-ui-brand) inset;box-shadow:0 0 0 3px var(--calcite-ui-brand) inset}.thumb:hover .handle-extension{background-color:var(--calcite-ui-brand)}.thumb:focus .handle{outline:2px solid var(--calcite-ui-brand);outline-offset:2px;outline-offset:2px}.thumb:focus .handle-extension{background-color:var(--calcite-ui-brand)}.thumb--minValue{-webkit-transform:translate(-7px, -8px);transform:translate(-7px, -8px)}:host([label-handles]) .thumb{-webkit-transform:translate(50%, -25px);transform:translate(50%, -25px)}:host([label-handles]) .thumb--minValue{-webkit-transform:translate(-50%, -25px);transform:translate(-50%, -25px)}:host([has-histogram][label-handles]) .thumb{-webkit-transform:translate(50%, -8px);transform:translate(50%, -8px)}:host([has-histogram][label-handles]) .thumb .handle__label{margin-bottom:unset;margin-top:5px}:host([has-histogram][label-handles]) .thumb--minValue{-webkit-transform:translate(-50%, -8px);transform:translate(-50%, -8px)}:host([precise]:not([precise=false])) .thumb{-webkit-transform:translate(7px, -21px);transform:translate(7px, -21px)}:host([precise]:not([precise=false])) .thumb--minValue{-webkit-transform:translate(-7px, -2px);transform:translate(-7px, -2px)}:host([precise]:not([precise=false])) .thumb--minValue .handle__label{margin-bottom:unset;margin-top:5px}:host([has-histogram][precise]:not([precise=false])) .thumb{-webkit-transform:translate(7px, -2px);transform:translate(7px, -2px)}:host([has-histogram][precise]:not([precise=false])) .thumb--minValue{-webkit-transform:translate(-50%, -2px);transform:translate(-50%, -2px)}:host([ticks][precise]:not([precise=false])) .thumb{-webkit-transform:translate(7px, -20px);transform:translate(7px, -20px)}:host([ticks][precise]:not([precise=false])) .thumb--minValue{-webkit-transform:translate(-7px, -3px);transform:translate(-7px, -3px)}:host([has-histogram][ticks][precise]:not([precise=false])) .thumb{-webkit-transform:translate(7px, -3px);transform:translate(7px, -3px)}:host([has-histogram][ticks][precise]:not([precise=false])) .thumb--minValue{-webkit-transform:translate(-50%, -3px);transform:translate(-50%, -3px)}:host([label-handles][precise]:not([precise=false])) .thumb{-webkit-transform:translate(50%, -38px);transform:translate(50%, -38px)}:host([label-handles][precise]:not([precise=false])) .thumb--minValue{-webkit-transform:translate(-50%, -2px);transform:translate(-50%, -2px)}:host([has-histogram][label-handles][precise]:not([precise=false])) .thumb{-webkit-transform:translate(50%, -2px);transform:translate(50%, -2px)}:host([has-histogram][label-handles][precise]:not([precise=false])) .thumb--minValue{-webkit-transform:translate(-50%, -2px);transform:translate(-50%, -2px)}:host([ticks][label-handles][precise]:not([precise=false])) .thumb{-webkit-transform:translate(50%, -37px);transform:translate(50%, -37px)}:host([ticks][label-handles][precise]:not([precise=false])) .thumb--minValue{-webkit-transform:translate(-50%, -3px);transform:translate(-50%, -3px)}:host([has-histogram][ticks][label-handles][precise]:not([precise=false])) .thumb{-webkit-transform:translate(50%, -3px);transform:translate(50%, -3px)}:host([has-histogram][ticks][label-handles][precise]:not([precise=false])) .thumb--minValue{-webkit-transform:translate(-50%, -3px);transform:translate(-50%, -3px)}.thumb:focus,.thumb--active{z-index:3}.thumb:focus .handle,.thumb--active .handle{background-color:var(--calcite-ui-brand);-webkit-box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16)}.thumb:hover.thumb--precise:after,.thumb:focus.thumb--precise:after,.thumb--active.thumb--precise:after{background-color:var(--calcite-ui-brand)}.track{height:2px;border-radius:0;z-index:1;background-color:var(--calcite-ui-border-2);-webkit-transition:all 250ms ease-in;transition:all 250ms ease-in;position:relative}.track__range{position:absolute;top:0;height:2px;background-color:var(--calcite-ui-brand)}.container--range .track__range:hover{cursor:ew-resize}.container--range .track__range:after{content:\"\";position:absolute;top:-5px;width:100%;height:14px}.tick{position:absolute;top:-2px;width:2px;height:4px;left:var(--calcite-ui-border-1-offset);margin-left:-2px;border:1px solid var(--calcite-ui-foreground-1);background-color:var(--calcite-ui-border-1)}.tick--active{background-color:var(--calcite-ui-brand)}.tick__label{position:absolute;font-size:var(--calcite-font-size--2);font-weight:500;color:var(--calcite-ui-text-2);width:4em;margin:14px -2em;text-align:center;display:block;pointer-events:none}.tick__label--min{left:0;margin:14px -3px;text-align:left;-webkit-transition:opacity 150ms;transition:opacity 150ms}.tick__label--max{left:unset;right:0;margin:14px -3px;text-align:right;-webkit-transition:opacity 50ms;transition:opacity 50ms}:host([has-histogram][label-handles]) .tick__label--min,:host([has-histogram][label-handles]) .tick__label--max{margin:6px -3px;font-weight:300;color:var(--calcite-ui-text-3)}:host([has-histogram][precise]:not([precise=false])) .tick__label--min,:host([has-histogram][precise]:not([precise=false])) .tick__label--max{margin:6px -3px;font-weight:300;color:var(--calcite-ui-text-3)}.graph{color:var(--calcite-ui-foreground-3)}:host([mirrored]:not([has-histogram])) .tick__label--min{right:0;left:unset;text-align:right}:host([mirrored]:not([has-histogram])) .tick__label--max{right:unset;left:0;text-align:left}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
 
 let CalciteSlider$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteSliderInput = createEvent(this, "calciteSliderInput", 7);
     this.calciteSliderChange = createEvent(this, "calciteSliderChange", 7);
     this.calciteSliderUpdate = createEvent(this, "calciteSliderUpdate", 7);
@@ -17105,6 +17499,10 @@ let CalciteSlider$1 = class extends HTMLElement {
     this.mirrored = false;
     /** Use finer point for handles */
     this.precise = false;
+    /**
+     * When true, makes the component required for form-submission.
+     */
+    this.required = false;
     /** When true, enables snap selection along the step interval */
     this.snap = false;
     /** Interval to move on up/down keys */
@@ -17177,14 +17575,17 @@ let CalciteSlider$1 = class extends HTMLElement {
   //--------------------------------------------------------------------------
   connectedCallback() {
     connectLabel(this);
+    connectForm(this);
   }
   disconnectedCallback() {
     disconnectLabel(this);
+    disconnectForm(this);
   }
   componentWillLoad() {
     this.isRange = !!(this.maxValue || this.maxValue === 0);
     this.tickValues = this.generateTickValues();
     this.value = this.clamp(this.value);
+    afterConnectDefaultValueSet(this, this.value);
     if (this.snap) {
       this.value = this.getClosestStep(this.value);
     }
@@ -17306,10 +17707,10 @@ let CalciteSlider$1 = class extends HTMLElement {
       !this.precise &&
       this.labelHandles &&
       this.isRange &&
-      minHistogramLabeledHandle, !this.precise && !this.labelHandles && handle, !this.hasHistogram && !this.precise && this.labelHandles && labeledHandle, !this.hasHistogram && this.precise && !this.labelHandles && preciseHandle, this.hasHistogram && this.precise && !this.labelHandles && histogramPreciseHandle, !this.hasHistogram && this.precise && this.labelHandles && labeledPreciseHandle, this.hasHistogram && !this.precise && this.labelHandles && histogramLabeledHandle, this.hasHistogram && this.precise && this.labelHandles && histogramLabeledPreciseHandle)));
+      minHistogramLabeledHandle, !this.precise && !this.labelHandles && handle, !this.hasHistogram && !this.precise && this.labelHandles && labeledHandle, !this.hasHistogram && this.precise && !this.labelHandles && preciseHandle, this.hasHistogram && this.precise && !this.labelHandles && histogramPreciseHandle, !this.hasHistogram && this.precise && this.labelHandles && labeledPreciseHandle, this.hasHistogram && !this.precise && this.labelHandles && histogramLabeledHandle, this.hasHistogram && this.precise && this.labelHandles && histogramLabeledPreciseHandle, h(HiddenFormInputSlot, { component: this }))));
   }
   renderGraph() {
-    return this.histogram ? (h("div", { class: "graph" }, h("calcite-graph", { colorStops: this.histogramStops, data: this.histogram, "data-style": "slider-histogram", height: 48, highlightMax: this.isRange ? this.maxValue : this.value, highlightMin: this.isRange ? this.minValue : this.min, width: 300 }))) : null;
+    return this.histogram ? (h("div", { class: "graph" }, h("calcite-graph", { colorStops: this.histogramStops, data: this.histogram, "data-style": "slider-histogram", height: 48, highlightMax: this.isRange ? this.maxValue : this.value, highlightMin: this.isRange ? this.minValue : this.min, max: this.max, min: this.min, width: 300 }))) : null;
   }
   renderTickLabel(tick) {
     const isMinTickLabel = tick === this.min;
@@ -20782,7 +21183,7 @@ let CalciteSortableList$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteListOrderChange = createEvent(this, "calciteListOrderChange", 7);
     /**
      * The selector for the handle elements.
@@ -20942,7 +21343,7 @@ let CalciteSplitButton$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteSplitButtonPrimaryClick = createEvent(this, "calciteSplitButtonPrimaryClick", 7);
     this.calciteSplitButtonSecondaryClick = createEvent(this, "calciteSplitButtonSecondaryClick", 7);
     /** specify the appearance style of the button, defaults to solid. */
@@ -20998,7 +21399,7 @@ let CalciteStepper$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteStepperItemChange = createEvent(this, "calciteStepperItemChange", 7);
     //--------------------------------------------------------------------------
     //
@@ -21211,7 +21612,7 @@ let CalciteStepperItem$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteStepperItemKeyEvent = createEvent(this, "calciteStepperItemKeyEvent", 7);
     this.calciteStepperItemSelect = createEvent(this, "calciteStepperItemSelect", 7);
     this.calciteStepperItemRegister = createEvent(this, "calciteStepperItemRegister", 7);
@@ -21353,13 +21754,13 @@ let CalciteStepperItem$1 = class extends HTMLElement {
   static get style() { return calciteStepperItemCss; }
 };
 
-const calciteSwitchCss = "@-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([scale=s]) .container{height:0.75rem}:host([scale=s]) .track{width:1.5rem;height:0.75rem}:host([scale=s]) .handle{width:0.5rem;height:0.5rem}:host([scale=m]) .container{height:1rem}:host([scale=m]) .track{width:2rem;height:1rem}:host([scale=m]) .handle{width:0.75rem;height:0.75rem}:host([scale=l]) .container{height:1.5rem}:host([scale=l]) .track{width:3rem;height:1.5rem}:host([scale=l]) .handle{width:1.25rem;height:1.25rem}:host{display:inline-block;position:relative;width:auto;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;tap-highlight-color:transparent}:host([disabled]){opacity:var(--calcite-ui-opacity-disabled);pointer-events:none;cursor:default}:host{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;width:auto}:host(:focus){outline:2px solid var(--calcite-ui-brand);outline-offset:2px}.track{position:relative;display:inline-block;vertical-align:top;background-color:var(--calcite-ui-foreground-2);border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-2);-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none;-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);border-radius:9999px}.handle{position:absolute;display:block;right:auto;background-color:var(--calcite-ui-foreground-1);border-width:2px;border-style:solid;border-color:var(--calcite-ui-border-input);-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);border-radius:9999px;pointer-events:none;top:-1px;left:-1px}:host(:hover) .handle,:host(:focus) .handle{border-color:var(--calcite-ui-brand);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-brand);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand)}:host([checked]) .track{background-color:var(--calcite-ui-brand);border-color:var(--calcite-ui-brand-hover)}:host([checked]) .handle{left:auto;border-color:var(--calcite-ui-brand);right:-1px}:host([checked]:hover) .track{background-color:var(--calcite-ui-brand);border-color:var(--calcite-ui-brand-hover)}:host([checked]:hover) .handle{border-color:var(--calcite-ui-brand-hover);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-brand-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand-hover)}.calcite--rtl .handle{left:auto;right:-1px}:host([checked]) .calcite--rtl .handle{right:auto;left:-1px}:host([checked]:active) .calcite--rtl .handle{right:auto;left:-1px}:host([checked]:focus) .calcite--rtl .handle{right:auto;left:-1px}";
+const calciteSwitchCss = "@-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([scale=s]) .container{height:0.75rem}:host([scale=s]) .track{width:1.5rem;height:0.75rem}:host([scale=s]) .handle{width:0.5rem;height:0.5rem}:host([scale=m]) .container{height:1rem}:host([scale=m]) .track{width:2rem;height:1rem}:host([scale=m]) .handle{width:0.75rem;height:0.75rem}:host([scale=l]) .container{height:1.5rem}:host([scale=l]) .track{width:3rem;height:1.5rem}:host([scale=l]) .handle{width:1.25rem;height:1.25rem}:host{display:inline-block;position:relative;width:auto;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;tap-highlight-color:transparent}:host([disabled]){opacity:var(--calcite-ui-opacity-disabled);pointer-events:none;cursor:default}:host{outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;width:auto}:host(:focus){outline:2px solid var(--calcite-ui-brand);outline-offset:2px}.track{position:relative;display:inline-block;vertical-align:top;background-color:var(--calcite-ui-foreground-2);border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-2);-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none;-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);border-radius:9999px}.handle{position:absolute;display:block;right:auto;background-color:var(--calcite-ui-foreground-1);border-width:2px;border-style:solid;border-color:var(--calcite-ui-border-input);-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);border-radius:9999px;pointer-events:none;top:-1px;left:-1px}:host(:hover) .handle,:host(:focus) .handle{border-color:var(--calcite-ui-brand);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-brand);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand)}:host([checked]) .track{background-color:var(--calcite-ui-brand);border-color:var(--calcite-ui-brand-hover)}:host([checked]) .handle{left:auto;border-color:var(--calcite-ui-brand);right:-1px}:host([checked]:hover) .track{background-color:var(--calcite-ui-brand);border-color:var(--calcite-ui-brand-hover)}:host([checked]:hover) .handle{border-color:var(--calcite-ui-brand-hover);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-ui-brand-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand-hover)}.calcite--rtl .handle{left:auto;right:-1px}:host([checked]) .calcite--rtl .handle{right:auto;left:-1px}:host([checked]:active) .calcite--rtl .handle{right:auto;left:-1px}:host([checked]:focus) .calcite--rtl .handle{right:auto;left:-1px}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
 
 let CalciteSwitch$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteSwitchChange = createEvent(this, "calciteSwitchChange", 7);
     //--------------------------------------------------------------------------
     //
@@ -21376,24 +21777,30 @@ let CalciteSwitch$1 = class extends HTMLElement {
     this.switched = false;
     /** True if the switch is initially on */
     this.checked = false;
-    this.inputEl = document.createElement("input");
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.keyDownHandler = (e) => {
+      const key = getKey(e.key);
+      if (!this.disabled && (key === " " || key === "Enter")) {
+        this.toggle();
+      }
+    };
     this.clickHandler = () => {
       this.toggle();
     };
+    this.setSwitchEl = (el) => {
+      this.switchEl = el;
+    };
   }
   disabledWatcher(newDisabled) {
-    this.inputEl.disabled = newDisabled;
     this.tabindex = newDisabled ? -1 : 0;
   }
-  nameChanged(newName) {
-    this.inputEl.name = newName;
-  }
   switchedWatcher(switched) {
     this.checked = switched;
   }
-  checkedWatcher(checked) {
-    this.inputEl.checked = checked;
-  }
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -21401,31 +21808,14 @@ let CalciteSwitch$1 = class extends HTMLElement {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    this.el.focus();
+    focusElement(this.switchEl);
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
   onLabelClick() {
     if (!this.disabled) {
       this.toggle();
       this.setFocus();
     }
   }
-  setupInput() {
-    this.checked && this.inputEl.setAttribute("checked", "");
-    this.inputEl.disabled = this.disabled;
-    this.inputEl.id = `${this.guid}-input`;
-    this.inputEl.name = this.name;
-    this.inputEl.style.cssText = hiddenInputStyle;
-    this.inputEl.type = "checkbox";
-    if (this.value) {
-      this.inputEl.value = this.value != null ? this.value.toString() : "";
-    }
-    this.el.appendChild(this.inputEl);
-  }
   toggle() {
     this.checked = !this.checked;
     this.calciteSwitchChange.emit({
@@ -21436,30 +21826,24 @@ let CalciteSwitch$1 = class extends HTMLElement {
   }
   //--------------------------------------------------------------------------
   //
-  //  Event Listeners
-  //
-  //--------------------------------------------------------------------------
-  keyDownHandler(e) {
-    const key = getKey(e.key);
-    if (!this.disabled && (key === " " || key === "Enter")) {
-      this.toggle();
-    }
-  }
-  //--------------------------------------------------------------------------
-  //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    const initiallyChecked = this.checked || this.switched;
+    if (initiallyChecked) {
+      // if either prop is set, we ensure both are synced initially
+      this.switched = this.checked = initiallyChecked;
+    }
     connectLabel(this);
+    connectForm(this);
   }
   disconnectedCallback() {
     disconnectLabel(this);
+    disconnectForm(this);
   }
   componentWillLoad() {
-    this.guid = this.el.id || `calcite-switch-${guid()}`;
     this.tabindex = this.el.getAttribute("tabindex") || this.disabled ? -1 : 0;
-    this.setupInput();
   }
   // --------------------------------------------------------------------------
   //
@@ -21468,14 +21852,12 @@ let CalciteSwitch$1 = class extends HTMLElement {
   // --------------------------------------------------------------------------
   render() {
     const dir = getElementDir(this.el);
-    return (h(Host, { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), onClick: this.clickHandler, role: "switch", tabindex: this.tabindex }, h("div", { class: { container: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, h("div", { class: "track" }, h("div", { class: "handle" })))));
+    return (h(Host, { onKeyDown: this.keyDownHandler }, h("div", { "aria-checked": this.checked.toString(), "aria-label": getLabelText(this), class: { container: true, [CSS_UTILITY.rtl]: dir === "rtl" }, onClick: this.clickHandler, ref: this.setSwitchEl, role: "switch", tabindex: this.tabindex }, h("div", { class: "track" }, h("div", { class: "handle" })), h(HiddenFormInputSlot, { component: this }))));
   }
   get el() { return this; }
   static get watchers() { return {
     "disabled": ["disabledWatcher"],
-    "name": ["nameChanged"],
-    "switched": ["switchedWatcher"],
-    "checked": ["checkedWatcher"]
+    "switched": ["switchedWatcher"]
   }; }
   static get style() { return calciteSwitchCss; }
 };
@@ -21486,7 +21868,7 @@ let CalciteTab$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteTabRegister = createEvent(this, "calciteTabRegister", 7);
     /**
      * Show this tab
@@ -21580,7 +21962,7 @@ let CalciteTabNav$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteTabChange = createEvent(this, "calciteTabChange", 7);
     /** @internal Parent tabs component scale value */
     this.scale = "m";
@@ -21758,7 +22140,7 @@ let CalciteTabTitle$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteTabsActivate = createEvent(this, "calciteTabsActivate", 7);
     this.calciteTabsFocusNext = createEvent(this, "calciteTabsFocusNext", 7);
     this.calciteTabsFocusPrevious = createEvent(this, "calciteTabsFocusPrevious", 7);
@@ -21947,7 +22329,7 @@ let CalciteTabs$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     //--------------------------------------------------------------------------
     //
     //  Public Properties
@@ -22099,13 +22481,13 @@ const SLOTS$3 = {
   contentEnd: "content-end"
 };
 
-const calciteTileCss = "@-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{background-color:var(--calcite-ui-foreground-1);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-ui-text-3);display:inline-block;-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-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(:not([embed])){padding:0.75rem;-webkit-box-shadow:0 0 0 1px var(--calcite-ui-border-2);box-shadow:0 0 0 1px var(--calcite-ui-border-2)}:host(:not([embed])[href]:hover){cursor:pointer;-webkit-box-shadow:0 0 0 2px var(--calcite-ui-brand);box-shadow:0 0 0 2px var(--calcite-ui-brand)}:host(:not([embed])[href]:active){-webkit-box-shadow:0 0 0 3px var(--calcite-ui-brand);box-shadow:0 0 0 3px var(--calcite-ui-brand)}:host([icon][heading]:not([description]):not([embed])){padding:0}:host([icon][heading]:not([description])) .icon{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host([icon][heading]:not([description])) .large-visual{text-align:center}:host([disabled]){opacity:var(--calcite-ui-opacity-disabled);pointer-events:none}.container{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));grid-gap:0.5rem;gap:0.5rem;pointer-events:none}.content{-ms-flex-pack:center;justify-content:center;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-direction:column;flex-direction:column;grid-gap:0.5rem;gap:0.5rem}.content-container{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;-ms-flex-align:stretch;align-items:stretch;padding:0;color:var(--calcite-ui-text-2)}.content-slot-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:var(--calcite-ui-foreground-1)}.content-slot-container:first-child{padding-right:0.75rem}.content-slot-container:last-child{padding-left:0.75rem}.heading{font-size:var(--calcite-font-size--1);line-height:1.375;color:var(--calcite-ui-text-2);-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);font-weight:var(--calcite-font-weight-medium);pointer-events:none}.large-visual{-ms-flex-align:center;align-items:center;min-height:12rem}.large-visual .icon{-ms-flex-item-align:end;align-self:flex-end}.large-visual .content-container{-ms-flex-item-align:center;align-self:center}.description{font-size:var(--calcite-font-size--2);line-height:1.375;color:var(--calcite-ui-text-3);-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);pointer-events:none}:host(:hover) .heading,:host([active]) .heading{color:var(--calcite-ui-text-1)}:host(:hover) .description,:host([active]) .description{color:var(--calcite-ui-text-2)}";
+const calciteTileCss = "@-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{background-color:var(--calcite-ui-foreground-1);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--calcite-ui-text-3);display:inline-block;-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-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(:not([embed])){padding:0.75rem;-webkit-box-shadow:0 0 0 1px var(--calcite-ui-border-2);box-shadow:0 0 0 1px var(--calcite-ui-border-2)}:host(:not([embed])[href]:hover){cursor:pointer;-webkit-box-shadow:0 0 0 2px var(--calcite-ui-brand);box-shadow:0 0 0 2px var(--calcite-ui-brand)}:host(:not([embed])[href]:active){-webkit-box-shadow:0 0 0 3px var(--calcite-ui-brand);box-shadow:0 0 0 3px var(--calcite-ui-brand)}:host([icon][heading]:not([description]):not([embed])){padding:0}:host([icon][heading]:not([description])) .icon{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}:host([icon][heading]:not([description])) .large-visual{text-align:center}:host([disabled]){opacity:var(--calcite-ui-opacity-disabled);pointer-events:none}.container{display:grid;grid-template-columns:repeat(1, minmax(0, 1fr));grid-gap:0.5rem;gap:0.5rem;pointer-events:none}.content{-ms-flex-pack:center;justify-content:center;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-direction:column;flex-direction:column;grid-gap:0.5rem;gap:0.5rem;width:10%}.content-container{display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;-ms-flex-align:stretch;align-items:stretch;padding:0;color:var(--calcite-ui-text-2);width:100%}.content-slot-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:var(--calcite-ui-foreground-1)}.content-slot-container:first-child{padding-right:0.75rem}.content-slot-container:last-child{padding-left:0.75rem}.heading{font-size:var(--calcite-font-size--1);line-height:1.375;color:var(--calcite-ui-text-2);-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);font-weight:var(--calcite-font-weight-medium);pointer-events:none;word-wrap:break-word;overflow-wrap:break-word}.large-visual{-ms-flex-align:center;align-items:center;min-height:12rem}.large-visual .icon{-ms-flex-item-align:end;align-self:flex-end}.large-visual .content-container{-ms-flex-item-align:center;align-self:center}.description{font-size:var(--calcite-font-size--2);line-height:1.375;color:var(--calcite-ui-text-3);-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);pointer-events:none}:host(:hover) .heading,:host([active]) .heading{color:var(--calcite-ui-text-1)}:host(:hover) .description,:host([active]) .description{color:var(--calcite-ui-text-2)}";
 
 let CalciteTile$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -22156,7 +22538,7 @@ let CalciteTileSelect$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteTileSelectChange = createEvent(this, "calciteTileSelectChange", 7);
     //--------------------------------------------------------------------------
     //
@@ -22169,8 +22551,6 @@ let CalciteTileSelect$1 = class extends HTMLElement {
     this.disabled = false;
     /** The hidden state of the tile select. */
     this.hidden = false;
-    /** The name of the tile select.  This name will appear in form submissions as either a radio or checkbox identifier based on the `type` property. */
-    this.name = "";
     /** Display an interactive radio or checkbox. */
     this.inputEnabled = false;
     /** The side of the tile that the radio or checkbox appears on when inputEnabled is true. */
@@ -22317,7 +22697,7 @@ let CalciteTileSelectGroup$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     //--------------------------------------------------------------------------
     //
     //  Properties
@@ -22375,7 +22755,7 @@ let CalciteTimePicker$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteTimePickerBlur = createEvent(this, "calciteTimePickerBlur", 7);
     this.calciteTimePickerChange = createEvent(this, "calciteTimePickerChange", 7);
     this.calciteTimePickerFocus = createEvent(this, "calciteTimePickerFocus", 7);
@@ -22988,7 +23368,7 @@ let CalciteTip$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteTipDismiss = createEvent(this, "calciteTipDismiss", 7);
     // --------------------------------------------------------------------------
     //
@@ -23058,7 +23438,7 @@ let CalciteTipGroup$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
   }
   render() {
     return h("slot", null);
@@ -23072,7 +23452,7 @@ let CalciteTipManager$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteTipManagerToggle = createEvent(this, "calciteTipManagerToggle", 7);
     // --------------------------------------------------------------------------
     //
@@ -23239,7 +23619,7 @@ let CalciteTooltip$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     /**
      * Offset the position of the popover away from the reference element.
      * @default 6
@@ -23345,7 +23725,7 @@ let CalciteTooltip$1 = class extends HTMLElement {
     const { popper, el, placement } = this;
     const modifiers = this.getModifiers();
     popper
-      ? updatePopper({
+      ? await updatePopper({
         el,
         modifiers,
         placement,
@@ -23427,7 +23807,7 @@ let CalciteTooltipManager$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.hoverTimeouts = new WeakMap();
     // --------------------------------------------------------------------------
     //
@@ -23580,7 +23960,7 @@ let CalciteTree$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteTreeSelect = createEvent(this, "calciteTreeSelect", 7);
     //--------------------------------------------------------------------------
     //
@@ -23784,7 +24164,7 @@ let CalciteTreeItem$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteTreeItemSelect = createEvent(this, "calciteTreeItemSelect", 7);
     //--------------------------------------------------------------------------
     //
@@ -23817,10 +24197,17 @@ let CalciteTreeItem$1 = class extends HTMLElement {
     //  Private Methods
     //
     //--------------------------------------------------------------------------
+    this.updateParentIsExpanded = (el, expanded) => {
+      const items = getSlotted(el, SLOTS$1.children, {
+        all: true,
+        selector: "calcite-tree-item"
+      });
+      items.forEach((item) => (item.parentExpanded = expanded));
+    };
     this.updateAncestorTree = () => {
       if (this.selected && this.selectionMode === TreeSelectionMode.Ancestors) {
         const ancestors = [];
-        let parent = this.el.parentElement.closest("calcite-tree-item");
+        let parent = this.parentTreeItem;
         while (parent) {
           ancestors.push(parent);
           parent = parent.parentElement.closest("calcite-tree-item");
@@ -23831,11 +24218,7 @@ let CalciteTreeItem$1 = class extends HTMLElement {
     };
   }
   expandedHandler(newValue) {
-    const items = getSlotted(this.el, "children", {
-      all: true,
-      selector: "calcite-tree-item"
-    });
-    items.forEach((item) => (item.parentExpanded = newValue));
+    this.updateParentIsExpanded(this.el, newValue);
   }
   //--------------------------------------------------------------------------
   //
@@ -23843,7 +24226,11 @@ let CalciteTreeItem$1 = class extends HTMLElement {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    this.expandedHandler(this.expanded);
+    this.parentTreeItem = this.el.parentElement.closest("calcite-tree-item");
+    if (this.parentTreeItem) {
+      const { expanded } = this.parentTreeItem;
+      this.updateParentIsExpanded(this.parentTreeItem, expanded);
+    }
   }
   componentWillRender() {
     this.hasChildren = !!this.el.querySelector("calcite-tree");
@@ -23955,7 +24342,7 @@ let CalciteTreeItem$1 = class extends HTMLElement {
           break;
         }
         // When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
-        const parentItem = this.el.parentElement.closest("calcite-tree-item");
+        const parentItem = this.parentTreeItem;
         if (parentItem && (!this.hasChildren || this.expanded === false)) {
           parentItem.focus();
           e.preventDefault();
@@ -24030,7 +24417,7 @@ let CalciteValueList$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteListChange = createEvent(this, "calciteListChange", 7);
     this.calciteListOrderChange = createEvent(this, "calciteListOrderChange", 7);
     // --------------------------------------------------------------------------
@@ -24225,7 +24612,7 @@ let CalciteValueListItem$1 = class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
-    attachShadow(this);
+    this.__attachShadow();
     this.calciteListItemRemove = createEvent(this, "calciteListItemRemove", 7);
     /**
      * When true, the item cannot be clicked and is visually muted
@@ -24341,12 +24728,12 @@ const CalciteBlock = /*@__PURE__*/proxyCustomElement(CalciteBlock$1, [1,"calcite
 const CalciteBlockSection = /*@__PURE__*/proxyCustomElement(CalciteBlockSection$1, [1,"calcite-block-section",{"intlCollapse":[1,"intl-collapse"],"intlExpand":[1,"intl-expand"],"open":[1540],"status":[513],"text":[1],"toggleDisplay":[513,"toggle-display"]}]);
 const CalciteButton = /*@__PURE__*/proxyCustomElement(CalciteButton$1, [1,"calcite-button",{"alignment":[513],"appearance":[513],"label":[1],"color":[513],"disabled":[516],"href":[513],"iconEnd":[513,"icon-end"],"iconFlipRtl":[513,"icon-flip-rtl"],"iconStart":[513,"icon-start"],"intlLoading":[1,"intl-loading"],"loading":[516],"name":[1],"rel":[1],"form":[1],"round":[516],"scale":[513],"splitChild":[520,"split-child"],"target":[1],"type":[1025],"width":[513],"childElType":[32],"hasContent":[32],"hasLoader":[32]}]);
 const CalciteCard = /*@__PURE__*/proxyCustomElement(CalciteCard$1, [1,"calcite-card",{"loading":[516],"selected":[1540],"selectable":[516],"intlLoading":[1,"intl-loading"],"intlSelect":[1,"intl-select"],"intlDeselect":[1,"intl-deselect"]}]);
-const CalciteCheckbox = /*@__PURE__*/proxyCustomElement(CalciteCheckbox$1, [1,"calcite-checkbox",{"checked":[1540],"disabled":[516],"guid":[1537],"hovered":[1540],"indeterminate":[1540],"label":[1],"name":[513],"scale":[513],"value":[8],"focused":[32]},[[1,"mouseenter","mouseenter"],[1,"mouseleave","mouseleave"]]]);
+const CalciteCheckbox = /*@__PURE__*/proxyCustomElement(CalciteCheckbox$1, [1,"calcite-checkbox",{"checked":[1540],"disabled":[516],"guid":[1537],"hovered":[1540],"indeterminate":[1540],"label":[1],"name":[520],"required":[516],"scale":[513],"value":[8]}]);
 const CalciteChip = /*@__PURE__*/proxyCustomElement(CalciteChip$1, [1,"calcite-chip",{"appearance":[513],"color":[513],"dismissible":[516],"dismissLabel":[1,"dismiss-label"],"icon":[513],"iconFlipRtl":[516,"icon-flip-rtl"],"scale":[513],"value":[8]}]);
 const CalciteColorPicker = /*@__PURE__*/proxyCustomElement(CalciteColorPicker$1, [1,"calcite-color-picker",{"allowEmpty":[4,"allow-empty"],"appearance":[513],"color":[1040],"format":[1],"hideHex":[4,"hide-hex"],"hideChannels":[4,"hide-channels"],"hideSaved":[4,"hide-saved"],"intlB":[1,"intl-b"],"intlBlue":[1,"intl-blue"],"intlDeleteColor":[1,"intl-delete-color"],"intlG":[1,"intl-g"],"intlGreen":[1,"intl-green"],"intlH":[1,"intl-h"],"intlHsv":[1,"intl-hsv"],"intlHex":[1,"intl-hex"],"intlHue":[1,"intl-hue"],"intlNoColor":[1,"intl-no-color"],"intlR":[1,"intl-r"],"intlRed":[1,"intl-red"],"intlRgb":[1,"intl-rgb"],"intlS":[1,"intl-s"],"intlSaturation":[1,"intl-saturation"],"intlSaveColor":[1,"intl-save-color"],"intlSaved":[1,"intl-saved"],"intlV":[1,"intl-v"],"intlValue":[1,"intl-value"],"scale":[513],"storageId":[1,"storage-id"],"value":[1025],"colorFieldAndSliderInteractive":[32],"channelMode":[32],"channels":[32],"dimensions":[32],"savedColors":[32],"colorFieldScopeTop":[32],"colorFieldScopeLeft":[32],"scopeOrientation":[32],"hueScopeLeft":[32],"hueScopeTop":[32]},[[2,"keydown","handleChannelKeyUpOrDown"],[2,"keyup","handleChannelKeyUpOrDown"]]]);
 const CalciteColorPickerHexInput = /*@__PURE__*/proxyCustomElement(CalciteColorPickerHexInput$1, [1,"calcite-color-picker-hex-input",{"allowEmpty":[4,"allow-empty"],"intlHex":[1,"intl-hex"],"intlNoColor":[1,"intl-no-color"],"scale":[513],"value":[1537],"internalColor":[32]},[[2,"keydown","onInputKeyDown"]]]);
 const CalciteColorPickerSwatch = /*@__PURE__*/proxyCustomElement(CalciteColorPickerSwatch$1, [1,"calcite-color-picker-swatch",{"active":[516],"color":[1],"scale":[513]}]);
-const CalciteCombobox = /*@__PURE__*/proxyCustomElement(CalciteCombobox$1, [1,"calcite-combobox",{"active":[1540],"disabled":[516],"label":[1],"placeholder":[1],"maxItems":[2,"max-items"],"allowCustomValues":[4,"allow-custom-values"],"overlayPositioning":[1,"overlay-positioning"],"selectionMode":[513,"selection-mode"],"scale":[513],"items":[32],"groupItems":[32],"selectedItems":[32],"visibleItems":[32],"needsIcon":[32],"hideList":[32],"activeItemIndex":[32],"activeChipIndex":[32],"activeDescendant":[32],"text":[32],"open":[32],"maxScrollerHeight":[32]},[[4,"click","documentClickHandler"],[0,"calciteComboboxItemChange","calciteComboboxItemChangeHandler"]]]);
+const CalciteCombobox = /*@__PURE__*/proxyCustomElement(CalciteCombobox$1, [1,"calcite-combobox",{"active":[1540],"disabled":[516],"label":[1],"placeholder":[1],"maxItems":[2,"max-items"],"name":[513],"allowCustomValues":[4,"allow-custom-values"],"overlayPositioning":[1,"overlay-positioning"],"required":[4],"selectionMode":[513,"selection-mode"],"scale":[513],"value":[1025],"items":[32],"groupItems":[32],"selectedItems":[32],"visibleItems":[32],"needsIcon":[32],"hideList":[32],"activeItemIndex":[32],"activeChipIndex":[32],"activeDescendant":[32],"text":[32],"open":[32],"maxScrollerHeight":[32]},[[4,"click","documentClickHandler"],[0,"calciteComboboxItemChange","calciteComboboxItemChangeHandler"]]]);
 const CalciteComboboxItem = /*@__PURE__*/proxyCustomElement(CalciteComboboxItem$1, [1,"calcite-combobox-item",{"disabled":[516],"selected":[1540],"active":[4],"ancestors":[1040],"guid":[1],"icon":[1],"textLabel":[513,"text-label"],"value":[8],"constant":[516]}]);
 const CalciteComboboxItemGroup = /*@__PURE__*/proxyCustomElement(CalciteComboboxItemGroup$1, [1,"calcite-combobox-item-group",{"ancestors":[1040],"label":[1]}]);
 const CalciteDatePicker = /*@__PURE__*/proxyCustomElement(CalciteDatePicker$1, [1,"calcite-date-picker",{"activeRange":[1,"active-range"],"value":[1025],"headingLevel":[2,"heading-level"],"valueAsDate":[1040],"startAsDate":[1040],"endAsDate":[1040],"minAsDate":[1040],"maxAsDate":[1040],"min":[1],"max":[1],"intlPrevMonth":[1,"intl-prev-month"],"intlNextMonth":[1,"intl-next-month"],"locale":[1],"scale":[513],"range":[516],"start":[1025],"end":[1025],"proximitySelectionDisabled":[4,"proximity-selection-disabled"],"activeDate":[32],"activeStartDate":[32],"activeEndDate":[32],"localeData":[32],"hoverRange":[32]}]);
@@ -24357,16 +24744,16 @@ const CalciteDropdown = /*@__PURE__*/proxyCustomElement(CalciteDropdown$1, [1,"c
 const CalciteDropdownGroup = /*@__PURE__*/proxyCustomElement(CalciteDropdownGroup$1, [1,"calcite-dropdown-group",{"groupTitle":[513,"group-title"],"selectionMode":[513,"selection-mode"],"scale":[513]},[[0,"calciteDropdownItemSelect","updateActiveItemOnChange"]]]);
 const CalciteDropdownItem = /*@__PURE__*/proxyCustomElement(CalciteDropdownItem$1, [1,"calcite-dropdown-item",{"active":[1540],"iconFlipRtl":[513,"icon-flip-rtl"],"iconStart":[513,"icon-start"],"iconEnd":[513,"icon-end"],"href":[513],"label":[1],"rel":[1],"target":[1]},[[0,"click","onClick"],[0,"keydown","keyDownHandler"],[16,"calciteDropdownItemChange","updateActiveItemOnChange"]]]);
 const CalciteFab = /*@__PURE__*/proxyCustomElement(CalciteFab$1, [1,"calcite-fab",{"appearance":[513],"color":[513],"disabled":[516],"icon":[1],"label":[1],"loading":[516],"scale":[513],"text":[1],"textEnabled":[516,"text-enabled"]}]);
-const CalciteFilter = /*@__PURE__*/proxyCustomElement(CalciteFilter$1, [1,"calcite-filter",{"data":[16],"disabled":[516],"intlClear":[1,"intl-clear"],"intlLabel":[1,"intl-label"],"placeholder":[1],"empty":[32]}]);
+const CalciteFilter = /*@__PURE__*/proxyCustomElement(CalciteFilter$1, [1,"calcite-filter",{"data":[16],"items":[1040],"disabled":[516],"filteredItems":[1040],"intlClear":[1,"intl-clear"],"intlLabel":[1,"intl-label"],"placeholder":[1],"value":[1025]}]);
 const CalciteFlow = /*@__PURE__*/proxyCustomElement(CalciteFlow$1, [1,"calcite-flow",{"panelCount":[32],"flowDirection":[32],"panels":[32]},[[0,"calcitePanelBackClick","handleCalcitePanelBackClick"]]]);
-const CalciteGraph = /*@__PURE__*/proxyCustomElement(CalciteGraph$1, [1,"calcite-graph",{"data":[16],"colorStops":[16],"width":[2],"height":[2],"highlightMin":[2,"highlight-min"],"highlightMax":[2,"highlight-max"]}]);
+const CalciteGraph = /*@__PURE__*/proxyCustomElement(CalciteGraph$1, [1,"calcite-graph",{"data":[16],"colorStops":[16],"width":[2],"height":[2],"highlightMin":[2,"highlight-min"],"highlightMax":[2,"highlight-max"],"min":[2],"max":[2]}]);
 const CalciteHandle = /*@__PURE__*/proxyCustomElement(CalciteHandle$1, [1,"calcite-handle",{"activated":[1540],"textTitle":[513,"text-title"]}]);
 const CalciteIcon = /*@__PURE__*/proxyCustomElement(CalciteIcon$1, [1,"calcite-icon",{"icon":[513],"flipRtl":[516,"flip-rtl"],"scale":[513],"textLabel":[1,"text-label"],"pathData":[32],"visible":[32]}]);
-const CalciteInlineEditable = /*@__PURE__*/proxyCustomElement(CalciteInlineEditable$1, [6,"calcite-inline-editable",{"disabled":[516],"editingEnabled":[1540,"editing-enabled"],"loading":[1540],"controls":[516],"intlEnableEditing":[513,"intl-enable-editing"],"intlCancelEditing":[513,"intl-cancel-editing"],"intlConfirmChanges":[513,"intl-confirm-changes"],"scale":[1537],"afterConfirm":[16]},[[0,"calciteInputBlur","blurHandler"]]]);
-const CalciteInput = /*@__PURE__*/proxyCustomElement(CalciteInput$1, [6,"calcite-input",{"alignment":[513],"autofocus":[4],"clearable":[516],"disabled":[516],"groupSeparator":[4,"group-separator"],"icon":[520],"intlLoading":[1,"intl-loading"],"iconFlipRtl":[516,"icon-flip-rtl"],"label":[1],"loading":[516],"locale":[1],"localeFormat":[4,"locale-format"],"max":[514],"min":[514],"maxlength":[514],"maxLength":[514,"max-length"],"minLength":[514,"min-length"],"name":[513],"numberButtonType":[513,"number-button-type"],"placeholder":[1],"prefixText":[1,"prefix-text"],"readOnly":[4,"read-only"],"required":[4],"scale":[1537],"status":[1537],"step":[520],"suffixText":[1,"suffix-text"],"type":[513],"value":[1025],"localizedValue":[32]},[[0,"keydown","keyDownHandler"]]]);
-const CalciteInputDatePicker = /*@__PURE__*/proxyCustomElement(CalciteInputDatePicker$1, [1,"calcite-input-date-picker",{"value":[1025],"headingLevel":[2,"heading-level"],"valueAsDate":[1040],"startAsDate":[1040],"endAsDate":[1040],"minAsDate":[1040],"maxAsDate":[1040],"min":[1],"max":[1],"active":[1540],"intlPrevMonth":[1,"intl-prev-month"],"intlNextMonth":[1,"intl-next-month"],"locale":[1],"scale":[513],"range":[516],"start":[1025],"end":[1025],"overlayPositioning":[1,"overlay-positioning"],"proximitySelectionDisabled":[4,"proximity-selection-disabled"],"layout":[513],"focusedInput":[32],"localeData":[32]},[[0,"calciteDaySelect","calciteDaySelectHandler"]]]);
+const CalciteInlineEditable = /*@__PURE__*/proxyCustomElement(CalciteInlineEditable$1, [1,"calcite-inline-editable",{"disabled":[516],"editingEnabled":[1540,"editing-enabled"],"loading":[1540],"controls":[516],"intlEnableEditing":[513,"intl-enable-editing"],"intlCancelEditing":[513,"intl-cancel-editing"],"intlConfirmChanges":[513,"intl-confirm-changes"],"scale":[1537],"afterConfirm":[16]},[[0,"calciteInputBlur","blurHandler"]]]);
+const CalciteInput = /*@__PURE__*/proxyCustomElement(CalciteInput$1, [1,"calcite-input",{"alignment":[513],"autofocus":[4],"clearable":[516],"disabled":[516],"groupSeparator":[4,"group-separator"],"hidden":[4],"icon":[520],"intlLoading":[1,"intl-loading"],"iconFlipRtl":[516,"icon-flip-rtl"],"label":[1],"loading":[516],"locale":[1],"localeFormat":[4,"locale-format"],"max":[514],"min":[514],"maxlength":[514],"maxLength":[514,"max-length"],"minLength":[514,"min-length"],"name":[513],"numberButtonType":[513,"number-button-type"],"placeholder":[1],"prefixText":[1,"prefix-text"],"readOnly":[4,"read-only"],"required":[4],"scale":[1537],"status":[1537],"step":[520],"suffixText":[1,"suffix-text"],"editingEnabled":[1540,"editing-enabled"],"type":[513],"value":[1025],"localizedValue":[32]}]);
+const CalciteInputDatePicker = /*@__PURE__*/proxyCustomElement(CalciteInputDatePicker$1, [1,"calcite-input-date-picker",{"disabled":[516],"value":[1025],"headingLevel":[2,"heading-level"],"valueAsDate":[1040],"startAsDate":[1040],"endAsDate":[1040],"minAsDate":[1040],"maxAsDate":[1040],"min":[1],"max":[1],"active":[1540],"name":[1],"intlPrevMonth":[1,"intl-prev-month"],"intlNextMonth":[1,"intl-next-month"],"locale":[1],"scale":[513],"range":[516],"required":[516],"start":[1025],"end":[1025],"overlayPositioning":[1,"overlay-positioning"],"proximitySelectionDisabled":[4,"proximity-selection-disabled"],"layout":[513],"focusedInput":[32],"localeData":[32]},[[0,"calciteDaySelect","calciteDaySelectHandler"]]]);
 const CalciteInputMessage = /*@__PURE__*/proxyCustomElement(CalciteInputMessage$1, [1,"calcite-input-message",{"active":[516],"icon":[520],"scale":[1537],"status":[1537],"type":[513]}]);
-const CalciteInputTimePicker = /*@__PURE__*/proxyCustomElement(CalciteInputTimePicker$1, [1,"calcite-input-time-picker",{"active":[1540],"disabled":[516],"hourDisplayFormat":[1,"hour-display-format"],"intlHour":[1,"intl-hour"],"intlHourDown":[1,"intl-hour-down"],"intlHourUp":[1,"intl-hour-up"],"intlMeridiem":[1,"intl-meridiem"],"intlMeridiemDown":[1,"intl-meridiem-down"],"intlMeridiemUp":[1,"intl-meridiem-up"],"intlMinute":[1,"intl-minute"],"intlMinuteDown":[1,"intl-minute-down"],"intlMinuteUp":[1,"intl-minute-up"],"intlSecond":[1,"intl-second"],"intlSecondDown":[1,"intl-second-down"],"intlSecondUp":[1,"intl-second-up"],"name":[1],"scale":[513],"step":[2],"value":[1025]},[[0,"keyup","keyUpHandler"],[0,"calciteTimePickerBlur","timePickerBlurHandler"],[0,"calciteTimePickerChange","timePickerChangeHandler"],[0,"calciteTimePickerFocus","timePickerFocusHandler"]]]);
+const CalciteInputTimePicker = /*@__PURE__*/proxyCustomElement(CalciteInputTimePicker$1, [1,"calcite-input-time-picker",{"active":[1540],"disabled":[516],"hourDisplayFormat":[1,"hour-display-format"],"intlHour":[1,"intl-hour"],"intlHourDown":[1,"intl-hour-down"],"intlHourUp":[1,"intl-hour-up"],"intlMeridiem":[1,"intl-meridiem"],"intlMeridiemDown":[1,"intl-meridiem-down"],"intlMeridiemUp":[1,"intl-meridiem-up"],"intlMinute":[1,"intl-minute"],"intlMinuteDown":[1,"intl-minute-down"],"intlMinuteUp":[1,"intl-minute-up"],"intlSecond":[1,"intl-second"],"intlSecondDown":[1,"intl-second-down"],"intlSecondUp":[1,"intl-second-up"],"name":[1],"required":[516],"scale":[513],"step":[2],"value":[1025]},[[0,"keyup","keyUpHandler"],[0,"calciteTimePickerBlur","timePickerBlurHandler"],[0,"calciteTimePickerChange","timePickerChangeHandler"],[0,"calciteTimePickerFocus","timePickerFocusHandler"]]]);
 const CalciteLabel = /*@__PURE__*/proxyCustomElement(CalciteLabel$1, [1,"calcite-label",{"alignment":[513],"status":[513],"for":[513],"scale":[513],"layout":[513],"disableSpacing":[4,"disable-spacing"],"disabled":[516]}]);
 const CalciteLink = /*@__PURE__*/proxyCustomElement(CalciteLink$1, [1,"calcite-link",{"disabled":[516],"href":[513],"iconEnd":[513,"icon-end"],"iconFlipRtl":[513,"icon-flip-rtl"],"iconStart":[513,"icon-start"],"rel":[1],"target":[1],"childElType":[32]}]);
 const CalciteList = /*@__PURE__*/proxyCustomElement(CalciteList$1, [1,"calcite-list",{"headingLevel":[2,"heading-level"]}]);
@@ -24386,28 +24773,28 @@ const CalcitePopover = /*@__PURE__*/proxyCustomElement(CalcitePopover$1, [1,"cal
 const CalcitePopoverManager = /*@__PURE__*/proxyCustomElement(CalcitePopoverManager$1, [1,"calcite-popover-manager",{"selector":[1],"autoClose":[516,"auto-close"]},[[10,"click","closeOpenPopovers"]]]);
 const CalciteProgress = /*@__PURE__*/proxyCustomElement(CalciteProgress$1, [1,"calcite-progress",{"type":[1],"value":[2],"label":[1],"text":[1],"reversed":[4]}]);
 const CalciteRadio = /*@__PURE__*/proxyCustomElement(CalciteRadio$1, [1,"calcite-radio",{"checked":[516],"disabled":[516],"focused":[516],"hidden":[516],"hovered":[516],"scale":[513]}]);
-const CalciteRadioButton = /*@__PURE__*/proxyCustomElement(CalciteRadioButton$1, [2,"calcite-radio-button",{"checked":[1540],"disabled":[516],"focused":[1540],"guid":[1537],"hidden":[516],"hovered":[1540],"label":[1],"name":[513],"required":[516],"scale":[513],"value":[8]},[[1,"mouseenter","mouseenter"],[1,"mouseleave","mouseleave"]]]);
+const CalciteRadioButton = /*@__PURE__*/proxyCustomElement(CalciteRadioButton$1, [1,"calcite-radio-button",{"checked":[1540],"disabled":[516],"focused":[1540],"guid":[1537],"hidden":[516],"hovered":[1540],"label":[1],"name":[513],"required":[516],"scale":[513],"value":[1032]},[[1,"mouseenter","mouseenter"],[1,"mouseleave","mouseleave"]]]);
 const CalciteRadioButtonGroup = /*@__PURE__*/proxyCustomElement(CalciteRadioButtonGroup$1, [1,"calcite-radio-button-group",{"disabled":[516],"hidden":[516],"layout":[513],"name":[513],"required":[516],"scale":[513]},[[0,"calciteRadioButtonChange","radioButtonChangeHandler"]]]);
-const CalciteRadioGroup = /*@__PURE__*/proxyCustomElement(CalciteRadioGroup$1, [1,"calcite-radio-group",{"appearance":[513],"disabled":[516],"layout":[513],"name":[1],"scale":[513],"selectedItem":[1040],"width":[513]},[[0,"calciteRadioGroupItemChange","handleSelected"],[0,"keydown","handleKeyDown"]]]);
+const CalciteRadioGroup = /*@__PURE__*/proxyCustomElement(CalciteRadioGroup$1, [1,"calcite-radio-group",{"appearance":[513],"disabled":[516],"required":[516],"layout":[513],"name":[1],"scale":[513],"value":[1025],"selectedItem":[1040],"width":[513]},[[0,"calciteRadioGroupItemChange","handleSelected"],[0,"keydown","handleKeyDown"]]]);
 const CalciteRadioGroupItem = /*@__PURE__*/proxyCustomElement(CalciteRadioGroupItem$1, [1,"calcite-radio-group-item",{"checked":[1540],"icon":[513],"iconFlipRtl":[516,"icon-flip-rtl"],"iconPosition":[513,"icon-position"],"value":[1032],"useFallback":[32]}]);
-const CalciteRating = /*@__PURE__*/proxyCustomElement(CalciteRating$1, [1,"calcite-rating",{"scale":[513],"value":[1538],"readOnly":[516,"read-only"],"disabled":[516],"showChip":[516,"show-chip"],"count":[514],"average":[514],"intlRating":[1,"intl-rating"],"intlStars":[1,"intl-stars"],"hoverValue":[32],"focusValue":[32],"hasFocus":[32]},[[0,"blur","blurHandler"]]]);
+const CalciteRating = /*@__PURE__*/proxyCustomElement(CalciteRating$1, [1,"calcite-rating",{"scale":[513],"value":[1538],"readOnly":[516,"read-only"],"disabled":[516],"showChip":[516,"show-chip"],"count":[514],"average":[514],"name":[513],"intlRating":[1,"intl-rating"],"intlStars":[1,"intl-stars"],"required":[516],"hoverValue":[32],"focusValue":[32],"hasFocus":[32]},[[0,"blur","blurHandler"]]]);
 const CalciteScrim = /*@__PURE__*/proxyCustomElement(CalciteScrim$1, [1,"calcite-scrim",{"intlLoading":[1,"intl-loading"],"loading":[516]}]);
-const CalciteSelect = /*@__PURE__*/proxyCustomElement(CalciteSelect$1, [1,"calcite-select",{"disabled":[516],"label":[1],"scale":[513],"selectedOption":[1040],"width":[513]},[[0,"calciteOptionChange","handleOptionOrGroupChange"],[0,"calciteOptionGroupChange","handleOptionOrGroupChange"]]]);
+const CalciteSelect = /*@__PURE__*/proxyCustomElement(CalciteSelect$1, [1,"calcite-select",{"disabled":[516],"label":[1],"name":[1],"required":[516],"scale":[513],"value":[1025],"selectedOption":[1040],"width":[513]},[[0,"calciteOptionChange","handleOptionOrGroupChange"],[0,"calciteOptionGroupChange","handleOptionOrGroupChange"]]]);
 const CalciteShell = /*@__PURE__*/proxyCustomElement(CalciteShell$1, [1,"calcite-shell",{"contentBehind":[516,"content-behind"]}]);
 const CalciteShellCenterRow = /*@__PURE__*/proxyCustomElement(CalciteShellCenterRow$1, [1,"calcite-shell-center-row",{"detached":[516],"heightScale":[513,"height-scale"],"position":[513]}]);
 const CalciteShellPanel = /*@__PURE__*/proxyCustomElement(CalciteShellPanel$1, [1,"calcite-shell-panel",{"collapsed":[516],"detached":[516],"detachedHeightScale":[513,"detached-height-scale"],"widthScale":[513,"width-scale"],"position":[513]}]);
-const CalciteSlider = /*@__PURE__*/proxyCustomElement(CalciteSlider$1, [1,"calcite-slider",{"disabled":[516],"hasHistogram":[1540,"has-histogram"],"histogram":[16],"histogramStops":[16],"labelHandles":[516,"label-handles"],"labelTicks":[516,"label-ticks"],"max":[514],"maxLabel":[1,"max-label"],"maxValue":[1026,"max-value"],"min":[514],"minLabel":[1,"min-label"],"minValue":[1026,"min-value"],"mirrored":[516],"pageStep":[2,"page-step"],"precise":[4],"snap":[4],"step":[2],"ticks":[2],"value":[1538],"activeProp":[32],"minMaxValueRange":[32],"minValueDragRange":[32],"maxValueDragRange":[32],"tickValues":[32]},[[0,"keydown","keyDownHandler"],[0,"click","clickHandler"],[1,"pointerdown","pointerDownHandler"]]]);
+const CalciteSlider = /*@__PURE__*/proxyCustomElement(CalciteSlider$1, [1,"calcite-slider",{"disabled":[516],"hasHistogram":[1540,"has-histogram"],"histogram":[16],"histogramStops":[16],"labelHandles":[516,"label-handles"],"labelTicks":[516,"label-ticks"],"max":[514],"maxLabel":[1,"max-label"],"maxValue":[1026,"max-value"],"min":[514],"minLabel":[1,"min-label"],"minValue":[1026,"min-value"],"mirrored":[516],"name":[513],"pageStep":[2,"page-step"],"precise":[4],"required":[516],"snap":[4],"step":[2],"ticks":[2],"value":[1538],"activeProp":[32],"minMaxValueRange":[32],"minValueDragRange":[32],"maxValueDragRange":[32],"tickValues":[32]},[[0,"keydown","keyDownHandler"],[0,"click","clickHandler"],[1,"pointerdown","pointerDownHandler"]]]);
 const CalciteSortableList = /*@__PURE__*/proxyCustomElement(CalciteSortableList$1, [1,"calcite-sortable-list",{"dragSelector":[1,"drag-selector"],"group":[1],"handleSelector":[1,"handle-selector"],"layout":[1],"disabled":[516],"loading":[516],"handleActivated":[32]},[[0,"calciteHandleNudge","calciteHandleNudgeHandler"]]]);
 const CalciteSplitButton = /*@__PURE__*/proxyCustomElement(CalciteSplitButton$1, [1,"calcite-split-button",{"appearance":[513],"color":[513],"disabled":[516],"active":[516],"dropdownIconType":[513,"dropdown-icon-type"],"dropdownLabel":[513,"dropdown-label"],"loading":[516],"primaryIconEnd":[513,"primary-icon-end"],"primaryIconFlipRtl":[513,"primary-icon-flip-rtl"],"primaryIconStart":[513,"primary-icon-start"],"primaryLabel":[513,"primary-label"],"primaryText":[513,"primary-text"],"scale":[513],"width":[513]}]);
 const CalciteStepper = /*@__PURE__*/proxyCustomElement(CalciteStepper$1, [1,"calcite-stepper",{"icon":[516],"layout":[513],"numbered":[516],"scale":[513],"requestedContent":[1040]},[[0,"calciteStepperItemKeyEvent","calciteStepperItemKeyEvent"],[0,"calciteStepperItemRegister","registerItem"],[0,"calciteStepperItemSelect","updateItem"]]]);
 const CalciteStepperItem = /*@__PURE__*/proxyCustomElement(CalciteStepperItem$1, [1,"calcite-stepper-item",{"active":[1540],"complete":[516],"error":[4],"disabled":[4],"itemTitle":[1,"item-title"],"itemSubtitle":[1,"item-subtitle"],"layout":[1537],"icon":[1028],"numbered":[1028],"scale":[1537]},[[0,"keydown","keyDownHandler"],[16,"calciteStepperItemChange","updateActiveItemOnChange"]]]);
-const CalciteSwitch = /*@__PURE__*/proxyCustomElement(CalciteSwitch$1, [1,"calcite-switch",{"disabled":[516],"label":[1],"name":[513],"scale":[513],"switched":[4],"checked":[1540],"value":[520],"guid":[32],"tabindex":[32]},[[0,"keydown","keyDownHandler"]]]);
+const CalciteSwitch = /*@__PURE__*/proxyCustomElement(CalciteSwitch$1, [1,"calcite-switch",{"disabled":[516],"label":[1],"name":[513],"scale":[513],"switched":[1028],"checked":[1540],"value":[8],"tabindex":[32]}]);
 const CalciteTab = /*@__PURE__*/proxyCustomElement(CalciteTab$1, [1,"calcite-tab",{"tab":[513],"active":[1540],"scale":[1537],"labeledBy":[32]},[[16,"calciteTabChange","tabChangeHandler"]]]);
 const CalciteTabNav = /*@__PURE__*/proxyCustomElement(CalciteTabNav$1, [1,"calcite-tab-nav",{"storageId":[1,"storage-id"],"syncId":[1,"sync-id"],"scale":[1537],"layout":[1537],"position":[1537],"bordered":[1540],"indicatorOffset":[1026,"indicator-offset"],"indicatorWidth":[1026,"indicator-width"],"selectedTab":[32],"selectedTabEl":[32]},[[9,"resize","resizeHandler"],[0,"calciteTabsFocusPrevious","focusPreviousTabHandler"],[0,"calciteTabsFocusNext","focusNextTabHandler"],[0,"calciteTabsActivate","activateTabHandler"],[0,"calciteTabTitleRegister","updateTabTitles"],[16,"calciteTabChange","globalTabChangeHandler"]]]);
 const CalciteTabTitle = /*@__PURE__*/proxyCustomElement(CalciteTabTitle$1, [1,"calcite-tab-title",{"active":[1540],"disabled":[516],"iconEnd":[513,"icon-end"],"iconFlipRtl":[513,"icon-flip-rtl"],"iconStart":[513,"icon-start"],"layout":[1537],"position":[1537],"scale":[1537],"bordered":[1540],"tab":[513],"controls":[32],"hasText":[32]},[[16,"calciteTabChange","tabChangeHandler"],[0,"click","onClick"],[0,"keydown","keyDownHandler"]]]);
 const CalciteTabs = /*@__PURE__*/proxyCustomElement(CalciteTabs$1, [1,"calcite-tabs",{"layout":[513],"position":[513],"scale":[513],"bordered":[1540],"titles":[32],"tabs":[32]},[[0,"calciteTabTitleRegister","calciteTabTitleRegister"],[16,"calciteTabTitleUnregister","calciteTabTitleUnregister"],[0,"calciteTabRegister","calciteTabRegister"],[16,"calciteTabUnregister","calciteTabUnregister"]]]);
 const CalciteTile = /*@__PURE__*/proxyCustomElement(CalciteTile$1, [1,"calcite-tile",{"active":[516],"description":[513],"disabled":[516],"embed":[516],"focused":[516],"heading":[513],"hidden":[516],"href":[513],"icon":[513]}]);
-const CalciteTileSelect = /*@__PURE__*/proxyCustomElement(CalciteTileSelect$1, [1,"calcite-tile-select",{"checked":[1540],"description":[513],"disabled":[516],"heading":[513],"hidden":[516],"icon":[513],"name":[513],"inputEnabled":[516,"input-enabled"],"inputAlignment":[513,"input-alignment"],"type":[513],"value":[8],"width":[513],"focused":[32]},[[0,"calciteCheckboxChange","checkboxChangeHandler"],[0,"calciteInternalCheckboxFocus","checkboxFocusHandler"],[0,"calciteRadioButtonChange","radioButtonChangeHandler"],[0,"calciteInternalRadioButtonCheckedChange","radioButtonCheckedChangeHandler"],[0,"calciteInternalRadioButtonFocus","radioButtonFocusHandler"],[0,"click","click"],[1,"mouseenter","mouseenter"],[1,"mouseleave","mouseleave"]]]);
+const CalciteTileSelect = /*@__PURE__*/proxyCustomElement(CalciteTileSelect$1, [1,"calcite-tile-select",{"checked":[1540],"description":[513],"disabled":[516],"heading":[513],"hidden":[516],"icon":[513],"name":[520],"inputEnabled":[516,"input-enabled"],"inputAlignment":[513,"input-alignment"],"type":[513],"value":[8],"width":[513],"focused":[32]},[[0,"calciteCheckboxChange","checkboxChangeHandler"],[0,"calciteInternalCheckboxFocus","checkboxFocusHandler"],[0,"calciteRadioButtonChange","radioButtonChangeHandler"],[0,"calciteInternalRadioButtonCheckedChange","radioButtonCheckedChangeHandler"],[0,"calciteInternalRadioButtonFocus","radioButtonFocusHandler"],[0,"click","click"],[1,"mouseenter","mouseenter"],[1,"mouseleave","mouseleave"]]]);
 const CalciteTileSelectGroup = /*@__PURE__*/proxyCustomElement(CalciteTileSelectGroup$1, [1,"calcite-tile-select-group",{"layout":[513]}]);
 const CalciteTimePicker = /*@__PURE__*/proxyCustomElement(CalciteTimePicker$1, [1,"calcite-time-picker",{"hour":[1025],"hourDisplayFormat":[513,"hour-display-format"],"intlHour":[1,"intl-hour"],"intlHourDown":[1,"intl-hour-down"],"intlHourUp":[1,"intl-hour-up"],"intlMeridiem":[1,"intl-meridiem"],"intlMeridiemDown":[1,"intl-meridiem-down"],"intlMeridiemUp":[1,"intl-meridiem-up"],"intlMinute":[1,"intl-minute"],"intlMinuteDown":[1,"intl-minute-down"],"intlMinuteUp":[1,"intl-minute-up"],"intlSecond":[1,"intl-second"],"intlSecondDown":[1,"intl-second-down"],"intlSecondUp":[1,"intl-second-up"],"minute":[1025],"second":[1025],"scale":[513],"step":[514],"meridiem":[32],"displayHour":[32]},[[0,"blur","hostBlurHandler"],[0,"focus","hostFocusHandler"],[0,"keydown","keyDownHandler"]]]);
 const CalciteTip = /*@__PURE__*/proxyCustomElement(CalciteTip$1, [1,"calcite-tip",{"dismissed":[1540],"nonDismissible":[516,"non-dismissible"],"heading":[1],"headingLevel":[2,"heading-level"],"selected":[516],"intlClose":[1,"intl-close"]}]);