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

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

@@ -1,11 +1,11 @@
 /*!
  * 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.81
+ * 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";
-import { getElementDir, getElementProp } from "../../utils/dom";
+import { getElementDir, getElementProp, toAriaBoolean } from "../../utils/dom";
 import { createObserver } from "../../utils/observers";
 import { updateHostInteraction } from "../../utils/interactive";
 /**
@@ -22,14 +22,16 @@ export class TabTitle {
     this.active = false;
     /** Disable this tab title  */
     this.disabled = false;
-    /** @internal Parent tabs component bordered value */
+    /**
+     * @internal
+     */
     this.bordered = false;
     //--------------------------------------------------------------------------
     //
     //  Private State/Props
     //
     //--------------------------------------------------------------------------
-    /** watches for changing text content **/
+    /** watches for changing text content */
     this.mutationObserver = createObserver("mutation", () => this.updateHasText());
     /** determine if there is slotted text for styling purposes */
     this.hasText = false;
@@ -81,20 +83,19 @@ 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": this.active.toString(), id: id, role: "tab" },
+    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)));
   }
   async componentDidLoad() {
-    this.calciteTabTitleRegister.emit(await this.getTabIdentifier());
+    this.calciteInternalTabTitleRegister.emit(await this.getTabIdentifier());
   }
   componentDidRender() {
     updateHostInteraction(this, true);
@@ -133,18 +134,18 @@ export class TabTitle {
         break;
       case "ArrowRight":
         if (getElementDir(this.el) === "ltr") {
-          this.calciteTabsFocusNext.emit();
+          this.calciteInternalTabsFocusNext.emit();
         }
         else {
-          this.calciteTabsFocusPrevious.emit();
+          this.calciteInternalTabsFocusPrevious.emit();
         }
         break;
       case "ArrowLeft":
         if (getElementDir(this.el) === "ltr") {
-          this.calciteTabsFocusPrevious.emit();
+          this.calciteInternalTabsFocusPrevious.emit();
         }
         else {
-          this.calciteTabsFocusNext.emit();
+          this.calciteInternalTabsFocusNext.emit();
         }
         break;
     }
@@ -167,6 +168,8 @@ export class TabTitle {
     return this.tab ? this.tab : this.getTabIndex();
   }
   /**
+   * @param tabIds
+   * @param titleIds
    * @internal
    */
   async updateAriaInfo(tabIds = [], titleIds = []) {
@@ -308,7 +311,7 @@ export class TabTitle {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Parent tabs component layout value"
+            "text": undefined
           }],
         "text": ""
       },
@@ -320,7 +323,7 @@ export class TabTitle {
       "mutable": true,
       "complexType": {
         "original": "TabPosition",
-        "resolved": "\"above\" | \"below\"",
+        "resolved": "\"above\" | \"below\" | \"bottom\" | \"top\"",
         "references": {
           "TabPosition": {
             "location": "import",
@@ -333,7 +336,7 @@ export class TabTitle {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Parent tabs component or parent tab-nav component's position"
+            "text": undefined
           }],
         "text": ""
       },
@@ -358,7 +361,7 @@ export class TabTitle {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Parent tabs component or parent tab-nav component's scale"
+            "text": undefined
           }],
         "text": ""
       },
@@ -378,7 +381,7 @@ export class TabTitle {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Parent tabs component bordered value"
+            "text": undefined
           }],
         "text": ""
       },
@@ -419,7 +422,7 @@ export class TabTitle {
             "name": "see",
             "text": "[TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tab/interfaces.ts#L1)"
           }],
