@esri/calcite-components 1.4.0-next.2 → 1.4.0-next.21

package/dist/collection/components/segmented-control/segmented-control.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.2
+ * v1.4.0-next.21
  */
 import { Build, h, Host } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
@@ -48,9 +48,7 @@ export class SegmentedControl {
       return;
     }
     const items = this.getItems();
-    const match = Array.from(items)
-      .filter((item) => item === newItem)
-      .pop();
+    const match = items.filter((item) => item === newItem).pop();
     if (match) {
       this.selectItem(match);
     }
@@ -66,9 +64,7 @@ export class SegmentedControl {
   componentWillLoad() {
     setUpLoadableComponent(this);
     const items = this.getItems();
-    const lastChecked = Array.from(items)
-      .filter((item) => item.checked)
-      .pop();
+    const lastChecked = items.filter((item) => item.checked).pop();
     if (lastChecked) {
       this.selectItem(lastChecked);
     }
@@ -126,13 +122,13 @@ export class SegmentedControl {
       case "ArrowLeft":
       case "ArrowUp":
         event.preventDefault();
-        const previous = selectedIndex < 1 ? items.item(items.length - 1) : items.item(selectedIndex - 1);
+        const previous = selectedIndex < 1 ? items[items.length - 1] : items[selectedIndex - 1];
         this.selectItem(previous, true);
         return;
       case "ArrowRight":
       case "ArrowDown":
         event.preventDefault();
-        const next = selectedIndex === -1 ? items.item(1) : items.item(selectedIndex + 1) || items.item(0);
+        const next = selectedIndex === -1 ? items[1] : items[selectedIndex + 1] || items[0];
         this.selectItem(next, true);
         return;
       case " ":
@@ -162,7 +158,7 @@ export class SegmentedControl {
     this.setFocus();
   }
   getItems() {
-    return this.el.querySelectorAll("calcite-segmented-control-item");
+    return Array.from(this.el.querySelectorAll("calcite-segmented-control-item"));
   }
   selectItem(selected, emit = false) {
     if (selected === this.selectedItem) {
@@ -171,7 +167,7 @@ export class SegmentedControl {
     const items = this.getItems();
     let match = null;
     items.forEach((item) => {
-      const matches = item.value === selected.value;
+      const matches = item === selected;
       if ((matches && !item.checked) || (!matches && item.checked)) {
         item.checked = matches;
       }

package/dist/collection/components/segmented-control-item/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.2
+ * v1.4.0-next.21
  */
 export const SLOTS = {
   input: "input"

package/dist/collection/components/segmented-control-item/segmented-control-item.css

@@ -27,6 +27,26 @@
     transform: translate3D(0, 0, 0);
   }
 }
+@keyframes in-right {
+  0% {
+    opacity: 0;
+    transform: translate3D(-5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-left {
+  0% {
+    opacity: 0;
+    transform: translate3D(5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
 @keyframes in-scale {
   0% {
     opacity: 0;
@@ -63,6 +83,14 @@
   animation-name: in-up;
 }
 
+.calcite-animate__in-right {
+  animation-name: in-right;
+}
+
+.calcite-animate__in-left {
+  animation-name: in-left;
+}
+
 .calcite-animate__in-scale {
   animation-name: in-scale;
 }
@@ -78,7 +106,7 @@
 */
 :root {
   --calcite-floating-ui-transition: var(--calcite-animation-timing);
-  --calcite-floating-ui-z-index: 600;
+  --calcite-floating-ui-z-index: var(--calcite-app-z-index-dropdown);
 }
 
 :host([hidden]) {

package/dist/collection/components/segmented-control-item/segmented-control-item.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.2
+ * v1.4.0-next.21
  */
 import { h, Host } from "@stencil/core";
 import { getElementProp, toAriaBoolean } from "../../utils/dom";

package/dist/collection/components/select/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.2
+ * v1.4.0-next.21
  */
 export const CSS = {
   icon: "icon",

package/dist/collection/components/select/select.css

@@ -27,6 +27,26 @@
     transform: translate3D(0, 0, 0);
   }
 }
+@keyframes in-right {
+  0% {
+    opacity: 0;
+    transform: translate3D(-5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-left {
+  0% {
+    opacity: 0;
+    transform: translate3D(5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
 @keyframes in-scale {
   0% {
     opacity: 0;
@@ -63,6 +83,14 @@
   animation-name: in-up;
 }
 
+.calcite-animate__in-right {
+  animation-name: in-right;
+}
+
+.calcite-animate__in-left {
+  animation-name: in-left;
+}
+
 .calcite-animate__in-scale {
   animation-name: in-scale;
 }
@@ -94,7 +122,7 @@
 
 :root {
   --calcite-floating-ui-transition: var(--calcite-animation-timing);
-  --calcite-floating-ui-z-index: 600;
+  --calcite-floating-ui-z-index: var(--calcite-app-z-index-dropdown);
 }
 
 :host([hidden]) {

package/dist/collection/components/select/select.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.2
+ * v1.4.0-next.21
  */
 import { Fragment, h } from "@stencil/core";
 import { focusElement } from "../../utils/dom";

package/dist/collection/components/shell/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.2
+ * v1.4.0-next.21
  */
 export const CSS = {
   main: "main",

package/dist/collection/components/shell/shell.css

@@ -27,6 +27,26 @@
     transform: translate3D(0, 0, 0);
   }
 }
+@keyframes in-right {
+  0% {
+    opacity: 0;
+    transform: translate3D(-5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-left {
+  0% {
+    opacity: 0;
+    transform: translate3D(5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
 @keyframes in-scale {
   0% {
     opacity: 0;
@@ -63,6 +83,14 @@
   animation-name: in-up;
 }
 
+.calcite-animate__in-right {
+  animation-name: in-right;
+}
+
+.calcite-animate__in-left {
+  animation-name: in-left;
+}
+
 .calcite-animate__in-scale {
   animation-name: in-scale;
 }
@@ -89,7 +117,7 @@
 
 :root {
   --calcite-floating-ui-transition: var(--calcite-animation-timing);
-  --calcite-floating-ui-z-index: 600;
+  --calcite-floating-ui-z-index: var(--calcite-app-z-index-dropdown);
 }
 
 :host([hidden]) {
@@ -146,7 +174,7 @@
   position: absolute;
   inset: 0px;
   border-width: 0px;
-  z-index: calc(1 - 1);
+  z-index: calc(var(--calcite-app-z-index) - 1);
   display: initial;
 }
 
@@ -197,7 +225,7 @@ slot[name=panel-bottom]::slotted(calcite-shell-center-row:not([detached])) {
 
 ::slotted(calcite-tip-manager) {
   position: absolute;
-  z-index: 500;
+  z-index: var(--calcite-app-z-index-toast);
   box-sizing: border-box;
 }
 

package/dist/collection/components/shell/shell.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.2
+ * v1.4.0-next.21
  */
 import { Fragment, h } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";

package/dist/collection/components/shell-center-row/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.2
+ * v1.4.0-next.21
  */
 export const CSS = {
   actionBarContainer: "action-bar-container",

package/dist/collection/components/shell-center-row/shell-center-row.css

@@ -27,6 +27,26 @@
     transform: translate3D(0, 0, 0);
   }
 }
+@keyframes in-right {
+  0% {
+    opacity: 0;
+    transform: translate3D(-5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-left {
+  0% {
+    opacity: 0;
+    transform: translate3D(5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
 @keyframes in-scale {
   0% {
     opacity: 0;
@@ -63,6 +83,14 @@
   animation-name: in-up;
 }
 
+.calcite-animate__in-right {
+  animation-name: in-right;
+}
+
+.calcite-animate__in-left {
+  animation-name: in-left;
+}
+
 .calcite-animate__in-scale {
   animation-name: in-scale;
 }
@@ -89,7 +117,7 @@
 
 :root {
   --calcite-floating-ui-transition: var(--calcite-animation-timing);
-  --calcite-floating-ui-z-index: 600;
+  --calcite-floating-ui-z-index: var(--calcite-app-z-index-dropdown);
 }
 
 :host([hidden]) {
@@ -97,7 +125,7 @@
 }
 
 :host {
-  z-index: 1;
+  z-index: var(--calcite-app-z-index);
   display: flex;
   flex: 1 1 auto;
   overflow: hidden;

package/dist/collection/components/shell-center-row/shell-center-row.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.2
+ * v1.4.0-next.21
  */
 import { Fragment, h } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
@@ -37,9 +37,6 @@ export class ShellCenterRow {
     const { el } = this;
     const contentNode = (h("div", { class: CSS.content }, h("slot", null)));
     const actionBar = getSlotted(el, SLOTS.actionBar);
-    if (actionBar) {
-      actionBar.layout = "horizontal";
-    }
     const actionBarNode = actionBar ? (h("div", { class: CSS.actionBarContainer, key: "action-bar" }, h("slot", { name: SLOTS.actionBar }))) : null;
     const children = [actionBarNode, contentNode];
     if (actionBar?.position === "end") {

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

@@ -1,14 +1,15 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.2
+ * v1.4.0-next.21
  */
 export const CSS = {
   container: "container",
   content: "content",
   contentHeader: "content__header",
   contentBody: "content__body",
-  contentDetached: "content--detached",
+  contentFloat: "content--float",
+  contentOverlay: "content--overlay",
   separator: "separator"
 };
 export const SLOTS = {

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

@@ -27,6 +27,26 @@
     transform: translate3D(0, 0, 0);
   }
 }
+@keyframes in-right {
+  0% {
+    opacity: 0;
+    transform: translate3D(-5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-left {
+  0% {
+    opacity: 0;
+    transform: translate3D(5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
 @keyframes in-scale {
   0% {
     opacity: 0;
@@ -63,6 +83,14 @@
   animation-name: in-up;
 }
 
+.calcite-animate__in-right {
+  animation-name: in-right;
+}
+
+.calcite-animate__in-left {
+  animation-name: in-left;
+}
+
 .calcite-animate__in-scale {
   animation-name: in-scale;
 }
@@ -78,7 +106,7 @@
 */
 :root {
   --calcite-floating-ui-transition: var(--calcite-animation-timing);
-  --calcite-floating-ui-z-index: 600;
+  --calcite-floating-ui-z-index: var(--calcite-app-z-index-dropdown);
 }
 
 :host([hidden]) {
@@ -93,10 +121,10 @@
 * @prop --calcite-shell-panel-width: Specifies the width of the component.
 * @prop --calcite-shell-panel-max-width: Specifies the maximum width of the component.
 * @prop --calcite-shell-panel-min-width: Specifies the minimum width of the component.
-* @prop --calcite-shell-panel-height: When `layout` is `"horizontal"`, specifies the height of the component.
-* @prop --calcite-shell-panel-max-height: When `layout` is `"horizontal"`, specifies the maximum height of the component.
-* @prop --calcite-shell-panel-min-height: When `layout` is `"horizontal"`, specifies the minimum height of the component.
-* @prop --calcite-shell-panel-detached-max-height: When `detached` is `true`, specifies the maximum height of the component.
+* @prop --calcite-shell-panel-height: When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the height of the component.
+* @prop --calcite-shell-panel-max-height: When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the maximum height of the component.
+* @prop --calcite-shell-panel-min-height: When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the minimum height of the component.
+* @prop [Deprecated] --calcite-shell-panel-detached-max-height: When `displayMode` is `float`, specifies the maximum height of the component.
 * @prop --calcite-shell-panel-z-index: Specifies the z-index value for the component.
 *
 */
@@ -106,18 +134,32 @@
   display: flex;
   flex: 0 1 auto;
   align-items: stretch;
+  z-index: var(--calcite-shell-panel-z-index, var(--calcite-app-z-index));
   --calcite-shell-panel-detached-max-height: unset;
-  z-index: var(--calcite-shell-panel-z-index, 1);
+  --calcite-shell-panel-max-height: unset;
+  --calcite-shell-panel-shadow-block-start-internal: 0 4px 8px -1px rgba(0, 0, 0, 0.08),
+    0 2px 4px -1px rgba(0, 0, 0, 0.04);
+  --calcite-shell-panel-shadow-block-end-internal: 0 -4px 8px -1px rgba(0, 0, 0, 0.08),
+    0 -2px 4px -1px rgba(0, 0, 0, 0.04);
+  --calcite-shell-panel-shadow-inline-start-internal: 4px 0 8px -1px rgba(0, 0, 0, 0.08),
+    2px 0 4px -1px rgba(0, 0, 0, 0.04);
+  --calcite-shell-panel-shadow-inline-end-internal: -4px 0 8px -1px rgba(0, 0, 0, 0.08),
+    -2px 0 4px -1px rgba(0, 0, 0, 0.04);
+}
+
+.calcite--rtl.content--overlay {
+  --calcite-shell-panel-shadow-inline-start-internal: -4px 0 8px -1px rgba(0, 0, 0, 0.08),
+    -2px 0 4px -1px rgba(0, 0, 0, 0.04);
+  --calcite-shell-panel-shadow-inline-end-internal: 4px 0 8px -1px rgba(0, 0, 0, 0.08),
+    2px 0 4px -1px rgba(0, 0, 0, 0.04);
 }
 
 :host([layout=vertical]) {
-  z-index: var(--calcite-shell-panel-z-index, calc(1 + 1));
+  z-index: var(--calcite-shell-panel-z-index, calc(var(--calcite-app-z-index) + 1));
 }
 
-:host([layout=horizontal]) .content {
-  --calcite-shell-panel-height-internal: var(--calcite-shell-panel-height, 20vh);
-  --calcite-shell-panel-max-height-internal: var(--calcite-shell-panel-max-height, 420px);
-  --calcite-shell-panel-min-height-internal: var(--calcite-shell-panel-min-height, 240px);
+:host([layout=vertical][display-mode=overlay]) {
+  z-index: var(--calcite-shell-panel-z-index, calc(var(--calcite-app-z-index-header) + 1));
 }
 
 :host([layout=vertical][width-scale=s]) .content {
@@ -138,16 +180,26 @@
   --calcite-shell-panel-min-width-internal: var(--calcite-shell-panel-min-width, 340px);
 }
 
-:host([detached-height-scale=s]) .content--detached {
-  --calcite-shell-panel-detached-max-height-internal: var(--calcite-shell-panel-detached-max-height, 40vh);
+:host([layout=horizontal][height-scale=s]) .content {
+  --calcite-shell-panel-max-height-internal: var(
+    --calcite-shell-panel-max-height,
+    var(--calcite-shell-panel-detached-max-height, 20vh)
+  );
 }
 
-:host([detached-height-scale=m]) .content--detached {
-  --calcite-shell-panel-detached-max-height-internal: var(--calcite-shell-panel-detached-max-height, 60vh);
+:host([layout=horizontal]) .content {
+  --calcite-shell-panel-min-height-internal: var(--calcite-shell-panel-min-height, 5vh);
+  --calcite-shell-panel-max-height-internal: var(
+    --calcite-shell-panel-max-height,
+    var(--calcite-shell-panel-detached-max-height, 30vh)
+  );
 }
 
-:host([detached-height-scale=l]) .content--detached {
-  --calcite-shell-panel-detached-max-height-internal: var(--calcite-shell-panel-detached-max-height, 80vh);
+:host([layout=horizontal][height-scale=l]) .content {
+  --calcite-shell-panel-max-height-internal: var(
+    --calcite-shell-panel-max-height,
+    var(--calcite-shell-panel-detached-max-height, 40vh)
+  );
 }
 
 .container {
@@ -285,7 +337,44 @@
   overflow: hidden;
 }
 
-.content--detached {
+.content--overlay {
+  position: absolute;
+  --tw-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
+  --tw-shadow-colored: 0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+:host([layout=vertical]) .content--overlay {
+  inset-block-start: 0px;
+  block-size: 100%;
+}
+
+:host([layout=horizontal]) .content--overlay {
+  inset-inline-start: 0px;
+  inline-size: 100%;
+}
+
+:host([layout=vertical][position=start]) .content--overlay {
+  inset-inline-start: 100%;
+  box-shadow: var(--calcite-shell-panel-shadow-inline-start-internal);
+}
+
+:host([layout=vertical][position=end]) .content--overlay {
+  inset-inline-end: 100%;
+  box-shadow: var(--calcite-shell-panel-shadow-inline-end-internal);
+}
+
+:host([layout=horizontal][position=start]) .content--overlay {
+  inset-block-start: 100%;
+  box-shadow: var(--calcite-shell-panel-shadow-block-start-internal);
+}
+
+:host([layout=horizontal][position=end]) .content--overlay {
+  inset-block-end: 100%;
+  box-shadow: var(--calcite-shell-panel-shadow-block-end-internal);
+}
+
+.content--float {
   margin-inline: 0.5rem;
   margin-block: 0.5rem auto;
   block-size: auto;
@@ -294,17 +383,21 @@
   --tw-shadow: 0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
   --tw-shadow-colored: 0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  max-block-size: var(--calcite-shell-panel-detached-max-height-internal);
+  max-block-size: var(--calcite-shell-panel-max-height-internal, calc(100% - 1rem));
 }
-.content--detached ::slotted(calcite-panel),
-.content--detached ::slotted(calcite-flow) {
+.content--float ::slotted(calcite-panel),
+.content--float ::slotted(calcite-flow) {
   max-block-size: unset;
 }
 
-:host([position=start]) .content--detached ::slotted(calcite-panel),
-:host([position=start]) .content--detached ::slotted(calcite-flow),
-:host([position=end]) .content--detached ::slotted(calcite-panel),
-:host([position=end]) .content--detached ::slotted(calcite-flow) {
+:host([layout=horizontal]) .content--float {
+  margin-block: 0.5rem;
+}
+
+:host([position=start]) .content--float ::slotted(calcite-panel),
+:host([position=start]) .content--float ::slotted(calcite-flow),
+:host([position=end]) .content--float ::slotted(calcite-panel),
+:host([position=end]) .content--float ::slotted(calcite-flow) {
   border-style: none;
 }