@esri/calcite-components 1.0.0-next.373 → 1.0.0-next.377

package/dist/collection/components/calcite-icon/assets/calcite-icon/puzzlePiece24.json

@@ -0,0 +1 @@
+"M14.284 6a.372.372 0 0 1-.359-.41c0-.164.137-.334.36-.597A2.388 2.388 0 0 0 15 3.405 2.408 2.408 0 0 0 12.595 1h-.19A2.408 2.408 0 0 0 10 3.405a2.388 2.388 0 0 0 .716 1.588c.222.263.359.433.359.598a.372.372 0 0 1-.36.409H4v6.716a1.37 1.37 0 0 0 1.409 1.358 1.947 1.947 0 0 0 1.25-.593c.31-.258.518-.481.896-.481a1.39 1.39 0 0 1 1.385 1.405v.19A1.39 1.39 0 0 1 7.555 16c-.378 0-.586-.223-.896-.481a1.947 1.947 0 0 0-1.25-.593A1.37 1.37 0 0 0 4 16.284V22h16V6zM19 21H5v-4.716a.372.372 0 0 1 .409-.358c.168 0 .341.137.61.361A2.246 2.246 0 0 0 7.555 17a2.39 2.39 0 0 0 2.385-2.405v-.19A2.39 2.39 0 0 0 7.555 12a2.246 2.246 0 0 0-1.536.713c-.269.224-.442.361-.61.361A.372.372 0 0 1 5 12.716V7h5.716a1.37 1.37 0 0 0 1.359-1.41 1.908 1.908 0 0 0-.596-1.242A1.47 1.47 0 0 1 11 3.405 1.407 1.407 0 0 1 12.405 2h.19A1.407 1.407 0 0 1 14 3.405a1.47 1.47 0 0 1-.479.943 1.908 1.908 0 0 0-.596 1.243A1.37 1.37 0 0 0 14.285 7H19z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/puzzlePiece32.json

@@ -0,0 +1 @@
+"M19.444 8a.722.722 0 0 1-.722-.749 1.967 1.967 0 0 1 .454-.988 3.66 3.66 0 0 0 .799-2.208c0-1.972-1.739-2.96-3.476-2.96-1.835 0-3.474 1.06-3.474 2.96a3.66 3.66 0 0 0 .799 2.208 1.967 1.967 0 0 1 .454.988.723.723 0 0 1-.722.749H4v8.53a1.733 1.733 0 0 0 .527 1.24 1.822 1.822 0 0 0 1.26.482 2.805 2.805 0 0 0 1.513-.627A2.705 2.705 0 0 1 8.945 17c1.378 0 2.005 1.282 2.005 2.473 0 1.193-.627 2.476-2.005 2.476a2.705 2.705 0 0 1-1.645-.625 2.805 2.805 0 0 0-1.513-.627 1.874 1.874 0 0 0-1.26.48A1.734 1.734 0 0 0 4 22.42V30h24V8zM27 29H5v-6.581a.729.729 0 0 1 .221-.521.704.704 0 0 1 .528-.2 1.957 1.957 0 0 1 .989.453 3.658 3.658 0 0 0 2.207.798c1.973 0 3.005-1.749 3.005-3.476 0-1.726-1.032-3.473-3.005-3.473a3.658 3.658 0 0 0-2.207.798 1.957 1.957 0 0 1-.99.454.673.673 0 0 1-.527-.201.727.727 0 0 1-.221-.52V9h8.556a1.724 1.724 0 0 0 1.721-1.786A2.804 2.804 0 0 0 14.65 5.7a2.706 2.706 0 0 1-.625-1.645c0-1.378 1.282-2.005 2.473-2.005 1.193 0 2.477.627 2.477 2.005A2.706 2.706 0 0 1 18.35 5.7a2.804 2.804 0 0 0-.627 1.514A1.723 1.723 0 0 0 19.444 9H27z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/ribbonRosette16.json

@@ -0,0 +1 @@
+"M8 3a5 5 0 1 0 5 5 5.006 5.006 0 0 0-5-5zm0 9a4 4 0 1 1 4-4 4.004 4.004 0 0 1-4 4zm1.646-5.354l.707.707-2.852 2.853-1.61-1.602.706-.709.902.899zM15.18 8.33a.558.558 0 0 1 0-.66l.526-.736a1.57 1.57 0 0 0 .213-1.412 1.63 1.63 0 0 0-1.02-1.008l-.877-.3a.6.6 0 0 1-.423-.545l-.026-.893a1.593 1.593 0 0 0-.685-1.254 1.671 1.671 0 0 0-1.42-.235l-.894.253a.68.68 0 0 1-.707-.216L9.3.616a1.73 1.73 0 0 0-2.597 0l-.568.708a.674.674 0 0 1-.707.216l-.894-.253a1.668 1.668 0 0 0-1.419.235 1.593 1.593 0 0 0-.686 1.254l-.026.893a.6.6 0 0 1-.423.546l-.876.299A1.63 1.63 0 0 0 .082 5.523a1.571 1.571 0 0 0 .212 1.41l.527.737a.558.558 0 0 1 0 .66l-.526.736a1.57 1.57 0 0 0-.213 1.412 1.63 1.63 0 0 0 1.02 1.008l.877.3a.6.6 0 0 1 .423.545l.026.893a1.593 1.593 0 0 0 .685 1.254 1.676 1.676 0 0 0 1.42.235l.894-.253a.675.675 0 0 1 .707.216l.567.708a1.677 1.677 0 0 0 2.598 0l.567-.708a.68.68 0 0 1 .707-.216l.894.253a1.676 1.676 0 0 0 1.419-.235 1.593 1.593 0 0 0 .686-1.254l.026-.893a.6.6 0 0 1 .422-.546l.877-.299a1.63 1.63 0 0 0 1.021-1.009 1.571 1.571 0 0 0-.212-1.41zm-.208 1.827a.616.616 0 0 1-.395.383l-.878.299a1.611 1.611 0 0 0-1.1 1.463l-.026.893a.58.58 0 0 1-.258.462.692.692 0 0 1-.576.094l-.893-.252a1.663 1.663 0 0 0-1.758.551l-.568.708a.706.706 0 0 1-1.038 0l-.568-.707a1.65 1.65 0 0 0-1.293-.617 1.69 1.69 0 0 0-.465.065l-.893.252a.692.692 0 0 1-.577-.094.58.58 0 0 1-.257-.462l-.026-.893a1.611 1.611 0 0 0-1.1-1.463l-.88-.3a.616.616 0 0 1-.393-.381.561.561 0 0 1 .08-.51l.525-.735a1.566 1.566 0 0 0 0-1.825l-.527-.736a.561.561 0 0 1-.078-.509.616.616 0 0 1 .395-.383l.878-.299a1.611 1.611 0 0 0 1.1-1.463l.026-.893a.58.58 0 0 1 .258-.462.691.691 0 0 1 .576-.094l.893.252a1.658 1.658 0 0 0 1.758-.551l.57-.709a.705.705 0 0 1 1.036 0l.568.708a1.662 1.662 0 0 0 1.758.552l.893-.252a.694.694 0 0 1 .577.094.58.58 0 0 1 .257.462l.026.893a1.611 1.611 0 0 0 1.1 1.463l.88.3a.616.616 0 0 1 .393.381.561.561 0 0 1-.08.51l-.525.735a1.566 1.566 0 0 0 0 1.825l.527.736a.561.561 0 0 1 .078.509z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/ribbonRosette24.json

