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

package/dist/collection/components/tab/tab.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 { Component, Prop, Element, Listen, Method, Event, h, State, Host } from "@stencil/core";
 import { guid } from "../../utils/guid";
-import { nodeListToArray } from "../../utils/dom";
+import { nodeListToArray, toAriaBoolean } from "../../utils/dom";
 /**
  * @slot - A slot for adding custom content.
  */
@@ -15,7 +15,9 @@ export class Tab {
      * Show this tab
      */
     this.active = false;
-    /** @internal Parent tabs component scale value */
+    /**
+     * @internal
+     */
     this.scale = "m";
     this.guid = `calcite-tab-title-${guid()}`;
   }
@@ -26,7 +28,7 @@ export class Tab {
   //--------------------------------------------------------------------------
   render() {
     const id = this.el.id || this.guid;
-    return (h(Host, { "aria-expanded": this.active.toString(), "aria-labelledby": this.labeledBy, id: id, role: "tabpanel" },
+    return (h(Host, { "aria-expanded": toAriaBoolean(this.active), "aria-labelledby": this.labeledBy, id: id, role: "tabpanel" },
       h("section", null,
         h("slot", null))));
   }
@@ -34,7 +36,7 @@ export class Tab {
     this.parentTabsEl = this.el.closest("calcite-tabs");
   }
   componentDidLoad() {
-    this.calciteTabRegister.emit();
+    this.calciteInternalTabRegister.emit();
   }
   componentWillRender() {
     var _a;
@@ -70,6 +72,7 @@ export class Tab {
         this.active = index === event.detail.tab;
       });
     }
+    event.stopPropagation();
   }
   //--------------------------------------------------------------------------
   //
@@ -88,6 +91,8 @@ export class Tab {
   //
   //--------------------------------------------------------------------------
   /**
+   * @param tabIds
+   * @param titleIds
    * @internal
    */
   async updateAriaInfo(tabIds = [], titleIds = []) {
@@ -155,7 +160,7 @@ export class Tab {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Parent tabs component scale value"
+            "text": undefined
           }],
         "text": ""
       },
@@ -168,8 +173,8 @@ export class Tab {
     "labeledBy": {}
   }; }
   static get events() { return [{
-      "method": "calciteTabRegister",
-      "name": "calciteTabRegister",
+      "method": "calciteInternalTabRegister",
+      "name": "calciteInternalTabRegister",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -207,10 +212,16 @@ export class Tab {
       "complexType": {
         "signature": "(tabIds?: string[], titleIds?: string[]) => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "tabIds"
+              }],
             "text": ""
           }, {
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "titleIds"
+              }],
             "text": ""
           }],
         "references": {
@@ -223,6 +234,12 @@ export class Tab {
       "docs": {
         "text": "",
         "tags": [{
+            "name": "param",
+            "text": "tabIds"
+          }, {
+            "name": "param",
+            "text": "titleIds"
+          }, {
             "name": "internal",
             "text": undefined
           }]

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;
 }
@@ -145,4 +151,15 @@
 :host([bordered][position=below]) .tab-nav-active-indicator-container {
   bottom: 0;
   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.81
+ * v1.0.0-beta.84
  */
 import { Component, Element, Event, h, Host, Listen, Prop, State, Watch } from "@stencil/core";
 import { getElementDir, filterDirectChildren } from "../../utils/dom";
@@ -11,13 +11,21 @@ import { createObserver } from "../../utils/observers";
  */
 export class TabNav {
   constructor() {
-    /** @internal Parent tabs component scale value */
+    /**
+     * @internal
+     */
     this.scale = "m";
-    /** @internal Parent tabs component layout value */
+    /**
+     * @internal
+     */
     this.layout = "inline";
-    /** @internal Parent tabs component position value */
-    this.position = "below";
-    /** @internal Parent tabs component bordered value when layout is "inline" */
+    /**
+     * @internal
+     */
+    this.position = "bottom";
+    /**
+     * @internal
+     */
     this.bordered = false;
     this.animationActiveDuration = 0.3;
     this.resizeObserver = createObserver("resize", () => {
@@ -119,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();
   }
@@ -146,6 +154,8 @@ export class TabNav {
   }
   /**
    * Check for active tabs on register and update selected
+   *
+   * @param e
    */
   updateTabTitles(e) {
     if (e.target.active) {
@@ -160,6 +170,7 @@ export class TabNav {
       this.selectedTab = e.detail.tab;
       e.stopPropagation();
     }
+    e.stopPropagation();
   }
   updateOffsetPosition() {
     var _a, _b, _c, _d, _e;
@@ -252,7 +263,7 @@ export class TabNav {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Parent tabs component scale value"
+            "text": undefined
           }],
         "text": ""
       },
@@ -278,7 +289,7 @@ export class TabNav {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Parent tabs component layout value"
+            "text": undefined
           }],
         "text": ""
       },
@@ -291,7 +302,7 @@ export class TabNav {
       "mutable": true,
       "complexType": {
         "original": "TabPosition",
-        "resolved": "\"above\" | \"below\"",
+        "resolved": "\"above\" | \"below\" | \"bottom\" | \"top\"",
         "references": {
           "TabPosition": {
             "location": "import",
@@ -304,13 +315,13 @@ export class TabNav {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Parent tabs component position value"
+            "text": undefined
           }],
         "text": ""
       },
       "attribute": "position",
       "reflect": true,
-      "defaultValue": "\"below\""
+      "defaultValue": "\"bottom\""
     },
     "bordered": {
       "type": "boolean",
@@ -325,7 +336,7 @@ export class TabNav {
       "docs": {
         "tags": [{
             "name": "internal",
-            "text": "Parent tabs component bordered value when layout is \"inline\""
+            "text": undefined
           }],
         "text": ""
       },
@@ -434,13 +445,13 @@ export class TabNav {
       "methodName": "selectedTabElChanged"
     }]; }
   static get listeners() { return [{
-      "name": "calciteTabsFocusPrevious",
+      "name": "calciteInternalTabsFocusPrevious",
       "method": "focusPreviousTabHandler",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteTabsFocusNext",
+      "name": "calciteInternalTabsFocusNext",
       "method": "focusNextTabHandler",
       "target": undefined,
       "capture": false,
@@ -458,7 +469,7 @@ export class TabNav {
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteTabTitleRegister",
+      "name": "calciteInternalTabTitleRegister",
       "method": "updateTabTitles",
       "target": undefined,
       "capture": false,

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

@@ -79,7 +79,6 @@
 }
 
 :host {
-  margin-right: 1.25rem;
   display: block;
   flex: 0 1 auto;
   outline: 2px solid transparent;
@@ -104,10 +103,15 @@
   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-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
 
 :host(:focus) a {
@@ -115,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;
@@ -134,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;
 }
@@ -147,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);
@@ -164,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%;
@@ -191,10 +202,7 @@ a, span {
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
   color: var(--calcite-ui-text-3);
-  transition-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   border-bottom-color: transparent;
   border-bottom-style: solid;
 }
@@ -210,10 +218,7 @@ span {
   align-self: center;
 }
 .calcite-tab-title--icon svg {
-  transition-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
 }
 
 .container--has-text {
@@ -244,42 +249,88 @@ 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-property: all;
-  transition-duration: var(--calcite-animation-timing);
-  transition-timing-function: ease-in-out;
-  transition-delay: 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;
+}
+
+@media (forced-colors: active) {
+  :host {
+    outline-width: 0;
+    outline-offset: 0;
+  }
+
+  :host(:focus) a {
+    outline-color: highlight;
+  }
+
+  :host([bordered]) a {
+    border-bottom-style: solid;
+  }
+
+  :host([bordered][position=below]) a {
+    border-top-style: solid;
+  }
+
+  :host([bordered][position=bottom]) a {
+    border-top-style: solid;
+  }
+
+  :host([bordered][active]) a {
+    border-bottom-style: none;
+  }
+
+  :host([bordered][position=below][active]) a {
+    border-top-style: none;
+  }
+
+  :host([bordered][position=bottom][active]) a {
+    border-top-style: none;
+  }
 }