@esri/calcite-components 1.0.0-beta.86 → 1.0.0-beta.87

package/dist/collection/components/switch/switch.css

@@ -71,53 +71,61 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
   display: none;
 }
 
+:host([disabled]) {
+  pointer-events: none;
+  cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+
 :host([scale=s]) .container {
-  height: 0.75rem;
+  block-size: 0.75rem;
 }
 :host([scale=s]) .track {
-  height: 0.75rem;
-  width: 1.5rem;
+  block-size: 0.75rem;
+  inline-size: 1.5rem;
 }
 :host([scale=s]) .handle {
-  height: 0.5rem;
-  width: 0.5rem;
+  block-size: 0.5rem;
+  inline-size: 0.5rem;
 }
 
 :host([scale=m]) .container {
-  height: 1rem;
+  block-size: 1rem;
 }
 :host([scale=m]) .track {
-  height: 1rem;
-  width: 2rem;
+  block-size: 1rem;
+  inline-size: 2rem;
 }
 :host([scale=m]) .handle {
-  height: 0.75rem;
-  width: 0.75rem;
+  block-size: 0.75rem;
+  inline-size: 0.75rem;
 }
 
 :host([scale=l]) .container {
-  height: 1.5rem;
+  block-size: 1.5rem;
 }
 :host([scale=l]) .track {
-  height: 1.5rem;
-  width: 3rem;
+  block-size: 1.5rem;
+  inline-size: 3rem;
 }
 :host([scale=l]) .handle {
-  height: 1.25rem;
-  width: 1.25rem;
+  block-size: 1.25rem;
+  inline-size: 1.25rem;
 }
 
 :host {
   position: relative;
   display: inline-block;
-  width: auto;
+  inline-size: auto;
   cursor: pointer;
   -webkit-user-select: none;
           user-select: none;
@@ -125,13 +133,6 @@
   tap-highlight-color: transparent;
 }
 
-:host([disabled]) {
-  pointer-events: none;
-  cursor: default;
-  -webkit-user-select: none;
-          user-select: none;
-  opacity: var(--calcite-ui-opacity-disabled);
-}
 :host([disabled]) ::slotted([calcite-hydrated][disabled]),
 :host([disabled]) [calcite-hydrated][disabled] {
   /* prevent opacity stacking */
@@ -139,7 +140,7 @@
 }
 
 :host {
-  width: auto;
+  inline-size: auto;
   outline-color: transparent;
 }
 
@@ -171,7 +172,7 @@
   transition-property: all;
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  top: -1px;
+  inset-block-start: -1px;
   inset-inline: -1px auto;
 }
 