@@ -0,0 +1 @@
+"M12 5.216A6.784 6.784 0 1 0 18.784 12 6.792 6.792 0 0 0 12 5.216zm0 12.6A5.815 5.815 0 1 1 17.815 12 5.822 5.822 0 0 1 12 17.815zm2.646-8.17l.707.707-3.853 3.854-1.854-1.853.707-.707 1.147 1.146zm6.711 2.91a1.023 1.023 0 0 1 0-1.147l.697-1.015a2.013 2.013 0 0 0-.987-3.037l-1.16-.412a1.018 1.018 0 0 1-.673-.927l-.034-1.23a2.014 2.014 0 0 0-2.583-1.877l-1.18.348a1.016 1.016 0 0 1-1.09-.354l-.75-.976a2.095 2.095 0 0 0-3.194 0l-.75.976a1.021 1.021 0 0 1-1.09.354l-1.18-.348A2.014 2.014 0 0 0 4.8 4.787L4.766 6.02a1.018 1.018 0 0 1-.673.926l-1.16.412a2.013 2.013 0 0 0-.987 3.037l.697 1.015a1.023 1.023 0 0 1 0 1.146l-.697 1.016a2.012 2.012 0 0 0 .987 3.035l1.16.413a1.005 1.005 0 0 1 .673.927l.034 1.23a2.013 2.013 0 0 0 2.583 1.877l1.18-.348a1.02 1.02 0 0 1 1.09.354l.75.976a2.015 2.015 0 0 0 3.194 0l.75-.976a1.025 1.025 0 0 1 1.09-.354l1.18.348a2.014 2.014 0 0 0 2.583-1.876l.034-1.231a1.005 1.005 0 0 1 .673-.927l1.16-.413a2.012 2.012 0 0 0 .987-3.035zm0 2.466a1.02 1.02 0 0 1-.624.642l-1.16.412a2.025 2.025 0 0 0-1.339 1.843l-.034 1.23a1.013 1.013 0 0 1-1.3.945l-1.18-.348a2.028 2.028 0 0 0-2.166.704l-.75.975a1.055 1.055 0 0 1-1.608 0l-.75-.975a2.026 2.026 0 0 0-1.602-.785 1.99 1.99 0 0 0-.564.08l-1.18.35a1.013 1.013 0 0 1-1.3-.946l-.034-1.23a2.025 2.025 0 0 0-1.34-1.843l-1.16-.412a1.014 1.014 0 0 1-.495-1.528l.696-1.015a2.027 2.027 0 0 0 0-2.278L2.77 9.828A1.014 1.014 0 0 1 3.267 8.3l1.16-.412a2.025 2.025 0 0 0 1.339-1.843l.034-1.23a1.018 1.018 0 0 1 .417-.793A1.03 1.03 0 0 1 7.1 3.87l1.18.348a2.021 2.021 0 0 0 2.166-.703l.75-.976a1.055 1.055 0 0 1 1.608 0l.75.976a2.025 2.025 0 0 0 2.166.703l1.18-.348a1.013 1.013 0 0 1 1.3.944l.034 1.23a2.025 2.025 0 0 0 1.34 1.844l1.16.412a1.014 1.014 0 0 1 .495 1.528l-.696 1.015a2.027 2.027 0 0 0 0 2.278l.696 1.015a1.018 1.018 0 0 1 .128.886z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/ribbonRosette32.json

