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

package/dist/collection/components/block/block.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, Element, Event, h, Host, Prop } from "@stencil/core";
 import { CSS, HEADING_LEVEL, ICONS, SLOTS, TEXT } from "./resources";
-import { getSlotted } from "../../utils/dom";
+import { getSlotted, toAriaBoolean } from "../../utils/dom";
 import { Heading } from "../functional/Heading";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { updateHostInteraction } from "../../utils/interactive";
@@ -35,11 +35,27 @@ export class Block {
      * When true, displays a drag handle in the header.
      */
     this.dragHandle = false;
-    /** string to override English loading text
+    /**
+     * 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
+     *
      * @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;
@@ -51,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();
     // --------------------------------------------------------------------------
     //
@@ -105,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;
@@ -124,7 +142,7 @@ export class Block {
     const buttonId = `${guid}-button`;
     const headerNode = (h("div", { class: CSS.headerContainer },
       this.dragHandle ? h("calcite-handle", null) : null,
-      collapsible ? (h("button", { "aria-controls": regionId, "aria-expanded": collapsible ? open.toString() : null, "aria-label": toggleLabel, class: CSS.toggle, id: buttonId, onClick: this.onHeaderClick, title: toggleLabel },
+      collapsible ? (h("button", { "aria-controls": regionId, "aria-expanded": collapsible ? toAriaBoolean(open) : null, "aria-label": toggleLabel, class: CSS.toggle, id: buttonId, onClick: this.onHeaderClick, title: toggleLabel },
         headerContent,
         !hasControl && !hasMenuActions ? (h("calcite-icon", { "aria-hidden": "true", class: CSS.toggleIcon, icon: collapseIcon, scale: "s" })) : null)) : (headerContent),
       loading ? (h("calcite-loader", { inline: true, "is-active": true, label: intlLoading })) : hasControl ? (h("div", { class: CSS.controlContainer },
@@ -132,11 +150,14 @@ export class Block {
       hasMenuActions ? (h("calcite-action-menu", { label: this.intlOptions || TEXT.options },
         h("slot", { name: SLOTS.headerMenuActions }))) : null));
     return (h(Host, null,
-      h("article", { "aria-busy": loading.toString(), class: {
+      h("article", { "aria-busy": toAriaBoolean(loading), class: {
           [CSS.article]: true
         } },
         headerNode,
-        h("section", { "aria-expanded": this.open.toString(), "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"; }
@@ -251,11 +272,15 @@ export class Block {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
-        "text": "Tooltip used for the toggle when expanded."
+        "tags": [{
+            "name": "default",
+            "text": "\"Collapse\""
+          }],
+        "text": "Aria-label for collapsing the toggle and tooltip used for the toggle when expanded."
       },
       "attribute": "intl-collapse",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "TEXT.collapse"
     },
     "intlExpand": {
       "type": "string",
@@ -268,11 +293,15 @@ export class Block {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
-        "text": "Tooltip used for the toggle when collapsed."
+        "tags": [{
+            "name": "default",
+            "text": "\"Expand\""
+          }],
+        "text": "Aria-label for expanding the toggle and tooltip used for the toggle when collapsed."
       },
       "attribute": "intl-expand",
-      "reflect": false
+      "reflect": false,
+      "defaultValue": "TEXT.expand"
     },
     "intlLoading": {
       "type": "string",
@@ -385,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.81
+ * v1.0.0-beta.84
  */
 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,10 +1,10 @@
 /*!
  * 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, Prop, h, Host } from "@stencil/core";
-import { getElementDir } from "../../utils/dom";
+import { getElementDir, toAriaBoolean } from "../../utils/dom";
 import { CSS, ICONS, TEXT } from "./resources";
 import { guid } from "../../utils/guid";
 /**
@@ -84,7 +84,7 @@ export class BlockSection {
       this.renderStatusIcon()));
     return (h(Host, null,
       headerNode,
-      h("section", { "aria-expanded": open.toString(), "aria-labelledby": buttonId, class: CSS.content, hidden: !open, id: regionId },
+      h("section", { "aria-expanded": toAriaBoolean(open), "aria-labelledby": buttonId, class: CSS.content, hidden: !open, id: regionId },
         h("slot", null))));
   }
   static get is() { return "calcite-block-section"; }

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.81
+ * v1.0.0-beta.84
  */
 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.81
+ * v1.0.0-beta.84
  */
 export const CSS = {
   content: "content",

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

@@ -91,12 +91,12 @@
   border-radius: 50px;
 }
 
-:host button, :host a {
-  outline-offset: 0;
+:host button, 
+:host a {
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
-:host button:focus, :host a:focus {
+:host button:focus, 
+:host a:focus {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: 2px;
 }
@@ -126,9 +126,10 @@
   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 {
+:host button:hover, 
+:host a:hover {
   -webkit-text-decoration-line: none;
           text-decoration-line: none;
 }
@@ -170,19 +171,23 @@
   width: 100%;
 }
 
-:host([alignment=center]:not([width=auto])) a, :host([alignment=center]:not([width=auto])) button {
+:host([alignment=center]:not([width=auto])) a, 
+:host([alignment=center]:not([width=auto])) button {
   justify-content: center;
 }
 
-:host([alignment=start]:not([width=auto])) a, :host([alignment=start]:not([width=auto])) button {
+:host([alignment=start]:not([width=auto])) a, 
+:host([alignment=start]:not([width=auto])) button {
   justify-content: flex-start;
 }
 
-:host([alignment=end]:not([width=auto])) a, :host([alignment=end]:not([width=auto])) button {
+:host([alignment=end]:not([width=auto])) a, 
+:host([alignment=end]:not([width=auto])) button {
   justify-content: flex-end;
 }
 
-:host([alignment*=space-between]:not([width=auto])) a, :host([alignment*=space-between]:not([width=auto])) button {
+:host([alignment*=space-between]:not([width=auto])) a, 
+:host([alignment*=space-between]:not([width=auto])) button {
   justify-content: space-between;
 }
 
@@ -231,7 +236,8 @@
 :host([loading]) {
   pointer-events: none;
 }
-:host([loading]) button, :host([loading]) a {
+:host([loading]) button, 
+:host([loading]) a {
   pointer-events: none;
   opacity: var(--calcite-ui-opacity-disabled);
 }
@@ -280,59 +286,79 @@
 :host([loading]) a.content--slotted .calcite-button--loader calcite-loader {
   margin-inline-end: var(--calcite-button-content-margin);
 }
-:host([loading]) button:not(.content--slotted) .icon--start, :host([loading]) button:not(.content--slotted) .icon--end, :host([loading]) a:not(.content--slotted) .icon--start, :host([loading]) a:not(.content--slotted) .icon--end {
+:host([loading]) button:not(.content--slotted) .icon--start, 
+:host([loading]) button:not(.content--slotted) .icon--end, 
+:host([loading]) a:not(.content--slotted) .icon--start, 
+:host([loading]) a:not(.content--slotted) .icon--end {
   display: none;
 }
 
-:host([appearance=solid]) button, :host([appearance=solid]) a {
+:host([appearance=solid]) button, 
+:host([appearance=solid]) a {
   border-width: 1px;
   border-style: solid;
   border-color: transparent;
 }
 
-:host([appearance=solid][color=blue]) button, :host([appearance=solid][color=blue]) a {
+:host([appearance=solid][color=blue]) button, 
+:host([appearance=solid][color=blue]) a {
   background-color: var(--calcite-ui-brand);
   color: var(--calcite-ui-text-inverse);
 }
-:host([appearance=solid][color=blue]) button:hover, :host([appearance=solid][color=blue]) button:focus, :host([appearance=solid][color=blue]) a:hover, :host([appearance=solid][color=blue]) a:focus {
+:host([appearance=solid][color=blue]) button:hover,  :host([appearance=solid][color=blue]) button:focus, 
+:host([appearance=solid][color=blue]) a:hover, 
+:host([appearance=solid][color=blue]) a:focus {
   background-color: var(--calcite-ui-brand-hover);
 }
-:host([appearance=solid][color=blue]) button:active, :host([appearance=solid][color=blue]) a:active {
+:host([appearance=solid][color=blue]) button:active, 
+:host([appearance=solid][color=blue]) a:active {
   background-color: var(--calcite-ui-brand-press);
 }
-:host([appearance=solid][color=blue]) button calcite-loader, :host([appearance=solid][color=blue]) a calcite-loader {
+:host([appearance=solid][color=blue]) button calcite-loader, 
+:host([appearance=solid][color=blue]) a calcite-loader {
   color: var(--calcite-ui-text-inverse);
 }
 
-:host([appearance=solid][color=red]) button, :host([appearance=solid][color=red]) a {
+:host([appearance=solid][color=red]) button, 
+:host([appearance=solid][color=red]) a {
   background-color: var(--calcite-ui-danger);
   color: var(--calcite-ui-text-inverse);
 }
-:host([appearance=solid][color=red]) button:hover, :host([appearance=solid][color=red]) button:focus, :host([appearance=solid][color=red]) a:hover, :host([appearance=solid][color=red]) a:focus {
+:host([appearance=solid][color=red]) button:hover,  :host([appearance=solid][color=red]) button:focus, 
+:host([appearance=solid][color=red]) a:hover, 
+:host([appearance=solid][color=red]) a:focus {
   background-color: var(--calcite-ui-danger-hover);
 }
-:host([appearance=solid][color=red]) button:active, :host([appearance=solid][color=red]) a:active {
+:host([appearance=solid][color=red]) button:active, 
+:host([appearance=solid][color=red]) a:active {
   background-color: var(--calcite-ui-danger-press);
 }
-:host([appearance=solid][color=red]) button calcite-loader, :host([appearance=solid][color=red]) a calcite-loader {
+:host([appearance=solid][color=red]) button calcite-loader, 
+:host([appearance=solid][color=red]) a calcite-loader {
   color: var(--calcite-ui-text-inverse);
 }
 
-:host([appearance=solid][color=neutral]) button, :host([appearance=solid][color=neutral]) a {
+:host([appearance=solid][color=neutral]) button, 
+:host([appearance=solid][color=neutral]) a {
   background-color: var(--calcite-ui-foreground-3);
   color: var(--calcite-ui-text-1);
 }
-:host([appearance=solid][color=neutral]) button:hover, :host([appearance=solid][color=neutral]) button:focus, :host([appearance=solid][color=neutral]) a:hover, :host([appearance=solid][color=neutral]) a:focus {
+:host([appearance=solid][color=neutral]) button:hover,  :host([appearance=solid][color=neutral]) button:focus, 
+:host([appearance=solid][color=neutral]) a:hover, 
+:host([appearance=solid][color=neutral]) a:focus {
   background-color: var(--calcite-ui-foreground-2);
 }
-:host([appearance=solid][color=neutral]) button:active, :host([appearance=solid][color=neutral]) a:active {
+:host([appearance=solid][color=neutral]) button:active, 
+:host([appearance=solid][color=neutral]) a:active {
   background-color: var(--calcite-ui-foreground-1);
 }
-:host([appearance=solid][color=neutral]) button calcite-loader, :host([appearance=solid][color=neutral]) a calcite-loader {
+:host([appearance=solid][color=neutral]) button calcite-loader, 
+:host([appearance=solid][color=neutral]) a calcite-loader {
   color: var(--calcite-ui-text-1);
 }
 
-:host([appearance=solid][color=inverse]) button, :host([appearance=solid][color=inverse]) a {
+:host([appearance=solid][color=inverse]) button, 
+:host([appearance=solid][color=inverse]) a {
   color: var(--calcite-ui-text-inverse);
   background-color: var(--calcite-ui-inverse);
 }
@@ -345,32 +371,38 @@
 :host([appearance=solid][color=inverse]) a:active {
   background-color: var(--calcite-ui-inverse-press);
 }
-:host([appearance=solid][color=inverse]) button calcite-loader, :host([appearance=solid][color=inverse]) a calcite-loader {
+:host([appearance=solid][color=inverse]) button calcite-loader, 
+:host([appearance=solid][color=inverse]) a calcite-loader {
   color: var(--calcite-ui-text-inverse);
 }
 
-:host([appearance=outline]) button, :host([appearance=outline]) a {
+:host([appearance=outline]) button, 
+:host([appearance=outline]) a {
   border-width: 1px;
   border-style: solid;
   background-color: var(--calcite-ui-foreground-1);
   box-shadow: inset 0 0 0 1px transparent;
 }
 
-:host([appearance=outline][color=blue]) button, :host([appearance=outline][color=blue]) a {
+:host([appearance=outline][color=blue]) button, 
+:host([appearance=outline][color=blue]) a {
   border-color: var(--calcite-ui-brand);
   color: var(--calcite-ui-brand);
 }
-:host([appearance=outline][color=blue]) button:hover, :host([appearance=outline][color=blue]) a:hover {
+:host([appearance=outline][color=blue]) button:hover, 
+:host([appearance=outline][color=blue]) a:hover {
   border-color: var(--calcite-ui-brand-hover);
   color: var(--calcite-ui-brand-hover);
   box-shadow: inset 0 0 0 1px var(--calcite-ui-brand-hover);
 }
-:host([appearance=outline][color=blue]) button:focus, :host([appearance=outline][color=blue]) a:focus {
+:host([appearance=outline][color=blue]) button:focus, 
+:host([appearance=outline][color=blue]) a:focus {
   border-color: var(--calcite-ui-brand);
   color: var(--calcite-ui-brand);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
 }
-:host([appearance=outline][color=blue]) button:active, :host([appearance=outline][color=blue]) a:active {
+:host([appearance=outline][color=blue]) button:active, 
+:host([appearance=outline][color=blue]) a:active {
   border-color: var(--calcite-ui-brand-press);
   color: var(--calcite-ui-brand-press);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-brand-press);
@@ -380,21 +412,25 @@
   color: var(--calcite-ui-brand);
 }
 
-:host([appearance=outline][color=red]) button, :host([appearance=outline][color=red]) a {
+:host([appearance=outline][color=red]) button, 
+:host([appearance=outline][color=red]) a {
   border-color: var(--calcite-ui-danger);
   color: var(--calcite-ui-danger);
 }
-:host([appearance=outline][color=red]) button:hover, :host([appearance=outline][color=red]) a:hover {
+:host([appearance=outline][color=red]) button:hover, 
+:host([appearance=outline][color=red]) a:hover {
   border-color: var(--calcite-ui-danger-hover);
   color: var(--calcite-ui-danger-hover);
   box-shadow: inset 0 0 0 1px var(--calcite-ui-danger-hover);
 }
-:host([appearance=outline][color=red]) button:focus, :host([appearance=outline][color=red]) a:focus {
+:host([appearance=outline][color=red]) button:focus, 
+:host([appearance=outline][color=red]) a:focus {
   border-color: var(--calcite-ui-danger);
   color: var(--calcite-ui-danger);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-danger);
 }
-:host([appearance=outline][color=red]) button:active, :host([appearance=outline][color=red]) a:active {
+:host([appearance=outline][color=red]) button:active, 
+:host([appearance=outline][color=red]) a:active {
   border-color: var(--calcite-ui-danger-press);
   color: var(--calcite-ui-danger-press);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-danger-press);
@@ -404,7 +440,8 @@
   color: var(--calcite-ui-danger);
 }
 
-:host([appearance=outline][color=neutral]) button, :host([appearance=outline][color=neutral]) a {
+:host([appearance=outline][color=neutral]) button, 
+:host([appearance=outline][color=neutral]) a {
   color: var(--calcite-ui-text-1);
   border-color: var(--calcite-ui-foreground-3);
 }
@@ -420,11 +457,13 @@
 :host([appearance=outline][color=neutral]) a:active {
   box-shadow: inset 0 0 0 2px var(--calcite-ui-foreground-3);
 }
-:host([appearance=outline][color=neutral]) button calcite-loader, :host([appearance=outline][color=neutral]) a calcite-loader {
+:host([appearance=outline][color=neutral]) button calcite-loader, 
+:host([appearance=outline][color=neutral]) a calcite-loader {
   color: var(--calcite-ui-text-1);
 }
 
-:host([appearance=outline][color=inverse]) button, :host([appearance=outline][color=inverse]) a {
+:host([appearance=outline][color=inverse]) button, 
+:host([appearance=outline][color=inverse]) a {
   color: var(--calcite-ui-text-1);
   border-color: var(--calcite-ui-inverse);
 }
@@ -443,32 +482,38 @@
   border-color: var(--calcite-ui-inverse-press);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-inverse-press);
 }
-:host([appearance=outline][color=inverse]) button calcite-loader, :host([appearance=outline][color=inverse]) a calcite-loader {
+:host([appearance=outline][color=inverse]) button calcite-loader, 
+:host([appearance=outline][color=inverse]) a calcite-loader {
   color: var(--calcite-ui-text-1);
 }
 
-:host([appearance=clear]) button, :host([appearance=clear]) a {
+:host([appearance=clear]) button, 
+:host([appearance=clear]) a {
   border-width: 1px;
   border-style: solid;
   background-color: transparent;
   box-shadow: inset 0 0 0 1px transparent;
 }
 
-:host([appearance=clear][color=blue]) button, :host([appearance=clear][color=blue]) a {
+:host([appearance=clear][color=blue]) button, 
+:host([appearance=clear][color=blue]) a {
   border-color: var(--calcite-ui-brand);
   color: var(--calcite-ui-brand);
 }
-:host([appearance=clear][color=blue]) button:hover, :host([appearance=clear][color=blue]) a:hover {
+:host([appearance=clear][color=blue]) button:hover, 
+:host([appearance=clear][color=blue]) a:hover {
   border-color: var(--calcite-ui-brand-hover);
   color: var(--calcite-ui-brand-hover);
   box-shadow: inset 0 0 0 1px var(--calcite-ui-brand-hover);
 }
-:host([appearance=clear][color=blue]) button:focus, :host([appearance=clear][color=blue]) a:focus {
+:host([appearance=clear][color=blue]) button:focus, 
+:host([appearance=clear][color=blue]) a:focus {
   border-color: var(--calcite-ui-brand);
   color: var(--calcite-ui-brand);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
 }
-:host([appearance=clear][color=blue]) button:active, :host([appearance=clear][color=blue]) a:active {
+:host([appearance=clear][color=blue]) button:active, 
+:host([appearance=clear][color=blue]) a:active {
   border-color: var(--calcite-ui-brand-press);
   color: var(--calcite-ui-brand-press);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-brand-press);
@@ -478,21 +523,25 @@
   color: var(--calcite-ui-brand);
 }
 
-:host([appearance=clear][color=red]) button, :host([appearance=clear][color=red]) a {
+:host([appearance=clear][color=red]) button, 
+:host([appearance=clear][color=red]) a {
   border-color: var(--calcite-ui-danger);
   color: var(--calcite-ui-danger);
 }
-:host([appearance=clear][color=red]) button:hover, :host([appearance=clear][color=red]) a:hover {
+:host([appearance=clear][color=red]) button:hover, 
+:host([appearance=clear][color=red]) a:hover {
   border-color: var(--calcite-ui-danger-hover);
   color: var(--calcite-ui-danger-hover);
   box-shadow: inset 0 0 0 1px var(--calcite-ui-danger-hover);
 }
-:host([appearance=clear][color=red]) button:focus, :host([appearance=clear][color=red]) a:focus {
+:host([appearance=clear][color=red]) button:focus, 
+:host([appearance=clear][color=red]) a:focus {
   border-color: var(--calcite-ui-danger);
   color: var(--calcite-ui-danger);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-danger);
 }
-:host([appearance=clear][color=red]) button:active, :host([appearance=clear][color=red]) a:active {
+:host([appearance=clear][color=red]) button:active, 
+:host([appearance=clear][color=red]) a:active {
   border-color: var(--calcite-ui-danger-press);
   color: var(--calcite-ui-danger-press);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-danger-press);
@@ -502,7 +551,8 @@
   color: var(--calcite-ui-danger);
 }
 
-:host([appearance=clear][color=neutral]) button, :host([appearance=clear][color=neutral]) a {
+:host([appearance=clear][color=neutral]) button, 
+:host([appearance=clear][color=neutral]) a {
   color: var(--calcite-ui-text-1);
   border-color: var(--calcite-ui-foreground-3);
 }
@@ -518,11 +568,13 @@
 :host([appearance=clear][color=neutral]) a:active {
   box-shadow: inset 0 0 0 2px var(--calcite-ui-foreground-3);
 }
-:host([appearance=clear][color=neutral]) button calcite-loader, :host([appearance=clear][color=neutral]) a calcite-loader {
+:host([appearance=clear][color=neutral]) button calcite-loader, 
+:host([appearance=clear][color=neutral]) a calcite-loader {
   color: var(--calcite-ui-text-1);
 }
 
-:host([appearance=clear][color=inverse]) button, :host([appearance=clear][color=inverse]) a {
+:host([appearance=clear][color=inverse]) button, 
+:host([appearance=clear][color=inverse]) a {
   color: var(--calcite-ui-text-1);
   border-color: var(--calcite-ui-inverse);
 }
@@ -541,7 +593,8 @@
   border-color: var(--calcite-ui-inverse-press);
   box-shadow: inset 0 0 0 2px var(--calcite-ui-inverse-press);
 }
-:host([appearance=clear][color=inverse]) button calcite-loader, :host([appearance=clear][color=inverse]) a calcite-loader {
+:host([appearance=clear][color=inverse]) button calcite-loader, 
+:host([appearance=clear][color=inverse]) a calcite-loader {
   color: var(--calcite-ui-text-1);
 }
 
@@ -557,7 +610,8 @@
   border-inline-end-width: 1px;
 }
 
-:host([appearance=transparent]:not(.enable-editing-button)) button, :host([appearance=transparent]:not(.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(.enable-editing-button)) button:hover, :host([appearance=transparent]:not(.enable-editing-button)) button:focus,
@@ -612,7 +666,9 @@
   color: var(--calcite-ui-danger);
 }
 
-: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 {
+: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);
 }
 
@@ -642,11 +698,14 @@
   outline-offset: -2px;
 }
 
-:host([appearance=transparent][color=inverse]) button, :host([appearance=transparent][color=inverse]) a, :host([appearance=transparent][color=inverse]) calcite-loader {
+:host([appearance=transparent][color=inverse]) button, 
+:host([appearance=transparent][color=inverse]) a, 
+:host([appearance=transparent][color=inverse]) calcite-loader {
   color: var(--calcite-ui-text-inverse);
 }
 
-:host([scale=s]) button.content--slotted, :host([scale=s]) a.content--slotted {
+:host([scale=s]) button.content--slotted, 
+:host([scale=s]) a.content--slotted {
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
 }