@esri/calcite-components 1.0.0-next.536 → 1.0.0-next.539

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;
@@ -94,25 +102,25 @@
   flex-basis: 12rem;
 }
 
-:host([position=below]) a {
+:host([position=below]) .container {
   border-block-end-width: 0px;
   border-block-start-width: 2px;
   border-block-start-color: transparent;
   border-block-start-style: solid;
 }
 
-:host([position=bottom]) a {
+:host([position=bottom]) .container {
   border-block-end-width: 0px;
   border-block-start-width: 2px;
   border-block-start-color: transparent;
   border-block-start-style: solid;
 }
 
-:host a {
+:host .container {
   outline-color: transparent;
 }
 
-:host(:focus) a {
+:host(:focus) .container {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
@@ -126,20 +134,12 @@
           text-decoration-line: none;
 }
 
-:host([active]) a {
+:host([active]) .container {
   border-color: transparent;
   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 {
+:host([disabled]) .container {
   pointer-events: none;
   opacity: 0.5;
 }
@@ -152,15 +152,13 @@
 :host([scale=s]) {
   margin-inline-end: 1rem;
 }
-:host([scale=s]) a, 
-:host([scale=s]) span {
+:host([scale=s]) .container {
   padding-block: 0.25rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
 }
 
-:host([scale=m]) a, 
-:host([scale=m]) span {
+:host([scale=m]) .container {
   padding-block: 0.5rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
@@ -169,15 +167,13 @@
 :host([scale=l]) {
   margin-inline-end: 1.5rem;
 }
-:host([scale=l]) a, 
-:host([scale=l]) span {
+:host([scale=l]) .container {
   padding-block: 0.75rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
 }
 
-a, 
-span {
+.container {
   box-sizing: border-box;
   display: flex;
   block-size: 100%;
@@ -200,10 +196,6 @@ span {
   border-block-end-style: solid;
 }
 
-span {
-  cursor: default;
-}
-
 .calcite-tab-title--icon {
   position: relative;
   margin: 0px;
@@ -246,47 +238,44 @@ span {
   box-shadow: inset 0 2px 0 var(--calcite-ui-foreground-1);
 }
 
-:host([bordered]:hover) a, 
-:host([bordered]:focus) a, 
-:host([bordered]:active) a {
+:host([bordered]:hover) .container, 
+:host([bordered]:focus) .container, 
+:host([bordered]:active) .container {
   position: relative;
 }
 
-:host([bordered]:hover) a {
+:host([bordered]:hover) .container {
   background-color: var(--calcite-button-transparent-hover);
 }
 
-:host([bordered]) a {
+:host([bordered]) .container {
   border-block-end-style: unset;
   border-inline-start: 1px solid transparent;
   border-inline-end: 1px solid transparent;
 }
 
-:host([bordered][position=below]) a {
+:host([bordered][position=below]) .container {
   border-block-start-style: unset;
 }
 
-:host([bordered][position=bottom]) a {
+:host([bordered][position=bottom]) .container {
   border-block-start-style: unset;
 }
 
-:host([active][bordered]) a {
+:host([active][bordered]) .container {
   border-inline-start-color: var(--calcite-ui-border-1);
   border-inline-end-color: var(--calcite-ui-border-1);
 }
 
-:host([bordered]) a, 
-:host([bordered]) span {
+:host([bordered]) .container {
   padding-inline: 0.75rem;
 }
 
-:host([bordered][scale=s]) a, 
-:host([bordered][scale=s]) span {
+:host([bordered][scale=s]) .container {
   padding-inline: 0.5rem;
 }
 
-:host([bordered][scale=l]) a, 
-:host([bordered][scale=l]) span {
+:host([bordered][scale=l]) .container {
   padding-inline: 1rem;
 }
 
@@ -296,31 +285,31 @@ span {
     outline-offset: 0;
   }
 
-  :host(:focus) a {
+  :host(:focus) .container {
     outline-color: highlight;
   }
 
-  :host([bordered]) a {
+  :host([bordered]) .container {
     border-block-end-style: solid;
   }
 
-  :host([bordered][position=below]) a {
+  :host([bordered][position=below]) .container {
     border-block-start-style: solid;
   }
 
-  :host([bordered][position=bottom]) a {
+  :host([bordered][position=bottom]) .container {
     border-block-start-style: solid;
   }
 
-  :host([bordered][active]) a {
+  :host([bordered][active]) .container {
     border-block-end-style: none;
   }
 
-  :host([bordered][position=below][active]) a {
+  :host([bordered][position=below][active]) .container {
     border-block-start-style: none;
   }
 
-  :host([bordered][position=bottom][active]) a {
+  :host([bordered][position=bottom][active]) .container {
     border-block-start-style: none;
   }
 }

package/dist/collection/components/tab-title/tab-title.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-next.536
+ * v1.0.0-next.539
  */
 import { Build, Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -85,8 +85,8 @@ export class TabTitle {
     const id = this.el.id || this.guid;
     const iconStartEl = (h("calcite-icon", { class: "calcite-tab-title--icon icon-start", flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
     const iconEndEl = (h("calcite-icon", { class: "calcite-tab-title--icon icon-end", flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
-    return (h(Host, { "aria-controls": this.controls, "aria-expanded": toAriaBoolean(this.active), id: id, role: "tab" },
-      h("a", { class: {
+    return (h(Host, { "aria-controls": this.controls, "aria-selected": toAriaBoolean(this.active), id: id, role: "tab", tabIndex: this.active ? 0 : -1 },
+      h("div", { class: {
           container: true,
           "container--has-text": this.hasText
         } },
@@ -98,7 +98,9 @@ export class TabTitle {
     this.calciteInternalTabTitleRegister.emit(await this.getTabIdentifier());
   }
   componentDidRender() {
-    updateHostInteraction(this, true);
+    updateHostInteraction(this, () => {
+      return this.active;
+    });
   }
   //--------------------------------------------------------------------------
   //
@@ -125,14 +127,15 @@ export class TabTitle {
   onClick() {
     this.emitActiveTab();
   }
-  keyDownHandler(e) {
-    switch (e.key) {
+  keyDownHandler(event) {
+    switch (event.key) {
       case " ":
       case "Enter":
         this.emitActiveTab();
-        e.preventDefault();
+        event.preventDefault();
         break;
       case "ArrowRight":
+        event.preventDefault();
         if (getElementDir(this.el) === "ltr") {
           this.calciteInternalTabsFocusNext.emit();
         }
@@ -141,6 +144,7 @@ export class TabTitle {
         }
         break;
       case "ArrowLeft":
+        event.preventDefault();
         if (getElementDir(this.el) === "ltr") {
           this.calciteInternalTabsFocusPrevious.emit();
         }
@@ -474,8 +478,8 @@ export class TabTitle {
         "text": ""
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {
@@ -492,8 +496,8 @@ export class TabTitle {
         "text": ""
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }, {

package/dist/collection/components/tabs/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-next.536
+ * v1.0.0-next.539
  */
 export {};

package/dist/collection/components/tabs/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.0.0-next.536
+ * v1.0.0-next.539
  */
 export const SLOTS = {
   tabNav: "tab-nav"

package/dist/collection/components/tabs/tabs.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]) {

package/dist/collection/components/tabs/tabs.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-next.536
+ * v1.0.0-next.539
  */
 import { Component, Prop, h, Element, Listen, State, Fragment } from "@stencil/core";
 import { SLOTS } from "./resources";
@@ -77,40 +77,40 @@ export class Tabs {
   //
   //--------------------------------------------------------------------------
   /**
-   * @param e
+   * @param event
    * @internal
    */
-  calciteInternalTabTitleRegister(e) {
-    this.titles = [...this.titles, e.target];
+  calciteInternalTabTitleRegister(event) {
+    this.titles = [...this.titles, event.target];
     this.registryHandler();
-    e.stopPropagation();
+    event.stopPropagation();
   }
   /**
-   * @param e
+   * @param event
    * @internal
    */
-  calciteTabTitleUnregister(e) {
-    this.titles = this.titles.filter((el) => el !== e.detail);
+  calciteTabTitleUnregister(event) {
+    this.titles = this.titles.filter((el) => el !== event.detail);
     this.registryHandler();
-    e.stopPropagation();
+    event.stopPropagation();
   }
   /**
-   * @param e
+   * @param event
    * @internal
    */
-  calciteInternalTabRegister(e) {
-    this.tabs = [...this.tabs, e.target];
+  calciteInternalTabRegister(event) {
+    this.tabs = [...this.tabs, event.target];
     this.registryHandler();
-    e.stopPropagation();
+    event.stopPropagation();
   }
   /**
-   * @param e
+   * @param event
    * @internal
    */
-  calciteTabUnregister(e) {
-    this.tabs = this.tabs.filter((el) => el !== e.detail);
+  calciteTabUnregister(event) {
+    this.tabs = this.tabs.filter((el) => el !== event.detail);
     this.registryHandler();
-    e.stopPropagation();
+    event.stopPropagation();
   }
   //--------------------------------------------------------------------------
   //
@@ -127,11 +127,11 @@ export class Tabs {
     let tabIds;
     let titleIds;
     // determine if we are using `tab` based or `index` based tab identifiers.
-    if (this.tabs.some((e) => e.tab) || this.titles.some((e) => e.tab)) {
+    if (this.tabs.some((el) => el.tab) || this.titles.some((el) => el.tab)) {
       // if we are using `tab` based identifiers sort by `tab` to account for
       // possible out of order tabs and get the id of each tab
-      tabIds = this.tabs.sort((a, b) => a.tab.localeCompare(b.tab)).map((e) => e.id);
-      titleIds = this.titles.sort((a, b) => a.tab.localeCompare(b.tab)).map((e) => e.id);
+      tabIds = this.tabs.sort((a, b) => a.tab.localeCompare(b.tab)).map((el) => el.id);
+      titleIds = this.titles.sort((a, b) => a.tab.localeCompare(b.tab)).map((el) => el.id);
     }
     else {
       // if we are using index based tabs then the `<calcite-tab>` and

package/dist/collection/components/tile/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.0.0-next.536
+ * v1.0.0-next.539
  */
 export const SLOTS = {
   contentStart: "content-start",

package/dist/collection/components/tile/tile.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 {
   box-sizing: border-box;
   display: inline-block;
@@ -181,13 +189,6 @@
   text-align: center;
 }
 
-: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 */

package/dist/collection/components/tile/tile.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-next.536
+ * v1.0.0-next.539
  */
 import { Component, Element, Fragment, h, Prop } from "@stencil/core";
 import { SLOTS } from "./resources";

package/dist/collection/components/tile-select/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-next.536
+ * v1.0.0-next.539
  */
 export {};

package/dist/collection/components/tile-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.0.0-next.536
+ * v1.0.0-next.539
  */
 export const CSS = {
   checked: "checked",

package/dist/collection/components/tile-select/tile-select.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;
 }
@@ -179,13 +187,6 @@
   box-shadow: 0 0 0 1px var(--calcite-ui-brand);
 }
 
-: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 */

package/dist/collection/components/tile-select/tile-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.0.0-next.536
+ * v1.0.0-next.539
  */
 import { Component, Element, Event, h, Prop, Listen, Watch, State, Method } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -434,8 +434,8 @@ export class TileSelect {
         "text": "Emits a custom change event.  For checkboxes, it emits when the checkbox is checked or unchecked.  For radios it only emits when it is checked."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }

package/dist/collection/components/tile-select-group/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-next.536
+ * v1.0.0-next.539
  */
 export {};

package/dist/collection/components/tile-select-group/tile-select-group.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: flex;
   flex-wrap: wrap;
@@ -91,13 +99,6 @@
   flex-direction: column;
 }
 
-: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 */

package/dist/collection/components/tile-select-group/tile-select-group.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-next.536
+ * v1.0.0-next.539
  */
 import { Component, h, Prop, Element } from "@stencil/core";
 import { updateHostInteraction } from "../../utils/interactive";

package/dist/collection/components/time-picker/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.0.0-next.536
+ * v1.0.0-next.539
  */
 export const CSS = {
   button: "button",

package/dist/collection/components/time-picker/time-picker.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]) {

package/dist/collection/components/time-picker/time-picker.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-next.536
+ * v1.0.0-next.539
  */
 import { Component, Element, h, Prop, Event, Watch, State, Listen, Method } from "@stencil/core";
 import { isActivationKey, numberKeys } from "../../utils/key";

package/dist/collection/components/tip/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.0.0-next.536
+ * v1.0.0-next.539
  */
 import { HEADING_LEVEL as PARENT_HEADING_LEVEL } from "../tip-manager/resources";
 export const CSS = {

package/dist/collection/components/tip/tip.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]) {

package/dist/collection/components/tip/tip.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-next.536
+ * v1.0.0-next.539
  */
 import { Component, Element, Event, Prop, h, Fragment } from "@stencil/core";
 import { CSS, ICONS, SLOTS, TEXT, HEADING_LEVEL } from "./resources";
@@ -223,8 +223,8 @@ export class Tip {
         "text": "Emitted when the component has been dismissed."
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
+        "original": "void",
+        "resolved": "void",
         "references": {}
       }
     }]; }