@esri/solutions-components 0.6.23 → 0.6.25

package/dist/components/alert.js

@@ -4,19 +4,21 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { j as slotChangeHasAssignedElement, s as setRequestedIcon, t as toAriaBoolean, a as getSlotted } from './dom.js';
+import { j as slotChangeHasAssignedElement, t as toAriaBoolean, a as getSlotted, s as setRequestedIcon } from './dom.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
 import { c as connectLocalized, d as disconnectLocalized, n as numberStringFormatter } from './locale2.js';
 import { o as onToggleOpenCloseComponent } from './openCloseComponent.js';
 import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n.js';
 import { K as KindIcons } from './resources2.js';
+import { g as getBreakpoints } from './responsive.js';
+import { c as createObserver } from './observers.js';
 import { d as defineCustomElement$2 } from './chip.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.8.0
+ * v1.9.0
  */
 const DURATIONS = {
   slow: 14000,
@@ -31,12 +33,27 @@ const SLOTS = {
 };
 const CSS = {
   actionsEnd: "actions-end",
+  close: "close",
   container: "container",
-  close: "alert-close",
-  slottedInShell: "slotted-in-shell",
+  containerBottom: "container--bottom",
+  containerBottomEnd: "container--bottom-end",
+  containerBottomStart: "container--bottom-start",
+  containerQueued: "container--queued",
+  containerTop: "container--top",
+  containerTopEnd: "container--top-end",
+  containerTopStart: "container--top-start",
+  content: "content",
+  contentContainer: "content-container",
+  dismissProgress: "dismiss-progress",
+  footer: "footer",
+  icon: "icon",
+  containerSlottedInShell: "container--slotted-in-shell",
+  queueCount: "queue-count",
+  queueCountActive: "queue-count--active",
+  textContainer: "text-container",
 };
 
-const alertCss = ":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]){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;z-index:var(--calcite-app-z-index-toast);margin-block:0px;margin-inline:auto;display:flex;align-items: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);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);border-block-start:0px solid transparent;border-inline: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;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]{transform:translate3d(0, var(--calcite-alert-edge-distance), 0);inset-block-end:var(--calcite-alert-edge-distance)}:host .container[class*=top]{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:flex;inline-size:100%;align-items:center;justify-content:center}.alert-close{outline-color:transparent}.alert-close:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}:host([open]) .container:not(.queued){max-block-size:100%;border-block-start-width:2px;opacity:1;pointer-events:initial}:host([open]) .container:not(.queued)[class*=bottom]{transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), inherit)}:host([open]) .container:not(.queued)[class*=top]{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);margin-inline-end:0.5rem}slot[name=link]::slotted(*),*::slotted([slot=link]){display:inline-flex;color:var(--calcite-ui-text-link)}.alert-content{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;padding-inline:var(--calcite-alert-spacing-token-large);flex:0 0 auto;display:flex;flex-direction:column;overflow-wrap:break-word;background-color:var(--calcite-ui-foreground-1);flex:1 1 0;min-inline-size:0;padding-block:var(--calcite-alert-spacing-token-small);padding-inline:0 var(--calcite-alert-spacing-token-small);border-radius:var(--calcite-border-radius)}.alert-content:first-of-type:not(:only-child){padding-inline-start:var(--calcite-alert-spacing-token-large)}.alert-content:only-child{padding:var(--calcite-alert-spacing-token-small)}.alert-icon{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);flex:0 0 auto;display:flex;align-items:center;align-self:stretch;background-color:var(--calcite-ui-foreground-1);padding-block:0px;border-start-start-radius:var(--calcite-border-radius);border-end-start-radius:var(--calcite-border-radius)}.alert-close{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);flex:0 0 auto;cursor:pointer;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);border-start-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:open{background-color:var(--calcite-ui-foreground-3)}.alert-queue-count{visibility:hidden;display:flex;cursor:default;align-items:center;justify-content:space-around;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;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-close])>.alert-queue-count{border-inline-end:0px solid transparent}.alert-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}.alert-dismiss-progress:after{position:absolute;inset-block-start:0px;display:block;block-size:2px;content:\"\";background-color:var(--calcite-alert-dismiss-progress-background);inset-inline-end:0}.actions-end{display:flex;align-self:stretch}:host([kind=brand]) .container{border-block-start-color:var(--calcite-ui-brand)}:host([kind=brand]) .container .alert-icon{color:var(--calcite-ui-brand)}:host([kind=info]) .container{border-block-start-color:var(--calcite-ui-info)}:host([kind=info]) .container .alert-icon{color:var(--calcite-ui-info)}:host([kind=danger]) .container{border-block-start-color:var(--calcite-ui-danger)}:host([kind=danger]) .container .alert-icon{color:var(--calcite-ui-danger)}:host([kind=success]) .container{border-block-start-color:var(--calcite-ui-success)}:host([kind=success]) .container .alert-icon{color:var(--calcite-ui-success)}:host([kind=warning]) .container{border-block-start-color:var(--calcite-ui-warning)}:host([kind=warning]) .container .alert-icon{color:var(--calcite-ui-warning)}:host([auto-close-duration=fast]) .alert-dismiss-progress:after{animation:dismissProgress 6000ms ease-out}:host(:hover[auto-close-duration=fast]) .alert-dismiss-progress:after{animation-play-state:paused}:host([auto-close-duration=medium]) .alert-dismiss-progress:after{animation:dismissProgress 10000ms ease-out}:host(:hover[auto-close-duration=medium]) .alert-dismiss-progress:after{animation-play-state:paused}:host([auto-close-duration=slow]) .alert-dismiss-progress:after{animation:dismissProgress 14000ms ease-out}:host(:hover[auto-close-duration=slow]) .alert-dismiss-progress:after{animation-play-state:paused}@keyframes dismissProgress{0%{inline-size:0px;opacity:0.75}100%{inline-size:100%;opacity:1}}.container.slotted-in-shell{position:absolute}:host([hidden]){display:none}[hidden]{display:none}";
+const alertCss = "/**\n * Do not edit directly\n * Generated on Thu, 11 May 2023 18:56:13 GMT\n */\n/* mixins & extensions */\n/* helper to properly scale internal durations */\n/**\n* Currently only used in Checkbox.\n*/\n/**\n* CSS Custom Properties\n*\n* These properties can be overridden using the component's tag as selector.\n*\n* @prop --calcite-alert-width: Specifies the width of the component.\n*/\n:host {\n  --calcite-alert-edge-distance: 2rem;\n  display: block;\n}\n\n.container {\n  pointer-events: none;\n  position: fixed;\n  z-index: var(--calcite-app-z-index-toast);\n  margin-inline: auto;\n  margin-block: 0px;\n  box-sizing: border-box;\n  display: flex;\n  inline-size: 100%;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--calcite-ui-foreground-1);\n  text-align: start;\n  opacity: 0;\n  --tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);\n  --tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n  container: responsive-container/inline-size;\n  border-radius: var(--calcite-border-radius);\n  border-block-start: 0 solid transparent;\n  border-inline: 1px solid var(--calcite-ui-border-3);\n  border-block-end: 1px solid var(--calcite-ui-border-3);\n  inline-size: var(--calcite-alert-width);\n  max-inline-size: calc(100% - var(--calcite-alert-edge-distance) * 2);\n  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;\n}\n.container--bottom, .container--top {\n  inset-inline-end: 0;\n  inset-inline-start: 0;\n}\n.container[class*=bottom] {\n  transform: translate3d(0, var(--calcite-alert-edge-distance), 0);\n  inset-block-end: var(--calcite-alert-edge-distance);\n}\n.container[class*=top] {\n  transform: translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), 0);\n  inset-block-start: var(--calcite-alert-edge-distance);\n}\n.container[class*=start] {\n  inset-inline-start: var(--calcite-alert-edge-distance);\n  inset-inline-end: auto;\n}\n.container[class*=end] {\n  inset-inline-end: var(--calcite-alert-edge-distance);\n  inset-inline-start: auto;\n}\n\n.content {\n  box-sizing: border-box;\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;\n  padding-block: var(--calcite-alert-spacing-token-small);\n  padding-inline: var(--calcite-alert-spacing-token-large) var(--calcite-alert-spacing-token-small);\n}\n\n.icon {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  padding: 0px;\n  margin-block-end: var(--calcite-alert-spacing-token-large);\n  margin-inline-end: auto;\n}\n\n.close {\n  display: flex;\n  cursor: pointer;\n  align-items: flex-start;\n  justify-content: flex-end;\n  align-self: flex-start;\n  border-style: none;\n  background-color: transparent;\n  color: var(--calcite-ui-text-3);\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  -webkit-appearance: none;\n  padding: var(--calcite-alert-spacing-token-large);\n  outline-color: transparent;\n}\n.close:focus {\n  outline: 2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));\n  outline-offset: calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          );\n}\n.close:hover, .close:focus {\n  background-color: var(--calcite-ui-foreground-2);\n  color: var(--calcite-ui-text-1);\n}\n.close:active {\n  background-color: var(--calcite-ui-foreground-3);\n}\n\n.queue-count {\n  visibility: hidden;\n  display: flex;\n  cursor: default;\n  align-items: center;\n  justify-content: space-around;\n  align-self: stretch;\n  overflow: hidden;\n  background-color: var(--calcite-ui-foreground-1);\n  text-align: center;\n  font-weight: var(--calcite-font-weight-medium);\n  color: var(--calcite-ui-text-2);\n  opacity: 0;\n  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;\n  border-inline: 0 solid transparent;\n  border-start-end-radius: 0;\n}\n.queue-count--active {\n  visibility: visible;\n  opacity: 1;\n}\n\n.dismiss-progress {\n  position: absolute;\n  display: block;\n  inline-size: 100%;\n  overflow: hidden;\n  inset-inline: 0;\n  inset-block-start: -2px;\n  block-size: 2px;\n  border-radius: var(--calcite-border-radius) var(--calcite-border-radius) 0 0;\n}\n.dismiss-progress:after {\n  position: absolute;\n  inset-block-start: 0px;\n  display: block;\n  block-size: 2px;\n  content: \"\";\n  background-color: var(--calcite-alert-dismiss-progress-background);\n  inset-inline-end: 0;\n}\n\n.actions-end {\n  display: flex;\n  align-self: stretch;\n}\n\n.text-container {\n  display: flex;\n  min-inline-size: 0px;\n  flex: 1 1 0%;\n  flex-direction: column;\n  overflow-wrap: break-word;\n}\n\n.content-container {\n  display: flex;\n  flex: 1 1 0%;\n}\n\n.footer {\n  position: relative;\n  order: 1;\n  display: flex;\n  inline-size: 100%;\n  justify-content: flex-end;\n  padding-block-start: 1px;\n  block-size: var(--calcite-alert-footer-height);\n}\n.footer:before {\n  content: \"\";\n  position: absolute;\n  inset-block-start: 0px;\n  inset-inline: var(--calcite-alert-footer-divider-gap);\n  border-block-start: 1px solid var(--calcite-ui-border-3);\n}\n\n:host([scale=s]) {\n  --calcite-alert-width: 40em;\n  --calcite-alert-spacing-token-small: 0.5rem;\n  --calcite-alert-spacing-token-large: 0.75rem;\n  --calcite-alert-footer-height: 2rem;\n  --calcite-alert-footer-divider-gap: 0.125rem;\n}\n:host([scale=s]) slot[name=title]::slotted(*),\n:host([scale=s]) *::slotted([slot=title]) {\n  font-size: var(--calcite-font-size--1);\n  line-height: 1.375;\n}\n:host([scale=s]) slot[name=message]::slotted(*),\n:host([scale=s]) *::slotted([slot=message]) {\n  font-size: var(--calcite-font-size--2);\n  line-height: 1.375;\n}\n:host([scale=s]) slot[name=link]::slotted(*),\n:host([scale=s]) *::slotted([slot=link]) {\n  font-size: var(--calcite-font-size--2);\n  line-height: 1.375;\n}\n:host([scale=s]) .queue-count {\n  margin-inline: 0.5rem;\n}\n:host([scale=s]) .container {\n  --calcite-alert-min-height: 3.5rem;\n}\n\n:host([scale=m]) {\n  --calcite-alert-width: 50em;\n  --calcite-alert-spacing-token-small: 0.75rem;\n  --calcite-alert-spacing-token-large: 1rem;\n  --calcite-alert-footer-height: 3rem;\n  --calcite-alert-footer-divider-gap: 0.25rem;\n}\n:host([scale=m]) slot[name=title]::slotted(*),\n:host([scale=m]) *::slotted([slot=title]) {\n  font-size: var(--calcite-font-size-0);\n  line-height: 1.375;\n}\n:host([scale=m]) slot[name=message]::slotted(*),\n:host([scale=m]) *::slotted([slot=message]) {\n  font-size: var(--calcite-font-size--1);\n  line-height: 1.375;\n}\n:host([scale=m]) slot[name=link]::slotted(*),\n:host([scale=m]) *::slotted([slot=link]) {\n  font-size: var(--calcite-font-size--1);\n  line-height: 1.375;\n}\n:host([scale=m]) .queue-count {\n  margin-inline: 0.75rem;\n}\n:host([scale=m]) .container {\n  --calcite-alert-min-height: 4.1875rem;\n}\n\n:host([scale=l]) {\n  --calcite-alert-width: 60em;\n  --calcite-alert-spacing-token-small: 1rem;\n  --calcite-alert-spacing-token-large: 1.25rem;\n  --calcite-alert-footer-height: 4rem;\n  --calcite-alert-footer-divider-gap: 0.5rem;\n}\n:host([scale=l]) slot[name=title]::slotted(*),\n:host([scale=l]) *::slotted([slot=title]) {\n  margin-block-end: 0.25rem;\n  font-size: var(--calcite-font-size-1);\n  line-height: 1.375;\n}\n:host([scale=l]) slot[name=message]::slotted(*),\n:host([scale=l]) *::slotted([slot=message]) {\n  font-size: var(--calcite-font-size-0);\n  line-height: 1.375;\n}\n:host([scale=l]) slot[name=link]::slotted(*),\n:host([scale=l]) *::slotted([slot=link]) {\n  font-size: var(--calcite-font-size-0);\n  line-height: 1.375;\n}\n:host([scale=l]) .queue-count {\n  margin-inline: 1rem;\n}\n:host([scale=l]) .container {\n  --calcite-alert-min-height: 5.625rem;\n}\n\n:host([open]) .container:not(.container--queued) {\n  border-block-start-width: 2px;\n  opacity: 1;\n  pointer-events: initial;\n}\n:host([open]) .container:not(.container--queued)[class*=bottom] {\n  transform: translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), inherit);\n}\n:host([open]) .container:not(.container--queued)[class*=top] {\n  transform: translate3d(0, var(--calcite-alert-edge-distance), inherit);\n}\n\n:host([auto-close]) > .queue-count {\n  border-inline-end: 0 solid transparent;\n}\n\nslot[name=title]::slotted(*),\n*::slotted([slot=title]) {\n  font-size: var(--calcite-font-size-0);\n  line-height: 1.375;\n  font-weight: var(--calcite-font-weight-medium);\n  color: var(--calcite-ui-text-1);\n}\n\nslot[name=message]::slotted(*),\n*::slotted([slot=message]) {\n  margin: 0px;\n  display: inline;\n  font-size: var(--calcite-font-size--1);\n  line-height: 1.375;\n  font-weight: var(--calcite-font-weight-normal);\n  color: var(--calcite-ui-text-2);\n  margin-inline-end: 0.5rem;\n}\n\nslot[name=link]::slotted(*),\n*::slotted([slot=link]) {\n  display: inline-flex;\n  color: var(--calcite-ui-text-link);\n}\n\n:host([kind=brand]) .container {\n  border-block-start-color: var(--calcite-ui-brand);\n}\n:host([kind=brand]) .container .icon {\n  color: var(--calcite-ui-brand);\n}\n\n:host([kind=info]) .container {\n  border-block-start-color: var(--calcite-ui-info);\n}\n:host([kind=info]) .container .icon {\n  color: var(--calcite-ui-info);\n}\n\n:host([kind=danger]) .container {\n  border-block-start-color: var(--calcite-ui-danger);\n}\n:host([kind=danger]) .container .icon {\n  color: var(--calcite-ui-danger);\n}\n\n:host([kind=success]) .container {\n  border-block-start-color: var(--calcite-ui-success);\n}\n:host([kind=success]) .container .icon {\n  color: var(--calcite-ui-success);\n}\n\n:host([kind=warning]) .container {\n  border-block-start-color: var(--calcite-ui-warning);\n}\n:host([kind=warning]) .container .icon {\n  color: var(--calcite-ui-warning);\n}\n\n:host([auto-close-duration=fast]) .dismiss-progress:after {\n  animation: dismissProgress 6000ms ease-out;\n}\n\n:host(:hover[auto-close-duration=fast]) .dismiss-progress:after {\n  animation-play-state: paused;\n}\n\n:host([auto-close-duration=medium]) .dismiss-progress:after {\n  animation: dismissProgress 10000ms ease-out;\n}\n\n:host(:hover[auto-close-duration=medium]) .dismiss-progress:after {\n  animation-play-state: paused;\n}\n\n:host([auto-close-duration=slow]) .dismiss-progress:after {\n  animation: dismissProgress 14000ms ease-out;\n}\n\n:host(:hover[auto-close-duration=slow]) .dismiss-progress:after {\n  animation-play-state: paused;\n}\n\n@keyframes dismissProgress {\n  0% {\n    inline-size: 0px;\n    opacity: 0.75;\n  }\n  100% {\n    inline-size: 100%;\n    opacity: 1;\n  }\n}\n/**\n * Conditional styles for when Alert is slotted in Shell\n */\n.container--slotted-in-shell {\n  position: absolute;\n}\n\n@container responsive-container (min-width: 476px) {\n  .content {\n    flex-direction: row;\n  }\n  .close {\n    align-items: center;\n    align-self: stretch;\n  }\n  .icon {\n    justify-content: center;\n    margin-inline-end: 0;\n    margin-block: 0;\n    padding-inline-end: var(--calcite-alert-spacing-token-large);\n  }\n}\n@container responsive-container (min-width: 768px) {\n  .close {\n    align-self: stretch;\n  }\n  .footer {\n    inline-size: auto;\n    align-self: stretch;\n    order: initial;\n    block-size: inherit;\n  }\n  .footer:before {\n    content: none;\n  }\n  .icon {\n    padding-inline: var(--calcite-alert-spacing-token-large) 0;\n  }\n}\n:host([hidden]) {\n  display: none;\n}\n\n[hidden] {\n  display: none;\n}\n\n:host([calcite-hydrated-hidden]) {\n  visibility: hidden !important;\n  pointer-events: none;\n}";
 
 const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
   constructor() {
@@ -50,6 +67,7 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
     this.calciteInternalAlertSync = createEvent(this, "calciteInternalAlertSync", 6);
     this.calciteInternalAlertRegister = createEvent(this, "calciteInternalAlertRegister", 6);
     this.autoCloseTimeoutId = null;
+    this.resizeObserver = createObserver("resize", (entries) => (this.responsiveContainerWidth = entries[0].contentRect.width));
     this.totalOpenTime = 0;
     this.totalHoverTime = 0;
     this.openTransitionProp = "opacity";
@@ -97,13 +115,13 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
     this.messages = undefined;
     this.messageOverrides = undefined;
     this.slottedInShell = undefined;
-    this.effectiveLocale = "";
     this.defaultMessages = undefined;
+    this.effectiveLocale = "";
     this.hasEndActions = false;
     this.queue = [];
     this.queueLength = 0;
     this.queued = false;
-    this.requestedIcon = undefined;
+    this.responsiveContainerWidth = undefined;
   }
   openHandler() {
     onToggleOpenCloseComponent(this);
@@ -118,9 +136,6 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
   onMessagesChange() {
     /* wired up by t9n util */
   }
-  updateRequestedIcon() {
-    this.requestedIcon = setRequestedIcon(KindIcons, this.icon, this.kind);
-  }
   updateDuration() {
     if (this.autoClose && this.autoCloseTimeoutId) {
       window.clearTimeout(this.autoCloseTimeoutId);
@@ -133,24 +148,32 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    var _a;
     connectLocalized(this);
     connectMessages(this);
     const open = this.open;
     if (open && !this.queued) {
-      this.openHandler();
       this.calciteInternalAlertRegister.emit();
-      onToggleOpenCloseComponent(this);
+    }
+    if (this.transitionEl) {
+      (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.transitionEl);
     }
   }
   async componentWillLoad() {
     setUpLoadableComponent(this);
-    this.requestedIcon = setRequestedIcon(KindIcons, this.icon, this.kind);
-    await setUpMessages(this);
+    const [, breakpoints] = await Promise.all([setUpMessages(this), getBreakpoints()]);
+    this.breakpoints = breakpoints;
+    if (this.open) {
+      onToggleOpenCloseComponent(this);
+    }
   }
   componentDidLoad() {
+    var _a;
     setComponentLoaded(this);
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.transitionEl);
   }
   disconnectedCallback() {
+    var _a;
     window.dispatchEvent(new CustomEvent("calciteInternalAlertUnregister", {
       detail: { alert: this.el },
     }));
@@ -159,32 +182,50 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
     disconnectLocalized(this);
     disconnectMessages(this);
     this.slottedInShell = false;
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   render() {
-    const { hasEndActions } = this;
-    const closeButton = (h("button", { "aria-label": this.messages.close, class: "alert-close", onClick: this.closeAlert, type: "button",
-      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-      ref: (el) => (this.closeButton = el) }, h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
     numberStringFormatter.numberFormatOptions = {
       locale: this.effectiveLocale,
       numberingSystem: this.numberingSystem,
       signDisplay: "always",
     };
-    const queueNumber = this.queueLength > 2 ? this.queueLength - 1 : 1;
-    const queueText = numberStringFormatter.numberFormatter.format(queueNumber);
-    const queueCount = (h("div", { class: `${this.queueLength > 1 ? "active " : ""}alert-queue-count` }, h("calcite-chip", { scale: this.scale, value: queueText }, queueText)));
-    const { open, autoClose, label, placement, queued, requestedIcon, iconFlipRtl } = this;
+    const { hasEndActions } = this;
+    const { open, autoClose, responsiveContainerWidth, label, placement, queued } = this;
     const role = autoClose ? "alert" : "alertdialog";
+    const widthBreakpoints = this.breakpoints.width;
+    const lessThanSmall = responsiveContainerWidth < widthBreakpoints.small;
+    const greaterOrEqualThanSmall = responsiveContainerWidth >= widthBreakpoints.small;
     const hidden = !open;
-    const slotNode = (h("slot", { key: "actionsEndSlot", name: SLOTS.actionsEnd, onSlotchange: this.actionsEndSlotChangeHandler }));
+    const effectiveIcon = setRequestedIcon(KindIcons, this.icon, this.kind);
+    const hasQueuedAlerts = this.queueLength > 1;
     return (h(Host, { "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "calcite-hydrated-hidden": hidden, role: role }, h("div", { class: {
-        container: true,
-        queued,
-        [placement]: true,
-        [CSS.slottedInShell]: this.slottedInShell,
+        [CSS.container]: true,
+        [CSS.containerQueued]: queued,
+        [`${CSS.container}--${placement}`]: true,
+        [CSS.containerSlottedInShell]: this.slottedInShell,
       }, onPointerEnter: this.autoClose && this.autoCloseTimeoutId ? this.handleMouseOver : null, onPointerLeave: this.autoClose && this.autoCloseTimeoutId ? this.handleMouseLeave : null,
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-      ref: this.setTransitionEl }, requestedIcon ? (h("div", { class: "alert-icon" }, h("calcite-icon", { flipRtl: iconFlipRtl, 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 })), h("div", { class: CSS.actionsEnd, hidden: !hasEndActions }, slotNode), this.queueLength > 1 ? queueCount : null, closeButton, open && !queued && autoClose ? h("div", { class: "alert-dismiss-progress" }) : null)));
+      ref: this.setTransitionEl }, h("div", { class: CSS.contentContainer }, effectiveIcon && greaterOrEqualThanSmall ? this.renderIcon(effectiveIcon) : null, h("div", { class: CSS.content }, effectiveIcon && lessThanSmall ? this.renderIcon(effectiveIcon) : null, h("div", { class: CSS.textContainer }, h("slot", { name: SLOTS.title }), h("slot", { name: SLOTS.message }), h("slot", { name: SLOTS.link })))), lessThanSmall ? this.renderCloseButton() : null, h("div", { class: CSS.footer, hidden: !hasEndActions && !hasQueuedAlerts }, this.renderActionsEnd(), hasQueuedAlerts ? this.renderQueueCount() : null), greaterOrEqualThanSmall ? this.renderCloseButton() : null, open && !queued && autoClose ? h("div", { class: CSS.dismissProgress }) : null)));
+  }
+  renderCloseButton() {
+    return (h("button", { "aria-label": this.messages.close, class: CSS.close, key: "close", onClick: this.closeAlert, type: "button",
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+      ref: (el) => (this.closeButton = el) }, h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
+  }
+  renderQueueCount() {
+    const queueNumber = this.queueLength > 2 ? this.queueLength - 1 : 1;
+    const queueText = numberStringFormatter.numberFormatter.format(queueNumber);
+    return (h("div", { class: {
+        [CSS.queueCount]: true,
+        [CSS.queueCountActive]: this.queueLength > 1,
+      }, key: "queue-count" }, h("calcite-chip", { scale: this.scale, value: queueText }, queueText)));
+  }
+  renderActionsEnd() {
+    return (h("div", { class: CSS.actionsEnd }, h("slot", { name: SLOTS.actionsEnd, onSlotchange: this.actionsEndSlotChangeHandler })));
+  }
+  renderIcon(icon) {
+    return (h("div", { class: CSS.icon }, h("calcite-icon", { flipRtl: this.iconFlipRtl, icon: icon, scale: this.scale === "l" ? "m" : "s" })));
   }
   // when an alert is opened or closed, update queue and determine active alert
   alertSync(event) {
@@ -270,8 +311,6 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
   static get watchers() { return {
     "open": ["openHandler"],
     "messageOverrides": ["onMessagesChange"],
-    "icon": ["updateRequestedIcon"],
-    "kind": ["updateRequestedIcon"],
     "autoCloseDuration": ["updateDuration"],
     "effectiveLocale": ["effectiveLocaleChange"]
   }; }
@@ -290,19 +329,17 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
     "messages": [1040],
     "messageOverrides": [1040],
     "slottedInShell": [1028, "slotted-in-shell"],
-    "effectiveLocale": [32],
     "defaultMessages": [32],
+    "effectiveLocale": [32],
     "hasEndActions": [32],
     "queue": [32],
     "queueLength": [32],
     "queued": [32],
-    "requestedIcon": [32],
+    "responsiveContainerWidth": [32],
     "setFocus": [64]
   }, [[8, "calciteInternalAlertSync", "alertSync"], [8, "calciteInternalAlertRegister", "alertRegister"], [8, "calciteInternalAlertUnregister", "alertUnregister"]], {
     "open": ["openHandler"],
     "messageOverrides": ["onMessagesChange"],
-    "icon": ["updateRequestedIcon"],
-    "kind": ["updateRequestedIcon"],
     "autoCloseDuration": ["updateDuration"],
     "effectiveLocale": ["effectiveLocaleChange"]
   }]);

