@esri/calcite-components 5.1.0-next.9 → 5.1.0

package/dist/components/calcite-button/customElement.js

@@ -1,11 +1,10 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as customElement } from "../../chunks/runtime.js";
-import { css, isServer, html, nothing } from "lit";
+import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { literal, html as html$1 } from "lit/static-html.js";
-import { LitElement, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
+import { LitElement, stringOrBoolean, safeClassMap, nothing } from "@arcgis/lumina";
 import { useWatchAttributes } from "@arcgis/lumina/controllers";
-import { f as findAssociatedForm, s as submitForm, r as resetForm } from "../../chunks/form.js";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
 import { c as createObserver, u as updateRefObserver } from "../../chunks/observers.js";
 import { g as getIconScale } from "../../chunks/component.js";
@@ -13,6 +12,7 @@ import { u as useT9n } from "../../chunks/useT9n.js";
 import { h as hasVisibleContent } from "../../chunks/dom.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
+import { u as useFormTrigger } from "../../chunks/useFormTrigger.js";
 const CSS = {
   buttonLoader: "calcite-button--loader",
   content: "content",
@@ -27,12 +27,13 @@ const CSS = {
   buttonPadding: "button-padding",
   buttonPaddingShrunk: "button-padding--shrunk"
 };
-const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block;inline-size:auto;vertical-align:middle;border-radius:var(--calcite-button-corner-radius, var(--calcite-internal-button-corner-radius, 0))}:host a,:host button{--calcite-internal-button-content-margin: .5rem;--calcite-internal-button-padding-x: 7px;--calcite-internal-button-padding-y: 3px;position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;-webkit-user-select:none;user-select:none;appearance:none;align-items:center;justify-content:center;border-style:none;text-align:center;font-family:inherit;font-weight:var(--calcite-font-weight-normal);text-decoration-line:none;outline-color:transparent;box-shadow:var(--calcite-button-shadow, var(--calcite-shadow-none));background-color:var(--calcite-button-background-color, var(--calcite-internal-button-background-color, var(--calcite-color-transparent)));border-block-start-color:var(--calcite-button-border-color, var(--calcite-internal-button-border-block-start-color, var(--calcite-internal-button-border-color, var(--calcite-color-transparent))));border-block-end-color:var(--calcite-button-border-color, var(--calcite-internal-button-border-block-end-color, var(--calcite-internal-button-border-color, var(--calcite-color-transparent))));border-inline-start-color:var(--calcite-button-border-color, var(--calcite-internal-button-border-inline-start-color, var(--calcite-internal-button-border-color, var(--calcite-color-transparent))));border-inline-end-color:var(--calcite-button-border-color, var(--calcite-internal-button-border-inline-end-color, var(--calcite-internal-button-border-color, var(--calcite-color-transparent))));border-style:solid;border-width:var(--calcite-border-width-sm);border-radius:var(--calcite-button-corner-radius, var(--calcite-internal-button-corner-radius, 0));color:var(--calcite-button-text-color, var(--calcite-internal-button-text-color, currentColor));padding-block:var(--calcite-internal-button-padding-y);padding-inline:var(--calcite-internal-button-padding-x);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}:host a:hover,:host button:hover{text-decoration-line:none;background-color:var(--calcite-button-background-color, var(--calcite-internal-button-background-color-hover, var(--calcite-color-transparent)))}:host a:focus,:host button:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));background-color:var(--calcite-button-background-color, var(--calcite-internal-button-background-color))}:host a:active,:host button:active{background-color:var(--calcite-button-background-color, var(--calcite-internal-button-background-color-press, var(--calcite-color-transparent)))}:host a span,:host button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host a calcite-loader,:host button calcite-loader{color:var(--calcite-button-loader-color, var(--calcite-internal-button-loader-color, var(--calcite-button-text-color, var(--calcite-internal-button-text-color))))}:host([round]){--calcite-internal-button-corner-radius: 50px}.content{margin-inline:var(--calcite-internal-button-content-margin)}.icon-start-empty .content{margin-inline-start:unset}.icon-end-empty .content{margin-inline-end:unset}:host([scale=m]) button,:host([scale=m]) a{--calcite-internal-button-content-margin: .75rem}:host([scale=l]) button,:host([scale=l]) a{--calcite-internal-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{justify-content:center}:host([alignment=start]:not([width=auto])) a,:host([alignment=start]:not([width=auto])) button{justify-content:flex-start}:host([alignment=end]:not([width=auto])) a,:host([alignment=end]:not([width=auto])) button{justify-content:flex-end}:host([alignment*=space-between]:not([width=auto])) a,:host([alignment*=space-between]:not([width=auto])) button{justify-content:space-between}:host([alignment=icon-start-space-between]:not([width=auto])) .icon--start{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{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{margin-inline-start:var(--calcite-internal-button-content-margin)}.icon--start,.icon--end{color:var(--calcite-button-icon-color, var(--calcite-icon-color, var(--calcite-ui-icon-color)))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}@keyframes loader-in{0%{inline-size:0;opacity:0;transform:scale(.5)}to{inline-size:1em;opacity:1;transform:scale(1)}}@keyframes loader-out{0%{inline-size:1em;opacity:1;transform:scale(1)}to{inline-size:0;opacity:0;transform:scale(.5)}}.calcite-button--loader{display:flex}.calcite-button--loader calcite-loader{margin:0}:host([loading]) button.content--slotted .calcite-button--loader calcite-loader,:host([loading]) a.content--slotted .calcite-button--loader calcite-loader{margin-inline-end:var(--calcite-internal-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]) button,:host([appearance]) a{--calcite-internal-button-border-color: var(--calcite-color-transparent);border-style:solid;border-width:var(--calcite-button-border-size, 1px)}:host([kind=brand]){--calcite-internal-button-background-color: var(--calcite-color-brand);--calcite-internal-button-background-color-hover: var(--calcite-color-brand-hover);--calcite-internal-button-background-color-press: var(--calcite-color-brand-press);--calcite-internal-button-loader-color: var(--calcite-color-text-inverse);--calcite-internal-button-text-color: var(--calcite-color-text-inverse)}:host([kind=danger]){--calcite-internal-button-background-color: var(--calcite-color-status-danger);--calcite-internal-button-background-color-hover: var(--calcite-color-status-danger-hover);--calcite-internal-button-background-color-press: var(--calcite-color-status-danger-press);--calcite-internal-button-loader-color: var(--calcite-color-text-inverse);--calcite-internal-button-text-color: var(--calcite-color-text-inverse)}:host([kind=neutral]){--calcite-internal-button-background-color: var(--calcite-color-foreground-3);--calcite-internal-button-background-color-hover: var(--calcite-color-foreground-2);--calcite-internal-button-background-color-press: var(--calcite-color-foreground-1);--calcite-internal-button-loader-color: var(--calcite-color-text-1);--calcite-internal-button-text-color: var(--calcite-color-text-1)}:host([kind=inverse]){--calcite-internal-button-background-color: var(--calcite-color-inverse);--calcite-internal-button-background-color-hover: var(--calcite-color-inverse-hover);--calcite-internal-button-background-color-press: var(--calcite-color-inverse-press);--calcite-internal-button-loader-color: var(--calcite-color-text-inverse);--calcite-internal-button-text-color: var(--calcite-color-text-inverse)}:host([appearance=outline-fill]){--calcite-internal-button-background-color: var(--calcite-color-foreground-1);--calcite-internal-button-background-color-hover: var(--calcite-color-foreground-2);--calcite-internal-button-background-color-press: var(--calcite-color-foreground-3)}:host([appearance=outline-fill]) button,:host([appearance=outline-fill]) a{border-style:solid;border-width:var(--calcite-button-border-size, 1px)}:host([appearance=outline-fill][kind=brand]) button,:host([appearance=outline-fill][kind=brand]) a{--calcite-internal-button-border-color: var(--calcite-color-brand);--calcite-internal-button-text-color: var(--calcite-color-brand);--calcite-internal-button-loader-color: var(--calcite-color-brand)}:host([appearance=outline-fill][kind=brand]) button:hover,:host([appearance=outline-fill][kind=brand]) a:hover{--calcite-internal-button-border-color: var(--calcite-color-brand-hover);--calcite-internal-button-text-color: var(--calcite-color-brand-hover)}:host([appearance=outline-fill][kind=brand]) button:focus,:host([appearance=outline-fill][kind=brand]) a:focus{--calcite-internal-button-border-color: var(--calcite-color-brand);--calcite-internal-button-text-color: var(--calcite-color-brand)}:host([appearance=outline-fill][kind=brand]) button:active,:host([appearance=outline-fill][kind=brand]) a:active{--calcite-internal-button-border-color: var(--calcite-color-brand-press);--calcite-internal-button-text-color: var(--calcite-color-brand-press)}:host([appearance=outline-fill][kind=brand]) button calcite-loader,:host([appearance=outline-fill][kind=brand]) a calcite-loader{--calcite-internal-button-loader-color: var(--calcite-color-brand)}:host([appearance=outline-fill][kind=danger]) button,:host([appearance=outline-fill][kind=danger]) a{--calcite-internal-button-border-color: var(--calcite-color-status-danger);--calcite-internal-button-text-color: var(--calcite-color-status-danger);--calcite-internal-button-loader-color: var(--calcite-color-status-danger)}:host([appearance=outline-fill][kind=danger]) button:hover,:host([appearance=outline-fill][kind=danger]) a:hover{--calcite-internal-button-border-color: var(--calcite-color-status-danger-hover);--calcite-internal-button-text-color: var(--calcite-color-status-danger-hover)}:host([appearance=outline-fill][kind=danger]) button:focus,:host([appearance=outline-fill][kind=danger]) a:focus{--calcite-internal-button-border-color: var(--calcite-color-status-danger);--calcite-internal-button-text-color: var(--calcite-color-status-danger)}:host([appearance=outline-fill][kind=danger]) button:active,:host([appearance=outline-fill][kind=danger]) a:active{--calcite-internal-button-border-color: var(--calcite-color-status-danger-press);--calcite-internal-button-text-color: var(--calcite-color-status-danger-press)}:host([appearance=outline-fill][kind=danger]) button calcite-loader,:host([appearance=outline-fill][kind=danger]) a calcite-loader{--calcite-internal-button-loader-color: var(--calcite-color-status-danger)}:host([appearance=outline-fill][kind=neutral]) button,:host([appearance=outline-fill][kind=neutral]) a{--calcite-internal-button-border-color: var(--calcite-color-border-1);--calcite-internal-button-text-color: var(--calcite-color-text-1);--calcite-internal-button-loader-color: var(--calcite-color-text-1)}:host([appearance=outline-fill][kind=neutral]) button:hover,:host([appearance=outline-fill][kind=neutral]) a:hover{--calcite-internal-button-border-color: var(--calcite-color-border-input)}:host([appearance=outline-fill][kind=neutral]) button:focus,:host([appearance=outline-fill][kind=neutral]) a:focus{--calcite-internal-button-border-color: var(--calcite-color-foreground-3)}:host([appearance=outline-fill][kind=neutral]) button:active,:host([appearance=outline-fill][kind=neutral]) a:active{--calcite-internal-button-border-color: var(--calcite-color-text-3)}:host([appearance=solid][kind=neutral]){--calcite-internal-button-background-color-hover: var(--calcite-color-border-2);--calcite-internal-button-background-color-press: var(--calcite-color-border-1)}:host([appearance=outline-fill][kind=inverse]) button,:host([appearance=outline-fill][kind=inverse]) a{--calcite-internal-button-text-color: var(--calcite-color-text-1);--calcite-internal-button-border-color: var(--calcite-color-inverse);--calcite-internal-button-loader-color: var(--calcite-color-text-1)}:host([appearance=outline-fill][kind=inverse]) button:hover,:host([appearance=outline-fill][kind=inverse]) a:hover{--calcite-internal-button-border-color: var(--calcite-color-inverse-hover)}:host([appearance=outline-fill][kind=inverse]) button:focus,:host([appearance=outline-fill][kind=inverse]) a:focus{--calcite-internal-button-border-color: var(--calcite-color-inverse)}:host([appearance=outline-fill][kind=inverse]) button:active,:host([appearance=outline-fill][kind=inverse]) a:active{--calcite-internal-button-border-color: var(--calcite-color-inverse-press)}:host([appearance=outline]){--calcite-internal-button-background-color: var(--calcite-color-transparent);--calcite-internal-button-background-color-hover: var(--calcite-color-transparent-hover);--calcite-internal-button-background-color-press: var(--calcite-color-transparent-press)}:host([appearance=outline]) button,:host([appearance=outline]) a{border-style:solid;border-width:var(--calcite-button-border-size, 1px)}:host([appearance=outline][kind=brand]) button,:host([appearance=outline][kind=brand]) a{--calcite-internal-button-border-color: var(--calcite-color-brand);--calcite-internal-button-text-color: var(--calcite-color-brand);--calcite-internal-button-loader-color: var(--calcite-color-brand)}:host([appearance=outline][kind=brand]) button:hover,:host([appearance=outline][kind=brand]) a:hover{--calcite-internal-button-border-color: var(--calcite-color-brand-hover);--calcite-internal-button-text-color: var(--calcite-color-brand-hover)}:host([appearance=outline][kind=brand]) button:focus,:host([appearance=outline][kind=brand]) a:focus{--calcite-internal-button-border-color: var(--calcite-color-brand);--calcite-internal-button-text-color: var(--calcite-color-brand)}:host([appearance=outline][kind=brand]) button:active,:host([appearance=outline][kind=brand]) a:active{--calcite-internal-button-border-color: var(--calcite-color-brand-press);--calcite-internal-button-text-color: var(--calcite-color-brand-press)}:host([appearance=outline][kind=brand]) button calcite-loader,:host([appearance=outline][kind=brand]) a calcite-loader{--calcite-internal-button-loader-color: var(--calcite-color-brand)}:host([appearance=outline][kind=danger]) button,:host([appearance=outline][kind=danger]) a{--calcite-internal-button-border-color: var(--calcite-color-status-danger);--calcite-internal-button-text-color: var(--calcite-color-status-danger);--calcite-internal-button-loader-color: var(--calcite-color-status-danger)}:host([appearance=outline][kind=danger]) button:hover,:host([appearance=outline][kind=danger]) a:hover{--calcite-internal-button-border-color: var(--calcite-color-status-danger-hover);--calcite-internal-button-text-color: var(--calcite-color-status-danger-hover)}:host([appearance=outline][kind=danger]) button:focus,:host([appearance=outline][kind=danger]) a:focus{--calcite-internal-button-border-color: var(--calcite-color-status-danger);--calcite-internal-button-text-color: var(--calcite-color-status-danger)}:host([appearance=outline][kind=danger]) button:active,:host([appearance=outline][kind=danger]) a:active{--calcite-internal-button-border-color: var(--calcite-color-status-danger-press);--calcite-internal-button-text-color: var(--calcite-color-status-danger-press)}:host([appearance=outline][kind=danger]) button calcite-loader,:host([appearance=outline][kind=danger]) a calcite-loader{--calcite-internal-button-loader-color: var(--calcite-color-status-danger)}:host([appearance=outline][kind=neutral]) button,:host([appearance=outline][kind=neutral]) a{--calcite-internal-button-text-color: var(--calcite-color-text-1);--calcite-internal-button-border-color: var(--calcite-color-border-1);--calcite-internal-button-loader-color: var(--calcite-color-text-1)}:host([appearance=outline][kind=neutral]) button:hover,:host([appearance=outline][kind=neutral]) a:hover{--calcite-internal-button-border-color: var(--calcite-color-border-input)}:host([appearance=outline][kind=neutral]) button:focus,:host([appearance=outline][kind=neutral]) a:focus{--calcite-internal-button-border-color: var(--calcite-color-foreground-3)}:host([appearance=outline][kind=neutral]) button:active,:host([appearance=outline][kind=neutral]) a:active{--calcite-internal-button-border-color: var(--calcite-color-text-3)}:host([appearance=outline][kind=inverse]) button,:host([appearance=outline][kind=inverse]) a{--calcite-internal-button-text-color: var(--calcite-color-text-1);--calcite-internal-button-border-color: var(--calcite-color-inverse);--calcite-internal-button-loader-color: var(--calcite-color-text-1)}:host([appearance=outline][kind=inverse]) button:hover,:host([appearance=outline][kind=inverse]) a:hover{--calcite-internal-button-border-color: var(--calcite-color-inverse-hover)}:host([appearance=outline][kind=inverse]) button:focus,:host([appearance=outline][kind=inverse]) a:focus{--calcite-internal-button-border-color: var(--calcite-color-inverse)}:host([appearance=outline][kind=inverse]) button:active,:host([appearance=outline][kind=inverse]) a:active{--calcite-internal-button-border-color: var(--calcite-color-inverse-press)}:host([appearance=outline-fill][split-child=primary]) button,:host([appearance=outline][split-child=primary]) button,:host([appearance=outline-fill][split-child=primary]) a,:host([appearance=outline][split-child=primary]) a{border-inline-end-width:0;border-inline-start-width:1px}:host([appearance=outline-fill][split-child=secondary]) button,:host([appearance=outline][split-child=secondary]) button,:host([appearance=outline-fill][split-child=secondary]) a,:host([appearance=outline][split-child=secondary]) a{border-inline-start-width:0;border-inline-end-width:1px}:host([appearance=transparent]){--calcite-internal-button-background-color: var(--calcite-color-transparent);--calcite-internal-button-background-color-hover: var(--calcite-color-transparent-hover);--calcite-internal-button-background-color-press: var(--calcite-color-transparent-press)}:host([appearance=transparent]:not(.enable-editing-button)){--calcite-internal-button-background-color-hover: var(--calcite-color-transparent-hover);--calcite-internal-button-background-color-press: var(--calcite-color-transparent-press)}:host([appearance=transparent][kind=brand]) button,:host([appearance=transparent][kind=brand]) a{--calcite-internal-button-text-color: var(--calcite-color-brand);--calcite-internal-button-loader-color: var(--calcite-color-brand)}:host([appearance=transparent][kind=brand]) button:hover,:host([appearance=transparent][kind=brand]) a:hover{--calcite-internal-button-text-color: var(--calcite-color-brand-hover)}:host([appearance=transparent][kind=brand]) button:focus,:host([appearance=transparent][kind=brand]) a:focus{--calcite-internal-button-text-color: var(--calcite-color-brand)}:host([appearance=transparent][kind=brand]) button:active,:host([appearance=transparent][kind=brand]) a:active{--calcite-internal-button-text-color: var(--calcite-color-brand-press)}:host([appearance=transparent][kind=brand]) button calcite-loader,:host([appearance=transparent][kind=brand]) a calcite-loader{--calcite-internal-button-loader-color: var(--calcite-color-brand)}:host([appearance=transparent][kind=danger]) button,:host([appearance=transparent][kind=danger]) a{--calcite-internal-button-text-color: var(--calcite-color-status-danger);--calcite-internal-button-loader-color: var(--calcite-color-status-danger)}:host([appearance=transparent][kind=danger]) button:hover,:host([appearance=transparent][kind=danger]) a:hover{--calcite-internal-button-text-color: var(--calcite-color-status-danger-hover)}:host([appearance=transparent][kind=danger]) button:focus,:host([appearance=transparent][kind=danger]) a:focus{--calcite-internal-button-text-color: var(--calcite-color-status-danger)}:host([appearance=transparent][kind=danger]) button:active,:host([appearance=transparent][kind=danger]) a:active{--calcite-internal-button-text-color: var(--calcite-color-status-danger-press)}:host([appearance=transparent][kind=danger]) button calcite-loader,:host([appearance=transparent][kind=danger]) a calcite-loader{--calcite-internal-button-loader-color: var(--calcite-color-status-danger)}:host([appearance=transparent][kind=neutral]:not(.cancel-editing-button)) button,:host([appearance=transparent][kind=neutral]:not(.cancel-editing-button)) a,:host([appearance=transparent][kind=neutral]:not(.cancel-editing-button)) calcite-loader{--calcite-internal-button-text-color: var(--calcite-color-text-1)}:host([appearance=transparent][kind=neutral].cancel-editing-button) button{--calcite-internal-button-text-color: var(--calcite-color-text-3)}:host([appearance=transparent][kind=neutral].cancel-editing-button) button:hover{--calcite-internal-button-text-color: var(--calcite-color-text-1);--calcite-internal-button-padding-y: 0}:host(.confirm-changes-button) button:focus,:host(.cancel-editing-button) button:focus,:host(.enable-editing-button) button:focus{outline-offset:-2px}:host([appearance=transparent][kind=inverse]){--calcite-internal-button-background-color-hover: var(--calcite-color-transparent-hover);--calcite-internal-button-background-color-press: var(--calcite-color-transparent-press)}:host([appearance=transparent][kind=inverse]) button calcite-loader,:host([appearance=transparent][kind=inverse]) a calcite-loader{--calcite-internal-button-text-color: var(--calcite-color-text-inverse)}:host([scale=s]) button.content--slotted,:host([scale=s]) a.content--slotted{font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm)}:host([scale=s][appearance=transparent]) button.content--slotted,:host([scale=s][appearance=transparent]) a.content--slotted{--calcite-internal-button-padding-x: .5rem}:host([scale=s]) button,:host([scale=s]) a{--calcite-internal-button-padding-y: 3px}:host([scale=m]) button.content--slotted,:host([scale=m]) a.content--slotted{--calcite-internal-button-padding-x: 11px;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}:host([scale=m]) button,:host([scale=m]) a{--calcite-internal-button-padding-y: 7px}:host([scale=m][appearance=transparent]) button.content--slotted,:host([scale=m][appearance=transparent]) a.content--slotted{--calcite-internal-button-padding-x: .75rem}:host([scale=l]) button.content--slotted,:host([scale=l]) a.content--slotted{--calcite-internal-button-padding-x: 15px;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}:host([scale=l]) .button-padding{--calcite-internal-button-padding-x: 1rem;--calcite-internal-button-padding-y: 11px}:host([scale=l]) .button-padding--shrunk{--calcite-internal-button-padding-y: 9px}:host([scale=s]) button:not(.content--slotted),:host([scale=s]) a:not(.content--slotted){--calcite-internal-button-padding-x: .125rem;--calcite-internal-button-padding-y: 3px;inline-size:1.5rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);min-block-size:1.5rem}:host([scale=m]) button:not(.content--slotted),:host([scale=m]) a:not(.content--slotted){--calcite-internal-button-padding-x: .125rem;--calcite-internal-button-padding-y: 7px;inline-size:2rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);min-block-size:2rem}:host([scale=l]) button:not(.content--slotted),:host([scale=l]) a:not(.content--slotted){--calcite-internal-button-padding-x: .125rem;--calcite-internal-button-padding-y: 9px;inline-size:2.75rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);min-block-size:2.75rem}:host(:is([scale=s],[scale=m],[scale=l])[width=full]) a:not(.content--slotted),:host(:is([scale=s],[scale=m],[scale=l])[width=full]) button:not(.content--slotted){inline-size:var(--calcite-container-size-content-fluid)}:host([scale=l][appearance=transparent]) button:not(.content--slotted),:host([scale=l][appearance=transparent]) a:not(.content--slotted){--calcite-internal-button-padding-y: .625rem}:host([scale=s][icon-start][icon-end]) button:not(.content--slotted),:host([scale=s][icon-start][icon-end]) a:not(.content--slotted){--calcite-internal-button-padding-x: 23px;block-size:1.5rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}: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-internal-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-internal-button-padding-x: 2rem;block-size:2rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}: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-internal-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-internal-button-padding-x: 43px;block-size:2.75rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}: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{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-internal-button-padding-x: 2.75rem}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block;inline-size:auto;vertical-align:middle;border-radius:var(--calcite-button-corner-radius, var(--calcite-internal-button-corner-radius, 0))}:host a,:host button{--calcite-internal-button-content-margin: .5rem;--calcite-internal-button-padding-x: 7px;--calcite-internal-button-padding-y: 3px;position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;-webkit-user-select:none;user-select:none;appearance:none;align-items:center;justify-content:center;border-style:none;text-align:center;font-family:inherit;font-weight:var(--calcite-font-weight-normal);text-decoration-line:none;outline-color:transparent;box-shadow:var(--calcite-button-shadow, var(--calcite-shadow-none));background-color:var(--calcite-button-background-color, var(--calcite-internal-button-background-color, var(--calcite-color-transparent)));border-block-start-color:var(--calcite-button-border-color, var(--calcite-internal-button-border-block-start-color, var(--calcite-internal-button-border-color, var(--calcite-color-transparent))));border-block-end-color:var(--calcite-button-border-color, var(--calcite-internal-button-border-block-end-color, var(--calcite-internal-button-border-color, var(--calcite-color-transparent))));border-inline-start-color:var(--calcite-button-border-color, var(--calcite-internal-button-border-inline-start-color, var(--calcite-internal-button-border-color, var(--calcite-color-transparent))));border-inline-end-color:var(--calcite-button-border-color, var(--calcite-internal-button-border-inline-end-color, var(--calcite-internal-button-border-color, var(--calcite-color-transparent))));border-style:solid;border-width:var(--calcite-border-width-sm);border-radius:var(--calcite-button-corner-radius, var(--calcite-internal-button-corner-radius, 0));color:var(--calcite-button-text-color, var(--calcite-internal-button-text-color, currentColor));padding-block:var(--calcite-internal-button-padding-y);padding-inline:var(--calcite-internal-button-padding-x);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}:host a:hover,:host button:hover{text-decoration-line:none;background-color:var(--calcite-button-background-color, var(--calcite-internal-button-background-color-hover, var(--calcite-color-transparent)))}:host a:focus,:host button:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));background-color:var(--calcite-button-background-color, var(--calcite-internal-button-background-color))}:host a:active,:host button:active{background-color:var(--calcite-button-background-color, var(--calcite-internal-button-background-color-press, var(--calcite-color-transparent)))}:host a span,:host button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host a calcite-loader,:host button calcite-loader{color:var(--calcite-button-loader-color, var(--calcite-internal-button-loader-color, var(--calcite-button-text-color, var(--calcite-internal-button-text-color))))}:host([round]){--calcite-internal-button-corner-radius: 50px}.content{margin-inline:var(--calcite-internal-button-content-margin)}.icon-start-empty .content{margin-inline-start:unset}.icon-end-empty .content{margin-inline-end:unset}:host([scale=m]) button,:host([scale=m]) a{--calcite-internal-button-content-margin: .75rem}:host([scale=l]) button,:host([scale=l]) a{--calcite-internal-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{justify-content:center}:host([alignment=start]:not([width=auto])) a,:host([alignment=start]:not([width=auto])) button{justify-content:flex-start}:host([alignment=end]:not([width=auto])) a,:host([alignment=end]:not([width=auto])) button{justify-content:flex-end}:host([alignment*=space-between]:not([width=auto])) a,:host([alignment*=space-between]:not([width=auto])) button{justify-content:space-between}:host([alignment=icon-start-space-between]:not([width=auto])) .icon--start{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{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{margin-inline-start:var(--calcite-internal-button-content-margin)}.icon--start,.icon--end{color:var(--calcite-button-icon-color, var(--calcite-icon-color, var(--calcite-ui-icon-color)))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}@keyframes loader-in{0%{inline-size:0;opacity:0;transform:scale(.5)}to{inline-size:1em;opacity:1;transform:scale(1)}}@keyframes loader-out{0%{inline-size:1em;opacity:1;transform:scale(1)}to{inline-size:0;opacity:0;transform:scale(.5)}}.calcite-button--loader{display:flex}.calcite-button--loader calcite-loader{margin:0}:host([loading]) button.content--slotted .calcite-button--loader calcite-loader,:host([loading]) a.content--slotted .calcite-button--loader calcite-loader{margin-inline-end:var(--calcite-internal-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]) button,:host([appearance]) a{--calcite-internal-button-border-color: var(--calcite-color-transparent);border-style:solid;border-width:var(--calcite-button-border-size, 1px)}:host([kind=brand]){--calcite-internal-button-background-color: var(--calcite-color-brand);--calcite-internal-button-background-color-hover: var(--calcite-color-brand-hover);--calcite-internal-button-background-color-press: var(--calcite-color-brand-press);--calcite-internal-button-loader-color: var(--calcite-color-text-inverse);--calcite-internal-button-text-color: var(--calcite-color-text-inverse)}:host([kind=danger]){--calcite-internal-button-background-color: var(--calcite-color-status-danger);--calcite-internal-button-background-color-hover: var(--calcite-color-status-danger-hover);--calcite-internal-button-background-color-press: var(--calcite-color-status-danger-press);--calcite-internal-button-loader-color: var(--calcite-color-text-inverse);--calcite-internal-button-text-color: var(--calcite-color-text-inverse)}:host([kind=neutral]){--calcite-internal-button-background-color: var(--calcite-color-foreground-3);--calcite-internal-button-background-color-hover: var(--calcite-color-foreground-2);--calcite-internal-button-background-color-press: var(--calcite-color-foreground-1);--calcite-internal-button-loader-color: var(--calcite-color-text-1);--calcite-internal-button-text-color: var(--calcite-color-text-1)}:host([kind=inverse]){--calcite-internal-button-background-color: var(--calcite-color-inverse);--calcite-internal-button-background-color-hover: var(--calcite-color-inverse-hover);--calcite-internal-button-background-color-press: var(--calcite-color-inverse-press);--calcite-internal-button-loader-color: var(--calcite-color-text-inverse);--calcite-internal-button-text-color: var(--calcite-color-text-inverse)}:host([appearance=outline-fill]){--calcite-internal-button-background-color: var(--calcite-color-foreground-1);--calcite-internal-button-background-color-hover: var(--calcite-color-foreground-2);--calcite-internal-button-background-color-press: var(--calcite-color-foreground-3)}:host([appearance=outline-fill]) button,:host([appearance=outline-fill]) a{border-style:solid;border-width:var(--calcite-button-border-size, 1px)}:host([appearance=outline-fill][kind=brand]) button,:host([appearance=outline-fill][kind=brand]) a{--calcite-internal-button-border-color: var(--calcite-color-brand);--calcite-internal-button-text-color: var(--calcite-color-brand);--calcite-internal-button-loader-color: var(--calcite-color-brand)}:host([appearance=outline-fill][kind=brand]) button:hover,:host([appearance=outline-fill][kind=brand]) a:hover{--calcite-internal-button-border-color: var(--calcite-color-brand-hover);--calcite-internal-button-text-color: var(--calcite-color-brand-hover)}:host([appearance=outline-fill][kind=brand]) button:focus,:host([appearance=outline-fill][kind=brand]) a:focus{--calcite-internal-button-border-color: var(--calcite-color-brand);--calcite-internal-button-text-color: var(--calcite-color-brand)}:host([appearance=outline-fill][kind=brand]) button:active,:host([appearance=outline-fill][kind=brand]) a:active{--calcite-internal-button-border-color: var(--calcite-color-brand-press);--calcite-internal-button-text-color: var(--calcite-color-brand-press)}:host([appearance=outline-fill][kind=brand]) button calcite-loader,:host([appearance=outline-fill][kind=brand]) a calcite-loader{--calcite-internal-button-loader-color: var(--calcite-color-brand)}:host([appearance=outline-fill][kind=danger]) button,:host([appearance=outline-fill][kind=danger]) a{--calcite-internal-button-border-color: var(--calcite-color-status-danger);--calcite-internal-button-text-color: var(--calcite-color-status-danger);--calcite-internal-button-loader-color: var(--calcite-color-status-danger)}:host([appearance=outline-fill][kind=danger]) button:hover,:host([appearance=outline-fill][kind=danger]) a:hover{--calcite-internal-button-border-color: var(--calcite-color-status-danger-hover);--calcite-internal-button-text-color: var(--calcite-color-status-danger-hover)}:host([appearance=outline-fill][kind=danger]) button:focus,:host([appearance=outline-fill][kind=danger]) a:focus{--calcite-internal-button-border-color: var(--calcite-color-status-danger);--calcite-internal-button-text-color: var(--calcite-color-status-danger)}:host([appearance=outline-fill][kind=danger]) button:active,:host([appearance=outline-fill][kind=danger]) a:active{--calcite-internal-button-border-color: var(--calcite-color-status-danger-press);--calcite-internal-button-text-color: var(--calcite-color-status-danger-press)}:host([appearance=outline-fill][kind=danger]) button calcite-loader,:host([appearance=outline-fill][kind=danger]) a calcite-loader{--calcite-internal-button-loader-color: var(--calcite-color-status-danger)}:host([appearance=outline-fill][kind=neutral]) button,:host([appearance=outline-fill][kind=neutral]) a{--calcite-internal-button-border-color: var(--calcite-color-border-1);--calcite-internal-button-text-color: var(--calcite-color-text-1);--calcite-internal-button-loader-color: var(--calcite-color-text-1)}:host([appearance=outline-fill][kind=neutral]) button:hover,:host([appearance=outline-fill][kind=neutral]) a:hover{--calcite-internal-button-border-color: var(--calcite-color-border-input)}:host([appearance=outline-fill][kind=neutral]) button:focus,:host([appearance=outline-fill][kind=neutral]) a:focus{--calcite-internal-button-border-color: var(--calcite-color-foreground-3)}:host([appearance=outline-fill][kind=neutral]) button:active,:host([appearance=outline-fill][kind=neutral]) a:active{--calcite-internal-button-border-color: var(--calcite-color-text-3)}:host([appearance=solid][kind=neutral]){--calcite-internal-button-background-color-hover: var(--calcite-color-border-2);--calcite-internal-button-background-color-press: var(--calcite-color-border-1)}:host([appearance=outline-fill][kind=inverse]) button,:host([appearance=outline-fill][kind=inverse]) a{--calcite-internal-button-text-color: var(--calcite-color-text-1);--calcite-internal-button-border-color: var(--calcite-color-inverse);--calcite-internal-button-loader-color: var(--calcite-color-text-1)}:host([appearance=outline-fill][kind=inverse]) button:hover,:host([appearance=outline-fill][kind=inverse]) a:hover{--calcite-internal-button-border-color: var(--calcite-color-inverse-hover)}:host([appearance=outline-fill][kind=inverse]) button:focus,:host([appearance=outline-fill][kind=inverse]) a:focus{--calcite-internal-button-border-color: var(--calcite-color-inverse)}:host([appearance=outline-fill][kind=inverse]) button:active,:host([appearance=outline-fill][kind=inverse]) a:active{--calcite-internal-button-border-color: var(--calcite-color-inverse-press)}:host([appearance=outline]){--calcite-internal-button-background-color: var(--calcite-color-transparent);--calcite-internal-button-background-color-hover: var(--calcite-color-transparent-hover);--calcite-internal-button-background-color-press: var(--calcite-color-transparent-press)}:host([appearance=outline]) button,:host([appearance=outline]) a{border-style:solid;border-width:var(--calcite-button-border-size, 1px)}:host([appearance=outline][kind=brand]) button,:host([appearance=outline][kind=brand]) a{--calcite-internal-button-border-color: var(--calcite-color-brand);--calcite-internal-button-text-color: var(--calcite-color-brand);--calcite-internal-button-loader-color: var(--calcite-color-brand)}:host([appearance=outline][kind=brand]) button:hover,:host([appearance=outline][kind=brand]) a:hover{--calcite-internal-button-border-color: var(--calcite-color-brand-hover);--calcite-internal-button-text-color: var(--calcite-color-brand-hover)}:host([appearance=outline][kind=brand]) button:focus,:host([appearance=outline][kind=brand]) a:focus{--calcite-internal-button-border-color: var(--calcite-color-brand);--calcite-internal-button-text-color: var(--calcite-color-brand)}:host([appearance=outline][kind=brand]) button:active,:host([appearance=outline][kind=brand]) a:active{--calcite-internal-button-border-color: var(--calcite-color-brand-press);--calcite-internal-button-text-color: var(--calcite-color-brand-press)}:host([appearance=outline][kind=brand]) button calcite-loader,:host([appearance=outline][kind=brand]) a calcite-loader{--calcite-internal-button-loader-color: var(--calcite-color-brand)}:host([appearance=outline][kind=danger]) button,:host([appearance=outline][kind=danger]) a{--calcite-internal-button-border-color: var(--calcite-color-status-danger);--calcite-internal-button-text-color: var(--calcite-color-status-danger);--calcite-internal-button-loader-color: var(--calcite-color-status-danger)}:host([appearance=outline][kind=danger]) button:hover,:host([appearance=outline][kind=danger]) a:hover{--calcite-internal-button-border-color: var(--calcite-color-status-danger-hover);--calcite-internal-button-text-color: var(--calcite-color-status-danger-hover)}:host([appearance=outline][kind=danger]) button:focus,:host([appearance=outline][kind=danger]) a:focus{--calcite-internal-button-border-color: var(--calcite-color-status-danger);--calcite-internal-button-text-color: var(--calcite-color-status-danger)}:host([appearance=outline][kind=danger]) button:active,:host([appearance=outline][kind=danger]) a:active{--calcite-internal-button-border-color: var(--calcite-color-status-danger-press);--calcite-internal-button-text-color: var(--calcite-color-status-danger-press)}:host([appearance=outline][kind=danger]) button calcite-loader,:host([appearance=outline][kind=danger]) a calcite-loader{--calcite-internal-button-loader-color: var(--calcite-color-status-danger)}:host([appearance=outline][kind=neutral]) button,:host([appearance=outline][kind=neutral]) a{--calcite-internal-button-text-color: var(--calcite-color-text-1);--calcite-internal-button-border-color: var(--calcite-color-border-1);--calcite-internal-button-loader-color: var(--calcite-color-text-1)}:host([appearance=outline][kind=neutral]) button:hover,:host([appearance=outline][kind=neutral]) a:hover{--calcite-internal-button-border-color: var(--calcite-color-border-input)}:host([appearance=outline][kind=neutral]) button:focus,:host([appearance=outline][kind=neutral]) a:focus{--calcite-internal-button-border-color: var(--calcite-color-foreground-3)}:host([appearance=outline][kind=neutral]) button:active,:host([appearance=outline][kind=neutral]) a:active{--calcite-internal-button-border-color: var(--calcite-color-text-3)}:host([appearance=outline][kind=inverse]) button,:host([appearance=outline][kind=inverse]) a{--calcite-internal-button-text-color: var(--calcite-color-text-1);--calcite-internal-button-border-color: var(--calcite-color-inverse);--calcite-internal-button-loader-color: var(--calcite-color-text-1)}:host([appearance=outline][kind=inverse]) button:hover,:host([appearance=outline][kind=inverse]) a:hover{--calcite-internal-button-border-color: var(--calcite-color-inverse-hover)}:host([appearance=outline][kind=inverse]) button:focus,:host([appearance=outline][kind=inverse]) a:focus{--calcite-internal-button-border-color: var(--calcite-color-inverse)}:host([appearance=outline][kind=inverse]) button:active,:host([appearance=outline][kind=inverse]) a:active{--calcite-internal-button-border-color: var(--calcite-color-inverse-press)}:host([appearance=outline-fill][split-child=primary]) button,:host([appearance=outline][split-child=primary]) button,:host([appearance=outline-fill][split-child=primary]) a,:host([appearance=outline][split-child=primary]) a{border-inline-end-width:0;border-inline-start-width:1px}:host([appearance=outline-fill][split-child=secondary]) button,:host([appearance=outline][split-child=secondary]) button,:host([appearance=outline-fill][split-child=secondary]) a,:host([appearance=outline][split-child=secondary]) a{border-inline-start-width:0;border-inline-end-width:1px}:host([appearance=transparent]){--calcite-internal-button-background-color: var(--calcite-color-transparent);--calcite-internal-button-background-color-hover: var(--calcite-color-transparent-hover);--calcite-internal-button-background-color-press: var(--calcite-color-transparent-press)}:host([appearance=transparent]:not(.enable-editing-button)){--calcite-internal-button-background-color-hover: var(--calcite-color-transparent-hover);--calcite-internal-button-background-color-press: var(--calcite-color-transparent-press)}:host([appearance=transparent][kind=brand]) button,:host([appearance=transparent][kind=brand]) a{--calcite-internal-button-text-color: var(--calcite-color-brand);--calcite-internal-button-loader-color: var(--calcite-color-brand)}:host([appearance=transparent][kind=brand]) button:hover,:host([appearance=transparent][kind=brand]) a:hover{--calcite-internal-button-text-color: var(--calcite-color-brand-hover)}:host([appearance=transparent][kind=brand]) button:focus,:host([appearance=transparent][kind=brand]) a:focus{--calcite-internal-button-text-color: var(--calcite-color-brand)}:host([appearance=transparent][kind=brand]) button:active,:host([appearance=transparent][kind=brand]) a:active{--calcite-internal-button-text-color: var(--calcite-color-brand-press)}:host([appearance=transparent][kind=brand]) button calcite-loader,:host([appearance=transparent][kind=brand]) a calcite-loader{--calcite-internal-button-loader-color: var(--calcite-color-brand)}:host([appearance=transparent][kind=danger]) button,:host([appearance=transparent][kind=danger]) a{--calcite-internal-button-text-color: var(--calcite-color-status-danger);--calcite-internal-button-loader-color: var(--calcite-color-status-danger)}:host([appearance=transparent][kind=danger]) button:hover,:host([appearance=transparent][kind=danger]) a:hover{--calcite-internal-button-text-color: var(--calcite-color-status-danger-hover)}:host([appearance=transparent][kind=danger]) button:focus,:host([appearance=transparent][kind=danger]) a:focus{--calcite-internal-button-text-color: var(--calcite-color-status-danger)}:host([appearance=transparent][kind=danger]) button:active,:host([appearance=transparent][kind=danger]) a:active{--calcite-internal-button-text-color: var(--calcite-color-status-danger-press)}:host([appearance=transparent][kind=danger]) button calcite-loader,:host([appearance=transparent][kind=danger]) a calcite-loader{--calcite-internal-button-loader-color: var(--calcite-color-status-danger)}:host([appearance=transparent][kind=neutral]:not(.cancel-editing-button)) button,:host([appearance=transparent][kind=neutral]:not(.cancel-editing-button)) a,:host([appearance=transparent][kind=neutral]:not(.cancel-editing-button)) calcite-loader{--calcite-internal-button-text-color: var(--calcite-color-text-1)}:host([appearance=transparent][kind=neutral].cancel-editing-button) button{--calcite-internal-button-text-color: var(--calcite-color-text-3)}:host([appearance=transparent][kind=neutral].cancel-editing-button) button:hover{--calcite-internal-button-text-color: var(--calcite-color-text-1);--calcite-internal-button-padding-y: 0}:host(.confirm-changes-button) button:focus,:host(.cancel-editing-button) button:focus,:host(.enable-editing-button) button:focus{outline-offset:-2px}:host([appearance=transparent][kind=inverse]){--calcite-internal-button-background-color-hover: var(--calcite-color-transparent-hover);--calcite-internal-button-background-color-press: var(--calcite-color-transparent-press)}:host([appearance=transparent][kind=inverse]) button calcite-loader,:host([appearance=transparent][kind=inverse]) a calcite-loader{--calcite-internal-button-text-color: var(--calcite-color-text-inverse)}:host([scale=s]) button.content--slotted,:host([scale=s]) a.content--slotted{font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm)}:host([scale=s][appearance=transparent]) button.content--slotted,:host([scale=s][appearance=transparent]) a.content--slotted{--calcite-internal-button-padding-x: .5rem}:host([scale=s]) button,:host([scale=s]) a{--calcite-internal-button-padding-y: 3px}:host([scale=m]) button.content--slotted,:host([scale=m]) a.content--slotted{--calcite-internal-button-padding-x: 11px;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}:host([scale=m]) button,:host([scale=m]) a{--calcite-internal-button-padding-y: 7px}:host([scale=m][appearance=transparent]) button.content--slotted,:host([scale=m][appearance=transparent]) a.content--slotted{--calcite-internal-button-padding-x: .75rem}:host([scale=l]) button.content--slotted,:host([scale=l]) a.content--slotted{--calcite-internal-button-padding-x: 15px;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}:host([scale=l]) .button-padding{--calcite-internal-button-padding-x: 1rem;--calcite-internal-button-padding-y: 11px}:host([scale=l]) .button-padding--shrunk{--calcite-internal-button-padding-y: 9px}:host([scale=s]) button:not(.content--slotted),:host([scale=s]) a:not(.content--slotted){--calcite-internal-button-padding-x: .125rem;--calcite-internal-button-padding-y: 3px;inline-size:1.5rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);min-block-size:1.5rem}:host([scale=m]) button:not(.content--slotted),:host([scale=m]) a:not(.content--slotted){--calcite-internal-button-padding-x: .125rem;--calcite-internal-button-padding-y: 7px;inline-size:2rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);min-block-size:2rem}:host([scale=l]) button:not(.content--slotted),:host([scale=l]) a:not(.content--slotted){--calcite-internal-button-padding-x: .125rem;--calcite-internal-button-padding-y: 9px;inline-size:2.75rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);min-block-size:2.75rem}:host(:is([scale=s],[scale=m],[scale=l])[width=full]) a:not(.content--slotted),:host(:is([scale=s],[scale=m],[scale=l])[width=full]) button:not(.content--slotted){inline-size:var(--calcite-container-size-content-fluid)}:host([scale=l][appearance=transparent]) button:not(.content--slotted),:host([scale=l][appearance=transparent]) a:not(.content--slotted){--calcite-internal-button-padding-y: var(--calcite-space-sm-plus)}:host([scale=s][icon-start][icon-end]) button:not(.content--slotted),:host([scale=s][icon-start][icon-end]) a:not(.content--slotted){--calcite-internal-button-padding-x: 23px;block-size:1.5rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}: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-internal-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-internal-button-padding-x: 2rem;block-size:2rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}: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-internal-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-internal-button-padding-x: 43px;block-size:2.75rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}: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{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-internal-button-padding-x: 2.75rem}:host([hidden]){display:none}[hidden]{display:none}`;
 class Button extends LitElement {
   constructor() {
     super(...arguments);
     this.attributeWatch = useWatchAttributes(["aria-expanded"], this.handleGlobalAttributesChanged);
     this.contentRef = createRef();
+    this.formTrigger = useFormTrigger({ disabled: () => !!this.href })(this);
     this.mutationObserver = createObserver("mutation", () => this.updateHasContent());
     this.resizeObserver = createObserver("resize", () => this.setTooltipText());
     this.focusSetter = useSetFocus()(this);
@@ -54,6 +55,9 @@ class Button extends LitElement {
   static {
     this.properties = { hasContent: [16, {}, { state: true }], tooltipText: [16, {}, { state: true }], alignment: [3, {}, { reflect: true }], appearance: [3, {}, { reflect: true }], disabled: [7, {}, { reflect: true, type: Boolean }], download: [3, { converter: stringOrBoolean }, { reflect: true }], form: [3, {}, { reflect: true }], href: [3, {}, { reflect: true }], iconEnd: [3, { type: String }, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, { type: String }, { reflect: true }], kind: [3, {}, { reflect: true }], label: 1, loading: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], name: [3, {}, { reflect: true }], rel: [3, {}, { reflect: true }], round: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], splitChild: [3, {}, { reflect: true }], target: [3, {}, { reflect: true }], type: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
   }
+  static {
+    this.formAssociated = true;
+  }
   static {
     this.styles = styles;
   }
@@ -64,12 +68,9 @@ class Button extends LitElement {
     super.connectedCallback();
     this.setupTextContentObserver();
     connectLabel(this);
-    this.formEl = findAssociatedForm(this);
   }
   async load() {
-    if (!isServer) {
-      this.updateHasContent();
-    }
+    this.updateHasContent();
   }
   loaded() {
     this.setTooltipText();
@@ -79,7 +80,6 @@ class Button extends LitElement {
     this.mutationObserver?.disconnect();
     disconnectLabel(this);
     this.resizeObserver?.disconnect();
-    this.formEl = null;
   }
   handleGlobalAttributesChanged() {
     this.requestUpdate();
@@ -91,20 +91,8 @@ class Button extends LitElement {
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
   }
   onLabelClick() {
-    this.handleClick();
     this.setFocus();
   }
-  handleClick() {
-    const { type } = this;
-    if (this.href) {
-      return;
-    }
-    if (type === "submit") {
-      submitForm(this);
-    } else if (type === "reset") {
-      resetForm(this);
-    }
-  }
   setTooltipText() {
     const { contentRef: { value: contentEl } } = this;
     if (contentEl) {
@@ -129,7 +117,7 @@ class Button extends LitElement {
       [CSS.contentSlotted]: this.hasContent,
       [CSS.iconStartEmpty]: !this.iconStart,
       [CSS.iconEndEmpty]: !this.iconEnd
-    })} .disabled=${childElType === "button" ? this.disabled : null} download=${(childElType === "a" ? this.download === true || this.download === "" ? "" : this.download || null : null) ?? nothing} href=${(childElType === "a" && this.href) ?? nothing} name=${(childElType === "button" && this.name) ?? nothing} @click=${this.handleClick} rel=${(childElType === "a" && this.rel) ?? nothing} tabindex=${(this.disabled ? -1 : null) ?? nothing} target=${(childElType === "a" && this.target) ?? nothing} title=${this.tooltipText ?? nothing} type=${(childElType === "button" ? this.type : null) ?? nothing} ${ref(this.setChildEl)}>${loaderNode}${this.iconStart ? iconStartEl : null}${this.hasContent ? contentEl : null}${this.iconEnd ? iconEndEl : null}</${DynamicHtmlTag}>` });
+    })} .disabled=${childElType === "button" ? this.disabled : null} download=${(childElType === "a" ? this.download === true || this.download === "" ? "" : this.download || null : null) ?? nothing} href=${(childElType === "a" && this.href) ?? nothing} name=${(childElType === "button" && this.name) ?? nothing} rel=${(childElType === "a" && this.rel) ?? nothing} tabindex=${(this.disabled ? -1 : null) ?? nothing} target=${(childElType === "a" && this.target) ?? nothing} title=${this.tooltipText ?? nothing} type=${(childElType === "button" ? this.type : null) ?? nothing} ${ref(this.setChildEl)}>${loaderNode}${this.iconStart ? iconStartEl : null}${this.hasContent ? contentEl : null}${this.iconEnd ? iconEndEl : null}</${DynamicHtmlTag}>` });
   }
 }
 customElement("calcite-button", Button);

package/dist/components/calcite-card/customElement.d.ts

@@ -1,6 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { LogicalFlowPosition } from "../interfaces.js";
+import type { LogicalFlowPosition, Scale } from "../interfaces.js";
 
 /**
  * @cssproperty [--calcite-card-accent-color-selected] - Specifies the component's accent color when `selected`.
@@ -9,11 +9,11 @@ import type { LogicalFlowPosition } from "../interfaces.js";
  * @cssproperty [--calcite-card-corner-radius] - Specifies the component's corner radius.
  * @cssproperty [--calcite-card-selection-background-color-hover] - Specifies the component's selection element background color when hovered.
  * @cssproperty [--calcite-card-selection-background-color-press] - Specifies the component's selection element background color when active.
- * @cssproperty [--calcite-card-selection-background-color] - [Deprecated] Use `--calcite-card-background-color`. Specifies the component's selection element background color.
+ * @cssproperty [--calcite-card-selection-background-color] - [Deprecated] in v2.13.0, removal target v6.0.0 - Use `--calcite-card-background-color` instead. Specifies the component's selection element background color.
  * @cssproperty [--calcite-card-selection-color-hover] - Specifies the component's selection element color when hovered or focused.
  * @cssproperty [--calcite-card-selection-color] - Specifies the component's selection element color.
- * @cssproperty [--calcite-card-selection-icon-color-hover] - [Deprecated] Use `--calcite-card-selection-color-hover`. Specifies the component's selection element icon color when hovered.
- * @cssproperty [--calcite-card-selection-icon-color-selected] - [Deprecated] Use `--calcite-card-accent-color-selected`. Specifies the component's selection element icon color when `selected`.
+ * @cssproperty [--calcite-card-selection-icon-color-hover] - [Deprecated] in v2.13.0, removal target v6.0.0 - Use `--calcite-card-selection-color-hover` instead. Specifies the component's selection element icon color when hovered.
+ * @cssproperty [--calcite-card-selection-icon-color-selected] - [Deprecated] in v2.13.0, removal target v6.0.0 - Use `--calcite-card-accent-color-selected` instead. Specifies the component's selection element icon color when `selected`.
  * @cssproperty [--calcite-card-shadow] - Specifies the component's shadow.
  * @slot  - A slot for adding content.
  * @slot [thumbnail] - A slot for adding a thumbnail.
@@ -42,6 +42,12 @@ export abstract class Card extends LitElement {
       select?: string;
       loading?: string;
   };
+  /**
+   * Specifies the size of the component. When contained in a parent `calcite-card-group`, inherits the parent's `scale` value, but can be overridden if needed.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
   /**
    * When `true`, the component is selectable.
    *
@@ -65,7 +71,7 @@ export abstract class Card extends LitElement {
    * Sets focus on the component.
    *
    * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
   /** Fires when the deprecated `selectable` is true, or `selectionMode` set on parent `calcite-card-group` is not `none` and the component is selected. */

package/dist/components/calcite-card/customElement.js

@@ -3,6 +3,7 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
+import { g as getIconScale } from "../../chunks/component.js";
 import { s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
@@ -33,7 +34,7 @@ const ICONS = {
   selectedSingle: "circle-f",
   unselectedSingle: "circle"
 };
-const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block;max-inline-size:100%}.content-wrapper{position:relative;display:flex;block-size:100%;flex-direction:column;justify-content:space-between;overflow:hidden;border:var(--calcite-border-width-sm) solid var(--calcite-card-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-card-corner-radius, var(--calcite-corner-radius-sharp));background-color:var(--calcite-card-background-color, var(--calcite-color-foreground-1));box-shadow:var(--calcite-card-shadow, var(--calcite-shadow-none));pointer-events:none}::slotted(*){pointer-events:auto}:host(:not([selectable])) .content-wrapper:not(.non-interactive){outline-color:transparent}:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.container{position:relative;display:flex;flex:1 1 auto;flex-direction:column}:host([loading]) .content-wrapper *:not(calcite-loader):not(.calcite-card-loader-container){pointer-events:none;opacity:0}:host([loading]) .calcite-card-loader-container{position:absolute;inset:0;display:flex;align-items:center}.header{display:flex;flex-direction:row;align-items:flex-start}.footer{margin-block-start:auto;display:flex;flex-direction:row;align-content:space-between;justify-content:space-between;padding-inline:var(--calcite-spacing-md);padding-block-start:var(--calcite-spacing-xxs);padding-block-end:var(--calcite-spacing-md)}.header-text-container{display:flex;inline-size:100%;flex-direction:column;justify-content:center;padding-inline:.75rem;padding-block:.5rem}.header-text-container:not(:only-child){padding-inline-end:.125rem}.footer{margin-block-start:auto;flex-direction:row;align-content:space-between;justify-content:space-between;padding-inline:.75rem;padding-block:.25rem .75rem}.card-content{block-size:auto;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug)}.has-slotted-content{padding:.75rem}:host([selected]) .content-wrapper{border:1px solid var(--calcite-card-accent-color-selected, var(--calcite-color-brand))}:host([selectable]) .header{padding-inline-end:var(--calcite-spacing-xxxl)}slot[name=heading]::slotted(*),*::slotted([slot=heading]){margin:0;font-size:var(--calcite-font-size-relative-base);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1);line-height:var(--calcite-font-line-height-relative-snug)}slot[name=description]::slotted(*),*::slotted([slot=description]){margin:0;font-size:var(--calcite-font-size-relative-sm);font-weight:var(--calcite-font-weight-normal);color:var(--calcite-color-text-2);line-height:var(--calcite-font-line-height-relative-snug)}slot[name=thumbnail]::slotted(img),img::slotted([slot=thumbnail]){min-inline-size:100%;max-inline-size:100%}slot[name=footer-start]::slotted(*),*::slotted([slot=footer-start]){align-self:center;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug);margin-inline-end:auto}slot[name=footer-end]::slotted(*),*::slotted([slot=footer-end]){align-self:center;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug)}.checkbox-wrapper-deprecated{pointer-events:auto;position:absolute;inset-block-start:var(--calcite-spacing-sm);inset-inline-end:var(--calcite-spacing-sm);margin:0;padding:0;color:var(--calcite-card-selection-color, var(--calcite-color-text-3))}.checkbox-wrapper-deprecated:hover{background-color:var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-card-selection-color-hover, var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)))}.checkbox-wrapper-deprecated:active{background-color:var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press))}.checkbox-wrapper{pointer-events:auto;margin:.5rem;cursor:pointer;padding:.5rem;outline-color:transparent;display:flex;align-items:center;justify-items:center;color:var(--calcite-card-selection-color, var(--calcite-color-text-3))}.checkbox-wrapper:hover{background-color:var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-card-selection-color-hover, var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)))}.checkbox-wrapper:active{background-color:var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press))}.checkbox-wrapper calcite-icon{pointer-events:none}:host([selected]) .checkbox-wrapper-deprecated,:host([selected]) .checkbox-wrapper{color:var(--calcite-card-accent-color-selected, var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand)))}:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper-deprecated,:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper{background-color:var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-card-selection-color-hover, var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)))}:host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper-deprecated,:host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper{background-color:var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press));color:var(--calcite-card-accent-color-selected, var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand)))}.thumbnail-wrapper{display:flex}.content-wrapper.inline{flex-direction:row}.content-wrapper.inline>.container{inline-size:60%}.content-wrapper.inline>.thumbnail-wrapper{inline-size:40%;align-items:flex-start}.content-wrapper.inline slot[name=thumbnail]::slotted(img),.content-wrapper.inline img::slotted([slot=thumbnail]){inline-size:100%}slot[name=footer-start]::slotted(*),slot[name=footer-end]::slotted(*){display:flex;gap:.25rem}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:block;max-inline-size:100%}:host([scale=s]){--calcite-internal-card-header-text-container-padding-inline: var(--calcite-space-sm);--calcite-internal-card-header-text-container-padding-block: var(--calcite-space-xs);--calcite-internal-card-header-text-container-padding-right: 0;--calcite-internal-card-heading-font-size: var(--calcite-font-size-relative-sm);--calcite-internal-card-description-font-size: var(--calcite-font-size-relative-xs);--calcite-internal-card-checkbox-wrapper-padding: var(--calcite-space-xs);--calcite-internal-card-checkbox-wrapper-margin: var(--calcite-space-xs);--calcite-internal-card-slotted-content-padding: var(--calcite-space-sm);--calcite-internal-card-footer-padding-inline: var(--calcite-space-sm);--calcite-internal-card-footer-start-end-gap: var(--calcite-space-base)}:host([scale=m]){--calcite-internal-card-header-text-container-padding-inline: var(--calcite-space-md);--calcite-internal-card-header-text-container-padding-block: var(--calcite-space-sm);--calcite-internal-card-header-text-container-padding-right: var(--calcite-space-base);--calcite-internal-card-heading-font-size: var(--calcite-font-size-relative-base);--calcite-internal-card-description-font-size: var(--calcite-font-size-relative-sm);--calcite-internal-card-checkbox-wrapper-padding: var(--calcite-space-sm);--calcite-internal-card-checkbox-wrapper-margin: var(--calcite-space-sm);--calcite-internal-card-slotted-content-padding: var(--calcite-space-md);--calcite-internal-card-footer-padding-inline: var(--calcite-space-md);--calcite-internal-card-footer-start-end-gap: var(--calcite-space-2xs)}:host([scale=l]){--calcite-internal-card-header-text-container-padding-inline: var(--calcite-space-lg);--calcite-internal-card-header-text-container-padding-block: var(--calcite-space-md);--calcite-internal-card-header-text-container-padding-right: var(--calcite-space-xs);--calcite-internal-card-heading-font-size: var(--calcite-font-size-relative-md);--calcite-internal-card-description-font-size: var(--calcite-font-size-relative-base);--calcite-internal-card-checkbox-wrapper-padding: var(--calcite-space-md);--calcite-internal-card-checkbox-wrapper-margin: var(--calcite-space-md);--calcite-internal-card-slotted-content-padding: var(--calcite-space-lg);--calcite-internal-card-footer-padding-inline: var(--calcite-space-lg);--calcite-internal-card-footer-start-end-gap: var(--calcite-space-sm)}.content-wrapper{position:relative;display:flex;block-size:100%;flex-direction:column;justify-content:space-between;overflow:hidden;border:var(--calcite-border-width-sm) solid var(--calcite-card-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-card-corner-radius, var(--calcite-corner-radius-sharp));background-color:var(--calcite-card-background-color, var(--calcite-color-foreground-1));box-shadow:var(--calcite-card-shadow, var(--calcite-shadow-none));pointer-events:none}::slotted(*){pointer-events:auto}:host(:not([selectable])) .content-wrapper:not(.non-interactive){outline-color:transparent}:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.container{position:relative;display:flex;flex:1 1 auto;flex-direction:column}:host([loading]) .content-wrapper *:not(calcite-loader):not(.calcite-card-loader-container){pointer-events:none;opacity:0}:host([loading]) .calcite-card-loader-container{position:absolute;inset:0;display:flex;align-items:center}.header{display:flex;flex-direction:row;align-items:flex-start}.header-text-container{display:flex;flex-direction:column;inline-size:100%;justify-content:center;padding-inline:var(--calcite-internal-card-header-text-container-padding-inline);padding-block:var(--calcite-internal-card-header-text-container-padding-block)}.header-text-container:not(:only-child){padding-inline-end:var(--calcite-internal-card-header-text-container-padding-right)}.footer{display:flex;margin-block-start:auto;flex-direction:row;align-content:space-between;justify-content:space-between;padding-inline:var(--calcite-internal-card-footer-padding-inline);padding-block-start:var(--calcite-space-2xs);padding-block-end:var(--calcite-space-md)}.card-content{block-size:auto;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug)}.has-slotted-content{padding:var(--calcite-internal-card-slotted-content-padding)}:host([selected]) .content-wrapper{border:1px solid var(--calcite-card-accent-color-selected, var(--calcite-color-brand))}:host([selectable]) .header{padding-inline-end:var(--calcite-spacing-xxxl)}slot[name=heading]::slotted(*),*::slotted([slot=heading]){color:var(--calcite-color-text-1);margin:0;font-weight:var(--calcite-font-weight-medium);line-height:var(--calcite-font-line-height-relative-snug);font-size:var(--calcite-internal-card-heading-font-size)}slot[name=description]::slotted(*),*::slotted([slot=description]){color:var(--calcite-color-text-2);margin:0;font-weight:var(--calcite-font-weight-normal);line-height:var(--calcite-font-line-height-relative-snug);font-size:var(--calcite-internal-card-description-font-size)}slot[name=thumbnail]::slotted(img),img::slotted([slot=thumbnail]){min-inline-size:100%;max-inline-size:100%}slot[name=footer-start]::slotted(*),*::slotted([slot=footer-start]){align-self:center;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug);margin-inline-end:auto}slot[name=footer-end]::slotted(*),*::slotted([slot=footer-end]){align-self:center;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug)}.checkbox-wrapper-deprecated{pointer-events:auto;position:absolute;inset-block-start:var(--calcite-spacing-sm);inset-inline-end:var(--calcite-spacing-sm);margin:0;padding:0;color:var(--calcite-card-selection-color, var(--calcite-color-text-3))}.checkbox-wrapper-deprecated:hover{background-color:var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-card-selection-color-hover, var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)))}.checkbox-wrapper-deprecated:active{background-color:var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press))}.checkbox-wrapper{outline-color:transparent;cursor:pointer;pointer-events:auto;display:flex;align-items:center;justify-items:center;color:var(--calcite-card-selection-color, var(--calcite-color-text-3));padding:var(--calcite-internal-card-checkbox-wrapper-padding);margin:var(--calcite-internal-card-checkbox-wrapper-margin)}.checkbox-wrapper:hover{background-color:var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-card-selection-color-hover, var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)))}.checkbox-wrapper:active{background-color:var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press))}.checkbox-wrapper calcite-icon{pointer-events:none}:host([selected]) .checkbox-wrapper-deprecated,:host([selected]) .checkbox-wrapper{color:var(--calcite-card-accent-color-selected, var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand)))}:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper-deprecated,:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper{background-color:var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-card-selection-color-hover, var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2)))}:host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper-deprecated,:host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus .checkbox-wrapper{background-color:var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press));color:var(--calcite-card-accent-color-selected, var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand)))}.thumbnail-wrapper{display:flex}.content-wrapper.inline{flex-direction:row}.content-wrapper.inline>.container{inline-size:60%}.content-wrapper.inline>.thumbnail-wrapper{inline-size:40%;align-items:flex-start}.content-wrapper.inline slot[name=thumbnail]::slotted(img),.content-wrapper.inline img::slotted([slot=thumbnail]){inline-size:100%}slot[name=footer-start]::slotted(*),slot[name=footer-end]::slotted(*){display:flex;gap:var(--calcite-internal-card-footer-start-end-gap)}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
 class Card extends LitElement {
   constructor() {
     super(...arguments);
@@ -49,6 +50,7 @@ class Card extends LitElement {
     this.hasThumbnail = false;
     this.disabled = false;
     this.loading = false;
+    this.scale = "m";
     this.selectable = false;
     this.selected = false;
     this.selectionMode = "none";
@@ -57,7 +59,7 @@ class Card extends LitElement {
     this.calciteInternalCardKeyEvent = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { hasContent: [16, {}, { state: true }], hasDescription: [16, {}, { state: true }], hasFooterEnd: [16, {}, { state: true }], hasFooterStart: [16, {}, { state: true }], hasHeading: [16, {}, { state: true }], hasThumbnail: [16, {}, { state: true }], disabled: [7, {}, { reflect: true, type: Boolean }], label: 1, loading: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], selectable: [7, {}, { reflect: true, type: Boolean }], selected: [7, {}, { reflect: true, type: Boolean }], selectionMode: 1, thumbnailPosition: [3, {}, { reflect: true }] };
+    this.properties = { hasContent: [16, {}, { state: true }], hasDescription: [16, {}, { state: true }], hasFooterEnd: [16, {}, { state: true }], hasFooterStart: [16, {}, { state: true }], hasHeading: [16, {}, { state: true }], hasThumbnail: [16, {}, { state: true }], disabled: [7, {}, { reflect: true, type: Boolean }], label: 1, loading: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], scale: [3, {}, { reflect: true }], selectable: [7, {}, { reflect: true, type: Boolean }], selected: [7, {}, { reflect: true, type: Boolean }], selectionMode: 1, thumbnailPosition: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
@@ -126,7 +128,7 @@ class Card extends LitElement {
   }
   renderSelectionIcon() {
     const icon = this.selectionMode === "multiple" && this.selected ? ICONS.selected : this.selectionMode === "multiple" ? ICONS.unselected : this.selected ? ICONS.selectedSingle : ICONS.unselectedSingle;
-    return html`<div class=${safeClassMap(CSS.checkboxWrapper)} @pointerdown=${this.cardSelectClick} tabindex=-1><calcite-icon .icon=${icon} scale=s></calcite-icon></div>`;
+    return html`<div class=${safeClassMap(CSS.checkboxWrapper)} @pointerdown=${this.cardSelectClick} tabindex=-1><calcite-icon .icon=${icon} .scale=${getIconScale(this.scale)}></calcite-icon></div>`;
   }
   renderHeader() {
     const showHeader = this.hasHeading || this.hasDescription;

package/dist/components/calcite-card-group/customElement.d.ts

@@ -1,10 +1,10 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { SelectionMode } from "../interfaces.js";
+import type { Scale, SelectionMode } from "../interfaces.js";
 import type { Card } from "../calcite-card/customElement.js";
 
 /**
- * @cssproperty [--calcite-card-group-gap] - [Deprecated] Use `--calcite-card-group-space`. Specifies the gap between slotted elements.
+ * @cssproperty [--calcite-card-group-gap] - [Deprecated] in v2.13.0, removal target v6.0.0 - Use `--calcite-card-group-space` instead. Specifies the gap between slotted elements.
  * @cssproperty [--calcite-card-group-space] - Specifies the space between slotted elements.
  * @slot  - A slot for adding one or more `calcite-card`s.
  */
@@ -21,6 +21,12 @@ export abstract class CardGroup extends LitElement {
    * @required
    */
   accessor label: string;
+  /**
+   * Specifies the size of the component. Child `calcite-card`s inherit the component's value.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
   /** Specifies the component's selected items. */
   get selectedItems(): Card[];
   /**
@@ -33,7 +39,7 @@ export abstract class CardGroup extends LitElement {
    * Sets focus on the component's first focusable element.
    *
    * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
   /** Fires when the component's selection changes and the `selectionMode` is not `none`. */

package/dist/components/calcite-card-group/customElement.js

@@ -18,6 +18,7 @@ class CardGroup extends LitElement {
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
     this.disabled = false;
+    this.scale = "m";
     this.selectedItems = [];
     this.selectionMode = "none";
     this.calciteCardGroupSelect = createEvent({ cancelable: false });
@@ -25,7 +26,7 @@ class CardGroup extends LitElement {
     this.listen("calciteCardSelect", this.calciteCardSelectListener);
   }
   static {
-    this.properties = { disabled: [7, {}, { reflect: true, type: Boolean }], label: 1, selectedItems: [0, {}, { attribute: false }], selectionMode: [3, {}, { reflect: true }] };
+    this.properties = { disabled: [7, {}, { reflect: true, type: Boolean }], label: 1, scale: [3, {}, { reflect: true }], selectedItems: [0, {}, { attribute: false }], selectionMode: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
@@ -37,6 +38,9 @@ class CardGroup extends LitElement {
     if (changes.has("selectionMode") && this.hasUpdated) {
       this.updateItemsOnSelectionModeChange();
     }
+    if (changes.has("scale") && (this.hasUpdated || this.scale !== "m")) {
+      this.updateItemsScale();
+    }
   }
   loaded() {
     this.updateSelectedItems();
@@ -72,10 +76,16 @@ class CardGroup extends LitElement {
   updateItemsOnSlotChange(event) {
     this.updateSlottedItems(event.target);
     this.updateSelectedItems();
+    this.updateItemsScale();
   }
   updateSlottedItems(target) {
     this.items = target?.assignedElements({ flatten: true }).filter((el) => el?.matches("calcite-card")) || [];
   }
+  updateItemsScale() {
+    this.items.forEach((el) => {
+      el.scale = this.scale;
+    });
+  }
   updateSelectedItems() {
     this.items.forEach((el) => {
       el.selectionMode = this.selectionMode;

package/dist/components/calcite-carousel/customElement.d.ts

@@ -1,7 +1,7 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { CarouselItem } from "../calcite-carousel-item/customElement.js";
-import type { ArrowType, AutoplayType } from "./interfaces.js";
+import type { ArrowType, AutoplayType, PaginationPosition } from "./interfaces.js";
 
 /**
  * @cssproperty [--calcite-carousel-pagination-background-color] - Specifies the background color of the component's pagination items, navigation arrows, and autoplay controls.
@@ -70,6 +70,12 @@ export abstract class Carousel extends LitElement {
    * @default false
    */
   accessor paginationDisabled: boolean;
+  /**
+   * Specifies the position of the component's pagination controls.
+   *
+   * @default "bottom"
+   */
+  accessor paginationPosition: PaginationPosition;
   /** The component's selected `calcite-carousel-item`. */
   get selectedItem(): CarouselItem;
   /** Plays the carousel. If `autoplay` is not enabled (initialized either to `true` or `"paused"`), these methods will have no effect. */
@@ -78,7 +84,7 @@ export abstract class Carousel extends LitElement {
    * Sets focus on the component.
    *
    * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
   /** Stops the carousel. If `autoplay` is not enabled (initialized either to `true` or `"paused"`), these methods will have no effect. */

package/dist/components/calcite-carousel/customElement.js

@@ -54,7 +54,7 @@ const idPrefix = "calcite-carousel-container";
 const IDS = {
   host: (id) => `${idPrefix}-${id}`
 };
-const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;inline-size:100%;--calcite-internal-carousel-pagination-space: 1.5rem;--calcite-internal-carousel-pagination-space-wide: 3.5rem;--calcite-internal-carousel-pagination-background-color: var( --calcite-carousel-pagination-background-color, transparent );--calcite-internal-carousel-pagination-background-color-hover: var( --calcite-carousel-pagination-background-color-hover, transparent );--calcite-internal-carousel-pagination-background-color-press: var( --calcite-carousel-pagination-background-color-press, transparent );--calcite-internal-carousel-pagination-background-color-selected: var( --calcite-carousel-pagination-background-color-selected, transparent );--calcite-internal-carousel-pagination-overlay-background-color: var( --calcite-carousel-pagination-background-color, var(--calcite-color-foreground-1) );--calcite-internal-carousel-pagination-overlay-background-color-hover: var( --calcite-carousel-pagination-background-color-hover, var(--calcite-color-foreground-2) );--calcite-internal-carousel-pagination-overlay-background-color-active: var( --calcite-carousel-pagination-background-color-press, var(--calcite-color-foreground-2) );--calcite-internal-carousel-pagination-overlay-background-color-selected: var( --calcite-carousel-pagination-background-color-selected, var(--calcite-color-foreground-1) );--calcite-internal-carousel-pagination-icon-color-hover: var( --calcite-carousel-pagination-icon-color-hover, var(--calcite-color-text-1) );--calcite-internal-carousel-pagination-icon-color: var( --calcite-carousel-pagination-icon-color, var(--calcite-color-border-1) );--calcite-internal-carousel-pagination-icon-color-selected: var( --calcite-carousel-pagination-icon-color-selected, var(--calcite-color-brand) );--calcite-internal-carousel-control-icon-color-hover: var( --calcite-carousel-control-icon-color-hover, var(--calcite-internal-carousel-pagination-icon-color-hover) );--calcite-internal-carousel-control-icon-color: var( --calcite-carousel-control-icon-color, var(--calcite-carousel-pagination-icon-color, var(--calcite-color-text-3)) );--calcite-internal-carousel-autoplay-progress-background-color: var( --calcite-carousel-autoplay-progress-background-color, var(--calcite-color-border-3) );--calcite-internal-carousel-autoplay-progress-fill-color: var( --calcite-carousel-autoplay-progress-fill-color, var(--calcite-color-brand) );--calcite-internal-carousel-autoplay-control-color: var( --calcite-carousel-pagination-icon-color, var(--calcite-color-text-3) )}.container{position:relative;display:flex;inline-size:100%;flex-direction:column;overflow:hidden;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);color:var(--calcite-color-text-2);outline-color:transparent}.container:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.container--edged:not(.container--overlaid){padding-inline:var(--calcite-internal-carousel-pagination-space-wide);inline-size:calc(100% - var(--calcite-internal-carousel-pagination-space-wide) * 2)}.item-container{display:flex;flex:1 1 auto;align-items:flex-start;justify-content:center;overflow:auto;padding:.25rem;animation-name:none;animation-duration:var(--calcite-animation-timing)}.container--overlaid .item-container{padding:0}.item-container--forward{animation-name:item-forward}.item-container--backward{animation-name:item-backward}calcite-carousel-item:not([selected]){opacity:0}.pagination-aria-live{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pagination{margin:.75rem;display:flex;flex-direction:row;align-items:center;justify-content:center;inline-size:auto}.pagination-items{display:flex;flex-direction:row;align-items:center}.container--overlaid .pagination{position:absolute}.pagination-item.page-next,.pagination-item.page-previous{color:var(--calcite-internal-carousel-control-icon-color);--calcite-icon-color: var(--calcite-internal-carousel-control-icon-color)}.pagination-item.page-next:hover,.pagination-item.page-previous:hover{color:var(--calcite-internal-carousel-control-icon-color-hover);--calcite-icon-color: var(--calcite-internal-carousel-control-icon-color-hover)}.container--edged .page-next,.container--edged .page-previous{block-size:3rem;inline-size:3rem;position:absolute;inset-block-start:50%;transform:translateY(-50%)}.container--edged .page-next{inset-inline-end:0}.container--edged .page-previous{inset-inline-start:0}.container--overlaid .pagination{inset-block-start:unset;inset-block-end:0;inset-inline:0}.pagination-item.autoplay-control{position:relative;color:var(--calcite-internal-carousel-autoplay-control-color);--calcite-progress-fill-color: var(--calcite-internal-carousel-autoplay-progress-fill-color);--calcite-progress-background-color: var(--calcite-internal-carousel-autoplay-progress-background-color)}.autoplay-control:focus .autoplay-progress{inset-block-end:4px;inset-inline:2px;inline-size:calc(100% - 4px)}.autoplay-progress{position:absolute;inset-block-end:2px;inset-inline:0;inline-size:100%}.pagination-item{margin:0;block-size:2rem;inline-size:2rem;cursor:pointer;align-items:center;border-style:none;background-color:transparent;outline-color:transparent;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;-webkit-appearance:none;display:flex;align-content:center;justify-content:center;background-color:var(--calcite-internal-carousel-pagination-background-color);color:var(--calcite-internal-carousel-pagination-icon-color)}.pagination-item:hover{background-color:var(--calcite-internal-carousel-pagination-background-color-hover);color:var(--calcite-internal-carousel-pagination-icon-color-hover)}.pagination-item:focus{background-color:var(--calcite-internal-carousel-pagination-background-color-press);outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.pagination-item:active{background-color:var(--calcite-internal-carousel-pagination-background-color-press);color:var(--calcite-internal-carousel-pagination-icon-color-hover)}.pagination-item calcite-icon{color:inherit;pointer-events:none}.pagination-item.pagination-item--selected{background-color:var(--calcite-internal-carousel-pagination-background-color-selected);color:var(--calcite-internal-carousel-pagination-icon-color-selected)}.pagination-item--individual{pointer-events:none;inline-size:0px;padding:0;opacity:0;visibility:hidden;transition:var(--calcite-animation-timing) ease-in-out inline-size,var(--calcite-animation-timing) ease-in-out padding,var(--calcite-animation-timing) ease-in-out opacity}.pagination-item--individual.pagination-item--visible{pointer-events:auto;inline-size:2rem;opacity:1;visibility:visible}.pagination-item--range-edge calcite-icon{scale:.75;transition:var(--calcite-animation-timing) ease-in-out scale}.container--overlaid .pagination-item{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color)}.container--overlaid .pagination-item:hover{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color-hover)}.container--overlaid .pagination-item:focus{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color-active)}.container--overlaid .pagination-item:active{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color-active)}.container--overlaid .pagination-item.pagination-item--selected{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color-selected);color:var(--calcite-internal-carousel-pagination-icon-color-selected)}@keyframes item-forward{0%{transform:translate3d(100px,0,0)}to{transform:translateZ(0)}}@keyframes item-backward{0%{transform:translate3d(-100px,0,0)}to{transform:translateZ(0)}}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;inline-size:100%;--calcite-internal-carousel-pagination-space: 1.5rem;--calcite-internal-carousel-pagination-space-wide: 3.5rem;--calcite-internal-carousel-pagination-background-color: var( --calcite-carousel-pagination-background-color, transparent );--calcite-internal-carousel-pagination-background-color-hover: var( --calcite-carousel-pagination-background-color-hover, transparent );--calcite-internal-carousel-pagination-background-color-press: var( --calcite-carousel-pagination-background-color-press, transparent );--calcite-internal-carousel-pagination-background-color-selected: var( --calcite-carousel-pagination-background-color-selected, transparent );--calcite-internal-carousel-pagination-overlay-background-color: var( --calcite-carousel-pagination-background-color, var(--calcite-color-foreground-1) );--calcite-internal-carousel-pagination-overlay-background-color-hover: var( --calcite-carousel-pagination-background-color-hover, var(--calcite-color-foreground-2) );--calcite-internal-carousel-pagination-overlay-background-color-active: var( --calcite-carousel-pagination-background-color-press, var(--calcite-color-foreground-2) );--calcite-internal-carousel-pagination-overlay-background-color-selected: var( --calcite-carousel-pagination-background-color-selected, var(--calcite-color-foreground-1) );--calcite-internal-carousel-pagination-icon-color-hover: var( --calcite-carousel-pagination-icon-color-hover, var(--calcite-color-text-1) );--calcite-internal-carousel-pagination-icon-color: var( --calcite-carousel-pagination-icon-color, var(--calcite-color-border-1) );--calcite-internal-carousel-pagination-icon-color-selected: var( --calcite-carousel-pagination-icon-color-selected, var(--calcite-color-brand) );--calcite-internal-carousel-control-icon-color-hover: var( --calcite-carousel-control-icon-color-hover, var(--calcite-internal-carousel-pagination-icon-color-hover) );--calcite-internal-carousel-control-icon-color: var( --calcite-carousel-control-icon-color, var(--calcite-carousel-pagination-icon-color, var(--calcite-color-text-3)) );--calcite-internal-carousel-autoplay-progress-background-color: var( --calcite-carousel-autoplay-progress-background-color, var(--calcite-color-border-3) );--calcite-internal-carousel-autoplay-progress-fill-color: var( --calcite-carousel-autoplay-progress-fill-color, var(--calcite-color-brand) );--calcite-internal-carousel-autoplay-control-color: var( --calcite-carousel-pagination-icon-color, var(--calcite-color-text-3) )}.container{position:relative;display:flex;inline-size:100%;flex-direction:column;overflow:hidden;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);color:var(--calcite-color-text-2);outline-color:transparent}.container:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.container--edged:not(.container--overlaid){padding-inline:var(--calcite-internal-carousel-pagination-space-wide);inline-size:calc(100% - var(--calcite-internal-carousel-pagination-space-wide) * 2)}.item-container{display:flex;flex:1 1 auto;align-items:flex-start;justify-content:center;overflow:auto;padding:.25rem;animation-name:none;animation-duration:var(--calcite-animation-timing)}.container--overlaid .item-container{padding:0}.item-container--forward{animation-name:item-forward}.item-container--backward{animation-name:item-backward}calcite-carousel-item:not([selected]){opacity:0}.pagination-aria-live{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.pagination{margin:.75rem;display:flex;flex-direction:row;align-items:center;justify-content:center;inline-size:auto}.pagination-items{display:flex;flex-direction:row;align-items:center}.container--overlaid .pagination{position:absolute}.pagination-item.page-next,.pagination-item.page-previous{color:var(--calcite-internal-carousel-control-icon-color);--calcite-icon-color: var(--calcite-internal-carousel-control-icon-color)}.pagination-item.page-next:hover,.pagination-item.page-previous:hover{color:var(--calcite-internal-carousel-control-icon-color-hover);--calcite-icon-color: var(--calcite-internal-carousel-control-icon-color-hover)}.container--edged .page-next,.container--edged .page-previous{block-size:3rem;inline-size:3rem;position:absolute;inset-block-start:50%;transform:translateY(-50%)}.container--edged .page-next{inset-inline-end:0}.container--edged .page-previous{inset-inline-start:0}.container--overlaid .pagination{inset-block-start:unset;inset-block-end:0;inset-inline:0}:host([pagination-position=top]) .container--overlaid .pagination{inset-block-start:0;inset-block-end:unset}.pagination-item.autoplay-control{position:relative;color:var(--calcite-internal-carousel-autoplay-control-color);--calcite-progress-fill-color: var(--calcite-internal-carousel-autoplay-progress-fill-color);--calcite-progress-background-color: var(--calcite-internal-carousel-autoplay-progress-background-color)}.autoplay-control:focus .autoplay-progress{inset-block-end:4px;inset-inline:2px;inline-size:calc(100% - 4px)}.autoplay-progress{position:absolute;inset-block-end:2px;inset-inline:0;inline-size:100%}.pagination-item{margin:0;block-size:2rem;inline-size:2rem;cursor:pointer;align-items:center;border-style:none;background-color:transparent;outline-color:transparent;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;-webkit-appearance:none;display:flex;align-content:center;justify-content:center;background-color:var(--calcite-internal-carousel-pagination-background-color);color:var(--calcite-internal-carousel-pagination-icon-color)}.pagination-item:hover{background-color:var(--calcite-internal-carousel-pagination-background-color-hover);color:var(--calcite-internal-carousel-pagination-icon-color-hover)}.pagination-item:focus{background-color:var(--calcite-internal-carousel-pagination-background-color-press);outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.pagination-item:active{background-color:var(--calcite-internal-carousel-pagination-background-color-press);color:var(--calcite-internal-carousel-pagination-icon-color-hover)}.pagination-item calcite-icon{color:inherit;pointer-events:none}.pagination-item.pagination-item--selected{background-color:var(--calcite-internal-carousel-pagination-background-color-selected);color:var(--calcite-internal-carousel-pagination-icon-color-selected)}.pagination-item--individual{pointer-events:none;inline-size:0px;padding:0;opacity:0;visibility:hidden;transition:var(--calcite-animation-timing) ease-in-out inline-size,var(--calcite-animation-timing) ease-in-out padding,var(--calcite-animation-timing) ease-in-out opacity}.pagination-item--individual.pagination-item--visible{pointer-events:auto;inline-size:2rem;opacity:1;visibility:visible}.pagination-item--range-edge calcite-icon{scale:.75;transition:var(--calcite-animation-timing) ease-in-out scale}.container--overlaid .pagination-item{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color)}.container--overlaid .pagination-item:hover{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color-hover)}.container--overlaid .pagination-item:focus{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color-active)}.container--overlaid .pagination-item:active{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color-active)}.container--overlaid .pagination-item.pagination-item--selected{background-color:var(--calcite-internal-carousel-pagination-overlay-background-color-selected);color:var(--calcite-internal-carousel-pagination-icon-color-selected)}@keyframes item-forward{0%{transform:translate3d(100px,0,0)}to{transform:translateZ(0)}}@keyframes item-backward{0%{transform:translate3d(-100px,0,0)}to{transform:translateZ(0)}}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
 class Carousel extends LitElement {
   constructor() {
     super(...arguments);
@@ -108,6 +108,7 @@ class Carousel extends LitElement {
     this.controlOverlay = false;
     this.disabled = false;
     this.paginationDisabled = false;
+    this.paginationPosition = "bottom";
     this.calciteCarouselChange = createEvent({ cancelable: false });
     this.calciteCarouselPause = createEvent({ cancelable: false });
     this.calciteCarouselPlay = createEvent({ cancelable: false });
@@ -115,7 +116,7 @@ class Carousel extends LitElement {
     this.calciteCarouselStop = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { itemDirection: [16, {}, { state: true }], hasMultiple: [16, {}, { state: true }], items: [16, {}, { state: true }], maxItems: [16, {}, { state: true }], playing: [16, {}, { state: true }], selectedIndex: [16, {}, { state: true }], slideDurationRemaining: [16, {}, { state: true }], suspendedDueToFocus: [16, {}, { state: true }], suspendedDueToHover: [16, {}, { state: true }], suspendedSlideDurationRemaining: [16, {}, { state: true }], userPreventsSuspend: [16, {}, { state: true }], arrowType: [3, {}, { reflect: true }], autoplay: [3, {}, { reflect: true }], autoplayDuration: [11, {}, { type: Number, reflect: true }], controlOverlay: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], label: 1, messageOverrides: [0, {}, { attribute: false }], paginationDisabled: [5, {}, { type: Boolean }], paused: [5, {}, { type: Boolean }], selectedItem: [0, {}, { attribute: false }] };
+    this.properties = { itemDirection: [16, {}, { state: true }], hasMultiple: [16, {}, { state: true }], items: [16, {}, { state: true }], maxItems: [16, {}, { state: true }], playing: [16, {}, { state: true }], selectedIndex: [16, {}, { state: true }], slideDurationRemaining: [16, {}, { state: true }], suspendedDueToFocus: [16, {}, { state: true }], suspendedDueToHover: [16, {}, { state: true }], suspendedSlideDurationRemaining: [16, {}, { state: true }], userPreventsSuspend: [16, {}, { state: true }], arrowType: [3, {}, { reflect: true }], autoplay: [3, {}, { reflect: true }], autoplayDuration: [11, {}, { type: Number, reflect: true }], controlOverlay: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], label: 1, messageOverrides: [0, {}, { attribute: false }], paginationDisabled: [5, {}, { type: Boolean }], paginationPosition: [3, {}, { reflect: true }], paused: [5, {}, { type: Boolean }], selectedItem: [0, {}, { attribute: false }] };
   }
   static {
     this.styles = styles;
@@ -474,16 +475,18 @@ class Carousel extends LitElement {
     return html`<button aria-controls=${this.containerId ?? nothing} class=${safeClassMap({ [CSS.paginationItem]: true, [css2]: true })} data-item-direction=${itemDirection ?? nothing} @click=${this.handleArrowClick} title=${title ?? nothing}><calcite-icon .flipRtl=${dir === "rtl"} .icon=${icon} .scale=${scale}></calcite-icon></button>`;
   }
   render() {
-    const { itemDirection } = this;
+    const { itemDirection, paginationPosition } = this;
+    const paginationArea = this.renderPaginationArea();
+    const itemContainer = html`<section class=${safeClassMap({
+      [CSS.itemContainer]: true,
+      [CSS.itemContainerForward]: itemDirection === "forward",
+      [CSS.itemContainerBackward]: itemDirection === "backward"
+    })} id=${this.containerId ?? nothing} ${ref(this.itemContainerRef)}><slot @slotchange=${this.handleSlotChange}></slot></section>`;
     return this.interactiveContainer({ disabled: this.disabled, children: html`<div .ariaLabel=${this.label} .ariaLive=${this.playing ? "off" : "polite"} .ariaRoleDescription=${this.messages.carousel} class=${safeClassMap({
       [CSS.container]: true,
       [CSS.containerOverlaid]: this.controlOverlay,
       [CSS.containerEdged]: this.arrowType === "edge"
-    })} @focusin=${this.handleFocusIn} @focusout=${this.handleFocusOut} @keydown=${this.containerKeyDownHandler} @mouseenter=${this.handleMouseIn} @mouseleave=${this.handleMouseOut} role=group tabindex=0 ${ref(this.containerRef)}><section class=${safeClassMap({
-      [CSS.itemContainer]: true,
-      [CSS.itemContainerForward]: itemDirection === "forward",
-      [CSS.itemContainerBackward]: itemDirection === "backward"
-    })} id=${this.containerId ?? nothing} ${ref(this.itemContainerRef)}><slot @slotchange=${this.handleSlotChange}></slot></section>${this.renderPaginationArea()}${this.arrowType === "edge" && this.hasMultiple && this.renderArrow("previous") || ""}${this.arrowType === "edge" && this.hasMultiple && this.renderArrow("next") || ""}</div>` });
+    })} @focusin=${this.handleFocusIn} @focusout=${this.handleFocusOut} @keydown=${this.containerKeyDownHandler} @mouseenter=${this.handleMouseIn} @mouseleave=${this.handleMouseOut} role=group tabindex=0 ${ref(this.containerRef)}>${paginationPosition === "top" ? paginationArea : itemContainer}${paginationPosition === "top" ? itemContainer : paginationArea}${this.arrowType === "edge" && this.hasMultiple && this.renderArrow("previous") || ""}${this.arrowType === "edge" && this.hasMultiple && this.renderArrow("next") || ""}</div>` });
   }
 }
 customElement("calcite-carousel", Carousel);

