@esri/calcite-components 1.0.0-beta.83 → 1.0.0-beta.84

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

@@ -175,7 +175,8 @@
   inset-inline: -1px auto;
 }
 
-:host(:hover) .handle, :host(:focus) .handle {
+:host(:hover) .handle, 
+:host(:focus) .handle {
   border-color: var(--calcite-ui-brand);
   box-shadow: inset 0 0 0 1px var(--calcite-ui-brand);
 }

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.83
+ * v1.0.0-beta.84
  */
 import { Component, Element, Event, h, Host, Method, Prop, Watch } from "@stencil/core";
 import { focusElement, toAriaBoolean } from "../../utils/dom";

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

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.83
+ * v1.0.0-beta.84
  */
 import { Component, Prop, Element, Listen, Method, Event, h, State, Host } from "@stencil/core";
 import { guid } from "../../utils/guid";

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

@@ -102,10 +102,6 @@
   overflow: auto;
 }
 
-:host([layout=center]) .tab-nav {
-  justify-content: center;
-}
-
 .tab-nav-active-indicator-container {
   position: absolute;
   left: 0px;
@@ -133,11 +129,21 @@
   top: 0px;
 }
 
+:host([position=bottom]) .tab-nav-active-indicator {
+  bottom: unset;
+  top: 0px;
+}
+
 :host([position=below]) .tab-nav-active-indicator-container {
   bottom: unset;
   top: 0px;
 }
 
+:host([position=bottom]) .tab-nav-active-indicator-container {
+  bottom: unset;
+  top: 0px;
+}
+
 :host([bordered]) .tab-nav-active-indicator-container {
   bottom: unset;
 }
@@ -147,6 +153,11 @@
   top: unset;
 }
 