@@ -210,15 +211,12 @@
 }
 
 ::slotted(input[slot=hidden-form-input]) {
-  bottom: 0 !important;
-  left: 0 !important;
   margin: 0 !important;
   opacity: 0 !important;
   outline: none !important;
   padding: 0 !important;
   position: absolute !important;
-  right: 0 !important;
-  top: 0 !important;
+  inset: 0 !important;
   transform: none !important;
   -webkit-appearance: none !important;
   z-index: -1 !important;

package/dist/collection/components/switch/switch.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.0.0-beta.86
+ * v1.0.0-beta.87
  */
 import { Component, Element, Event, h, Host, Method, Prop, Watch } from "@stencil/core";
 import { focusElement, toAriaBoolean } from "../../utils/dom";
@@ -32,11 +32,11 @@ export class Switch {
     //  Private Methods
     //
     //--------------------------------------------------------------------------
-    this.keyDownHandler = (e) => {
-      const key = e.key;
+    this.keyDownHandler = (event) => {
+      const key = event.key;
       if (!this.disabled && (key === " " || key === "Enter")) {
         this.toggle();
-        e.preventDefault();
+        event.preventDefault();
       }
     };
     this.clickHandler = () => {
@@ -67,8 +67,6 @@ export class Switch {
   toggle() {
     this.checked = !this.checked;
     this.calciteSwitchChange.emit({
-      // todo: We should remove emmitting redudant props in event payload.
-      // https://github.com/Esri/calcite-components/issues/3163
       switched: this.checked
     });
   }
@@ -254,12 +252,17 @@ export class Switch {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fires when the checked value has changed."
+        "text": "Fires when the checked value has changed.\n\n**Note:** The event payload is deprecated, please use the `checked` property on the component instead"
       },
       "complexType": {
-        "original": "any",
+        "original": "DeprecatedEventPayload",
         "resolved": "any",
-        "references": {}
+        "references": {
+          "DeprecatedEventPayload": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
       }
     }]; }
   static get methods() { return {

package/dist/collection/components/tab/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.86
+ * v1.0.0-beta.87
  */
 export {};

package/dist/collection/components/tab/tab.css

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -84,40 +84,37 @@
 
 :host {
   display: none;
-  height: 100%;
-  width: 100%;
+  block-size: 100%;
+  inline-size: 100%;
 }
 
 :host([active]) {
   display: block;
-  height: 100%;
-  width: 100%;
+  block-size: 100%;
+  inline-size: 100%;
   overflow: auto;
 }
 
 section {
   display: none;
-  height: 100%;
-  width: 100%;
+  block-size: 100%;
+  inline-size: 100%;
 }
 
 :host([scale=s]) {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
+  padding-block: 0.25rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
 }
 
 :host([scale=m]) {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  padding-block: 0.5rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
 
 :host([scale=l]) {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
+  padding-block: 0.75rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
 }

package/dist/collection/components/tab/tab.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.0.0-beta.86
+ * v1.0.0-beta.87
  */
 import { Component, Prop, Element, Listen, Method, Event, h, State, Host } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -83,7 +83,7 @@ export class Tab {
    * Return the index of this tab within the tab array
    */
   async getTabIndex() {
-    return Array.prototype.indexOf.call(nodeListToArray(this.el.parentElement.children).filter((e) => e.matches("calcite-tab")), this.el);
+    return Array.prototype.indexOf.call(nodeListToArray(this.el.parentElement.children).filter((el) => el.matches("calcite-tab")), this.el);
   }
   //--------------------------------------------------------------------------
   //
@@ -186,8 +186,8 @@ export class Tab {
         "text": ""
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

package/dist/collection/components/tab-nav/tab-nav.css

@@ -71,7 +71,7 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
@@ -84,39 +84,38 @@
 }
 
 :host([scale=s]) {
-  min-height: 1.5rem;
+  min-block-size: 1.5rem;
 }
 
 :host([scale=m]) {
-  min-height: 2rem;
+  min-block-size: 2rem;
 }
 
 :host([scale=l]) {
-  min-height: 2.75rem;
+  min-block-size: 2.75rem;
 }
 
 .tab-nav {
   display: flex;
-  width: 100%;
+  inline-size: 100%;
   justify-content: flex-start;
   overflow: auto;
 }
 
 .tab-nav-active-indicator-container {
   position: absolute;
-  left: 0px;
-  right: 0px;
-  bottom: 0px;
-  height: 0.125rem;
-  width: 100%;
+  inset-inline: 0px;
+  inset-block-end: 0px;
+  block-size: 0.125rem;
+  inline-size: 100%;
   overflow: hidden;
 }
 
 .tab-nav-active-indicator {
   position: absolute;
-  bottom: 0px;
+  inset-block-end: 0px;
   display: block;
-  height: 0.125rem;
+  block-size: 0.125rem;
   background-color: var(--calcite-ui-brand);
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -125,37 +124,37 @@
 }
 
 :host([position=below]) .tab-nav-active-indicator {
-  bottom: unset;
-  top: 0px;
+  inset-block-end: unset;
+  inset-block-start: 0px;
 }
 
 :host([position=bottom]) .tab-nav-active-indicator {
-  bottom: unset;
-  top: 0px;
+  inset-block-end: unset;
+  inset-block-start: 0px;
 }
 
 :host([position=below]) .tab-nav-active-indicator-container {
-  bottom: unset;
-  top: 0px;
+  inset-block-start: 0px;
+  inset-block-end: unset;
 }
 
 :host([position=bottom]) .tab-nav-active-indicator-container {
-  bottom: unset;
-  top: 0px;
+  inset-block-end: unset;
+  inset-block-start: 0px;
 }
 
 :host([bordered]) .tab-nav-active-indicator-container {
-  bottom: unset;
+  inset-block-end: unset;
 }
 
 :host([bordered][position=below]) .tab-nav-active-indicator-container {
-  bottom: 0;
-  top: unset;
+  inset-block-end: 0;
+  inset-block-start: unset;
 }
 
 :host([bordered][position=bottom]) .tab-nav-active-indicator-container {
-  bottom: 0;
-  top: unset;
+  inset-block-end: 0;
+  inset-block-start: unset;
 }
 
 @media (forced-colors: active) {

package/dist/collection/components/tab-nav/tab-nav.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.0.0-beta.86
+ * v1.0.0-beta.87
  */
 import { Component, Element, Event, h, Host, Listen, Prop, State, Watch } from "@stencil/core";
 import { getElementDir, filterDirectChildren } from "../../utils/dom";
@@ -123,54 +123,54 @@ export class TabNav {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  focusPreviousTabHandler(e) {
-    const currentIndex = this.getIndexOfTabTitle(e.target, this.enabledTabTitles);
+  focusPreviousTabHandler(event) {
+    const currentIndex = this.getIndexOfTabTitle(event.target, this.enabledTabTitles);
     const previousTab = this.enabledTabTitles[currentIndex - 1] ||
       this.enabledTabTitles[this.enabledTabTitles.length - 1];
     previousTab === null || previousTab === void 0 ? void 0 : previousTab.focus();
-    e.stopPropagation();
-    e.preventDefault();
+    event.stopPropagation();
+    event.preventDefault();
   }
-  focusNextTabHandler(e) {
-    const currentIndex = this.getIndexOfTabTitle(e.target, this.enabledTabTitles);
+  focusNextTabHandler(event) {
+    const currentIndex = this.getIndexOfTabTitle(event.target, this.enabledTabTitles);
     const nextTab = this.enabledTabTitles[currentIndex + 1] || this.enabledTabTitles[0];
     nextTab === null || nextTab === void 0 ? void 0 : nextTab.focus();
-    e.stopPropagation();
-    e.preventDefault();
+    event.stopPropagation();
+    event.preventDefault();
   }
-  internalActivateTabHandler(e) {
-    this.selectedTab = e.detail.tab
-      ? e.detail.tab
-      : this.getIndexOfTabTitle(e.target);
-    e.stopPropagation();
-    e.preventDefault();
+  internalActivateTabHandler(event) {
+    this.selectedTab = event.detail.tab
+      ? event.detail.tab
+      : this.getIndexOfTabTitle(event.target);
+    event.stopPropagation();
+    event.preventDefault();
   }
-  activateTabHandler(e) {
+  activateTabHandler(event) {
     this.calciteTabChange.emit({
       tab: this.selectedTab
     });
-    e.stopPropagation();
-    e.preventDefault();
+    event.stopPropagation();
+    event.preventDefault();
   }
   /**
    * Check for active tabs on register and update selected
    *
-   * @param e
+   * @param event
    */
-  updateTabTitles(e) {
-    if (e.target.active) {
-      this.selectedTab = e.detail;
+  updateTabTitles(event) {
+    if (event.target.active) {
+      this.selectedTab = event.detail;
     }
   }
-  globalInternalTabChangeHandler(e) {
+  globalInternalTabChangeHandler(event) {
     if (this.syncId &&
-      e.target !== this.el &&
-      e.target.syncId === this.syncId &&
-      this.selectedTab !== e.detail.tab) {
-      this.selectedTab = e.detail.tab;
-      e.stopPropagation();
+      event.target !== this.el &&
+      event.target.syncId === this.syncId &&
+      this.selectedTab !== event.detail.tab) {
+      this.selectedTab = event.detail.tab;
+      event.stopPropagation();
     }
-    e.stopPropagation();
+    event.stopPropagation();
   }
   updateOffsetPosition() {
     var _a, _b, _c, _d, _e;

package/dist/collection/components/tab-title/tab-title.css

@@ -71,13 +71,21 @@
 * Currently only used in Checkbox.
 */
 :root {
-  --calcite-popper-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
 }
 
 :host([hidden]) {
   display: none;
 }
 
+:host([disabled]) {
+  pointer-events: none;
+  cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+
 :host {
   display: block;
   flex: 0 1 auto;
@@ -88,26 +96,24 @@
 }
 
 :host([layout=center]) {
-  margin-top: 0px;
-  margin-bottom: 0px;
-  margin-left: 1.25rem;
-  margin-right: 1.25rem;
+  margin-block: 0px;
+  margin-inline: 1.25rem;
   text-align: center;
   flex-basis: 12rem;
 }
 
 :host([position=below]) a {
-  border-bottom-width: 0px;
-  border-top-width: 2px;
-  border-top-color: transparent;
-  border-top-style: solid;
+  border-block-end-width: 0px;
+  border-block-start-width: 2px;
+  border-block-start-color: transparent;
+  border-block-start-style: solid;
 }
 
 :host([position=bottom]) a {
-  border-bottom-width: 0px;
-  border-top-width: 2px;
-  border-top-color: transparent;
-  border-top-style: solid;
+  border-block-end-width: 0px;
+  border-block-start-width: 2px;
+  border-block-start-color: transparent;
+  border-block-start-style: solid;
 }
 
 :host a {
@@ -133,13 +139,6 @@
   color: var(--calcite-ui-text-1);
 }
 
-:host([disabled]) {
-  pointer-events: none;
-  cursor: default;
-  -webkit-user-select: none;
-          user-select: none;
-  opacity: var(--calcite-ui-opacity-disabled);
-}
 :host([disabled]) span, 
 :host([disabled]) a {
   pointer-events: none;
@@ -156,16 +155,14 @@
 }
 :host([scale=s]) a, 
 :host([scale=s]) span {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
+  padding-block: 0.25rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
 }
 
 :host([scale=m]) a, 
 :host([scale=m]) span {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  padding-block: 0.5rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
@@ -175,8 +172,7 @@
 }
 :host([scale=l]) a, 
 :host([scale=l]) span {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
+  padding-block: 0.75rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
 }
@@ -185,8 +181,8 @@ a,
 span {
   box-sizing: border-box;
   display: flex;
-  height: 100%;
-  width: 100%;
+  block-size: 100%;
+  inline-size: 100%;
   cursor: pointer;
   -webkit-appearance: none;
           appearance: none;
@@ -194,17 +190,15 @@ span {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  border-bottom-width: 2px;
-  padding-left: 0px;
-  padding-right: 0px;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  border-block-end-width: 2px;
+  padding-inline: 0px;
+  padding-block: 0.5rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
   color: var(--calcite-ui-text-3);
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
-  border-bottom-color: transparent;
-  border-bottom-style: solid;
+  border-block-end-color: transparent;
+  border-block-end-style: solid;
 }
 
 span {
@@ -264,17 +258,17 @@ span {
 }
 
 :host([bordered]) a {
-  border-bottom-style: unset;
+  border-block-end-style: unset;
   border-inline-start: 1px solid transparent;
   border-inline-end: 1px solid transparent;
 }
 
 :host([bordered][position=below]) a {
-  border-top-style: unset;
+  border-block-start-style: unset;
 }
 
 :host([bordered][position=bottom]) a {
-  border-top-style: unset;
+  border-block-start-style: unset;
 }
 
 :host([active][bordered]) a {
@@ -284,20 +278,17 @@ span {
 
 :host([bordered]) a, 
 :host([bordered]) span {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
+  padding-inline: 0.75rem;
 }
 
 :host([bordered][scale=s]) a, 
 :host([bordered][scale=s]) span {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  padding-inline: 0.5rem;
 }
 
 :host([bordered][scale=l]) a, 
 :host([bordered][scale=l]) span {
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-inline: 1rem;
 }
 
 @media (forced-colors: active) {
@@ -311,26 +302,26 @@ span {
   }
 
   :host([bordered]) a {
-    border-bottom-style: solid;
+    border-block-end-style: solid;
   }
 
   :host([bordered][position=below]) a {
-    border-top-style: solid;
+    border-block-start-style: solid;
   }
 
   :host([bordered][position=bottom]) a {
-    border-top-style: solid;
+    border-block-start-style: solid;
   }
 
   :host([bordered][active]) a {
-    border-bottom-style: none;
+    border-block-end-style: none;
   }
 
   :host([bordered][position=below][active]) a {
-    border-top-style: none;
+    border-block-start-style: none;
   }
 
   :host([bordered][position=bottom][active]) a {
-    border-top-style: none;
+    border-block-start-style: none;
   }
 }