@esri/calcite-components 1.0.0-beta.69 → 1.0.0-beta.72

package/dist/collection/components/calcite-modal/calcite-modal.css

@@ -47,7 +47,11 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --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 {
@@ -109,7 +113,7 @@
   color: var(--calcite-ui-text-2);
   opacity: 0;
   visibility: hidden !important;
-  transition: visibility 0ms linear 300ms, opacity 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88);
+  transition: visibility 0ms linear 300ms, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);
   z-index: 101;
 }
 
@@ -161,7 +165,7 @@
   z-index: 102;
   -webkit-overflow-scrolling: touch;
   visibility: hidden;
-  transition: transform 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear 300ms, opacity 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88);
+  transition: transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear 300ms, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);
   transform: translate3d(0, 20px, 0);
 }
 
@@ -176,7 +180,7 @@
   pointer-events: auto;
   visibility: visible;
   transform: translate3d(0, 0, 0);
-  transition: transform 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear, opacity 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), max-width 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88), max-height 300ms cubic-bezier(0.215, 0.44, 0.42, 0.88);
+  transition: transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-width var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-height var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);
   transition-delay: 0ms;
 }
 
@@ -207,14 +211,17 @@
   color: var(--calcite-ui-text-3);
   order: 2;
   cursor: pointer;
-  border-top-right-radius: 0.25rem;
   background-color: transparent;
+  transition-property: all;
+  transition-duration: var(--calcite-animation-timing);
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
   outline-offset: 0;
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
+  border-start-end-radius: 0.25rem;
   padding: var(--calcite-modal-padding);
   flex: 0 0 auto;
-  transition: all 0.15s ease-in-out;
 }
 
 .close calcite-icon {
@@ -232,11 +239,6 @@
   color: var(--calcite-ui-text-1);
 }
 