+:host([bordered][position=bottom]) .tab-nav-active-indicator-container {
+  bottom: 0;
+  top: unset;
+}
+
 @media (forced-colors: active) {
   .tab-nav-active-indicator {
     background-color: highlight;

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.83
+ * v1.0.0-beta.84
  */
 import { Component, Element, Event, h, Host, Listen, Prop, State, Watch } from "@stencil/core";
 import { getElementDir, filterDirectChildren } from "../../utils/dom";
@@ -22,7 +22,7 @@ export class TabNav {
     /**
      * @internal
      */
-    this.position = "below";
+    this.position = "bottom";
     /**
      * @internal
      */
@@ -127,14 +127,14 @@ export class TabNav {
     const currentIndex = this.getIndexOfTabTitle(e.target, this.enabledTabTitles);
     const previousTab = this.enabledTabTitles[currentIndex - 1] ||
       this.enabledTabTitles[this.enabledTabTitles.length - 1];
-    previousTab.focus();
+    previousTab === null || previousTab === void 0 ? void 0 : previousTab.focus();
     e.stopPropagation();
     e.preventDefault();
   }
   focusNextTabHandler(e) {
     const currentIndex = this.getIndexOfTabTitle(e.target, this.enabledTabTitles);
     const nextTab = this.enabledTabTitles[currentIndex + 1] || this.enabledTabTitles[0];
-    nextTab.focus();
+    nextTab === null || nextTab === void 0 ? void 0 : nextTab.focus();
     e.stopPropagation();
     e.preventDefault();
   }
@@ -302,7 +302,7 @@ export class TabNav {
       "mutable": true,
       "complexType": {
         "original": "TabPosition",
-        "resolved": "\"above\" | \"below\"",
+        "resolved": "\"above\" | \"below\" | \"bottom\" | \"top\"",
         "references": {
           "TabPosition": {
             "location": "import",
@@ -321,7 +321,7 @@ export class TabNav {
       },
       "attribute": "position",
       "reflect": true,
-      "defaultValue": "\"below\""
+      "defaultValue": "\"bottom\""
     },
     "bordered": {
       "type": "boolean",

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

@@ -103,6 +103,13 @@
   border-top-style: solid;
 }
 
+:host([position=bottom]) a {
+  border-bottom-width: 0px;
+  border-top-width: 2px;
+  border-top-color: transparent;
+  border-top-style: solid;
+}
+
 :host a {
   outline-color: transparent;
 }
@@ -112,7 +119,9 @@
   outline-offset: -2px;
 }
 
-:host(:active) a, :host(:focus) a, :host(:hover) a {
+:host(:active) a, 
+:host(:focus) a, 
+:host(:hover) a {
   border-color: var(--calcite-ui-border-2);
   color: var(--calcite-ui-text-1);
   -webkit-text-decoration-line: none;
@@ -131,7 +140,8 @@
           user-select: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
-:host([disabled]) span, :host([disabled]) a {
+:host([disabled]) span, 
+:host([disabled]) a {
   pointer-events: none;
   opacity: 0.5;
 }
@@ -144,14 +154,16 @@
 :host([scale=s]) {
   margin-inline-end: 1rem;
 }
-:host([scale=s]) a, :host([scale=s]) span {
+:host([scale=s]) a, 
+:host([scale=s]) span {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
 }
 
-:host([scale=m]) a, :host([scale=m]) span {
+:host([scale=m]) a, 
+:host([scale=m]) span {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   font-size: var(--calcite-font-size--1);
@@ -161,14 +173,16 @@
 :host([scale=l]) {
   margin-inline-end: 1.5rem;
 }
-:host([scale=l]) a, :host([scale=l]) span {
+:host([scale=l]) a, 
+:host([scale=l]) span {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
 }
 
-a, span {
+a, 
+span {
   box-sizing: border-box;
   display: flex;
   height: 100%;
@@ -235,39 +249,53 @@ 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][active][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 {
   position: relative;
 }
 
 :host([bordered]:hover) a {
   background-color: var(--calcite-button-transparent-hover);
-  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
 }
 
 :host([bordered]) a {
   border-bottom-style: unset;
+  border-inline-start: 1px solid transparent;
+  border-inline-end: 1px solid transparent;
 }
 
 :host([bordered][position=below]) a {
   border-top-style: unset;
 }
 
+:host([bordered][position=bottom]) a {
+  border-top-style: unset;
+}
+
 :host([active][bordered]) a {
-  border-left: 1px solid var(--calcite-ui-border-1);
-  border-right: 1px solid var(--calcite-ui-border-1);
+  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]) a, 
+:host([bordered]) span {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
 
-:host([bordered][scale=s]) a, :host([bordered][scale=s]) span {
+:host([bordered][scale=s]) a, 
+:host([bordered][scale=s]) span {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
 
-:host([bordered][scale=l]) a, :host([bordered][scale=l]) span {
+:host([bordered][scale=l]) a, 
+:host([bordered][scale=l]) span {
   padding-left: 1rem;
   padding-right: 1rem;
 }
@@ -290,6 +318,10 @@ span {
     border-top-style: solid;
   }
 
+  :host([bordered][position=bottom]) a {
+    border-top-style: solid;
+  }
+
   :host([bordered][active]) a {
     border-bottom-style: none;
   }
@@ -297,4 +329,8 @@ span {
   :host([bordered][position=below][active]) a {
     border-top-style: none;
   }
+
+  :host([bordered][position=bottom][active]) a {
+    border-top-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.83
+ * v1.0.0-beta.84
  */
 import { Build, Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -83,14 +83,13 @@ export class TabTitle {
   }
   render() {
     const id = this.el.id || this.guid;
-    const showSideBorders = this.bordered && !this.disabled && this.layout !== "center";
     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: {
           container: true,
           "container--has-text": this.hasText
-        }, style: showSideBorders && { width: `${this.parentTabNavEl.indicatorWidth}px` } },
+        } },
         this.iconStart ? iconStartEl : null,
         h("slot", null),
         this.iconEnd ? iconEndEl : null)));
@@ -324,7 +323,7 @@ export class TabTitle {
       "mutable": true,
       "complexType": {
         "original": "TabPosition",
-        "resolved": "\"above\" | \"below\"",
+        "resolved": "\"above\" | \"below\" | \"bottom\" | \"top\"",
         "references": {
           "TabPosition": {
             "location": "import",

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

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

@@ -92,6 +92,10 @@
   margin-bottom: -1px;
 }
 
+:host([bordered]:not([position=bottom])) ::slotted(calcite-tab-nav) {
+  margin-bottom: -1px;
+}
+
 :host([bordered][position=below]) ::slotted(calcite-tab-nav) {
   margin-top: -1px;
 }
@@ -100,6 +104,10 @@
   box-shadow: inset 0 1px 0 var(--calcite-ui-border-1), inset 0 -1px 0 var(--calcite-ui-border-1);
 }
 
+:host([bordered][position=bottom]) {
+  box-shadow: inset 0 1px 0 var(--calcite-ui-border-1), inset 0 -1px 0 var(--calcite-ui-border-1);
+}
+
 :host([bordered]) section {
   border-width: 1px;
   border-style: solid;
@@ -122,6 +130,10 @@
   flex-direction: column-reverse;
 }
 
+:host([position=bottom]) {
+  flex-direction: column-reverse;
+}
+
 section {
   display: flex;
   flex-grow: 1;
@@ -138,10 +150,21 @@ section {
   border-bottom-color: var(--calcite-ui-border-1);
 }
 
+:host([position=bottom]) section {
+  flex-direction: column-reverse;
+  border-top-width: 0px;
+  border-bottom-width: 1px;
+  border-bottom-color: var(--calcite-ui-border-1);
+}
+
 :host([position=below]:not([bordered])) section {
   border-bottom-style: solid;
 }
 
+:host([position=bottom]:not([bordered])) section {
+  border-bottom-style: solid;
+}
+
 @media (forced-colors: active) {
   :host([bordered]) section {
     border-top-width: 0px;
@@ -152,4 +175,9 @@ section {
     border-top-width: 1px;
     border-bottom-width: 0px;
   }
+
+  :host([position=bottom][bordered]) section {
+    border-top-width: 1px;
+    border-bottom-width: 0px;
+  }
 }

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.83
+ * v1.0.0-beta.84
  */
 import { Component, Prop, h, Element, Listen, State, Fragment } from "@stencil/core";
 import { SLOTS } from "./resources";
@@ -21,9 +21,10 @@ export class Tabs {
      */
     this.layout = "inline";
     /**
-     * Display the tabs above (default) or below the tab content
+     * Display the tabs top (default) or bottom of the tab content. above and below are deprecated.
+     *
      */
-    this.position = "above";
+    this.position = "top";
     /**
      * Specify the scale of the tabs component, defaults to m
      */
@@ -194,7 +195,7 @@ export class Tabs {
       "mutable": false,
       "complexType": {
         "original": "TabPosition",
-        "resolved": "\"above\" | \"below\"",
+        "resolved": "\"above\" | \"below\" | \"bottom\" | \"top\"",
         "references": {
           "TabPosition": {
             "location": "import",
@@ -206,11 +207,11 @@ export class Tabs {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Display the tabs above (default) or below the tab content"
+        "text": "Display the tabs top (default) or bottom of the tab content. above and below are deprecated."
       },
       "attribute": "position",
       "reflect": true,
-      "defaultValue": "\"above\""
+      "defaultValue": "\"top\""
     },
     "scale": {
       "type": "string",

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

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

@@ -194,9 +194,11 @@
   opacity: 1;
 }
 
-:host(:hover) .heading, :host([active]) .heading {
+:host(:hover) .heading, 
+:host([active]) .heading {
   color: var(--calcite-ui-text-1);
 }
-:host(:hover) .description, :host([active]) .description {
+:host(:hover) .description, 
+:host([active]) .description {
   color: var(--calcite-ui-text-2);
 }

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

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

@@ -102,7 +102,8 @@
 :host .container.heading-only {
   align-items: center;
 }
-:host .container:not(.input-enabled) ::slotted(calcite-checkbox), :host .container:not(.input-enabled) ::slotted(calcite-radio-button) {
+:host .container:not(.input-enabled) ::slotted(calcite-checkbox), 
+:host .container:not(.input-enabled) ::slotted(calcite-radio-button) {
   position: absolute;
   width: 1px;
   height: 1px;

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.83
+ * v1.0.0-beta.84
  */
 import { Component, Element, Event, h, Prop, Listen, Watch, State, Method } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -53,7 +53,8 @@ export class TileSelect {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    this.input.setFocus();
+    var _a;
+    (_a = this.input) === null || _a === void 0 ? void 0 : _a.setFocus();
   }
   //--------------------------------------------------------------------------
   //

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

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

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

@@ -109,7 +109,7 @@
   justify-content: center;
   background-color: var(--calcite-ui-foreground-1);
 }
-.time-picker .button:hover, .time-picker .button:focus {
+.time-picker .button:hover,  .time-picker .button:focus {
   background-color: var(--calcite-ui-foreground-2);
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -143,7 +143,7 @@
 .time-picker .input:hover {
   box-shadow: inset 0 0 0 2px var(--calcite-ui-foreground-2);
 }
-.time-picker .input:focus, .time-picker .input:hover:focus {
+.time-picker .input:focus,  .time-picker .input:hover:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
   box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
@@ -151,7 +151,8 @@
 .time-picker.scale-s {
   font-size: var(--calcite-font-size--1);
 }
-.time-picker.scale-s .button, .time-picker.scale-s .input {
+.time-picker.scale-s .button, 
+.time-picker.scale-s .input {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   padding-top: 0.25rem;
@@ -163,7 +164,8 @@
 .time-picker.scale-m {
   font-size: var(--calcite-font-size-0);
 }
-.time-picker.scale-m .button, .time-picker.scale-m .input {
+.time-picker.scale-m .button, 
+.time-picker.scale-m .input {
   padding-left: 1rem;
   padding-right: 1rem;
   padding-top: 0.5rem;
@@ -175,7 +177,8 @@
 .time-picker.scale-l {
   font-size: var(--calcite-font-size-1);
 }
-.time-picker.scale-l .button, .time-picker.scale-l .input {
+.time-picker.scale-l .button, 
+.time-picker.scale-l .input {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
   padding-top: 0.75rem;

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-beta.83
+ * v1.0.0-beta.84
  */
 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-beta.83
+ * v1.0.0-beta.84
  */
 import { HEADING_LEVEL as PARENT_HEADING_LEVEL } from "../tip-manager/resources";
 export const CSS = {

package/dist/collection/components/tip/tip.css

@@ -101,7 +101,8 @@
   padding: 1rem;
 }
 
-:host([dismissed]), :host([dismissed]) .container {
+:host([dismissed]), 
+:host([dismissed]) .container {
   display: none;
 }
 
@@ -147,7 +148,8 @@ h3.heading {
   line-height: 1.25rem;
 }
 
-h4.heading, h5.heading {
+h4.heading, 
+h5.heading {
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }

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-beta.83
+ * v1.0.0-beta.84
  */
 import { Component, Element, Event, Prop, h, Fragment } from "@stencil/core";
 import { CSS, ICONS, SLOTS, TEXT, HEADING_LEVEL } from "./resources";

package/dist/collection/components/tip-group/tip-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.83
+ * v1.0.0-beta.84
  */
 import { Component, Prop, h } from "@stencil/core";
 /**