@esri/calcite-components 1.0.0-beta.68 → 1.0.0-beta.71

package/dist/collection/components/calcite-accordion/calcite-accordion.js

@@ -258,8 +258,8 @@ export class CalciteAccordion {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

package/dist/collection/components/calcite-accordion-item/calcite-accordion-item.js

@@ -93,6 +93,9 @@ export class CalciteAccordionItem {
   updateActiveItemOnChange(event) {
     this.requestedAccordionItem = event.detail
       .requestedAccordionItem;
+    if (this.el.parentNode !== this.requestedAccordionItem.parentNode) {
+      return;
+    }
     this.determineActiveItem();
   }
   //--------------------------------------------------------------------------
@@ -210,8 +213,8 @@ export class CalciteAccordionItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -228,8 +231,8 @@ export class CalciteAccordionItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -246,8 +249,8 @@ export class CalciteAccordionItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -264,8 +267,8 @@ export class CalciteAccordionItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

package/dist/collection/components/calcite-action/calcite-action.js

@@ -284,8 +284,8 @@ export class CalciteAction {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Loading\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Loading\""
           }],
         "text": "string to override English loading text"
       },
@@ -395,8 +395,8 @@ export class CalciteAction {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": "use onClick instead.",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "use onClick instead."
           }],
         "text": "Emitted when the action has been clicked."
       },

package/dist/collection/components/calcite-action-menu/calcite-action-menu.js

@@ -406,8 +406,8 @@ export class CalciteActionMenu {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": " [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)",
-            "name": "see"
+            "name": "see",
+            "text": " [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)"
           }],
         "text": "Determines where the component will be positioned relative to the referenceElement."
       },

package/dist/collection/components/calcite-alert/calcite-alert.js

