@esri/calcite-components 1.0.0-beta.9 → 1.0.0-beta.90

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

@@ -1,90 +1,201 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './core-26bd2899.js';
-import { g as getElementDir } from './dom-73b84262.js';
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.90
+ */
+import { r as registerInstance, h, g as getElement } from './index-125082eb.js';
+import { c as closestElementCrossShadowBoundary } from './dom-796bedfe.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-a26004cb.js';
+import { c as createObserver } from './observers-20a0920e.js';
+import { u as updateHostInteraction } from './interactive-010acdfb.js';
+import { s as submitForm, r as resetForm } from './form-4ca0d7b1.js';
+import './guid-b66e2624.js';
 
-const CalciteButton = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        /** specify the color of the button, defaults to blue */
-        this.color = "blue";
-        /** specify the appearance style of the button, defaults to solid. Specifying "inline" will render the component as an anchor */
-        this.appearance = "solid";
-        /** Select theme (light or dark) */
-        this.theme = "light";
-        /** specify the scale of the button, defaults to m */
-        this.scale = "m";
-        /** specify the width of the button, defaults to auto */
-        this.width = "auto";
-        /** optionally add a calcite-loader component inline to indicate loading is occuring. You can add and remove this prop depending on status  */
-        this.loading = false;
-        /** optionally used with icon, select where to position the icon */
-        this.iconposition = "start";
-        /** @internal */
-        // hastext prop for spacing icon when text is present in slot
-        this.hastext = false;
-    }
-    connectedCallback() {
-        // prop validations
-        let appearance = ["solid", "outline", "clear", "inline", "transparent"];
-        if (!appearance.includes(this.appearance))
-            this.appearance = "solid";
-        let color = ["blue", "red", "dark", "light"];
-        if (!color.includes(this.color))
-            this.color = "blue";
-        let scale = ["xs", "s", "m", "l", "xl"];
-        if (!scale.includes(this.scale))
-            this.scale = "m";
-        let width = ["auto", "half", "full"];
-        if (!width.includes(this.width))
-            this.width = "auto";
-        let theme = ["dark", "light"];
-        if (!theme.includes(this.theme))
-            this.theme = "light";
-        let iconposition = ["start", "end"];
-        if (this.icon !== null && !iconposition.includes(this.iconposition))
-            this.iconposition = "start";
+(function(prototype) {
+  if (typeof prototype.requestSubmit == "function") return
+
+  prototype.requestSubmit = function(submitter) {
+    if (submitter) {
+      validateSubmitter(submitter, this);
+      submitter.click();
+    } else {
+      submitter = document.createElement("input");
+      submitter.type = "submit";
+      submitter.hidden = true;
+      this.appendChild(submitter);
+      submitter.click();
+      this.removeChild(submitter);
     }
-    componentDidLoad() {
-        {
-            this.hastext = this.el.textContent.length > 0;
-        }
+  };
+
+  function validateSubmitter(submitter, form) {
+    submitter instanceof HTMLElement || raise(TypeError, "parameter 1 is not of type 'HTMLElement'");
+    submitter.type == "submit" || raise(TypeError, "The specified element is not a submit button");
+    submitter.form == form || raise(DOMException, "The specified element is not owned by this form element", "NotFoundError");
+  }
+
+  function raise(errorConstructor, message, name) {
+    throw new errorConstructor("Failed to execute 'requestSubmit' on 'HTMLFormElement': " + message + ".", name)
+  }
+})(HTMLFormElement.prototype);
+
+const CSS = {
+  buttonLoader: "calcite-button--loader",
+  content: "content",
+  contentSlotted: "content--slotted",
+  icon: "icon",
+  iconStart: "icon--start",
+  iconEnd: "icon--end",
+  loadingIn: "loading-in",
+  loadingOut: "loading-out",
+  iconStartEmpty: "icon-start-empty",
+  iconEndEmpty: "icon-end-empty"
+};
+const TEXT = {
+  loading: "Loading"
+};
+
+const buttonCss = "@-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}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{display:inline-block;inline-size:auto;vertical-align:middle}:host([round]){border-radius:50px}:host([round]) a,:host([round]) button{border-radius:50px}:host button,:host a{outline-color:transparent}: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-block:var(--calcite-button-padding-y);padding-inline:var(--calcite-button-padding-x);position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;block-size:100%;inline-size:100%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-radius:0px;border-style:none;text-align:center;font-family:inherit;font-weight:var(--calcite-font-weight-normal);-webkit-text-decoration-line:none;text-decoration-line:none;-webkit-transition:color var(--calcite-animation-timing) ease-in-out, background-color var(--calcite-animation-timing) ease-in-out, outline-color var(--calcite-internal-animation-timing-fast) ease-in-out, -webkit-box-shadow var(--calcite-animation-timing) ease-in-out;transition:color var(--calcite-animation-timing) ease-in-out, background-color var(--calcite-animation-timing) ease-in-out, outline-color var(--calcite-internal-animation-timing-fast) ease-in-out, -webkit-box-shadow var(--calcite-animation-timing) ease-in-out;transition:color var(--calcite-animation-timing) ease-in-out, background-color var(--calcite-animation-timing) ease-in-out, box-shadow var(--calcite-animation-timing) ease-in-out, outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;transition:color var(--calcite-animation-timing) ease-in-out, background-color var(--calcite-animation-timing) ease-in-out, box-shadow var(--calcite-animation-timing) ease-in-out, outline-color var(--calcite-internal-animation-timing-fast) ease-in-out, -webkit-box-shadow var(--calcite-animation-timing) ease-in-out}:host button:hover,:host a:hover{-webkit-text-decoration-line:none;text-decoration-line:none}.content{display:-ms-flexbox;display:flex;-ms-flex-preferred-size:auto;flex-basis:auto;margin-inline:var(--calcite-button-content-margin)}.icon-start-empty .content{-webkit-margin-start:unset;margin-inline-start:unset}.icon-end-empty .content{-webkit-margin-end:unset;margin-inline-end:unset}: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([width=auto]){inline-size:auto}:host([width=half]){inline-size:50%}:host([width=full]){inline-size: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{-webkit-margin-end:auto;margin-inline-end: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{-webkit-margin-start:auto;margin-inline-start: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=center]) a:not(.content--slotted) .icon--start+.icon--end,:host([alignment=center]) button:not(.content--slotted) .icon--start+.icon--end{-webkit-margin-start:var(--calcite-button-content-margin);margin-inline-start:var(--calcite-button-content-margin)}.icon{position:relative;margin:0px;display:-ms-inline-flexbox;display:inline-flex;font-weight:var(--calcite-font-weight-normal);line-height:inherit}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([loading]){pointer-events:none}:host([loading]) button,:host([loading]) a{pointer-events:none;opacity:var(--calcite-ui-opacity-disabled)}@-webkit-keyframes loader-in{0%{inline-size:0;opacity:0;-webkit-transform:scale(0.5);transform:scale(0.5)}100%{inline-size:1em;opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes loader-in{0%{inline-size:0;opacity:0;-webkit-transform:scale(0.5);transform:scale(0.5)}100%{inline-size:1em;opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes loader-out{0%{inline-size:1em;opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{inline-size:0;opacity:0;-webkit-transform:scale(0.5);transform:scale(0.5)}}@keyframes loader-out{0%{inline-size:1em;opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{inline-size: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:0px;-webkit-transition:inline-size var(--calcite-internal-animation-timing-slow) ease-in-out, opacity var(--calcite-internal-animation-timing-slow) ease-in-out, -webkit-transform var(--calcite-internal-animation-timing-slow) ease-in-out;transition:inline-size var(--calcite-internal-animation-timing-slow) ease-in-out, opacity var(--calcite-internal-animation-timing-slow) ease-in-out, -webkit-transform var(--calcite-internal-animation-timing-slow) ease-in-out;transition:inline-size var(--calcite-internal-animation-timing-slow) ease-in-out, opacity var(--calcite-internal-animation-timing-slow) ease-in-out, transform var(--calcite-internal-animation-timing-slow) ease-in-out;transition:inline-size var(--calcite-internal-animation-timing-slow) ease-in-out, opacity var(--calcite-internal-animation-timing-slow) ease-in-out, transform var(--calcite-internal-animation-timing-slow) ease-in-out, -webkit-transform var(--calcite-internal-animation-timing-slow) 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{background-color:var(--calcite-ui-brand);color:var(--calcite-ui-text-inverse)}: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{background-color:var(--calcite-ui-danger);color:var(--calcite-ui-text-inverse)}: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{background-color:var(--calcite-ui-foreground-3);color:var(--calcite-ui-text-1)}: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{border-width:1px;border-style:solid;background-color:var(--calcite-ui-foreground-1);-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{border-width:1px;border-style:solid;background-color:transparent;-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-inline-end-width:0;border-inline-start-width:1px}:host([appearance=outline][split-child=secondary]) button,:host([appearance=clear][split-child=secondary]) button{border-inline-start-width:0;border-inline-end-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{border-block-start-width:1px;border-block-end-width:1px;color:var(--calcite-ui-text-3);border-block-start-color:var(--calcite-ui-border-input);border-block-end-color:var(--calcite-ui-border-input);border-block-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;inline-size:1.5rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;min-block-size: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;inline-size:2rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;min-block-size: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;inline-size:2.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;min-block-size: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;block-size:1.5rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}: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;block-size:2rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}: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;block-size:2.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}: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 Button = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /** optionally specify alignment of button elements. */
+    this.alignment = "center";
+    /** specify the appearance style of the button, defaults to solid. */
+    this.appearance = "solid";
+    /** specify the color of the button, defaults to blue */
+    this.color = "blue";
+    /** is the button disabled  */
+    this.disabled = false;
+    /**
+     * string to override English loading text
+     *
+     * @default "Loading"
+     */
+    this.intlLoading = TEXT.loading;
+    /** optionally add a calcite-loader component to the button, disabling interaction.  */
+    this.loading = false;
+    /** optionally add a round style to the button  */
+    this.round = false;
+    /** specify the scale of the button, defaults to m */
+    this.scale = "m";
+    /** is the button a child of a calcite-split-button */
+    this.splitChild = false;
+    /** The type attribute to apply to the button */
+    this.type = "button";
+    /** specify the width of the button, defaults to auto */
+    this.width = "auto";
+    /** watches for changing text content */
+    this.mutationObserver = createObserver("mutation", () => this.updateHasContent());
+    /** determine if there is slotted content for styling purposes */
+    this.hasContent = false;
+    /** determine if loader present for styling purposes */
+    this.hasLoader = false;
+    // act on a requested or nearby form based on type
+    this.handleClick = () => {
+      const { type } = this;
+      if (this.href) {
+        return;
+      }
+      // this.type refers to type attribute, not child element type
+      if (type === "submit") {
+        submitForm(this);
+      }
+      else if (type === "reset") {
+        resetForm(this);
+      }
+    };
+  }
+  loadingChanged(newValue, oldValue) {
+    if (!!newValue && !oldValue) {
+      this.hasLoader = true;
     }
-    getAttributes() {
-        // spread attributes specified on the compoennt to component child, if they aren't props
-        let props = [
-            "appearance",
-            "color",
-            "dir",
-            "hastext",
-            "icon",
-            "iconposition",
-            "loading",
-            "scale",
-            "width",
-            "theme"
-        ];
-        return Array.from(this.el.attributes)
-            .filter(a => a && !props.includes(a.name))
-            .reduce((acc, { name, value }) => (Object.assign({}, acc, { [name]: value })), {});
+    if (!newValue && !!oldValue) {
+      window.setTimeout(() => {
+        this.hasLoader = false;
+      }, 300);
     }
-    render() {
-        const dir = getElementDir(this.el);
-        const attributes = this.getAttributes();
-        const Tag = this.href || this.appearance === "inline" ? "a" : "button";
-        const role = Tag === "a" ? "link" : "button";
-        const loader = this.loading ? (h("div", { class: "calcite-button--loader" }, h("calcite-loader", { "is-active": true, inline: true }))) : null;
-        const icon = this.icon ? (h("svg", { class: "calcite-button--icon", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", viewBox: "0 0 24 24" }, h("path", { d: this.icon }))) : null;
-        if (this.iconposition === "start") {
-            return (h(Host, { dir: dir, hastext: this.hastext }, h(Tag, Object.assign({}, attributes, { role: role, disabled: this.disabled }), loader, icon, h("slot", null))));
-        }
-        else if (this.iconposition === "end") {
-            return (h(Host, { dir: dir, hastext: this.hastext }, h(Tag, Object.assign({}, attributes, { role: role, disabled: this.disabled }), loader, h("slot", null), icon)));
-        }
-        else {
-            h(Host, { dir: dir, hastext: this.hastext }, h(Tag, Object.assign({}, attributes, { role: role, disabled: this.disabled }), loader, h("slot", null)));
-        }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    this.hasLoader = this.loading;
+    this.setupTextContentObserver();
+    connectLabel(this);
+    this.formEl = closestElementCrossShadowBoundary(this.el, this.form ? `#${this.form}` : "form");
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    disconnectLabel(this);
+    this.formEl = null;
+  }
+  componentWillLoad() {
+    {
+      this.updateHasContent();
     }
-    get el() { return getElement(this); }
-    static get style() { return "body{font-family:Avenir Next W01,Avenir Next W00,Avenir Next,Avenir,Helvetica Neue,sans-serif}.overflow-hidden{overflow:hidden}calcite-tab{display:none}calcite-tab[is-active]{display:block}a{color:#007ac2}:host{display:inline-block;--calcite-button-blue:#007ac2;--calcite-button-blue-hover:#2890ce;--calcite-button-blue-pressed:#00619b;--calcite-button-red:#d83020;--calcite-button-red-hover:#e65240;--calcite-button-red-pressed:#a82b1e;--calcite-button-blue-inline-underline:rgba(0,122,194,0.2);--calcite-button-red-inline-underline:rgba(216,48,32,0.2);--calcite-button-blue-solid-color:#fff;--calcite-button-red-solid-color:#fff;--calcite-button-outline-background:#fff;--calcite-button-outline-color:#0b0b0b;--calcite-button-outline-color-pressed:#0b0b0b}:host([theme=dark]){--calcite-button-blue:#3db8ff;--calcite-button-blue-hover:#59d6ff;--calcite-button-blue-pressed:#009af2;--calcite-button-red:#ff0015;--calcite-button-red-hover:#ff624d;--calcite-button-red-pressed:#d90012;--calcite-button-blue-inline-underline:rgba(61,184,255,0.2);--calcite-button-red-inline-underline:rgba(255,0,21,0.2);--calcite-button-blue-solid-color:#0b0b0b;--calcite-button-red-solid-color:#0b0b0b;--calcite-button-outline-background:#151515;--calcite-button-outline-color:#fff;--calcite-button-outline-color-pressed:#fff}:host([appearance=inline]){display:inline}:host a,:host button{position:relative;display:block;padding:.375rem 1rem;text-decoration:none;width:auto;border-radius:0;border:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;line-height:inherit;font-family:inherit;-webkit-appearance:none;cursor:pointer;text-align:center;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out}:host a:hover,:host button:hover{text-decoration:none}:host([width=half]) a,:host([width=half]) button{width:50%}:host([width=full]) a,:host([width=full]) button{width:100%}.calcite-button--icon{display:-ms-inline-flexbox;display:inline-flex;top:2px;position:relative;height:16px;width:16px;margin:0 auto;line-height:inherit;-webkit-transition:all .15s ease-in-out;transition:all .15s ease-in-out}:host([disabled]) a,:host([disabled]) button{pointer-events:none;opacity:.4}:host([hastext][iconposition=start]) .calcite-button--icon{margin-right:.5rem}:host([hastext][iconposition=start][dir=rtl]) .calcite-button--icon{margin-right:0;margin-left:.5rem}:host([hastext][iconposition=end]) .calcite-button--icon{margin-left:.5rem}:host([hastext][iconposition=end][dir=rtl]) .calcite-button--icon{margin-left:0;margin-right:.5rem}:host([appearance=inline]) .calcite-button--icon{max-height:.75rem;top:0}:host([appearance=inline][iconposition=start]) .calcite-button--icon{margin-right:.375rem}:host([appearance=inline][iconposition=start][dir=rtl]) .calcite-button--icon{margin-left:.375rem;margin-right:0}:host([appearance=inline][iconposition=end]) .calcite-button--icon{margin-left:.375rem}:host([appearance=inline][iconposition=end][dir=rtl]) .calcite-button--icon{margin-left:0;margin-right:.375rem}.calcite-button--loader{display:-ms-flexbox;display:flex;position:absolute;top:0;left:0;right:0;bottom:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.calcite-button--loader calcite-loader{margin:0}:host([loading]) a,:host([loading]) button{color:transparent!important;pointer-events:none}:host([loading]) a .calcite-button--icon,:host([loading]) button .calcite-button--icon{opacity:0}:host([appearance=solid][color=blue]) a,:host([appearance=solid][color=blue]) button{color:var(--calcite-button-blue-solid-color);background-color:var(--calcite-button-blue);border:1px solid var(--calcite-button-blue);-webkit-box-shadow:inset 0 0 0 1px transparent;box-shadow:inset 0 0 0 1px transparent}:host([appearance=solid][color=blue]) a:focus,:host([appearance=solid][color=blue]) a:hover,:host([appearance=solid][color=blue]) button:focus,:host([appearance=solid][color=blue]) button:hover{background-color:var(--calcite-button-blue-hover);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-button-blue);box-shadow:inset 0 0 0 1px var(--calcite-button-blue)}:host([appearance=solid][color=blue]) a:active,:host([appearance=solid][color=blue]) button:active{background-color:var(--calcite-button-blue);border-color:var(--calcite-button-blue-pressed);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-button-blue-pressed);box-shadow:inset 0 0 0 2px var(--calcite-button-blue-pressed)}:host([appearance=solid][color=blue]) a .calcite-button--icon,:host([appearance=solid][color=blue]) button .calcite-button--icon{fill:var(--calcite-button-blue-solid-color)}:host([appearance=solid][color=blue]) a calcite-loader,:host([appearance=solid][color=blue]) button calcite-loader{color:var(--calcite-button-blue-solid-color)}:host([appearance=solid][color=red]) a,:host([appearance=solid][color=red]) button{color:var(--calcite-button-red-solid-color);background-color:var(--calcite-button-red);border:1px solid var(--calcite-button-red);-webkit-box-shadow:inset 0 0 0 1px transparent;box-shadow:inset 0 0 0 1px transparent}:host([appearance=solid][color=red]) a:focus,:host([appearance=solid][color=red]) a:hover,:host([appearance=solid][color=red]) button:focus,:host([appearance=solid][color=red]) button:hover{background-color:var(--calcite-button-red-hover);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-button-red);box-shadow:inset 0 0 0 1px var(--calcite-button-red)}:host([appearance=solid][color=red]) a:active,:host([appearance=solid][color=red]) button:active{background-color:var(--calcite-button-red);border-color:var(--calcite-button-red-pressed);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-button-red-pressed);box-shadow:inset 0 0 0 2px var(--calcite-button-red-pressed)}:host([appearance=solid][color=red]) a .calcite-button--icon,:host([appearance=solid][color=red]) button .calcite-button--icon{fill:var(--calcite-button-red-solid-color)}:host([appearance=solid][color=red]) a calcite-loader,:host([appearance=solid][color=red]) button calcite-loader{color:var(--calcite-button-red-solid-color)}:host([appearance=solid][color=light]) a,:host([appearance=solid][color=light]) button{color:#000;background-color:#f3f3f3;border:1px solid #f3f3f3;-webkit-box-shadow:inset 0 0 0 1px transparent;box-shadow:inset 0 0 0 1px transparent}:host([appearance=solid][color=light]) a:focus,:host([appearance=solid][color=light]) a:hover,:host([appearance=solid][color=light]) button:focus,:host([appearance=solid][color=light]) button:hover{background-color:#fff;-webkit-box-shadow:inset 0 0 0 1px #f3f3f3;box-shadow:inset 0 0 0 1px #f3f3f3}:host([appearance=solid][color=light]) a:active,:host([appearance=solid][color=light]) button:active{background-color:#f3f3f3;border-color:#eaeaea;-webkit-box-shadow:inset 0 0 0 2px #eaeaea;box-shadow:inset 0 0 0 2px #eaeaea}:host([appearance=solid][color=light]) a .calcite-button--icon,:host([appearance=solid][color=light]) button .calcite-button--icon{fill:#000}:host([appearance=solid][color=light]) a calcite-loader,:host([appearance=solid][color=light]) button calcite-loader{color:#000}:host([appearance=solid][color=dark]) a,:host([appearance=solid][color=dark]) button{color:#fff;background-color:#2b2b2b;border:1px solid #2b2b2b;-webkit-box-shadow:inset 0 0 0 1px transparent;box-shadow:inset 0 0 0 1px transparent}:host([appearance=solid][color=dark]) a:focus,:host([appearance=solid][color=dark]) a:hover,:host([appearance=solid][color=dark]) button:focus,:host([appearance=solid][color=dark]) button:hover{background-color:#404040;-webkit-box-shadow:inset 0 0 0 1px #2b2b2b;box-shadow:inset 0 0 0 1px #2b2b2b}:host([appearance=solid][color=dark]) a:active,:host([appearance=solid][color=dark]) button:active{background-color:#2b2b2b;border-color:#000;-webkit-box-shadow:inset 0 0 0 2px #000;box-shadow:inset 0 0 0 2px #000}:host([appearance=solid][color=dark]) a .calcite-button--icon,:host([appearance=solid][color=dark]) button .calcite-button--icon{fill:#fff}:host([appearance=solid][color=dark]) a calcite-loader,:host([appearance=solid][color=dark]) button calcite-loader{color:#fff}:host([appearance=outline][color=blue]) a,:host([appearance=outline][color=blue]) button{color:var(--calcite-button-blue);background-color:var(--calcite-button-outline-background);border:1px solid var(--calcite-button-blue);-webkit-box-shadow:inset 0 0 0 1px transparent;box-shadow:inset 0 0 0 1px transparent}:host([appearance=outline][color=blue]) a:hover,:host([appearance=outline][color=blue]) button:hover{border-color:1px solid var(--calcite-button-blue);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-button-blue);box-shadow:inset 0 0 0 1px var(--calcite-button-blue)}:host([appearance=outline][color=blue]) a:active,:host([appearance=outline][color=blue]) a:focus,:host([appearance=outline][color=blue]) button:active,:host([appearance=outline][color=blue]) button:focus{color:var(--calcite-button-blue-pressed);border-color:var(--calcite-button-blue-pressed);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-button-blue-pressed);box-shadow:inset 0 0 0 2px var(--calcite-button-blue-pressed)}:host([appearance=outline][color=blue]) a:active .calcite-button--icon,:host([appearance=outline][color=blue]) a:focus .calcite-button--icon,:host([appearance=outline][color=blue]) button:active .calcite-button--icon,:host([appearance=outline][color=blue]) button:focus .calcite-button--icon{fill:var(--calcite-button-blue-pressed)}:host([appearance=outline][color=blue]) a .calcite-button--icon,:host([appearance=outline][color=blue]) button .calcite-button--icon{fill:var(--calcite-button-blue)}:host([appearance=outline][color=blue]) a calcite-loader,:host([appearance=outline][color=blue]) button calcite-loader{color:var(--calcite-button-blue)}:host([appearance=outline][color=red]) a,:host([appearance=outline][color=red]) button{color:var(--calcite-button-red);background-color:var(--calcite-button-outline-background);border:1px solid var(--calcite-button-red);-webkit-box-shadow:inset 0 0 0 1px transparent;box-shadow:inset 0 0 0 1px transparent}:host([appearance=outline][color=red]) a:hover,:host([appearance=outline][color=red]) button:hover{border-color:1px solid var(--calcite-button-red);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-button-red);box-shadow:inset 0 0 0 1px var(--calcite-button-red)}:host([appearance=outline][color=red]) a:active,:host([appearance=outline][color=red]) a:focus,:host([appearance=outline][color=red]) button:active,:host([appearance=outline][color=red]) button:focus{color:var(--calcite-button-red-pressed);border-color:var(--calcite-button-red-pressed);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-button-red-pressed);box-shadow:inset 0 0 0 2px var(--calcite-button-red-pressed)}:host([appearance=outline][color=red]) a:active .calcite-button--icon,:host([appearance=outline][color=red]) a:focus .calcite-button--icon,:host([appearance=outline][color=red]) button:active .calcite-button--icon,:host([appearance=outline][color=red]) button:focus .calcite-button--icon{fill:var(--calcite-button-red-pressed)}:host([appearance=outline][color=red]) a .calcite-button--icon,:host([appearance=outline][color=red]) button .calcite-button--icon{fill:var(--calcite-button-red)}:host([appearance=outline][color=red]) a calcite-loader,:host([appearance=outline][color=red]) button calcite-loader{color:var(--calcite-button-red)}:host([appearance=outline][color=light]) a,:host([appearance=outline][color=light]) button{color:var(--calcite-button-outline-color);background-color:var(--calcite-button-outline-background);border:1px solid #f3f3f3;-webkit-box-shadow:inset 0 0 0 1px transparent;box-shadow:inset 0 0 0 1px transparent}:host([appearance=outline][color=light]) a:hover,:host([appearance=outline][color=light]) button:hover{border-color:1px solid #f3f3f3;-webkit-box-shadow:inset 0 0 0 1px #f3f3f3;box-shadow:inset 0 0 0 1px #f3f3f3}:host([appearance=outline][color=light]) a:active,:host([appearance=outline][color=light]) a:focus,:host([appearance=outline][color=light]) button:active,:host([appearance=outline][color=light]) button:focus{color:var(--calcite-button-outline-pressed);border-color:#eaeaea;-webkit-box-shadow:inset 0 0 0 2px #eaeaea;box-shadow:inset 0 0 0 2px #eaeaea}:host([appearance=outline][color=light]) a:active .calcite-button--icon,:host([appearance=outline][color=light]) a:focus .calcite-button--icon,:host([appearance=outline][color=light]) button:active .calcite-button--icon,:host([appearance=outline][color=light]) button:focus .calcite-button--icon{fill:var(--calcite-button-outline-pressed)}:host([appearance=outline][color=light]) a .calcite-button--icon,:host([appearance=outline][color=light]) button .calcite-button--icon{fill:var(--calcite-button-outline-color)}:host([appearance=outline][color=light]) a calcite-loader,:host([appearance=outline][color=light]) button calcite-loader{color:var(--calcite-button-outline-color)}:host([appearance=outline][color=dark]) a,:host([appearance=outline][color=dark]) button{color:var(--calcite-button-outline-color);background-color:var(--calcite-button-outline-background);border:1px solid #2b2b2b;-webkit-box-shadow:inset 0 0 0 1px transparent;box-shadow:inset 0 0 0 1px transparent}:host([appearance=outline][color=dark]) a:hover,:host([appearance=outline][color=dark]) button:hover{border-color:1px solid #2b2b2b;-webkit-box-shadow:inset 0 0 0 1px #2b2b2b;box-shadow:inset 0 0 0 1px #2b2b2b}:host([appearance=outline][color=dark]) a:active,:host([appearance=outline][color=dark]) a:focus,:host([appearance=outline][color=dark]) button:active,:host([appearance=outline][color=dark]) button:focus{color:var(--calcite-button-outline-pressed);border-color:#000;-webkit-box-shadow:inset 0 0 0 2px #000;box-shadow:inset 0 0 0 2px #000}:host([appearance=outline][color=dark]) a:active .calcite-button--icon,:host([appearance=outline][color=dark]) a:focus .calcite-button--icon,:host([appearance=outline][color=dark]) button:active .calcite-button--icon,:host([appearance=outline][color=dark]) button:focus .calcite-button--icon{fill:var(--calcite-button-outline-pressed)}:host([appearance=outline][color=dark]) a .calcite-button--icon,:host([appearance=outline][color=dark]) button .calcite-button--icon{fill:var(--calcite-button-outline-color)}:host([appearance=outline][color=dark]) a calcite-loader,:host([appearance=outline][color=dark]) button calcite-loader{color:var(--calcite-button-outline-color)}:host([appearance=clear][color=blue]) a,:host([appearance=clear][color=blue]) button{color:var(--calcite-button-blue);background-color:transparent;border:1px solid var(--calcite-button-blue);-webkit-box-shadow:inset 0 0 0 1px transparent;box-shadow:inset 0 0 0 1px transparent}:host([appearance=clear][color=blue]) a:hover,:host([appearance=clear][color=blue]) button:hover{border-color:1px solid var(--calcite-button-blue);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-button-blue);box-shadow:inset 0 0 0 1px var(--calcite-button-blue)}:host([appearance=clear][color=blue]) a:active,:host([appearance=clear][color=blue]) a:focus,:host([appearance=clear][color=blue]) button:active,:host([appearance=clear][color=blue]) button:focus{color:var(--calcite-button-blue-pressed);border-color:var(--calcite-button-blue-pressed);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-button-blue-pressed);box-shadow:inset 0 0 0 2px var(--calcite-button-blue-pressed)}:host([appearance=clear][color=blue]) a:active .calcite-button--icon,:host([appearance=clear][color=blue]) a:focus .calcite-button--icon,:host([appearance=clear][color=blue]) button:active .calcite-button--icon,:host([appearance=clear][color=blue]) button:focus .calcite-button--icon{fill:var(--calcite-button-blue-pressed)}:host([appearance=clear][color=blue]) a .calcite-button--icon,:host([appearance=clear][color=blue]) button .calcite-button--icon{fill:var(--calcite-button-blue)}:host([appearance=clear][color=blue]) a calcite-loader,:host([appearance=clear][color=blue]) button calcite-loader{color:var(--calcite-button-blue)}:host([appearance=clear][color=red]) a,:host([appearance=clear][color=red]) button{color:var(--calcite-button-red);background-color:transparent;border:1px solid var(--calcite-button-red);-webkit-box-shadow:inset 0 0 0 1px transparent;box-shadow:inset 0 0 0 1px transparent}:host([appearance=clear][color=red]) a:hover,:host([appearance=clear][color=red]) button:hover{border-color:1px solid var(--calcite-button-red);-webkit-box-shadow:inset 0 0 0 1px var(--calcite-button-red);box-shadow:inset 0 0 0 1px var(--calcite-button-red)}:host([appearance=clear][color=red]) a:active,:host([appearance=clear][color=red]) a:focus,:host([appearance=clear][color=red]) button:active,:host([appearance=clear][color=red]) button:focus{color:var(--calcite-button-red-pressed);border-color:var(--calcite-button-red-pressed);-webkit-box-shadow:inset 0 0 0 2px var(--calcite-button-red-pressed);box-shadow:inset 0 0 0 2px var(--calcite-button-red-pressed)}:host([appearance=clear][color=red]) a:active .calcite-button--icon,:host([appearance=clear][color=red]) a:focus .calcite-button--icon,:host([appearance=clear][color=red]) button:active .calcite-button--icon,:host([appearance=clear][color=red]) button:focus .calcite-button--icon{fill:var(--calcite-button-red-pressed)}:host([appearance=clear][color=red]) a .calcite-button--icon,:host([appearance=clear][color=red]) button .calcite-button--icon{fill:var(--calcite-button-red)}:host([appearance=clear][color=red]) a calcite-loader,:host([appearance=clear][color=red]) button calcite-loader{color:var(--calcite-button-red)}:host([appearance=clear][color=light]) a,:host([appearance=clear][color=light]) button{color:#f8f8f8;background-color:transparent;border:1px solid #f3f3f3;-webkit-box-shadow:inset 0 0 0 1px transparent;box-shadow:inset 0 0 0 1px transparent}:host([appearance=clear][color=light]) a:hover,:host([appearance=clear][color=light]) button:hover{border-color:1px solid #f3f3f3;-webkit-box-shadow:inset 0 0 0 1px #f3f3f3;box-shadow:inset 0 0 0 1px #f3f3f3}:host([appearance=clear][color=light]) a:active,:host([appearance=clear][color=light]) a:focus,:host([appearance=clear][color=light]) button:active,:host([appearance=clear][color=light]) button:focus{color:#fff;border-color:#eaeaea;-webkit-box-shadow:inset 0 0 0 2px #eaeaea;box-shadow:inset 0 0 0 2px #eaeaea}:host([appearance=clear][color=light]) a:active .calcite-button--icon,:host([appearance=clear][color=light]) a:focus .calcite-button--icon,:host([appearance=clear][color=light]) button:active .calcite-button--icon,:host([appearance=clear][color=light]) button:focus .calcite-button--icon{fill:#fff}:host([appearance=clear][color=light]) a .calcite-button--icon,:host([appearance=clear][color=light]) button .calcite-button--icon{fill:#f8f8f8}:host([appearance=clear][color=light]) a calcite-loader,:host([appearance=clear][color=light]) button calcite-loader{color:#f8f8f8}:host([appearance=clear][color=dark]) a,:host([appearance=clear][color=dark]) button{color:#151515;background-color:transparent;border:1px solid #2b2b2b;-webkit-box-shadow:inset 0 0 0 1px transparent;box-shadow:inset 0 0 0 1px transparent}:host([appearance=clear][color=dark]) a:hover,:host([appearance=clear][color=dark]) button:hover{border-color:1px solid #2b2b2b;-webkit-box-shadow:inset 0 0 0 1px #2b2b2b;box-shadow:inset 0 0 0 1px #2b2b2b}:host([appearance=clear][color=dark]) a:active,:host([appearance=clear][color=dark]) a:focus,:host([appearance=clear][color=dark]) button:active,:host([appearance=clear][color=dark]) button:focus{color:#000;border-color:#000;-webkit-box-shadow:inset 0 0 0 2px #000;box-shadow:inset 0 0 0 2px #000}:host([appearance=clear][color=dark]) a:active .calcite-button--icon,:host([appearance=clear][color=dark]) a:focus .calcite-button--icon,:host([appearance=clear][color=dark]) button:active .calcite-button--icon,:host([appearance=clear][color=dark]) button:focus .calcite-button--icon{fill:#000}:host([appearance=clear][color=dark]) a .calcite-button--icon,:host([appearance=clear][color=dark]) button .calcite-button--icon{fill:#151515}:host([appearance=clear][color=dark]) a calcite-loader,:host([appearance=clear][color=dark]) button calcite-loader{color:#151515}:host([appearance=transparent][color=blue]) a,:host([appearance=transparent][color=blue]) button{color:var(--calcite-button-blue);background-color:transparent;border:1px solid transparent}:host([appearance=transparent][color=blue]) a:hover,:host([appearance=transparent][color=blue]) button:hover{color:var(--calcite-button-blue-hover)}:host([appearance=transparent][color=blue]) a:hover .calcite-button--icon,:host([appearance=transparent][color=blue]) button:hover .calcite-button--icon{fill:var(--calcite-button-blue-hover)}:host([appearance=transparent][color=blue]) a:active,:host([appearance=transparent][color=blue]) a:focus,:host([appearance=transparent][color=blue]) button:active,:host([appearance=transparent][color=blue]) button:focus{color:var(--calcite-button-blue-pressed)}:host([appearance=transparent][color=blue]) a:active .calcite-button--icon,:host([appearance=transparent][color=blue]) a:focus .calcite-button--icon,:host([appearance=transparent][color=blue]) button:active .calcite-button--icon,:host([appearance=transparent][color=blue]) button:focus .calcite-button--icon{fill:var(--calcite-button-blue-pressed)}:host([appearance=transparent][color=blue]) a .calcite-button--icon,:host([appearance=transparent][color=blue]) button .calcite-button--icon{fill:var(--calcite-button-blue)}:host([appearance=transparent][color=blue]) a calcite-loader,:host([appearance=transparent][color=blue]) button calcite-loader{color:var(--calcite-button-blue)}:host([appearance=transparent][color=red]) a,:host([appearance=transparent][color=red]) button{color:var(--calcite-button-red);background-color:transparent;border:1px solid transparent}:host([appearance=transparent][color=red]) a:hover,:host([appearance=transparent][color=red]) button:hover{color:var(--calcite-button-red-hover)}:host([appearance=transparent][color=red]) a:hover .calcite-button--icon,:host([appearance=transparent][color=red]) button:hover .calcite-button--icon{fill:var(--calcite-button-red-hover)}:host([appearance=transparent][color=red]) a:active,:host([appearance=transparent][color=red]) a:focus,:host([appearance=transparent][color=red]) button:active,:host([appearance=transparent][color=red]) button:focus{color:var(--calcite-button-red-pressed)}:host([appearance=transparent][color=red]) a:active .calcite-button--icon,:host([appearance=transparent][color=red]) a:focus .calcite-button--icon,:host([appearance=transparent][color=red]) button:active .calcite-button--icon,:host([appearance=transparent][color=red]) button:focus .calcite-button--icon{fill:var(--calcite-button-red-pressed)}:host([appearance=transparent][color=red]) a .calcite-button--icon,:host([appearance=transparent][color=red]) button .calcite-button--icon{fill:var(--calcite-button-red)}:host([appearance=transparent][color=red]) a calcite-loader,:host([appearance=transparent][color=red]) button calcite-loader{color:var(--calcite-button-red)}:host([appearance=transparent][color=light]) a,:host([appearance=transparent][color=light]) button{color:#f3f3f3;background-color:transparent;border:1px solid transparent}:host([appearance=transparent][color=light]) a:hover,:host([appearance=transparent][color=light]) button:hover{color:#fff}:host([appearance=transparent][color=light]) a:hover .calcite-button--icon,:host([appearance=transparent][color=light]) button:hover .calcite-button--icon{fill:#fff}:host([appearance=transparent][color=light]) a:active,:host([appearance=transparent][color=light]) a:focus,:host([appearance=transparent][color=light]) button:active,:host([appearance=transparent][color=light]) button:focus{color:#eaeaea}:host([appearance=transparent][color=light]) a:active .calcite-button--icon,:host([appearance=transparent][color=light]) a:focus .calcite-button--icon,:host([appearance=transparent][color=light]) button:active .calcite-button--icon,:host([appearance=transparent][color=light]) button:focus .calcite-button--icon{fill:#eaeaea}:host([appearance=transparent][color=light]) a .calcite-button--icon,:host([appearance=transparent][color=light]) button .calcite-button--icon{fill:#f3f3f3}:host([appearance=transparent][color=light]) a calcite-loader,:host([appearance=transparent][color=light]) button calcite-loader{color:#f3f3f3}:host([appearance=transparent][color=dark]) a,:host([appearance=transparent][color=dark]) button{color:#2b2b2b;background-color:transparent;border:1px solid transparent}:host([appearance=transparent][color=dark]) a:hover,:host([appearance=transparent][color=dark]) button:hover{color:#404040}:host([appearance=transparent][color=dark]) a:hover .calcite-button--icon,:host([appearance=transparent][color=dark]) button:hover .calcite-button--icon{fill:#404040}:host([appearance=transparent][color=dark]) a:active,:host([appearance=transparent][color=dark]) a:focus,:host([appearance=transparent][color=dark]) button:active,:host([appearance=transparent][color=dark]) button:focus{color:#151515}:host([appearance=transparent][color=dark]) a:active .calcite-button--icon,:host([appearance=transparent][color=dark]) a:focus .calcite-button--icon,:host([appearance=transparent][color=dark]) button:active .calcite-button--icon,:host([appearance=transparent][color=dark]) button:focus .calcite-button--icon{fill:#151515}:host([appearance=transparent][color=dark]) a .calcite-button--icon,:host([appearance=transparent][color=dark]) button .calcite-button--icon{fill:#2b2b2b}:host([appearance=transparent][color=dark]) a calcite-loader,:host([appearance=transparent][color=dark]) button calcite-loader{color:#2b2b2b}:host([appearance=inline][color=blue]) a,:host([appearance=inline][color=blue]) button{display:inline;padding:0;outline:none;border:none;color:var(--calcite-button-blue);font-weight:500;font-size:inherit;white-space:normal;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;background-color:transparent;position:relative;background-image:-webkit-gradient(linear,left top,left bottom,from(currentColor),to(currentColor)),-webkit-gradient(linear,left top,left bottom,from(var(--calcite-button-blue-inline-underline)),to(var(--calcite-button-blue-inline-underline)));background-image:linear-gradient(currentColor,currentColor),linear-gradient(var(--calcite-button-blue-inline-underline),var(--calcite-button-blue-inline-underline));background-position:0 100%,100% 100%;background-repeat:no-repeat,no-repeat;background-size:0 1px,100% 1px;-webkit-transition:all .15s ease-in-out,background-size .3s ease-in-out;transition:all .15s ease-in-out,background-size .3s ease-in-out}:host([appearance=inline][color=blue]) a:focus,:host([appearance=inline][color=blue]) a:hover,:host([appearance=inline][color=blue]) button:focus,:host([appearance=inline][color=blue]) button:hover{color:var(--calcite-button-blue-hover);background-size:100% 1px,100% 1px}:host([appearance=inline][color=blue]) a:focus .calcite-button--icon,:host([appearance=inline][color=blue]) a:hover .calcite-button--icon,:host([appearance=inline][color=blue]) button:focus .calcite-button--icon,:host([appearance=inline][color=blue]) button:hover .calcite-button--icon{fill:var(--calcite-button-blue-hover)}:host([appearance=inline][color=blue]) a:active,:host([appearance=inline][color=blue]) button:active{color:var(--calcite-button-blue);background-size:100% 1px,100% 1px}:host([appearance=inline][color=blue]) a .calcite-button--icon,:host([appearance=inline][color=blue]) button .calcite-button--icon{fill:var(--calcite-button-blue)}:host([appearance=inline][color=blue]) a calcite-loader,:host([appearance=inline][color=blue]) button calcite-loader{color:var(--calcite-button-blue)}:host([appearance=inline][color=red]) a,:host([appearance=inline][color=red]) button{display:inline;padding:0;outline:none;border:none;color:var(--calcite-button-red);font-weight:500;font-size:inherit;white-space:normal;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;background-color:transparent;position:relative;background-image:-webkit-gradient(linear,left top,left bottom,from(currentColor),to(currentColor)),-webkit-gradient(linear,left top,left bottom,from(var(--calcite-button-red-inline-underline)),to(var(--calcite-button-red-inline-underline)));background-image:linear-gradient(currentColor,currentColor),linear-gradient(var(--calcite-button-red-inline-underline),var(--calcite-button-red-inline-underline));background-position:0 100%,100% 100%;background-repeat:no-repeat,no-repeat;background-size:0 1px,100% 1px;-webkit-transition:all .15s ease-in-out,background-size .3s ease-in-out;transition:all .15s ease-in-out,background-size .3s ease-in-out}:host([appearance=inline][color=red]) a:focus,:host([appearance=inline][color=red]) a:hover,:host([appearance=inline][color=red]) button:focus,:host([appearance=inline][color=red]) button:hover{color:var(--calcite-button-red-hover);background-size:100% 1px,100% 1px}:host([appearance=inline][color=red]) a:focus .calcite-button--icon,:host([appearance=inline][color=red]) a:hover .calcite-button--icon,:host([appearance=inline][color=red]) button:focus .calcite-button--icon,:host([appearance=inline][color=red]) button:hover .calcite-button--icon{fill:var(--calcite-button-red-hover)}:host([appearance=inline][color=red]) a:active,:host([appearance=inline][color=red]) button:active{color:var(--calcite-button-red);background-size:100% 1px,100% 1px}:host([appearance=inline][color=red]) a .calcite-button--icon,:host([appearance=inline][color=red]) button .calcite-button--icon{fill:var(--calcite-button-red)}:host([appearance=inline][color=red]) a calcite-loader,:host([appearance=inline][color=red]) button calcite-loader{color:var(--calcite-button-red)}:host([appearance=inline][color=light]) a,:host([appearance=inline][color=light]) button{display:inline;padding:0;outline:none;border:none;color:#f3f3f3;font-weight:500;font-size:inherit;white-space:normal;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;background-color:transparent;position:relative;background-image:-webkit-gradient(linear,left top,left bottom,from(currentColor),to(currentColor)),-webkit-gradient(linear,left top,left bottom,from(hsla(0,0%,100%,.2)),to(hsla(0,0%,100%,.2)));background-image:linear-gradient(currentColor,currentColor),linear-gradient(hsla(0,0%,100%,.2),hsla(0,0%,100%,.2));background-position:0 100%,100% 100%;background-repeat:no-repeat,no-repeat;background-size:0 1px,100% 1px;-webkit-transition:all .15s ease-in-out,background-size .3s ease-in-out;transition:all .15s ease-in-out,background-size .3s ease-in-out}:host([appearance=inline][color=light]) a:focus,:host([appearance=inline][color=light]) a:hover,:host([appearance=inline][color=light]) button:focus,:host([appearance=inline][color=light]) button:hover{color:#fff;background-size:100% 1px,100% 1px}:host([appearance=inline][color=light]) a:focus .calcite-button--icon,:host([appearance=inline][color=light]) a:hover .calcite-button--icon,:host([appearance=inline][color=light]) button:focus .calcite-button--icon,:host([appearance=inline][color=light]) button:hover .calcite-button--icon{fill:#fff}:host([appearance=inline][color=light]) a:active,:host([appearance=inline][color=light]) button:active{color:#f3f3f3;background-size:100% 1px,100% 1px}:host([appearance=inline][color=light]) a .calcite-button--icon,:host([appearance=inline][color=light]) button .calcite-button--icon{fill:#f3f3f3}:host([appearance=inline][color=light]) a calcite-loader,:host([appearance=inline][color=light]) button calcite-loader{color:#f3f3f3}:host([appearance=inline][color=dark]) a,:host([appearance=inline][color=dark]) button{display:inline;padding:0;outline:none;border:none;color:#2b2b2b;font-weight:500;font-size:inherit;white-space:normal;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;background-color:transparent;position:relative;background-image:-webkit-gradient(linear,left top,left bottom,from(currentColor),to(currentColor)),-webkit-gradient(linear,left top,left bottom,from(rgba(64,64,64,.2)),to(rgba(64,64,64,.2)));background-image:linear-gradient(currentColor,currentColor),linear-gradient(rgba(64,64,64,.2),rgba(64,64,64,.2));background-position:0 100%,100% 100%;background-repeat:no-repeat,no-repeat;background-size:0 1px,100% 1px;-webkit-transition:all .15s ease-in-out,background-size .3s ease-in-out;transition:all .15s ease-in-out,background-size .3s ease-in-out}:host([appearance=inline][color=dark]) a:focus,:host([appearance=inline][color=dark]) a:hover,:host([appearance=inline][color=dark]) button:focus,:host([appearance=inline][color=dark]) button:hover{color:#404040;background-size:100% 1px,100% 1px}:host([appearance=inline][color=dark]) a:focus .calcite-button--icon,:host([appearance=inline][color=dark]) a:hover .calcite-button--icon,:host([appearance=inline][color=dark]) button:focus .calcite-button--icon,:host([appearance=inline][color=dark]) button:hover .calcite-button--icon{fill:#404040}:host([appearance=inline][color=dark]) a:active,:host([appearance=inline][color=dark]) button:active{color:#2b2b2b;background-size:100% 1px,100% 1px}:host([appearance=inline][color=dark]) a .calcite-button--icon,:host([appearance=inline][color=dark]) button .calcite-button--icon{fill:#2b2b2b}:host([appearance=inline][color=dark]) a calcite-loader,:host([appearance=inline][color=dark]) button calcite-loader{color:#2b2b2b}:host([appearance=inline][dir=rtl]) a,:host([appearance=inline][dir=rtl]) button{background-position:100% 100%,100% 100%}:host([scale=xs]:not([appearance=inline])) a,:host([scale=xs]:not([appearance=inline])) button{padding:calc(1.5rem/ 6) calc(1.5rem* .3);font-size:.8125rem;line-height:1.5}:host([scale=s]:not([appearance=inline])) a,:host([scale=s]:not([appearance=inline])) button{padding:calc(1.5rem/ 4) calc(1.5rem* .5);font-size:.875rem;line-height:1.5}:host([scale=m]:not([appearance=inline])) a,:host([scale=m]:not([appearance=inline])) button{padding:calc(1.5rem/ 3) calc(1.5rem* .75);font-size:.9375rem;line-height:1.5}:host([scale=l]:not([appearance=inline])) a,:host([scale=l]:not([appearance=inline])) button{padding:calc(1.5rem / 2) calc(1.5rem* 1);font-size:1.2019rem;line-height:1.5}\@media screen and (max-width:859px){:host([scale=l]:not([appearance=inline])) a,:host([scale=l]:not([appearance=inline])) button{font-size:1.1305rem}}\@media screen and (max-width:479px){:host([scale=l]:not([appearance=inline])) a,:host([scale=l]:not([appearance=inline])) button{font-size:1.0625rem}}:host([scale=xl]:not([appearance=inline])) a,:host([scale=xl]:not([appearance=inline])) button{padding:calc(1.5rem / 1.5) calc(1.5rem* 1.25);font-size:1.414rem;line-height:1.5}\@media screen and (max-width:859px){:host([scale=xl]:not([appearance=inline])) a,:host([scale=xl]:not([appearance=inline])) button{font-size:1.33rem}}\@media screen and (max-width:479px){:host([scale=xl]:not([appearance=inline])) a,:host([scale=xl]:not([appearance=inline])) button{font-size:1.25rem}}"; }
+  }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
+  render() {
+    const childElType = this.href ? "a" : "button";
+    const Tag = childElType;
+    const loaderNode = this.hasLoader ? (h("div", { class: CSS.buttonLoader }, h("calcite-loader", { active: true, class: this.loading ? CSS.loadingIn : CSS.loadingOut, inline: true, label: this.intlLoading, scale: "m" }))) : null;
+    const iconStartEl = (h("calcite-icon", { class: { [CSS.icon]: true, [CSS.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
+    const iconEndEl = (h("calcite-icon", { class: { [CSS.icon]: true, [CSS.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
+    const contentEl = (h("span", { class: CSS.content }, h("slot", null)));
+    return (h(Tag, { "aria-label": getLabelText(this), class: {
+        [CSS.contentSlotted]: this.hasContent,
+        [CSS.iconStartEmpty]: !this.iconStart,
+        [CSS.iconEndEmpty]: !this.iconEnd
+      }, disabled: this.disabled || this.loading, href: childElType === "a" && this.href, name: childElType === "button" && this.name, onClick: this.handleClick, ref: (el) => (this.childEl = el), rel: childElType === "a" && this.rel, tabIndex: this.disabled || this.loading ? -1 : null, target: childElType === "a" && this.target, type: childElType === "button" && this.type }, loaderNode, this.iconStart ? iconStartEl : null, this.hasContent ? contentEl : null, this.iconEnd ? iconEndEl : null));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    var _a;
+    (_a = this.childEl) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  updateHasContent() {
+    var _a, _b;
+    const slottedContent = this.el.textContent.trim().length > 0 || this.el.childNodes.length > 0;
+    this.hasContent =
+      this.el.childNodes.length === 1 && ((_a = this.el.childNodes[0]) === null || _a === void 0 ? void 0 : _a.nodeName) === "#text"
+        ? ((_b = this.el.textContent) === null || _b === void 0 ? void 0 : _b.trim().length) > 0
+        : slottedContent;
+  }
+  setupTextContentObserver() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  onLabelClick() {
+    this.handleClick();
+    this.setFocus();
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "loading": ["loadingChanged"]
+  }; }
 };
+Button.style = buttonCss;
 
-export { CalciteButton as calcite_button };
+export { Button as calcite_button };

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

@@ -0,0 +1,138 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.90
+ */
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-125082eb.js';
+import { t as toAriaBoolean, g as getSlotted } from './dom-796bedfe.js';
+import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot-1bf8fa95.js';
+import './guid-b66e2624.js';
+import './observers-20a0920e.js';
+
+const CSS = {
+  container: "container",
+  header: "header",
+  footer: "footer",
+  title: "title",
+  subtitle: "subtitle",
+  checkboxWrapper: "checkbox-wrapper",
+  thumbnailWrapper: "thumbnail-wrapper"
+};
+const SLOTS = {
+  thumbnail: "thumbnail",
+  title: "title",
+  subtitle: "subtitle",
+  footerLeading: "footer-leading",
+  footerTrailing: "footer-trailing"
+};
+const TEXT = {
+  select: "Select",
+  deselect: "Deselect",
+  loading: "Loading"
+};
+
+const cardCss = "@-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}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:block;max-inline-size:100%}:host .calcite-card-container{position:relative;display:-ms-flexbox;display:flex;block-size:100%;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;overflow:hidden;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-2);background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-3);--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-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);border-radius:var(--calcite-border-radius-base)}:host .calcite-card-container:hover{--tw-shadow:0 4px 16px 0 rgba(0, 0, 0, 0.08), 0 2px 8px 0 rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 16px 0 var(--tw-shadow-color), 0 2px 8px 0 var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);z-index:1}:host .calcite-card-container:active{--tw-shadow:0 1px 6px -1px rgba(0, 0, 0, 0.16), 0 1px 2px -1px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 1px 6px -1px var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-transition-duration:75ms;transition-duration:75ms;z-index:1}.container{position:relative;display:-ms-flexbox;display:flex;-ms-flex:1 1 auto;flex:1 1 auto;-ms-flex-direction:column;flex-direction:column}:host([loading]) .calcite-card-container *:not(calcite-loader):not(.calcite-card-loader-container){pointer-events:none;opacity:0}:host([loading]) .calcite-card-loader-container{position:absolute;inset:0px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.header,.footer{display:-ms-flexbox;display:flex;padding-inline:0.75rem;padding-block:0.75rem 0.25rem}.header{-ms-flex-direction:column;flex-direction:column}.footer{-webkit-margin-before:auto;margin-block-start:auto;-ms-flex-direction:row;flex-direction:row;-ms-flex-line-pack:justify;align-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding-inline:0.75rem;padding-block:0.25rem 0.75rem}.card-content{padding:0.75rem;font-size:var(--calcite-font-size--2);line-height:1.375;color:var(--calcite-ui-text-3)}:host([selectable]) .calcite-card-container:active{--tw-shadow:0 1px 6px -1px rgba(0, 0, 0, 0.16), 0 1px 2px -1px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 1px 6px -1px var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host([selected]) .calcite-card-container{border-color:var(--calcite-ui-brand)}slot[name=title]::slotted(*),*::slotted([slot=title]){margin:0px;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}slot[name=subtitle]::slotted(*),*::slotted([slot=subtitle]){margin:0px;-webkit-margin-before:0.5rem;margin-block-start:0.5rem;font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2)}slot[name=thumbnail]::slotted(img),img::slotted([slot=thumbnail]){min-inline-size:100%;max-inline-size:100%}slot[name=footer-leading]::slotted(*),*::slotted([slot=footer-leading]){-ms-flex-item-align:center;align-self:center;font-size:var(--calcite-font-size--2);line-height:1.375;-webkit-margin-end:auto;margin-inline-end:auto}slot[name=footer-trailing]::slotted(*),*::slotted([slot=footer-trailing]){-ms-flex-item-align:center;align-self:center;font-size:var(--calcite-font-size--2);line-height:1.375}.checkbox-wrapper{position:absolute;margin:0px;padding:0px;inset-block-start:0.5rem;inset-inline-end:0.5rem}.thumbnail-wrapper{display:-ms-flexbox;display:flex}.calcite-card-container.inline{-ms-flex-direction:row;flex-direction:row}.calcite-card-container.inline>.container{inline-size:60%}.calcite-card-container.inline>.thumbnail-wrapper{inline-size:40%;-ms-flex-align:start;align-items:flex-start}.calcite-card-container.inline slot[name=thumbnail]::slotted(img),.calcite-card-container.inline img::slotted([slot=thumbnail]){inline-size:100%}slot[name=footer-leading]::slotted(*),slot[name=footer-trailing]::slotted(*){display:-ms-flexbox;display:flex;gap:0.25rem}";
+
+const Card = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteCardSelect = createEvent(this, "calciteCardSelect", 7);
+    //--------------------------------------------------------------------------
+    //
+    //  Public Properties
+    //
+    //--------------------------------------------------------------------------
+    /**  When true, the cards content is waiting to be loaded. This state shows a busy indicator.*/
+    this.loading = false;
+    /** Indicates whether the card is selected. */
+    this.selected = false;
+    /** Indicates whether the card is selectable. */
+    this.selectable = false;
+    /**
+     * string to override English loading text
+     *
+     * @default "Loading"
+     */
+    this.intlLoading = TEXT.loading;
+    /**
+     * string to override English select text for checkbox when selectable is true
+     *
+     * @default "Select"
+     */
+    this.intlSelect = TEXT.select;
+    /**
+     * string to override English deselect text for checkbox when selectable is true
+     *
+     * @default "Deselect"
+     */
+    this.intlDeselect = TEXT.deselect;
+    this.thumbnailPosition = "block-start";
+    //--------------------------------------------------------------------------
+    //
+    //  Private State/Props
+    //
+    //--------------------------------------------------------------------------
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.cardSelectClick = () => {
+      this.selectCard();
+    };
+    this.cardSelectKeyDown = (event) => {
+      switch (event.key) {
+        case " ":
+        case "Enter":
+          this.selectCard();
+          event.preventDefault();
+          break;
+      }
+    };
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disonnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  render() {
+    const thumbnailInline = this.thumbnailPosition.startsWith("inline");
+    const thumbnailStart = this.thumbnailPosition.endsWith("start");
+    return (h("div", { class: { "calcite-card-container": true, inline: thumbnailInline } }, this.loading ? (h("div", { class: "calcite-card-loader-container" }, h("calcite-loader", { active: true, label: this.intlLoading }))) : null, thumbnailStart && this.renderThumbnail(), h("section", { "aria-busy": toAriaBoolean(this.loading), class: { [CSS.container]: true } }, this.selectable ? this.renderCheckbox() : null, this.renderHeader(), h("div", { class: "card-content" }, h("slot", null)), this.renderFooter()), !thumbnailStart && this.renderThumbnail()));
+  }
+  selectCard() {
+    this.selected = !this.selected;
+    this.calciteCardSelect.emit();
+  }
+  renderThumbnail() {
+    return getSlotted(this.el, SLOTS.thumbnail) ? (h("section", { class: CSS.thumbnailWrapper }, h("slot", { name: SLOTS.thumbnail }))) : null;
+  }
+  renderCheckbox() {
+    const checkboxLabel = this.selected ? this.intlDeselect : this.intlSelect;
+    return (h("calcite-label", { class: CSS.checkboxWrapper, onClick: this.cardSelectClick, onKeyDown: this.cardSelectKeyDown }, h("calcite-checkbox", { checked: this.selected, label: checkboxLabel })));
+  }
+  renderHeader() {
+    const { el } = this;
+    const title = getSlotted(el, SLOTS.title);
+    const subtitle = getSlotted(el, SLOTS.subtitle);
+    const hasHeader = title || subtitle;
+    return hasHeader ? (h("header", { class: CSS.header }, h("slot", { name: SLOTS.title }), h("slot", { name: SLOTS.subtitle }))) : null;
+  }
+  renderFooter() {
+    const { el } = this;
+    const leadingFooter = getSlotted(el, SLOTS.footerLeading);
+    const trailingFooter = getSlotted(el, SLOTS.footerTrailing);
+    const hasFooter = leadingFooter || trailingFooter;
+    return hasFooter ? (h("footer", { class: CSS.footer }, h("slot", { name: SLOTS.footerLeading }), h("slot", { name: SLOTS.footerTrailing }))) : null;
+  }
+  get el() { return getElement(this); }
+};
+Card.style = cardCss;
+
+export { Card as calcite_card };