@esri/calcite-components 1.0.0-beta.89 → 1.0.0-beta.91

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

@@ -75,7 +75,7 @@
 }
 
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 
 :host([disabled]) {
@@ -102,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;
 }
@@ -134,13 +134,12 @@
           text-decoration-line: none;
 }
 
-:host([active]) a {
+:host([selected]) .container {
   border-color: transparent;
   color: var(--calcite-ui-text-1);
 }
 
-:host([disabled]) span, 
-:host([disabled]) a {
+:host([disabled]) .container {
   pointer-events: none;
   opacity: 0.5;
 }
@@ -153,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;
@@ -170,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%;
@@ -201,10 +196,6 @@ span {
   border-block-end-style: solid;
 }
 
-span {
-  cursor: default;
-}
-
 .calcite-tab-title--icon {
   position: relative;
   margin: 0px;
@@ -235,59 +226,56 @@ span {
   margin-inline-end: 0;
 }
 
-:host([bordered][active]) {
+:host([bordered][selected]) {
   box-shadow: inset 0px -2px var(--calcite-ui-foreground-1);
 }
 
-:host([bordered][active][position=below]) {
+:host([bordered][selected][position=below]) {
   box-shadow: inset 0 2px 0 var(--calcite-ui-foreground-1);
 }
 
-:host([bordered][active][position=bottom]) {
+:host([bordered][selected][position=bottom]) {
   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([selected][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;
 }
 
@@ -297,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][selected]) .container {
     border-block-end-style: none;
   }
 
-  :host([bordered][position=below][active]) a {
+  :host([bordered][position=below][selected]) .container {
     border-block-start-style: none;
   }
 
-  :host([bordered][position=bottom][active]) a {
+  :host([bordered][position=bottom][selected]) .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-beta.89
+ * v1.0.0-beta.91
  */
 import { Build, Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -18,8 +18,16 @@ export class TabTitle {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** Show this tab title as selected */
+    /**
+     * Show this tab title as selected
+     *
+     * @deprecated Use selected instead.
+     */
     this.active = false;
+    /**
+     * When true, display this tab title as selected.
+     */
+    this.selected = false;
     /** Disable this tab title  */
     this.disabled = false;
     /**
@@ -37,8 +45,12 @@ export class TabTitle {
     this.hasText = false;
     this.guid = `calcite-tab-title-${guid()}`;
   }
-  activeTabChanged() {
-    if (this.active) {
+  activeHandler(value) {
+    this.selected = value;
+  }
+  selectedHandler(value) {
+    this.active = value;
+    if (this.selected) {
       this.emitActiveTab(false);
     }
   }
@@ -48,6 +60,13 @@ export class TabTitle {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    const { selected, active } = this;
+    if (selected) {
+      this.active = selected;
+    }
+    else if (active) {
+      this.activeHandler(active);
+    }
     this.setupTextContentObserver();
     this.parentTabNavEl = this.el.closest("calcite-tab-nav");
     this.parentTabsEl = this.el.closest("calcite-tabs");
@@ -64,7 +83,7 @@ export class TabTitle {
     if (Build.isBrowser) {
       this.updateHasText();
     }
-    if (this.tab && this.active) {
+    if (this.tab && this.selected) {
       this.emitActiveTab(false);
     }
   }
@@ -85,8 +104,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.selected), id: id, role: "tab", tabIndex: this.selected ? 0 : -1 },
+      h("div", { class: {
           container: true,
           "container--has-text": this.hasText
         } },
@@ -98,7 +117,9 @@ export class TabTitle {
     this.calciteInternalTabTitleRegister.emit(await this.getTabIdentifier());
   }
   componentDidRender() {
-    updateHostInteraction(this, true);
+    updateHostInteraction(this, () => {
+      return this.selected;
+    });
   }
   //--------------------------------------------------------------------------
   //
@@ -113,11 +134,11 @@ export class TabTitle {
       return;
     }
     if (this.tab) {
-      this.active = this.tab === event.detail.tab;
+      this.selected = this.tab === event.detail.tab;
     }
     else {
       this.getTabIndex().then((index) => {
-        this.active = index === event.detail.tab;
+        this.selected = index === event.detail.tab;
       });
     }
     event.stopPropagation();
@@ -133,6 +154,7 @@ export class TabTitle {
         event.preventDefault();
         break;
       case "ArrowRight":
+        event.preventDefault();
         if (getElementDir(this.el) === "ltr") {
           this.calciteInternalTabsFocusNext.emit();
         }
@@ -141,6 +163,7 @@ export class TabTitle {
         }
         break;
       case "ArrowLeft":
+        event.preventDefault();
         if (getElementDir(this.el) === "ltr") {
           this.calciteInternalTabsFocusPrevious.emit();
         }
@@ -212,13 +235,34 @@ export class TabTitle {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "Use selected instead."
+          }],
         "text": "Show this tab title as selected"
       },
       "attribute": "active",
       "reflect": true,
       "defaultValue": "false"
     },
+    "selected": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, display this tab title as selected."
+      },
+      "attribute": "selected",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,
@@ -415,7 +459,7 @@ export class TabTitle {
       "method": "calciteTabsActivate",
       "name": "calciteTabsActivate",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [{
@@ -438,7 +482,7 @@ export class TabTitle {
       "method": "calciteInternalTabsActivate",
       "name": "calciteInternalTabsActivate",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [{
@@ -464,7 +508,7 @@ export class TabTitle {
       "method": "calciteInternalTabsFocusNext",
       "name": "calciteInternalTabsFocusNext",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [{
@@ -482,7 +526,7 @@ export class TabTitle {
       "method": "calciteInternalTabsFocusPrevious",
       "name": "calciteInternalTabsFocusPrevious",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [{
@@ -500,7 +544,7 @@ export class TabTitle {
       "method": "calciteInternalTabTitleRegister",
       "name": "calciteInternalTabTitleRegister",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [{
@@ -601,7 +645,10 @@ export class TabTitle {
   static get elementRef() { return "el"; }
   static get watchers() { return [{
       "propName": "active",
-      "methodName": "activeTabChanged"
+      "methodName": "activeHandler"
+    }, {
+      "propName": "selected",
+      "methodName": "selectedHandler"
     }]; }
   static get listeners() { return [{
       "name": "calciteInternalTabChange",

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-beta.89
+ * v1.0.0-beta.91
  */
 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-beta.89
+ * v1.0.0-beta.91
  */
 export const SLOTS = {
   tabNav: "tab-nav"

package/dist/collection/components/tabs/tabs.css

@@ -75,7 +75,7 @@
 }
 
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 
 :host {

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-beta.89
+ * v1.0.0-beta.91
  */
 import { Component, Prop, h, Element, Listen, State, Fragment } from "@stencil/core";
 import { SLOTS } from "./resources";

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-beta.89
+ * v1.0.0-beta.91
  */
 export const SLOTS = {
   contentStart: "content-start",

package/dist/collection/components/tile/tile.css

@@ -75,7 +75,7 @@
 }
 
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 
 :host([disabled]) {

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-beta.89
+ * v1.0.0-beta.91
  */
 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-beta.89
+ * v1.0.0-beta.91
  */
 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-beta.89
+ * v1.0.0-beta.91
  */
 export const CSS = {
   checked: "checked",

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

@@ -75,7 +75,7 @@
 }
 
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 
 :host([disabled]) {
@@ -100,11 +100,9 @@
   padding: 0.75rem;
   position: relative;
   vertical-align: top;
-  z-index: 10;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
 }
 :host .container.checked {
-  z-index: 30;
   box-shadow: 0 0 0 1px var(--calcite-ui-brand);
 }
 :host .container.heading-only {
@@ -125,9 +123,6 @@
 :host .container.focused {
   outline-color: transparent;
 }
-:host .container.focused:not(.disabled) {
-  z-index: 30;
-}
 :host .container.focused:not(.disabled):not(.input-enabled) {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -4px;
@@ -180,9 +175,6 @@
   flex: 1 1 auto;
 }
 
-:host(:hover) .container {
-  z-index: 20;
-}
 :host(:hover) .container:not(.input-enabled) {
   box-shadow: 0 0 0 1px var(--calcite-ui-brand);
 }

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-beta.89
+ * v1.0.0-beta.91
  */
 import { Component, Element, Event, h, Prop, Listen, Watch, State, Method } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -427,7 +427,7 @@ export class TileSelect {
       "method": "calciteTileSelectChange",
       "name": "calciteTileSelectChange",
       "bubbles": true,
-      "cancelable": true,
+      "cancelable": false,
       "composed": true,
       "docs": {
         "tags": [],

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-beta.89
+ * v1.0.0-beta.91
  */
 export {};

package/dist/collection/components/tile-select-group/tile-select-group.css

@@ -75,7 +75,7 @@
 }
 
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 
 :host([disabled]) {

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-beta.89
+ * v1.0.0-beta.91
  */
 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-beta.89
+ * v1.0.0-beta.91
  */
 export const CSS = {
   button: "button",

package/dist/collection/components/time-picker/time-picker.css

@@ -75,7 +75,7 @@
 }
 
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 
 :host {