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

package/dist/collection/components/link/link.css

@@ -91,10 +91,7 @@
   border-radius: 0px;
   border-style: none;
   font-family: inherit;
-  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;
   text-decoration: none;
   line-height: inherit;
   font-size: inherit;
@@ -106,9 +103,7 @@
 }
 
 :host a, :host span {
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
 :host a:focus, :host span:focus {
   outline: 2px solid var(--calcite-ui-brand);
@@ -124,10 +119,7 @@ calcite-icon {
 
 .calcite-link--icon {
   vertical-align: text-top;
-  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;
   margin-top: 0.125rem;
 }
 
@@ -146,10 +138,7 @@ calcite-icon {
   background-color: transparent;
   padding: 0px;
   color: var(--calcite-ui-text-link);
-  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;
   line-height: inherit;
   white-space: initial;
   background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--calcite-link-blue-underline), var(--calcite-link-blue-underline));

package/dist/collection/components/link/link.js

@@ -1,6 +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
  */
 import { Component, Element, h, Host, Method, Prop } from "@stencil/core";
 import { focusElement, getElementDir } from "../../utils/dom";
@@ -19,7 +20,8 @@ export class Link {
     //--------------------------------------------------------------------------
     /** is the link disabled  */
     this.disabled = false;
-    /** Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:
+    /**
+     * Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value:
      * Without a value, the browser will suggest a filename/extension
      * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download
      */

package/dist/collection/components/list/list.js

@@ -1,6 +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
  */
 import { Component, Element, h, Host, Prop, Method } from "@stencil/core";
 import { CSS } from "./resources";
@@ -17,7 +18,7 @@ export class List {
     //
     // --------------------------------------------------------------------------
     /**
-     * When true, disabled prevents user interaction.
+     * When true, prevents user interaction.
      */
     this.disabled = false;
   }
@@ -70,7 +71,7 @@ export class List {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, disabled prevents user interaction."
+        "text": "When true, prevents user interaction."
       },
       "attribute": "disabled",
       "reflect": true,
@@ -93,7 +94,7 @@ export class List {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Number at which section headings should start for this component."
+        "text": "Number at which section headings should start for the list."
       },
       "attribute": "heading-level",
       "reflect": false

package/dist/collection/components/list/resources.js

@@ -1,6 +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
  */
 export const CSS = {
   container: "container"

package/dist/collection/components/list-item/list-item.css

@@ -118,19 +118,17 @@
   flex: 1 1 auto;
   align-items: stretch;
   padding: 0px;
+  font-family: var(--calcite-sans-family);
+  font-weight: var(--calcite-font-weight-normal);
   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;
 }
 
 .content-container--button {
   cursor: pointer;
   border-style: none;
   background-color: var(--calcite-ui-foreground-1);
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
   text-align: initial;
 }
 .content-container--button:hover {
@@ -143,6 +141,9 @@
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
+.content-container--button .content-start, .content-container--button .content-end {
+  pointer-events: none;
+}
 
 .content {
   display: flex;
@@ -179,8 +180,19 @@
   color: var(--calcite-ui-text-3);
 }
 
+.content-start {
+  justify-content: flex-start;
+}
+
+.content-end {
+  justify-content: flex-end;
+}
+
 .content-start, .content-end {
-  pointer-events: none;
+  flex: 1 1 auto;
+}
+
+.has-center-content .content-start, .has-center-content .content-end {
   flex: 0 1 auto;
 }
 
@@ -200,6 +212,7 @@
   color: inherit;
 }
 
-::slotted(calcite-list-item-group), ::slotted(calcite-list-item) {
-  padding-left: 0.5rem;
+::slotted(calcite-list-item-group),
+::slotted(calcite-list-item) {
+  padding-inline-start: 0.5rem;
 }

package/dist/collection/components/list-item/list-item.js

@@ -1,6 +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
  */
 import { Component, Element, Prop, h, Host, Method } from "@stencil/core";
 import { SLOTS, CSS } from "./resources";
@@ -26,7 +27,7 @@ export class ListItem {
      */
     this.nonInteractive = false;
     /**
-     * When true, disabled prevents interaction.
+     * When true, prevents user interaction.
      */
     this.disabled = false;
   }
@@ -91,9 +92,14 @@ export class ListItem {
       description ? h("div", { class: CSS.description }, description) : null)) : null;
   }
   renderContentContainer() {
-    const { disabled, nonInteractive } = this;
+    const { description, disabled, label, nonInteractive } = this;
+    const hasCenterContent = !!label || !!description;
     const content = [this.renderContentStart(), this.renderContent(), this.renderContentEnd()];
-    return !nonInteractive ? (h("button", { class: { [CSS.contentContainer]: true, [CSS.contentContainerButton]: true }, disabled: disabled, ref: (focusEl) => (this.focusEl = focusEl) }, content)) : (h("div", { class: CSS.contentContainer, ref: () => (this.focusEl = null) }, content));
+    return !nonInteractive ? (h("button", { class: {
+        [CSS.contentContainer]: true,
+        [CSS.contentContainerButton]: true,
+        [CSS.hasCenterContent]: hasCenterContent
+      }, disabled: disabled, ref: (focusEl) => (this.focusEl = focusEl) }, content)) : (h("div", { class: { [CSS.contentContainer]: true, [CSS.hasCenterContent]: hasCenterContent }, ref: () => (this.focusEl = null) }, content));
   }
   render() {
     return (h(Host, { role: "listitem" },
@@ -143,7 +149,7 @@ export class ListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "An optional description for this item.  This will appear below the label text."
+        "text": "An optional description for the list item. Displays below the label text."
       },
       "attribute": "description",
       "reflect": false
@@ -160,7 +166,7 @@ export class ListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, disabled prevents interaction."
+        "text": "When true, prevents user interaction."
       },
       "attribute": "disabled",
       "reflect": true,
@@ -178,7 +184,7 @@ export class ListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The label text of the list item. This will appear above the description text."
+        "text": "The label text of the list item. Displays above the description text."
       },
       "attribute": "label",
       "reflect": false

package/dist/collection/components/list-item/resources.js

@@ -1,6 +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
  */
 export const CSS = {
   container: "container",
@@ -13,7 +14,8 @@ export const CSS = {
   label: "label",
   description: "description",
   contentEnd: "content-end",
-  actionsEnd: "actions-end"
+  actionsEnd: "actions-end",
+  hasCenterContent: "has-center-content"
 };
 export const SLOTS = {
   actionsStart: "actions-start",

package/dist/collection/components/list-item-group/list-item-group.css

@@ -103,5 +103,5 @@
 }
 
 ::slotted(calcite-list-item-group) {
-  padding-left: 0.5rem;
+  padding-inline-start: 0.5rem;
 }

package/dist/collection/components/list-item-group/list-item-group.js

@@ -1,6 +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
  */
 import { Component, Element, Prop, h, Host } from "@stencil/core";
 import { CSS } from "./resources";
@@ -47,7 +48,7 @@ export class ListItemGroup {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The title used for all nested `calcite-list-item` rows."
+        "text": "The title for all nested `calcite-list-item` rows."
       },
       "attribute": "heading",
       "reflect": true
@@ -69,7 +70,7 @@ export class ListItemGroup {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Number at which section headings should start for this component."
+        "text": "Number at which section headings should start for the group."
       },
       "attribute": "heading-level",
       "reflect": false

package/dist/collection/components/list-item-group/resources.js

@@ -1,6 +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
  */
 export const CSS = {
   heading: "heading",

package/dist/collection/components/loader/loader.css

@@ -84,9 +84,9 @@
 *
 * These properties can be overridden using the component's tag as selector.
 *
-* @prop --calcite-loader-font-size: when type is determinate, the font-size of the loader percentage
-* @prop --calcite-loader-size: the width and height of a non-inline loader
-* @prop --calcite-loader-size-inline: the width and height of an inline loader
+* @prop --calcite-loader-font-size: When type is determinate, the font-size of the loader percentage.
+* @prop --calcite-loader-size: The width and height of a non-inline loader.
+* @prop --calcite-loader-size-inline: The width and height of an inline loader.
 */
 :host{
   position: relative;

package/dist/collection/components/loader/loader.js

@@ -1,6 +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
  */
 import { Component, Element, h, Host, Prop } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -11,17 +12,17 @@ export class Loader {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** Show the loader */
+    /** When true, the loader is active. */
     this.active = false;
-    /** Inline loaders are smaller and will appear to the left of the text */
+    /** When true, displays smaller and appears to the left of the text. */
     this.inline = false;
-    /** Speficy the scale of the loader. Defaults to "m" */
+    /** Specify the scale of the loader. */
     this.scale = "m";
-    /** Percent complete of 100, only valid for determinate indicators */
+    /** Valid only for determinate indicators. Percent complete of 100. */
     this.value = 0;
-    /** Text which should appear under the loading indicator (optional) */
+    /** Text that displays under the loading indicator. */
     this.text = "";
-    /** Turn off spacing around the loader */
+    /** Disables spacing around the loader. */
     this.noPadding = false;
   }
   //--------------------------------------------------------------------------
@@ -67,6 +68,8 @@ export class Loader {
   //--------------------------------------------------------------------------
   /**
    * Return the proper sizes based on the scale property
+   *
+   * @param scale
    */
   getSize(scale) {
     return {
@@ -103,7 +106,7 @@ export class Loader {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Show the loader"
+        "text": "When true, the loader is active."
       },
       "attribute": "active",
       "reflect": true,
@@ -121,7 +124,7 @@ export class Loader {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Inline loaders are smaller and will appear to the left of the text"
+        "text": "When true, displays smaller and appears to the left of the text."
       },
       "attribute": "inline",
       "reflect": true,
@@ -139,7 +142,7 @@ export class Loader {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Accessible name for the component"
+        "text": "Accessible name for the loader."
       },
       "attribute": "label",
       "reflect": false
@@ -161,7 +164,7 @@ export class Loader {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Speficy the scale of the loader. Defaults to \"m\""
+        "text": "Specify the scale of the loader."
       },
       "attribute": "scale",
       "reflect": true,
@@ -179,7 +182,7 @@ export class Loader {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Use indeterminate if finding actual progress value is impossible"
+        "text": "Use indeterminate if finding actual progress value is impossible."
       },
       "attribute": "type",
       "reflect": true
@@ -196,7 +199,7 @@ export class Loader {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Percent complete of 100, only valid for determinate indicators"
+        "text": "Valid only for determinate indicators. Percent complete of 100."
       },
       "attribute": "value",
       "reflect": false,
@@ -211,10 +214,10 @@ export class Loader {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": "Text which should appear under the loading indicator (optional)"
+        "text": "Text that displays under the loading indicator."
       },
       "attribute": "text",
       "reflect": false,
@@ -232,7 +235,7 @@ export class Loader {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Turn off spacing around the loader"
+        "text": "Disables spacing around the loader."
       },
       "attribute": "no-padding",
       "reflect": false,

package/dist/collection/components/modal/interfaces.js

@@ -1,5 +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
  */
 export {};

package/dist/collection/components/modal/modal.css

@@ -83,11 +83,11 @@
 *
 * These properties can be overridden using the component's tag as selector.
 *
-* @prop --calcite-modal-content-text: the font-size of the modal content
-* @prop --calcite-modal-padding: the top/bottom padding around items in the modal
-* @prop --calcite-modal-padding-large: the left/right padding around items in the modal
-* @prop --calcite-modal-title-text: the font-size of the modal title
-* @prop --calcite-scrim-background: the semi-transparent background color behind modal
+* @prop --calcite-modal-content-text: The `calcite-modal` content font size.
+* @prop --calcite-modal-padding: The top/bottom padding around items in the `calcite-modal`.
+* @prop --calcite-modal-padding-large: The left/right padding around items in the `calcite-modal`.
+* @prop --calcite-modal-title-text: The `calcite-modal` title font size.
+* @prop --calcite-scrim-background: The semi-transparent background color behind the `calcite-modal`.
 */
 :host {
   position: fixed;
@@ -146,13 +146,13 @@
   display: flex;
   width: 100%;
   flex-direction: column;
+  overflow: hidden;
   border-radius: 0.25rem;
   background-color: var(--calcite-ui-foreground-1);
   opacity: 0;
   --tw-shadow: 0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);
   --tw-shadow-colored: 0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  overflow: hidden;
   z-index: 102;
   -webkit-overflow-scrolling: touch;
   visibility: hidden;
@@ -201,13 +201,8 @@
   border-style: none;
   background-color: transparent;
   color: var(--calcite-ui-text-3);
-  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;
   border-start-end-radius: 0.25rem;
   padding: var(--calcite-modal-padding);
   flex: 0 0 auto;
@@ -328,20 +323,10 @@ slot[name=primary] {
 @media screen and (max-width: 35rem) {
   :host([width=s]) .modal {
     margin: 0px;
-  }
-  :host([width=s]) .modal {
     height: 100%;
-  }
-  :host([width=s]) .modal {
     max-height: 100%;
-  }
-  :host([width=s]) .modal {
     width: 100%;
-  }
-  :host([width=s]) .modal {
     max-width: 100%;
-  }
-  :host([width=s]) .modal {
     border-radius: 0px;
   }
   :host([width=s]) .content {
@@ -360,20 +345,10 @@ slot[name=primary] {
 @media screen and (max-width: 51rem) {
   :host([width=m]) .modal {
     margin: 0px;
-  }
-  :host([width=m]) .modal {
     height: 100%;
-  }
-  :host([width=m]) .modal {
     max-height: 100%;
-  }
-  :host([width=m]) .modal {
     width: 100%;
-  }
-  :host([width=m]) .modal {
     max-width: 100%;
-  }
-  :host([width=m]) .modal {
     border-radius: 0px;
   }
   :host([width=m]) .content {
@@ -392,20 +367,10 @@ slot[name=primary] {
 @media screen and (max-width: 97rem) {
   :host([width=l]) .modal {
     margin: 0px;
-  }
-  :host([width=l]) .modal {
     height: 100%;
-  }
-  :host([width=l]) .modal {
     max-height: 100%;
-  }
-  :host([width=l]) .modal {
     width: 100%;
-  }
-  :host([width=l]) .modal {
     max-width: 100%;
-  }
-  :host([width=l]) .modal {
     border-radius: 0px;
   }
   :host([width=l]) .content {
@@ -497,9 +462,6 @@ slot[name=primary] {
 
   .footer {
     position: sticky;
-  }
-
-  .footer {
     bottom: 0px;
   }
 }
@@ -513,9 +475,6 @@ slot[name=primary] {
 
   .back, .secondary {
     margin: 0px;
-  }
-
-  .back, .secondary {
     margin-bottom: 0.25rem;
   }
 }