-        "text": "Fires when a specific tab is activated (`event.details`)"
+        "text": "Fires when a specific tab is activated. Emits the \"tab\" property or the index position."
       },
       "complexType": {
         "original": "TabChangeEventDetail",
@@ -458,8 +461,8 @@ export class TabTitle {
         }
       }
     }, {
-      "method": "calciteTabsFocusNext",
-      "name": "calciteTabsFocusNext",
+      "method": "calciteInternalTabsFocusNext",
+      "name": "calciteInternalTabsFocusNext",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -476,8 +479,8 @@ export class TabTitle {
         "references": {}
       }
     }, {
-      "method": "calciteTabsFocusPrevious",
-      "name": "calciteTabsFocusPrevious",
+      "method": "calciteInternalTabsFocusPrevious",
+      "name": "calciteInternalTabsFocusPrevious",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -494,8 +497,8 @@ export class TabTitle {
         "references": {}
       }
     }, {
-      "method": "calciteTabTitleRegister",
-      "name": "calciteTabTitleRegister",
+      "method": "calciteInternalTabTitleRegister",
+      "name": "calciteInternalTabTitleRegister",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -561,10 +564,16 @@ export class TabTitle {
       "complexType": {
         "signature": "(tabIds?: string[], titleIds?: string[]) => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "tabIds"
+              }],
             "text": ""
           }, {
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "titleIds"
+              }],
             "text": ""
           }],
         "references": {
@@ -577,6 +586,12 @@ export class TabTitle {
       "docs": {
         "text": "",
         "tags": [{
+            "name": "param",
+            "text": "tabIds"
+          }, {
+            "name": "param",
+            "text": "titleIds"
+          }, {
             "name": "internal",
             "text": undefined
           }]

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.81
+ * 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.81
+ * 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,12 +130,16 @@
   flex-direction: column-reverse;
 }
 
+:host([position=bottom]) {
+  flex-direction: column-reverse;
+}
+
 section {
   display: flex;
   flex-grow: 1;
+  overflow: hidden;
   border-top-width: 1px;
   border-top-color: var(--calcite-ui-border-1);
-  overflow: hidden;
   border-top-style: solid;
 }
 
@@ -138,6 +150,34 @@ 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;
+    border-bottom-width: 1px;
+  }
+
+  :host([position=below][bordered]) 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.81
+ * 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
      */
@@ -76,14 +77,16 @@ export class Tabs {
   //
   //--------------------------------------------------------------------------
   /**
+   * @param e
    * @internal
    */
-  calciteTabTitleRegister(e) {
+  calciteInternalTabTitleRegister(e) {
     this.titles = [...this.titles, e.target];
     this.registryHandler();
     e.stopPropagation();
   }
   /**
+   * @param e
    * @internal
    */
   calciteTabTitleUnregister(e) {
@@ -92,14 +95,16 @@ export class Tabs {
     e.stopPropagation();
   }
   /**
+   * @param e
    * @internal
    */
-  calciteTabRegister(e) {
+  calciteInternalTabRegister(e) {
     this.tabs = [...this.tabs, e.target];
     this.registryHandler();
     e.stopPropagation();
   }
   /**
+   * @param e
    * @internal
    */
   calciteTabUnregister(e) {
@@ -190,7 +195,7 @@ export class Tabs {
       "mutable": false,
       "complexType": {
         "original": "TabPosition",
-        "resolved": "\"above\" | \"below\"",
+        "resolved": "\"above\" | \"below\" | \"bottom\" | \"top\"",
         "references": {
           "TabPosition": {
             "location": "import",
@@ -202,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",
@@ -256,8 +261,8 @@ export class Tabs {
   }; }
   static get elementRef() { return "el"; }
   static get listeners() { return [{
-      "name": "calciteTabTitleRegister",
-      "method": "calciteTabTitleRegister",
+      "name": "calciteInternalTabTitleRegister",
+      "method": "calciteInternalTabTitleRegister",
       "target": undefined,
       "capture": false,
       "passive": false
@@ -268,8 +273,8 @@ export class Tabs {
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteTabRegister",
-      "method": "calciteTabRegister",
+      "name": "calciteInternalTabRegister",
+      "method": "calciteInternalTabRegister",
       "target": undefined,
       "capture": false,
       "passive": false

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

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

@@ -109,9 +109,7 @@
   align-items: stretch;
   padding: 0px;
   color: var(--calcite-ui-text-2);
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
 :host .content-slot-container {
   display: flex;
@@ -149,6 +147,7 @@
 }
 :host .description {
   pointer-events: none;
+  overflow-wrap: break-word;
   font-size: var(--calcite-font-size--2);
   line-height: 1.375;
   color: var(--calcite-ui-text-3);
@@ -195,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.81
+ * v1.0.0-beta.84
  */
 import { Component, Element, Fragment, h, Prop } from "@stencil/core";
 import { SLOTS } from "./resources";
@@ -29,6 +29,7 @@ export class Tile {
     this.embed = false;
     /**
      * The focused state of the tile.
+     *
      * @internal
      */
     this.focused = false;

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

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

@@ -91,9 +91,9 @@
   max-width: 300px;
   padding: 0.75rem;
   position: relative;
-  transition: var(--calcite-animation-timing);
   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;
@@ -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;
@@ -113,11 +114,16 @@
   white-space: nowrap;
   border-width: 0;
 }
+:host .container.focused {
+  outline-color: transparent;
+}
 :host .container.focused:not(.disabled) {
   z-index: 30;
 }
 :host .container.focused:not(.disabled):not(.input-enabled) {
-  box-shadow: 0 0 0 1px var(--calcite-ui-brand), inset 0 0 0 2px var(--calcite-ui-foreground-1), inset 0 0 0 5px var(--calcite-ui-brand);
+  outline: 2px solid var(--calcite-ui-brand);
+  outline-offset: -4px;
+  box-shadow: 0 0 0 1px var(--calcite-ui-brand), inset 0 0 0 2px var(--calcite-ui-foreground-1);
 }
 :host .container.input-enabled.input-alignment-start.width-auto.heading-only, :host .container.input-enabled.input-alignment-start.width-auto.icon-only, :host .container.input-enabled.input-alignment-start.width-auto.description-only, :host .container.input-enabled.input-alignment-start.width-auto.heading.description, :host .container.input-enabled.input-alignment-start.width-auto.icon.description, :host .container.input-enabled.input-alignment-start.width-auto.heading.icon.description {
   display: inline-grid;

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

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

@@ -83,8 +83,8 @@
   flex-wrap: wrap;
 }
 :host ::slotted(calcite-tile-select) {
-  margin-right: 1px;
   margin-bottom: 1px;
+  margin-inline-end: 1px;
 }
 
 :host([layout=vertical]) {

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.81
+ * 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.81
+ * 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;