@esri/calcite-components 3.0.0-next.98 → 3.0.0

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

@@ -1,30 +1,28 @@
 import { c as x } from "../../chunks/runtime.js";
-import { html as s } from "lit";
-import { LitElement as g, createEvent as m, safeClassMap as n } from "@arcgis/lumina";
+import { html as n } from "lit";
+import { LitElement as g, createEvent as m, safeClassMap as s } from "@arcgis/lumina";
 import { h as b, s as f } from "../../chunks/dom.js";
-import { c as y, s as v, a as w } from "../../chunks/loadable.js";
-import { t as T, E as G } from "../../chunks/ExpandToggle.js";
-import { c as C } from "../../chunks/observers.js";
-import { u as E } from "../../chunks/useT9n.js";
-import { css as L } from "@lit/reactive-element/css-tag.js";
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v3.0.0-next.98
-*/
+import { c as y } from "../../chunks/loadable.js";
+import { t as v, E as w } from "../../chunks/ExpandToggle.js";
+import { c as T } from "../../chunks/observers.js";
+import { u as G } from "../../chunks/useT9n.js";
+import { css as E } from "@lit/reactive-element/css-tag.js";
+/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v3.0.0 */
 const l = {
   actionGroupEnd: "action-group--end",
   container: "container"
 }, k = {
   expandTooltip: "expand-tooltip"
-}, O = L`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{display:block}@keyframes in{0%{opacity:0}to{opacity:1}}:host{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:var(--calcite-action-pad-corner-radius, .125rem);background:transparent}:host([expanded][layout=vertical]) .container{max-inline-size:var(--calcite-action-pad-expanded-max-width, auto)}:host([layout=vertical]) ::slotted(calcite-action-group:not(:last-of-type)){border-block-end-width:1px}.container{display:inline-flex;flex-direction:column;overflow-y:auto;--tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);--tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);gap:var(--calcite-action-pad-items-space, 0);border-radius:calc(var(--calcite-action-pad-corner-radius, .125rem) * 2);background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-1))}.action-group--bottom{flex-grow:1;justify-content:flex-end;padding-block-end:0px}:host([layout=horizontal]) .container{flex-direction:row}:host([layout=horizontal]) .container .action-group--bottom{padding:0}:host([layout=horizontal]) .container ::slotted(calcite-action-group:not(:last-of-type)){border-inline-end-width:1px}:host([hidden]){display:none}[hidden]{display:none}`;
-class $ extends g {
+}, C = E`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{display:block}@keyframes in{0%{opacity:0}to{opacity:1}}:host{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:var(--calcite-action-pad-corner-radius, .125rem);background:transparent}:host([expanded][layout=vertical]) .container{max-inline-size:var(--calcite-action-pad-expanded-max-width, auto)}:host([layout=vertical]) ::slotted(calcite-action-group:not(:last-of-type)){border-block-end-width:1px}.container{display:inline-flex;flex-direction:column;overflow:hidden;--tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);--tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);gap:var(--calcite-action-pad-items-space, 0);border-radius:calc(var(--calcite-action-pad-corner-radius, .125rem) * 2);background-color:var(--calcite-action-background-color, var(--calcite-color-foreground-1))}.action-group--bottom{flex-grow:1;justify-content:flex-end;padding-block-end:0px}:host([layout=horizontal]) .container{flex-direction:row}:host([layout=horizontal]) .container .action-group--bottom{padding:0}:host([layout=horizontal]) .container ::slotted(calcite-action-group:not(:last-of-type)){border-inline-end-width:1px}:host([hidden]){display:none}[hidden]{display:none}`;
+class O extends g {
   // #endregion
   // #region Lifecycle
   constructor() {
-    super(), this.mutationObserver = C("mutation", () => this.updateGroups()), this.toggleExpand = () => {
+    super(), this.mutationObserver = T("mutation", () => this.updateGroups()), this.toggleExpand = () => {
       this.expanded = !this.expanded, this.calciteActionPadToggle.emit();
-    }, this.expandDisabled = !1, this.expanded = !1, this.layout = "vertical", this.messages = E(), this.overlayPositioning = "absolute", this.scale = "m", this.calciteActionPadToggle = m({ cancelable: !1 }), this.listen("calciteActionMenuOpen", this.actionMenuOpenHandler);
+    }, this.expandDisabled = !1, this.expanded = !1, this.layout = "vertical", this.messages = G(), this.overlayPositioning = "absolute", this.scale = "m", this.calciteActionPadToggle = m({ cancelable: !1 }), this.listen("calciteActionMenuOpen", this.actionMenuOpenHandler);
   }
   static {
     this.properties = { expandTooltip: 16, actionsEndGroupLabel: 1, expandDisabled: 7, expanded: 7, layout: 3, messageOverrides: 0, overlayPositioning: 3, position: 3, scale: 3 };
@@ -33,7 +31,7 @@ class $ extends g {
     this.shadowRootOptions = { mode: "open", delegatesFocus: !0 };
   }
   static {
-    this.styles = O;
+    this.styles = C;
   }
   // #endregion
   // #region Public Methods
@@ -45,13 +43,11 @@ class $ extends g {
     super.connectedCallback(), this.mutationObserver?.observe(this.el, { childList: !0, subtree: !0 });
   }
   async load() {
-    v(this);
   }
   willUpdate(t) {
-    t.has("expanded") && this.hasUpdated && T({ el: this.el, expanded: this.expanded }), t.has("layout") && (this.hasUpdated || this.layout !== "vertical") && this.updateGroups();
+    t.has("expanded") && this.hasUpdated && v({ el: this.el, expanded: this.expanded }), t.has("layout") && (this.hasUpdated || this.layout !== "vertical") && this.updateGroups();
   }
   loaded() {
-    w(this);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.mutationObserver?.disconnect();
@@ -83,14 +79,14 @@ class $ extends g {
   // #endregion
   // #region Rendering
   renderBottomActionGroup() {
-    const { expanded: t, expandDisabled: e, messages: o, el: r, position: c, toggleExpand: d, scale: a, layout: p, actionsEndGroupLabel: h, overlayPositioning: u } = this, i = e ? null : G({ collapseLabel: o.collapseLabel, collapseText: o.collapse, el: r, expandLabel: o.expandLabel, expandText: o.expand, expanded: t, position: c, scale: a, toggle: d, tooltip: this.expandTooltip });
-    return i ? s`<calcite-action-group class=${n(l.actionGroupEnd)} .label=${h} .layout=${p} .overlayPositioning=${u} .scale=${a}><slot name=${k.expandTooltip} @slotchange=${this.handleTooltipSlotChange}></slot>${i}</calcite-action-group>` : null;
+    const { expanded: t, expandDisabled: e, messages: o, el: r, position: c, toggleExpand: d, scale: a, layout: p, actionsEndGroupLabel: h, overlayPositioning: u } = this, i = e ? null : w({ collapseLabel: o.collapseLabel, collapseText: o.collapse, el: r, expandLabel: o.expandLabel, expandText: o.expand, expanded: t, position: c, scale: a, toggle: d, tooltip: this.expandTooltip });
+    return i ? n`<calcite-action-group class=${s(l.actionGroupEnd)} .label=${h} .layout=${p} .overlayPositioning=${u} .scale=${a}><slot name=${k.expandTooltip} @slotchange=${this.handleTooltipSlotChange}></slot>${i}</calcite-action-group>` : null;
   }
   render() {
-    return s`<div class=${n(l.container)}><slot @slotchange=${this.handleDefaultSlotChange}></slot>${this.renderBottomActionGroup()}</div>`;
+    return n`<div class=${s(l.container)}><slot @slotchange=${this.handleDefaultSlotChange}></slot>${this.renderBottomActionGroup()}</div>`;
   }
 }
-x("calcite-action-pad", $);
+x("calcite-action-pad", O);
 export {
-  $ as ActionPad
+  O as ActionPad
 };

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

@@ -1,21 +1,19 @@
-import { c as x } from "../../chunks/runtime.js";
-import { ref as y } from "lit-html/directives/ref.js";
+import { c as k } from "../../chunks/runtime.js";
+import { ref as x } from "lit-html/directives/ref.js";
 import { keyed as m } from "lit-html/directives/keyed.js";
-import { html as n } from "lit";
-import { LitElement as w, createEvent as l, stringOrBoolean as z, safeClassMap as o } from "@arcgis/lumina";
-import { h as T, a as A, v as E } from "../../chunks/dom.js";
+import { html as a } from "lit";
+import { LitElement as y, createEvent as l, stringOrBoolean as w, safeClassMap as o } from "@arcgis/lumina";
+import { h as z, a as T, v as A } from "../../chunks/dom.js";
 import { g as p } from "../../chunks/component.js";
-import { c as $, s as F, a as S } from "../../chunks/loadable.js";
-import { N as B } from "../../chunks/locale.js";
-import { o as f } from "../../chunks/openCloseComponent.js";
+import { c as $ } from "../../chunks/loadable.js";
+import { N as E } from "../../chunks/locale.js";
+import { o as F } from "../../chunks/openCloseComponent.js";
 import { K as q } from "../../chunks/resources4.js";
-import { u as O } from "../../chunks/useT9n.js";
-import { css as I } from "@lit/reactive-element/css-tag.js";
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v3.0.0-next.98
-*/
+import { u as S } from "../../chunks/useT9n.js";
+import { css as O } from "@lit/reactive-element/css-tag.js";
+/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v3.0.0 */
 const c = {
   slow: 14e3,
   medium: 1e4,
@@ -25,29 +23,20 @@ const c = {
   title: "title",
   message: "message",
   link: "link"
-}, i = {
+}, s = {
   actionsEnd: "actions-end",
   close: "close",
   container: "container",
-  containerBottom: "container--bottom",
-  containerBottomEnd: "container--bottom-end",
-  containerBottomStart: "container--bottom-start",
   containerActive: "container--active",
-  containerTop: "container--top",
-  containerTopEnd: "container--top-end",
-  containerTopStart: "container--top-start",
-  content: "content",
-  contentContainer: "content-container",
   dismissProgress: "dismiss-progress",
-  footer: "footer",
   icon: "icon",
   containerEmbedded: "container--embedded",
   queueCount: "queue-count",
   queueCountActive: "queue-count--active",
   textContainer: "text-container",
   focused: "focused"
-}, D = 300;
-class H {
+}, B = 300;
+class I {
   constructor() {
     this.registeredElements = [], this.queueTimeoutId = null;
   }
@@ -74,8 +63,8 @@ class H {
     }
   }
   unregisterElement(e) {
-    const { registeredElements: t } = this, s = t.indexOf(e);
-    s !== -1 && t.splice(s, 1), e.active = !1, this.updateAlerts();
+    const { registeredElements: t } = this, i = t.indexOf(e);
+    i !== -1 && t.splice(i, 1), e.active = !1, this.updateAlerts();
   }
   // --------------------------------------------------------------------------
   //
@@ -84,20 +73,20 @@ class H {
   // --------------------------------------------------------------------------
   updateAlerts() {
     window.clearTimeout(this.queueTimeoutId), this.queueTimeoutId = null, this.registeredElements.forEach((e, t) => {
-      e.openAlertCount = this.registeredElements.length, t === 0 ? this.queueTimeoutId = window.setTimeout(() => e.active = !0, D) : e.active = !1;
+      e.openAlertCount = this.registeredElements.length, t === 0 ? this.queueTimeoutId = window.setTimeout(() => e.active = !0, B) : e.active = !1;
     });
   }
 }
-const L = I`:host{display:block;inline-size:var(--calcite-alert-width)}.container{pointer-events:none;position:fixed;z-index:var(--calcite-z-index-toast);margin-inline:auto;margin-block:0px;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:min-content;align-items:center;justify-content:center;text-align:start;opacity:0;--tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);--tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--calcite-alert-shadow, var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow));background-color:var(--calcite-alert-background-color, var(--calcite-color-foreground-1));border-radius:var(--calcite-alert-corner-radius, var(--calcite-border-radius));border-block-start:0 solid transparent;border-inline:1px solid var(--calcite-color-border-3);border-block-end:1px solid var(--calcite-color-border-3);max-inline-size:calc(100% - var(--calcite-alert-offset-size, 2rem) * 2);transition:opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88),all var(--calcite-animation-timing) ease-in-out}.container--bottom,.container--top{inset-inline-end:0;inset-inline-start:0}.container[class*=bottom]{transform:translate3d(0,var(--calcite-alert-offset-size, 2rem),0);inset-block-end:var(--calcite-alert-offset-size, 2rem)}.container[class*=top]{transform:translate3d(0,calc(-1 * var(--calcite-alert-offset-size, 2rem)),0);inset-block-start:var(--calcite-alert-offset-size, 2rem)}.container[class*=start]{inset-inline-start:var(--calcite-alert-offset-size, 2rem);inset-inline-end:auto}.container[class*=end]{inset-inline-end:var(--calcite-alert-offset-size, 2rem);inset-inline-start:auto}.icon{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;margin-block:auto;margin-inline-end:auto}.close{display:flex;cursor:pointer;align-items:center;justify-content:flex-end;align-self:stretch;border-style:none;background-color:transparent;color:var(--calcite-color-text-3);outline:2px solid transparent;outline-offset:2px;-webkit-appearance:none;border-start-end-radius:var(--calcite-alert-corner-radius, var(--calcite-border-radius));border-end-end-radius:var(--calcite-alert-corner-radius, var(--calcite-border-radius));outline-color:transparent}.close:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.close:hover,.close:focus{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-2)}.close:active{background-color:var(--calcite-color-foreground-3)}.queue-count{visibility:hidden;display:flex;min-inline-size:min-content;cursor:default;align-items:center;justify-content:space-around;align-self:stretch;overflow:hidden;text-align:center;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2);opacity:0;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;border-inline:0 solid transparent;border-start-end-radius:0}.queue-count--active{visibility:visible;opacity:1}.dismiss-progress{position:absolute;display:block;inline-size:100%;overflow:hidden;inset-inline:0;inset-block-start:-2px;block-size:2px;border-radius:var(--calcite-border-radius) var(--calcite-border-radius) 0 0}.dismiss-progress:after{position:absolute;inset-block-start:0px;display:block;block-size:2px;content:"";background-color:var(--calcite-color-transparent-tint);inset-inline-end:0}.actions-end{display:flex;align-self:stretch}.text-container{box-sizing:border-box;display:flex;min-inline-size:0px;flex:1 1 auto;flex-direction:column;overflow-wrap:break-word}.footer{position:relative;display:flex;inline-size:auto;justify-content:flex-end;align-self:stretch;padding-block-start:1px;block-size:inherit}:host([scale=s]) slot[name=title]::slotted(*),:host([scale=s]) *::slotted([slot=title]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=s]) slot[name=message]::slotted(*),:host([scale=s]) *::slotted([slot=message]){font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) slot[name=link]::slotted(*),:host([scale=s]) *::slotted([slot=link]){font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) .queue-count{margin-inline:.5rem}:host([scale=s]) .container{--calcite-internal-alert-min-height: 3.5rem;inline-size:var(--calcite-alert-width, 40em)}:host([scale=s]) .close{padding:.75rem}:host([scale=s]) .icon{padding-inline-start:.75rem}:host([scale=s]) .text-container{padding-block:.5rem;padding-inline:.75rem .5rem}:host([scale=m]) slot[name=title]::slotted(*),:host([scale=m]) *::slotted([slot=title]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=m]) slot[name=message]::slotted(*),:host([scale=m]) *::slotted([slot=message]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) slot[name=link]::slotted(*),:host([scale=m]) *::slotted([slot=link]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) .queue-count{margin-inline:.75rem}:host([scale=m]) .container{--calcite-internal-alert-min-height: 4.1875rem;inline-size:var(--calcite-alert-width, 50em)}:host([scale=m]) .close{padding:1rem}:host([scale=m]) .icon{padding-inline-start:1rem}:host([scale=m]) .text-container{padding-block:.75rem;padding-inline:1rem .75rem}:host([scale=l]) slot[name=title]::slotted(*),:host([scale=l]) *::slotted([slot=title]){margin-block-end:.25rem;font-size:var(--calcite-font-size-1);line-height:1.375}:host([scale=l]) slot[name=message]::slotted(*),:host([scale=l]) *::slotted([slot=message]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) slot[name=link]::slotted(*),:host([scale=l]) *::slotted([slot=link]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) .queue-count{margin-inline:1rem}:host([scale=l]) .container{--calcite-internal-alert-min-height: 5.625rem;inline-size:var(--calcite-alert-width, 60em)}:host([scale=l]) .close{padding:1.25rem}:host([scale=l]) .icon{padding-inline-start:1.25rem}:host([scale=l]) .text-container{padding-block:1rem;padding-inline:1.25rem 1rem}:host([open]) .container--active{border-block-start-width:2px;opacity:1;pointer-events:initial}:host([open]) .container--active[class*=bottom]{transform:translate3d(0,calc(-1 * var(--calcite-alert-offset-size, 2rem)),inherit)}:host([open]) .container--active[class*=top]{transform:translate3d(0,var(--calcite-alert-offset-size, 2rem),inherit)}:host([auto-close])>.queue-count{border-inline-end:0 solid transparent}slot[name=title]::slotted(*),*::slotted([slot=title]){font-size:var(--calcite-font-size-0);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}slot[name=message]::slotted(*),*::slotted([slot=message]){margin:0;display:inline;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-normal);margin-inline-end:.5rem;color:var(--calcite-color-text-2)}slot[name=link]::slotted(*),*::slotted([slot=link]){display:inline-flex;color:var(--calcite-color-text-link)}:host([kind=brand]) .container{border-block-start-color:var(--calcite-color-brand)}:host([kind=brand]) .container .icon{color:var(--calcite-color-brand)}:host([kind=info]) .container{border-block-start-color:var(--calcite-color-status-info)}:host([kind=info]) .container .icon{color:var(--calcite-color-status-info)}:host([kind=danger]) .container{border-block-start-color:var(--calcite-color-status-danger)}:host([kind=danger]) .container .icon{color:var(--calcite-color-status-danger)}:host([kind=success]) .container{border-block-start-color:var(--calcite-color-status-success)}:host([kind=success]) .container .icon{color:var(--calcite-color-status-success)}:host([kind=warning]) .container{border-block-start-color:var(--calcite-color-status-warning)}:host([kind=warning]) .container .icon{color:var(--calcite-color-status-warning)}:host([auto-close-duration=fast]) .dismiss-progress:after{animation:dismissProgress 6s ease-out}:host(:hover[auto-close-duration=fast]) .dismiss-progress:after,:host(:focus[auto-close-duration=fast]) .dismiss-progress:after{animation-play-state:paused}:host([auto-close-duration=medium]) .dismiss-progress:after{animation:dismissProgress 10s ease-out}:host(:hover[auto-close-duration=medium]) .dismiss-progress:after,:host(:focus[auto-close-duration=medium]) .dismiss-progress:after{animation-play-state:paused}:host([auto-close-duration=slow]) .dismiss-progress:after{animation:dismissProgress 14s ease-out}:host(:hover[auto-close-duration=slow]) .dismiss-progress:after,:host(:focus[auto-close-duration=slow]) .dismiss-progress:after{animation-play-state:paused}.container.focused .dismiss-progress:after{animation-play-state:paused}@keyframes dismissProgress{0%{inline-size:0px;opacity:.75}to{inline-size:100%;opacity:1}}.container--embedded{position:absolute}:host([hidden]){display:none}[hidden]{display:none}:host([calcite-hydrated-hidden]){visibility:hidden!important;pointer-events:none}`, a = new H();
-class M extends w {
+const D = O`:host{display:block;inline-size:var(--calcite-alert-width)}.container{pointer-events:none;position:fixed;z-index:var(--calcite-z-index-toast);margin-inline:auto;margin-block:0px;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:min-content;align-items:center;justify-content:center;text-align:start;opacity:0;--tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);--tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--calcite-alert-shadow, var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow));background-color:var(--calcite-alert-background-color, var(--calcite-color-foreground-1));border-radius:var(--calcite-alert-corner-radius, var(--calcite-border-radius));border-block-start:0 solid transparent;border-inline:1px solid var(--calcite-color-border-3);border-block-end:1px solid var(--calcite-color-border-3);max-inline-size:calc(100% - var(--calcite-alert-offset-size, 2rem) * 2);transition:opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88),all var(--calcite-animation-timing) ease-in-out}.container--bottom,.container--top{inset-inline-end:0;inset-inline-start:0}.container[class*=bottom]{transform:translate3d(0,var(--calcite-alert-offset-size, 2rem),0);inset-block-end:var(--calcite-alert-offset-size, 2rem)}.container[class*=top]{transform:translate3d(0,calc(-1 * var(--calcite-alert-offset-size, 2rem)),0);inset-block-start:var(--calcite-alert-offset-size, 2rem)}.container[class*=start]{inset-inline-start:var(--calcite-alert-offset-size, 2rem);inset-inline-end:auto}.container[class*=end]{inset-inline-end:var(--calcite-alert-offset-size, 2rem);inset-inline-start:auto}.icon{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;margin-block:auto;margin-inline-end:auto}.close{display:flex;cursor:pointer;align-items:center;justify-content:flex-end;align-self:stretch;border-style:none;background-color:transparent;color:var(--calcite-color-text-3);outline:2px solid transparent;outline-offset:2px;-webkit-appearance:none;border-start-end-radius:var(--calcite-alert-corner-radius, var(--calcite-border-radius));border-end-end-radius:var(--calcite-alert-corner-radius, var(--calcite-border-radius));outline-color:transparent}.close:focus{outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.close:hover,.close:focus{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-2)}.close:active{background-color:var(--calcite-color-foreground-3)}.queue-count{visibility:hidden;display:flex;min-inline-size:min-content;cursor:default;align-items:center;justify-content:space-around;align-self:stretch;overflow:hidden;text-align:center;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-2);opacity:0;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;border-inline:0 solid transparent;border-start-end-radius:0}.queue-count--active{visibility:visible;opacity:1}.dismiss-progress{position:absolute;display:block;inline-size:100%;overflow:hidden;inset-inline:0;inset-block-start:-2px;block-size:2px;border-radius:var(--calcite-border-radius) var(--calcite-border-radius) 0 0}.dismiss-progress:after{position:absolute;inset-block-start:0px;display:block;block-size:2px;content:"";background-color:var(--calcite-color-transparent-tint);inset-inline-end:0}.actions-end{display:flex;align-self:stretch}.text-container{box-sizing:border-box;display:flex;min-inline-size:0px;flex:1 1 auto;flex-direction:column;overflow-wrap:break-word}.footer{position:relative;display:flex;inline-size:auto;justify-content:flex-end;align-self:stretch;padding-block-start:1px;block-size:inherit}:host([scale=s]) slot[name=title]::slotted(*),:host([scale=s]) *::slotted([slot=title]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=s]) slot[name=message]::slotted(*),:host([scale=s]) *::slotted([slot=message]){font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) slot[name=link]::slotted(*),:host([scale=s]) *::slotted([slot=link]){font-size:var(--calcite-font-size--2);line-height:1.375}:host([scale=s]) .queue-count{margin-inline:.5rem}:host([scale=s]) .container{--calcite-internal-alert-min-height: 3.5rem;inline-size:var(--calcite-alert-width, 40em)}:host([scale=s]) .close{padding:.75rem}:host([scale=s]) .icon{padding-inline-start:.75rem}:host([scale=s]) .text-container{padding-block:.5rem;padding-inline:.75rem .5rem}:host([scale=m]) slot[name=title]::slotted(*),:host([scale=m]) *::slotted([slot=title]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=m]) slot[name=message]::slotted(*),:host([scale=m]) *::slotted([slot=message]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) slot[name=link]::slotted(*),:host([scale=m]) *::slotted([slot=link]){font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) .queue-count{margin-inline:.75rem}:host([scale=m]) .container{--calcite-internal-alert-min-height: 4.1875rem;inline-size:var(--calcite-alert-width, 50em)}:host([scale=m]) .close{padding:1rem}:host([scale=m]) .icon{padding-inline-start:1rem}:host([scale=m]) .text-container{padding-block:.75rem;padding-inline:1rem .75rem}:host([scale=l]) slot[name=title]::slotted(*),:host([scale=l]) *::slotted([slot=title]){margin-block-end:.25rem;font-size:var(--calcite-font-size-1);line-height:1.375}:host([scale=l]) slot[name=message]::slotted(*),:host([scale=l]) *::slotted([slot=message]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) slot[name=link]::slotted(*),:host([scale=l]) *::slotted([slot=link]){font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) .queue-count{margin-inline:1rem}:host([scale=l]) .container{--calcite-internal-alert-min-height: 5.625rem;inline-size:var(--calcite-alert-width, 60em)}:host([scale=l]) .close{padding:1.25rem}:host([scale=l]) .icon{padding-inline-start:1.25rem}:host([scale=l]) .text-container{padding-block:1rem;padding-inline:1.25rem 1rem}:host([open]) .container--active{border-block-start-width:2px;opacity:1;pointer-events:initial}:host([open]) .container--active[class*=bottom]{transform:translate3d(0,calc(-1 * var(--calcite-alert-offset-size, 2rem)),inherit)}:host([open]) .container--active[class*=top]{transform:translate3d(0,var(--calcite-alert-offset-size, 2rem),inherit)}:host([auto-close])>.queue-count{border-inline-end:0 solid transparent}slot[name=title]::slotted(*),*::slotted([slot=title]){font-size:var(--calcite-font-size-0);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}slot[name=message]::slotted(*),*::slotted([slot=message]){margin:0;display:inline;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-normal);margin-inline-end:.5rem;color:var(--calcite-color-text-2)}slot[name=link]::slotted(*),*::slotted([slot=link]){display:inline-flex;color:var(--calcite-color-text-link)}:host([kind=brand]) .container{border-block-start-color:var(--calcite-color-brand)}:host([kind=brand]) .container .icon{color:var(--calcite-color-brand)}:host([kind=info]) .container{border-block-start-color:var(--calcite-color-status-info)}:host([kind=info]) .container .icon{color:var(--calcite-color-status-info)}:host([kind=danger]) .container{border-block-start-color:var(--calcite-color-status-danger)}:host([kind=danger]) .container .icon{color:var(--calcite-color-status-danger)}:host([kind=success]) .container{border-block-start-color:var(--calcite-color-status-success)}:host([kind=success]) .container .icon{color:var(--calcite-color-status-success)}:host([kind=warning]) .container{border-block-start-color:var(--calcite-color-status-warning)}:host([kind=warning]) .container .icon{color:var(--calcite-color-status-warning)}:host([auto-close-duration=fast]) .dismiss-progress:after{animation:dismissProgress 6s ease-out}:host(:hover[auto-close-duration=fast]) .dismiss-progress:after,:host(:focus[auto-close-duration=fast]) .dismiss-progress:after{animation-play-state:paused}:host([auto-close-duration=medium]) .dismiss-progress:after{animation:dismissProgress 10s ease-out}:host(:hover[auto-close-duration=medium]) .dismiss-progress:after,:host(:focus[auto-close-duration=medium]) .dismiss-progress:after{animation-play-state:paused}:host([auto-close-duration=slow]) .dismiss-progress:after{animation:dismissProgress 14s ease-out}:host(:hover[auto-close-duration=slow]) .dismiss-progress:after,:host(:focus[auto-close-duration=slow]) .dismiss-progress:after{animation-play-state:paused}.container.focused .dismiss-progress:after{animation-play-state:paused}@keyframes dismissProgress{0%{inline-size:0px;opacity:.75}to{inline-size:100%;opacity:1}}.container--embedded{position:absolute}:host([hidden]){display:none}[hidden]{display:none}:host([calcite-hydrated-hidden]){visibility:hidden!important;pointer-events:none}`, n = new I();
+class H extends y {
   constructor() {
-    super(...arguments), this.autoCloseTimeoutId = null, this.openTransitionProp = "opacity", this.totalHoverTime = 0, this.totalOpenTime = 0, this.hasEndActions = !1, this.isFocused = !1, this.numberStringFormatter = new B(), this.active = !1, this.autoClose = !1, this.autoCloseDuration = "medium", this.embedded = !1, this.iconFlipRtl = !1, this.kind = "brand", this.messages = O(), this.open = !1, this.openAlertCount = 0, this.placement = "bottom", this.queue = "last", this.scale = "m", this.calciteAlertBeforeClose = l({ cancelable: !1 }), this.calciteAlertBeforeOpen = l({ cancelable: !1 }), this.calciteAlertClose = l({ cancelable: !1 }), this.calciteAlertOpen = l({ cancelable: !1 });
+    super(...arguments), this.autoCloseTimeoutId = null, this.transitionProp = "opacity", this.totalHoverTime = 0, this.totalOpenTime = 0, this.hasEndActions = !1, this.isFocused = !1, this.numberStringFormatter = new E(), this.active = !1, this.autoClose = !1, this.autoCloseDuration = "medium", this.embedded = !1, this.iconFlipRtl = !1, this.kind = "brand", this.messages = S(), this.open = !1, this.openAlertCount = 0, this.placement = "bottom", this.queue = "last", this.scale = "m", this.calciteAlertBeforeClose = l({ cancelable: !1 }), this.calciteAlertBeforeOpen = l({ cancelable: !1 }), this.calciteAlertClose = l({ cancelable: !1 }), this.calciteAlertOpen = l({ cancelable: !1 });
   }
   static {
-    this.properties = { hasEndActions: 16, isFocused: 16, numberStringFormatter: 16, active: 5, autoClose: 7, autoCloseDuration: 3, embedded: 5, icon: [3, { converter: z }], iconFlipRtl: 7, kind: 3, label: 1, messageOverrides: 0, numberingSystem: 3, open: 7, openAlertCount: 9, placement: 3, queue: 3, scale: 3 };
+    this.properties = { hasEndActions: 16, isFocused: 16, numberStringFormatter: 16, active: 5, autoClose: 7, autoCloseDuration: 3, embedded: 5, icon: [3, { converter: w }], iconFlipRtl: 7, kind: 3, label: 1, messageOverrides: 0, numberingSystem: 3, open: 7, openAlertCount: 9, placement: 3, queue: 3, scale: 3 };
   }
   static {
-    this.styles = L;
+    this.styles = D;
   }
   // #endregion
   // #region Public Methods
@@ -107,42 +96,40 @@ class M extends w {
    *     `@returns` {Promise<void>}
    */
   async setFocus() {
-    await $(this), T(this.el);
+    await $(this), z(this.el);
   }
   // #endregion
   // #region Lifecycle
   connectedCallback() {
-    super.connectedCallback(), this.open && a.registerElement(this.el), this.numberStringFormatter.numberFormatOptions = {
+    super.connectedCallback(), this.open && n.registerElement(this.el), this.numberStringFormatter.numberFormatOptions = {
       locale: this.messages._lang,
       numberingSystem: this.numberingSystem,
       signDisplay: "always"
     };
   }
   async load() {
-    F(this), this.open && f(this);
   }
   willUpdate(e) {
-    e.has("active") && (this.hasUpdated || this.active !== !1) && this.handleActiveChange(), e.has("open") && (this.hasUpdated || this.open !== !1) && this.openHandler(), e.has("autoCloseDuration") && (this.hasUpdated || this.autoCloseDuration !== "medium") && this.updateDuration(), e.has("queue") && (this.hasUpdated || this.queue !== "last") && this.handleQueueChange(), e.has("numberingSystem") && this.numberingSystemChange(), e.has("messages") && this.effectiveLocaleChange();
+    e.has("open") && (this.hasUpdated || this.open !== !1) && this.openHandler(), e.has("active") && (this.hasUpdated || this.active !== !1) && this.handleActiveChange(), e.has("autoCloseDuration") && (this.hasUpdated || this.autoCloseDuration !== "medium") && this.updateDuration(), e.has("queue") && (this.hasUpdated || this.queue !== "last") && this.handleQueueChange(), e.has("numberingSystem") && this.numberingSystemChange(), e.has("messages") && this.effectiveLocaleChange();
   }
   loaded() {
-    S(this);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), a.unregisterElement(this.el), this.clearAutoCloseTimeout(), this.embedded = !1;
+    super.disconnectedCallback(), n.unregisterElement(this.el), this.clearAutoCloseTimeout(), this.embedded = !1;
   }
   // #endregion
   // #region Private Methods
   handleActiveChange() {
-    this.clearAutoCloseTimeout(), this.active && this.autoClose && !this.autoCloseTimeoutId && (this.initialOpenTime = Date.now(), this.autoCloseTimeoutId = window.setTimeout(() => this.closeAlert(), c[this.autoCloseDuration]));
+    F(this), this.clearAutoCloseTimeout(), this.active && this.autoClose && !this.autoCloseTimeoutId && (this.initialOpenTime = Date.now(), this.autoCloseTimeoutId = window.setTimeout(() => this.closeAlert(), c[this.autoCloseDuration]));
   }
   openHandler() {
-    f(this), this.open ? a.registerElement(this.el) : a.unregisterElement(this.el);
+    this.open ? n.registerElement(this.el) : n.unregisterElement(this.el);
   }
   updateDuration() {
     this.autoClose && this.autoCloseTimeoutId && (this.clearAutoCloseTimeout(), this.autoCloseTimeoutId = window.setTimeout(() => this.closeAlert(), c[this.autoCloseDuration]));
   }
   handleQueueChange() {
-    this.open && (a.unregisterElement(this.el), a.registerElement(this.el));
+    this.open && (n.unregisterElement(this.el), n.registerElement(this.el));
   }
   handleKeyBoardFocus() {
     this.isFocused = !0, this.handleFocus();
@@ -187,7 +174,7 @@ class M extends w {
     this.calciteAlertClose.emit();
   }
   actionsEndSlotChangeHandler(e) {
-    this.hasEndActions = A(e);
+    this.hasEndActions = T(e);
   }
   handleMouseOver() {
     this.isHovered = !0, this.handleFocus();
@@ -205,33 +192,33 @@ class M extends w {
   // #endregion
   // #region Rendering
   render() {
-    const { open: e, autoClose: t, label: s, placement: b, active: d, openAlertCount: v } = this, C = t ? "alert" : "alertdialog", u = !e, h = E(q, this.icon, this.kind), k = v > 1;
-    return this.el.inert = u, this.el.ariaLabel = s, this.el.toggleAttribute("calcite-hydrated-hidden", u), this.el.role = C, n`<div class=${o({
-      [i.container]: !0,
-      [i.containerActive]: d,
-      [`${i.container}--${b}`]: !0,
-      [i.containerEmbedded]: this.embedded,
-      [i.focused]: this.isFocused
-    })} @pointerenter=${this.autoClose && this.autoCloseTimeoutId ? this.handleMouseOver : null} @pointerleave=${this.autoClose ? this.handleMouseLeave : null} ${y(this.setTransitionEl)}>${h && this.renderIcon(h) || ""}<div class=${o(i.textContainer)} @focusin=${this.autoClose && this.autoCloseTimeoutId ? this.handleKeyBoardFocus : null} @focusout=${this.autoClose ? this.handleKeyBoardBlur : null}><slot name=${r.title}></slot><slot name=${r.message}></slot><slot name=${r.link}></slot></div>${this.renderActionsEnd()}${k ? this.renderQueueCount() : null}${this.renderCloseButton()}${e && d && t ? n`<div class=${o(i.dismissProgress)}></div>` : null}</div>`;
+    const { open: e, autoClose: t, label: i, placement: g, active: d, openAlertCount: b } = this, v = t ? "alert" : "alertdialog", u = !e, h = A(q, this.icon, this.kind), C = b > 1;
+    return this.el.inert = u, this.el.ariaLabel = i, this.el.toggleAttribute("calcite-hydrated-hidden", u), this.el.role = v, a`<div class=${o({
+      [s.container]: !0,
+      [s.containerActive]: d,
+      [`${s.container}--${g}`]: !0,
+      [s.containerEmbedded]: this.embedded,
+      [s.focused]: this.isFocused
+    })} @pointerenter=${this.autoClose && this.autoCloseTimeoutId ? this.handleMouseOver : null} @pointerleave=${this.autoClose ? this.handleMouseLeave : null} ${x(this.setTransitionEl)}>${h && this.renderIcon(h) || ""}<div class=${o(s.textContainer)} @focusin=${this.autoClose && this.autoCloseTimeoutId ? this.handleKeyBoardFocus : null} @focusout=${this.autoClose ? this.handleKeyBoardBlur : null}><slot name=${r.title}></slot><slot name=${r.message}></slot><slot name=${r.link}></slot></div>${this.renderActionsEnd()}${C ? this.renderQueueCount() : null}${this.renderCloseButton()}${e && d && t ? a`<div class=${o(s.dismissProgress)}></div>` : null}</div>`;
   }
   renderCloseButton() {
-    return m("close", n`<button .ariaLabel=${this.messages.close} class=${o(i.close)} @click=${this.closeAlert} @focusin=${this.autoClose ? this.handleKeyBoardFocus : null} @focusout=${this.autoClose ? this.handleKeyBoardBlur : null} type=button><calcite-icon icon=x .scale=${p(this.scale)}></calcite-icon></button>`);
+    return m("close", a`<button .ariaLabel=${this.messages.close} class=${o(s.close)} @click=${this.closeAlert} @focusin=${this.autoClose ? this.handleKeyBoardFocus : null} @focusout=${this.autoClose ? this.handleKeyBoardBlur : null} type=button><calcite-icon icon=x .scale=${p(this.scale)}></calcite-icon></button>`);
   }
   renderQueueCount() {
-    const { openAlertCount: e } = this, t = e > 2 ? e - 1 : 1, s = this.numberStringFormatter.numberFormatter.format(t);
-    return m("queue-count", n`<div class=${o({
-      [i.queueCount]: !0,
-      [i.queueCountActive]: e > 1
-    })}><calcite-chip .label=${s} .scale=${this.scale} .value=${s}>${s}</calcite-chip></div>`);
+    const { openAlertCount: e } = this, t = e > 2 ? e - 1 : 1, i = this.numberStringFormatter.numberFormatter.format(t);
+    return m("queue-count", a`<div class=${o({
+      [s.queueCount]: !0,
+      [s.queueCountActive]: e > 1
+    })}><calcite-chip .label=${i} .scale=${this.scale} .value=${i}>${i}</calcite-chip></div>`);
   }
   renderActionsEnd() {
-    return n`<div class=${o(i.actionsEnd)}><slot name=${r.actionsEnd} @slotchange=${this.actionsEndSlotChangeHandler}></slot></div>`;
+    return a`<div class=${o(s.actionsEnd)}><slot name=${r.actionsEnd} @slotchange=${this.actionsEndSlotChangeHandler}></slot></div>`;
   }
   renderIcon(e) {
-    return n`<div class=${o(i.icon)}><calcite-icon .flipRtl=${this.iconFlipRtl} .icon=${e} .scale=${p(this.scale)}></calcite-icon></div>`;
+    return a`<div class=${o(s.icon)}><calcite-icon .flipRtl=${this.iconFlipRtl} .icon=${e} .scale=${p(this.scale)}></calcite-icon></div>`;
   }
 }
-x("calcite-alert", M);
+k("calcite-alert", H);
 export {
-  M as Alert
+  H as Alert
 };

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

@@ -63,7 +63,8 @@ export declare class Autocomplete extends LitElement {
     /** When `true`, a busy indicator is displayed. */
     loading: boolean;
     /**
-     * Specifies the maximum length of text for the component's value.
+     * When the component resides in a form,
+     * specifies the maximum length of text for the component's value.
      *
      * @mdn [maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength)
      */
@@ -71,7 +72,8 @@ export declare class Autocomplete extends LitElement {
     /** Use this property to override individual strings used by the component. */
     messageOverrides?: typeof this.messages._overrides;
     /**
-     * Specifies the minimum length of text for the component's value.
+     * When the component resides in a form,
+     * specifies the minimum length of text for the component's value.
      *
      * @mdn [minlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength)
      */
@@ -95,7 +97,8 @@ export declare class Autocomplete extends LitElement {
      */
     overlayPositioning: OverlayPositioning;
     /**
-     * Specifies a regex pattern the component's `value` must match for validation.
+     * When the component resides in a form,
+     * specifies a regular expression (regex) pattern the component's `value` must match for validation.
      * Read the native attribute's documentation on MDN for more info.
      *
      * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern)
@@ -121,7 +124,10 @@ export declare class Autocomplete extends LitElement {
      * @mdn [readOnly](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly)
      */
     readOnly: boolean;
-    /** When `true`, the component must have a value in order for the form to submit. */
+    /**
+     * When `true` and the component resides in a form,
+     * the component must have a value in order for the form to submit.
+     */
     required: boolean;
     /** Specifies the size of the component. */
     scale: Scale;