npm - @esri/calcite-components - Versions diffs - 1.0.0-next.532 → 1.0.0-next.535 - Mend

@esri/calcite-components 1.0.0-next.532 → 1.0.0-next.535

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (838) hide show

package/dist/components/calcite-alert.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.532
+ * v1.0.0-next.535
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { s as setRequestedIcon, t as toAriaBoolean, b as getSlotted } from './dom.js';
@@ -23,7 +23,7 @@ const SLOTS = {
   link: "link"
 };
-const alertCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([scale=s]){--calcite-alert-width:40em;--calcite-alert-spacing-token-small:0.5rem;--calcite-alert-spacing-token-large:0.75rem}: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]) .alert-queue-count{margin-inline:0.5rem}:host([scale=s]) .container{--calcite-alert-min-height:3.5rem}:host([scale=s]) .alert-close{padding:0.5rem}:host([scale=m]){--calcite-alert-width:50em;--calcite-alert-spacing-token-small:0.75rem;--calcite-alert-spacing-token-large:1rem}: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]) .alert-queue-count{margin-inline:0.75rem}:host([scale=m]) .container{--calcite-alert-min-height:4.1875rem}:host([scale=l]){--calcite-alert-width:60em;--calcite-alert-spacing-token-small:1rem;--calcite-alert-spacing-token-large:1.25rem}:host([scale=l]) slot[name=title]::slotted(*),:host([scale=l]) *::slotted([slot=title]){-webkit-margin-after:0.25rem;margin-block-end:0.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]) .alert-queue-count{margin-inline:1rem}:host([scale=l]) .container{--calcite-alert-min-height:5.625rem}:host{--calcite-alert-edge-distance:2rem;display:block}:host .container{pointer-events:none;position:fixed;margin-block:0px;margin-inline:auto;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--calcite-ui-foreground-1);opacity:0;--tw-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);border-radius:var(--calcite-border-radius);-webkit-border-before:0px solid transparent;border-block-start:0px solid transparent;-webkit-border-start:1px solid var(--calcite-ui-border-3);border-inline-start:1px solid var(--calcite-ui-border-3);-webkit-border-end:1px solid var(--calcite-ui-border-3);border-inline-end:1px solid var(--calcite-ui-border-3);-webkit-border-after:1px solid var(--calcite-ui-border-3);border-block-end:1px solid var(--calcite-ui-border-3);min-block-size:var(--calcite-alert-min-height);inline-size:var(--calcite-alert-width);max-inline-size:calc(100% - (var(--calcite-alert-edge-distance) * 2 + 2px));max-block-size:0;z-index:101;-webkit-transition:var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out;transition:var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out}:host .container.bottom,:host .container.top{inset-inline-end:0;inset-inline-start:0}:host .container[class*=bottom]{-webkit-transform:translate3d(0, var(--calcite-alert-edge-distance), 0);transform:translate3d(0, var(--calcite-alert-edge-distance), 0);inset-block-end:var(--calcite-alert-edge-distance)}:host .container[class*=top]{-webkit-transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), 0);transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), 0);inset-block-start:var(--calcite-alert-edge-distance)}:host .container[class*=-start]{inset-inline-start:var(--calcite-alert-edge-distance);inset-inline-end:auto}:host .container[class*=-end]{inset-inline-end:var(--calcite-alert-edge-distance);inset-inline-start:auto}:host([calcite-hydrated-hidden]){visibility:hidden !important;pointer-events:none}.container{display:-ms-flexbox;display:flex;inline-size:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.alert-close{outline-color:transparent}.alert-close:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}:host([active]) .container:not(.queued){max-block-size:100%;border-block-start-width:2px;opacity:1;pointer-events:initial}:host([active]) .container:not(.queued)[class*=bottom]{-webkit-transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), inherit);transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), inherit)}:host([active]) .container:not(.queued)[class*=top]{-webkit-transform:translate3d(0, var(--calcite-alert-edge-distance), inherit);transform:translate3d(0, var(--calcite-alert-edge-distance), inherit)}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-ui-text-1)}slot[name=message]::slotted(*),*::slotted([slot=message]){margin:0px;display:inline;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2);-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}slot[name=link]::slotted(*),*::slotted([slot=link]){display:-ms-inline-flexbox;display:inline-flex;color:var(--calcite-ui-text-link)}.alert-content{-webkit-transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;padding-block:var(--calcite-alert-spacing-token-small);padding-inline:var(--calcite-alert-spacing-token-large);-ms-flex:0 0 auto;flex:0 0 auto;overflow-wrap:break-word;background-color:var(--calcite-ui-foreground-1);-ms-flex:1 1 auto;flex:1 1 auto;min-inline-size:0;padding-block:var(--calcite-alert-spacing-token-small);padding-inline:0 var(--calcite-alert-spacing-token-small);border-end-start-radius:var(--calcite-border-radius);border-end-end-radius:var(--calcite-border-radius)}.alert-content:first-of-type:not(:only-child){-webkit-padding-start:var(--calcite-alert-spacing-token-large);padding-inline-start:var(--calcite-alert-spacing-token-large)}.alert-content:only-child{padding:var(--calcite-alert-spacing-token-small)}.alert-icon{-webkit-transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;padding-block:var(--calcite-alert-spacing-token-small);padding-inline:var(--calcite-alert-spacing-token-large);-ms-flex:0 0 auto;flex:0 0 auto;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch;background-color:var(--calcite-ui-foreground-1);padding-block:0px}.alert-close{-webkit-transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;padding-block:var(--calcite-alert-spacing-token-small);padding-inline:var(--calcite-alert-spacing-token-large);-ms-flex:0 0 auto;flex:0 0 auto;cursor:pointer;-ms-flex-item-align:stretch;align-self:stretch;overflow:hidden;border-style:none;background-color:var(--calcite-ui-foreground-1);padding-block:0px;color:var(--calcite-ui-text-3);outline:2px solid transparent;outline-offset:2px;border-end-end-radius:var(--calcite-border-radius)}.alert-close:hover,.alert-close:focus{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1)}.alert-close:active{background-color:var(--calcite-ui-foreground-3)}.alert-queue-count{visibility:hidden;display:-ms-flexbox;display:flex;cursor:default;-ms-flex-align:center;align-items:center;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-item-align:stretch;align-self:stretch;overflow:hidden;background-color:var(--calcite-ui-foreground-1);text-align:center;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-2);opacity:0;-webkit-transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;-webkit-border-start:0px solid transparent;border-inline-start:0px solid transparent;-webkit-border-end:0px solid transparent;border-inline-end:0px solid transparent;border-start-end-radius:0}.alert-queue-count.active{visibility:visible;opacity:1}:host([auto-dismiss])>.alert-queue-count{-webkit-border-end:0px solid transparent;border-inline-end:0px solid transparent}.alert-dismiss-progress{position:absolute;inset-inline:0px;display:block;inline-size:100%;overflow:hidden;inset-block-start:-2px;block-size:2px;z-index:103;border-radius:var(--calcite-border-radius) var(--calcite-border-radius) 0 0}.alert-dismiss-progress:after{position:absolute;inset-block-start:0px;display:block;block-size:2px;content:\"\";background-color:var(--calcite-alert-dismiss-progress-background);z-index:104;inset-inline-end:0}:host([color=blue]) .container{border-block-start-color:var(--calcite-ui-info)}:host([color=blue]) .container .alert-icon{color:var(--calcite-ui-info)}:host([color=red]) .container{border-block-start-color:var(--calcite-ui-danger)}:host([color=red]) .container .alert-icon{color:var(--calcite-ui-danger)}:host([color=yellow]) .container{border-block-start-color:var(--calcite-ui-warning)}:host([color=yellow]) .container .alert-icon{color:var(--calcite-ui-warning)}:host([color=green]) .container{border-block-start-color:var(--calcite-ui-success)}:host([color=green]) .container .alert-icon{color:var(--calcite-ui-success)}:host([auto-dismiss-duration=fast]) .alert-dismiss-progress:after{-webkit-animation:dismissProgress 6000ms ease-out;animation:dismissProgress 6000ms ease-out}:host([auto-dismiss-duration=medium]) .alert-dismiss-progress:after{-webkit-animation:dismissProgress 10000ms ease-out;animation:dismissProgress 10000ms ease-out}:host([auto-dismiss-duration=slow]) .alert-dismiss-progress:after{-webkit-animation:dismissProgress 14000ms ease-out;animation:dismissProgress 14000ms ease-out}@-webkit-keyframes dismissProgress{0%{inline-size:0px;opacity:0.75}100%{inline-size:100%;opacity:1}}@keyframes dismissProgress{0%{inline-size:0px;opacity:0.75}100%{inline-size:100%;opacity:1}}";
+const alertCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([scale=s]){--calcite-alert-width:40em;--calcite-alert-spacing-token-small:0.5rem;--calcite-alert-spacing-token-large:0.75rem}: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]) .alert-queue-count{margin-inline:0.5rem}:host([scale=s]) .container{--calcite-alert-min-height:3.5rem}:host([scale=s]) .alert-close{padding:0.5rem}:host([scale=m]){--calcite-alert-width:50em;--calcite-alert-spacing-token-small:0.75rem;--calcite-alert-spacing-token-large:1rem}: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]) .alert-queue-count{margin-inline:0.75rem}:host([scale=m]) .container{--calcite-alert-min-height:4.1875rem}:host([scale=l]){--calcite-alert-width:60em;--calcite-alert-spacing-token-small:1rem;--calcite-alert-spacing-token-large:1.25rem}:host([scale=l]) slot[name=title]::slotted(*),:host([scale=l]) *::slotted([slot=title]){-webkit-margin-after:0.25rem;margin-block-end:0.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]) .alert-queue-count{margin-inline:1rem}:host([scale=l]) .container{--calcite-alert-min-height:5.625rem}:host{--calcite-alert-edge-distance:2rem;display:block}:host .container{pointer-events:none;position:fixed;margin-block:0px;margin-inline:auto;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;background-color:var(--calcite-ui-foreground-1);opacity:0;--tw-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);border-radius:var(--calcite-border-radius);-webkit-border-before:0px solid transparent;border-block-start:0px solid transparent;border-inline:1px solid var(--calcite-ui-border-3);-webkit-border-after:1px solid var(--calcite-ui-border-3);border-block-end:1px solid var(--calcite-ui-border-3);min-block-size:var(--calcite-alert-min-height);inline-size:var(--calcite-alert-width);max-inline-size:calc(100% - (var(--calcite-alert-edge-distance) * 2 + 2px));max-block-size:0;z-index:101;-webkit-transition:var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out;transition:var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out}:host .container.bottom,:host .container.top{inset-inline-end:0;inset-inline-start:0}:host .container[class*=bottom]{-webkit-transform:translate3d(0, var(--calcite-alert-edge-distance), 0);transform:translate3d(0, var(--calcite-alert-edge-distance), 0);inset-block-end:var(--calcite-alert-edge-distance)}:host .container[class*=top]{-webkit-transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), 0);transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), 0);inset-block-start:var(--calcite-alert-edge-distance)}:host .container[class*=-start]{inset-inline-start:var(--calcite-alert-edge-distance);inset-inline-end:auto}:host .container[class*=-end]{inset-inline-end:var(--calcite-alert-edge-distance);inset-inline-start:auto}:host([calcite-hydrated-hidden]){visibility:hidden !important;pointer-events:none}.container{display:-ms-flexbox;display:flex;inline-size:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.alert-close{outline-color:transparent}.alert-close:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}:host([active]) .container:not(.queued){max-block-size:100%;border-block-start-width:2px;opacity:1;pointer-events:initial}:host([active]) .container:not(.queued)[class*=bottom]{-webkit-transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), inherit);transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), inherit)}:host([active]) .container:not(.queued)[class*=top]{-webkit-transform:translate3d(0, var(--calcite-alert-edge-distance), inherit);transform:translate3d(0, var(--calcite-alert-edge-distance), inherit)}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-ui-text-1)}slot[name=message]::slotted(*),*::slotted([slot=message]){margin:0px;display:inline;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2);-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}slot[name=link]::slotted(*),*::slotted([slot=link]){display:-ms-inline-flexbox;display:inline-flex;color:var(--calcite-ui-text-link)}.alert-content{-webkit-transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;padding-inline:var(--calcite-alert-spacing-token-large);-ms-flex:0 0 auto;flex:0 0 auto;overflow-wrap:break-word;background-color:var(--calcite-ui-foreground-1);-ms-flex:1 1 auto;flex:1 1 auto;min-inline-size:0;padding-block:var(--calcite-alert-spacing-token-small);padding-inline:0 var(--calcite-alert-spacing-token-small);border-end-start-radius:var(--calcite-border-radius);border-end-end-radius:var(--calcite-border-radius)}.alert-content:first-of-type:not(:only-child){-webkit-padding-start:var(--calcite-alert-spacing-token-large);padding-inline-start:var(--calcite-alert-spacing-token-large)}.alert-content:only-child{padding:var(--calcite-alert-spacing-token-small)}.alert-icon{-webkit-transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;padding-block:var(--calcite-alert-spacing-token-small);padding-inline:var(--calcite-alert-spacing-token-large);-ms-flex:0 0 auto;flex:0 0 auto;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch;background-color:var(--calcite-ui-foreground-1);padding-block:0px}.alert-close{-webkit-transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;padding-block:var(--calcite-alert-spacing-token-small);padding-inline:var(--calcite-alert-spacing-token-large);-ms-flex:0 0 auto;flex:0 0 auto;cursor:pointer;-ms-flex-item-align:stretch;align-self:stretch;overflow:hidden;border-style:none;background-color:var(--calcite-ui-foreground-1);padding-block:0px;color:var(--calcite-ui-text-3);outline:2px solid transparent;outline-offset:2px;border-end-end-radius:var(--calcite-border-radius)}.alert-close:hover,.alert-close:focus{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1)}.alert-close:active{background-color:var(--calcite-ui-foreground-3)}.alert-queue-count{visibility:hidden;display:-ms-flexbox;display:flex;cursor:default;-ms-flex-align:center;align-items:center;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-item-align:stretch;align-self:stretch;overflow:hidden;background-color:var(--calcite-ui-foreground-1);text-align:center;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-2);opacity:0;-webkit-transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-inline:0px solid transparent;border-start-end-radius:0}.alert-queue-count.active{visibility:visible;opacity:1}:host([auto-dismiss])>.alert-queue-count{-webkit-border-end:0px solid transparent;border-inline-end:0px solid transparent}.alert-dismiss-progress{position:absolute;inset-inline:0px;display:block;inline-size:100%;overflow:hidden;inset-block-start:-2px;block-size:2px;z-index:103;border-radius:var(--calcite-border-radius) var(--calcite-border-radius) 0 0}.alert-dismiss-progress:after{position:absolute;inset-block-start:0px;display:block;block-size:2px;content:\"\";background-color:var(--calcite-alert-dismiss-progress-background);z-index:104;inset-inline-end:0}:host([color=blue]) .container{border-block-start-color:var(--calcite-ui-info)}:host([color=blue]) .container .alert-icon{color:var(--calcite-ui-info)}:host([color=red]) .container{border-block-start-color:var(--calcite-ui-danger)}:host([color=red]) .container .alert-icon{color:var(--calcite-ui-danger)}:host([color=yellow]) .container{border-block-start-color:var(--calcite-ui-warning)}:host([color=yellow]) .container .alert-icon{color:var(--calcite-ui-warning)}:host([color=green]) .container{border-block-start-color:var(--calcite-ui-success)}:host([color=green]) .container .alert-icon{color:var(--calcite-ui-success)}:host([auto-dismiss-duration=fast]) .alert-dismiss-progress:after{-webkit-animation:dismissProgress 6000ms ease-out;animation:dismissProgress 6000ms ease-out}:host([auto-dismiss-duration=medium]) .alert-dismiss-progress:after{-webkit-animation:dismissProgress 10000ms ease-out;animation:dismissProgress 10000ms ease-out}:host([auto-dismiss-duration=slow]) .alert-dismiss-progress:after{-webkit-animation:dismissProgress 14000ms ease-out;animation:dismissProgress 14000ms ease-out}@-webkit-keyframes dismissProgress{0%{inline-size:0px;opacity:0.75}100%{inline-size:100%;opacity:1}}@keyframes dismissProgress{0%{inline-size:0px;opacity:0.75}100%{inline-size:100%;opacity:1}}";
 const Alert = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -70,9 +70,9 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.queueLength = 0;
     /** is the alert queued */
     this.queued = false;
-    this.setContainerDiv = (el) => {
-      this.containerDiv = el;
-      this.containerDiv.addEventListener("transitionrun", this.transitionRunHandler);
+    this.setContainerEl = (el) => {
+      this.containerEl = el;
+      this.containerEl.addEventListener("transitionstart", this.transitionStartHandler);
     };
     this.autoDismissTimeoutId = null;
     this.trackTimer = Date.now();
@@ -86,18 +86,14 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.determineActiveAlert();
       this.calciteInternalAlertSync.emit({ queue: this.queue });
     };
-    /* *
-    - `transitionrun` fires when the transition is created at the start of any delay and is not cancellable once started.
-    - if there is no transition delay, both `transitionrun` and `transitionstart` are fired at the same time.
-    */
-    this.transitionRunHandler = (event) => {
-      if (event.propertyName === this.activeTransitionProp) {
-        this.active ? this.emitOpenCloseEvent("beforeOpen") : this.emitOpenCloseEvent("beforeClose");
+    this.transitionStartHandler = (event) => {
+      if (event.propertyName === this.activeTransitionProp && event.target === this.containerEl) {
+        this.active ? this.onBeforeOpen() : this.onBeforeClose();
       }
     };
     this.transitionEnd = (event) => {
-      if (event.propertyName === this.activeTransitionProp) {
-        this.active ? this.emitOpenCloseEvent("open") : this.emitOpenCloseEvent("close");
+      if (event.propertyName === this.activeTransitionProp && event.target === this.containerEl) {
+        this.active ? this.onOpen() : this.onClose();
       }
     };
   }
@@ -133,10 +129,9 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
   }
   disconnectedCallback() {
+    var _a;
     window.clearTimeout(this.autoDismissTimeoutId);
-    if (this.containerDiv) {
-      this.containerDiv.removeEventListener("transitionrun", this.transitionRunHandler);
-    }
+    (_a = this.containerEl) === null || _a === void 0 ? void 0 : _a.removeEventListener("transitionstart", this.transitionStartHandler);
   }
   render() {
     const closeButton = (h("button", { "aria-label": this.intlClose, class: "alert-close", onClick: this.closeAlert, ref: (el) => (this.closeButton = el), type: "button" }, h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
@@ -149,7 +144,7 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         container: true,
         queued,
         [placement]: true
-      }, onTransitionEnd: this.transitionEnd, ref: this.setContainerDiv }, requestedIcon ? (h("div", { class: "alert-icon" }, h("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, h("div", { class: "alert-content" }, h("slot", { name: SLOTS.title }), h("slot", { name: SLOTS.message }), h("slot", { name: SLOTS.link })), queueCount, !autoDismiss ? closeButton : null, active && !queued && autoDismiss ? h("div", { class: "alert-dismiss-progress" }) : null)));
+      }, onTransitionEnd: this.transitionEnd, ref: this.setContainerEl }, requestedIcon ? (h("div", { class: "alert-icon" }, h("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, h("div", { class: "alert-content" }, h("slot", { name: SLOTS.title }), h("slot", { name: SLOTS.message }), h("slot", { name: SLOTS.link })), queueCount, !autoDismiss ? closeButton : null, active && !queued && autoDismiss ? h("div", { class: "alert-dismiss-progress" }) : null)));
   }
   // when an alert is opened or closed, update queue and determine active alert
   alertSync(event) {
@@ -206,25 +201,23 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       return;
     }
   }
+  onBeforeOpen() {
+    this.calciteAlertBeforeOpen.emit();
+  }
+  onOpen() {
+    this.calciteAlertOpen.emit();
+  }
+  onBeforeClose() {
+    this.calciteAlertBeforeClose.emit();
+  }
+  onClose() {
+    this.calciteAlertClose.emit();
+  }
   /** remove queued class after animation completes */
   openAlert() {
     window.clearTimeout(this.queueTimeout);
     this.queueTimeout = window.setTimeout(() => (this.queued = false), 300);
   }
-  emitOpenCloseEvent(componentVisibilityState) {
-    const payload = {
-      el: this.el,
-      queue: this.queue
-    };
-    const emitComponentState = {
-      beforeOpen: () => this.calciteAlertBeforeOpen.emit(payload),
-      open: () => this.calciteAlertOpen.emit(payload),
-      beforeClose: () => this.calciteAlertBeforeClose.emit(payload),
-      close: () => this.calciteAlertClose.emit(payload)
-    };
-    (emitComponentState[componentVisibilityState] ||
-      emitComponentState["The component state is unknown."])();
-  }
   get el() { return this; }
   static get watchers() { return {
     "active": ["watchActive"],

package/dist/components/calcite-avatar.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.532
+ * v1.0.0-next.535
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { h as hexToRGB, i as isValidHex } from './utils.js';

package/dist/components/calcite-block-section.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.532
+ * v1.0.0-next.535
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { a as getElementDir, t as toAriaBoolean } from './dom.js';

package/dist/components/calcite-block.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.532
+ * v1.0.0-next.535
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { b as getSlotted, t as toAriaBoolean } from './dom.js';

package/dist/components/calcite-button.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.532
+ * v1.0.0-next.535
  */
 import { B as Button, d as defineCustomElement$1 } from './button.js';

package/dist/components/calcite-card.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.532
+ * v1.0.0-next.535
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { t as toAriaBoolean, b as getSlotted } from './dom.js';

package/dist/components/calcite-checkbox.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.532
+ * v1.0.0-next.535
  */
 import { C as Checkbox, d as defineCustomElement$1 } from './checkbox.js';

package/dist/components/calcite-chip.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.532
+ * v1.0.0-next.535
  */
 import { C as Chip, d as defineCustomElement$1 } from './chip.js';

package/dist/components/calcite-color-picker-hex-input.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.532
+ * v1.0.0-next.535
  */
 import { c as ColorPickerHexInput, d as defineCustomElement$1 } from './color-picker-hex-input.js';

package/dist/components/calcite-color-picker-swatch.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.532
+ * v1.0.0-next.535
  */
 import { C as ColorPickerSwatch, d as defineCustomElement$1 } from './color-picker-swatch.js';

package/dist/components/calcite-color-picker.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.532
+ * v1.0.0-next.535
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as color, d as defineCustomElement$a } from './color-picker-swatch.js';

package/dist/components/calcite-combobox-item-group.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.532
+ * v1.0.0-next.535
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { d as getAncestors, e as getDepth } from './utils2.js';

package/dist/components/calcite-combobox-item.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.532
+ * v1.0.0-next.535
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getElementProp, b as getSlotted } from './dom.js';

package/dist/components/calcite-combobox.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.532
+ * v1.0.0-next.535
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { a as isSymbol, S as Symbol, d as debounce } from './debounce.js';
@@ -360,16 +360,12 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.el.removeEventListener("calciteComboboxOpen", this.toggleOpenEnd);
     };
     this.transitionEnd = (event) => {
-      if (event.propertyName === this.activeTransitionProp) {
+      if (event.propertyName === this.activeTransitionProp && event.target === this.listContainerEl) {
         this.open || this.active ? this.onOpen() : this.onClose();
       }
     };
-    /* *
-    - `transitionrun` fires when the transition is created at the start of any delay and is not cancellable once started.
-    - if there is no transition delay, both `transitionrun` and `transitionstart` are fired at the same time.
-    */
-    this.transitionRunHandler = (event) => {
-      if (event.propertyName === this.activeTransitionProp) {
+    this.transitionStartHandler = (event) => {
+      if (event.propertyName === this.activeTransitionProp && event.target === this.listContainerEl) {
         this.open || this.active ? this.onBeforeOpen() : this.onBeforeClose();
       }
     };
@@ -428,7 +424,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.setListContainerEl = (el) => {
       this.resizeObserver.observe(el);
       this.listContainerEl = el;
-      this.listContainerEl.addEventListener("transitionrun", this.transitionRunHandler);
+      this.listContainerEl.addEventListener("transitionstart", this.transitionStartHandler);
     };
     this.setReferenceEl = (el) => {
       this.referenceEl = el;
@@ -616,15 +612,13 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     updateHostInteraction(this);
   }
   disconnectedCallback() {
-    var _a, _b;
+    var _a, _b, _c;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
     this.destroyPopper();
     disconnectLabel(this);
     disconnectForm(this);
-    if (this.listContainerEl) {
-      this.listContainerEl.removeEventListener("transitionrun", this.transitionRunHandler);
-    }
+    (_c = this.listContainerEl) === null || _c === void 0 ? void 0 : _c.removeEventListener("transitionstart", this.transitionStartHandler);
   }
   selectedItemsHandler() {
     this.internalValueChangeFlag = true;

package/dist/components/calcite-date-picker-day.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.532
+ * v1.0.0-next.535
  */
 import { D as DatePickerDay, d as defineCustomElement$1 } from './date-picker-day.js';

package/dist/components/calcite-date-picker-month-header.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.532
+ * v1.0.0-next.535
  */
 import { D as DatePickerMonthHeader, d as defineCustomElement$1 } from './date-picker-month-header.js';

package/dist/components/calcite-date-picker-month.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.532
+ * v1.0.0-next.535
  */
 import { D as DatePickerMonth, d as defineCustomElement$1 } from './date-picker-month.js';

package/dist/components/calcite-date-picker.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.532
+ * v1.0.0-next.535
  */
 import { D as DatePicker, d as defineCustomElement$1 } from './date-picker.js';

package/dist/components/calcite-dropdown-group.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.532
+ * v1.0.0-next.535
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getElementProp } from './dom.js';

package/dist/components/calcite-dropdown-item.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.532
+ * v1.0.0-next.535
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as getElementProp, t as toAriaBoolean } from './dom.js';

package/dist/components/calcite-dropdown.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.532
+ * v1.0.0-next.535
  */
 import { D as Dropdown, d as defineCustomElement$1 } from './dropdown.js';

package/dist/components/calcite-fab.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.532
+ * v1.0.0-next.535
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { f as focusElement } from './dom.js';

package/dist/components/calcite-filter.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.532
+ * v1.0.0-next.535
  */
 import { F as Filter, d as defineCustomElement$1 } from './filter.js';

package/dist/components/calcite-flow.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.532
+ * v1.0.0-next.535
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { c as createObserver } from './observers.js';

package/dist/components/calcite-graph.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.532
+ * v1.0.0-next.535
  */
 import { G as Graph, d as defineCustomElement$1 } from './graph.js';

package/dist/components/calcite-handle.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.532
+ * v1.0.0-next.535
  */
 import { H as Handle, d as defineCustomElement$1 } from './handle.js';

package/dist/components/calcite-icon.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.532
+ * v1.0.0-next.535
  */
 import { I as Icon, d as defineCustomElement$1 } from './icon.js';

package/dist/components/calcite-inline-editable.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.532
+ * v1.0.0-next.535
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { g as getElementProp, b as getSlotted } from './dom.js';

package/dist/components/calcite-input-date-picker.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.532
+ * v1.0.0-next.535
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Build } from '@stencil/core/internal/client';
 import { T as TEXT, g as getLocaleData, d as defineCustomElement$8 } from './date-picker.js';
@@ -33,8 +33,10 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.calciteDatePickerChange = createEvent(this, "calciteDatePickerChange", 7);
     this.calciteDatePickerRangeChange = createEvent(this, "calciteDatePickerRangeChange", 7);
     this.calciteInputDatePickerChange = createEvent(this, "calciteInputDatePickerChange", 7);
-    this.calciteInternalInputDatePickerOpen = createEvent(this, "calciteInternalInputDatePickerOpen", 7);
-    this.calciteInternalInputDatePickerClose = createEvent(this, "calciteInternalInputDatePickerClose", 7);
+    this.calciteInputDatePickerBeforeClose = createEvent(this, "calciteInputDatePickerBeforeClose", 7);
+    this.calciteInputDatePickerClose = createEvent(this, "calciteInputDatePickerClose", 7);
+    this.calciteInputDatePickerBeforeOpen = createEvent(this, "calciteInputDatePickerBeforeOpen", 7);
+    this.calciteInputDatePickerOpen = createEvent(this, "calciteInputDatePickerOpen", 7);
     //--------------------------------------------------------------------------
     //
     //  Public Properties
@@ -96,6 +98,10 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.layout = "horizontal";
     this.focusedInput = "start";
     this.activeTransitionProp = "opacity";
+    this.setContainerEl = (el) => {
+      this.containerEl = el;
+      this.containerEl.addEventListener("transitionstart", this.transitionStartHandler);
+    };
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -107,11 +113,14 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
         ? filterComputedPlacements(flipPlacements, el)
         : null;
     };
+    this.transitionStartHandler = (event) => {
+      if (event.propertyName === this.activeTransitionProp && event.target === this.containerEl) {
+        this.active ? this.onBeforeOpen() : this.onBeforeClose();
+      }
+    };
     this.transitionEnd = (event) => {
-      if (event.propertyName === this.activeTransitionProp) {
-        this.active
-          ? this.calciteInternalInputDatePickerOpen.emit()
-          : this.calciteInternalInputDatePickerClose.emit();
+      if (event.propertyName === this.activeTransitionProp && event.target === this.containerEl) {
+        this.active ? this.onOpen() : this.onClose();
       }
     };
     this.setStartInput = (el) => {
@@ -311,6 +320,8 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.onMaxChanged(this.max);
   }
   disconnectedCallback() {
+    var _a;
+    (_a = this.containerEl) === null || _a === void 0 ? void 0 : _a.removeEventListener("transitionstart", this.transitionStartHandler);
     this.destroyPopper();
     disconnectLabel(this);
     disconnectForm(this);
@@ -335,7 +346,7 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
         ["calendar-picker-wrapper--end"]: this.focusedInput === "end",
         [CSS$1.animation]: true,
         [CSS$1.animationActive]: this.active
-      }, onTransitionEnd: this.transitionEnd }, h("calcite-date-picker", { activeRange: this.focusedInput, endAsDate: this.endAsDate, headingLevel: this.headingLevel, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, intlYear: this.intlYear, locale: this.locale, max: this.max, maxAsDate: this.maxAsDate, min: this.min, minAsDate: this.minAsDate, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, startAsDate: this.startAsDate, tabIndex: 0, valueAsDate: this.valueAsDate }))), this.range && this.layout === "horizontal" && (h("div", { class: "horizontal-arrow-container" }, h("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: "s" }))), this.range && this.layout === "vertical" && this.scale !== "s" && (h("div", { class: "vertical-arrow-container" }, h("calcite-icon", { icon: "arrow-down", scale: "s" }))), this.range && (h("div", { class: "input-wrapper", ref: this.setEndWrapper }, h("calcite-input", { class: {
+      }, onTransitionEnd: this.transitionEnd, ref: this.setContainerEl }, h("calcite-date-picker", { activeRange: this.focusedInput, endAsDate: this.endAsDate, headingLevel: this.headingLevel, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, intlYear: this.intlYear, locale: this.locale, max: this.max, maxAsDate: this.maxAsDate, min: this.min, minAsDate: this.minAsDate, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, startAsDate: this.startAsDate, tabIndex: 0, valueAsDate: this.valueAsDate }))), this.range && this.layout === "horizontal" && (h("div", { class: "horizontal-arrow-container" }, h("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: "s" }))), this.range && this.layout === "vertical" && this.scale !== "s" && (h("div", { class: "vertical-arrow-container" }, h("calcite-icon", { icon: "arrow-down", scale: "s" }))), this.range && (h("div", { class: "input-wrapper", ref: this.setEndWrapper }, h("calcite-input", { class: {
         input: true,
         "border-top-color-one": this.layout === "vertical" && this.range
       }, disabled: disabled, icon: "calendar", "number-button-type": "none", onCalciteInputInput: this.inputInput, onCalciteInternalInputBlur: this.inputBlur, onCalciteInternalInputFocus: this.endInputFocus, placeholder: (_b = this.localeData) === null || _b === void 0 ? void 0 : _b.placeholder, readOnly: readOnly, ref: this.setEndInput, scale: this.scale, type: "text", value: formattedEndDate }))))), h(HiddenFormInputSlot, { component: this })));
@@ -351,6 +362,18 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   onLabelClick() {
     this.setFocus();
   }
+  onBeforeOpen() {
+    this.calciteInputDatePickerBeforeOpen.emit();
+  }
+  onOpen() {
+    this.calciteInputDatePickerOpen.emit();
+  }
+  onBeforeClose() {
+    this.calciteInputDatePickerBeforeClose.emit();
+  }
+  onClose() {
+    this.calciteInputDatePickerClose.emit();
+  }
   getModifiers() {
     const flipModifier = {
       name: "flip",

package/dist/components/calcite-input-message.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.532
+ * v1.0.0-next.535
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { s as setRequestedIcon, g as getElementProp } from './dom.js';

package/dist/components/calcite-input-number.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.532
+ * v1.0.0-next.535
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { T as TEXT$1, b as getSlotted, s as setRequestedIcon, g as getElementProp, a as getElementDir, C as CSS_UTILITY } from './dom.js';

package/dist/components/calcite-input-time-picker.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.532
+ * v1.0.0-next.535
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { g as guid } from './guid.js';

package/dist/components/calcite-input.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.532
+ * v1.0.0-next.535
  */
 import { I as Input, d as defineCustomElement$1 } from './input.js';