@esri/calcite-components 2.6.0-next.1 → 2.6.0-next.2

package/dist/components/button.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.6.0-next.1
+ * v2.6.0-next.2
  */
 import { proxyCustomElement, HTMLElement, forceUpdate, Build, h } from '@stencil/core/internal/client/index.js';
 import { s as submitForm, r as resetForm, f as findAssociatedForm } from './form.js';
@@ -31,7 +31,7 @@ const CSS = {
     buttonPaddingShrunk: "button-padding--shrunk",
 };
 
-const buttonCss = ":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}:host([round]){border-radius:50px}:host([round]) a,:host([round]) button{border-radius:50px}:host button,:host a{outline-color:transparent}:host button:focus,:host a:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand)));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host button,:host a{--calcite-button-content-margin-internal:0.5rem;--calcite-button-padding-x-internal:7px;--calcite-button-padding-y-internal:3px;padding-block:var(--calcite-button-padding-y-internal);padding-inline:var(--calcite-button-padding-x-internal);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-radius:0px;border-style:none;text-align:center;font-family:inherit;font-weight:var(--calcite-font-weight-normal);text-decoration-line:none;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 button:hover,:host a:hover{text-decoration-line:none}:host button span,:host a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.content{margin-inline:var(--calcite-button-content-margin-internal)}.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-button-content-margin-internal:0.75rem}:host([scale=l]) button,:host([scale=l]) a{--calcite-button-content-margin-internal: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-button-content-margin-internal)}.icon{position:relative;margin:0px;display:inline-flex;font-weight:var(--calcite-font-weight-normal);line-height:inherit}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}@keyframes loader-in{0%{inline-size:0;opacity:0;transform:scale(0.5)}100%{inline-size:1em;opacity:1;transform:scale(1)}}@keyframes loader-out{0%{inline-size:1em;opacity:1;transform:scale(1)}100%{inline-size:0;opacity:0;transform:scale(0.5)}}.calcite-button--loader{display:flex}.calcite-button--loader calcite-loader{margin:0px;transition:inline-size var(--calcite-internal-animation-timing-slow) ease-in-out, opacity var(--calcite-internal-animation-timing-slow) ease-in-out, transform var(--calcite-internal-animation-timing-slow) ease-in-out}.calcite-button--loader calcite-loader.loading-in{animation-name:loader-in;animation-duration:var(--calcite-internal-animation-timing-slow)}.calcite-button--loader calcite-loader.loading-out{animation-name:loader-out;animation-duration:var(--calcite-internal-animation-timing-slow)}: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-button-content-margin-internal)}: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{border-width:1px;border-style:solid;border-color:transparent}:host([kind=brand]) button,:host([kind=brand]) a{background-color:var(--calcite-color-brand);color:var(--calcite-color-text-inverse)}:host([kind=brand]) button:hover,:host([kind=brand]) button:focus,:host([kind=brand]) a:hover,:host([kind=brand]) a:focus{background-color:var(--calcite-color-brand-hover)}:host([kind=brand]) button:active,:host([kind=brand]) a:active{background-color:var(--calcite-color-brand-press)}:host([kind=brand]) button calcite-loader,:host([kind=brand]) a calcite-loader{color:var(--calcite-color-text-inverse)}:host([kind=danger]) button,:host([kind=danger]) a{background-color:var(--calcite-color-status-danger);color:var(--calcite-color-text-inverse)}:host([kind=danger]) button:hover,:host([kind=danger]) button:focus,:host([kind=danger]) a:hover,:host([kind=danger]) a:focus{background-color:var(--calcite-color-status-danger-hover)}:host([kind=danger]) button:active,:host([kind=danger]) a:active{background-color:var(--calcite-color-status-danger-press)}:host([kind=danger]) button calcite-loader,:host([kind=danger]) a calcite-loader{color:var(--calcite-color-text-inverse)}:host([kind=neutral]) button,:host([kind=neutral]) a{background-color:var(--calcite-color-foreground-3);color:var(--calcite-color-text-1)}:host([kind=neutral]) button:hover,:host([kind=neutral]) button:focus,:host([kind=neutral]) a:hover,:host([kind=neutral]) a:focus{background-color:var(--calcite-color-foreground-2)}:host([kind=neutral]) button:active,:host([kind=neutral]) a:active{background-color:var(--calcite-color-foreground-1)}:host([kind=neutral]) button calcite-loader,:host([kind=neutral]) a calcite-loader{color:var(--calcite-color-text-1)}:host([kind=inverse]) button,:host([kind=inverse]) a{color:var(--calcite-color-text-inverse);background-color:var(--calcite-color-inverse)}:host([kind=inverse]) button:hover,:host([kind=inverse]) button:focus,:host([kind=inverse]) a:hover,:host([kind=inverse]) a:focus{background-color:var(--calcite-color-inverse-hover)}:host([kind=inverse]) button:active,:host([kind=inverse]) a:active{background-color:var(--calcite-color-inverse-press)}:host([kind=inverse]) button calcite-loader,:host([kind=inverse]) a calcite-loader{color:var(--calcite-color-text-inverse)}:host([appearance=outline-fill]) button,:host([appearance=outline-fill]) a{border-width:1px;border-style:solid;background-color:var(--calcite-color-foreground-1);box-shadow:inset 0 0 0 1px transparent}:host([appearance=outline-fill][kind=brand]) button,:host([appearance=outline-fill][kind=brand]) a{border-color:var(--calcite-color-brand);background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-brand)}:host([appearance=outline-fill][kind=brand]) button:hover,:host([appearance=outline-fill][kind=brand]) a:hover{border-color:var(--calcite-color-brand-hover);color:var(--calcite-color-brand-hover);box-shadow:inset 0 0 0 1px var(--calcite-color-brand-hover)}:host([appearance=outline-fill][kind=brand]) button:focus,:host([appearance=outline-fill][kind=brand]) a:focus{border-color:var(--calcite-color-brand);color:var(--calcite-color-brand);box-shadow:inset 0 0 0 2px var(--calcite-color-brand)}:host([appearance=outline-fill][kind=brand]) button:active,:host([appearance=outline-fill][kind=brand]) a:active{border-color:var(--calcite-color-brand-press);color:var(--calcite-color-brand-press);box-shadow:inset 0 0 0 2px var(--calcite-color-brand-press)}:host([appearance=outline-fill][kind=brand]) button calcite-loader,:host([appearance=outline-fill][kind=brand]) a calcite-loader{color:var(--calcite-color-brand)}:host([appearance=outline-fill][kind=danger]) button,:host([appearance=outline-fill][kind=danger]) a{border-color:var(--calcite-color-status-danger);background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-status-danger)}:host([appearance=outline-fill][kind=danger]) button:hover,:host([appearance=outline-fill][kind=danger]) a:hover{border-color:var(--calcite-color-status-danger-hover);color:var(--calcite-color-status-danger-hover);box-shadow:inset 0 0 0 1px var(--calcite-color-status-danger-hover)}:host([appearance=outline-fill][kind=danger]) button:focus,:host([appearance=outline-fill][kind=danger]) a:focus{border-color:var(--calcite-color-status-danger);color:var(--calcite-color-status-danger);box-shadow:inset 0 0 0 2px var(--calcite-color-status-danger)}:host([appearance=outline-fill][kind=danger]) button:active,:host([appearance=outline-fill][kind=danger]) a:active{border-color:var(--calcite-color-status-danger-press);color:var(--calcite-color-status-danger-press);box-shadow:inset 0 0 0 2px var(--calcite-color-status-danger-press)}:host([appearance=outline-fill][kind=danger]) button calcite-loader,:host([appearance=outline-fill][kind=danger]) a calcite-loader{color:var(--calcite-color-status-danger)}:host([appearance=outline-fill][kind=neutral]) button,:host([appearance=outline-fill][kind=neutral]) a{background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-1);border-color:var(--calcite-color-border-1)}:host([appearance=outline-fill][kind=neutral]) button:hover,:host([appearance=outline-fill][kind=neutral]) a:hover{box-shadow:inset 0 0 0 1px var(--calcite-color-foreground-3)}:host([appearance=outline-fill][kind=neutral]) button:focus,:host([appearance=outline-fill][kind=neutral]) a:focus{box-shadow:inset 0 0 0 2px var(--calcite-color-foreground-3)}:host([appearance=outline-fill][kind=neutral]) button:active,:host([appearance=outline-fill][kind=neutral]) a:active{box-shadow:inset 0 0 0 2px var(--calcite-color-foreground-3)}:host([appearance=outline-fill][kind=neutral]) button calcite-loader,:host([appearance=outline-fill][kind=neutral]) a calcite-loader{color:var(--calcite-color-text-1)}:host([appearance=outline-fill][kind=inverse]) button,:host([appearance=outline-fill][kind=inverse]) a{background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-1);border-color:var(--calcite-color-inverse)}:host([appearance=outline-fill][kind=inverse]) button:hover,:host([appearance=outline-fill][kind=inverse]) a:hover{border-color:var(--calcite-color-inverse-hover);box-shadow:inset 0 0 0 1px var(--calcite-color-inverse-hover)}:host([appearance=outline-fill][kind=inverse]) button:focus,:host([appearance=outline-fill][kind=inverse]) a:focus{border-color:var(--calcite-color-inverse);box-shadow:inset 0 0 0 2px var(--calcite-color-inverse)}:host([appearance=outline-fill][kind=inverse]) button:active,:host([appearance=outline-fill][kind=inverse]) a:active{border-color:var(--calcite-color-inverse-press);box-shadow:inset 0 0 0 2px var(--calcite-color-inverse-press)}:host([appearance=outline-fill][kind=inverse]) button calcite-loader,:host([appearance=outline-fill][kind=inverse]) a calcite-loader{color:var(--calcite-color-text-1)}:host([appearance=outline]) button,:host([appearance=outline]) a{border-width:1px;border-style:solid;background-color:transparent;box-shadow:inset 0 0 0 1px transparent}:host([appearance=outline][kind=brand]) button,:host([appearance=outline][kind=brand]) a{border-color:var(--calcite-color-brand);background-color:transparent;color:var(--calcite-color-brand)}:host([appearance=outline][kind=brand]) button:hover,:host([appearance=outline][kind=brand]) a:hover{border-color:var(--calcite-color-brand-hover);color:var(--calcite-color-brand-hover);box-shadow:inset 0 0 0 1px var(--calcite-color-brand-hover)}:host([appearance=outline][kind=brand]) button:focus,:host([appearance=outline][kind=brand]) a:focus{border-color:var(--calcite-color-brand);color:var(--calcite-color-brand);box-shadow:inset 0 0 0 2px var(--calcite-color-brand)}:host([appearance=outline][kind=brand]) button:active,:host([appearance=outline][kind=brand]) a:active{border-color:var(--calcite-color-brand-press);color:var(--calcite-color-brand-press);box-shadow:inset 0 0 0 2px var(--calcite-color-brand-press)}:host([appearance=outline][kind=brand]) button calcite-loader,:host([appearance=outline][kind=brand]) a calcite-loader{color:var(--calcite-color-brand)}:host([appearance=outline][kind=danger]) button,:host([appearance=outline][kind=danger]) a{border-color:var(--calcite-color-status-danger);background-color:transparent;color:var(--calcite-color-status-danger)}:host([appearance=outline][kind=danger]) button:hover,:host([appearance=outline][kind=danger]) a:hover{border-color:var(--calcite-color-status-danger-hover);color:var(--calcite-color-status-danger-hover);box-shadow:inset 0 0 0 1px var(--calcite-color-status-danger-hover)}:host([appearance=outline][kind=danger]) button:focus,:host([appearance=outline][kind=danger]) a:focus{border-color:var(--calcite-color-status-danger);color:var(--calcite-color-status-danger);box-shadow:inset 0 0 0 2px var(--calcite-color-status-danger)}:host([appearance=outline][kind=danger]) button:active,:host([appearance=outline][kind=danger]) a:active{border-color:var(--calcite-color-status-danger-press);color:var(--calcite-color-status-danger-press);box-shadow:inset 0 0 0 2px var(--calcite-color-status-danger-press)}:host([appearance=outline][kind=danger]) button calcite-loader,:host([appearance=outline][kind=danger]) a calcite-loader{color:var(--calcite-color-status-danger)}:host([appearance=outline][kind=neutral]) button,:host([appearance=outline][kind=neutral]) a{background-color:transparent;color:var(--calcite-color-text-1);border-color:var(--calcite-color-border-1)}:host([appearance=outline][kind=neutral]) button:hover,:host([appearance=outline][kind=neutral]) a:hover{box-shadow:inset 0 0 0 1px var(--calcite-color-foreground-3)}:host([appearance=outline][kind=neutral]) button:focus,:host([appearance=outline][kind=neutral]) a:focus{box-shadow:inset 0 0 0 2px var(--calcite-color-foreground-3)}:host([appearance=outline][kind=neutral]) button:active,:host([appearance=outline][kind=neutral]) a:active{box-shadow:inset 0 0 0 2px var(--calcite-color-foreground-3)}:host([appearance=outline][kind=neutral]) button calcite-loader,:host([appearance=outline][kind=neutral]) a calcite-loader{color:var(--calcite-color-text-1)}:host([appearance=outline][kind=inverse]) button,:host([appearance=outline][kind=inverse]) a{background-color:transparent;color:var(--calcite-color-text-1);border-color:var(--calcite-color-inverse)}:host([appearance=outline][kind=inverse]) button:hover,:host([appearance=outline][kind=inverse]) a:hover{border-color:var(--calcite-color-inverse-hover);box-shadow:inset 0 0 0 1px var(--calcite-color-inverse-hover)}:host([appearance=outline][kind=inverse]) button:focus,:host([appearance=outline][kind=inverse]) a:focus{border-color:var(--calcite-color-inverse);box-shadow:inset 0 0 0 2px var(--calcite-color-inverse)}:host([appearance=outline][kind=inverse]) button:active,:host([appearance=outline][kind=inverse]) a:active{border-color:var(--calcite-color-inverse-press);box-shadow:inset 0 0 0 2px var(--calcite-color-inverse-press)}:host([appearance=outline][kind=inverse]) button calcite-loader,:host([appearance=outline][kind=inverse]) a calcite-loader{color:var(--calcite-color-text-1)}:host([appearance=outline-fill][split-child=primary]) button,:host([appearance=outline][split-child=primary]) button{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{border-inline-start-width:0;border-inline-end-width:1px}:host([appearance=transparent]:not(.enable-editing-button)) button,:host([appearance=transparent]:not(.enable-editing-button)) a{background-color:transparent}:host([appearance=transparent]:not(.enable-editing-button)) button:hover,:host([appearance=transparent]:not(.enable-editing-button)) button:focus,:host([appearance=transparent]:not(.enable-editing-button)) a:hover,:host([appearance=transparent]:not(.enable-editing-button)) a:focus{background-color:var(--calcite-color-transparent-hover)}:host([appearance=transparent]:not(.enable-editing-button)) button:active,:host([appearance=transparent]:not(.enable-editing-button)) a:active{background-color:var(--calcite-color-transparent-press)}:host([appearance=transparent][kind=brand]) button,:host([appearance=transparent][kind=brand]) a{color:var(--calcite-color-brand)}:host([appearance=transparent][kind=brand]) button:hover,:host([appearance=transparent][kind=brand]) a:hover{color:var(--calcite-color-brand-hover)}:host([appearance=transparent][kind=brand]) button:focus,:host([appearance=transparent][kind=brand]) a:focus{color:var(--calcite-color-brand)}:host([appearance=transparent][kind=brand]) button:active,:host([appearance=transparent][kind=brand]) a:active{color:var(--calcite-color-brand-press)}:host([appearance=transparent][kind=brand]) button calcite-loader,:host([appearance=transparent][kind=brand]) a calcite-loader{color:var(--calcite-color-brand)}:host([appearance=transparent][kind=danger]) button,:host([appearance=transparent][kind=danger]) a{color:var(--calcite-color-status-danger)}:host([appearance=transparent][kind=danger]) button:hover,:host([appearance=transparent][kind=danger]) a:hover{color:var(--calcite-color-status-danger-hover)}:host([appearance=transparent][kind=danger]) button:focus,:host([appearance=transparent][kind=danger]) a:focus{color:var(--calcite-color-status-danger)}:host([appearance=transparent][kind=danger]) button:active,:host([appearance=transparent][kind=danger]) a:active{color:var(--calcite-color-status-danger-press)}:host([appearance=transparent][kind=danger]) button calcite-loader,:host([appearance=transparent][kind=danger]) a calcite-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{color:var(--calcite-color-text-1)}:host([appearance=transparent][kind=neutral].cancel-editing-button) button{border-block-start-width:1px;border-block-end-width:1px;color:var(--calcite-color-text-3);border-block-start-color:var(--calcite-color-border-input);border-block-end-color:var(--calcite-color-border-input);border-block-style:solid}:host([appearance=transparent][kind=neutral].cancel-editing-button) button:not(.content--slotted){--calcite-button-padding-y-internal:0}:host([appearance=transparent][kind=neutral].cancel-editing-button) button:hover{color:var(--calcite-color-text-1)}:host([appearance=transparent][kind=neutral].enable-editing-button) button{background-color:transparent}:host(.confirm-changes-button) button:focus,:host(.cancel-editing-button) button:focus,:host(.enable-editing-button) button:focus{outline-offset:-2px}:host([appearance=transparent][kind=inverse]) button,:host([appearance=transparent][kind=inverse]) a,:host([appearance=transparent][kind=inverse]) calcite-loader{color:var(--calcite-color-text-inverse)}:host([scale=s]) button.content--slotted,:host([scale=s]) a.content--slotted{font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=s][appearance=transparent]) button.content--slotted,:host([scale=s][appearance=transparent]) a.content--slotted{--calcite-button-padding-x-internal:0.5rem}:host([scale=s]) button,:host([scale=s]) a{--calcite-button-padding-y-internal:3px}:host([scale=m]) button.content--slotted,:host([scale=m]) a.content--slotted{--calcite-button-padding-x-internal:11px;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=m]) button,:host([scale=m]) a{--calcite-button-padding-y-internal:7px}:host([scale=m][appearance=transparent]) button.content--slotted,:host([scale=m][appearance=transparent]) a.content--slotted{--calcite-button-padding-x-internal:0.75rem}:host([scale=l]) button.content--slotted,:host([scale=l]) a.content--slotted{--calcite-button-padding-x-internal:15px;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l]) .button-padding{--calcite-button-padding-x-internal:1rem;--calcite-button-padding-y-internal:11px}:host([scale=l]) .button-padding--shrunk{--calcite-button-padding-y-internal:9px}:host([scale=s]) button:not(.content--slotted),:host([scale=s]) a:not(.content--slotted){--calcite-button-padding-x-internal:0.125rem;--calcite-button-padding-y-internal:3px;inline-size:1.5rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;min-block-size:1.5rem}:host([scale=m]) button:not(.content--slotted),:host([scale=m]) a:not(.content--slotted){--calcite-button-padding-x-internal:0.125rem;--calcite-button-padding-y-internal:7px;inline-size:2rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;min-block-size:2rem}:host([scale=l]) button:not(.content--slotted),:host([scale=l]) a:not(.content--slotted){--calcite-button-padding-x-internal:0.125rem;--calcite-button-padding-y-internal:9px;inline-size:2.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;min-block-size:2.75rem}:host([scale=l][appearance=transparent]) button:not(.content--slotted),:host([scale=l][appearance=transparent]) a:not(.content--slotted){--calcite-button-padding-y-internal:0.625rem}:host([scale=s][icon-start][icon-end]) button:not(.content--slotted),:host([scale=s][icon-start][icon-end]) a:not(.content--slotted){--calcite-button-padding-x-internal:23px;block-size:1.5rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=s][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),:host([scale=s][icon-start][icon-end][appearance=transparent]) a:not(.content--slotted){--calcite-button-padding-x-internal:1.5rem}:host([scale=m][icon-start][icon-end]) button:not(.content--slotted),:host([scale=m][icon-start][icon-end]) a:not(.content--slotted){--calcite-button-padding-x-internal:2rem;block-size:2rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=m][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),:host([scale=m][icon-start][icon-end][appearance=transparent]) a:not(.content--slotted){--calcite-button-padding-x-internal:33px}:host([scale=l][icon-start][icon-end]) button:not(.content--slotted),:host([scale=l][icon-start][icon-end]) a:not(.content--slotted){--calcite-button-padding-x-internal:43px;block-size:2.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l][icon-start][icon-end]) button:not(.content--slotted) .icon--start+.icon--end,:host([scale=l][icon-start][icon-end]) a:not(.content--slotted) .icon--start+.icon--end{margin-inline-start:1rem}:host([scale=l][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),:host([scale=l][icon-start][icon-end][appearance=transparent]) a:not(.content--slotted){--calcite-button-padding-x-internal:2.75rem}:host([hidden]){display:none}[hidden]{display:none}";
+const buttonCss = ":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}:host([round]){border-radius:50px}:host([round]) a,:host([round]) button{border-radius:50px}:host button,:host a{outline-color:transparent}:host button:focus,:host a:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite-color-brand)));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host button,:host a{--calcite-button-content-margin-internal:0.5rem;--calcite-button-padding-x-internal:7px;--calcite-button-padding-y-internal:3px;padding-block:var(--calcite-button-padding-y-internal);padding-inline:var(--calcite-button-padding-x-internal);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-radius:0px;border-style:none;text-align:center;font-family:inherit;font-weight:var(--calcite-font-weight-normal);text-decoration-line:none;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 button:hover,:host a:hover{text-decoration-line:none}:host button span,:host a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.content{margin-inline:var(--calcite-button-content-margin-internal)}.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-button-content-margin-internal:0.75rem}:host([scale=l]) button,:host([scale=l]) a{--calcite-button-content-margin-internal: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-button-content-margin-internal)}.icon{position:relative;margin:0px;display:inline-flex;font-weight:var(--calcite-font-weight-normal);line-height:inherit}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}@keyframes loader-in{0%{inline-size:0;opacity:0;transform:scale(0.5)}100%{inline-size:1em;opacity:1;transform:scale(1)}}@keyframes loader-out{0%{inline-size:1em;opacity:1;transform:scale(1)}100%{inline-size:0;opacity:0;transform:scale(0.5)}}.calcite-button--loader{display:flex}.calcite-button--loader calcite-loader{margin:0px;transition:inline-size var(--calcite-internal-animation-timing-slow) ease-in-out, opacity var(--calcite-internal-animation-timing-slow) ease-in-out, transform var(--calcite-internal-animation-timing-slow) ease-in-out}.calcite-button--loader calcite-loader.loading-in{animation-name:loader-in;animation-duration:var(--calcite-internal-animation-timing-slow)}.calcite-button--loader calcite-loader.loading-out{animation-name:loader-out;animation-duration:var(--calcite-internal-animation-timing-slow)}: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-button-content-margin-internal)}: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{border-width:1px;border-style:solid;border-color:transparent}:host([kind=brand]) button,:host([kind=brand]) a{background-color:var(--calcite-color-brand);color:var(--calcite-color-text-inverse)}:host([kind=brand]) button:hover,:host([kind=brand]) button:focus,:host([kind=brand]) a:hover,:host([kind=brand]) a:focus{background-color:var(--calcite-color-brand-hover)}:host([kind=brand]) button:active,:host([kind=brand]) a:active{background-color:var(--calcite-color-brand-press)}:host([kind=brand]) button calcite-loader,:host([kind=brand]) a calcite-loader{color:var(--calcite-color-text-inverse)}:host([kind=danger]) button,:host([kind=danger]) a{background-color:var(--calcite-color-status-danger);color:var(--calcite-color-text-inverse)}:host([kind=danger]) button:hover,:host([kind=danger]) button:focus,:host([kind=danger]) a:hover,:host([kind=danger]) a:focus{background-color:var(--calcite-color-status-danger-hover)}:host([kind=danger]) button:active,:host([kind=danger]) a:active{background-color:var(--calcite-color-status-danger-press)}:host([kind=danger]) button calcite-loader,:host([kind=danger]) a calcite-loader{color:var(--calcite-color-text-inverse)}:host([kind=neutral]) button,:host([kind=neutral]) a{background-color:var(--calcite-color-foreground-3);color:var(--calcite-color-text-1)}:host([kind=neutral]) button:hover,:host([kind=neutral]) button:focus,:host([kind=neutral]) a:hover,:host([kind=neutral]) a:focus{background-color:var(--calcite-color-foreground-2)}:host([kind=neutral]) button:active,:host([kind=neutral]) a:active{background-color:var(--calcite-color-foreground-1)}:host([kind=neutral]) button calcite-loader,:host([kind=neutral]) a calcite-loader{color:var(--calcite-color-text-1)}:host([kind=inverse]) button,:host([kind=inverse]) a{color:var(--calcite-color-text-inverse);background-color:var(--calcite-color-inverse)}:host([kind=inverse]) button:hover,:host([kind=inverse]) button:focus,:host([kind=inverse]) a:hover,:host([kind=inverse]) a:focus{background-color:var(--calcite-color-inverse-hover)}:host([kind=inverse]) button:active,:host([kind=inverse]) a:active{background-color:var(--calcite-color-inverse-press)}:host([kind=inverse]) button calcite-loader,:host([kind=inverse]) a calcite-loader{color:var(--calcite-color-text-inverse)}:host([appearance=outline-fill]) button,:host([appearance=outline-fill]) a{border-width:1px;border-style:solid;background-color:var(--calcite-color-foreground-1);box-shadow:inset 0 0 0 1px transparent}:host([appearance=outline-fill][kind=brand]) button,:host([appearance=outline-fill][kind=brand]) a{border-color:var(--calcite-color-brand);background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-brand)}:host([appearance=outline-fill][kind=brand]) button:hover,:host([appearance=outline-fill][kind=brand]) a:hover{border-color:var(--calcite-color-brand-hover);color:var(--calcite-color-brand-hover);box-shadow:inset 0 0 0 1px var(--calcite-color-brand-hover)}:host([appearance=outline-fill][kind=brand]) button:focus,:host([appearance=outline-fill][kind=brand]) a:focus{border-color:var(--calcite-color-brand);color:var(--calcite-color-brand);box-shadow:inset 0 0 0 2px var(--calcite-color-brand)}:host([appearance=outline-fill][kind=brand]) button:active,:host([appearance=outline-fill][kind=brand]) a:active{border-color:var(--calcite-color-brand-press);color:var(--calcite-color-brand-press);box-shadow:inset 0 0 0 2px var(--calcite-color-brand-press)}:host([appearance=outline-fill][kind=brand]) button calcite-loader,:host([appearance=outline-fill][kind=brand]) a calcite-loader{color:var(--calcite-color-brand)}:host([appearance=outline-fill][kind=danger]) button,:host([appearance=outline-fill][kind=danger]) a{border-color:var(--calcite-color-status-danger);background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-status-danger)}:host([appearance=outline-fill][kind=danger]) button:hover,:host([appearance=outline-fill][kind=danger]) a:hover{border-color:var(--calcite-color-status-danger-hover);color:var(--calcite-color-status-danger-hover);box-shadow:inset 0 0 0 1px var(--calcite-color-status-danger-hover)}:host([appearance=outline-fill][kind=danger]) button:focus,:host([appearance=outline-fill][kind=danger]) a:focus{border-color:var(--calcite-color-status-danger);color:var(--calcite-color-status-danger);box-shadow:inset 0 0 0 2px var(--calcite-color-status-danger)}:host([appearance=outline-fill][kind=danger]) button:active,:host([appearance=outline-fill][kind=danger]) a:active{border-color:var(--calcite-color-status-danger-press);color:var(--calcite-color-status-danger-press);box-shadow:inset 0 0 0 2px var(--calcite-color-status-danger-press)}:host([appearance=outline-fill][kind=danger]) button calcite-loader,:host([appearance=outline-fill][kind=danger]) a calcite-loader{color:var(--calcite-color-status-danger)}:host([appearance=outline-fill][kind=neutral]) button,:host([appearance=outline-fill][kind=neutral]) a{background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-1);border-color:var(--calcite-color-border-1)}:host([appearance=outline-fill][kind=neutral]) button:hover,:host([appearance=outline-fill][kind=neutral]) a:hover{box-shadow:inset 0 0 0 1px var(--calcite-color-foreground-3)}:host([appearance=outline-fill][kind=neutral]) button:focus,:host([appearance=outline-fill][kind=neutral]) a:focus{box-shadow:inset 0 0 0 2px var(--calcite-color-foreground-3)}:host([appearance=outline-fill][kind=neutral]) button:active,:host([appearance=outline-fill][kind=neutral]) a:active{box-shadow:inset 0 0 0 2px var(--calcite-color-foreground-3)}:host([appearance=outline-fill][kind=neutral]) button calcite-loader,:host([appearance=outline-fill][kind=neutral]) a calcite-loader{color:var(--calcite-color-text-1)}:host([appearance=outline-fill][kind=inverse]) button,:host([appearance=outline-fill][kind=inverse]) a{background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-1);border-color:var(--calcite-color-inverse)}:host([appearance=outline-fill][kind=inverse]) button:hover,:host([appearance=outline-fill][kind=inverse]) a:hover{border-color:var(--calcite-color-inverse-hover);box-shadow:inset 0 0 0 1px var(--calcite-color-inverse-hover)}:host([appearance=outline-fill][kind=inverse]) button:focus,:host([appearance=outline-fill][kind=inverse]) a:focus{border-color:var(--calcite-color-inverse);box-shadow:inset 0 0 0 2px var(--calcite-color-inverse)}:host([appearance=outline-fill][kind=inverse]) button:active,:host([appearance=outline-fill][kind=inverse]) a:active{border-color:var(--calcite-color-inverse-press);box-shadow:inset 0 0 0 2px var(--calcite-color-inverse-press)}:host([appearance=outline-fill][kind=inverse]) button calcite-loader,:host([appearance=outline-fill][kind=inverse]) a calcite-loader{color:var(--calcite-color-text-1)}:host([appearance=outline]) button,:host([appearance=outline]) a{border-width:1px;border-style:solid;background-color:transparent;box-shadow:inset 0 0 0 1px transparent}:host([appearance=outline][kind=brand]) button,:host([appearance=outline][kind=brand]) a{border-color:var(--calcite-color-brand);background-color:transparent;color:var(--calcite-color-brand)}:host([appearance=outline][kind=brand]) button:hover,:host([appearance=outline][kind=brand]) a:hover{border-color:var(--calcite-color-brand-hover);color:var(--calcite-color-brand-hover);box-shadow:inset 0 0 0 1px var(--calcite-color-brand-hover)}:host([appearance=outline][kind=brand]) button:focus,:host([appearance=outline][kind=brand]) a:focus{border-color:var(--calcite-color-brand);color:var(--calcite-color-brand);box-shadow:inset 0 0 0 2px var(--calcite-color-brand)}:host([appearance=outline][kind=brand]) button:active,:host([appearance=outline][kind=brand]) a:active{border-color:var(--calcite-color-brand-press);color:var(--calcite-color-brand-press);box-shadow:inset 0 0 0 2px var(--calcite-color-brand-press)}:host([appearance=outline][kind=brand]) button calcite-loader,:host([appearance=outline][kind=brand]) a calcite-loader{color:var(--calcite-color-brand)}:host([appearance=outline][kind=danger]) button,:host([appearance=outline][kind=danger]) a{border-color:var(--calcite-color-status-danger);background-color:transparent;color:var(--calcite-color-status-danger)}:host([appearance=outline][kind=danger]) button:hover,:host([appearance=outline][kind=danger]) a:hover{border-color:var(--calcite-color-status-danger-hover);color:var(--calcite-color-status-danger-hover);box-shadow:inset 0 0 0 1px var(--calcite-color-status-danger-hover)}:host([appearance=outline][kind=danger]) button:focus,:host([appearance=outline][kind=danger]) a:focus{border-color:var(--calcite-color-status-danger);color:var(--calcite-color-status-danger);box-shadow:inset 0 0 0 2px var(--calcite-color-status-danger)}:host([appearance=outline][kind=danger]) button:active,:host([appearance=outline][kind=danger]) a:active{border-color:var(--calcite-color-status-danger-press);color:var(--calcite-color-status-danger-press);box-shadow:inset 0 0 0 2px var(--calcite-color-status-danger-press)}:host([appearance=outline][kind=danger]) button calcite-loader,:host([appearance=outline][kind=danger]) a calcite-loader{color:var(--calcite-color-status-danger)}:host([appearance=outline][kind=neutral]) button,:host([appearance=outline][kind=neutral]) a{background-color:transparent;color:var(--calcite-color-text-1);border-color:var(--calcite-color-border-1)}:host([appearance=outline][kind=neutral]) button:hover,:host([appearance=outline][kind=neutral]) a:hover{box-shadow:inset 0 0 0 1px var(--calcite-color-foreground-3)}:host([appearance=outline][kind=neutral]) button:focus,:host([appearance=outline][kind=neutral]) a:focus{box-shadow:inset 0 0 0 2px var(--calcite-color-foreground-3)}:host([appearance=outline][kind=neutral]) button:active,:host([appearance=outline][kind=neutral]) a:active{box-shadow:inset 0 0 0 2px var(--calcite-color-foreground-3)}:host([appearance=outline][kind=neutral]) button calcite-loader,:host([appearance=outline][kind=neutral]) a calcite-loader{color:var(--calcite-color-text-1)}:host([appearance=outline][kind=inverse]) button,:host([appearance=outline][kind=inverse]) a{background-color:transparent;color:var(--calcite-color-text-1);border-color:var(--calcite-color-inverse)}:host([appearance=outline][kind=inverse]) button:hover,:host([appearance=outline][kind=inverse]) a:hover{border-color:var(--calcite-color-inverse-hover);box-shadow:inset 0 0 0 1px var(--calcite-color-inverse-hover)}:host([appearance=outline][kind=inverse]) button:focus,:host([appearance=outline][kind=inverse]) a:focus{border-color:var(--calcite-color-inverse);box-shadow:inset 0 0 0 2px var(--calcite-color-inverse)}:host([appearance=outline][kind=inverse]) button:active,:host([appearance=outline][kind=inverse]) a:active{border-color:var(--calcite-color-inverse-press);box-shadow:inset 0 0 0 2px var(--calcite-color-inverse-press)}:host([appearance=outline][kind=inverse]) button calcite-loader,:host([appearance=outline][kind=inverse]) a calcite-loader{color:var(--calcite-color-text-1)}:host([appearance=outline-fill][split-child=primary]) button,:host([appearance=outline][split-child=primary]) button{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{border-inline-start-width:0;border-inline-end-width:1px}:host([appearance=transparent]:not(.enable-editing-button)) button,:host([appearance=transparent]:not(.enable-editing-button)) a{background-color:transparent}:host([appearance=transparent]:not(.enable-editing-button)) button:hover,:host([appearance=transparent]:not(.enable-editing-button)) button:focus,:host([appearance=transparent]:not(.enable-editing-button)) a:hover,:host([appearance=transparent]:not(.enable-editing-button)) a:focus{background-color:var(--calcite-color-transparent-hover)}:host([appearance=transparent]:not(.enable-editing-button)) button:active,:host([appearance=transparent]:not(.enable-editing-button)) a:active{background-color:var(--calcite-color-transparent-press)}:host([appearance=transparent][kind=brand]) button,:host([appearance=transparent][kind=brand]) a{color:var(--calcite-color-brand)}:host([appearance=transparent][kind=brand]) button:hover,:host([appearance=transparent][kind=brand]) a:hover{color:var(--calcite-color-brand-hover)}:host([appearance=transparent][kind=brand]) button:focus,:host([appearance=transparent][kind=brand]) a:focus{color:var(--calcite-color-brand)}:host([appearance=transparent][kind=brand]) button:active,:host([appearance=transparent][kind=brand]) a:active{color:var(--calcite-color-brand-press)}:host([appearance=transparent][kind=brand]) button calcite-loader,:host([appearance=transparent][kind=brand]) a calcite-loader{color:var(--calcite-color-brand)}:host([appearance=transparent][kind=danger]) button,:host([appearance=transparent][kind=danger]) a{color:var(--calcite-color-status-danger)}:host([appearance=transparent][kind=danger]) button:hover,:host([appearance=transparent][kind=danger]) a:hover{color:var(--calcite-color-status-danger-hover)}:host([appearance=transparent][kind=danger]) button:focus,:host([appearance=transparent][kind=danger]) a:focus{color:var(--calcite-color-status-danger)}:host([appearance=transparent][kind=danger]) button:active,:host([appearance=transparent][kind=danger]) a:active{color:var(--calcite-color-status-danger-press)}:host([appearance=transparent][kind=danger]) button calcite-loader,:host([appearance=transparent][kind=danger]) a calcite-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{color:var(--calcite-color-text-1)}:host([appearance=transparent][kind=neutral].cancel-editing-button) button{border-block-start-width:1px;border-block-end-width:1px;color:var(--calcite-color-text-3);border-block-start-color:var(--calcite-color-border-input);border-block-end-color:var(--calcite-color-border-input);border-block-style:solid}:host([appearance=transparent][kind=neutral].cancel-editing-button) button:not(.content--slotted){--calcite-button-padding-y-internal:0}:host([appearance=transparent][kind=neutral].cancel-editing-button) button:hover{color:var(--calcite-color-text-1)}:host([appearance=transparent][kind=neutral].enable-editing-button) button{background-color:transparent}:host(.confirm-changes-button) button:focus,:host(.cancel-editing-button) button:focus,:host(.enable-editing-button) button:focus{outline-offset:-2px}:host([appearance=transparent][kind=inverse]) button,:host([appearance=transparent][kind=inverse]) a,:host([appearance=transparent][kind=inverse]) calcite-loader{color:var(--calcite-color-text-inverse)}:host([scale=s]) button.content--slotted,:host([scale=s]) a.content--slotted{font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=s][appearance=transparent]) button.content--slotted,:host([scale=s][appearance=transparent]) a.content--slotted{--calcite-button-padding-x-internal:0.5rem}:host([scale=s]) button,:host([scale=s]) a{--calcite-button-padding-y-internal:3px}:host([scale=m]) button.content--slotted,:host([scale=m]) a.content--slotted{--calcite-button-padding-x-internal:11px;font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=m]) button,:host([scale=m]) a{--calcite-button-padding-y-internal:7px}:host([scale=m][appearance=transparent]) button.content--slotted,:host([scale=m][appearance=transparent]) a.content--slotted{--calcite-button-padding-x-internal:0.75rem}:host([scale=l]) button.content--slotted,:host([scale=l]) a.content--slotted{--calcite-button-padding-x-internal:15px;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l]) .button-padding{--calcite-button-padding-x-internal:1rem;--calcite-button-padding-y-internal:11px}:host([scale=l]) .button-padding--shrunk{--calcite-button-padding-y-internal:9px}:host([scale=s]) button:not(.content--slotted),:host([scale=s]) a:not(.content--slotted){--calcite-button-padding-x-internal:0.125rem;--calcite-button-padding-y-internal:3px;inline-size:1.5rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;min-block-size:1.5rem}:host([scale=m]) button:not(.content--slotted),:host([scale=m]) a:not(.content--slotted){--calcite-button-padding-x-internal:0.125rem;--calcite-button-padding-y-internal:7px;inline-size:2rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;min-block-size:2rem}:host([scale=l]) button:not(.content--slotted),:host([scale=l]) a:not(.content--slotted){--calcite-button-padding-x-internal:0.125rem;--calcite-button-padding-y-internal:9px;inline-size:2.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;min-block-size:2.75rem}:host([scale=l][appearance=transparent]) button:not(.content--slotted),:host([scale=l][appearance=transparent]) a:not(.content--slotted){--calcite-button-padding-y-internal:0.625rem}:host([scale=s][icon-start][icon-end]) button:not(.content--slotted),:host([scale=s][icon-start][icon-end]) a:not(.content--slotted){--calcite-button-padding-x-internal:23px;block-size:1.5rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=s][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),:host([scale=s][icon-start][icon-end][appearance=transparent]) a:not(.content--slotted){--calcite-button-padding-x-internal:1.5rem}:host([scale=m][icon-start][icon-end]) button:not(.content--slotted),:host([scale=m][icon-start][icon-end]) a:not(.content--slotted){--calcite-button-padding-x-internal:2rem;block-size:2rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=m][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),:host([scale=m][icon-start][icon-end][appearance=transparent]) a:not(.content--slotted){--calcite-button-padding-x-internal:33px}:host([scale=l][icon-start][icon-end]) button:not(.content--slotted),:host([scale=l][icon-start][icon-end]) a:not(.content--slotted){--calcite-button-padding-x-internal:43px;block-size:2.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l][icon-start][icon-end]) button:not(.content--slotted) .icon--start+.icon--end,:host([scale=l][icon-start][icon-end]) a:not(.content--slotted) .icon--start+.icon--end{margin-inline-start:1rem}:host([scale=l][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),:host([scale=l][icon-start][icon-end][appearance=transparent]) a:not(.content--slotted){--calcite-button-padding-x-internal:2.75rem}:host([hidden]){display:none}[hidden]{display:none}";
 
 const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement {
     constructor() {

package/dist/components/button.js.map

@@ -1 +1 @@
-{"file":"button.js","mappings":"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","names":[],"sources":["src/components/button/resources.ts","src/components/button/button.scss?tag=calcite-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":["export const CSS = {\n  buttonLoader: \"calcite-button--loader\",\n  content: \"content\",\n  contentSlotted: \"content--slotted\",\n  icon: \"icon\",\n  iconStart: \"icon--start\",\n  iconEnd: \"icon--end\",\n  loadingIn: \"loading-in\",\n  loadingOut: \"loading-out\",\n  iconStartEmpty: \"icon-start-empty\",\n  iconEndEmpty: \"icon-end-empty\",\n  buttonPadding: \"button-padding\",\n  buttonPaddingShrunk: \"button-padding--shrunk\",\n};\n",":host {\n  @apply inline-block w-auto align-middle;\n}\n\n// fab variants\n:host([round]) {\n  border-radius: 50px;\n  & a,\n  & button {\n    border-radius: 50px;\n  }\n}\n\n// focus styles\n:host button,\n:host a {\n  @apply focus-base;\n  &:focus {\n    @apply focus-outset;\n  }\n}\n// button base\n:host button,\n:host a {\n  --calcite-button-content-margin-internal: theme(\"margin.2\");\n  --calcite-button-padding-x-internal: 7px;\n  --calcite-button-padding-y-internal: 3px;\n  padding-block: var(--calcite-button-padding-y-internal);\n  padding-inline: var(--calcite-button-padding-x-internal);\n  @apply font-inherit\n    relative\n    box-border\n    flex\n    h-full\n    w-full\n    cursor-pointer\n    select-none\n    appearance-none\n    items-center\n    justify-center\n    rounded-none\n    border-none\n    text-center\n    font-normal\n    no-underline;\n  // include transition from focus\n  transition:\n    color var(--calcite-animation-timing) ease-in-out,\n    background-color var(--calcite-animation-timing) ease-in-out,\n    box-shadow var(--calcite-animation-timing) ease-in-out,\n    outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;\n  &:hover {\n    @apply no-underline;\n  }\n  & span {\n    @apply truncate;\n  }\n}\n\n.content {\n  margin-inline: var(--calcite-button-content-margin-internal);\n}\n\n.icon-start-empty {\n  .content {\n    margin-inline-start: unset;\n  }\n}\n.icon-end-empty {\n  .content {\n    margin-inline-end: unset;\n  }\n}\n\n:host([scale=\"m\"]) {\n  button,\n  a {\n    --calcite-button-content-margin-internal: theme(\"margin.3\");\n  }\n}\n:host([scale=\"l\"]) {\n  button,\n  a {\n    --calcite-button-content-margin-internal: theme(\"margin.4\");\n  }\n}\n\n// button width\n:host([width=\"auto\"]) {\n  @apply w-auto;\n}\n\n:host([width=\"half\"]) {\n  @apply w-2/4;\n}\n\n:host([width=\"full\"]) {\n  @apply w-full;\n}\n\n// alignment\n:host([alignment=\"center\"]:not([width=\"auto\"])) {\n  a,\n  button {\n    @apply justify-center;\n  }\n}\n:host([alignment=\"start\"]:not([width=\"auto\"])) {\n  a,\n  button {\n    @apply justify-start;\n  }\n}\n:host([alignment=\"end\"]:not([width=\"auto\"])) {\n  a,\n  button {\n    @apply justify-end;\n  }\n}\n:host([alignment*=\"space-between\"]:not([width=\"auto\"])) {\n  a,\n  button {\n    @apply justify-between;\n  }\n}\n:host([alignment=\"icon-start-space-between\"]:not([width=\"auto\"])) {\n  .icon--start {\n    margin-inline-end: auto;\n  }\n  a,\n  button {\n    text-align: unset;\n  }\n}\n:host([alignment=\"icon-end-space-between\"]:not([width=\"auto\"])) {\n  .icon--end {\n    margin-inline-start: auto;\n  }\n  a,\n  button {\n    text-align: unset;\n  }\n}\n\n// only two icons\n:host([alignment=\"center\"]) {\n  a:not(.content--slotted),\n  button:not(.content--slotted) {\n    .icon--start + .icon--end {\n      margin-inline-start: var(--calcite-button-content-margin-internal);\n    }\n  }\n}\n\n.icon {\n  @apply relative\n    m-0\n    inline-flex\n    font-normal;\n  line-height: inherit;\n}\n\n@include disabled();\n\n@keyframes loader-in {\n  0% {\n    inline-size: 0;\n    opacity: 0;\n    transform: scale(0.5);\n  }\n  100% {\n    inline-size: 1em;\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes loader-out {\n  0% {\n    inline-size: 1em;\n    opacity: 1;\n    transform: scale(1);\n  }\n  100% {\n    inline-size: 0;\n    opacity: 0;\n    transform: scale(0.5);\n  }\n}\n\n.calcite-button--loader {\n  @apply flex;\n  calcite-loader {\n    @apply m-0;\n    transition:\n      inline-size var(--calcite-internal-animation-timing-slow) ease-in-out,\n      opacity var(--calcite-internal-animation-timing-slow) ease-in-out,\n      transform var(--calcite-internal-animation-timing-slow) ease-in-out;\n    &.loading-in {\n      animation-name: loader-in;\n      animation-duration: var(--calcite-internal-animation-timing-slow);\n    }\n    &.loading-out {\n      animation-name: loader-out;\n      animation-duration: var(--calcite-internal-animation-timing-slow);\n    }\n  }\n}\n\n:host([loading]) {\n  // center loading spinner when button has text\n  button.content--slotted,\n  a.content--slotted {\n    .calcite-button--loader calcite-loader {\n      margin-inline-end: var(--calcite-button-content-margin-internal);\n    }\n  }\n  // hide icons when loading with no text\n  button:not(.content--slotted),\n  a:not(.content--slotted) {\n    .icon--start,\n    .icon--end {\n      @apply hidden;\n    }\n  }\n}\n\n// button styles\n:host([appearance]) {\n  button,\n  a {\n    @apply border-color-transparent\n      border\n      border-solid;\n  }\n}\n\n:host([kind=\"brand\"]) {\n  button,\n  a {\n    @apply text-color-inverse bg-brand;\n    &:hover,\n    &:focus {\n      @apply bg-brand-hover;\n    }\n    &:active {\n      @apply bg-brand-press;\n    }\n    calcite-loader {\n      @apply text-color-inverse;\n    }\n  }\n}\n:host([kind=\"danger\"]) {\n  button,\n  a {\n    @apply text-color-inverse bg-danger;\n    &:hover,\n    &:focus {\n      @apply bg-danger-hover;\n    }\n    &:active {\n      @apply bg-danger-press;\n    }\n    calcite-loader {\n      @apply text-color-inverse;\n    }\n  }\n}\n:host([kind=\"neutral\"]) {\n  button,\n  a {\n    @apply text-color-1 bg-foreground-3;\n    &:hover,\n    &:focus {\n      @apply bg-foreground-2;\n    }\n    &:active {\n      @apply bg-foreground-1;\n    }\n    calcite-loader {\n      @apply text-color-1;\n    }\n  }\n}\n:host([kind=\"inverse\"]) {\n  button,\n  a {\n    @apply text-color-inverse;\n    background-color: var(--calcite-color-inverse);\n    &:hover,\n    &:focus {\n      background-color: var(--calcite-color-inverse-hover);\n    }\n    &:active {\n      background-color: var(--calcite-color-inverse-press);\n    }\n    calcite-loader {\n      @apply text-color-inverse;\n    }\n  }\n}\n// outline\n:host([appearance=\"outline-fill\"]) {\n  button,\n  a {\n    @apply bg-foreground-1 border border-solid;\n    box-shadow: inset 0 0 0 1px transparent;\n  }\n}\n:host([appearance=\"outline-fill\"][kind=\"brand\"]) {\n  button,\n  a {\n    @apply border-color-brand bg-foreground-1;\n    color: theme(\"colors.brand\");\n    &:hover {\n      @apply border-color-brand-hover;\n      color: theme(\"colors.brand-hover\");\n      box-shadow: inset 0 0 0 1px var(--calcite-color-brand-hover);\n    }\n    &:focus {\n      @apply border-color-brand;\n      color: theme(\"colors.brand\");\n      box-shadow: inset 0 0 0 2px var(--calcite-color-brand);\n    }\n    &:active {\n      @apply border-color-brand-press;\n      color: theme(\"colors.brand-press\");\n      box-shadow: inset 0 0 0 2px var(--calcite-color-brand-press);\n    }\n    calcite-loader {\n      color: theme(\"colors.brand\");\n    }\n  }\n}\n:host([appearance=\"outline-fill\"][kind=\"danger\"]) {\n  button,\n  a {\n    @apply border-color-danger bg-foreground-1;\n    color: theme(\"colors.danger\");\n    &:hover {\n      @apply border-color-danger-hover;\n      color: theme(\"colors.danger-hover\");\n      box-shadow: inset 0 0 0 1px var(--calcite-color-status-danger-hover);\n    }\n    &:focus {\n      @apply border-color-danger;\n      color: theme(\"colors.danger\");\n      box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger);\n    }\n    &:active {\n      @apply border-color-danger-press;\n      color: theme(\"colors.danger-press\");\n      box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger-press);\n    }\n    calcite-loader {\n      color: theme(\"colors.danger\");\n    }\n  }\n}\n:host([appearance=\"outline-fill\"][kind=\"neutral\"]) {\n  button,\n  a {\n    @apply text-color-1 bg-foreground-1;\n    border-color: theme(\"borderColor.color.1\");\n    &:hover {\n      box-shadow: inset 0 0 0 1px var(--calcite-color-foreground-3);\n    }\n    &:focus {\n      box-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3);\n    }\n    &:active {\n      box-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3);\n    }\n    calcite-loader {\n      @apply text-color-1;\n    }\n  }\n}\n:host([appearance=\"outline-fill\"][kind=\"inverse\"]) {\n  button,\n  a {\n    @apply text-color-1 bg-foreground-1;\n    border-color: var(--calcite-color-inverse);\n    &:hover {\n      border-color: var(--calcite-color-inverse-hover);\n      box-shadow: inset 0 0 0 1px var(--calcite-color-inverse-hover);\n    }\n    &:focus {\n      border-color: var(--calcite-color-inverse);\n      box-shadow: inset 0 0 0 2px var(--calcite-color-inverse);\n    }\n    &:active {\n      border-color: var(--calcite-color-inverse-press);\n      box-shadow: inset 0 0 0 2px var(--calcite-color-inverse-press);\n    }\n    calcite-loader {\n      @apply text-color-1;\n    }\n  }\n}\n:host([appearance=\"outline\"]) {\n  button,\n  a {\n    @apply border border-solid bg-transparent;\n    box-shadow: inset 0 0 0 1px transparent;\n  }\n}\n:host([appearance=\"outline\"][kind=\"brand\"]) {\n  button,\n  a {\n    @apply border-color-brand bg-transparent;\n    color: theme(\"colors.brand\");\n    &:hover {\n      @apply border-color-brand-hover;\n      color: theme(\"colors.brand-hover\");\n      box-shadow: inset 0 0 0 1px var(--calcite-color-brand-hover);\n    }\n    &:focus {\n      @apply border-color-brand;\n      color: theme(\"colors.brand\");\n      box-shadow: inset 0 0 0 2px var(--calcite-color-brand);\n    }\n    &:active {\n      @apply border-color-brand-press;\n      color: theme(\"colors.brand-press\");\n      box-shadow: inset 0 0 0 2px var(--calcite-color-brand-press);\n    }\n    calcite-loader {\n      color: theme(\"colors.brand\");\n    }\n  }\n}\n:host([appearance=\"outline\"][kind=\"danger\"]) {\n  button,\n  a {\n    @apply border-color-danger bg-transparent;\n    color: theme(\"colors.danger\");\n    &:hover {\n      @apply border-color-danger-hover;\n      color: theme(\"colors.danger-hover\");\n      box-shadow: inset 0 0 0 1px var(--calcite-color-status-danger-hover);\n    }\n    &:focus {\n      @apply border-color-danger;\n      color: theme(\"colors.danger\");\n      box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger);\n    }\n    &:active {\n      @apply border-color-danger-press;\n      color: theme(\"colors.danger-press\");\n      box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger-press);\n    }\n    calcite-loader {\n      color: theme(\"colors.danger\");\n    }\n  }\n}\n:host([appearance=\"outline\"][kind=\"neutral\"]) {\n  button,\n  a {\n    @apply text-color-1  bg-transparent;\n    border-color: theme(\"borderColor.color.1\");\n    &:hover {\n      box-shadow: inset 0 0 0 1px var(--calcite-color-foreground-3);\n    }\n    &:focus {\n      box-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3);\n    }\n    &:active {\n      box-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3);\n    }\n    calcite-loader {\n      @apply text-color-1;\n    }\n  }\n}\n:host([appearance=\"outline\"][kind=\"inverse\"]) {\n  button,\n  a {\n    @apply text-color-1  bg-transparent;\n    border-color: var(--calcite-color-inverse);\n    &:hover {\n      border-color: var(--calcite-color-inverse-hover);\n      box-shadow: inset 0 0 0 1px var(--calcite-color-inverse-hover);\n    }\n    &:focus {\n      border-color: var(--calcite-color-inverse);\n      box-shadow: inset 0 0 0 2px var(--calcite-color-inverse);\n    }\n    &:active {\n      border-color: var(--calcite-color-inverse-press);\n      box-shadow: inset 0 0 0 2px var(--calcite-color-inverse-press);\n    }\n    calcite-loader {\n      @apply text-color-1;\n    }\n  }\n}\n\n:host([appearance=\"outline-fill\"][split-child=\"primary\"]) button,\n:host([appearance=\"outline\"][split-child=\"primary\"]) button {\n  border-inline-end-width: 0;\n  border-inline-start-width: theme(\"borderWidth.DEFAULT\");\n}\n\n:host([appearance=\"outline-fill\"][split-child=\"secondary\"]) button,\n:host([appearance=\"outline\"][split-child=\"secondary\"]) button {\n  border-inline-start-width: 0;\n  border-inline-end-width: theme(\"borderWidth.DEFAULT\");\n}\n\n// transparent\n:host([appearance=\"transparent\"]:not(.enable-editing-button)) {\n  button,\n  a {\n    @apply bg-transparent;\n    &:hover,\n    &:focus {\n      background-color: var(--calcite-color-transparent-hover);\n    }\n    &:active {\n      background-color: var(--calcite-color-transparent-press);\n    }\n  }\n}\n:host([appearance=\"transparent\"][kind=\"brand\"]) {\n  button,\n  a {\n    color: theme(\"colors.brand\");\n    &:hover {\n      color: theme(\"colors.brand-hover\");\n    }\n    &:focus {\n      color: theme(\"colors.brand\");\n    }\n    &:active {\n      color: theme(\"colors.brand-press\");\n    }\n    calcite-loader {\n      color: theme(\"colors.brand\");\n    }\n  }\n}\n\n:host([appearance=\"transparent\"][kind=\"danger\"]) {\n  button,\n  a {\n    color: theme(\"colors.danger\");\n    &:hover {\n      color: theme(\"colors.danger-hover\");\n    }\n    &:focus {\n      color: theme(\"colors.danger\");\n    }\n    &:active {\n      color: theme(\"colors.danger-press\");\n    }\n    calcite-loader {\n      color: theme(\"colors.danger\");\n    }\n  }\n}\n\n:host([appearance=\"transparent\"][kind=\"neutral\"]:not(.cancel-editing-button)) {\n  button,\n  a,\n  calcite-loader {\n    @apply text-color-1;\n  }\n}\n\n:host([appearance=\"transparent\"][kind=\"neutral\"].cancel-editing-button) {\n  button {\n    @apply text-color-3\n      border-t-color-input\n      border-b-color-input\n      border-t\n      border-b;\n    border-block-style: solid;\n\n    &:not(.content--slotted) {\n      --calcite-button-padding-y-internal: 0;\n    }\n\n    &:hover {\n      @apply text-color-1;\n    }\n  }\n}\n\n:host([appearance=\"transparent\"][kind=\"neutral\"].enable-editing-button) {\n  button {\n    @apply bg-transparent;\n  }\n}\n\n:host(.confirm-changes-button),\n:host(.cancel-editing-button),\n:host(.enable-editing-button) {\n  button {\n    &:focus {\n      outline-offset: -2px; // ensure focus outlines work in Safari\n    }\n  }\n}\n\n:host([appearance=\"transparent\"][kind=\"inverse\"]) {\n  button,\n  a,\n  calcite-loader {\n    @apply text-color-inverse;\n  }\n}\n\n// generate button scales (scenario: text exists)\n:host([scale=\"s\"]) button.content--slotted,\n:host([scale=\"s\"]) a.content--slotted {\n  @apply text-n2h;\n}\n\n// accommodate for transparent buttons not having borders\n:host([scale=\"s\"][appearance=\"transparent\"]) button.content--slotted,\n:host([scale=\"s\"][appearance=\"transparent\"]) a.content--slotted {\n  --calcite-button-padding-x-internal: theme(\"padding.2\");\n}\n\n:host([scale=\"s\"]) button,\n:host([scale=\"s\"]) a {\n  --calcite-button-padding-y-internal: 3px;\n}\n\n:host([scale=\"m\"]) button.content--slotted,\n:host([scale=\"m\"]) a.content--slotted {\n  --calcite-button-padding-x-internal: 11px;\n  @apply text-n1h;\n}\n\n:host([scale=\"m\"]) button,\n:host([scale=\"m\"]) a {\n  --calcite-button-padding-y-internal: 7px;\n}\n// accommodate for transparent buttons not having borders\n:host([scale=\"m\"][appearance=\"transparent\"]) button.content--slotted,\n:host([scale=\"m\"][appearance=\"transparent\"]) a.content--slotted {\n  --calcite-button-padding-x-internal: theme(\"padding.3\");\n}\n\n:host([scale=\"l\"]) button.content--slotted,\n:host([scale=\"l\"]) a.content--slotted {\n  --calcite-button-padding-x-internal: 15px;\n  @apply text-0h;\n}\n\n:host([scale=\"l\"]) {\n  .button-padding {\n    --calcite-button-padding-x-internal: theme(\"padding.4\");\n    --calcite-button-padding-y-internal: 11px;\n  }\n  //shrink the padding if an icon is present to preserve the height\n  .button-padding--shrunk {\n    --calcite-button-padding-y-internal: 9px;\n  }\n}\n\n// generate fab scales (scenario: 1 icon, ie., should be square)\n:host([scale=\"s\"]) button:not(.content--slotted),\n:host([scale=\"s\"]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: theme(\"padding[0.5]\");\n  --calcite-button-padding-y-internal: 3px;\n  @apply text-0h w-6;\n  min-block-size: theme(\"height.6\");\n}\n\n:host([scale=\"m\"]) button:not(.content--slotted),\n:host([scale=\"m\"]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: theme(\"padding[0.5]\");\n  --calcite-button-padding-y-internal: 7px;\n  @apply text-0h w-8;\n  min-block-size: theme(\"height.8\");\n}\n:host([scale=\"l\"]) button:not(.content--slotted),\n:host([scale=\"l\"]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: theme(\"padding[0.5]\");\n  --calcite-button-padding-y-internal: 9px;\n  @apply text-0h w-11;\n  min-block-size: theme(\"height.11\");\n}\n// accommodate for transparent buttons not having borders\n:host([scale=\"l\"][appearance=\"transparent\"]) button:not(.content--slotted),\n:host([scale=\"l\"][appearance=\"transparent\"]) a:not(.content--slotted) {\n  --calcite-button-padding-y-internal: theme(\"padding[2.5]\");\n}\n\n// generate fab scales (scenario: 2 icons, ie., should not be square)\n:host([scale=\"s\"][icon-start][icon-end]) button:not(.content--slotted),\n:host([scale=\"s\"][icon-start][icon-end]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: 23px;\n  @apply text-0h h-6;\n}\n// accommodate for transparent buttons not having borders\n:host([scale=\"s\"][icon-start][icon-end][appearance=\"transparent\"]) button:not(.content--slotted),\n:host([scale=\"s\"][icon-start][icon-end][appearance=\"transparent\"]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: theme(\"padding.6\");\n}\n:host([scale=\"m\"][icon-start][icon-end]) button:not(.content--slotted),\n:host([scale=\"m\"][icon-start][icon-end]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: theme(\"padding.8\");\n  @apply text-0h h-8;\n}\n// accommodate for transparent buttons not having borders\n:host([scale=\"m\"][icon-start][icon-end][appearance=\"transparent\"]) button:not(.content--slotted),\n:host([scale=\"m\"][icon-start][icon-end][appearance=\"transparent\"]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: 33px;\n}\n:host([scale=\"l\"][icon-start][icon-end]) button:not(.content--slotted),\n:host([scale=\"l\"][icon-start][icon-end]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: 43px;\n  @apply text-0h h-11;\n  // add space between when only 2 icons\n  .icon--start + .icon--end {\n    margin-inline-start: theme(\"margin.4\");\n  }\n}\n// accommodate for transparent buttons not having borders\n:host([scale=\"l\"][icon-start][icon-end][appearance=\"transparent\"]) button:not(.content--slotted),\n:host([scale=\"l\"][icon-start][icon-end][appearance=\"transparent\"]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: theme(\"padding.11\");\n}\n\n@include base-component();\n","import {\n  Build,\n  Component,\n  Element,\n  forceUpdate,\n  h,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { findAssociatedForm, FormOwner, resetForm, submitForm } from \"../../utils/form\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from \"../../utils/label\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport { createObserver } from \"../../utils/observers\";\nimport { getIconScale } from \"../../utils/component\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Appearance, FlipContext, Kind, Scale, Width } from \"../interfaces\";\nimport { ButtonMessages } from \"./assets/button/t9n\";\nimport { ButtonAlignment } from \"./interfaces\";\nimport { CSS } from \"./resources\";\nimport { toAriaBoolean } from \"../../utils/dom\";\n\n/** Passing a 'href' will render an anchor link, instead of a button. Role will be set to link, or button, depending on this. */\n/** It is the consumers responsibility to add aria information, rel, target, for links, and any button attributes for form submission */\n\n/** @slot - A slot for adding text. */\n@Component({\n  tag: \"calcite-button\",\n  styleUrl: \"button.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Button\n  implements\n    LabelableComponent,\n    InteractiveComponent,\n    FormOwner,\n    LoadableComponent,\n    LocalizedComponent,\n    T9nComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Global attributes\n  //\n  //--------------------------------------------------------------------------\n\n  @Watch(\"aria-expanded\")\n  handleGlobalAttributesChanged(): void {\n    forceUpdate(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** Specifies the alignment of the component's elements. */\n  @Prop({ reflect: true }) alignment: ButtonAlignment = \"center\";\n\n  /** Specifies the appearance style of the component. */\n  @Prop({ reflect: true }) appearance: Extract<\n    \"outline\" | \"outline-fill\" | \"solid\" | \"transparent\",\n    Appearance\n  > = \"solid\";\n\n  /** Accessible name for the component. */\n  @Prop() label: string;\n\n  /** Specifies the kind of the component, which will apply to the border and background if applicable. */\n  @Prop({ reflect: true }) kind: Extract<\"brand\" | \"danger\" | \"inverse\" | \"neutral\", Kind> =\n    \"brand\";\n\n  /**  When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The `id` of the form that will be associated with the component.\n   *\n   * When not set, the component will be associated with its ancestor form element, if any.\n   */\n  @Prop({ reflect: true })\n  form: string;\n\n  /**\n   * Specifies the URL of the linked resource, which can be set as an absolute or relative path.\n   */\n  @Prop({ reflect: true }) href: string;\n\n  /** Specifies an icon to display at the end of the component. */\n  @Prop({ reflect: true }) iconEnd: string;\n\n  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl: FlipContext;\n\n  /** Specifies an icon to display at the start of the component. */\n  @Prop({ reflect: true }) iconStart: string;\n\n  /**\n   * When `true`, a busy indicator is displayed and interaction is disabled.\n   */\n  @Prop({ reflect: true }) loading = false;\n\n  /** Specifies the name of the component on form submission. */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * Defines the relationship between the `href` value and the current document.\n   *\n   * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)\n   */\n  @Prop({ reflect: true }) rel: string;\n\n  /** When `true`, adds a round style to the component. */\n  @Prop({ reflect: true }) round = false;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** Specifies if the component is a child of a `calcite-split-button`. */\n  @Prop({ reflect: true }) splitChild: \"primary\" | \"secondary\" | false = false;\n\n  /**\n   * Specifies where to open the linked document defined in the `href` property.\n   *\n   * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)\n   */\n  @Prop({ reflect: true }) target: string;\n\n  /**\n   * Specifies the default behavior of the component.\n   *\n   * @mdn [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type)\n   */\n  @Prop({ reflect: true }) type = \"button\";\n\n  /** Specifies the width of the component. */\n  @Prop({ reflect: true }) width: Width = \"auto\";\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: ButtonMessages;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<ButtonMessages>;\n\n  @Watch(\"loading\")\n  loadingChanged(newValue: boolean, oldValue: boolean): void {\n    if (!!newValue && !oldValue) {\n      this.hasLoader = true;\n    }\n    if (!newValue && !!oldValue) {\n      window.setTimeout(() => {\n        this.hasLoader = false;\n      }, 300);\n    }\n  }\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /** referred in t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  async connectedCallback(): Promise<void> {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n    this.hasLoader = this.loading;\n    this.setupTextContentObserver();\n    connectLabel(this);\n    this.formEl = findAssociatedForm(this);\n  }\n\n  disconnectedCallback(): void {\n    this.mutationObserver?.disconnect();\n    disconnectInteractive(this);\n    disconnectLabel(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.resizeObserver?.disconnect();\n    this.formEl = null;\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    if (Build.isBrowser) {\n      this.updateHasContent();\n      await setUpMessages(this);\n    }\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n    this.setTooltipText();\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  render(): VNode {\n    const childElType = this.href ? \"a\" : \"button\";\n    const Tag = childElType;\n    const loaderNode = this.hasLoader ? (\n      <div class={CSS.buttonLoader}>\n        <calcite-loader\n          class={this.loading ? CSS.loadingIn : CSS.loadingOut}\n          inline\n          label={this.messages.loading}\n          scale={this.scale === \"l\" ? \"m\" : \"s\"}\n        />\n      </div>\n    ) : null;\n    const noStartEndIcons = !this.iconStart && !this.iconEnd;\n\n    const iconStartEl = (\n      <calcite-icon\n        class={{ [CSS.icon]: true, [CSS.iconStart]: true }}\n        flipRtl={this.iconFlipRtl === \"start\" || this.iconFlipRtl === \"both\"}\n        icon={this.iconStart}\n        scale={getIconScale(this.scale)}\n      />\n    );\n\n    const iconEndEl = (\n      <calcite-icon\n        class={{ [CSS.icon]: true, [CSS.iconEnd]: true }}\n        flipRtl={this.iconFlipRtl === \"end\" || this.iconFlipRtl === \"both\"}\n        icon={this.iconEnd}\n        scale={getIconScale(this.scale)}\n      />\n    );\n\n    const contentEl = (\n      <span class={CSS.content} ref={(el) => (this.contentEl = el)}>\n        <slot />\n      </span>\n    );\n\n    return (\n      <InteractiveContainer disabled={this.disabled}>\n        <Tag\n          aria-disabled={childElType === \"a\" ? toAriaBoolean(this.disabled || this.loading) : null}\n          aria-expanded={this.el.getAttribute(\"aria-expanded\")}\n          aria-label={!this.loading ? getLabelText(this) : this.messages.loading}\n          aria-live=\"polite\"\n          class={{\n            [CSS.buttonPadding]: noStartEndIcons,\n            [CSS.buttonPaddingShrunk]: !noStartEndIcons,\n            [CSS.contentSlotted]: this.hasContent,\n            [CSS.iconStartEmpty]: !this.iconStart,\n            [CSS.iconEndEmpty]: !this.iconEnd,\n          }}\n          disabled={childElType === \"button\" ? this.disabled || this.loading : null}\n          href={childElType === \"a\" && this.href}\n          name={childElType === \"button\" && this.name}\n          onClick={this.handleClick}\n          rel={childElType === \"a\" && this.rel}\n          tabIndex={this.disabled ? -1 : null}\n          target={childElType === \"a\" && this.target}\n          title={this.tooltipText}\n          type={childElType === \"button\" && this.type}\n          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n          ref={this.setChildEl}\n        >\n          {loaderNode}\n          {this.iconStart ? iconStartEl : null}\n          {this.hasContent ? contentEl : null}\n          {this.iconEnd ? iconEndEl : null}\n        </Tag>\n      </InteractiveContainer>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    this.childEl?.focus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteButtonElement;\n\n  formEl: HTMLFormElement;\n\n  labelEl: HTMLCalciteLabelElement;\n\n  /** watches for changing text content */\n  private mutationObserver = createObserver(\"mutation\", () => this.updateHasContent());\n\n  /** the rendered child element */\n  private childEl?: HTMLElement;\n\n  /** determine if there is slotted content for styling purposes */\n  @State() private hasContent = false;\n\n  /** determine if loader present for styling purposes */\n  @State() private hasLoader = false;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: ButtonMessages;\n\n  private updateHasContent() {\n    const slottedContent = this.el.textContent.trim().length > 0 || this.el.childNodes.length > 0;\n    this.hasContent =\n      this.el.childNodes.length === 1 && this.el.childNodes[0]?.nodeName === \"#text\"\n        ? this.el.textContent?.trim().length > 0\n        : slottedContent;\n  }\n\n  private setupTextContentObserver() {\n    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });\n  }\n\n  /** keeps track of the tooltipText */\n  @State() tooltipText: string;\n\n  /** keep track of the rendered contentEl */\n  private contentEl: HTMLSpanElement;\n\n  resizeObserver = createObserver(\"resize\", () => this.setTooltipText());\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  onLabelClick(): void {\n    this.handleClick();\n    this.setFocus();\n  }\n\n  // act on a requested or nearby form based on type\n  private handleClick = (): void => {\n    const { type } = this;\n\n    if (this.href) {\n      return;\n    }\n\n    // this.type refers to type attribute, not child element type\n    if (type === \"submit\") {\n      submitForm(this);\n    } else if (type === \"reset\") {\n      resetForm(this);\n    }\n  };\n\n  private setTooltipText = (): void => {\n    const { contentEl } = this;\n    if (contentEl) {\n      this.tooltipText =\n        contentEl.offsetWidth < contentEl.scrollWidth ? this.el.innerText || null : null;\n    }\n  };\n\n  private setChildEl = (el: HTMLElement): void => {\n    this.childEl = el;\n\n    if (el) {\n      this.resizeObserver?.observe(el);\n    }\n  };\n}\n"],"version":3}
+{"file":"button.js","mappings":";;;;;;;;;;;;;;;;;;AAAO,MAAM,GAAG,GAAG;IACjB,YAAY,EAAE,wBAAwB;IACtC,OAAO,EAAE,SAAS;IAClB,cAAc,EAAE,kBAAkB;IAClC,IAAI,EAAE,MAAM;IACZ,SAAS,EAAE,aAAa;IACxB,OAAO,EAAE,WAAW;IACpB,SAAS,EAAE,YAAY;IACvB,UAAU,EAAE,aAAa;IACzB,cAAc,EAAE,kBAAkB;IAClC,YAAY,EAAE,gBAAgB;IAC9B,aAAa,EAAE,gBAAgB;IAC/B,mBAAmB,EAAE,wBAAwB;CAC9C;;ACbD,MAAM,SAAS,GAAG,i0uBAAi0uB;;MCqDt0uB,MAAM;;;;;;QA2RT,qBAAgB,GAAG,cAAc,CAAC,UAAU,EAAE,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;QAsCrF,mBAAc,GAAG,cAAc,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;;QAc/D,gBAAW,GAAG;YACpB,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;YAEtB,IAAI,IAAI,CAAC,IAAI,EAAE;gBACb,OAAO;aACR;;YAGD,IAAI,IAAI,KAAK,QAAQ,EAAE;gBACrB,UAAU,CAAC,IAAI,CAAC,CAAC;aAClB;iBAAM,IAAI,IAAI,KAAK,OAAO,EAAE;gBAC3B,SAAS,CAAC,IAAI,CAAC,CAAC;aACjB;SACF,CAAC;QAEM,mBAAc,GAAG;YACvB,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;YAC3B,IAAI,SAAS,EAAE;gBACb,IAAI,CAAC,WAAW;oBACd,SAAS,CAAC,WAAW,GAAG,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS,IAAI,IAAI,GAAG,IAAI,CAAC;aACpF;SACF,CAAC;QAEM,eAAU,GAAG,CAAC,EAAe;YACnC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;YAElB,IAAI,EAAE,EAAE;gBACN,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC;aAClC;SACF,CAAC;yBAjVoD,QAAQ;0BAM1D,OAAO;;oBAOT,OAAO;wBAG2B,KAAK;;;;;;uBA2BN,KAAK;;;qBAaP,KAAK;qBAGE,GAAG;0BAG4B,KAAK;;oBAc5C,QAAQ;qBAGA,MAAM;;;0BAuLhB,KAAK;yBAGN,KAAK;+BAEP,EAAE;;;;;;;;;IAtR7B,6BAA6B;QAC3B,WAAW,CAAC,IAAI,CAAC,CAAC;KACnB;IAyGD,cAAc,CAAC,QAAiB,EAAE,QAAiB;QACjD,IAAI,CAAC,CAAC,QAAQ,IAAI,CAAC,QAAQ,EAAE;YAC3B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;SACvB;QACD,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,QAAQ,EAAE;YAC3B,MAAM,CAAC,UAAU,CAAC;gBAChB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;aACxB,EAAE,GAAG,CAAC,CAAC;SACT;KACF;IAGD,gBAAgB;;KAEf;;;;;;IAQD,MAAM,iBAAiB;QACrB,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACzB,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACvB,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;QAC9B,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAChC,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,IAAI,CAAC,MAAM,GAAG,kBAAkB,CAAC,IAAI,CAAC,CAAC;KACxC;IAED,oBAAoB;QAClB,IAAI,CAAC,gBAAgB,EAAE,UAAU,EAAE,CAAC;QACpC,qBAAqB,CAAC,IAAI,CAAC,CAAC;QAC5B,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,mBAAmB,CAAC,IAAI,CAAC,CAAC;QAC1B,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACzB,IAAI,CAAC,cAAc,EAAE,UAAU,EAAE,CAAC;QAClC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;KACpB;IAED,MAAM,iBAAiB;QACrB,sBAAsB,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,KAAK,CAAC,SAAS,EAAE;YACnB,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxB,MAAM,aAAa,CAAC,IAAI,CAAC,CAAC;SAC3B;KACF;IAED,gBAAgB;QACd,kBAAkB,CAAC,IAAI,CAAC,CAAC;QACzB,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IAED,kBAAkB;QAChB,qBAAqB,CAAC,IAAI,CAAC,CAAC;KAC7B;IAED,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,GAAG,QAAQ,CAAC;QAC/C,MAAM,GAAG,GAAG,WAAW,CAAC;QACxB,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,IAC/B,WAAK,KAAK,EAAE,GAAG,CAAC,YAAY,IAC1B,sBACE,KAAK,EAAE,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC,SAAS,GAAG,GAAG,CAAC,UAAU,EACpD,MAAM,QACN,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,OAAO,EAC5B,KAAK,EAAE,IAAI,CAAC,KAAK,KAAK,GAAG,GAAG,GAAG,GAAG,GAAG,GACrC,CACE,IACJ,IAAI,CAAC;QACT,MAAM,eAAe,GAAG,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;QAEzD,MAAM,WAAW,IACf,oBACE,KAAK,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,GAAG,IAAI,EAAE,CAAC,GAAG,CAAC,SAAS,GAAG,IAAI,EAAE,EAClD,OAAO,EAAE,IAAI,CAAC,WAAW,KAAK,OAAO,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,EACpE,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,GAC/B,CACH,CAAC;QAEF,MAAM,SAAS,IACb,oBACE,KAAK,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,GAAG,IAAI,EAAE,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,EAAE,EAChD,OAAO,EAAE,IAAI,CAAC,WAAW,KAAK,KAAK,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,EAClE,IAAI,EAAE,IAAI,CAAC,OAAO,EAClB,KAAK,EAAE,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,GAC/B,CACH,CAAC;QAEF,MAAM,SAAS,IACb,YAAM,KAAK,EAAE,GAAG,CAAC,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC,IAC1D,eAAQ,CACH,CACR,CAAC;QAEF,QACE,EAAC,oBAAoB,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAC3C,EAAC,GAAG,qBACa,WAAW,KAAK,GAAG,GAAG,aAAa,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC,GAAG,IAAI,mBACzE,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,eAAe,CAAC,gBACxC,CAAC,IAAI,CAAC,OAAO,GAAG,YAAY,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,eAC5D,QAAQ,EAClB,KAAK,EAAE;gBACL,CAAC,GAAG,CAAC,aAAa,GAAG,eAAe;gBACpC,CAAC,GAAG,CAAC,mBAAmB,GAAG,CAAC,eAAe;gBAC3C,CAAC,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,UAAU;gBACrC,CAAC,GAAG,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,SAAS;gBACrC,CAAC,GAAG,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,OAAO;aAClC,EACD,QAAQ,EAAE,WAAW,KAAK,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,GAAG,IAAI,EACzE,IAAI,EAAE,WAAW,KAAK,GAAG,IAAI,IAAI,CAAC,IAAI,EACtC,IAAI,EAAE,WAAW,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,EAC3C,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,GAAG,EAAE,WAAW,KAAK,GAAG,IAAI,IAAI,CAAC,GAAG,EACpC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,IAAI,EACnC,MAAM,EAAE,WAAW,KAAK,GAAG,IAAI,IAAI,CAAC,MAAM,EAC1C,KAAK,EAAE,IAAI,CAAC,WAAW,EACvB,IAAI,EAAE,WAAW,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI;;YAE3C,GAAG,EAAE,IAAI,CAAC,UAAU,IAEnB,UAAU,EACV,IAAI,CAAC,SAAS,GAAG,WAAW,GAAG,IAAI,EACnC,IAAI,CAAC,UAAU,GAAG,SAAS,GAAG,IAAI,EAClC,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,IAAI,CAC5B,CACe,EACvB;KACH;;;;;;;IAUD,MAAM,QAAQ;QACZ,MAAM,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAE/B,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;KACvB;IA6BD,qBAAqB;QACnB,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;KAC5C;IAIO,gBAAgB;QACtB,MAAM,cAAc,GAAG,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;QAC9F,IAAI,CAAC,UAAU;YACb,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,QAAQ,KAAK,OAAO;kBAC1E,IAAI,CAAC,EAAE,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC;kBACtC,cAAc,CAAC;KACtB;IAEO,wBAAwB;QAC9B,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;KAC7E;;;;;;IAgBD,YAAY;QACV,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,QAAQ,EAAE,CAAC;KACjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/button/resources.ts","src/components/button/button.scss?tag=calcite-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":["export const CSS = {\n  buttonLoader: \"calcite-button--loader\",\n  content: \"content\",\n  contentSlotted: \"content--slotted\",\n  icon: \"icon\",\n  iconStart: \"icon--start\",\n  iconEnd: \"icon--end\",\n  loadingIn: \"loading-in\",\n  loadingOut: \"loading-out\",\n  iconStartEmpty: \"icon-start-empty\",\n  iconEndEmpty: \"icon-end-empty\",\n  buttonPadding: \"button-padding\",\n  buttonPaddingShrunk: \"button-padding--shrunk\",\n};\n",":host {\n  @apply inline-block w-auto align-middle;\n}\n\n// fab variants\n:host([round]) {\n  border-radius: 50px;\n  & a,\n  & button {\n    border-radius: 50px;\n  }\n}\n\n// focus styles\n:host button,\n:host a {\n  @apply focus-base;\n  &:focus {\n    @apply focus-outset;\n  }\n}\n// button base\n:host button,\n:host a {\n  --calcite-button-content-margin-internal: theme(\"margin.2\");\n  --calcite-button-padding-x-internal: 7px;\n  --calcite-button-padding-y-internal: 3px;\n  padding-block: var(--calcite-button-padding-y-internal);\n  padding-inline: var(--calcite-button-padding-x-internal);\n  @apply font-inherit\n    relative\n    box-border\n    flex\n    h-full\n    w-full\n    cursor-pointer\n    select-none\n    appearance-none\n    items-center\n    justify-center\n    rounded-none\n    border-none\n    text-center\n    font-normal\n    no-underline;\n  // include transition from focus\n  transition:\n    color var(--calcite-animation-timing) ease-in-out,\n    background-color var(--calcite-animation-timing) ease-in-out,\n    box-shadow var(--calcite-animation-timing) ease-in-out,\n    outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;\n  &:hover {\n    @apply no-underline;\n  }\n  & span {\n    @apply truncate;\n  }\n}\n\n.content {\n  margin-inline: var(--calcite-button-content-margin-internal);\n}\n\n.icon-start-empty {\n  .content {\n    margin-inline-start: unset;\n  }\n}\n.icon-end-empty {\n  .content {\n    margin-inline-end: unset;\n  }\n}\n\n:host([scale=\"m\"]) {\n  button,\n  a {\n    --calcite-button-content-margin-internal: theme(\"margin.3\");\n  }\n}\n:host([scale=\"l\"]) {\n  button,\n  a {\n    --calcite-button-content-margin-internal: theme(\"margin.4\");\n  }\n}\n\n// button width\n:host([width=\"auto\"]) {\n  @apply w-auto;\n}\n\n:host([width=\"half\"]) {\n  @apply w-2/4;\n}\n\n:host([width=\"full\"]) {\n  @apply w-full;\n}\n\n// alignment\n:host([alignment=\"center\"]:not([width=\"auto\"])) {\n  a,\n  button {\n    @apply justify-center;\n  }\n}\n:host([alignment=\"start\"]:not([width=\"auto\"])) {\n  a,\n  button {\n    @apply justify-start;\n  }\n}\n:host([alignment=\"end\"]:not([width=\"auto\"])) {\n  a,\n  button {\n    @apply justify-end;\n  }\n}\n:host([alignment*=\"space-between\"]:not([width=\"auto\"])) {\n  a,\n  button {\n    @apply justify-between;\n  }\n}\n:host([alignment=\"icon-start-space-between\"]:not([width=\"auto\"])) {\n  .icon--start {\n    margin-inline-end: auto;\n  }\n  a,\n  button {\n    text-align: unset;\n  }\n}\n:host([alignment=\"icon-end-space-between\"]:not([width=\"auto\"])) {\n  .icon--end {\n    margin-inline-start: auto;\n  }\n  a,\n  button {\n    text-align: unset;\n  }\n}\n\n// only two icons\n:host([alignment=\"center\"]) {\n  a:not(.content--slotted),\n  button:not(.content--slotted) {\n    .icon--start + .icon--end {\n      margin-inline-start: var(--calcite-button-content-margin-internal);\n    }\n  }\n}\n\n.icon {\n  @apply relative\n    m-0\n    inline-flex\n    font-normal;\n  line-height: inherit;\n}\n\n@include disabled();\n\n@keyframes loader-in {\n  0% {\n    inline-size: 0;\n    opacity: 0;\n    transform: scale(0.5);\n  }\n  100% {\n    inline-size: 1em;\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n@keyframes loader-out {\n  0% {\n    inline-size: 1em;\n    opacity: 1;\n    transform: scale(1);\n  }\n  100% {\n    inline-size: 0;\n    opacity: 0;\n    transform: scale(0.5);\n  }\n}\n\n.calcite-button--loader {\n  @apply flex;\n  calcite-loader {\n    @apply m-0;\n    transition:\n      inline-size var(--calcite-internal-animation-timing-slow) ease-in-out,\n      opacity var(--calcite-internal-animation-timing-slow) ease-in-out,\n      transform var(--calcite-internal-animation-timing-slow) ease-in-out;\n    &.loading-in {\n      animation-name: loader-in;\n      animation-duration: var(--calcite-internal-animation-timing-slow);\n    }\n    &.loading-out {\n      animation-name: loader-out;\n      animation-duration: var(--calcite-internal-animation-timing-slow);\n    }\n  }\n}\n\n:host([loading]) {\n  // center loading spinner when button has text\n  button.content--slotted,\n  a.content--slotted {\n    .calcite-button--loader calcite-loader {\n      margin-inline-end: var(--calcite-button-content-margin-internal);\n    }\n  }\n  // hide icons when loading with no text\n  button:not(.content--slotted),\n  a:not(.content--slotted) {\n    .icon--start,\n    .icon--end {\n      @apply hidden;\n    }\n  }\n}\n\n// button styles\n:host([appearance]) {\n  button,\n  a {\n    @apply border-color-transparent\n      border\n      border-solid;\n  }\n}\n\n:host([kind=\"brand\"]) {\n  button,\n  a {\n    @apply text-color-inverse bg-brand;\n    &:hover,\n    &:focus {\n      @apply bg-brand-hover;\n    }\n    &:active {\n      @apply bg-brand-press;\n    }\n    calcite-loader {\n      @apply text-color-inverse;\n    }\n  }\n}\n:host([kind=\"danger\"]) {\n  button,\n  a {\n    @apply text-color-inverse bg-danger;\n    &:hover,\n    &:focus {\n      @apply bg-danger-hover;\n    }\n    &:active {\n      @apply bg-danger-press;\n    }\n    calcite-loader {\n      @apply text-color-inverse;\n    }\n  }\n}\n:host([kind=\"neutral\"]) {\n  button,\n  a {\n    @apply text-color-1 bg-foreground-3;\n    &:hover,\n    &:focus {\n      @apply bg-foreground-2;\n    }\n    &:active {\n      @apply bg-foreground-1;\n    }\n    calcite-loader {\n      @apply text-color-1;\n    }\n  }\n}\n:host([kind=\"inverse\"]) {\n  button,\n  a {\n    @apply text-color-inverse;\n    background-color: var(--calcite-color-inverse);\n    &:hover,\n    &:focus {\n      background-color: var(--calcite-color-inverse-hover);\n    }\n    &:active {\n      background-color: var(--calcite-color-inverse-press);\n    }\n    calcite-loader {\n      @apply text-color-inverse;\n    }\n  }\n}\n// outline\n:host([appearance=\"outline-fill\"]) {\n  button,\n  a {\n    @apply bg-foreground-1 border border-solid;\n    box-shadow: inset 0 0 0 1px transparent;\n  }\n}\n:host([appearance=\"outline-fill\"][kind=\"brand\"]) {\n  button,\n  a {\n    @apply border-color-brand bg-foreground-1;\n    color: theme(\"colors.brand\");\n    &:hover {\n      @apply border-color-brand-hover;\n      color: theme(\"colors.brand-hover\");\n      box-shadow: inset 0 0 0 1px var(--calcite-color-brand-hover);\n    }\n    &:focus {\n      @apply border-color-brand;\n      color: theme(\"colors.brand\");\n      box-shadow: inset 0 0 0 2px var(--calcite-color-brand);\n    }\n    &:active {\n      @apply border-color-brand-press;\n      color: theme(\"colors.brand-press\");\n      box-shadow: inset 0 0 0 2px var(--calcite-color-brand-press);\n    }\n    calcite-loader {\n      color: theme(\"colors.brand\");\n    }\n  }\n}\n:host([appearance=\"outline-fill\"][kind=\"danger\"]) {\n  button,\n  a {\n    @apply border-color-danger bg-foreground-1;\n    color: theme(\"colors.danger\");\n    &:hover {\n      @apply border-color-danger-hover;\n      color: theme(\"colors.danger-hover\");\n      box-shadow: inset 0 0 0 1px var(--calcite-color-status-danger-hover);\n    }\n    &:focus {\n      @apply border-color-danger;\n      color: theme(\"colors.danger\");\n      box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger);\n    }\n    &:active {\n      @apply border-color-danger-press;\n      color: theme(\"colors.danger-press\");\n      box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger-press);\n    }\n    calcite-loader {\n      color: theme(\"colors.danger\");\n    }\n  }\n}\n:host([appearance=\"outline-fill\"][kind=\"neutral\"]) {\n  button,\n  a {\n    @apply text-color-1 bg-foreground-1;\n    border-color: theme(\"borderColor.color.1\");\n    &:hover {\n      box-shadow: inset 0 0 0 1px var(--calcite-color-foreground-3);\n    }\n    &:focus {\n      box-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3);\n    }\n    &:active {\n      box-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3);\n    }\n    calcite-loader {\n      @apply text-color-1;\n    }\n  }\n}\n:host([appearance=\"outline-fill\"][kind=\"inverse\"]) {\n  button,\n  a {\n    @apply text-color-1 bg-foreground-1;\n    border-color: var(--calcite-color-inverse);\n    &:hover {\n      border-color: var(--calcite-color-inverse-hover);\n      box-shadow: inset 0 0 0 1px var(--calcite-color-inverse-hover);\n    }\n    &:focus {\n      border-color: var(--calcite-color-inverse);\n      box-shadow: inset 0 0 0 2px var(--calcite-color-inverse);\n    }\n    &:active {\n      border-color: var(--calcite-color-inverse-press);\n      box-shadow: inset 0 0 0 2px var(--calcite-color-inverse-press);\n    }\n    calcite-loader {\n      @apply text-color-1;\n    }\n  }\n}\n:host([appearance=\"outline\"]) {\n  button,\n  a {\n    @apply border border-solid bg-transparent;\n    box-shadow: inset 0 0 0 1px transparent;\n  }\n}\n:host([appearance=\"outline\"][kind=\"brand\"]) {\n  button,\n  a {\n    @apply border-color-brand bg-transparent;\n    color: theme(\"colors.brand\");\n    &:hover {\n      @apply border-color-brand-hover;\n      color: theme(\"colors.brand-hover\");\n      box-shadow: inset 0 0 0 1px var(--calcite-color-brand-hover);\n    }\n    &:focus {\n      @apply border-color-brand;\n      color: theme(\"colors.brand\");\n      box-shadow: inset 0 0 0 2px var(--calcite-color-brand);\n    }\n    &:active {\n      @apply border-color-brand-press;\n      color: theme(\"colors.brand-press\");\n      box-shadow: inset 0 0 0 2px var(--calcite-color-brand-press);\n    }\n    calcite-loader {\n      color: theme(\"colors.brand\");\n    }\n  }\n}\n:host([appearance=\"outline\"][kind=\"danger\"]) {\n  button,\n  a {\n    @apply border-color-danger bg-transparent;\n    color: theme(\"colors.danger\");\n    &:hover {\n      @apply border-color-danger-hover;\n      color: theme(\"colors.danger-hover\");\n      box-shadow: inset 0 0 0 1px var(--calcite-color-status-danger-hover);\n    }\n    &:focus {\n      @apply border-color-danger;\n      color: theme(\"colors.danger\");\n      box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger);\n    }\n    &:active {\n      @apply border-color-danger-press;\n      color: theme(\"colors.danger-press\");\n      box-shadow: inset 0 0 0 2px var(--calcite-color-status-danger-press);\n    }\n    calcite-loader {\n      color: theme(\"colors.danger\");\n    }\n  }\n}\n:host([appearance=\"outline\"][kind=\"neutral\"]) {\n  button,\n  a {\n    @apply text-color-1  bg-transparent;\n    border-color: theme(\"borderColor.color.1\");\n    &:hover {\n      box-shadow: inset 0 0 0 1px var(--calcite-color-foreground-3);\n    }\n    &:focus {\n      box-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3);\n    }\n    &:active {\n      box-shadow: inset 0 0 0 2px var(--calcite-color-foreground-3);\n    }\n    calcite-loader {\n      @apply text-color-1;\n    }\n  }\n}\n:host([appearance=\"outline\"][kind=\"inverse\"]) {\n  button,\n  a {\n    @apply text-color-1  bg-transparent;\n    border-color: var(--calcite-color-inverse);\n    &:hover {\n      border-color: var(--calcite-color-inverse-hover);\n      box-shadow: inset 0 0 0 1px var(--calcite-color-inverse-hover);\n    }\n    &:focus {\n      border-color: var(--calcite-color-inverse);\n      box-shadow: inset 0 0 0 2px var(--calcite-color-inverse);\n    }\n    &:active {\n      border-color: var(--calcite-color-inverse-press);\n      box-shadow: inset 0 0 0 2px var(--calcite-color-inverse-press);\n    }\n    calcite-loader {\n      @apply text-color-1;\n    }\n  }\n}\n\n:host([appearance=\"outline-fill\"][split-child=\"primary\"]) button,\n:host([appearance=\"outline\"][split-child=\"primary\"]) button {\n  border-inline-end-width: 0;\n  border-inline-start-width: theme(\"borderWidth.DEFAULT\");\n}\n\n:host([appearance=\"outline-fill\"][split-child=\"secondary\"]) button,\n:host([appearance=\"outline\"][split-child=\"secondary\"]) button {\n  border-inline-start-width: 0;\n  border-inline-end-width: theme(\"borderWidth.DEFAULT\");\n}\n\n// transparent\n:host([appearance=\"transparent\"]:not(.enable-editing-button)) {\n  button,\n  a {\n    @apply bg-transparent;\n    &:hover,\n    &:focus {\n      background-color: var(--calcite-color-transparent-hover);\n    }\n    &:active {\n      background-color: var(--calcite-color-transparent-press);\n    }\n  }\n}\n:host([appearance=\"transparent\"][kind=\"brand\"]) {\n  button,\n  a {\n    color: theme(\"colors.brand\");\n    &:hover {\n      color: theme(\"colors.brand-hover\");\n    }\n    &:focus {\n      color: theme(\"colors.brand\");\n    }\n    &:active {\n      color: theme(\"colors.brand-press\");\n    }\n    calcite-loader {\n      color: theme(\"colors.brand\");\n    }\n  }\n}\n\n:host([appearance=\"transparent\"][kind=\"danger\"]) {\n  button,\n  a {\n    color: theme(\"colors.danger\");\n    &:hover {\n      color: theme(\"colors.danger-hover\");\n    }\n    &:focus {\n      color: theme(\"colors.danger\");\n    }\n    &:active {\n      color: theme(\"colors.danger-press\");\n    }\n    calcite-loader {\n      color: theme(\"colors.danger\");\n    }\n  }\n}\n\n:host([appearance=\"transparent\"][kind=\"neutral\"]:not(.cancel-editing-button)) {\n  button,\n  a,\n  calcite-loader {\n    @apply text-color-1;\n  }\n}\n\n:host([appearance=\"transparent\"][kind=\"neutral\"].cancel-editing-button) {\n  button {\n    @apply text-color-3\n      border-t-color-input\n      border-b-color-input\n      border-t\n      border-b;\n    border-block-style: solid;\n\n    &:not(.content--slotted) {\n      --calcite-button-padding-y-internal: 0;\n    }\n\n    &:hover {\n      @apply text-color-1;\n    }\n  }\n}\n\n:host([appearance=\"transparent\"][kind=\"neutral\"].enable-editing-button) {\n  button {\n    @apply bg-transparent;\n  }\n}\n\n:host(.confirm-changes-button),\n:host(.cancel-editing-button),\n:host(.enable-editing-button) {\n  button {\n    &:focus {\n      outline-offset: -2px; // ensure focus outlines work in Safari\n    }\n  }\n}\n\n:host([appearance=\"transparent\"][kind=\"inverse\"]) {\n  button,\n  a,\n  calcite-loader {\n    @apply text-color-inverse;\n  }\n}\n\n// generate button scales (scenario: text exists)\n:host([scale=\"s\"]) button.content--slotted,\n:host([scale=\"s\"]) a.content--slotted {\n  @apply text-n2h;\n}\n\n// accommodate for transparent buttons not having borders\n:host([scale=\"s\"][appearance=\"transparent\"]) button.content--slotted,\n:host([scale=\"s\"][appearance=\"transparent\"]) a.content--slotted {\n  --calcite-button-padding-x-internal: theme(\"padding.2\");\n}\n\n:host([scale=\"s\"]) button,\n:host([scale=\"s\"]) a {\n  --calcite-button-padding-y-internal: 3px;\n}\n\n:host([scale=\"m\"]) button.content--slotted,\n:host([scale=\"m\"]) a.content--slotted {\n  --calcite-button-padding-x-internal: 11px;\n  @apply text-n1h;\n}\n\n:host([scale=\"m\"]) button,\n:host([scale=\"m\"]) a {\n  --calcite-button-padding-y-internal: 7px;\n}\n// accommodate for transparent buttons not having borders\n:host([scale=\"m\"][appearance=\"transparent\"]) button.content--slotted,\n:host([scale=\"m\"][appearance=\"transparent\"]) a.content--slotted {\n  --calcite-button-padding-x-internal: theme(\"padding.3\");\n}\n\n:host([scale=\"l\"]) button.content--slotted,\n:host([scale=\"l\"]) a.content--slotted {\n  --calcite-button-padding-x-internal: 15px;\n  @apply text-0h;\n}\n\n:host([scale=\"l\"]) {\n  .button-padding {\n    --calcite-button-padding-x-internal: theme(\"padding.4\");\n    --calcite-button-padding-y-internal: 11px;\n  }\n  //shrink the padding if an icon is present to preserve the height\n  .button-padding--shrunk {\n    --calcite-button-padding-y-internal: 9px;\n  }\n}\n\n// generate fab scales (scenario: 1 icon, ie., should be square)\n:host([scale=\"s\"]) button:not(.content--slotted),\n:host([scale=\"s\"]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: theme(\"padding[0.5]\");\n  --calcite-button-padding-y-internal: 3px;\n  @apply text-0h w-6;\n  min-block-size: theme(\"height.6\");\n}\n\n:host([scale=\"m\"]) button:not(.content--slotted),\n:host([scale=\"m\"]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: theme(\"padding[0.5]\");\n  --calcite-button-padding-y-internal: 7px;\n  @apply text-0h w-8;\n  min-block-size: theme(\"height.8\");\n}\n:host([scale=\"l\"]) button:not(.content--slotted),\n:host([scale=\"l\"]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: theme(\"padding[0.5]\");\n  --calcite-button-padding-y-internal: 9px;\n  @apply text-0h w-11;\n  min-block-size: theme(\"height.11\");\n}\n// accommodate for transparent buttons not having borders\n:host([scale=\"l\"][appearance=\"transparent\"]) button:not(.content--slotted),\n:host([scale=\"l\"][appearance=\"transparent\"]) a:not(.content--slotted) {\n  --calcite-button-padding-y-internal: theme(\"padding[2.5]\");\n}\n\n// generate fab scales (scenario: 2 icons, ie., should not be square)\n:host([scale=\"s\"][icon-start][icon-end]) button:not(.content--slotted),\n:host([scale=\"s\"][icon-start][icon-end]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: 23px;\n  @apply text-0h h-6;\n}\n// accommodate for transparent buttons not having borders\n:host([scale=\"s\"][icon-start][icon-end][appearance=\"transparent\"]) button:not(.content--slotted),\n:host([scale=\"s\"][icon-start][icon-end][appearance=\"transparent\"]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: theme(\"padding.6\");\n}\n:host([scale=\"m\"][icon-start][icon-end]) button:not(.content--slotted),\n:host([scale=\"m\"][icon-start][icon-end]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: theme(\"padding.8\");\n  @apply text-0h h-8;\n}\n// accommodate for transparent buttons not having borders\n:host([scale=\"m\"][icon-start][icon-end][appearance=\"transparent\"]) button:not(.content--slotted),\n:host([scale=\"m\"][icon-start][icon-end][appearance=\"transparent\"]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: 33px;\n}\n:host([scale=\"l\"][icon-start][icon-end]) button:not(.content--slotted),\n:host([scale=\"l\"][icon-start][icon-end]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: 43px;\n  @apply text-0h h-11;\n  // add space between when only 2 icons\n  .icon--start + .icon--end {\n    margin-inline-start: theme(\"margin.4\");\n  }\n}\n// accommodate for transparent buttons not having borders\n:host([scale=\"l\"][icon-start][icon-end][appearance=\"transparent\"]) button:not(.content--slotted),\n:host([scale=\"l\"][icon-start][icon-end][appearance=\"transparent\"]) a:not(.content--slotted) {\n  --calcite-button-padding-x-internal: theme(\"padding.11\");\n}\n\n@include base-component();\n","import {\n  Build,\n  Component,\n  Element,\n  forceUpdate,\n  h,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { findAssociatedForm, FormOwner, resetForm, submitForm } from \"../../utils/form\";\nimport {\n  connectInteractive,\n  disconnectInteractive,\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from \"../../utils/label\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport { createObserver } from \"../../utils/observers\";\nimport { getIconScale } from \"../../utils/component\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Appearance, FlipContext, Kind, Scale, Width } from \"../interfaces\";\nimport { ButtonMessages } from \"./assets/button/t9n\";\nimport { ButtonAlignment } from \"./interfaces\";\nimport { CSS } from \"./resources\";\nimport { toAriaBoolean } from \"../../utils/dom\";\n\n/** Passing a 'href' will render an anchor link, instead of a button. Role will be set to link, or button, depending on this. */\n/** It is the consumers responsibility to add aria information, rel, target, for links, and any button attributes for form submission */\n\n/** @slot - A slot for adding text. */\n@Component({\n  tag: \"calcite-button\",\n  styleUrl: \"button.scss\",\n  shadow: true,\n  assetsDirs: [\"assets\"],\n})\nexport class Button\n  implements\n    LabelableComponent,\n    InteractiveComponent,\n    FormOwner,\n    LoadableComponent,\n    LocalizedComponent,\n    T9nComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Global attributes\n  //\n  //--------------------------------------------------------------------------\n\n  @Watch(\"aria-expanded\")\n  handleGlobalAttributesChanged(): void {\n    forceUpdate(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** Specifies the alignment of the component's elements. */\n  @Prop({ reflect: true }) alignment: ButtonAlignment = \"center\";\n\n  /** Specifies the appearance style of the component. */\n  @Prop({ reflect: true }) appearance: Extract<\n    \"outline\" | \"outline-fill\" | \"solid\" | \"transparent\",\n    Appearance\n  > = \"solid\";\n\n  /** Accessible name for the component. */\n  @Prop() label: string;\n\n  /** Specifies the kind of the component, which will apply to the border and background if applicable. */\n  @Prop({ reflect: true }) kind: Extract<\"brand\" | \"danger\" | \"inverse\" | \"neutral\", Kind> =\n    \"brand\";\n\n  /**  When `true`, interaction is prevented and the component is displayed with lower opacity. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * The `id` of the form that will be associated with the component.\n   *\n   * When not set, the component will be associated with its ancestor form element, if any.\n   */\n  @Prop({ reflect: true })\n  form: string;\n\n  /**\n   * Specifies the URL of the linked resource, which can be set as an absolute or relative path.\n   */\n  @Prop({ reflect: true }) href: string;\n\n  /** Specifies an icon to display at the end of the component. */\n  @Prop({ reflect: true }) iconEnd: string;\n\n  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl: FlipContext;\n\n  /** Specifies an icon to display at the start of the component. */\n  @Prop({ reflect: true }) iconStart: string;\n\n  /**\n   * When `true`, a busy indicator is displayed and interaction is disabled.\n   */\n  @Prop({ reflect: true }) loading = false;\n\n  /** Specifies the name of the component on form submission. */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * Defines the relationship between the `href` value and the current document.\n   *\n   * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)\n   */\n  @Prop({ reflect: true }) rel: string;\n\n  /** When `true`, adds a round style to the component. */\n  @Prop({ reflect: true }) round = false;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** Specifies if the component is a child of a `calcite-split-button`. */\n  @Prop({ reflect: true }) splitChild: \"primary\" | \"secondary\" | false = false;\n\n  /**\n   * Specifies where to open the linked document defined in the `href` property.\n   *\n   * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)\n   */\n  @Prop({ reflect: true }) target: string;\n\n  /**\n   * Specifies the default behavior of the component.\n   *\n   * @mdn [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type)\n   */\n  @Prop({ reflect: true }) type = \"button\";\n\n  /** Specifies the width of the component. */\n  @Prop({ reflect: true }) width: Width = \"auto\";\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: ButtonMessages;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<ButtonMessages>;\n\n  @Watch(\"loading\")\n  loadingChanged(newValue: boolean, oldValue: boolean): void {\n    if (!!newValue && !oldValue) {\n      this.hasLoader = true;\n    }\n    if (!newValue && !!oldValue) {\n      window.setTimeout(() => {\n        this.hasLoader = false;\n      }, 300);\n    }\n  }\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /** referred in t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  async connectedCallback(): Promise<void> {\n    connectInteractive(this);\n    connectLocalized(this);\n    connectMessages(this);\n    this.hasLoader = this.loading;\n    this.setupTextContentObserver();\n    connectLabel(this);\n    this.formEl = findAssociatedForm(this);\n  }\n\n  disconnectedCallback(): void {\n    this.mutationObserver?.disconnect();\n    disconnectInteractive(this);\n    disconnectLabel(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.resizeObserver?.disconnect();\n    this.formEl = null;\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    if (Build.isBrowser) {\n      this.updateHasContent();\n      await setUpMessages(this);\n    }\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n    this.setTooltipText();\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  render(): VNode {\n    const childElType = this.href ? \"a\" : \"button\";\n    const Tag = childElType;\n    const loaderNode = this.hasLoader ? (\n      <div class={CSS.buttonLoader}>\n        <calcite-loader\n          class={this.loading ? CSS.loadingIn : CSS.loadingOut}\n          inline\n          label={this.messages.loading}\n          scale={this.scale === \"l\" ? \"m\" : \"s\"}\n        />\n      </div>\n    ) : null;\n    const noStartEndIcons = !this.iconStart && !this.iconEnd;\n\n    const iconStartEl = (\n      <calcite-icon\n        class={{ [CSS.icon]: true, [CSS.iconStart]: true }}\n        flipRtl={this.iconFlipRtl === \"start\" || this.iconFlipRtl === \"both\"}\n        icon={this.iconStart}\n        scale={getIconScale(this.scale)}\n      />\n    );\n\n    const iconEndEl = (\n      <calcite-icon\n        class={{ [CSS.icon]: true, [CSS.iconEnd]: true }}\n        flipRtl={this.iconFlipRtl === \"end\" || this.iconFlipRtl === \"both\"}\n        icon={this.iconEnd}\n        scale={getIconScale(this.scale)}\n      />\n    );\n\n    const contentEl = (\n      <span class={CSS.content} ref={(el) => (this.contentEl = el)}>\n        <slot />\n      </span>\n    );\n\n    return (\n      <InteractiveContainer disabled={this.disabled}>\n        <Tag\n          aria-disabled={childElType === \"a\" ? toAriaBoolean(this.disabled || this.loading) : null}\n          aria-expanded={this.el.getAttribute(\"aria-expanded\")}\n          aria-label={!this.loading ? getLabelText(this) : this.messages.loading}\n          aria-live=\"polite\"\n          class={{\n            [CSS.buttonPadding]: noStartEndIcons,\n            [CSS.buttonPaddingShrunk]: !noStartEndIcons,\n            [CSS.contentSlotted]: this.hasContent,\n            [CSS.iconStartEmpty]: !this.iconStart,\n            [CSS.iconEndEmpty]: !this.iconEnd,\n          }}\n          disabled={childElType === \"button\" ? this.disabled || this.loading : null}\n          href={childElType === \"a\" && this.href}\n          name={childElType === \"button\" && this.name}\n          onClick={this.handleClick}\n          rel={childElType === \"a\" && this.rel}\n          tabIndex={this.disabled ? -1 : null}\n          target={childElType === \"a\" && this.target}\n          title={this.tooltipText}\n          type={childElType === \"button\" && this.type}\n          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)\n          ref={this.setChildEl}\n        >\n          {loaderNode}\n          {this.iconStart ? iconStartEl : null}\n          {this.hasContent ? contentEl : null}\n          {this.iconEnd ? iconEndEl : null}\n        </Tag>\n      </InteractiveContainer>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    this.childEl?.focus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteButtonElement;\n\n  formEl: HTMLFormElement;\n\n  labelEl: HTMLCalciteLabelElement;\n\n  /** watches for changing text content */\n  private mutationObserver = createObserver(\"mutation\", () => this.updateHasContent());\n\n  /** the rendered child element */\n  private childEl?: HTMLElement;\n\n  /** determine if there is slotted content for styling purposes */\n  @State() private hasContent = false;\n\n  /** determine if loader present for styling purposes */\n  @State() private hasLoader = false;\n\n  @State() effectiveLocale = \"\";\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  @State() defaultMessages: ButtonMessages;\n\n  private updateHasContent() {\n    const slottedContent = this.el.textContent.trim().length > 0 || this.el.childNodes.length > 0;\n    this.hasContent =\n      this.el.childNodes.length === 1 && this.el.childNodes[0]?.nodeName === \"#text\"\n        ? this.el.textContent?.trim().length > 0\n        : slottedContent;\n  }\n\n  private setupTextContentObserver() {\n    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });\n  }\n\n  /** keeps track of the tooltipText */\n  @State() tooltipText: string;\n\n  /** keep track of the rendered contentEl */\n  private contentEl: HTMLSpanElement;\n\n  resizeObserver = createObserver(\"resize\", () => this.setTooltipText());\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  onLabelClick(): void {\n    this.handleClick();\n    this.setFocus();\n  }\n\n  // act on a requested or nearby form based on type\n  private handleClick = (): void => {\n    const { type } = this;\n\n    if (this.href) {\n      return;\n    }\n\n    // this.type refers to type attribute, not child element type\n    if (type === \"submit\") {\n      submitForm(this);\n    } else if (type === \"reset\") {\n      resetForm(this);\n    }\n  };\n\n  private setTooltipText = (): void => {\n    const { contentEl } = this;\n    if (contentEl) {\n      this.tooltipText =\n        contentEl.offsetWidth < contentEl.scrollWidth ? this.el.innerText || null : null;\n    }\n  };\n\n  private setChildEl = (el: HTMLElement): void => {\n    this.childEl = el;\n\n    if (el) {\n      this.resizeObserver?.observe(el);\n    }\n  };\n}\n"],"version":3}

package/dist/components/ca.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.6.0-next.1
+ * v2.6.0-next.2
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/calcite-accordion-item.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.6.0-next.1
+ * v2.6.0-next.2
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
@@ -34,7 +34,7 @@ const IDS = {
     sectionToggle: "section-toggle",
 };
 
-const accordionItemCss = ".icon-position--end,.icon-position--start{--calcite-accordion-item-icon-rotation:calc(90deg * -1);--calcite-accordion-item-active-icon-rotation:0deg;--calcite-accordion-item-icon-rotation-rtl:90deg;--calcite-accordion-item-active-icon-rotation-rtl:0deg}.icon-position--start{--calcite-accordion-item-flex-direction:row-reverse;--calcite-accordion-item-icon-spacing-start:0;--calcite-accordion-item-icon-spacing-end:var(--calcite-accordion-icon-margin)}.icon-position--end{--calcite-accordion-item-flex-direction:row;--calcite-accordion-item-icon-spacing-start:var(--calcite-accordion-icon-margin);--calcite-accordion-item-icon-spacing-end:0}.icon-position--end:not(.icon-type--plus-minus){--calcite-accordion-item-icon-rotation:0deg;--calcite-accordion-item-active-icon-rotation:180deg;--calcite-accordion-item-icon-rotation-rtl:0deg;--calcite-accordion-item-active-icon-rotation-rtl:calc(180deg * -1)}:host{position:relative;display:flex;flex-direction:column;color:var(--calcite-color-text-3);text-decoration-line:none;background-color:var(--calcite-accordion-item-background, var(--calcite-color-foreground-1))}:host .header-content{outline-color:transparent}:host(:focus) .header-content{outline:2px solid transparent;outline-offset:2px;outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite--color-brand)));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host([expanded]){color:var(--calcite-color-text-1)}:host([expanded]) .content{display:block;color:var(--calcite-color-text-1)}:host([expanded]) .header{border-block-end-color:transparent}:host .header{display:flex;align-items:stretch}:host .icon{position:relative;margin:0px;display:inline-flex;color:var(--calcite-color-text-3);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline-end:var(--calcite-accordion-item-icon-spacing-start);margin-inline-start:var(--calcite-accordion-item-icon-spacing-end)}.icon--start{display:flex;align-items:center;margin-inline-end:var(--calcite-accordion-icon-margin)}.icon--end{display:flex;align-items:center;margin-inline-end:var(--calcite-accordion-icon-margin);margin-inline-start:var(--calcite-accordion-icon-margin)}.header-container{inline-size:100%}.content{padding:var(--calcite-accordion-item-padding)}:host .content,:host .header{border-block-end:1px solid var(--calcite-accordion-item-border, var(--calcite-color-border-2))}:host .header *{display:inline-flex;align-items:center;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);word-wrap:break-word;word-break:break-word}:host .content{display:none;padding-block-start:0px;color:var(--calcite-color-text-3);text-align:initial}:host .expand-icon{color:var(--calcite-color-text-3);margin-inline-start:var(--calcite-accordion-item-icon-spacing-start);margin-inline-end:var(--calcite-accordion-item-icon-spacing-end);transform:rotate(var(--calcite-accordion-item-icon-rotation))}.calcite--rtl .expand-icon{transform:rotate(var(--calcite-accordion-item-icon-rotation-rtl))}:host([expanded]) .expand-icon{color:var(--calcite-color-text-3);transform:rotate(var(--calcite-accordion-item-active-icon-rotation))}:host([expanded]) .calcite--rtl .expand-icon{transform:rotate(var(--calcite-accordion-item-active-icon-rotation-rtl))}:host .header-text{margin-block:0px;flex-grow:1;flex-direction:column;padding-block:0px;text-align:initial;margin-inline-end:auto}:host .heading,:host .description{display:flex;inline-size:100%}:host .heading{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2)}:host .description{margin-block-start:0.25rem;color:var(--calcite-color-text-3)}:host(:focus) .heading,:host(:hover) .heading{color:var(--calcite-color-text-1)}:host(:focus) .icon,:host(:hover) .icon{color:var(--calcite-color-text-1)}:host(:focus) .expand-icon,:host(:hover) .expand-icon{color:var(--calcite-color-text-1)}:host(:focus) .description,:host(:hover) .description{color:var(--calcite-color-text-2)}:host(:focus) .heading,:host(:active) .heading,:host([expanded]) .heading{color:var(--calcite-color-text-1)}:host(:focus) .icon,:host(:active) .icon,:host([expanded]) .icon{color:var(--calcite-color-text-1)}:host(:focus) .description,:host(:active) .description,:host([expanded]) .description{color:var(--calcite-color-text-2)}.header-content{flex-grow:1;cursor:pointer;padding:var(--calcite-accordion-item-padding);flex-direction:var(--calcite-accordion-item-flex-direction)}.actions-start,.actions-end{display:flex;align-items:center}@media (forced-colors: active){:host([expanded]) .header{border-block-end:none}:host([expanded]) .heading{font-weight:bolder}:host(:hover) .heading,:host(:focus) .heading{text-decoration:underline}}:host([hidden]){display:none}[hidden]{display:none}";
+const accordionItemCss = ".icon-position--end,.icon-position--start{--calcite-accordion-item-icon-rotation:calc(90deg * -1);--calcite-accordion-item-active-icon-rotation:0deg;--calcite-accordion-item-icon-rotation-rtl:90deg;--calcite-accordion-item-active-icon-rotation-rtl:0deg}.icon-position--start{--calcite-accordion-item-flex-direction:row-reverse;--calcite-accordion-item-icon-spacing-start:0;--calcite-accordion-item-icon-spacing-end:var(--calcite-accordion-icon-margin)}.icon-position--end{--calcite-accordion-item-flex-direction:row;--calcite-accordion-item-icon-spacing-start:var(--calcite-accordion-icon-margin);--calcite-accordion-item-icon-spacing-end:0}.icon-position--end:not(.icon-type--plus-minus){--calcite-accordion-item-icon-rotation:0deg;--calcite-accordion-item-active-icon-rotation:180deg;--calcite-accordion-item-icon-rotation-rtl:0deg;--calcite-accordion-item-active-icon-rotation-rtl:calc(180deg * -1)}:host{position:relative;display:flex;flex-direction:column;color:var(--calcite-color-text-3);text-decoration-line:none;background-color:var(--calcite-accordion-item-background, var(--calcite-color-foreground-1))}:host .header-content{outline-color:transparent}:host(:focus) .header-content{outline:2px solid transparent;outline-offset:2px;outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand-hover, var(--calcite-color-brand)));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}:host([expanded]){color:var(--calcite-color-text-1)}:host([expanded]) .content{display:block;color:var(--calcite-color-text-1)}:host([expanded]) .header{border-block-end-color:transparent}:host .header{display:flex;align-items:stretch}:host .icon{position:relative;margin:0px;display:inline-flex;color:var(--calcite-color-text-3);transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline-end:var(--calcite-accordion-item-icon-spacing-start);margin-inline-start:var(--calcite-accordion-item-icon-spacing-end)}.icon--start{display:flex;align-items:center;margin-inline-end:var(--calcite-accordion-icon-margin)}.icon--end{display:flex;align-items:center;margin-inline-end:var(--calcite-accordion-icon-margin);margin-inline-start:var(--calcite-accordion-icon-margin)}.header-container{inline-size:100%}.content{padding:var(--calcite-accordion-item-padding)}:host .content,:host .header{border-block-end:1px solid var(--calcite-accordion-item-border, var(--calcite-color-border-2))}:host .header *{display:inline-flex;align-items:center;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);word-wrap:break-word;word-break:break-word}:host .content{display:none;padding-block-start:0px;color:var(--calcite-color-text-3);text-align:initial}:host .expand-icon{color:var(--calcite-color-text-3);margin-inline-start:var(--calcite-accordion-item-icon-spacing-start);margin-inline-end:var(--calcite-accordion-item-icon-spacing-end);transform:rotate(var(--calcite-accordion-item-icon-rotation))}.calcite--rtl .expand-icon{transform:rotate(var(--calcite-accordion-item-icon-rotation-rtl))}:host([expanded]) .expand-icon{color:var(--calcite-color-text-3);transform:rotate(var(--calcite-accordion-item-active-icon-rotation))}:host([expanded]) .calcite--rtl .expand-icon{transform:rotate(var(--calcite-accordion-item-active-icon-rotation-rtl))}:host .header-text{margin-block:0px;flex-grow:1;flex-direction:column;padding-block:0px;text-align:initial;margin-inline-end:auto}:host .heading,:host .description{display:flex;inline-size:100%}:host .heading{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2)}:host .description{margin-block-start:0.25rem;color:var(--calcite-color-text-3)}:host(:focus) .heading,:host(:hover) .heading{color:var(--calcite-color-text-1)}:host(:focus) .icon,:host(:hover) .icon{color:var(--calcite-color-text-1)}:host(:focus) .expand-icon,:host(:hover) .expand-icon{color:var(--calcite-color-text-1)}:host(:focus) .description,:host(:hover) .description{color:var(--calcite-color-text-2)}:host(:focus) .heading,:host(:active) .heading,:host([expanded]) .heading{color:var(--calcite-color-text-1)}:host(:focus) .icon,:host(:active) .icon,:host([expanded]) .icon{color:var(--calcite-color-text-1)}:host(:focus) .description,:host(:active) .description,:host([expanded]) .description{color:var(--calcite-color-text-2)}.header-content{flex-grow:1;cursor:pointer;padding:var(--calcite-accordion-item-padding);flex-direction:var(--calcite-accordion-item-flex-direction)}.actions-start,.actions-end{display:flex;align-items:center}@media (forced-colors: active){:host([expanded]) .header{border-block-end:none}:host([expanded]) .heading{font-weight:bolder}:host(:hover) .heading,:host(:focus) .heading{text-decoration:underline}}:host([hidden]){display:none}[hidden]{display:none}";
 
 const AccordionItem = /*@__PURE__*/ proxyCustomElement(class AccordionItem extends HTMLElement {
     constructor() {

package/dist/components/calcite-accordion-item.js.map

@@ -1 +1 @@
-{"file":"calcite-accordion-item.js","mappings":"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","names":[],"sources":["src/components/accordion-item/resources.ts","src/components/accordion-item/accordion-item.scss?tag=calcite-accordion-item&encapsulation=shadow","src/components/accordion-item/accordion-item.tsx"],"sourcesContent":["export const SLOTS = {\n  actionsStart: \"actions-start\",\n  actionsEnd: \"actions-end\",\n};\n\nexport const CSS = {\n  icon: \"icon\",\n  header: \"header\",\n  headerContent: \"header-content\",\n  actionsStart: \"actions-start\",\n  actionsEnd: \"actions-end\",\n  headerText: \"header-text\",\n  heading: \"heading\",\n  description: \"description\",\n  expandIcon: \"expand-icon\",\n  content: \"content\",\n  iconStart: \"icon--start\",\n  iconEnd: \"icon--end\",\n  headerContainer: \"header-container\",\n};\n\nexport const IDS = {\n  section: \"section\",\n  sectionToggle: \"section-toggle\",\n};\n","%icon-position {\n  /* icon rotation variables */\n  --calcite-accordion-item-icon-rotation: calc(theme(\"rotate.90\") * -1);\n  --calcite-accordion-item-active-icon-rotation: theme(\"rotate.0\");\n  --calcite-accordion-item-icon-rotation-rtl: theme(\"rotate.90\");\n  --calcite-accordion-item-active-icon-rotation-rtl: theme(\"rotate.0\");\n}\n\n// icon position variants for child\n.icon-position--start {\n  @extend %icon-position;\n  --calcite-accordion-item-flex-direction: row-reverse;\n  --calcite-accordion-item-icon-spacing-start: 0;\n  --calcite-accordion-item-icon-spacing-end: var(--calcite-accordion-icon-margin);\n}\n\n.icon-position--end {\n  @extend %icon-position;\n  --calcite-accordion-item-flex-direction: row;\n  --calcite-accordion-item-icon-spacing-start: var(--calcite-accordion-icon-margin);\n  --calcite-accordion-item-icon-spacing-end: 0;\n}\n\n.icon-position--end:not(.icon-type--plus-minus) {\n  --calcite-accordion-item-icon-rotation: theme(\"rotate.0\");\n  --calcite-accordion-item-active-icon-rotation: theme(\"rotate.180\");\n  --calcite-accordion-item-icon-rotation-rtl: theme(\"rotate.0\");\n  --calcite-accordion-item-active-icon-rotation-rtl: calc(theme(\"rotate.180\") * -1);\n}\n\n:host {\n  @apply text-color-3\n    relative\n    flex\n    flex-col\n    no-underline;\n  background-color: var(--calcite-accordion-item-background, theme(\"backgroundColor.foreground.1\"));\n}\n\n// focus styles\n:host .header-content {\n  @apply focus-base;\n}\n\n:host(:focus) .header-content {\n  @apply focus-inset\n  outline-none;\n}\n\n:host([expanded]) {\n  @apply text-color-1;\n  & .content {\n    @apply text-color-1 block;\n  }\n  & .header {\n    border-block-end-color: transparent;\n  }\n}\n\n// .header / content\n:host .header {\n  @apply flex items-stretch;\n}\n\n:host .icon {\n  @apply text-color-3\n    relative\n    m-0\n    inline-flex\n    duration-150\n    ease-in-out;\n  margin-inline-end: var(--calcite-accordion-item-icon-spacing-start);\n  margin-inline-start: var(--calcite-accordion-item-icon-spacing-end);\n}\n\n.icon--start {\n  @apply flex items-center;\n  margin-inline-end: var(--calcite-accordion-icon-margin);\n}\n\n.icon--end {\n  @apply flex items-center;\n  margin-inline-end: var(--calcite-accordion-icon-margin);\n  margin-inline-start: var(--calcite-accordion-icon-margin);\n}\n\n.header-container {\n  inline-size: 100%;\n}\n\n.content {\n  padding: var(--calcite-accordion-item-padding);\n}\n\n:host .content,\n:host .header {\n  border-block-end: 1px solid var(--calcite-accordion-item-border, theme(\"borderColor.color.2\"));\n}\n\n:host .header * {\n  @apply inline-flex\n    items-center\n    duration-150\n    ease-in-out;\n  @include word-break();\n}\n\n:host .content {\n  @apply text-color-3 hidden pt-0;\n  text-align: initial;\n}\n\n// accordion item icon\n:host .expand-icon {\n  @apply text-color-3;\n  margin-inline-start: var(--calcite-accordion-item-icon-spacing-start);\n  margin-inline-end: var(--calcite-accordion-item-icon-spacing-end);\n  transform: rotate(var(--calcite-accordion-item-icon-rotation));\n}\n\n.calcite--rtl .expand-icon {\n  transform: rotate(var(--calcite-accordion-item-icon-rotation-rtl));\n}\n\n:host([expanded]) .expand-icon {\n  @apply text-color-3;\n  transform: rotate(var(--calcite-accordion-item-active-icon-rotation));\n}\n\n:host([expanded]) .calcite--rtl .expand-icon {\n  transform: rotate(var(--calcite-accordion-item-active-icon-rotation-rtl));\n}\n\n// accordion item title\n:host .header-text {\n  @apply my-0 flex-grow flex-col py-0;\n  text-align: initial;\n  margin-inline-end: theme(\"margin.auto\");\n}\n\n:host .heading,\n:host .description {\n  @apply flex w-full;\n}\n\n:host .heading {\n  @apply text-color-2 font-medium;\n}\n:host .description {\n  @apply text-color-3 mt-1;\n}\n\n:host(:focus),\n:host(:hover) {\n  & .heading {\n    @apply text-color-1;\n  }\n  & .icon {\n    @apply text-color-1;\n  }\n\n  & .expand-icon {\n    @apply text-color-1;\n  }\n  & .description {\n    @apply text-color-2;\n  }\n}\n\n:host(:focus),\n:host(:active),\n:host([expanded]) {\n  & .heading {\n    @apply text-color-1;\n  }\n  & .icon {\n    @apply text-color-1;\n  }\n  & .description {\n    @apply text-color-2;\n  }\n}\n\n.header-content {\n  @apply flex-grow cursor-pointer;\n  padding: var(--calcite-accordion-item-padding);\n  flex-direction: var(--calcite-accordion-item-flex-direction);\n}\n\n.actions-start,\n.actions-end {\n  @apply flex items-center;\n}\n\n@media (forced-colors: active) {\n  :host([expanded]) {\n    & .header {\n      border-block-end: none;\n    }\n    & .heading {\n      /** give visual indicator of expanded state since subtle color changes can't be done **/\n      font-weight: bolder;\n    }\n  }\n  :host(:hover),\n  :host(:focus) {\n    & .heading {\n      /** give visual indicator of expandability/click-ability since subtle color changes can't be done **/\n      text-decoration: underline;\n    }\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  VNode,\n} from \"@stencil/core\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport {\n  closestElementCrossShadowBoundary,\n  getElementDir,\n  getSlotted,\n  toAriaBoolean,\n} from \"../../utils/dom\";\nimport { CSS_UTILITY } from \"../../utils/resources\";\nimport { getIconScale } from \"../../utils/component\";\nimport { SLOTS, CSS, IDS } from \"./resources\";\nimport { FlipContext, Position, Scale, SelectionMode } from \"../interfaces\";\nimport { RequestedItem } from \"./interfaces\";\n\n/**\n * @slot - A slot for adding custom content, including nested `calcite-accordion-item`s.\n * @slot actions-end - A slot for adding `calcite-action`s or content to the end side of the component's header.\n * @slot actions-start - A slot for adding `calcite-action`s or content to the start side of the component's header.\n */\n@Component({\n  tag: \"calcite-accordion-item\",\n  styleUrl: \"accordion-item.scss\",\n  shadow: true,\n})\nexport class AccordionItem implements ConditionalSlotComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, the component is expanded. */\n  @Prop({ reflect: true, mutable: true }) expanded = false;\n\n  /** Specifies heading text for the component. */\n  @Prop() heading: string;\n\n  /** Specifies a description for the component. */\n  @Prop() description: string;\n\n  /** Specifies an icon to display at the start of the component. */\n  @Prop({ reflect: true }) iconStart: string;\n\n  /** Specifies an icon to display at the end of the component. */\n  @Prop({ reflect: true }) iconEnd: string;\n\n  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl: FlipContext;\n\n  /**\n   * Specifies the placement of the icon in the header inherited from the `calcite-accordion`.\n   *\n   * @internal\n   */\n  @Prop() iconPosition: Position;\n\n  /** Specifies the type of the icon in the header inherited from the `calcite-accordion`.\n   *\n   * @internal\n   */\n  @Prop() iconType: \"chevron\" | \"caret\" | \"plus-minus\";\n\n  /**\n   * The containing `accordion` element.\n   *\n   * @internal\n   */\n  @Prop() accordionParent: HTMLCalciteAccordionElement;\n\n  /**\n   * Specifies the size of the component inherited from the `calcite-accordion`.\n   *\n   * @internal\n   */\n  @Prop() scale: Scale;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalAccordionItemSelect: EventEmitter<RequestedItem>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalAccordionItemClose: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectConditionalSlotComponent(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectConditionalSlotComponent(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderActionsStart(): VNode {\n    const { el } = this;\n    return getSlotted(el, SLOTS.actionsStart) ? (\n      <div class={CSS.actionsStart}>\n        <slot name={SLOTS.actionsStart} />\n      </div>\n    ) : null;\n  }\n\n  renderActionsEnd(): VNode {\n    const { el } = this;\n    return getSlotted(el, SLOTS.actionsEnd) ? (\n      <div class={CSS.actionsEnd}>\n        <slot name={SLOTS.actionsEnd} />\n      </div>\n    ) : null;\n  }\n\n  render(): VNode {\n    const { iconFlipRtl } = this;\n    const dir = getElementDir(this.el);\n    const iconStartEl = this.iconStart ? (\n      <calcite-icon\n        class={CSS.iconStart}\n        flipRtl={iconFlipRtl === \"both\" || iconFlipRtl === \"start\"}\n        icon={this.iconStart}\n        key=\"icon-start\"\n        scale={getIconScale(this.scale)}\n      />\n    ) : null;\n    const iconEndEl = this.iconEnd ? (\n      <calcite-icon\n        class={CSS.iconEnd}\n        flipRtl={iconFlipRtl === \"both\" || iconFlipRtl === \"end\"}\n        icon={this.iconEnd}\n        key=\"icon-end\"\n        scale={getIconScale(this.scale)}\n      />\n    ) : null;\n    const { description } = this;\n    return (\n      <Host>\n        <div\n          class={{\n            [`icon-position--${this.iconPosition}`]: true,\n            [`icon-type--${this.iconType}`]: true,\n          }}\n        >\n          <div class={{ [CSS.header]: true, [CSS_UTILITY.rtl]: dir === \"rtl\" }}>\n            {this.renderActionsStart()}\n            <div\n              aria-controls={IDS.section}\n              aria-expanded={toAriaBoolean(this.expanded)}\n              class={CSS.headerContent}\n              id={IDS.sectionToggle}\n              onClick={this.itemHeaderClickHandler}\n              role=\"button\"\n              tabindex=\"0\"\n            >\n              <div class={CSS.headerContainer}>\n                {iconStartEl}\n                <div class={CSS.headerText}>\n                  <span class={CSS.heading}>{this.heading}</span>\n                  {description ? <span class={CSS.description}>{description}</span> : null}\n                </div>\n                {iconEndEl}\n              </div>\n              <calcite-icon\n                class={CSS.expandIcon}\n                icon={\n                  this.iconType === \"chevron\"\n                    ? \"chevronDown\"\n                    : this.iconType === \"caret\"\n                      ? \"caretDown\"\n                      : this.expanded\n                        ? \"minus\"\n                        : \"plus\"\n                }\n                scale={getIconScale(this.scale)}\n              />\n            </div>\n            {this.renderActionsEnd()}\n          </div>\n          <section aria-labelledby={IDS.sectionToggle} class={CSS.content} id={IDS.section}>\n            <slot />\n          </section>\n        </div>\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"keydown\")\n  keyDownHandler(event: KeyboardEvent): void {\n    if (event.target === this.el) {\n      switch (event.key) {\n        case \" \":\n        case \"Enter\":\n          this.emitRequestedItem();\n          event.preventDefault();\n          break;\n      }\n    }\n  }\n\n  @Listen(\"calciteInternalAccordionChange\", { target: \"body\" })\n  updateActiveItemOnChange(event: CustomEvent): void {\n    const [accordion] = event.composedPath();\n    const parent = closestElementCrossShadowBoundary<HTMLCalciteAccordionElement>(\n      this.el,\n      \"calcite-accordion\",\n    );\n\n    if (accordion !== parent) {\n      return;\n    }\n\n    this.determineActiveItem(parent.selectionMode, event.detail.requestedAccordionItem);\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalAccordionItemsSync\", { target: \"document\" })\n  accordionItemSyncHandler(event: CustomEvent): void {\n    const [accordion] = event.composedPath();\n    const accordionItem = this.el;\n\n    // we sync with our accordion parent via event only if the item is wrapped within another component's shadow DOM,\n    // otherwise, the accordion parent will sync the item directly\n\n    const willBeSyncedByDirectParent = accordionItem.parentElement === accordion;\n    if (willBeSyncedByDirectParent) {\n      return;\n    }\n\n    const closestAccordionParent = closestElementCrossShadowBoundary<HTMLCalciteAccordionElement>(\n      accordionItem,\n      \"calcite-accordion\",\n    );\n\n    if (accordion !== closestAccordionParent) {\n      return;\n    }\n\n    accordionItem.iconPosition = closestAccordionParent.iconPosition;\n    accordionItem.iconType = closestAccordionParent.iconType;\n    accordionItem.scale = closestAccordionParent.scale;\n    event.stopPropagation();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteAccordionItemElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** handle clicks on item header */\n  private itemHeaderClickHandler = (): void => this.emitRequestedItem();\n\n  private determineActiveItem(\n    selectionMode: SelectionMode,\n    requestedItem: HTMLCalciteAccordionItemElement,\n  ): void {\n    switch (selectionMode) {\n      case \"multiple\":\n        if (this.el === requestedItem) {\n          this.expanded = !this.expanded;\n        }\n        break;\n\n      case \"single\":\n        this.expanded = this.el === requestedItem ? !this.expanded : false;\n        break;\n\n      case \"single-persist\":\n        this.expanded = this.el === requestedItem;\n        break;\n    }\n  }\n\n  private emitRequestedItem(): void {\n    this.calciteInternalAccordionItemSelect.emit({\n      requestedAccordionItem: this.el as HTMLCalciteAccordionItemElement,\n    });\n  }\n}\n"],"version":3}
+{"file":"calcite-accordion-item.js","mappings":"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","names":[],"sources":["src/components/accordion-item/resources.ts","src/components/accordion-item/accordion-item.scss?tag=calcite-accordion-item&encapsulation=shadow","src/components/accordion-item/accordion-item.tsx"],"sourcesContent":["export const SLOTS = {\n  actionsStart: \"actions-start\",\n  actionsEnd: \"actions-end\",\n};\n\nexport const CSS = {\n  icon: \"icon\",\n  header: \"header\",\n  headerContent: \"header-content\",\n  actionsStart: \"actions-start\",\n  actionsEnd: \"actions-end\",\n  headerText: \"header-text\",\n  heading: \"heading\",\n  description: \"description\",\n  expandIcon: \"expand-icon\",\n  content: \"content\",\n  iconStart: \"icon--start\",\n  iconEnd: \"icon--end\",\n  headerContainer: \"header-container\",\n};\n\nexport const IDS = {\n  section: \"section\",\n  sectionToggle: \"section-toggle\",\n};\n","%icon-position {\n  /* icon rotation variables */\n  --calcite-accordion-item-icon-rotation: calc(theme(\"rotate.90\") * -1);\n  --calcite-accordion-item-active-icon-rotation: theme(\"rotate.0\");\n  --calcite-accordion-item-icon-rotation-rtl: theme(\"rotate.90\");\n  --calcite-accordion-item-active-icon-rotation-rtl: theme(\"rotate.0\");\n}\n\n// icon position variants for child\n.icon-position--start {\n  @extend %icon-position;\n  --calcite-accordion-item-flex-direction: row-reverse;\n  --calcite-accordion-item-icon-spacing-start: 0;\n  --calcite-accordion-item-icon-spacing-end: var(--calcite-accordion-icon-margin);\n}\n\n.icon-position--end {\n  @extend %icon-position;\n  --calcite-accordion-item-flex-direction: row;\n  --calcite-accordion-item-icon-spacing-start: var(--calcite-accordion-icon-margin);\n  --calcite-accordion-item-icon-spacing-end: 0;\n}\n\n.icon-position--end:not(.icon-type--plus-minus) {\n  --calcite-accordion-item-icon-rotation: theme(\"rotate.0\");\n  --calcite-accordion-item-active-icon-rotation: theme(\"rotate.180\");\n  --calcite-accordion-item-icon-rotation-rtl: theme(\"rotate.0\");\n  --calcite-accordion-item-active-icon-rotation-rtl: calc(theme(\"rotate.180\") * -1);\n}\n\n:host {\n  @apply text-color-3\n    relative\n    flex\n    flex-col\n    no-underline;\n  background-color: var(--calcite-accordion-item-background, theme(\"backgroundColor.foreground.1\"));\n}\n\n// focus styles\n:host .header-content {\n  @apply focus-base;\n}\n\n:host(:focus) .header-content {\n  @apply focus-inset\n  outline-none;\n}\n\n:host([expanded]) {\n  @apply text-color-1;\n  & .content {\n    @apply text-color-1 block;\n  }\n  & .header {\n    border-block-end-color: transparent;\n  }\n}\n\n// .header / content\n:host .header {\n  @apply flex items-stretch;\n}\n\n:host .icon {\n  @apply text-color-3\n    relative\n    m-0\n    inline-flex\n    duration-150\n    ease-in-out;\n  margin-inline-end: var(--calcite-accordion-item-icon-spacing-start);\n  margin-inline-start: var(--calcite-accordion-item-icon-spacing-end);\n}\n\n.icon--start {\n  @apply flex items-center;\n  margin-inline-end: var(--calcite-accordion-icon-margin);\n}\n\n.icon--end {\n  @apply flex items-center;\n  margin-inline-end: var(--calcite-accordion-icon-margin);\n  margin-inline-start: var(--calcite-accordion-icon-margin);\n}\n\n.header-container {\n  inline-size: 100%;\n}\n\n.content {\n  padding: var(--calcite-accordion-item-padding);\n}\n\n:host .content,\n:host .header {\n  border-block-end: 1px solid var(--calcite-accordion-item-border, theme(\"borderColor.color.2\"));\n}\n\n:host .header * {\n  @apply inline-flex\n    items-center\n    duration-150\n    ease-in-out;\n  @include word-break();\n}\n\n:host .content {\n  @apply text-color-3 hidden pt-0;\n  text-align: initial;\n}\n\n// accordion item icon\n:host .expand-icon {\n  @apply text-color-3;\n  margin-inline-start: var(--calcite-accordion-item-icon-spacing-start);\n  margin-inline-end: var(--calcite-accordion-item-icon-spacing-end);\n  transform: rotate(var(--calcite-accordion-item-icon-rotation));\n}\n\n.calcite--rtl .expand-icon {\n  transform: rotate(var(--calcite-accordion-item-icon-rotation-rtl));\n}\n\n:host([expanded]) .expand-icon {\n  @apply text-color-3;\n  transform: rotate(var(--calcite-accordion-item-active-icon-rotation));\n}\n\n:host([expanded]) .calcite--rtl .expand-icon {\n  transform: rotate(var(--calcite-accordion-item-active-icon-rotation-rtl));\n}\n\n// accordion item title\n:host .header-text {\n  @apply my-0 flex-grow flex-col py-0;\n  text-align: initial;\n  margin-inline-end: theme(\"margin.auto\");\n}\n\n:host .heading,\n:host .description {\n  @apply flex w-full;\n}\n\n:host .heading {\n  @apply text-color-2 font-medium;\n}\n:host .description {\n  @apply text-color-3 mt-1;\n}\n\n:host(:focus),\n:host(:hover) {\n  & .heading {\n    @apply text-color-1;\n  }\n  & .icon {\n    @apply text-color-1;\n  }\n\n  & .expand-icon {\n    @apply text-color-1;\n  }\n  & .description {\n    @apply text-color-2;\n  }\n}\n\n:host(:focus),\n:host(:active),\n:host([expanded]) {\n  & .heading {\n    @apply text-color-1;\n  }\n  & .icon {\n    @apply text-color-1;\n  }\n  & .description {\n    @apply text-color-2;\n  }\n}\n\n.header-content {\n  @apply flex-grow cursor-pointer;\n  padding: var(--calcite-accordion-item-padding);\n  flex-direction: var(--calcite-accordion-item-flex-direction);\n}\n\n.actions-start,\n.actions-end {\n  @apply flex items-center;\n}\n\n@media (forced-colors: active) {\n  :host([expanded]) {\n    & .header {\n      border-block-end: none;\n    }\n    & .heading {\n      /** give visual indicator of expanded state since subtle color changes can't be done **/\n      font-weight: bolder;\n    }\n  }\n  :host(:hover),\n  :host(:focus) {\n    & .heading {\n      /** give visual indicator of expandability/click-ability since subtle color changes can't be done **/\n      text-decoration: underline;\n    }\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  VNode,\n} from \"@stencil/core\";\nimport {\n  ConditionalSlotComponent,\n  connectConditionalSlotComponent,\n  disconnectConditionalSlotComponent,\n} from \"../../utils/conditionalSlot\";\nimport {\n  closestElementCrossShadowBoundary,\n  getElementDir,\n  getSlotted,\n  toAriaBoolean,\n} from \"../../utils/dom\";\nimport { CSS_UTILITY } from \"../../utils/resources\";\nimport { getIconScale } from \"../../utils/component\";\nimport { SLOTS, CSS, IDS } from \"./resources\";\nimport { FlipContext, Position, Scale, SelectionMode } from \"../interfaces\";\nimport { RequestedItem } from \"./interfaces\";\n\n/**\n * @slot - A slot for adding custom content, including nested `calcite-accordion-item`s.\n * @slot actions-end - A slot for adding `calcite-action`s or content to the end side of the component's header.\n * @slot actions-start - A slot for adding `calcite-action`s or content to the start side of the component's header.\n */\n@Component({\n  tag: \"calcite-accordion-item\",\n  styleUrl: \"accordion-item.scss\",\n  shadow: true,\n})\nexport class AccordionItem implements ConditionalSlotComponent {\n  //--------------------------------------------------------------------------\n  //\n  //  Public Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, the component is expanded. */\n  @Prop({ reflect: true, mutable: true }) expanded = false;\n\n  /** Specifies heading text for the component. */\n  @Prop() heading: string;\n\n  /** Specifies a description for the component. */\n  @Prop() description: string;\n\n  /** Specifies an icon to display at the start of the component. */\n  @Prop({ reflect: true }) iconStart: string;\n\n  /** Specifies an icon to display at the end of the component. */\n  @Prop({ reflect: true }) iconEnd: string;\n\n  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl: FlipContext;\n\n  /**\n   * Specifies the placement of the icon in the header inherited from the `calcite-accordion`.\n   *\n   * @internal\n   */\n  @Prop() iconPosition: Position;\n\n  /** Specifies the type of the icon in the header inherited from the `calcite-accordion`.\n   *\n   * @internal\n   */\n  @Prop() iconType: \"chevron\" | \"caret\" | \"plus-minus\";\n\n  /**\n   * The containing `accordion` element.\n   *\n   * @internal\n   */\n  @Prop() accordionParent: HTMLCalciteAccordionElement;\n\n  /**\n   * Specifies the size of the component inherited from the `calcite-accordion`.\n   *\n   * @internal\n   */\n  @Prop() scale: Scale;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalAccordionItemSelect: EventEmitter<RequestedItem>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false }) calciteInternalAccordionItemClose: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    connectConditionalSlotComponent(this);\n  }\n\n  disconnectedCallback(): void {\n    disconnectConditionalSlotComponent(this);\n  }\n\n  // --------------------------------------------------------------------------\n  //\n  //  Render Methods\n  //\n  // --------------------------------------------------------------------------\n\n  renderActionsStart(): VNode {\n    const { el } = this;\n    return getSlotted(el, SLOTS.actionsStart) ? (\n      <div class={CSS.actionsStart}>\n        <slot name={SLOTS.actionsStart} />\n      </div>\n    ) : null;\n  }\n\n  renderActionsEnd(): VNode {\n    const { el } = this;\n    return getSlotted(el, SLOTS.actionsEnd) ? (\n      <div class={CSS.actionsEnd}>\n        <slot name={SLOTS.actionsEnd} />\n      </div>\n    ) : null;\n  }\n\n  render(): VNode {\n    const { iconFlipRtl } = this;\n    const dir = getElementDir(this.el);\n    const iconStartEl = this.iconStart ? (\n      <calcite-icon\n        class={CSS.iconStart}\n        flipRtl={iconFlipRtl === \"both\" || iconFlipRtl === \"start\"}\n        icon={this.iconStart}\n        key=\"icon-start\"\n        scale={getIconScale(this.scale)}\n      />\n    ) : null;\n    const iconEndEl = this.iconEnd ? (\n      <calcite-icon\n        class={CSS.iconEnd}\n        flipRtl={iconFlipRtl === \"both\" || iconFlipRtl === \"end\"}\n        icon={this.iconEnd}\n        key=\"icon-end\"\n        scale={getIconScale(this.scale)}\n      />\n    ) : null;\n    const { description } = this;\n    return (\n      <Host>\n        <div\n          class={{\n            [`icon-position--${this.iconPosition}`]: true,\n            [`icon-type--${this.iconType}`]: true,\n          }}\n        >\n          <div class={{ [CSS.header]: true, [CSS_UTILITY.rtl]: dir === \"rtl\" }}>\n            {this.renderActionsStart()}\n            <div\n              aria-controls={IDS.section}\n              aria-expanded={toAriaBoolean(this.expanded)}\n              class={CSS.headerContent}\n              id={IDS.sectionToggle}\n              onClick={this.itemHeaderClickHandler}\n              role=\"button\"\n              tabindex=\"0\"\n            >\n              <div class={CSS.headerContainer}>\n                {iconStartEl}\n                <div class={CSS.headerText}>\n                  <span class={CSS.heading}>{this.heading}</span>\n                  {description ? <span class={CSS.description}>{description}</span> : null}\n                </div>\n                {iconEndEl}\n              </div>\n              <calcite-icon\n                class={CSS.expandIcon}\n                icon={\n                  this.iconType === \"chevron\"\n                    ? \"chevronDown\"\n                    : this.iconType === \"caret\"\n                      ? \"caretDown\"\n                      : this.expanded\n                        ? \"minus\"\n                        : \"plus\"\n                }\n                scale={getIconScale(this.scale)}\n              />\n            </div>\n            {this.renderActionsEnd()}\n          </div>\n          <section aria-labelledby={IDS.sectionToggle} class={CSS.content} id={IDS.section}>\n            <slot />\n          </section>\n        </div>\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"keydown\")\n  keyDownHandler(event: KeyboardEvent): void {\n    if (event.target === this.el) {\n      switch (event.key) {\n        case \" \":\n        case \"Enter\":\n          this.emitRequestedItem();\n          event.preventDefault();\n          break;\n      }\n    }\n  }\n\n  @Listen(\"calciteInternalAccordionChange\", { target: \"body\" })\n  updateActiveItemOnChange(event: CustomEvent): void {\n    const [accordion] = event.composedPath();\n    const parent = closestElementCrossShadowBoundary<HTMLCalciteAccordionElement>(\n      this.el,\n      \"calcite-accordion\",\n    );\n\n    if (accordion !== parent) {\n      return;\n    }\n\n    this.determineActiveItem(parent.selectionMode, event.detail.requestedAccordionItem);\n    event.stopPropagation();\n  }\n\n  @Listen(\"calciteInternalAccordionItemsSync\", { target: \"document\" })\n  accordionItemSyncHandler(event: CustomEvent): void {\n    const [accordion] = event.composedPath();\n    const accordionItem = this.el;\n\n    // we sync with our accordion parent via event only if the item is wrapped within another component's shadow DOM,\n    // otherwise, the accordion parent will sync the item directly\n\n    const willBeSyncedByDirectParent = accordionItem.parentElement === accordion;\n    if (willBeSyncedByDirectParent) {\n      return;\n    }\n\n    const closestAccordionParent = closestElementCrossShadowBoundary<HTMLCalciteAccordionElement>(\n      accordionItem,\n      \"calcite-accordion\",\n    );\n\n    if (accordion !== closestAccordionParent) {\n      return;\n    }\n\n    accordionItem.iconPosition = closestAccordionParent.iconPosition;\n    accordionItem.iconType = closestAccordionParent.iconType;\n    accordionItem.scale = closestAccordionParent.scale;\n    event.stopPropagation();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteAccordionItemElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** handle clicks on item header */\n  private itemHeaderClickHandler = (): void => this.emitRequestedItem();\n\n  private determineActiveItem(\n    selectionMode: SelectionMode,\n    requestedItem: HTMLCalciteAccordionItemElement,\n  ): void {\n    switch (selectionMode) {\n      case \"multiple\":\n        if (this.el === requestedItem) {\n          this.expanded = !this.expanded;\n        }\n        break;\n\n      case \"single\":\n        this.expanded = this.el === requestedItem ? !this.expanded : false;\n        break;\n\n      case \"single-persist\":\n        this.expanded = this.el === requestedItem;\n        break;\n    }\n  }\n\n  private emitRequestedItem(): void {\n    this.calciteInternalAccordionItemSelect.emit({\n      requestedAccordionItem: this.el as HTMLCalciteAccordionItemElement,\n    });\n  }\n}\n"],"version":3}

package/dist/components/calcite-accordion.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.6.0-next.1
+ * v2.6.0-next.2
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client/index.js';
 import { c as createObserver } from './observers.js';

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.6.0-next.1
+ * v2.6.0-next.2
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.6.0-next.1
+ * v2.6.0-next.2
  */
 import { A as ActionGroup, d as defineCustomElement$1 } from './action-group.js';
 

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.6.0-next.1
+ * v2.6.0-next.2
  */
 import { A as ActionMenu, d as defineCustomElement$1 } from './action-menu.js';
 

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.6.0-next.1
+ * v2.6.0-next.2
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';

package/dist/components/calcite-action.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.6.0-next.1
+ * v2.6.0-next.2
  */
 import { A as Action, d as defineCustomElement$1 } from './action.js';