@@ -47,8 +47,11 @@ export class CalciteAlert {
     this.queueLength = 0;
     /** is the alert queued */
     this.queued = false;
+    this.autoDismissTimeoutId = null;
+    this.trackTimer = Date.now();
     /** close and emit the closed alert and the queue */
     this.closeAlert = () => {
+      this.autoDismissTimeoutId = null;
       this.queued = false;
       this.active = false;
       this.queue = this.queue.filter((e) => e !== this.el);
@@ -72,6 +75,12 @@ export class CalciteAlert {
   updateRequestedIcon() {
     this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
   }
+  updateDuration() {
+    if (this.autoDismiss && this.autoDismissTimeoutId) {
+      window.clearTimeout(this.autoDismissTimeoutId);
+      this.autoDismissTimeoutId = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration] - (Date.now() - this.trackTimer));
+    }
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -88,6 +97,9 @@ export class CalciteAlert {
   componentDidLoad() {
     this.alertLinkEl = this.el.querySelectorAll("calcite-link")[0];
   }
+  disconnectedCallback() {
+    window.clearTimeout(this.autoDismissTimeoutId);
+  }
   render() {
     const dir = getElementDir(this.el);
     const closeButton = (h("button", { "aria-label": this.intlClose, class: "alert-close", onClick: this.closeAlert, ref: (el) => (this.closeButton = el), type: "button" },
@@ -96,7 +108,6 @@ export class CalciteAlert {
     const queueCount = (h("div", { class: `${this.queueLength > 1 ? "active " : ""}alert-queue-count` },
       h("calcite-chip", { scale: this.scale, value: queueText }, queueText)));
     const { active, autoDismiss, label, queued, requestedIcon } = this;
-    const progress = h("div", { class: "alert-dismiss-progress" });
     const role = autoDismiss ? "alert" : "alertdialog";
     const hidden = !active;
     return (h(Host, { "aria-hidden": hidden.toString(), "aria-label": label, "calcite-hydrated-hidden": hidden, role: role },
@@ -113,7 +124,7 @@ export class CalciteAlert {
           h("slot", { name: SLOTS.link })),
         queueCount,
         !autoDismiss ? closeButton : null,
-        active && !queued && autoDismiss ? progress : null)));
+        active && !queued && autoDismiss ? h("div", { class: "alert-dismiss-progress" }) : null)));
   }
   // when an alert is opened or closed, update queue and determine active alert
   alertSync(event) {
@@ -159,9 +170,9 @@ export class CalciteAlert {
     var _a;
     if (((_a = this.queue) === null || _a === void 0 ? void 0 : _a[0]) === this.el) {
       this.openAlert();
-      clearTimeout(this.autoDismissTimeout);
-      if (this.autoDismiss) {
-        this.autoDismissTimeout = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration]);
+      if (this.autoDismiss && !this.autoDismissTimeoutId) {
+        this.trackTimer = Date.now();
+        this.autoDismissTimeoutId = window.setTimeout(() => this.closeAlert(), DURATIONS[this.autoDismissDuration]);
       }
     }
     else {
@@ -297,8 +308,8 @@ export class CalciteAlert {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Close\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Close\""
           }],
         "text": "string to override English close text"
       },
@@ -391,8 +402,8 @@ export class CalciteAlert {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Fired to sync queue when opened or closed"
       },
@@ -409,8 +420,8 @@ export class CalciteAlert {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Fired when an alert is added to dom - used to receive initial queue"
       },
@@ -448,6 +459,9 @@ export class CalciteAlert {
     }, {
       "propName": "color",
       "methodName": "updateRequestedIcon"
+    }, {
+      "propName": "autoDismissDuration",
+      "methodName": "updateDuration"
     }]; }
   static get listeners() { return [{
       "name": "calciteAlertSync",

package/dist/collection/components/calcite-block/calcite-block.css

@@ -210,10 +210,10 @@ h5.heading {
   padding-right: 0;
   border-style: none;
   cursor: pointer;
-  text-align: left;
   outline-offset: 0;
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
+  text-align: initial;
   background-color: transparent;
 }
 
@@ -237,10 +237,8 @@ calcite-handle {
 
 .title {
   margin: 0;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-inline: 0.75rem;
+  padding-block: 0px;
 }
 
 .header .title .heading {
@@ -266,7 +264,8 @@ calcite-handle {
 }
 
 .icon {
-  margin-left: 0.75rem;
+  margin-inline-start: 0.75rem;
+  margin-inline-end: 0px;
 }
 
 .status-icon.valid {
@@ -296,12 +295,13 @@ calcite-handle {
 }
 
 .toggle-icon {
-  margin-right: 1rem;
   align-self: center;
   color: var(--calcite-ui-text-3);
   transition-property: color;
   transition-duration: 150ms;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  margin-inline-end: 1rem;
+  margin-inline-start: 0px;
 }
 
 .toggle:hover .toggle-icon {
@@ -327,16 +327,6 @@ calcite-action-menu {
   grid-area: menu;
 }
 
-.calcite--rtl .toggle-icon {
-  margin-right: 0;
-  margin-left: 1rem;
-}
-
-.calcite--rtl .icon {
-  margin-left: 0;
-  margin-right: 0.75rem;
-}
-
 :host([open]) {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -356,9 +346,4 @@ calcite-action-menu {
 
 :host([disabled]) .header-container {
   opacity: 0.5;
-}
-
-:host([drag-handle]) .calcite--rtl .title {
-  padding-left: 0;
-  padding-right: 0.25rem;
 }

package/dist/collection/components/calcite-block/calcite-block.js

@@ -4,8 +4,7 @@
  */
 import { Component, Element, Event, h, Host, Prop } from "@stencil/core";
 import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
-import { CSS_UTILITY } from "../../utils/resources";
-import { getElementDir, getSlotted } from "../../utils/dom";
+import { getSlotted } from "../../utils/dom";
 import { CalciteHeading } from "../functional/CalciteHeading";
 /**
  * @slot - A slot for adding content to the block.
@@ -101,11 +100,9 @@ export class CalciteBlock {
         h("slot", { name: SLOTS.control }))) : null,
       hasMenuActions ? (h("calcite-action-menu", { label: this.intlOptions || TEXT.options },
         h("slot", { name: SLOTS.headerMenuActions }))) : null));
-    const rtl = getElementDir(el) === "rtl";
     return (h(Host, { tabIndex: disabled ? -1 : null },
       h("article", { "aria-busy": loading.toString(), class: {
-          [CSS.article]: true,
-          [CSS_UTILITY.rtl]: rtl
+          [CSS.article]: true
         } },
         headerNode,
         h("div", { class: CSS.content, hidden: !open }, this.renderScrim()))));
@@ -258,8 +255,8 @@ export class CalciteBlock {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Loading\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Loading\""
           }],
         "text": "string to override English loading text"
       },
@@ -279,8 +276,8 @@ export class CalciteBlock {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Options\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Options\""
           }],
         "text": "Text string used for the actions menu"
       },

package/dist/collection/components/calcite-block-section/calcite-block-section.js

@@ -3,7 +3,7 @@
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
 import { Component, Element, Event, Prop, h } from "@stencil/core";
-import { getElementDir } from "../../utils/dom";
+import { getElementStyleDir } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
 import { CSS, ICONS, TEXT } from "./resources";
 /**
@@ -56,7 +56,7 @@ export class CalciteBlockSection {
   }
   render() {
     const { el, intlCollapse, intlExpand, open, text, toggleDisplay } = this;
-    const dir = getElementDir(el);
+    const dir = getElementStyleDir(el);
     const arrowIcon = open
       ? ICONS.menuOpen
       : dir === "rtl"

package/dist/collection/components/calcite-button/calcite-button.css

@@ -702,19 +702,19 @@
   border-left-width: 1px;
 }
 
-:host([appearance=transparent]:not(.calcite-inline-editable__enable-editing-button)) button,
-:host([appearance=transparent]:not(.calcite-inline-editable__enable-editing-button)) a {
+:host([appearance=transparent]:not(.enable-editing-button)) button,
+:host([appearance=transparent]:not(.enable-editing-button)) a {
   background-color: transparent;
 }
 
-:host([appearance=transparent]:not(.calcite-inline-editable__enable-editing-button)) button:hover, :host([appearance=transparent]:not(.calcite-inline-editable__enable-editing-button)) button:focus,
-:host([appearance=transparent]:not(.calcite-inline-editable__enable-editing-button)) a:hover,
-:host([appearance=transparent]:not(.calcite-inline-editable__enable-editing-button)) a:focus {
+:host([appearance=transparent]:not(.enable-editing-button)) button:hover, :host([appearance=transparent]:not(.enable-editing-button)) button:focus,
+:host([appearance=transparent]:not(.enable-editing-button)) a:hover,
+:host([appearance=transparent]:not(.enable-editing-button)) a:focus {
   background-color: var(--calcite-button-transparent-hover);
 }
 
-:host([appearance=transparent]:not(.calcite-inline-editable__enable-editing-button)) button:active,
-:host([appearance=transparent]:not(.calcite-inline-editable__enable-editing-button)) a:active {
+:host([appearance=transparent]:not(.enable-editing-button)) button:active,
+:host([appearance=transparent]:not(.enable-editing-button)) a:active {
   background-color: var(--calcite-button-transparent-press);
 }
 
@@ -768,13 +768,13 @@
   color: var(--calcite-ui-danger);
 }
 
-:host([appearance=transparent][color=neutral]:not(.calcite-inline-editable__cancel-editing-button)) button,
-:host([appearance=transparent][color=neutral]:not(.calcite-inline-editable__cancel-editing-button)) a,
-:host([appearance=transparent][color=neutral]:not(.calcite-inline-editable__cancel-editing-button)) calcite-loader {
+:host([appearance=transparent][color=neutral]:not(.cancel-editing-button)) button,
+:host([appearance=transparent][color=neutral]:not(.cancel-editing-button)) a,
+:host([appearance=transparent][color=neutral]:not(.cancel-editing-button)) calcite-loader {
   color: var(--calcite-ui-text-1);
 }
 
-:host([appearance=transparent][color=neutral].calcite-inline-editable__cancel-editing-button) button {
+:host([appearance=transparent][color=neutral].cancel-editing-button) button {
   color: var(--calcite-ui-text-3);
   border-top-width: 1px;
   border-top-color: var(--calcite-ui-border-input);
@@ -784,18 +784,24 @@
   border-top-style: solid;
 }
 
-:host([appearance=transparent][color=neutral].calcite-inline-editable__cancel-editing-button) button:not(.content--slotted) {
+:host([appearance=transparent][color=neutral].cancel-editing-button) button:not(.content--slotted) {
   --calcite-button-padding-y: 0;
 }
 
-:host([appearance=transparent][color=neutral].calcite-inline-editable__cancel-editing-button) button:hover {
+:host([appearance=transparent][color=neutral].cancel-editing-button) button:hover {
   color: var(--calcite-ui-text-1);
 }
 
-:host([appearance=transparent][color=neutral].calcite-inline-editable__enable-editing-button) button {
+:host([appearance=transparent][color=neutral].enable-editing-button) button {
   background-color: transparent;
 }
 
+:host(.confirm-changes-button) button:focus,
+:host(.cancel-editing-button) button:focus,
+:host(.enable-editing-button) button:focus {
+  outline-offset: -2px;
+}
+
 :host([appearance=transparent][color=inverse]) button,
 :host([appearance=transparent][color=inverse]) a,
 :host([appearance=transparent][color=inverse]) calcite-loader {

package/dist/collection/components/calcite-button/calcite-button.js

@@ -344,8 +344,8 @@ export class CalciteButton {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Loading\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Loading\""
           }],
         "text": "string to override English loading text"
       },
@@ -417,8 +417,8 @@ export class CalciteButton {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\u2013 this property is no longer needed if placed inside a form.",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "\u2013 this property is no longer needed if placed inside a form."
           }],
         "text": "The form ID to associate with the component"
       },

package/dist/collection/components/calcite-card/calcite-card.js

@@ -95,8 +95,8 @@ export class CalciteCard {
   }
   renderCheckbox() {
     const checkboxLabel = this.selected ? this.intlDeselect : this.intlSelect;
-    return (h("label", { "aria-label": checkboxLabel, class: CSS.checkboxWrapper, onClick: this.cardSelectClick, onKeyDown: this.cardSelectKeyDown, title: checkboxLabel },
-      h("calcite-checkbox", { checked: this.selected })));
+    return (h("calcite-label", { class: CSS.checkboxWrapper, onClick: this.cardSelectClick, onKeyDown: this.cardSelectKeyDown },
+      h("calcite-checkbox", { checked: this.selected, label: checkboxLabel })));
   }
   renderHeader() {
     const title = this.el.querySelector(`[slot=${SLOTS.title}]`);
@@ -189,8 +189,8 @@ export class CalciteCard {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Loading\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Loading\""
           }],
         "text": "string to override English loading text"
       },
@@ -210,8 +210,8 @@ export class CalciteCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Select\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Select\""
           }],
         "text": "string to override English select text for checkbox when selectable is true"
       },
@@ -231,8 +231,8 @@ export class CalciteCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Deselect\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Deselect\""
           }],
         "text": "string to override English deselect text for checkbox when selectable is true"
       },

package/dist/collection/components/calcite-checkbox/calcite-checkbox.css

@@ -131,23 +131,19 @@
   color: var(--calcite-ui-background);
 }
 
-:host ::slotted(input) {
-  width: var(--calcite-checkbox-size);
-  height: var(--calcite-checkbox-size);
-}
-
-:host(:hover) .check-svg,
-:host([hovered]) .check-svg {
-  box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
-}
-
 :host([checked]) .check-svg,
 :host([indeterminate]) .check-svg {
   background-color: var(--calcite-ui-brand);
   box-shadow: inset 0 0 0 1px var(--calcite-ui-brand);
 }
 
-:host .focused .check-svg {
+:host([hovered]) .toggle .check-svg,
+:host .toggle:hover .check-svg {
+  box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
+}
+
+:host .toggle:focus .check-svg,
+:host .toggle:active .check-svg {
   box-shadow: inset 0 0 0 1px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);
   transition: 150ms ease-in-out;
 }
@@ -156,4 +152,19 @@
   cursor: default;
   opacity: var(--calcite-ui-opacity-disabled);
   pointer-events: none;
+}
+
+::slotted(input[slot=hidden-form-input]) {
+  bottom: 0 !important;
+  left: 0 !important;
+  margin: 0 !important;
+  opacity: 0 !important;
+  outline: none !important;
+  padding: 0 !important;
+  position: absolute !important;
+  right: 0 !important;
+  top: 0 !important;
+  transform: none !important;
+  -webkit-appearance: none !important;
+  z-index: -1 !important;
 }