-.calcite--rtl .close {
-  border-top-left-radius: 0.25rem;
-  border-top-right-radius: 0;
-}
-
 .title {
   display: flex;
   align-items: center;
@@ -317,12 +319,7 @@ slot[name=content]::slotted(*),
 
 .back {
   display: block;
-  margin-right: auto;
-}
-
-.calcite--rtl .back {
-  margin-left: auto;
-  margin-right: 0;
+  margin-inline-end: auto;
 }
 
 .secondary {
@@ -468,13 +465,7 @@ slot[name=primary] {
   }
 
   :host([docked]) .close {
-    border-radius: 0 var(--calcite-border-radius) 0 0;
-  }
-}
-
-@media screen and (max-width: 860px) {
-  :host([docked]) .calcite--rtl .close {
-    border-radius: var(--calcite-border-radius) var(--calcite-border-radius) 0 0;
+    border-start-end-radius: var(--calcite-border-radius);
   }
 }
 
@@ -529,8 +520,7 @@ slot[name=primary] {
     flex-direction: column;
   }
 
-  .calcite--rtl .back,
-.back,
+  .back,
 .secondary {
     margin: 0;
     margin-bottom: 0.25rem;

package/dist/collection/components/calcite-modal/calcite-modal.js

@@ -3,11 +3,9 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
-import { ensureId, focusElement, getElementDir, getSlotted, isCalciteFocusable } from "../../utils/dom";
-import { getKey } from "../../utils/key";
+import { ensureId, focusElement, getSlotted, isCalciteFocusable } from "../../utils/dom";
 import { queryShadowRoot } from "@a11y/focus-trap/shadow";
 import { isFocusable, isHidden } from "@a11y/focus-trap/focusable";
-import { CSS_UTILITY } from "../../utils/resources";
 import { TEXT, SLOTS, CSS, ICONS } from "./resources";
 import { createObserver } from "../../utils/observers";
 const isFocusableExtended = (el) => {
@@ -124,11 +122,10 @@ export class CalciteModal {
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   render() {
-    const dir = getElementDir(this.el);
     return (h(Host, { "aria-describedby": this.contentId, "aria-labelledby": this.titleId, "aria-modal": "true", role: "dialog" },
       h("calcite-scrim", { class: CSS.scrim, onClick: this.handleOutsideClose }),
       this.renderStyle(),
-      h("div", { class: { modal: true, [CSS_UTILITY.rtl]: dir === "rtl" }, onTransitionEnd: this.transitionEnd },
+      h("div", { class: "modal", onTransitionEnd: this.transitionEnd },
         h("div", { "data-focus-fence": true, onFocus: this.focusLastElement, tabindex: "0" }),
         h("div", { class: CSS.header },
           this.renderCloseButton(),
@@ -154,7 +151,7 @@ export class CalciteModal {
   }
   renderCloseButton() {
     return !this.disableCloseButton ? (h("button", { "aria-label": this.intlClose, class: CSS.close, onClick: this.close, ref: (el) => (this.closeButtonEl = el), title: this.intlClose },
-      h("calcite-icon", { icon: ICONS.close, scale: this.scale === "s" ? "s" : "l" }))) : null;
+      h("calcite-icon", { icon: ICONS.close, scale: this.scale === "s" ? "s" : this.scale === "m" ? "m" : this.scale === "l" ? "l" : null }))) : null;
   }
   renderStyle() {
     const hasCustomWidth = !isNaN(parseInt(`${this.width}`));
@@ -184,7 +181,7 @@ export class CalciteModal {
   //
   //--------------------------------------------------------------------------
   handleEscape(e) {
-    if (this.active && !this.disableEscape && getKey(e.key) === "Escape") {
+    if (this.active && !this.disableEscape && e.key === "Escape") {
       this.close();
     }
   }

package/dist/collection/components/calcite-notice/calcite-notice.css

@@ -47,7 +47,11 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --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 {
@@ -203,7 +207,6 @@
 
 .container {
   display: none;
-  text-align: left;
   margin-top: 0;
   margin-bottom: 0;
   box-sizing: border-box;
@@ -212,8 +215,9 @@
   pointer-events: none;
   background-color: var(--calcite-ui-foreground-1);
   max-height: 0;
+  text-align: start;
   transition: 150ms ease-in-out;
-  border-left: 0px solid;
+  border-inline-start: 0px solid;
   box-shadow: 0 0 0 0 transparent;
 }
 
@@ -255,31 +259,29 @@
   margin: 0;
   font-weight: var(--calcite-font-weight-normal);
   color: var(--calcite-ui-text-2);
-  margin-right: var(--calcite-notice-spacing-token-small);
-}
-
-.calcite--rtl slot[name=message]::slotted(*),
-.calcite--rtl *::slotted([slot=message]) {
-  margin-right: 0;
-  margin-left: var(--calcite-notice-spacing-token-small);
+  margin-inline-end: var(--calcite-notice-spacing-token-small);
 }
 
 .notice-content {
   box-sizing: border-box;
+  transition-property: all;
+  transition-duration: var(--calcite-animation-timing);
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
   padding: var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);
   flex: 0 0 auto;
-  transition: all 0.15s ease-in-out;
   display: flex;
   flex-direction: column;
   min-width: 0;
   word-wrap: break-word;
   overflow-wrap: break-word;
   flex: 1 1 0;
-  padding: var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-small) 0;
+  padding-block: var(--calcite-notice-spacing-token-small);
+  padding-inline: 0 var(--calcite-notice-spacing-token-small);
 }
 
 .notice-content:first-of-type:not(:only-child) {
-  padding-left: var(--calcite-notice-spacing-token-large);
+  padding-inline-start: var(--calcite-notice-spacing-token-large);
 }
 
 .notice-content:only-of-type {
@@ -290,9 +292,12 @@
   display: flex;
   align-items: center;
   box-sizing: border-box;
+  transition-property: all;
+  transition-duration: var(--calcite-animation-timing);
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
   padding: var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);
   flex: 0 0 auto;
-  transition: all 0.15s ease-in-out;
 }
 
 .notice-close {
@@ -306,9 +311,12 @@
   cursor: pointer;
   color: var(--calcite-ui-text-3);
   box-sizing: border-box;
+  transition-property: all;
+  transition-duration: var(--calcite-animation-timing);
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
   padding: var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);
   flex: 0 0 auto;
-  transition: all 0.15s ease-in-out;
   -webkit-appearance: none;
 }
 
@@ -326,24 +334,6 @@
   align-self: stretch;
 }
 
-.calcite--rtl {
-  text-align: right;
-  border-left: none;
-  border-right: 0px solid;
-}
-
-.calcite--rtl .notice-content {
-  padding: var(--calcite-notice-spacing-token-small) 0 var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-small);
-}
-
-.calcite--rtl .notice-content:first-of-type:not(:only-child) {
-  padding-right: var(--calcite-notice-spacing-token-large);
-}
-
-.calcite--rtl .notice-content:only-of-type {
-  padding: var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);
-}
-
 :host([color=blue]) .container {
   border-color: var(--calcite-ui-brand);
 }

package/dist/collection/components/calcite-notice/calcite-notice.js

@@ -5,8 +5,7 @@
 import { Component, Element, Event, h, Method, Prop, Watch } from "@stencil/core";
 import { CSS, SLOTS, TEXT } from "./resources";
 import { StatusIcons } from "../calcite-alert/interfaces";
-import { getElementDir, getSlotted, setRequestedIcon } from "../../utils/dom";
-import { CSS_UTILITY } from "../../utils/resources";
+import { getSlotted, setRequestedIcon } from "../../utils/dom";
 /** Notices are intended to be used to present users with important-but-not-crucial contextual tips or copy. Because
  * notices are displayed inline, a common use case is displaying them on page-load to present users with short hints or contextual copy.
  * They are optionally dismissible - useful for keeping track of whether or not a user has dismissed the notice. You can also choose not
@@ -65,11 +64,10 @@ export class CalciteNotice {
   }
   render() {
     const { el } = this;
-    const dir = getElementDir(el);
     const closeButton = (h("button", { "aria-label": this.intlClose, class: CSS.close, onClick: this.close, ref: (el) => (this.closeButton = el) },
       h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
     const hasActionEnd = getSlotted(el, SLOTS.actionsEnd);
-    return (h("div", { class: { [CSS.container]: true, [CSS_UTILITY.rtl]: dir === "rtl" } },
+    return (h("div", { class: CSS.container },
       this.requestedIcon ? (h("div", { class: CSS.icon },
         h("calcite-icon", { icon: this.requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null,
       h("div", { class: CSS.content },

package/dist/collection/components/calcite-option/calcite-option.css

@@ -47,7 +47,11 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --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 {

package/dist/collection/components/calcite-option/calcite-option.js

@@ -51,8 +51,10 @@ export class CalciteOption {
     var _a;
     this.ensureTextContentDependentProps();
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, {
+      attributeFilter: ["label", "value"],
+      characterData: true,
       childList: true,
-      attributeFilter: ["label", "value"]
+      subtree: true
     });
   }
   disconnectedCallback() {

package/dist/collection/components/calcite-option-group/calcite-option-group.css

@@ -47,7 +47,11 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --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 {

package/dist/collection/components/calcite-pagination/calcite-pagination.css

@@ -47,7 +47,11 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --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 {
@@ -179,7 +183,7 @@
 .page:hover {
   color: var(--calcite-ui-text-1);
   transition-property: all;
-  transition-duration: 150ms;
+  transition-duration: var(--calcite-animation-timing);
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
 }

package/dist/collection/components/calcite-pagination/calcite-pagination.js

@@ -3,7 +3,6 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, h, Prop, Method, Fragment } from "@stencil/core";
-import { getElementDir } from "../../utils/dom";
 import { CSS, TEXT } from "./resources";
 const maxPagesDisplayed = 5;
 export class CalcitePagination {
@@ -136,7 +135,6 @@ export class CalcitePagination {
     }
   }
   render() {
-    const dir = getElementDir(this.el);
     const { total, num, start } = this;
     const prevDisabled = num === 1 ? start <= num : start < num;
     const nextDisabled = num === 1 ? start + num > total : start + num > total;
@@ -145,7 +143,7 @@ export class CalcitePagination {
           [CSS.previous]: true,
           [CSS.disabled]: prevDisabled
         }, disabled: prevDisabled, onClick: this.previousClicked },
-        h("calcite-icon", { dir: dir, flipRtl: true, icon: "chevronLeft", scale: "s" })),
+        h("calcite-icon", { flipRtl: true, icon: "chevronLeft", scale: "s" })),
       total > num ? this.renderPage(1) : null,
       this.renderLeftEllipsis(),
       this.renderPages(),
@@ -155,7 +153,7 @@ export class CalcitePagination {
           [CSS.next]: true,
           [CSS.disabled]: nextDisabled
         }, disabled: nextDisabled, onClick: this.nextClicked },
-        h("calcite-icon", { dir: dir, flipRtl: true, icon: "chevronRight", scale: "s" }))));
+        h("calcite-icon", { flipRtl: true, icon: "chevronRight", scale: "s" }))));
   }
   static get is() { return "calcite-pagination"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/calcite-panel/calcite-panel.css

@@ -47,7 +47,11 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --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 {
@@ -225,7 +229,7 @@ h5.heading {
   justify-content: flex-start;
   position: sticky;
   top: 0;
-  border-bottom-color: var(--calcite-ui-border-2);
+  border-bottom-color: var(--calcite-ui-border-3);
   width: 100%;
   flex: 0 0 auto;
   min-height: 3rem;
@@ -234,23 +238,21 @@ h5.heading {
 
 .header-content {
   overflow: hidden;
-  margin-right: auto;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   padding-top: 1rem;
   padding-bottom: 1rem;
   display: flex;
   flex-direction: column;
+  margin-inline-end: auto;
 }
 
 .header-content .heading,
 .header-content .summary {
   padding: 0;
   display: block;
-  overflow: hidden;
-  white-space: nowrap;
-  width: 100%;
-  text-overflow: ellipsis;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
 }
 
 .header-content .heading {
@@ -274,15 +276,10 @@ h5.heading {
 }
 
 .back-button {
-  border-color: var(--calcite-ui-border-2);
+  border-color: var(--calcite-ui-border-3);
   border-style: solid;
   border-width: 0;
-  border-right-width: 1px;
-}
-
-.calcite--rtl .back-button {
-  border-right-width: 0;
-  border-left-width: 1px;
+  border-inline-end-width: 1px;
 }
 
 .header-actions {
@@ -292,12 +289,9 @@ h5.heading {
   flex-wrap: nowrap;
 }
 
-.header-actions--end {
-  margin-left: auto;
-}
-
+.header-actions--end,
 .menu-container:only-child {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 .menu-button {
@@ -312,12 +306,19 @@ h5.heading {
   flex-flow: column nowrap;
 }
 
+.content-wrapper {
+  overflow: auto;
+}
+
+.content-height {
+  height: 100%;
+}
+
 .content-container {
   align-items: stretch;
   background-color: var(--calcite-ui-background);
   display: flex;
   flex: 1 1 auto;
-  overflow: auto;
   flex-wrap: nowrap;
   flex-direction: column;
 }
@@ -336,23 +337,8 @@ h5.heading {
   padding: 0.5rem;
 }
 
-.calcite--rtl .header-content {
-  margin-left: auto;
-  margin-right: unset;
-}
-
-.calcite--rtl .header-actions--end {
-  margin-right: auto;
-  margin-left: unset;
-}
-
-.calcite--rtl .menu-container:only-child {
-  margin-right: auto;
-  margin-left: unset;
-}
-
 .fab-container {
-  display: inline-block;
+  display: block;
   position: sticky;
   margin-top: 0;
   margin-bottom: 0;
@@ -362,5 +348,7 @@ h5.heading {
   bottom: 0;
   left: 0;
   right: 0;
+  width: -moz-fit-content;
+  width: fit-content;
   z-index: 1;
 }

package/dist/collection/components/calcite-panel/calcite-panel.js

@@ -5,7 +5,6 @@
 import { Component, Element, Event, Method, Prop, Watch, h, Fragment } from "@stencil/core";
 import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
 import { getElementDir, getSlotted } from "../../utils/dom";
-import { CSS_UTILITY } from "../../utils/resources";
 import { CalciteHeading } from "../functional/CalciteHeading";
 import { SLOTS as ACTION_MENU_SLOTS } from "../calcite-action-menu/resources";
 /**
@@ -63,7 +62,7 @@ export class CalcitePanel {
     this.setBackRef = (node) => {
       this.backButtonEl = node;
     };
-    this.panelKeyUpHandler = (event) => {
+    this.panelKeyDownHandler = (event) => {
       if (event.key === "Escape") {
         this.dismiss();
       }
@@ -187,23 +186,21 @@ export class CalcitePanel {
       h("slot", { name: SLOTS.footerActions }))) : null;
   }
   renderContent() {
-    return (h("section", { class: CSS.contentContainer, onScroll: this.panelScrollHandler, tabIndex: 0 },
-      h("slot", null),
-      this.renderFab()));
-  }
-  renderFab() {
     const { el } = this;
     const hasFab = getSlotted(el, SLOTS.fab);
-    return hasFab ? (h("div", { class: CSS.fabContainer },
-      h("slot", { name: SLOTS.fab }))) : null;
+    return hasFab ? (h("div", { class: { [CSS.contentWrapper]: true, [CSS.contentHeight]: true }, onScroll: this.panelScrollHandler, tabIndex: 0 },
+      h("section", { class: CSS.contentContainer },
+        h("slot", null)),
+      this.renderFab())) : (h("section", { class: { [CSS.contentWrapper]: true, [CSS.contentContainer]: true }, onScroll: this.panelScrollHandler, tabIndex: 0 },
+      h("slot", null)));
+  }
+  renderFab() {
+    return (h("div", { class: CSS.fabContainer },
+      h("slot", { name: SLOTS.fab })));
   }
   render() {
-    const { dismissed, disabled, dismissible, el, loading, panelKeyUpHandler } = this;
-    const rtl = getElementDir(el) === "rtl";
-    const panelNode = (h("article", { "aria-busy": loading.toString(), class: {
-        [CSS.container]: true,
-        [CSS_UTILITY.rtl]: rtl
-      }, hidden: dismissible && dismissed, onKeyUp: panelKeyUpHandler, ref: this.setContainerRef, tabIndex: dismissible ? 0 : -1 },
+    const { dismissed, disabled, dismissible, loading, panelKeyDownHandler } = this;
+    const panelNode = (h("article", { "aria-busy": loading.toString(), class: CSS.container, hidden: dismissible && dismissed, onKeyDown: panelKeyDownHandler, ref: this.setContainerRef, tabIndex: dismissible ? 0 : -1 },
       this.renderHeaderNode(),
       this.renderContent(),
       this.renderFooterSlottedContent() || this.renderFooterActions()));

package/dist/collection/components/calcite-panel/resources.js

@@ -12,7 +12,9 @@ export const CSS = {
   headerActions: "header-actions",
   headerActionsEnd: "header-actions--end",
   headerActionsStart: "header-actions--start",
+  contentWrapper: "content-wrapper",
   contentContainer: "content-container",
+  contentHeight: "content-height",
   fabContainer: "fab-container",
   footer: "footer",
   menuContainer: "menu-container",

package/dist/collection/components/calcite-pick-list/calcite-pick-list.css

@@ -47,7 +47,11 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --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 {

package/dist/collection/components/calcite-pick-list/calcite-pick-list.js

@@ -299,7 +299,7 @@ export class CalcitePickList {
             "location": "global"
           }
         },
-        "return": "Promise<Map<string, HTMLCalcitePickListItemElement>>"
+        "return": "Promise<Map<string, any>>"
       },
       "docs": {
         "text": "Returns the currently selected items",

package/dist/collection/components/calcite-pick-list/shared-list-logic.js

@@ -215,8 +215,8 @@ export function selectSiblings(item, deselect = false) {
 }
 let groups;
 export function handleFilter(event) {
-  const filteredData = event.detail;
-  const values = filteredData.map((item) => item.value);
+  const { filteredItems } = event.currentTarget;
+  const values = filteredItems.map((item) => item.value);
   let hasSelectedMatch = false;
   if (!groups) {
     groups = new Set();

package/dist/collection/components/calcite-pick-list/shared-list-render.js

@@ -15,14 +15,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { h, Host } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";
-import { getElementDir } from "../../utils/dom";
 export const List = (_a) => {
-  var { props: { disabled, loading, filterEnabled, dataForFilter, handleFilter, filterPlaceholder, el, setFilterEl } } = _a, rest = __rest(_a, ["props"]);
+  var { props: { disabled, loading, filterEnabled, dataForFilter, handleFilter, filterPlaceholder, setFilterEl } } = _a, rest = __rest(_a, ["props"]);
   const defaultSlot = h("slot", null);
   return (h(Host, Object.assign({ "aria-busy": loading.toString(), "aria-disabled": disabled.toString(), role: "menu" }, rest),
     h("section", null,
       h("header", { class: { [CSS.sticky]: true } },
-        filterEnabled ? (h("calcite-filter", { "aria-label": filterPlaceholder, data: dataForFilter, dir: getElementDir(el), disabled: loading || disabled, onCalciteFilterChange: handleFilter, placeholder: filterPlaceholder, ref: setFilterEl })) : null,
+        filterEnabled ? (h("calcite-filter", { "aria-label": filterPlaceholder, disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: handleFilter, placeholder: filterPlaceholder, ref: setFilterEl })) : null,
         h("slot", { name: SLOTS.menuActions })),
       loading || disabled ? h("calcite-scrim", { loading: loading }) : null,
       defaultSlot)));

package/dist/collection/components/calcite-pick-list-group/calcite-pick-list-group.css

@@ -47,7 +47,11 @@
 }
 
 :root {
-  --calcite-animation-timing: 300ms;
+  --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 {
@@ -155,10 +159,5 @@ h3.heading {
 }
 
 .container--indented {
-  margin-left: 1.5rem;
-}
-
-.calcite--rtl.container--indented {
-  margin-left: 0;
-  margin-right: 1.5rem;
+  margin-inline-start: 1.5rem;
 }