@esri/calcite-components 1.0.0-beta.71 → 1.0.0-beta.75

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

@@ -1,53 +1,48 @@
 /* mixins & extensions */
-
 @keyframes in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 @keyframes in-down {
   0% {
     opacity: 0;
     transform: translate3D(0, -5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-up {
   0% {
     opacity: 0;
     transform: translate3D(0, 5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-scale {
   0% {
     opacity: 0;
     transform: scale3D(0.95, 0.95, 1);
   }
-
   100% {
     opacity: 1;
     transform: scale3D(1, 1, 1);
   }
 }
-
 :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 {
@@ -75,9 +70,8 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -91,19 +85,15 @@
 *
 * @prop --calcite-pagination-spacing: the amount of padding around each pagination item
 */
-
 :host([scale=s]) {
   --calcite-pagination-spacing: 0.25rem 0.5rem;
 }
-
 :host([scale=s]) .previous, :host([scale=s]) .next, :host([scale=s]) .page {
+  height: 1.5rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
-  height: 1.5rem;
 }
-
-:host([scale=s]) .previous,
-:host([scale=s]) .next {
+:host([scale=s]) .previous, :host([scale=s]) .next {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
 }
@@ -111,15 +101,12 @@
 :host([scale=m]) {
   --calcite-pagination-spacing: 0.5rem 0.75rem;
 }
-
 :host([scale=m]) .previous, :host([scale=m]) .next, :host([scale=m]) .page {
+  height: 2rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
-  height: 2rem;
 }
-
-:host([scale=m]) .previous,
-:host([scale=m]) .next {
+:host([scale=m]) .previous, :host([scale=m]) .next {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
@@ -127,15 +114,12 @@
 :host([scale=l]) {
   --calcite-pagination-spacing: 0.75rem 1rem;
 }
-
 :host([scale=l]) .previous, :host([scale=l]) .next, :host([scale=l]) .page {
+  height: 2.75rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
-  height: 2.75rem;
 }
-
-:host([scale=l]) .previous,
-:host([scale=l]) .next {
+:host([scale=l]) .previous, :host([scale=l]) .next {
   padding-left: 1rem;
   padding-right: 1rem;
 }
@@ -150,36 +134,30 @@
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
-
 :host button:focus {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
 
-.previous,
-.next,
-.page {
+.previous, .next, .page {
+  box-sizing: border-box;
   display: flex;
+  cursor: pointer;
   align-items: center;
-  background-color: transparent;
   border-style: none;
-  --border-opacity: 0;
+  --tw-border-opacity: 0;
+  background-color: transparent;
+  font-family: inherit;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
   color: var(--calcite-ui-text-3);
-  cursor: pointer;
-  font-family: inherit;
-  box-sizing: border-box;
   border-top: 2px solid transparent;
   border-bottom: 2px solid transparent;
 }
-
-.previous:hover,
-.next:hover,
-.page:hover {
+.previous:hover, .next:hover, .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;
 }
@@ -187,37 +165,29 @@
 .page:hover {
   border-bottom-color: var(--calcite-ui-border-2);
 }
-
 .page.is-selected {
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-1);
   border-bottom-color: var(--calcite-ui-brand);
 }
 
-.previous:hover,
-.next:hover {
+.previous:hover, .next:hover {
   background-color: var(--calcite-ui-foreground-2);
   color: var(--calcite-ui-brand);
 }
-
-.previous:active,
-.next:active {
+.previous:active, .next:active {
   background-color: var(--calcite-ui-foreground-3);
 }
-
-.previous.is-disabled,
-.next.is-disabled {
-  background-color: transparent;
+.previous.is-disabled, .next.is-disabled {
   pointer-events: none;
+  background-color: transparent;
 }
-
-.previous.is-disabled > calcite-icon,
-.next.is-disabled > calcite-icon {
+.previous.is-disabled > calcite-icon, .next.is-disabled > calcite-icon {
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
 .next {
-  margin-right: 0;
+  margin-right: 0px;
 }
 
 .page,

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

@@ -1,53 +1,48 @@
 /* mixins & extensions */
-
 @keyframes in {
   0% {
     opacity: 0;
   }
-
   100% {
     opacity: 1;
   }
 }
-
 @keyframes in-down {
   0% {
     opacity: 0;
     transform: translate3D(0, -5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-up {
   0% {
     opacity: 0;
     transform: translate3D(0, 5px, 0);
   }
-
   100% {
     opacity: 1;
     transform: translate3D(0, 0, 0);
   }
 }
-
 @keyframes in-scale {
   0% {
     opacity: 0;
     transform: scale3D(0.95, 0.95, 1);
   }
-
   100% {
     opacity: 1;
     transform: scale3D(1, 1, 1);
   }
 }
-
 :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 {
@@ -75,7 +70,6 @@
 /**
 * Currently only used in Checkbox.
 */
-
 :host {
   /* Base ":host" styles for the component */
   box-sizing: border-box;
@@ -83,13 +77,12 @@
   color: var(--calcite-ui-text-2);
   font-size: var(--calcite-font-size--1);
 }
-
 :host * {
   box-sizing: border-box;
 }
 
 :root {
-  --calcite-popper-transition: 150ms ease-in-out;
+  --calcite-popper-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -105,13 +98,12 @@
 * @prop --calcite-panel-max-width: the maximum width of the panel
 * @prop --calcite-panel-min-width: the minimum width of the panel
 */
-
 :host {
+  position: relative;
   display: flex;
+  width: 100%;
   flex: 1 1 auto;
   overflow: hidden;
-  position: relative;
-  width: 100%;
   --calcite-min-header-height: calc(var(--calcite-icon-size) * 3);
   --calcite-panel-max-height: unset;
   --calcite-panel-width: 100%;
@@ -120,20 +112,19 @@
 }
 
 /* Shared styles for header elements */
-
 .header {
-  margin: 0;
+  margin: 0px;
   display: flex;
-  align-items: center;
   align-content: space-between;
+  align-items: center;
+  fill: var(--calcite-ui-text-2);
   color: var(--calcite-ui-text-2);
-  fill: ;
 }
 
 .heading {
+  margin: 0px;
+  padding: 0px;
   font-weight: var(--calcite-font-weight-medium);
-  margin: 0;
-  padding: 0;
 }
 
 .header .heading {
@@ -156,26 +147,24 @@ h3.heading {
   line-height: 1.25rem;
 }
 
-h4.heading,
-h5.heading {
+h4.heading, h5.heading {
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
 
 .container {
+  margin: 0px;
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
   align-items: stretch;
   background-color: var(--calcite-ui-background);
-  width: 100%;
-  padding: 0;
-  margin: 0;
+  padding: 0px;
   max-height: var(--calcite-panel-max-height);
   width: var(--calcite-panel-width);
   max-width: var(--calcite-panel-max-width);
   min-width: var(--calcite-panel-min-width);
-  transition: max-height 150ms ease-in-out, width 150ms ease-in-out;
+  transition: max-height var(--calcite-animation-timing), width var(--calcite-animation-timing);
 }
 
 :host([height-scale=s]) {
@@ -212,99 +201,81 @@ h5.heading {
   display: none;
 }
 
-:host([loading]) .container,
-:host([disabled]) .container {
+:host([loading]) .container, :host([disabled]) .container {
   position: relative;
   z-index: 1;
 }
 
 .header {
   border-bottom: 1px solid;
+  position: sticky;
+  top: 0px;
+  width: 100%;
   align-items: stretch;
-  background-color: var(--calcite-ui-foreground-1);
   justify-content: flex-start;
-  position: sticky;
-  top: 0;
+  background-color: var(--calcite-ui-foreground-1);
   border-bottom-color: var(--calcite-ui-border-3);
-  width: 100%;
   flex: 0 0 auto;
-  min-height: 3rem;
   z-index: 2;
 }
 
 .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;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.875rem;
+  padding-bottom: 0.875rem;
+  overflow: hidden;
+  margin-inline-end: auto;
 }
-
-.header-content .heading,
-.header-content .summary {
-  padding: 0;
+.header-content .heading, .header-content .summary {
   display: block;
-  overflow: hidden;
-  white-space: nowrap;
-  width: 100%;
-  text-overflow: ellipsis;
+  overflow-wrap: break-word;
+  padding: 0px;
 }
-
 .header-content .heading {
-  font-weight: var(--calcite-font-weight-medium);
-  margin-top: 0;
-  margin-left: 0;
-  margin-right: 0;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-top: 0px;
   margin-bottom: 0.25rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
+  font-weight: var(--calcite-font-weight-medium);
 }
-
 .header-content .heading:only-child {
-  margin-bottom: 0;
+  margin-bottom: 0px;
 }
-
 .header-content .summary {
-  color: var(--calcite-ui-text-2);
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
+  color: var(--calcite-ui-text-2);
 }
 
 .back-button {
-  border-color: var(--calcite-ui-border-3);
+  border-width: 0px;
   border-style: solid;
-  border-width: 0;
-  border-right-width: 1px;
-}
-
-.calcite--rtl .back-button {
-  border-right-width: 0;
-  border-left-width: 1px;
+  border-color: var(--calcite-ui-border-3);
+  border-inline-end-width: 1px;
 }
 
 .header-actions {
   display: flex;
-  align-items: stretch;
   flex-direction: row;
   flex-wrap: nowrap;
+  align-items: stretch;
 }
 
-.header-actions--end {
-  margin-left: auto;
-}
-
+.header-actions--end,
 .menu-container:only-child {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 
 .menu-button {
-  align-self: stretch;
-  flex: 0 1 auto;
-  height: 100%;
   position: relative;
+  height: 100%;
+  flex: 0 1 auto;
+  align-self: stretch;
 }
 
 .menu {
@@ -321,54 +292,39 @@ h5.heading {
 }
 
 .content-container {
-  align-items: stretch;
-  background-color: var(--calcite-ui-background);
   display: flex;
   flex: 1 1 auto;
-  flex-wrap: nowrap;
   flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  background-color: var(--calcite-ui-background);
 }
 
 .footer {
   border-top: 1px solid;
-  background-color: var(--calcite-ui-foreground-1);
-  border-top-color: var(--calcite-ui-border-3);
-  display: flex;
-  justify-content: space-evenly;
   position: sticky;
-  bottom: 0;
+  bottom: 0px;
+  display: flex;
   width: 100%;
+  justify-content: space-evenly;
+  background-color: var(--calcite-ui-foreground-1);
+  border-top-color: var(--calcite-ui-border-3);
   flex: 0 0 auto;
   min-height: 3rem;
   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: block;
   position: sticky;
-  margin-top: 0;
-  margin-bottom: 0;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  margin-top: 0px;
+  margin-bottom: 0px;
   margin-left: auto;
   margin-right: auto;
+  display: block;
   padding: 0.5rem;
-  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

@@ -4,10 +4,10 @@
  */
 import { Component, Element, Event, Method, Prop, Watch, h, Fragment } from "@stencil/core";
 import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
-import { getElementDir, getElementStyleDir, getSlotted } from "../../utils/dom";
-import { CSS_UTILITY } from "../../utils/resources";
+import { getElementDir, getSlotted } from "../../utils/dom";
 import { CalciteHeading } from "../functional/CalciteHeading";
 import { SLOTS as ACTION_MENU_SLOTS } from "../calcite-action-menu/resources";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
  * @slot - A slot for adding custom content.
  * @slot header-actions-start - A slot for adding actions or content to the start side of the panel header.
@@ -63,7 +63,7 @@ export class CalcitePanel {
     this.setBackRef = (node) => {
       this.backButtonEl = node;
     };
-    this.panelKeyUpHandler = (event) => {
+    this.panelKeyDownHandler = (event) => {
       if (event.key === "Escape") {
         this.dismiss();
       }
@@ -83,6 +83,17 @@ export class CalcitePanel {
   }
   // --------------------------------------------------------------------------
   //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    connectConditionalSlotComponent(this);
+  }
+  disconnectedCallback() {
+    disconnectConditionalSlotComponent(this);
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Methods
   //
   // --------------------------------------------------------------------------
@@ -106,7 +117,7 @@ export class CalcitePanel {
   // --------------------------------------------------------------------------
   renderBackButton() {
     const { el } = this;
-    const rtl = getElementStyleDir(el) === "rtl";
+    const rtl = getElementDir(el) === "rtl";
     const { showBackButton, intlBack, backButtonClick } = this;
     const label = intlBack || TEXT.back;
     const icon = rtl ? ICONS.backRight : ICONS.backLeft;
@@ -124,7 +135,7 @@ export class CalcitePanel {
    * Allows user to override the entire header-content node.
    */
   renderHeaderSlottedContent() {
-    return (h("div", { class: CSS.headerContent, key: "header-content" },
+    return (h("div", { class: CSS.headerContent, key: "slotted-header-content" },
       h("slot", { name: SLOTS.headerContent })));
   }
   renderHeaderStartActions() {
@@ -146,7 +157,7 @@ export class CalcitePanel {
   renderMenu() {
     const { el, intlOptions, menuOpen } = this;
     const hasMenuItems = getSlotted(el, SLOTS.headerMenuActions);
-    return hasMenuItems ? (h("calcite-action-menu", { flipPlacements: ["top", "bottom"], label: intlOptions || TEXT.options, open: menuOpen, placement: "bottom-end" },
+    return hasMenuItems ? (h("calcite-action-menu", { flipPlacements: ["top", "bottom"], key: "menu", label: intlOptions || TEXT.options, open: menuOpen, placement: "bottom-end" },
       h("calcite-action", { icon: ICONS.menu, slot: ACTION_MENU_SLOTS.trigger, text: intlOptions || TEXT.options }),
       h("slot", { name: SLOTS.headerMenuActions }))) : null;
   }
@@ -171,20 +182,13 @@ export class CalcitePanel {
       actionsNodeEnd,
       headerMenuNode)) : null;
   }
-  /**
-   * Allows user to override the entire footer node.
-   */
-  renderFooterSlottedContent() {
+  renderFooterNode() {
     const { el } = this;
     const hasFooterSlottedContent = getSlotted(el, SLOTS.footer);
-    return hasFooterSlottedContent ? (h("footer", { class: CSS.footer },
-      h("slot", { name: SLOTS.footer }))) : null;
-  }
-  renderFooterActions() {
-    const { el } = this;
     const hasFooterActions = getSlotted(el, SLOTS.footerActions);
-    return hasFooterActions ? (h("footer", { class: CSS.footer },
-      h("slot", { name: SLOTS.footerActions }))) : null;
+    return hasFooterSlottedContent || hasFooterActions ? (h("footer", { class: CSS.footer, key: "footer" },
+      hasFooterSlottedContent ? h("slot", { key: "footer-slot", name: SLOTS.footer }) : null,
+      hasFooterActions ? h("slot", { key: "footer-actions-slot", name: SLOTS.footerActions }) : null)) : null;
   }
   renderContent() {
     const { el } = this;
@@ -200,15 +204,11 @@ export class CalcitePanel {
       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()));
+      this.renderFooterNode()));
     return (h(Fragment, null,
       loading || disabled ? h("calcite-scrim", { loading: loading }) : null,
       panelNode));