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

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.85
  */
 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

@@ -171,7 +171,8 @@ h3.heading {
   line-height: 1.25rem;
 }
 
-h4.heading, h5.heading {
+h4.heading, 
+h5.heading {
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
@@ -205,9 +206,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;
 }
@@ -246,7 +245,7 @@ calcite-handle {
   word-break: break-word;
 }
 
-.summary {
+.description {
   margin-top: 0.125rem;
   padding: 0px;
   font-size: var(--calcite-font-size--2);
@@ -316,6 +315,9 @@ calcite-handle {
 
 .content {
   animation: in var(--calcite-internal-animation-timing-slow) ease-in-out;
+}
+
+.content--spaced {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   padding-top: 0.5rem;

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.85
  */
 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;
@@ -59,6 +67,8 @@ export class Block {
      * When true, the block's content will be displayed.
      */
     this.open = false;
+    /** When true, removes padding for the slotted content */
+    this.disablePadding = false;
     this.guid = guid();
     // --------------------------------------------------------------------------
     //
@@ -113,10 +123,10 @@ export class Block {
     return hasIcon ? h("div", { class: CSS.icon }, iconEl) : null;
   }
   renderTitle() {
-    const { heading, headingLevel, summary } = this;
-    return heading || summary ? (h("div", { class: CSS.title },
+    const { heading, headingLevel, summary, description } = this;
+    return heading || summary || description ? (h("div", { class: CSS.title },
       h(Heading, { class: CSS.heading, level: headingLevel || HEADING_LEVEL }, heading),
-      summary ? h("div", { class: CSS.summary }, summary) : null)) : null;
+      summary || description ? (h("div", { class: CSS.description }, summary || description)) : null)) : null;
   }
   render() {
     const { collapsible, el, intlCollapse, intlExpand, loading, open, intlLoading } = this;
@@ -144,7 +154,10 @@ export class Block {
           [CSS.article]: true
         } },
         headerNode,
-        h("section", { "aria-expanded": toAriaBoolean(open), "aria-labelledby": buttonId, class: CSS.content, hidden: !open, id: regionId }, this.renderScrim()))));
+        h("section", { "aria-expanded": toAriaBoolean(open), "aria-labelledby": buttonId, class: {
+            content: true,
+            "content--spaced": !this.disablePadding
+          }, hidden: !open, id: regionId }, this.renderScrim()))));
   }
   static get is() { return "calcite-block"; }
   static get encapsulation() { return "shadow"; }
@@ -259,7 +272,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 +293,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",
@@ -395,11 +414,49 @@ export class Block {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use description instead"
+          }],
         "text": "Block summary."
       },
       "attribute": "summary",
       "reflect": false
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Block description"
+      },
+      "attribute": "description",
+      "reflect": false
+    },
+    "disablePadding": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, removes padding for the slotted content"
+      },
+      "attribute": "disable-padding",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get events() { return [{

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.85
  */
 export const CSS = {
   article: "article",
@@ -16,6 +16,7 @@ export const CSS = {
   header: "header",
   button: "button",
   summary: "summary",
+  description: "description",
   controlContainer: "control-container",
   valid: "valid",
   invalid: "invalid",

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

@@ -106,7 +106,8 @@
   color: var(--calcite-ui-text-2);
 }
 
-.toggle--switch, .section-header {
+.toggle--switch, 
+.section-header {
   margin-left: 0px;
   margin-right: 0px;
   margin-top: 0.25rem;
@@ -121,15 +122,15 @@
   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 {
+.toggle--switch:focus, 
+.section-header:focus {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: 2px;
 }
-.toggle--switch:hover, .section-header:hover {
+.toggle--switch:hover, 
+.section-header:hover {
   color: var(--calcite-ui-text-1);
 }
 

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.85
  */
 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.85
  */
 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.85
  */
 export const CSS = {
   content: "content",