@esri/calcite-components 1.0.0-next.686 → 1.0.0-next.688

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-next.686
+ * v1.0.0-next.688
  */
 import "form-request-submit-polyfill/form-request-submit-polyfill";
 import { h, Build } from "@stencil/core";
@@ -38,7 +38,7 @@ export class Button {
     this.alignment = "center";
     this.appearance = "solid";
     this.label = undefined;
-    this.color = "blue";
+    this.kind = "brand";
     this.disabled = false;
     this.href = undefined;
     this.iconEnd = undefined;
@@ -47,7 +47,6 @@ export class Button {
     this.loading = false;
     this.name = undefined;
     this.rel = undefined;
-    this.form = undefined;
     this.round = false;
     this.scale = "m";
     this.splitChild = false;
@@ -85,7 +84,7 @@ export class Button {
     this.hasLoader = this.loading;
     this.setupTextContentObserver();
     connectLabel(this);
-    this.formEl = closestElementCrossShadowBoundary(this.el, this.form ? `#${this.form}` : "form");
+    this.formEl = closestElementCrossShadowBoundary(this.el, "form");
   }
   disconnectedCallback() {
     this.mutationObserver?.disconnect();
@@ -197,12 +196,15 @@ export class Button {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "ButtonAppearance",
-          "resolved": "\"clear\" | \"minimal\" | \"outline\" | \"solid\" | \"transparent\"",
+          "original": "Extract<\n    \"outline\" | \"outline-fill\" | \"solid\" | \"transparent\",\n    Appearance\n  >",
+          "resolved": "\"outline\" | \"outline-fill\" | \"solid\" | \"transparent\"",
           "references": {
-            "ButtonAppearance": {
+            "Extract": {
+              "location": "global"
+            },
+            "Appearance": {
               "location": "import",
-              "path": "./interfaces"
+              "path": "../interfaces"
             }
           }
         },
@@ -233,16 +235,19 @@ export class Button {
         "attribute": "label",
         "reflect": false
       },
-      "color": {
+      "kind": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "ButtonColor",
-          "resolved": "\"blue\" | \"inverse\" | \"neutral\" | \"red\"",
+          "original": "Extract<\"brand\" | \"danger\" | \"inverse\" | \"neutral\", Kind>",
+          "resolved": "\"brand\" | \"danger\" | \"inverse\" | \"neutral\"",
           "references": {
-            "ButtonColor": {
+            "Extract": {
+              "location": "global"
+            },
+            "Kind": {
               "location": "import",
-              "path": "./interfaces"
+              "path": "../interfaces"
             }
           }
         },
@@ -250,11 +255,11 @@ export class Button {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Specifies the color of the component."
+          "text": "Specifies the kind of the component (will apply to border and background if applicable)."
         },
-        "attribute": "color",
+        "attribute": "kind",
         "reflect": true,
-        "defaultValue": "\"blue\""
+        "defaultValue": "\"brand\""
       },
       "disabled": {
         "type": "boolean",
@@ -402,26 +407,6 @@ export class Button {
         "attribute": "rel",
         "reflect": true
       },
-      "form": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "\u2013 The property is no longer needed if the component is placed inside a form."
-            }],
-          "text": "The form ID to associate with the component."
-        },
-        "attribute": "form",
-        "reflect": false
-      },
       "round": {
         "type": "boolean",
         "mutable": false,

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-next.686
+ * v1.0.0-next.688
  */
 export const CSS = {
   buttonLoader: "calcite-button--loader",

package/dist/collection/components/card/card.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-next.686
+ * v1.0.0-next.688
  */
 import { h } from "@stencil/core";
 import { getSlotted, toAriaBoolean } from "../../utils/dom";

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-next.686
+ * v1.0.0-next.688
  */
 export const CSS = {
   container: "container",

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-next.686
+ * v1.0.0-next.688
  */
 import { h, Host } from "@stencil/core";
 import { guid } from "../../utils/guid";

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

@@ -93,13 +93,14 @@
 :host([scale=s]) .image-container {
   block-size: 1.25rem;
   inline-size: 1.25rem;
+  padding-inline-start: 0.125rem;
 }
 
 :host([scale=m]) {
   block-size: 2rem;
   font-size: var(--calcite-font-size--1);
   --calcite-chip-spacing-unit-l: 0.75rem;
-  --calcite-chip-spacing-unit-s: 6px;
+  --calcite-chip-spacing-unit-s: calc(0.75rem / 2);
 }
 :host([scale=m]) .image-container {
   block-size: 1.5rem;
@@ -116,7 +117,7 @@
 :host([scale=l]) .image-container {
   block-size: 2rem;
   inline-size: 2rem;
-  padding-inline-start: 0.25rem;
+  padding-inline-start: 0.5rem;
 }
 
 :host {
@@ -143,65 +144,120 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  padding-block: 0;
 }
 
-:host span {
-  padding-block: 0;
+.content--slotted .title {
   padding-inline: var(--calcite-chip-spacing-unit-l);
 }
 
-:host([closable]) span {
+:host([closable][icon]) .container:not(.content--slotted) .title {
+  padding-inline: 0 var(--calcite-chip-spacing-unit-s);
+}
+
+:host(:not([closable])) .container:not(.content--slotted) .chip-icon {
+  margin-inline: auto;
+}
+
+.container:not(.image--slotted) .image-container {
+  display: none;
+}
+
+:host([scale=s][closable]) .container:not(.content--slotted) .image-container {
+  margin-inline-end: 0.125rem;
+}
+
+:host([scale=m][closable]) .container:not(.content--slotted) .image-container {
+  margin-inline-end: 0.25rem;
+}
+
+:host([scale=l][closable]) .container:not(.content--slotted) .image-container {
+  margin-inline-end: 0.5rem;
+}
+
+:host([scale=s]:not([closable])) .container:not(.content--slotted) {
+  block-size: 1.5rem;
+  inline-size: 1.5rem;
+}
+:host([scale=s]:not([closable])) .container:not(.content--slotted) .image-container {
+  padding-inline: 0.125rem;
+}
+
+:host([scale=m]:not([closable])) .container:not(.content--slotted) {
+  block-size: 2rem;
+  inline-size: 2rem;
+}
+:host([scale=m]:not([closable])) .container:not(.content--slotted) .image-container {
+  padding-inline: 0.25rem;
+}
+
+:host([scale=l]:not([closable])) .container:not(.content--slotted) {
+  block-size: 2.75rem;
+  inline-size: 2.75rem;
+}
+:host([scale=l]:not([closable])) .container:not(.content--slotted) .image-container {
+  padding-inline: calc(0.75rem / 2);
+}
+
+:host([closable]) .content--slotted .title {
   padding-inline: var(--calcite-chip-spacing-unit-l) var(--calcite-chip-spacing-unit-s);
 }
 
-:host([icon]:not([closable])) span {
-  padding-block: 0;
-  padding-inline: var(--calcite-chip-spacing-unit-l);
+:host([scale=s]) button {
+  inline-size: 1rem;
+  block-size: 1rem;
+  margin-inline-end: 0.125rem;
 }
 
-:host button {
+:host([scale=m]) button {
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  margin-inline-end: 0.25rem;
+}
+
+:host([scale=l]) button {
+  inline-size: 2rem;
+  block-size: 2rem;
+  margin-inline-end: 0.5rem;
+}
+
+button {
   margin: 0px;
-  display: inline-flex;
-  max-block-size: 100%;
-  min-block-size: 100%;
   cursor: pointer;
   align-items: center;
-  align-self: stretch;
   border-style: none;
   background-color: transparent;
   color: var(--calcite-ui-text-1);
   outline-color: transparent;
   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;
-  border-end-end-radius: 50px;
-  border-end-start-radius: 0;
-  padding-block: 0;
+  display: flex;
+  border-radius: 50%;
   padding-inline: var(--calcite-chip-spacing-unit-s);
   color: inherit;
+  align-content: center;
+  justify-content: center;
   --calcite-chip-transparent-hover: var(--calcite-button-transparent-hover);
   --calcite-chip-transparent-press: var(--calcite-button-transparent-press);
 }
-:host button:hover {
+button:hover {
   background-color: var(--calcite-chip-transparent-hover);
 }
-:host button:focus {
+button:focus {
   background-color: var(--calcite-chip-transparent-hover);
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
-:host button:active {
+button:active {
   background-color: var(--calcite-chip-transparent-press);
 }
 
 .image-container {
   display: inline-flex;
   overflow: hidden;
-  border-radius: 50%;
 }
 
-:host slot[name=image]::slotted(*) {
+slot[name=image]::slotted(*) {
   display: flex;
   block-size: 100%;
   inline-size: 100%;
@@ -217,98 +273,89 @@
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   margin-inline-end: 0;
   margin-inline-start: var(--calcite-chip-spacing-unit-l);
-  border-start-start-radius: 0;
-  border-start-end-radius: 50px;
-  border-end-end-radius: 50px;
-  border-end-start-radius: 0;
 }
 
-:host([color=blue]) {
+:host([kind=neutral]) {
   border-color: transparent;
-  background-color: var(--calcite-ui-info);
-  color: var(--calcite-ui-text-inverse);
+  background-color: var(--calcite-ui-foreground-2);
+  color: var(--calcite-ui-text-1);
+}
+:host([kind=neutral]) button,
+:host([kind=neutral]) .close-icon {
+  color: var(--calcite-ui-text-3);
+}
+:host([kind=neutral]) .chip-icon {
+  color: var(--calcite-ui-icon-color, var(--calcite-ui-text-3));
 }
 
-:host([color=red]) {
+:host([kind=inverse]) {
   border-color: transparent;
-  background-color: var(--calcite-ui-danger);
+  background-color: var(--calcite-ui-inverse);
   color: var(--calcite-ui-text-inverse);
 }
-
-:host([color=yellow]) {
-  border-color: transparent;
-  background-color: var(--calcite-ui-warning);
-  color: #151515;
+:host([kind=inverse]) button,
+:host([kind=inverse]) .close-icon {
+  color: var(--calcite-ui-text-inverse);
+}
+:host([kind=inverse]) .chip-icon {
+  color: var(--calcite-ui-icon-color, var(--calcite-ui-text-inverse));
 }
 
-:host([color=green]) {
+:host([kind=brand]) {
   border-color: transparent;
-  background-color: var(--calcite-ui-success);
-  color: #151515;
+  background-color: var(--calcite-ui-brand);
+  color: var(--calcite-ui-text-inverse);
+}
+:host([kind=brand]) button,
+:host([kind=brand]) .close-icon {
+  color: var(--calcite-ui-text-inverse);
+}
+:host([kind=brand]) .chip-icon {
+  color: var(--calcite-ui-icon-color, var(--calcite-ui-text-inverse));
 }
 
-:host([color=grey]) {
-  border-color: transparent;
-  background-color: var(--calcite-ui-foreground-2);
+:host([appearance=outline-fill]),
+:host([appearance=outline]) {
+  background-color: var(--calcite-ui-foreground-1);
   color: var(--calcite-ui-text-1);
 }
-:host([color=grey]) button,
-:host([color=grey]) .close-icon {
+:host([appearance=outline-fill]) button,
+:host([appearance=outline-fill]) .close-icon,
+:host([appearance=outline]) button,
+:host([appearance=outline]) .close-icon {
   color: var(--calcite-ui-text-3);
 }
-:host([color=grey]) .chip-icon {
+:host([appearance=outline-fill]) .chip-icon,
+:host([appearance=outline]) .chip-icon {
   color: var(--calcite-ui-icon-color, var(--calcite-ui-text-3));
 }
 
-:host([appearance=clear]),
-:host([appearance=transparent]) {
-  background-color: transparent;
-  color: var(--calcite-ui-text-1);
+:host([appearance=outline-fill]) {
+  background-color: var(--calcite-ui-foreground-1);
 }
 
-:host([color=blue][appearance=clear]),
-:host([color=blue][appearance=transparent]) {
-  border-color: var(--calcite-ui-info);
-}
-:host([color=blue][appearance=clear]) .chip-icon,
-:host([color=blue][appearance=transparent]) .chip-icon {
-  color: var(--calcite-ui-icon-color, var(--calcite-ui-info));
+:host([appearance=outline]) {
+  background-color: transparent;
 }
 
-:host([color=red][appearance=clear]),
-:host([color=red][appearance=transparent]) {
-  border-color: var(--calcite-ui-danger);
-}
-:host([color=red][appearance=clear]) .chip-icon,
-:host([color=red][appearance=transparent]) .chip-icon {
-  color: var(--calcite-ui-icon-color, var(--calcite-ui-danger));
+:host([kind=neutral][appearance=outline-fill]),
+:host([kind=neutral][appearance=outline]) {
+  border-color: var(--calcite-ui-border-1);
 }
 
-:host([color=yellow][appearance=clear]),
-:host([color=yellow][appearance=transparent]) {
-  border-color: var(--calcite-ui-warning);
-}
-:host([color=yellow][appearance=clear]) .chip-icon,
-:host([color=yellow][appearance=transparent]) .chip-icon {
-  color: var(--calcite-ui-icon-color, var(--calcite-ui-warning));
+:host([kind=inverse][appearance=outline-fill]),
+:host([kind=inverse][appearance=outline]) {
+  border-color: var(--calcite-ui-border-inverse);
 }
 
-:host([color=green][appearance=clear]),
-:host([color=green][appearance=transparent]) {
-  border-color: var(--calcite-ui-success);
-}
-:host([color=green][appearance=clear]) .chip-icon,
-:host([color=green][appearance=transparent]) .chip-icon {
-  color: var(--calcite-ui-icon-color, var(--calcite-ui-success));
+:host([kind=brand][appearance=outline-fill]),
+:host([kind=brand][appearance=outline]) {
+  border-color: var(--calcite-ui-brand);
 }
 
-:host([color=grey][appearance=clear]),
-:host([color=grey][appearance=transparent]) {
-  border-color: var(--calcite-ui-border-1);
-}
-:host([color=grey][appearance=clear]) .chip-icon,
-:host([color=grey][appearance=transparent]) .chip-icon {
-  color: var(--calcite-ui-icon-color, var(--calcite-ui-text-3));
+:host([kind=brand][appearance=solid]) button,
+:host([kind=inverse][appearance=solid]) button {
+  outline-color: var(--calcite-ui-text-inverse);
 }
 
 :host([closed]) {

package/dist/collection/components/chip/chip.js

@@ -1,16 +1,17 @@
 /*!
  * 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-next.686
+ * v1.0.0-next.688
  */
-import { h } from "@stencil/core";
-import { getSlotted } from "../../utils/dom";
+import { h, Build } from "@stencil/core";
 import { guid } from "../../utils/guid";
 import { CSS, SLOTS, ICONS } from "./resources";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
 import { connectLocalized, disconnectLocalized } from "../../utils/locale";
 import { setUpLoadableComponent, setComponentLoaded, componentLoaded } from "../../utils/loadable";
+import { createObserver } from "../../utils/observers";
+import { slotChangeHasAssignedElement } from "../../utils/dom";
 /**
  * @slot - A slot for adding text.
  * @slot image - A slot for adding an image.
@@ -27,9 +28,19 @@ export class Chip {
       this.calciteChipClose.emit();
       this.closed = true;
     };
+    this.handleSlotImageChange = (event) => {
+      this.hasImage = slotChangeHasAssignedElement(event);
+    };
+    //--------------------------------------------------------------------------
+    //
+    //  Private State/Props
+    //
+    //--------------------------------------------------------------------------
+    /** watches for changing text content */
+    this.mutationObserver = createObserver("mutation", () => this.updateHasContent());
     this.guid = guid();
     this.appearance = "solid";
-    this.color = "grey";
+    this.kind = "neutral";
     this.closable = false;
     this.icon = undefined;
     this.iconFlipRtl = false;
@@ -40,6 +51,8 @@ export class Chip {
     this.messages = undefined;
     this.defaultMessages = undefined;
     this.effectiveLocale = undefined;
+    this.hasContent = false;
+    this.hasImage = false;
   }
   onMessagesChange() {
     /* wired up by t9n util */
@@ -56,6 +69,7 @@ export class Chip {
     connectConditionalSlotComponent(this);
     connectLocalized(this);
     connectMessages(this);
+    this.setupTextContentObserver();
   }
   componentDidLoad() {
     setComponentLoaded(this);
@@ -67,7 +81,10 @@ export class Chip {
   }
   async componentWillLoad() {
     setUpLoadableComponent(this);
-    await setUpMessages(this);
+    if (Build.isBrowser) {
+      await setUpMessages(this);
+      this.updateHasContent();
+    }
   }
   //--------------------------------------------------------------------------
   //
@@ -79,20 +96,32 @@ export class Chip {
     await componentLoaded(this);
     this.closeButton?.focus();
   }
+  updateHasContent() {
+    const slottedContent = this.el.textContent.trim().length > 0 || this.el.childNodes.length > 0;
+    this.hasContent =
+      this.el.childNodes.length > 0 && this.el.childNodes[0]?.nodeName === "#text"
+        ? this.el.textContent?.trim().length > 0
+        : slottedContent;
+  }
+  setupTextContentObserver() {
+    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
+  }
   //--------------------------------------------------------------------------
   //
   //  Render Methods
   //
   //--------------------------------------------------------------------------
   renderChipImage() {
-    const { el } = this;
-    const hasChipImage = getSlotted(el, SLOTS.image);
-    return hasChipImage ? (h("div", { class: CSS.imageContainer, key: "image" }, h("slot", { name: SLOTS.image }))) : null;
+    return (h("div", { class: CSS.imageContainer, key: "image" }, h("slot", { name: SLOTS.image, onSlotchange: this.handleSlotImageChange })));
   }
   render() {
-    const iconEl = (h("calcite-icon", { class: CSS.chipIcon, flipRtl: this.iconFlipRtl, icon: this.icon, scale: "s" }));
-    const closeButton = (h("button", { "aria-describedby": this.guid, "aria-label": this.messages.dismissLabel, class: CSS.close, onClick: this.closeClickHandler, ref: (el) => (this.closeButton = el) }, h("calcite-icon", { class: CSS.closeIcon, icon: ICONS.close, scale: "s" })));
-    return (h("div", { class: "container" }, this.renderChipImage(), this.icon ? iconEl : null, h("span", { class: CSS.title, id: this.guid }, h("slot", null)), this.closable ? closeButton : null));
+    const iconEl = (h("calcite-icon", { class: CSS.chipIcon, flipRtl: this.iconFlipRtl, icon: this.icon, scale: this.scale === "l" ? "m" : "s" }));
+    const closeButton = (h("button", { "aria-describedby": this.guid, "aria-label": this.messages.dismissLabel, class: CSS.close, onClick: this.closeClickHandler, ref: (el) => (this.closeButton = el) }, h("calcite-icon", { class: CSS.closeIcon, icon: ICONS.close, scale: this.scale === "l" ? "m" : "s" })));
+    return (h("div", { class: {
+        [CSS.container]: true,
+        [CSS.contentSlotted]: this.hasContent,
+        [CSS.imageSlotted]: this.hasImage
+      } }, this.renderChipImage(), this.icon ? iconEl : null, h("span", { class: CSS.title, id: this.guid }, h("slot", null)), this.closable ? closeButton : null));
   }
   static get is() { return "calcite-chip"; }
   static get encapsulation() { return "shadow"; }
@@ -113,8 +142,8 @@ export class Chip {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "Extract<\"solid\" | \"transparent\", Appearance>",
-          "resolved": "\"solid\" | \"transparent\"",
+          "original": "Extract<\"outline\" | \"outline-fill\" | \"solid\", Appearance>",
+          "resolved": "\"outline\" | \"outline-fill\" | \"solid\"",
           "references": {
             "Extract": {
               "location": "global"
@@ -135,16 +164,19 @@ export class Chip {
         "reflect": true,
         "defaultValue": "\"solid\""
       },
-      "color": {
+      "kind": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "ChipColor",
-          "resolved": "\"blue\" | \"green\" | \"grey\" | \"red\" | \"yellow\"",
+          "original": "Extract<\"brand\" | \"inverse\" | \"neutral\", Kind>",
+          "resolved": "\"brand\" | \"inverse\" | \"neutral\"",
           "references": {
-            "ChipColor": {
+            "Extract": {
+              "location": "global"
+            },
+            "Kind": {
               "location": "import",
-              "path": "./interfaces"
+              "path": "../interfaces"
             }
           }
         },
@@ -152,11 +184,11 @@ export class Chip {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Specifies the color for the component."
+          "text": "Specifies the kind of the component (will apply to border and background if applicable)."
         },
-        "attribute": "color",
+        "attribute": "kind",
         "reflect": true,
-        "defaultValue": "\"grey\""
+        "defaultValue": "\"neutral\""
       },
       "closable": {
         "type": "boolean",
@@ -320,7 +352,9 @@ export class Chip {
   static get states() {
     return {
       "defaultMessages": {},
-      "effectiveLocale": {}
+      "effectiveLocale": {},
+      "hasContent": {},
+      "hasImage": {}
     };
   }
   static get events() {

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

@@ -1,14 +1,17 @@
 /*!
  * 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-next.686
+ * v1.0.0-next.688
  */
 export const CSS = {
   title: "title",
   close: "close",
   imageContainer: "image-container",
   chipIcon: "chip-icon",
-  closeIcon: "close-icon"
+  closeIcon: "close-icon",
+  contentSlotted: "content--slotted",
+  container: "container",
+  imageSlotted: "image--slotted"
 };
 export const SLOTS = {
   image: "image"