package/dist/components/calcite-carousel/interfaces.d.ts

@@ -1,3 +1,5 @@
 export type ArrowType = "inline" | "edge" | "none";
 
-export type AutoplayType = boolean | "paused" | "";
+export type AutoplayType = boolean | "paused" | "";
+
+export type PaginationPosition = "bottom" | "top";

package/dist/components/calcite-checkbox/customElement.d.ts

@@ -1,7 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Scale, Status } from "../interfaces.js";
-import type { MutableValidityState } from "../../controllers/useForm.js";
 
 /**
  * @cssproperty [--calcite-checkbox-size] - Specifies the component's height and width.
@@ -35,7 +34,7 @@ export abstract class Checkbox extends LitElement {
    * The state is visual only, and can look different across browsers.
    *
    * @default false
-   * @mdn [indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes)
+   * @see [MDN - indeterminate](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes)
    */
   accessor indeterminate: boolean;
   /** Specifies an accessible label for the component. */
@@ -68,16 +67,16 @@ export abstract class Checkbox extends LitElement {
   /**
    * The component's current validation state.
    *
-   * @mdn [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
+   * @see [MDN - ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState)
    */
-  get validity(): MutableValidityState;
+  get validity(): ValidityState;
   /** The component's value. */
   accessor value: any;
   /**
    * Sets focus on the component.
    *
    * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
   /** Fires when the component's `checked` status changes. */