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

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

@@ -1,13 +1,14 @@
 /*!
  * 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.82
+ * v1.0.0-beta.83
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { getSlotted, setRequestedIcon, toAriaBoolean } from "../../utils/dom";
 import { DURATIONS, SLOTS, TEXT } from "./resources";
 import { StatusIcons } from "./interfaces";
-/** Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned
+/**
+ * Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned
  * at the bottom of the page. Multiple opened alerts will be added to a queue, allowing users to dismiss them in the order they are provided.
  */
 /**
@@ -30,7 +31,9 @@ export class Alert {
     this.autoDismissDuration = this.autoDismiss ? "medium" : null;
     /** Color for the alert (will apply to top border and icon) */
     this.color = "blue";
-    /** string to override English close text
+    /**
+     * string to override English close text
+     *
      * @default "Close"
      */
     this.intlClose = TEXT.intlClose;
@@ -59,7 +62,7 @@ export class Alert {
       this.active = false;
       this.queue = this.queue.filter((e) => e !== this.el);
       this.determineActiveAlert();
-      this.calciteAlertSync.emit({ queue: this.queue });
+      this.calciteInternalAlertSync.emit({ queue: this.queue });
     };
     this.transitionEnd = (event) => {
       if (event.propertyName === this.activeTransitionProp) {
@@ -77,11 +80,11 @@ export class Alert {
   }
   watchActive() {
     if (this.active && !this.queued) {
-      this.calciteAlertRegister.emit();
+      this.calciteInternalAlertRegister.emit();
     }
     if (!this.active) {
       this.queue = this.queue.filter((e) => e !== this.el);
-      this.calciteAlertSync.emit({ queue: this.queue });
+      this.calciteInternalAlertSync.emit({ queue: this.queue });
     }
   }
   updateRequestedIcon() {
@@ -100,7 +103,7 @@ export class Alert {
   //--------------------------------------------------------------------------
   connectedCallback() {
     if (this.active && !this.queued) {
-      this.calciteAlertRegister.emit();
+      this.calciteInternalAlertRegister.emit();
     }
   }
   componentWillLoad() {
@@ -141,6 +144,7 @@ export class Alert {
     }
     this.queueLength = this.queue.length;
     this.determineActiveAlert();
+    event.stopPropagation();
   }
   // when an alert is first registered, trigger a queue sync to get queue
   alertRegister() {
@@ -148,7 +152,7 @@ export class Alert {
       this.queued = true;
       this.queue.push(this.el);
     }
-    this.calciteAlertSync.emit({ queue: this.queue });
+    this.calciteInternalAlertSync.emit({ queue: this.queue });
     this.determineActiveAlert();
   }
   //--------------------------------------------------------------------------
@@ -423,8 +427,8 @@ export class Alert {
         "references": {}
       }
     }, {
-      "method": "calciteAlertSync",
-      "name": "calciteAlertSync",
+      "method": "calciteInternalAlertSync",
+      "name": "calciteInternalAlertSync",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -441,8 +445,8 @@ export class Alert {
         "references": {}
       }
     }, {
-      "method": "calciteAlertRegister",
-      "name": "calciteAlertRegister",
+      "method": "calciteInternalAlertRegister",
+      "name": "calciteInternalAlertRegister",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -495,13 +499,13 @@ export class Alert {
       "methodName": "updateDuration"
     }]; }
   static get listeners() { return [{
-      "name": "calciteAlertSync",
+      "name": "calciteInternalAlertSync",
       "method": "alertSync",
       "target": "window",
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteAlertRegister",
+      "name": "calciteInternalAlertRegister",
       "method": "alertRegister",
       "target": "window",
       "capture": false,

package/dist/collection/components/alert/interfaces.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.82
+ * v1.0.0-beta.83
  */
 export var StatusIcons;
 (function (StatusIcons) {

package/dist/collection/components/alert/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.82
+ * v1.0.0-beta.83
  */
 export const TEXT = {
   intlClose: "Close"

package/dist/collection/components/avatar/avatar.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.82
+ * v1.0.0-beta.83
  */
 import { Component, Element, h, Prop, State } from "@stencil/core";
 import { isValidHex } from "../color-picker/utils";

package/dist/collection/components/avatar/utils.js

@@ -1,12 +1,14 @@
 /*!
  * 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.82
+ * v1.0.0-beta.83
  */
 import { hexToRGB } from "../color-picker/utils";
 /**
  * Convert a string to a valid hex by hashing its contents
  * and using the hash as a seed for three distinct color values
+ *
+ * @param str
  */
 export function stringToHex(str) {
   let hash = 0;
@@ -22,6 +24,8 @@ export function stringToHex(str) {
 }
 /**
  * Find the hue of a color given the separate RGB color channels
+ *
+ * @param rgb
  */
 export function rgbToHue(rgb) {
   let { r, g, b } = rgb;
@@ -50,6 +54,7 @@ export function rgbToHue(rgb) {
 }
 /**
  * For a hex color, find the hue
+ *
  * @param hex {string} - form of "#------"
  */
 export function hexToHue(hex) {

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

@@ -205,9 +205,7 @@ h4.heading, h5.heading {
   border-style: none;
   padding: 0px;
   font-family: inherit;
-  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;
 }

package/dist/collection/components/block/block.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.82
+ * v1.0.0-beta.83
  */
 import { Component, Element, Event, h, Host, Prop } from "@stencil/core";
 import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
@@ -37,17 +37,25 @@ export class Block {
     this.dragHandle = false;
     /**
      * Aria-label for collapsing the toggle and tooltip used for the toggle when expanded.
+     *
+     * @default "Collapse"
      */
     this.intlCollapse = TEXT.collapse;
     /**
      * Aria-label for expanding the toggle and tooltip used for the toggle when collapsed.
+     *
+     * @default "Expand"
      */
     this.intlExpand = TEXT.expand;
-    /** string to override English loading text
+    /**
+     * string to override English loading text
+     *
      * @default "Loading"
      */
     this.intlLoading = TEXT.loading;
-    /** Text string used for the actions menu
+    /**
+     * Text string used for the actions menu
+     *
      * @default "Options"
      */
     this.intlOptions = TEXT.options;
@@ -259,7 +267,10 @@ export class Block {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "default",
+            "text": "\"Collapse\""
+          }],
         "text": "Aria-label for collapsing the toggle and tooltip used for the toggle when expanded."
       },
       "attribute": "intl-collapse",
@@ -277,7 +288,10 @@ export class Block {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "default",
+            "text": "\"Expand\""
+          }],
         "text": "Aria-label for expanding the toggle and tooltip used for the toggle when collapsed."
       },
       "attribute": "intl-expand",

package/dist/collection/components/block/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.82
+ * v1.0.0-beta.83
  */
 export const CSS = {
   article: "article",

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

@@ -121,9 +121,7 @@
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   font-size: var(--calcite-font-size--1);
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
 .toggle--switch:focus, .section-header:focus {
   outline: 2px solid var(--calcite-ui-brand);

package/dist/collection/components/block-section/block-section.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.82
+ * v1.0.0-beta.83
  */
 import { Component, Element, Event, Prop, h, Host } from "@stencil/core";
 import { getElementDir, toAriaBoolean } from "../../utils/dom";

package/dist/collection/components/block-section/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.82
+ * v1.0.0-beta.83
  */
 export {};

package/dist/collection/components/block-section/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.82
+ * v1.0.0-beta.83
  */
 export const CSS = {
   content: "content",

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

@@ -92,9 +92,7 @@
 }
 
 :host button, :host a {
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
 :host button:focus, :host a:focus {
   outline: 2px solid var(--calcite-ui-brand);
@@ -126,7 +124,7 @@
   font-weight: var(--calcite-font-weight-normal);
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
-  transition: color var(--calcite-animation-timing) ease-in-out, background-color var(--calcite-animation-timing) ease-in-out, box-shadow var(--calcite-animation-timing) ease-in-out, outline-offset var(--calcite-internal-animation-timing-fast) ease-in-out, outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;
+  transition: color var(--calcite-animation-timing) ease-in-out, background-color var(--calcite-animation-timing) ease-in-out, box-shadow var(--calcite-animation-timing) ease-in-out, outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;
 }
 :host button:hover, :host a:hover {
   -webkit-text-decoration-line: none;

package/dist/collection/components/button/button.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.82
+ * v1.0.0-beta.83
  */
 import "form-request-submit-polyfill/form-request-submit-polyfill";
 import { Component, Element, h, Method, Prop, Build, State, Watch } from "@stencil/core";
@@ -29,7 +29,9 @@ export class Button {
     this.color = "blue";
     /** is the button disabled  */
     this.disabled = false;
-    /** string to override English loading text
+    /**
+     * string to override English loading text
+     *
      * @default "Loading"
      */
     this.intlLoading = TEXT.loading;
@@ -45,7 +47,7 @@ export class Button {
     this.type = "button";
     /** specify the width of the button, defaults to auto */
     this.width = "auto";
-    /** watches for changing text content **/
+    /** watches for changing text content */
     this.mutationObserver = createObserver("mutation", () => this.updateHasContent());
     /** determine if there is slotted content for styling purposes */
     this.hasContent = false;

package/dist/collection/components/button/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.82
+ * v1.0.0-beta.83
  */
 export {};

package/dist/collection/components/button/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.82
+ * v1.0.0-beta.83
  */
 export const CSS = {
   buttonLoader: "calcite-button--loader",

package/dist/collection/components/card/card.css

@@ -115,6 +115,7 @@
 }
 
 .container {
+  position: relative;
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
@@ -210,15 +211,28 @@ slot[name=footer-trailing]::slotted(*), *::slotted([slot=footer-trailing]) {
   line-height: 1.375;
 }
 
-.thumbnail-wrapper {
-  font-size: var(--calcite-font-size-0);
-  line-height: 1.375;
-}
-
 .checkbox-wrapper {
   position: absolute;
   margin: 0px;
   padding: 0px;
   top: 0.5rem;
   inset-inline-end: 0.5rem;
+}
+
+.thumbnail-wrapper {
+  display: flex;
+}
+
+.calcite-card-container.inline {
+  flex-direction: row;
+}
+.calcite-card-container.inline > .container {
+  width: 60%;
+}
+.calcite-card-container.inline > .thumbnail-wrapper {
+  width: 40%;
+  align-items: flex-start;
+}
+.calcite-card-container.inline slot[name=thumbnail]::slotted(img), .calcite-card-container.inline img::slotted([slot=thumbnail]) {
+  width: 100%;
 }

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

@@ -1,13 +1,14 @@
 /*!
  * 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.82
+ * v1.0.0-beta.83
  */
 import { Component, Element, Event, h, Prop } from "@stencil/core";
 import { getSlotted, toAriaBoolean } from "../../utils/dom";
 import { CSS, SLOTS, TEXT } from "./resources";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
-/** Cards do not include a grid or bounding container
+/**
+ * Cards do not include a grid or bounding container
  * - cards will expand to fit the width of their container
  */
 /**
@@ -31,18 +32,25 @@ export class Card {
     this.selected = false;
     /** Indicates whether the card is selectable. */
     this.selectable = false;
-    /** string to override English loading text
+    /**
+     * string to override English loading text
+     *
      * @default "Loading"
      */
     this.intlLoading = TEXT.loading;
-    /** string to override English select text for checkbox when selectable is true
+    /**
+     * string to override English select text for checkbox when selectable is true
+     *
      * @default "Select"
      */
     this.intlSelect = TEXT.select;
-    /** string to override English deselect text for checkbox when selectable is true
+    /**
+     * string to override English deselect text for checkbox when selectable is true
+     *
      * @default "Deselect"
      */
     this.intlDeselect = TEXT.deselect;
+    this.thumbnailPosition = "block-start";
     //--------------------------------------------------------------------------
     //
     //  Private State/Props
@@ -78,23 +86,26 @@ export class Card {
     disconnectConditionalSlotComponent(this);
   }
   render() {
-    return (h("div", { class: "calcite-card-container" },
+    const thumbnailInline = this.thumbnailPosition.startsWith("inline");
+    const thumbnailStart = this.thumbnailPosition.endsWith("start");
+    return (h("div", { class: { "calcite-card-container": true, inline: thumbnailInline } },
       this.loading ? (h("div", { class: "calcite-card-loader-container" },
         h("calcite-loader", { active: true, label: this.intlLoading }))) : null,
+      thumbnailStart && this.renderThumbnail(),
       h("section", { "aria-busy": toAriaBoolean(this.loading), class: { [CSS.container]: true } },
         this.selectable ? this.renderCheckbox() : null,
-        this.renderThumbnail(),
         this.renderHeader(),
         h("div", { class: "card-content" },
           h("slot", null)),
-        this.renderFooter())));
+        this.renderFooter()),
+      !thumbnailStart && this.renderThumbnail()));
   }
   selectCard() {
     this.selected = !this.selected;
     this.calciteCardSelect.emit();
   }
   renderThumbnail() {
-    return getSlotted(this.el, SLOTS.thumbnail) ? (h("div", { class: CSS.thumbnailWrapper, key: "thumbnail-wrapper" },
+    return getSlotted(this.el, SLOTS.thumbnail) ? (h("section", { class: CSS.thumbnailWrapper },
       h("slot", { name: SLOTS.thumbnail }))) : null;
   }
   renderCheckbox() {
@@ -245,6 +256,29 @@ export class Card {
       "attribute": "intl-deselect",
       "reflect": false,
       "defaultValue": "TEXT.deselect"
+    },
+    "thumbnailPosition": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "LogicalFlowPosition",
+        "resolved": "\"block-end\" | \"block-start\" | \"inline-end\" | \"inline-start\"",
+        "references": {
+          "LogicalFlowPosition": {
+            "location": "import",
+            "path": "../interfaces"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "thumbnail-position",
+      "reflect": false,
+      "defaultValue": "\"block-start\""
     }
   }; }
   static get events() { return [{

package/dist/collection/components/card/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.82
+ * v1.0.0-beta.83
  */
 export const CSS = {
   container: "container",
@@ -9,8 +9,8 @@ export const CSS = {
   footer: "footer",
   title: "title",
   subtitle: "subtitle",
-  thumbnailWrapper: "thumbnail-wrapper",
-  checkboxWrapper: "checkbox-wrapper"
+  checkboxWrapper: "checkbox-wrapper",
+  thumbnailWrapper: "thumbnail-wrapper"
 };
 export const SLOTS = {
   thumbnail: "thumbnail",

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

@@ -105,6 +105,11 @@
           user-select: none;
   -webkit-tap-highlight-color: transparent;
 }
+:host .check-svg,
+:host .toggle {
+  width: var(--calcite-checkbox-size);
+  height: var(--calcite-checkbox-size);
+}
 :host .check-svg {
   pointer-events: none;
   box-sizing: border-box;
@@ -114,11 +119,7 @@
   fill: currentColor;
   stroke: currentColor;
   stroke-width: 1;
-  transition-property: all;
-  transition-duration: 150ms;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  width: var(--calcite-checkbox-size);
-  height: var(--calcite-checkbox-size);
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   box-shadow: inset 0 0 0 1px var(--calcite-ui-border-input);
   color: var(--calcite-ui-background);
 }
@@ -133,14 +134,12 @@
   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: var(--calcite-animation-timing);
+.toggle {
+  outline-color: transparent;
 }
-
-.toggle:focus-visible {
-  outline: none;
+.toggle:active, .toggle:focus, .toggle:focus-visible {
+  outline: 2px solid var(--calcite-ui-brand);
+  outline-offset: 2px;
 }
 
 :host([disabled]) {

package/dist/collection/components/checkbox/checkbox.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.82
+ * v1.0.0-beta.83
  */
 import { Component, Element, Event, h, Host, Method, Prop } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -23,6 +23,7 @@ export class Checkbox {
     this.disabled = false;
     /**
      * The hovered state of the checkbox.
+     *
      * @internal
      */
     this.hovered = false;
@@ -30,7 +31,7 @@ export class Checkbox {
      * True if the checkbox is initially indeterminate,
      * which is independent from its checked state
      * https://css-tricks.com/indeterminate-checkboxes/
-     * */
+     */
     this.indeterminate = false;
     /**
      * When true, makes the component required for form-submission.

package/dist/collection/components/chip/chip.css

@@ -110,7 +110,7 @@
 :host([scale=l]) .image-container {
   height: 2rem;
   width: 2rem;
-  padding-left: 0.25rem;
+  padding-inline-start: 0.25rem;
 }
 
 :host {
@@ -162,13 +162,8 @@
   border-style: none;
   background-color: transparent;
   color: var(--calcite-ui-text-1);
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
-  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;
   -webkit-appearance: none;
   border-start-start-radius: 0;
   border-start-end-radius: 50px;

package/dist/collection/components/chip/chip.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.82
+ * v1.0.0-beta.83
  */
 import { Component, h, Prop, Event, Element, Method } from "@stencil/core";
 import { getSlotted } from "../../utils/dom";
@@ -25,7 +25,9 @@ export class Chip {
     this.color = "grey";
     /** Optionally show a button the user can click to dismiss the chip */
     this.dismissible = false;
-    /** Aria label for the "x" button
+    /**
+     * Aria label for the "x" button
+     *
      * @default "Close"
      */
     this.dismissLabel = TEXT.close;

package/dist/collection/components/chip/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.82
+ * v1.0.0-beta.83
  */
 export {};