@@ -0,0 +1 @@
+"M16 7.212A8.788 8.788 0 1 0 24.788 16 8.798 8.798 0 0 0 16 7.212zm0 16.6A7.812 7.812 0 1 1 23.812 16 7.82 7.82 0 0 1 16 23.812zm3.645-11.17l.71.703-5.814 5.869-2.402-2.357.7-.714 1.692 1.66zm8.695 4.192a1.53 1.53 0 0 1 0-1.716l.928-1.354a2.518 2.518 0 0 0-1.234-3.797l-1.547-.55a1.526 1.526 0 0 1-1.008-1.389l-.045-1.64a2.518 2.518 0 0 0-3.23-2.347l-1.574.465a1.53 1.53 0 0 1-1.633-.53l-1-1.302a2.518 2.518 0 0 0-3.993 0l-1.001 1.301a1.53 1.53 0 0 1-1.633.53l-1.574-.464a2.518 2.518 0 0 0-3.23 2.347l-.045 1.64a1.526 1.526 0 0 1-1.008 1.39l-1.548.549a2.518 2.518 0 0 0-1.233 3.797l.928 1.354a1.53 1.53 0 0 1 0 1.716l-.928 1.354a2.518 2.518 0 0 0 1.234 3.797l1.547.55a1.526 1.526 0 0 1 1.008 1.389l.045 1.64a2.518 2.518 0 0 0 3.23 2.347l1.574-.465a1.53 1.53 0 0 1 1.633.531l1 1.301a2.518 2.518 0 0 0 3.993 0l1.001-1.3a1.53 1.53 0 0 1 1.633-.532l1.574.465a2.518 2.518 0 0 0 3.23-2.347l.045-1.64a1.526 1.526 0 0 1 1.008-1.39l1.548-.549a2.518 2.518 0 0 0 1.233-3.797zm.295 3.248a1.529 1.529 0 0 1-.935.961l-1.547.55a2.534 2.534 0 0 0-1.674 2.303l-.045 1.642a1.517 1.517 0 0 1-1.947 1.414l-1.574-.465a2.529 2.529 0 0 0-2.709.88l-1 1.302a1.58 1.58 0 0 1-2.407 0l-1.001-1.301a2.533 2.533 0 0 0-2.005-.982 2.486 2.486 0 0 0-.704.101l-1.574.465a1.517 1.517 0 0 1-1.947-1.415l-.045-1.64a2.534 2.534 0 0 0-1.674-2.305L4.3 21.043a1.519 1.519 0 0 1-.744-2.29l.927-1.353a2.53 2.53 0 0 0 0-2.848l-.927-1.354A1.519 1.519 0 0 1 4.3 10.91l1.547-.55A2.534 2.534 0 0 0 7.52 8.057l.045-1.641A1.517 1.517 0 0 1 9.513 5l1.574.465a2.533 2.533 0 0 0 2.709-.88l1-1.302a1.579 1.579 0 0 1 2.407 0l1.001 1.301a2.533 2.533 0 0 0 2.71.88L22.486 5a1.517 1.517 0 0 1 1.947 1.415l.045 1.64a2.534 2.534 0 0 0 1.674 2.305l1.546.55a1.519 1.519 0 0 1 .744 2.288l-.927 1.354a2.53 2.53 0 0 0 0 2.848l.927 1.354a1.525 1.525 0 0 1 .192 1.328z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/speechBubbleExclamation16.json

@@ -0,0 +1 @@
+"M4.025 15.988V11.96H3.5A2.622 2.622 0 0 1 1 9.237v-5.5a2.622 2.622 0 0 1 2.5-2.725h9.963A2.639 2.639 0 0 1 16 3.737v5.5a2.639 2.639 0 0 1-2.537 2.724H8.946zM3.5 1.96a1.677 1.677 0 0 0-1.55 1.776v5.5a1.677 1.677 0 0 0 1.55 1.775h1.475v2.974l3.633-2.974h4.855a1.692 1.692 0 0 0 1.588-1.775v-5.5a1.692 1.692 0 0 0-1.588-1.776zm6 6.015a1 1 0 0 0-2 0v.048a1 1 0 0 0 2 0zM9 3H8v3h1z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/speechBubbleExclamation24.json

@@ -0,0 +1 @@
+"M6 21.963V17h-.75A3.254 3.254 0 0 1 2 13.75v-8.5A3.254 3.254 0 0 1 5.25 2h14.5A3.254 3.254 0 0 1 23 5.25v8.5A3.254 3.254 0 0 1 19.75 17h-6.926zM5.25 3A2.253 2.253 0 0 0 3 5.25v8.5A2.253 2.253 0 0 0 5.25 16H7v4l5.5-4h7.25A2.253 2.253 0 0 0 22 13.75v-8.5A2.253 2.253 0 0 0 19.75 3zM12 10h1V4h-1zm1.5 2.5a1 1 0 1 0-1 1 1 1 0 0 0 1-1z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/speechBubbleExclamation32.json

@@ -0,0 +1 @@
+"M7 28.943V23h-.5A3.504 3.504 0 0 1 3 19.5v-12A3.504 3.504 0 0 1 6.5 4h20A3.504 3.504 0 0 1 30 7.5v11.94a3.458 3.458 0 0 1-.373 1.652A3.514 3.514 0 0 1 26.5 23H15.32zM6.5 5A2.503 2.503 0 0 0 4 7.5v12A2.503 2.503 0 0 0 6.5 22H8v5l7-5h11.5a2.53 2.53 0 0 0 2.246-1.38A2.496 2.496 0 0 0 29 19.44V7.5A2.503 2.503 0 0 0 26.5 5zm11 13a1 1 0 1 0-1 1 1 1 0 0 0 1-1zM16 15h1V7h-1z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/survey16.json

@@ -0,0 +1 @@
+"M13 15H3V3h1v1h8V3h1l1-.999L12 2V1H9.723a1.984 1.984 0 0 0-3.446 0H4v1H2v14h12V7.899l-1 1zM5 2h2v-.318A.682.682 0 0 1 7.682 1h.636A.682.682 0 0 1 9 1.682V2h2v1H5zm9.646 1.646l.707.707L9.5 10.207 7.046 7.754l.707-.707L9.5 8.793z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/survey24.json

@@ -0,0 +1 @@
+"M19 21H5V5h2v2h10V5h2v2.172l1-1V4h-3V3h-3a2 2 0 0 0-4 0H7v1H4v18h16V11.828l-1 1zM8 4h3V2.615A.615.615 0 0 1 11.614 2h.771a.615.615 0 0 1 .615.615V4h3v2H8zm14.646 1.646l.707.707-8.853 8.854-3.854-3.854.707-.707 3.147 3.147z"