package/dist/components/ar.js

@@ -39,6 +39,9 @@ var locale = {
   months: months,
   monthsShort: months,
   weekStart: 6,
+  meridiem: function meridiem(hour) {
+    return hour > 12 ? 'م' : 'ص';
+  },
   relativeTime: {
     future: 'بعد %s',
     past: 'منذ %s',

package/dist/components/array.js

@@ -6,7 +6,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.8.0
+ * v1.9.0
  */
 function getRoundRobinIndex(index, total) {
   return (index + total) % total;

package/dist/components/avatar.js

@@ -11,7 +11,7 @@ import { d as defineCustomElement$1 } from './icon.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.8.0
+ * v1.9.0
  */
 /**
  * Convert a string to a valid hex by hashing its contents

package/dist/components/basemap-gallery2.js

@@ -24,7 +24,7 @@ const BasemapGallery = /*@__PURE__*/ proxyCustomElement(class BasemapGallery ext
   //--------------------------------------------------------------------------
   async mapViewWatchHandler() {
     await this.mapView.when(() => {
-      this._initBaseMapGallery(this.mapView);
+      void this._initBaseMapGallery(this.mapView);
     });
   }
   //--------------------------------------------------------------------------
@@ -67,10 +67,12 @@ const BasemapGallery = /*@__PURE__*/ proxyCustomElement(class BasemapGallery ext
    * @protected
    */
   async _initModules() {
-    const [BasemapGallery] = await loadModules([
-      "esri/widgets/BasemapGallery"
+    const [BasemapGallery, PortalBasemapsSource] = await loadModules([
+      "esri/widgets/BasemapGallery",
+      "esri/widgets/BasemapGallery/support/PortalBasemapsSource"
     ]);
     this.BasemapGallery = BasemapGallery;
+    this.PortalBasemapsSource = PortalBasemapsSource;
   }
   /**
    * Initialize the basemap gallery or reset the current view if it already exists
@@ -79,17 +81,24 @@ const BasemapGallery = /*@__PURE__*/ proxyCustomElement(class BasemapGallery ext
    *
    * @protected
    */
-  _initBaseMapGallery(view) {
-    if (view && this.BasemapGallery) {
-      if (!this.basemapWidget) {
-        this.basemapWidget = new this.BasemapGallery({
-          container: this._basemapElement,
-          view
-        });
-      }
-      else {
-        this.basemapWidget.view = view;
+  async _initBaseMapGallery(view) {
+    var _a;
+    if (this.BasemapGallery) {
+      if (this.basemapWidget) {
+        this.basemapWidget.destroy();
       }
+      const source = new this.PortalBasemapsSource({
+        query: ((_a = this.basemapConfig) === null || _a === void 0 ? void 0 : _a.basemapGroupId) ? `id:${this.basemapConfig.basemapGroupId}` : null,
+        filterFunction: (basemap) => {
+          return !this.basemapConfig.basemapIdsToFilter.includes(basemap.portalItem.id);
+        }
+      });
+      await source.refresh();
+      this.basemapWidget = new this.BasemapGallery({
+        container: this._basemapElement,
+        view,
+        source
+      });
     }
   }
   get el() { return this; }

package/dist/components/button.js

@@ -11,13 +11,14 @@ import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFoc
 import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { c as createObserver } from './observers.js';
 import { c as connectMessages, d as disconnectMessages, s as setUpMessages, u as updateMessages } from './t9n.js';
+import { w as watchGlobalAttributes, u as unwatchGlobalAttributes } from './globalAttributes.js';
 import { d as defineCustomElement$2 } from './icon.js';
 import { d as defineCustomElement$1 } from './loader.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.8.0
+ * v1.9.0
  */
 const CSS = {
   buttonLoader: "calcite-button--loader",
@@ -97,6 +98,9 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
     this.effectiveLocale = "";
     this.defaultMessages = undefined;
     this.tooltipText = undefined;
+    this.globalAttributes = {
+      ariaExpanded: undefined,
+    };
   }
   loadingChanged(newValue, oldValue) {
     if (!!newValue && !oldValue) {
@@ -120,6 +124,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
     connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
+    watchGlobalAttributes(this, ["aria-expanded"]);
     this.hasLoader = this.loading;
     this.setupTextContentObserver();
     connectLabel(this);
@@ -134,6 +139,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
     disconnectMessages(this);
     (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
     this.formEl = null;
+    unwatchGlobalAttributes(this);
   }
   async componentWillLoad() {
     setUpLoadableComponent(this);
@@ -157,13 +163,13 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
     const iconStartEl = (h("calcite-icon", { class: { [CSS.icon]: true, [CSS.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: this.scale === "l" ? "m" : "s" }));
     const iconEndEl = (h("calcite-icon", { class: { [CSS.icon]: true, [CSS.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: this.scale === "l" ? "m" : "s" }));
     const contentEl = (h("span", { class: CSS.content, ref: (el) => (this.contentEl = el) }, h("slot", null)));
-    return (h(Tag, { "aria-label": !this.loading ? getLabelText(this) : this.messages.loading, "aria-live": "polite", class: {
+    return (h(Tag, Object.assign({ "aria-label": !this.loading ? getLabelText(this) : this.messages.loading, "aria-live": "polite", class: {
         [CSS.buttonPadding]: noStartEndIcons,
         [CSS.buttonPaddingShrunk]: !noStartEndIcons,
         [CSS.contentSlotted]: this.hasContent,
         [CSS.iconStartEmpty]: !this.iconStart,
         [CSS.iconEndEmpty]: !this.iconEnd,
-      }, disabled: this.disabled || this.loading, href: childElType === "a" && this.href, name: childElType === "button" && this.name, onClick: this.handleClick, ref: this.setChildEl, rel: childElType === "a" && this.rel, tabIndex: this.disabled || this.loading ? -1 : null, target: childElType === "a" && this.target, title: this.tooltipText, type: childElType === "button" && this.type }, loaderNode, this.iconStart ? iconStartEl : null, this.hasContent ? contentEl : null, this.iconEnd ? iconEndEl : null));
+      }, disabled: this.disabled || this.loading, href: childElType === "a" && this.href, name: childElType === "button" && this.name, onClick: this.handleClick, ref: this.setChildEl, rel: childElType === "a" && this.rel, tabIndex: this.disabled || this.loading ? -1 : null, target: childElType === "a" && this.target, title: this.tooltipText, type: childElType === "button" && this.type }, this.globalAttributes), loaderNode, this.iconStart ? iconStartEl : null, this.hasContent ? contentEl : null, this.iconEnd ? iconEndEl : null));
   }
   //--------------------------------------------------------------------------
   //
@@ -235,6 +241,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
     "effectiveLocale": [32],
     "defaultMessages": [32],
     "tooltipText": [32],
+    "globalAttributes": [32],
     "setFocus": [64]
   }, undefined, {
     "loading": ["loadingChanged"],

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

@@ -12,7 +12,7 @@ import { d as defineCustomElement$2 } from './icon.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.8.0
+ * v1.9.0
  */
 const SLOTS = {
   actionsStart: "actions-start",

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

@@ -21,7 +21,7 @@ import { d as defineCustomElement$2 } from './popover.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.8.0
+ * v1.9.0
  */
 const CSS = {
   actionGroupEnd: "action-group--end",

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

@@ -16,7 +16,7 @@ import { d as defineCustomElement$2 } from './switch.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.8.0
+ * v1.9.0
  */
 const IDS = {
   content: "content",

package/dist/components/calcite-block.js

@@ -11,6 +11,7 @@ import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n.js';
 import { H as Heading } from './Heading.js';
 import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
+import { o as onToggleOpenCloseComponent } from './openCloseComponent.js';
 import { d as defineCustomElement$8 } from './action.js';
 import { d as defineCustomElement$7 } from './action-menu.js';
 import { d as defineCustomElement$6 } from './handle.js';
@@ -22,7 +23,7 @@ import { d as defineCustomElement$2 } from './scrim.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.8.0
+ * v1.9.0
  */
 const IDS = {
   content: "content",
@@ -66,7 +67,12 @@ const Block = /*@__PURE__*/ proxyCustomElement(class Block extends HTMLElement {
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.calciteBlockBeforeClose = createEvent(this, "calciteBlockBeforeClose", 6);
+    this.calciteBlockBeforeOpen = createEvent(this, "calciteBlockBeforeOpen", 6);
+    this.calciteBlockClose = createEvent(this, "calciteBlockClose", 6);
+    this.calciteBlockOpen = createEvent(this, "calciteBlockOpen", 6);
     this.calciteBlockToggle = createEvent(this, "calciteBlockToggle", 6);
+    this.openTransitionProp = "opacity";
     // --------------------------------------------------------------------------
     //
     //  Private Methods
@@ -76,6 +82,9 @@ const Block = /*@__PURE__*/ proxyCustomElement(class Block extends HTMLElement {
       this.open = !this.open;
       this.calciteBlockToggle.emit();
     };
+    this.setTransitionEl = (el) => {
+      this.transitionEl = el;
+    };
     this.collapsible = false;
     this.disabled = false;
     this.dragHandle = false;
@@ -90,6 +99,9 @@ const Block = /*@__PURE__*/ proxyCustomElement(class Block extends HTMLElement {
     this.effectiveLocale = undefined;
     this.defaultMessages = undefined;
   }
+  openHandler() {
+    onToggleOpenCloseComponent(this);
+  }
   onMessagesChange() {
     /* wired up by t9n util */
   }
@@ -106,6 +118,18 @@ const Block = /*@__PURE__*/ proxyCustomElement(class Block extends HTMLElement {
     await componentFocusable(this);
     focusFirstTabbable(this.el);
   }
+  onBeforeOpen() {
+    this.calciteBlockBeforeOpen.emit();
+  }
+  onOpen() {
+    this.calciteBlockOpen.emit();
+  }
+  onBeforeClose() {
+    this.calciteBlockBeforeClose.emit();
+  }
+  onClose() {
+    this.calciteBlockClose.emit();
+  }
   effectiveLocaleChange() {
     updateMessages(this, this.effectiveLocale);
   }
@@ -129,6 +153,9 @@ const Block = /*@__PURE__*/ proxyCustomElement(class Block extends HTMLElement {
   async componentWillLoad() {
     await setUpMessages(this);
     setUpLoadableComponent(this);
+    if (this.open) {
+      onToggleOpenCloseComponent(this);
+    }
   }
   componentDidLoad() {
     setComponentLoaded(this);
@@ -169,11 +196,14 @@ const Block = /*@__PURE__*/ proxyCustomElement(class Block extends HTMLElement {
     const headerNode = (h("div", { class: CSS.headerContainer }, this.dragHandle ? h("calcite-handle", null) : null, collapsible ? (h("button", { "aria-controls": IDS.content, "aria-describedby": IDS.header, "aria-expanded": collapsible ? toAriaBoolean(open) : null, class: CSS.toggle, id: IDS.toggle, onClick: this.onHeaderClick, title: toggleLabel }, headerContent, !hasControl && !hasMenuActions ? (h("calcite-icon", { "aria-hidden": "true", class: CSS.toggleIcon, icon: collapseIcon, scale: "s" })) : null)) : (headerContent), hasControl ? (h("div", { class: CSS.controlContainer }, h("slot", { name: SLOTS.control }))) : null, hasMenuActions ? (h("calcite-action-menu", { label: messages.options }, h("slot", { name: SLOTS.headerMenuActions }))) : null));
     return (h(Host, null, h("article", { "aria-busy": toAriaBoolean(loading), class: {
         [CSS.container]: true,
-      } }, headerNode, h("section", { "aria-labelledby": IDS.toggle, class: CSS.content, hidden: !open, id: IDS.content }, this.renderScrim()))));
+      } }, headerNode, h("section", { "aria-labelledby": IDS.toggle, class: CSS.content, hidden: !open, id: IDS.content,
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+      ref: this.setTransitionEl }, this.renderScrim()))));
   }
   static get assetsDirs() { return ["assets"]; }
   get el() { return this; }
   static get watchers() { return {
+    "open": ["openHandler"],
     "messageOverrides": ["onMessagesChange"],
     "effectiveLocale": ["effectiveLocaleChange"]
   }; }
@@ -194,6 +224,7 @@ const Block = /*@__PURE__*/ proxyCustomElement(class Block extends HTMLElement {
     "defaultMessages": [32],
     "setFocus": [64]
   }, undefined, {
+    "open": ["openHandler"],
     "messageOverrides": ["onMessagesChange"],
     "effectiveLocale": ["effectiveLocaleChange"]
   }]);

package/dist/components/calcite-card.js

@@ -15,7 +15,7 @@ import { d as defineCustomElement$2 } from './loader.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.8.0
+ * v1.9.0
  */
 const CSS = {
   container: "container",

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

@@ -10,7 +10,7 @@ import { e as getAncestors, f as getDepth } from './utils2.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.8.0
+ * v1.9.0
  */
 const CSS = {
   list: "list",
@@ -18,7 +18,7 @@ const CSS = {
   title: "title",
 };
 
-const comboboxItemGroupCss = ".scale--s{font-size:var(--calcite-font-size--2);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-item-spacing-indent:0.5rem}.scale--m{font-size:var(--calcite-font-size--1);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-item-spacing-indent:0.75rem}.scale--l{font-size:var(--calcite-font-size-0);line-height:1.25rem;--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.75rem;--calcite-combobox-item-spacing-indent:1rem}:host,.list{margin:0px;display:flex;flex-direction:column;padding:0px}:host(:focus),.list:focus{outline:2px solid transparent;outline-offset:2px}.label{box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:0px;max-inline-size:100%;color:var(--calcite-ui-text-3)}.title{--calcite-combobox-item-indent-value:calc(\n    var(--calcite-combobox-item-spacing-indent) * var(--calcite-combobox-item-spacing-indent-multiplier)\n  );border:0 solid;display:block;flex:1 1 0%;border-block-end-width:1px;font-weight:var(--calcite-font-weight-bold);color:var(--calcite-ui-text-2);word-wrap:break-word;word-break:break-word;border-block-end-color:var(--calcite-ui-border-3);padding-block:var(--calcite-combobox-item-spacing-unit-l);padding-inline:var(--calcite-combobox-item-spacing-unit-s);margin-inline-start:var(--calcite-combobox-item-indent-value)}::slotted(calcite-combobox-item-group:not([after-empty-group])){padding-block-start:var(--calcite-combobox-item-spacing-unit-l)}";
+const comboboxItemGroupCss = ".scale--s{font-size:var(--calcite-font-size--2);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-item-spacing-indent:0.5rem}.scale--m{font-size:var(--calcite-font-size--1);line-height:1rem;--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-item-spacing-indent:0.75rem}.scale--l{font-size:var(--calcite-font-size-0);line-height:1.25rem;--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.75rem;--calcite-combobox-item-spacing-indent:1rem}:host,.list{margin:0px;display:flex;flex-direction:column;padding:0px}:host(:focus),.list:focus{outline:2px solid transparent;outline-offset:2px}.label{box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:0px;max-inline-size:100%;color:var(--calcite-ui-text-3)}.title{--calcite-combobox-item-indent-value:calc(\n    var(--calcite-combobox-item-spacing-indent) * var(--calcite-combobox-item-spacing-indent-multiplier)\n  );border:0 solid;display:block;flex:1 1 0%;border-block-end-width:1px;font-weight:var(--calcite-font-weight-bold);color:var(--calcite-ui-text-2);word-wrap:break-word;word-break:break-word;border-block-end-color:var(--calcite-ui-border-3);padding-block:var(--calcite-combobox-item-spacing-unit-l);padding-inline:var(--calcite-combobox-item-spacing-unit-s);margin-inline-start:var(--calcite-combobox-item-indent-value)}::slotted(calcite-combobox-item-group:not([after-empty-group])){padding-block-start:var(--calcite-combobox-item-spacing-unit-l)}:host([hidden]){display:none}[hidden]{display:none}";
 
 const ComboboxItemGroup = /*@__PURE__*/ proxyCustomElement(class ComboboxItemGroup extends HTMLElement {
   constructor() {

package/dist/components/calcite-fab.js

@@ -14,7 +14,7 @@ import { d as defineCustomElement$2 } from './loader.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.8.0
+ * v1.9.0
  */
 const CSS = {
   button: "button",