package/dist/collection/components/calcite-icon/assets/calcite-icon/survey32.json

@@ -0,0 +1 @@
+"M26 28H7V6h3v2h13V6h3v3.172l1-1V5h-4V3h-4.05a2.5 2.5 0 0 0-4.9 0H10v2H6v24h21V13.828l-1 1zM11 4h4.092A1.483 1.483 0 0 1 15 3.5a1.5 1.5 0 0 1 3 0 1.483 1.483 0 0 1-.092.5H22v3H11zm18.646 3.646l.707.707L19.5 19.207l-4.854-4.854.707-.707 4.147 4.147z"

package/dist/collection/components/calcite-inline-editable/calcite-inline-editable.js

@@ -3,9 +3,10 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, h, Listen, Method, Prop, Watch } from "@stencil/core";
-import { getElementProp } from "../../utils/dom";
+import { getElementProp, getSlotted } from "../../utils/dom";
 import { TEXT, CSS } from "./resources";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
+import { createObserver } from "../../utils/observers";
 /**
  * @slot - A slot for adding a `calcite-input`.
  */
@@ -36,26 +37,31 @@ export class CalciteInlineEditable {
      * @default "Save"
      */
     this.intlConfirmChanges = TEXT.intlConfirmChanges;
+    this.mutationObserver = createObserver("mutation", () => this.mutationObserverCallback());
     this.transitionEnd = () => {
       if (!this.editingEnabled && !!this.shouldEmitCancel) {
         this.calciteInlineEditableEditCancel.emit();
       }
     };
     this.enableEditing = () => {
-      this.valuePriorToEditing = this.inputElement.value;
+      var _a, _b;
+      this.valuePriorToEditing = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value;
       this.editingEnabled = true;
-      this.inputElement.setFocus();
+      (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.setFocus();
       this.calciteInlineEditableEnableEditingChange.emit();
     };
     this.disableEditing = () => {
       this.editingEnabled = false;
     };
     this.cancelEditing = () => {
-      this.inputElement.value = this.valuePriorToEditing;
+      if (this.inputElement) {
+        this.inputElement.value = this.valuePriorToEditing;
+      }
       this.disableEditing();
       this.enableEditingButton.setFocus();
     };
     this.escapeKeyHandler = async (e) => {
+      var _a;
       if (e.key !== "Escape") {
         if (e.key === "Tab" && this.shouldShowControls) {
           if (!e.shiftKey && e.target === this.inputElement) {
@@ -65,7 +71,7 @@ export class CalciteInlineEditable {
           if (!!e.shiftKey && e.target === this.cancelEditingButton) {
             e.preventDefault();
             e.stopPropagation();
-            this.inputElement.setFocus();
+            (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setFocus();
           }
         }
         return;
@@ -107,10 +113,14 @@ export class CalciteInlineEditable {
     };
   }
   disabledWatcher(disabled) {
-    this.inputElement.disabled = disabled;
+    if (this.inputElement) {
+      this.inputElement.disabled = disabled;
+    }
   }
   editingEnabledWatcher(newValue, oldValue) {
-    this.inputElement.editingEnabled = newValue;
+    if (this.inputElement) {
+      this.inputElement.editingEnabled = newValue;
+    }
     if (!newValue && !!oldValue) {
       this.shouldEmitCancel = true;
     }
@@ -121,17 +131,15 @@ export class CalciteInlineEditable {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    var _a;
     connectLabel(this);
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true });
+    this.mutationObserverCallback();
   }
   disconnectedCallback() {
+    var _a;
     disconnectLabel(this);
-  }
-  componentWillLoad() {
-    this.inputElement = this.el.querySelector("calcite-input");
-    this.inputElement.disabled = this.disabled;
-    this.inputElement.label = this.inputElement.label || getLabelText(this);
-    this.scale =
-      this.scale || this.inputElement.scale || getElementProp(this.el, "scale", undefined);
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   render() {
     return (h("div", { class: CSS.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler, onTransitionEnd: this.transitionEnd },
@@ -177,9 +185,26 @@ export class CalciteInlineEditable {
   //  Private Methods
   //
   //--------------------------------------------------------------------------
+  mutationObserverCallback() {
+    var _a;
+    this.updateSlottedInput();
+    this.scale =
+      this.scale || ((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.scale) || getElementProp(this.el, "scale", undefined);
+  }
   onLabelClick() {
     this.setFocus();
   }
+  updateSlottedInput() {
+    const inputElement = getSlotted(this.el, {
+      matches: "calcite-input"
+    });
+    this.inputElement = inputElement;
+    if (!inputElement) {
+      return;
+    }
+    this.inputElement.disabled = this.disabled;
+    this.inputElement.label = this.inputElement.label || getLabelText(this);
+  }
   get shouldShowControls() {
     return this.editingEnabled && this.controls;
   }

package/dist/collection/components/calcite-input/calcite-input.js

@@ -3,7 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from "@stencil/core";
-import { getElementDir, getElementProp, setRequestedIcon } from "../../utils/dom";
+import { getElementDir, getElementProp, getSlotted, setRequestedIcon } from "../../utils/dom";
 import { CSS, INPUT_TYPE_ICONS, SLOTS } from "./resources";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
 import { connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
@@ -12,6 +12,7 @@ import { numberKeys } from "../../utils/key";
 import { isValidNumber, parseNumberString, sanitizeNumberString } from "../../utils/number";
 import { CSS_UTILITY, TEXT } from "../../utils/resources";
 import { decimalPlaces } from "../../utils/math";
+import { createObserver } from "../../utils/observers";
 /**
  * @slot action - A slot for positioning a button next to an input
  */
@@ -76,6 +77,7 @@ export class CalciteInput {
     this.childElType = "input";
     /** whether the value of the input was changed as a result of user typing or not */
     this.internalValueChange = false;
+    this.mutationObserver = createObserver("mutation", () => this.setDisabledAction());
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -114,7 +116,8 @@ export class CalciteInput {
       }
     };
     this.inputFocusHandler = (event) => {
-      if (event.target !== this.slottedActionEl) {
+      const slottedActionEl = getSlotted(this.el, "action");
+      if (event.target !== slottedActionEl) {
         this.setFocus();
       }
       this.calciteInputFocus.emit({
@@ -358,6 +361,7 @@ export class CalciteInput {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    var _a;
     this.scale = getElementProp(this.el, "scale", this.scale);
     this.status = getElementProp(this.el, "status", this.status);
     this.inlineEditableEl = this.el.closest("calcite-inline-editable");
@@ -374,10 +378,14 @@ export class CalciteInput {
     }
     connectLabel(this);
     connectForm(this);
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true });
+    this.setDisabledAction();
   }
   disconnectedCallback() {
+    var _a;
     disconnectLabel(this);
     disconnectForm(this);
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   componentWillLoad() {
     var _a, _b;
@@ -386,10 +394,6 @@ export class CalciteInput {
     this.minString = (_b = this.min) === null || _b === void 0 ? void 0 : _b.toString();
     this.requestedIcon = setRequestedIcon(INPUT_TYPE_ICONS, this.icon, this.type);
   }
-  componentDidLoad() {
-    this.slottedActionEl = this.el.querySelector("[slot=action]");
-    this.setDisabledAction();
-  }
   componentShouldUpdate(newValue, oldValue, property) {
     if (this.type === "number" && property === "value" && newValue && !isValidNumber(newValue)) {
       this.setValue({
@@ -461,10 +465,10 @@ export class CalciteInput {
     }
   }
   setDisabledAction() {
-    if (!this.slottedActionEl) {
+    const slottedActionEl = getSlotted(this.el, "action");
+    if (!slottedActionEl) {
       return;
     }
-    const slottedActionEl = this.slottedActionEl;
     this.disabled
       ? slottedActionEl.setAttribute("disabled", "")
       : slottedActionEl.removeAttribute("disabled");

package/dist/collection/components/calcite-modal/calcite-modal.js

@@ -98,7 +98,7 @@ export class CalciteModal {
       }
     };
     this.updateFooterVisibility = () => {
-      this.hasFooter = !!this.el.querySelector(`[slot=${SLOTS.back}], [slot=${SLOTS.secondary}], [slot=${SLOTS.primary}]`);
+      this.hasFooter = !!getSlotted(this.el, [SLOTS.back, SLOTS.primary, SLOTS.secondary]);
     };
   }
   //--------------------------------------------------------------------------

package/dist/collection/components/calcite-notice/calcite-notice.css

@@ -241,6 +241,7 @@
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
   padding: var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);
+  flex: 0 0 auto;
   display: flex;
   min-width: 0px;
   flex-direction: column;

package/dist/collection/components/calcite-notice/calcite-notice.js

@@ -66,9 +66,6 @@ export class CalciteNotice {
   componentWillLoad() {
     this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
   }
-  componentDidLoad() {
-    this.noticeLinkEl = this.el.querySelector("calcite-link");
-  }
   render() {
     const { el } = this;
     const closeButton = (h("button", { "aria-label": this.intlClose, class: CSS.close, onClick: this.close, ref: (el) => (this.closeButton = el) },
@@ -92,11 +89,12 @@ export class CalciteNotice {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    if (!this.closeButton && !this.noticeLinkEl) {
+    const noticeLinkEl = this.el.querySelector("calcite-link");
+    if (!this.closeButton && !noticeLinkEl) {
       return;
     }
-    if (this.noticeLinkEl) {
-      this.noticeLinkEl.setFocus();
+    if (noticeLinkEl) {
+      noticeLinkEl.setFocus();
     }
     else if (this.closeButton) {
       this.closeButton.focus();

package/dist/collection/components/calcite-panel/calcite-panel.css

@@ -155,6 +155,7 @@ h4.heading, h5.heading {
 .container {
   margin: 0px;
   display: flex;
+  width: 100%;
   flex: 1 1 auto;
   flex-direction: column;
   align-items: stretch;

package/dist/collection/components/calcite-radio-button/calcite-radio-button.js

@@ -129,10 +129,6 @@ export class CalciteRadioButton {
   }
   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();
-    }
   }
   //--------------------------------------------------------------------------
   //

package/dist/collection/components/calcite-radio-button-group/calcite-radio-button-group.js

@@ -3,6 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Host, h, Element, Prop, Watch, Event, Listen } from "@stencil/core";
+import { createObserver } from "../../utils/observers";
 /**
  * @slot - A slot for adding `calcite-radio-button`s.
  */
@@ -23,6 +24,12 @@ export class CalciteRadioButtonGroup {
     this.required = false;
     /** The scale (size) of the radio button group. */
     this.scale = "m";
+    // --------------------------------------------------------------------------
+    //
+    //  Private Properties
+    //
+    // --------------------------------------------------------------------------
+    this.mutationObserver = createObserver("mutation", () => this.passPropsToRadioButtons());
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -59,7 +66,13 @@ export class CalciteRadioButtonGroup {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    var _a;
     this.passPropsToRadioButtons();
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   //--------------------------------------------------------------------------
   //

package/dist/collection/components/calcite-rating/calcite-rating.css

@@ -135,6 +135,7 @@
   cursor: pointer;
   outline-offset: 0;
   outline-color: transparent;
+  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
   color: var(--calcite-ui-border-input);
   transition: var(--calcite-animation-timing);
   transform: scale(1);

package/dist/collection/components/calcite-slider/calcite-slider.css

@@ -192,6 +192,7 @@
   background-color: var(--calcite-ui-foreground-1);
   outline-offset: 0;
   outline-color: transparent;
+  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
   height: var(--calcite-slider-handle-size);
   width: var(--calcite-slider-handle-size);
   box-shadow: 0 0 0 2px var(--calcite-ui-text-3) inset;

package/dist/collection/components/calcite-slider/calcite-slider.js

@@ -83,9 +83,7 @@ export class CalciteSlider {
       }
     };
     this.dragEnd = (event) => {
-      document.removeEventListener("pointermove", this.dragUpdate);
-      document.removeEventListener("pointerup", this.dragEnd);
-      document.removeEventListener("pointercancel", this.dragEnd);
+      this.removeDragListeners();
       this.focusActiveHandle(event.clientX);
       if (this.lastDragPropValue != this[this.dragProp]) {
         this.emitChange();
@@ -120,6 +118,7 @@ export class CalciteSlider {
   disconnectedCallback() {
     disconnectLabel(this);
     disconnectForm(this);
+    this.removeDragListeners();
   }
   componentWillLoad() {
     this.isRange = !!(this.maxValue || this.maxValue === 0);
@@ -515,6 +514,11 @@ export class CalciteSlider {
   emitChange() {
     this.calciteSliderChange.emit();
   }
+  removeDragListeners() {
+    document.removeEventListener("pointermove", this.dragUpdate);
+    document.removeEventListener("pointerup", this.dragEnd);
+    document.removeEventListener("pointercancel", this.dragEnd);
+  }
   /**
    * Set the prop value if changed at the component level
    * @param valueProp

package/dist/collection/components/calcite-tab-nav/calcite-tab-nav.css

@@ -123,6 +123,7 @@
   height: 0.125rem;
   background-color: var(--calcite-ui-brand);
   transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }

package/dist/collection/components/calcite-time-picker/calcite-time-picker.js

@@ -524,7 +524,7 @@ export class CalciteTimePicker {
         [CSS.showMeridiem]: showMeridiem,
         [CSS.showSecond]: this.showSecond,
         [CSS[`scale-${this.scale}`]]: true
-      } },
+      }, dir: "ltr" },
       h("div", { class: CSS.column, role: "group" },
         h("span", { "aria-label": this.intlHourUp, class: {
             [CSS.button]: true,

package/dist/collection/components/calcite-tooltip/calcite-tooltip.js

@@ -13,12 +13,12 @@ import { queryElementRoots } from "../../utils/dom";
 export class CalciteTooltip {
   constructor() {
     /**
-     * Offset the position of the popover away from the reference element.
+     * Offset the position of the tooltip away from the reference element.
      * @default 6
      */
     this.offsetDistance = defaultOffsetDistance;
     /**
-     * Offset the position of the popover along the reference element.
+     * Offset the position of the tooltip along the reference element.
      */
     this.offsetSkidding = 0;
     /**
@@ -227,7 +227,7 @@ export class CalciteTooltip {
             "name": "default",
             "text": "6"
           }],
-        "text": "Offset the position of the popover away from the reference element."
+        "text": "Offset the position of the tooltip away from the reference element."
       },
       "attribute": "offset-distance",
       "reflect": true,
@@ -245,7 +245,7 @@ export class CalciteTooltip {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Offset the position of the popover along the reference element."
+        "text": "Offset the position of the tooltip along the reference element."
       },
       "attribute": "offset-skidding",
       "reflect": true,

package/dist/collection/components/calcite-tree-item/calcite-tree-item.css

@@ -133,6 +133,11 @@
   position: absolute;
   top: 0px;
   width: 1px;
+  transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
   transition-property: all;
   transition-duration: var(--calcite-animation-timing);
   transition-timing-function: ease-in-out;

package/dist/collection/components/calcite-tree-item/calcite-tree-item.js

@@ -34,7 +34,7 @@ export class CalciteTreeItem {
       this.expanded = !this.expanded;
       if (this.selectionMode !== TreeSelectionMode.Ancestors) {
         this.calciteTreeItemSelect.emit({
-          modifyCurrentSelection: event.shiftKey,
+          modifyCurrentSelection: this.isSelectionMultiLike,
           forceToggle: true
         });
       }
@@ -68,6 +68,11 @@ export class CalciteTreeItem {
   expandedHandler(newValue) {
     this.updateParentIsExpanded(this.el, newValue);
   }
+  getselectionMode() {
+    this.isSelectionMultiLike =
+      this.selectionMode === TreeSelectionMode.Multi ||
+        this.selectionMode === TreeSelectionMode.MultiChildren;
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -162,7 +167,7 @@ export class CalciteTreeItem {
       window.open(link.href, target);
     }
     this.calciteTreeItemSelect.emit({
-      modifyCurrentSelection: e.shiftKey || this.selectionMode === TreeSelectionMode.Ancestors,
+      modifyCurrentSelection: this.selectionMode === TreeSelectionMode.Ancestors || this.isSelectionMultiLike,
       forceToggle: false
     });
   }
@@ -171,7 +176,7 @@ export class CalciteTreeItem {
     switch (e.key) {
       case " ":
         this.calciteTreeItemSelect.emit({
-          modifyCurrentSelection: e.shiftKey,
+          modifyCurrentSelection: this.isSelectionMultiLike,
           forceToggle: false
         });
         e.preventDefault();
@@ -186,7 +191,7 @@ export class CalciteTreeItem {
         }
         else {
           this.calciteTreeItemSelect.emit({
-            modifyCurrentSelection: e.shiftKey,
+            modifyCurrentSelection: this.isSelectionMultiLike,
             forceToggle: false
           });
         }
@@ -505,6 +510,9 @@ export class CalciteTreeItem {
   static get watchers() { return [{
       "propName": "expanded",
       "methodName": "expandedHandler"
+    }, {
+      "propName": "selectionMode",
+      "methodName": "getselectionMode"
     }]; }
   static get listeners() { return [{
       "name": "click",

package/dist/collection/components/calcite-value-list-item/calcite-value-list-item.css

@@ -120,6 +120,7 @@ calcite-pick-list-item {
   padding-bottom: 0px;
   padding-left: 0.25rem;
   padding-right: 0.25rem;
+  color: var(--calcite-ui-text-1);
   color: var(--calcite-ui-border-1);
   outline-offset: 0;
   outline-color: transparent;

package/dist/components/calcite-action-menu2.js

@@ -144,10 +144,7 @@ let CalciteActionMenu = class extends HTMLElement {
     };
     this.getActions = () => {
       const { el } = this;
-      const assignedActions = this.getAssignedElements().filter((element) => element.tagName === "CALCITE-ACTION" && element.slot !== "trigger");
-      const actionElements = assignedActions.length
-        ? assignedActions
-        : Array.from(el.querySelectorAll("calcite-action:not([slot=trigger])"));
+      const actionElements = getSlotted(el, { all: true, matches: "calcite-action" });
       this.updateActions(actionElements);
       this.actionElements = actionElements;
       this.connectMenuButtonEl();

package/dist/components/calcite-action2.js

@@ -21,7 +21,7 @@ const TEXT = {
   loading: "Loading"
 };
 
-const calciteActionCss = "@-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:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-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:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex;background-color:transparent}:host([disabled]){pointer-events:none}.button{position:relative;margin:0px;display:-ms-flexbox;display:flex;width:auto;cursor:pointer;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;border-style:none;background-color:var(--calcite-ui-foreground-1);fill:var(--calcite-ui-text-3);font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-3);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;font-family:inherit;text-align:unset;-ms-flex:1 0 auto;flex:1 0 auto}.button:hover{background-color:var(--calcite-ui-foreground-2);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1)}.button:focus{background-color:var(--calcite-ui-foreground-2);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1);outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.button:active{background-color:var(--calcite-ui-foreground-3)}.button .icon-container{pointer-events:none;margin:0px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:1rem;min-height:1rem}.button .text-container{margin:0px;width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1rem;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-transition-property:width;transition-property:width}.button .text-container--visible{width:auto;-ms-flex:1 1 auto;flex:1 1 auto;opacity:1}:host([scale=s]) .button{padding:0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=s]) .button--text-visible .icon-container{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}:host([scale=m]) .button{padding:1rem;font-size:var(--calcite-font-size--1);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=m]) .button--text-visible .icon-container{-webkit-margin-end:0.75rem;margin-inline-end:0.75rem}:host([scale=l]) .button{padding:1.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=l]) .button--text-visible .icon-container{-webkit-margin-end:1rem;margin-inline-end:1rem}:host([alignment=center]) .button{-ms-flex-pack:center;justify-content:center}:host([alignment=end]) .button{-ms-flex-pack:end;justify-content:flex-end}:host([alignment=center]) .button .text-container--visible,:host([alignment=end]) .button .text-container--visible{-ms-flex:0 1 auto;flex:0 1 auto}:host([scale=s][compact]) .button,:host([scale=m][compact]) .button,:host([scale=l][compact]) .button{padding-left:0px;padding-right:0px}.slot-container{display:-ms-flexbox;display:flex}.slot-container--hidden{display:none}.button--text-visible{width:100%}:host([active]) .button,:host([active]) .button:hover,:host([active]) .button:focus,:host([active][loading]) .button{background-color:var(--calcite-ui-foreground-3);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1)}:host([active]) .button:active{background-color:var(--calcite-ui-foreground-1)}:host([appearance=clear]) .button{background-color:transparent;-webkit-transition-property:-webkit-box-shadow;transition-property:-webkit-box-shadow;transition-property:box-shadow;transition-property:box-shadow, -webkit-box-shadow;-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)}:host([appearance=clear]) .button:hover,:host([appearance=clear]) .button:focus{background-color:transparent;-webkit-box-shadow:0 0 0 2px var(--calcite-ui-border-1) inset;box-shadow:0 0 0 2px var(--calcite-ui-border-1) inset}:host([active][appearance=clear]) .button,:host([active][appearance=clear]) .button:hover,:host([active][appearance=clear]) .button:focus{background-color:var(--calcite-ui-foreground-3);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1)}:host([appearance=clear][loading]) .button,:host([appearance=clear][disabled]) .button{background-color:transparent}:host([loading]) .button,:host([loading]) .button:hover,:host([loading]) .button:focus{background-color:var(--calcite-ui-foreground-1)}:host([loading]) .button .text-container,:host([loading]) .button:hover .text-container,:host([loading]) .button:focus .text-container{opacity:var(--calcite-ui-opacity-disabled)}:host([loading]) calcite-loader[inline]{margin-right:0px;color:var(--calcite-ui-text-3)}:host([disabled]) .button,:host([disabled]) .button:hover,:host([disabled]) .button:focus{cursor:default;background-color:var(--calcite-ui-foreground-1);opacity:var(--calcite-ui-opacity-disabled)}:host([disabled][active]) .button,:host([disabled][active]) .button:hover,:host([disabled][active]) .button:focus{background-color:var(--calcite-ui-foreground-3);opacity:var(--calcite-ui-opacity-disabled)}:host([indicator]) .button::after{content:\"\";position:absolute;z-index:10;height:0.5rem;width:0.5rem;border-radius:9999px;border-width:2px;background-color:var(--calcite-ui-brand);border-color:var(--calcite-ui-foreground-1);inset-block-end:0.75rem;inset-inline-end:0.75rem}:host([indicator]) .button--text-visible::after{inset-block-end:auto}:host([indicator]) .button--text-visible .text-container--visible{-webkit-margin-end:1rem;margin-inline-end:1rem}:host([indicator]) .button:hover::after,:host([indicator]) .button:focus::after{border-color:var(--calcite-ui-foreground-1)}:host([indicator][scale=s]) .button::after{inset-block-end:0.25rem;inset-inline-end:0.25rem}:host([indicator][scale=s]) .button--text-visible::after{inset-block-end:auto;inset-inline-end:0.5rem}:host([indicator][active]) .button::after{border-color:var(--calcite-ui-foreground-3)}";
+const calciteActionCss = "@-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:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-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:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:-ms-flexbox;display:flex;background-color:transparent}:host([disabled]){pointer-events:none}.button{position:relative;margin:0px;display:-ms-flexbox;display:flex;width:auto;cursor:pointer;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;border-style:none;background-color:var(--calcite-ui-foreground-1);fill:var(--calcite-ui-text-3);font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-3);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;font-family:inherit;text-align:unset;-ms-flex:1 0 auto;flex:1 0 auto}.button:hover{background-color:var(--calcite-ui-foreground-2);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1)}.button:focus{background-color:var(--calcite-ui-foreground-2);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1);outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.button:active{background-color:var(--calcite-ui-foreground-3)}.button .icon-container{pointer-events:none;margin:0px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;min-width:1rem;min-height:1rem}.button .text-container{margin:0px;width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1rem;opacity:0;-webkit-transition-property:opacity;transition-property:opacity;-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-transition-property:margin;transition-property:margin;-webkit-transition-property:width;transition-property:width}.button .text-container--visible{width:auto;-ms-flex:1 1 auto;flex:1 1 auto;opacity:1}:host([scale=s]) .button{padding:0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=s]) .button--text-visible .icon-container{-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}:host([scale=m]) .button{padding:1rem;font-size:var(--calcite-font-size--1);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=m]) .button--text-visible .icon-container{-webkit-margin-end:0.75rem;margin-inline-end:0.75rem}:host([scale=l]) .button{padding:1.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;font-weight:var(--calcite-font-weight-normal)}:host([scale=l]) .button--text-visible .icon-container{-webkit-margin-end:1rem;margin-inline-end:1rem}:host([alignment=center]) .button{-ms-flex-pack:center;justify-content:center}:host([alignment=end]) .button{-ms-flex-pack:end;justify-content:flex-end}:host([alignment=center]) .button .text-container--visible,:host([alignment=end]) .button .text-container--visible{-ms-flex:0 1 auto;flex:0 1 auto}:host([scale=s][compact]) .button,:host([scale=m][compact]) .button,:host([scale=l][compact]) .button{padding-left:0px;padding-right:0px}.slot-container{display:-ms-flexbox;display:flex}.slot-container--hidden{display:none}.button--text-visible{width:100%}:host([active]) .button,:host([active]) .button:hover,:host([active]) .button:focus,:host([active][loading]) .button{background-color:var(--calcite-ui-foreground-3);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1)}:host([active]) .button:active{background-color:var(--calcite-ui-foreground-1)}:host([appearance=clear]) .button{background-color:transparent;-webkit-transition-property:-webkit-box-shadow;transition-property:-webkit-box-shadow;transition-property:box-shadow;transition-property:box-shadow, -webkit-box-shadow;-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)}:host([appearance=clear]) .button:hover,:host([appearance=clear]) .button:focus{background-color:transparent;-webkit-box-shadow:0 0 0 2px var(--calcite-ui-border-1) inset;box-shadow:0 0 0 2px var(--calcite-ui-border-1) inset}:host([active][appearance=clear]) .button,:host([active][appearance=clear]) .button:hover,:host([active][appearance=clear]) .button:focus{background-color:var(--calcite-ui-foreground-3);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1)}:host([appearance=clear][loading]) .button,:host([appearance=clear][disabled]) .button{background-color:transparent}:host([loading]) .button,:host([loading]) .button:hover,:host([loading]) .button:focus{background-color:var(--calcite-ui-foreground-1)}:host([loading]) .button .text-container,:host([loading]) .button:hover .text-container,:host([loading]) .button:focus .text-container{opacity:var(--calcite-ui-opacity-disabled)}:host([loading]) calcite-loader[inline]{margin-right:0px;color:var(--calcite-ui-text-3)}:host([disabled]) .button,:host([disabled]) .button:hover,:host([disabled]) .button:focus{cursor:default;background-color:var(--calcite-ui-foreground-1);opacity:var(--calcite-ui-opacity-disabled)}:host([disabled][active]) .button,:host([disabled][active]) .button:hover,:host([disabled][active]) .button:focus{background-color:var(--calcite-ui-foreground-3);opacity:var(--calcite-ui-opacity-disabled)}:host([indicator]) .button::after{content:\"\";position:absolute;z-index:10;height:0.5rem;width:0.5rem;border-radius:9999px;border-width:2px;background-color:var(--calcite-ui-brand);border-color:var(--calcite-ui-foreground-1);inset-block-end:0.75rem;inset-inline-end:0.75rem}:host([indicator]) .button--text-visible::after{inset-block-end:auto}:host([indicator]) .button--text-visible .text-container--visible{-webkit-margin-end:1rem;margin-inline-end:1rem}:host([indicator]) .button:hover::after,:host([indicator]) .button:focus::after{border-color:var(--calcite-ui-foreground-1)}:host([indicator][scale=s]) .button::after{inset-block-end:0.25rem;inset-inline-end:0.25rem}:host([indicator][scale=s]) .button--text-visible::after{inset-block-end:auto;inset-inline-end:0.5rem}:host([indicator][active]) .button::after{border-color:var(--calcite-ui-foreground-3)}";
 
 let CalciteAction = class extends HTMLElement {
   constructor() {