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

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

@@ -444,30 +444,45 @@ slot[name=primary] {
   :host([docked]) .modal {
     border-radius: var(--calcite-border-radius) var(--calcite-border-radius) 0 0;
   }
-  :host([docked]) .close {
-    border-start-end-radius: var(--calcite-border-radius);
-  }
 }
 
 /**
- * Colors
+ * Kinds
  */
-:host([color=red]) .modal {
+:host([kind=brand]) .modal {
+  border-color: var(--calcite-ui-brand);
+}
+
+:host([kind=danger]) .modal {
   border-color: var(--calcite-ui-danger);
 }
 
-:host([color=blue]) .modal {
+:host([kind=info]) .modal {
   border-color: var(--calcite-ui-info);
 }
 
-:host([color=red]) .modal,
-:host([color=blue]) .modal {
+:host([kind=success]) .modal {
+  border-color: var(--calcite-ui-success);
+}
+
+:host([kind=warning]) .modal {
+  border-color: var(--calcite-ui-warning);
+}
+
+:host([kind=brand]) .modal,
+:host([kind=danger]) .modal,
+:host([kind=info]) .modal,
+:host([kind=success]) .modal,
+:host([kind=warning]) .modal {
   border-width: 0px;
   border-block-start-width: 4px;
   border-style: solid;
 }
-:host([color=red]) .header,
-:host([color=blue]) .header {
+:host([kind=brand]) .header,
+:host([kind=danger]) .header,
+:host([kind=info]) .header,
+:host([kind=success]) .header,
+:host([kind=warning]) .header {
   border-radius: 0.25rem;
   border-end-end-radius: 0px;
   border-end-start-radius: 0px;

package/dist/collection/components/modal/modal.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.684
+ * v1.0.0-next.686
  */
 import { h, Host } from "@stencil/core";
 import { ensureId, focusElement, getSlotted } from "../../utils/dom";
@@ -60,13 +60,12 @@ export class Modal {
     this.closeButtonDisabled = false;
     this.focusTrapDisabled = false;
     this.outsideCloseDisabled = false;
-    this.intlClose = undefined;
     this.docked = undefined;
     this.escapeDisabled = false;
     this.scale = "m";
     this.width = "m";
     this.fullscreen = undefined;
-    this.color = undefined;
+    this.kind = undefined;
     this.backgroundColor = "white";
     this.messages = undefined;
     this.messageOverrides = undefined;
@@ -358,26 +357,6 @@ export class Modal {
         "reflect": true,
         "defaultValue": "false"
       },
-      "intlClose": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "\u2013 translations are now built-in, if you need to override a string, please use `messageOverrides`."
-            }],
-          "text": "Accessible name for the component's close button."
-        },
-        "attribute": "intl-close",
-        "reflect": false
-      },
       "docked": {
         "type": "boolean",
         "mutable": false,
@@ -476,21 +455,26 @@ export class Modal {
         "attribute": "fullscreen",
         "reflect": true
       },
-      "color": {
+      "kind": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"red\" | \"blue\"",
-          "resolved": "\"blue\" | \"red\"",
-          "references": {}
+          "original": "Kind",
+          "resolved": "\"brand\" | \"danger\" | \"info\" | \"success\" | \"warning\"",
+          "references": {
+            "Kind": {
+              "location": "import",
+              "path": "../interfaces"
+            }
+          }
         },
         "required": false,
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Adds a color bar to the top of component for visual impact.\nUse color to add importance to destructive or workflow dialogs."
+          "text": "Specifies the kind of the component (will apply to top border)."
         },
-        "attribute": "color",
+        "attribute": "kind",
         "reflect": true
       },
       "backgroundColor": {
@@ -703,9 +687,6 @@ export class Modal {
     return [{
         "propName": "focusTrapDisabled",
         "methodName": "handlefocusTrapDisabled"
-      }, {
-        "propName": "intlClose",
-        "methodName": "onMessagesChange"
       }, {
         "propName": "messageOverrides",
         "methodName": "onMessagesChange"

package/dist/collection/components/modal/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.684
+ * v1.0.0-next.686
  */
 export const CSS = {
   modal: "modal",

package/dist/collection/components/notice/notice.css

@@ -296,30 +296,37 @@
   align-self: stretch;
 }
 
-:host([color=blue]) .container {
+:host([kind=brand]) .container {
   border-color: var(--calcite-ui-brand);
 }
-:host([color=blue]) .container .notice-icon {
+:host([kind=brand]) .container .notice-icon {
   color: var(--calcite-ui-brand);
 }
 
-:host([color=red]) .container {
-  border-color: var(--calcite-ui-danger);
+:host([kind=info]) .container {
+  border-color: var(--calcite-ui-info);
 }
-:host([color=red]) .container .notice-icon {
-  color: var(--calcite-ui-danger);
+:host([kind=info]) .container .notice-icon {
+  color: var(--calcite-ui-info);
 }
 
-:host([color=yellow]) .container {
-  border-color: var(--calcite-ui-warning);
+:host([kind=danger]) .container {
+  border-color: var(--calcite-ui-danger);
 }
-:host([color=yellow]) .container .notice-icon {
-  color: var(--calcite-ui-warning);
+:host([kind=danger]) .container .notice-icon {
+  color: var(--calcite-ui-danger);
 }
 
-:host([color=green]) .container {
+:host([kind=success]) .container {
   border-color: var(--calcite-ui-success);
 }
-:host([color=green]) .container .notice-icon {
+:host([kind=success]) .container .notice-icon {
   color: var(--calcite-ui-success);
+}
+
+:host([kind=warning]) .container {
+  border-color: var(--calcite-ui-warning);
+}
+:host([kind=warning]) .container .notice-icon {
+  color: var(--calcite-ui-warning);
 }

package/dist/collection/components/notice/notice.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-next.684
+ * v1.0.0-next.686
  */
 import { h } from "@stencil/core";
 import { CSS, SLOTS } from "./resources";
-import { StatusIcons } from "../alert/interfaces";
+import { KindIcons } from "../resources";
 import { getSlotted, setRequestedIcon } from "../../utils/dom";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { connectLocalized, disconnectLocalized } from "../../utils/locale";
@@ -14,7 +14,7 @@ import { setUpLoadableComponent, setComponentLoaded, componentLoaded } from "../
 /**
  * Notices are intended to be used to present users with important-but-not-crucial contextual tips or copy. Because
  * notices are displayed inline, a common use case is displaying them on page-load to present users with short hints or contextual copy.
- * They are optionally dismissible - useful for keeping track of whether or not a user has dismissed the notice. You can also choose not
+ * They are optionally closable - useful for keeping track of whether or not a user has closed the notice. You can also choose not
  * to display a notice on page load and set the "active" attribute as needed to contextually provide inline messaging to users.
  */
 /**
@@ -34,13 +34,10 @@ export class Notice {
       this.open = false;
       this.calciteNoticeClose.emit();
     };
-    this.active = false;
     this.open = false;
-    this.color = "blue";
-    this.dismissible = false;
+    this.kind = "brand";
     this.closable = false;
     this.icon = undefined;
-    this.intlClose = undefined;
     this.scale = "m";
     this.width = "auto";
     this.messages = undefined;
@@ -48,23 +45,11 @@ export class Notice {
     this.effectiveLocale = undefined;
     this.defaultMessages = undefined;
   }
-  activeHandler(value) {
-    this.open = value;
-  }
-  openHandler(value) {
-    this.active = value;
-  }
-  handleDismissible(value) {
-    this.closable = value;
-  }
-  handleClosable(value) {
-    this.dismissible = value;
-  }
   onMessagesChange() {
     /* wired up by t9n util */
   }
   updateRequestedIcon() {
-    this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
+    this.requestedIcon = setRequestedIcon(KindIcons, this.icon, this.kind);
   }
   //--------------------------------------------------------------------------
   //
@@ -75,17 +60,6 @@ export class Notice {
     connectConditionalSlotComponent(this);
     connectLocalized(this);
     connectMessages(this);
-    const isOpen = this.active || this.open;
-    if (isOpen) {
-      this.activeHandler(isOpen);
-      this.openHandler(isOpen);
-    }
-    if (this.dismissible) {
-      this.handleDismissible(this.dismissible);
-    }
-    if (this.closable) {
-      this.handleClosable(this.closable);
-    }
   }
   disconnectedCallback() {
     disconnectConditionalSlotComponent(this);
@@ -94,7 +68,7 @@ export class Notice {
   }
   async componentWillLoad() {
     setUpLoadableComponent(this);
-    this.requestedIcon = setRequestedIcon(StatusIcons, this.icon, this.color);
+    this.requestedIcon = setRequestedIcon(KindIcons, this.icon, this.kind);
     await setUpMessages(this);
   }
   componentDidLoad() {
@@ -143,27 +117,6 @@ export class Notice {
   static get assetsDirs() { return ["assets"]; }
   static get properties() {
     return {
-      "active": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "Use `open` instead."
-            }],
-          "text": "When `true`, the component is active."
-        },
-        "attribute": "active",
-        "reflect": true,
-        "defaultValue": "false"
-      },
       "open": {
         "type": "boolean",
         "mutable": true,
@@ -182,16 +135,16 @@ export class Notice {
         "reflect": true,
         "defaultValue": "false"
       },
-      "color": {
+      "kind": {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "StatusColor",
-          "resolved": "\"blue\" | \"green\" | \"red\" | \"yellow\"",
+          "original": "Kind",
+          "resolved": "\"brand\" | \"danger\" | \"info\" | \"success\" | \"warning\"",
           "references": {
-            "StatusColor": {
+            "Kind": {
               "location": "import",
-              "path": "../alert/interfaces"
+              "path": "../interfaces"
             }
           }
         },
@@ -199,32 +152,11 @@ export class Notice {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The color for the component's top border and icon."
+          "text": "Specifies the kind of the component (will apply to top border and icon)."
         },
-        "attribute": "color",
+        "attribute": "kind",
         "reflect": true,
-        "defaultValue": "\"blue\""
-      },
-      "dismissible": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "use `closable` instead."
-            }],
-          "text": "When `true`, a close button is added to the component."
-        },
-        "attribute": "dismissible",
-        "reflect": true,
-        "defaultValue": "false"
+        "defaultValue": "\"brand\""
       },
       "closable": {
         "type": "boolean",
@@ -261,29 +193,6 @@ export class Notice {
         "attribute": "icon",
         "reflect": true
       },
-      "intlClose": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "\"Close\""
-            }, {
-              "name": "deprecated",
-              "text": "\u2013 translations are now built-in, if you need to override a string, please use `messageOverrides`."
-            }],
-          "text": "Accessible name for the close button."
-        },
-        "attribute": "intl-close",
-        "reflect": false
-      },
       "scale": {
         "type": "string",
         "mutable": false,
@@ -440,28 +349,13 @@ export class Notice {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
-        "propName": "active",
-        "methodName": "activeHandler"
-      }, {
-        "propName": "open",
-        "methodName": "openHandler"
-      }, {
-        "propName": "dismissible",
-        "methodName": "handleDismissible"
-      }, {
-        "propName": "closable",
-        "methodName": "handleClosable"
-      }, {
-        "propName": "intlClose",
-        "methodName": "onMessagesChange"
-      }, {
         "propName": "messageOverrides",
         "methodName": "onMessagesChange"
       }, {
         "propName": "icon",
         "methodName": "updateRequestedIcon"
       }, {
-        "propName": "color",
+        "propName": "kind",
         "methodName": "updateRequestedIcon"
       }, {
         "propName": "effectiveLocale",

package/dist/collection/components/notice/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.684
+ * v1.0.0-next.686
  */
 export const SLOTS = {
   title: "title",

package/dist/collection/components/option/option.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.684
+ * v1.0.0-next.686
  */
 import { h } from "@stencil/core";
 import { createObserver } from "../../utils/observers";

package/dist/collection/components/option-group/option-group.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.684
+ * v1.0.0-next.686
  */
 import { h, Fragment } from "@stencil/core";
 /**

package/dist/collection/components/pagination/pagination.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.684
+ * v1.0.0-next.686
  */
 import { h, Fragment } from "@stencil/core";
 import { connectLocalized, disconnectLocalized, numberStringFormatter } from "../../utils/locale";
@@ -24,8 +24,6 @@ export class Pagination {
     this.numberingSystem = undefined;
     this.start = 1;
     this.total = 0;
-    this.textLabelNext = undefined;
-    this.textLabelPrevious = undefined;
     this.scale = "m";
     this.defaultMessages = undefined;
     this.effectiveLocale = "";
@@ -34,16 +32,6 @@ export class Pagination {
   onMessagesChange() {
     /* wired up by t9n util */
   }
-  getExtraMessageOverrides() {
-    const extraOverrides = {};
-    if (this.textLabelNext) {
-      extraOverrides.next = this.textLabelNext;
-    }
-    if (this.textLabelPrevious) {
-      extraOverrides.previous = this.textLabelPrevious;
-    }
-    return extraOverrides;
-  }
   effectiveLocaleChange() {
     updateMessages(this, this.effectiveLocale);
   }
@@ -311,46 +299,6 @@ export class Pagination {
         "reflect": true,
         "defaultValue": "0"
       },
-      "textLabelNext": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "\u2013 translations are now built-in, if you need to override a string, please use `messageOverrides`"
-            }],
-          "text": "Accessible name for the component's next button."
-        },
-        "attribute": "text-label-next",
-        "reflect": false
-      },
-      "textLabelPrevious": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "\u2013 translations are now built-in, if you need to override a string, please use `messageOverrides`"
-            }],
-          "text": "Accessible name for the component's previous button."
-        },
-        "attribute": "text-label-previous",
-        "reflect": false
-      },
       "scale": {
         "type": "string",
         "mutable": false,
@@ -462,12 +410,6 @@ export class Pagination {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
-        "propName": "textLabelNext",
-        "methodName": "onMessagesChange"
-      }, {
-        "propName": "textLabelPrevious",
-        "methodName": "onMessagesChange"
-      }, {
         "propName": "messageOverrides",
         "methodName": "onMessagesChange"
       }, {

package/dist/collection/components/pagination/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.684
+ * v1.0.0-next.686
  */
 export const CSS = {
   page: "page",

package/dist/collection/components/panel/panel.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.684
+ * v1.0.0-next.686
  */
 import { h, Fragment } from "@stencil/core";
 import { CSS, ICONS, SLOTS } from "./resources";
@@ -119,8 +119,6 @@ export class Panel {
     this.heightScale = undefined;
     this.widthScale = undefined;
     this.loading = false;
-    this.intlClose = undefined;
-    this.intlOptions = undefined;
     this.heading = undefined;
     this.description = undefined;
     this.menuOpen = false;
@@ -431,46 +429,6 @@ export class Panel {
         "reflect": true,
         "defaultValue": "false"
       },
-      "intlClose": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "use `calcite-flow-item` instead."
-            }],
-          "text": "Accessible name for the component's close button. The close button will only be shown when `closeable` is `true`."
-        },
-        "attribute": "intl-close",
-        "reflect": false
-      },
-      "intlOptions": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "use `calcite-flow-item` instead."
-            }],
-          "text": "Accessible name for the component's actions menu."
-        },
-        "attribute": "intl-options",
-        "reflect": false
-      },
       "heading": {
         "type": "string",
         "mutable": false,
@@ -680,12 +638,6 @@ export class Panel {
   static get elementRef() { return "el"; }
   static get watchers() {
     return [{
-        "propName": "intlClose",
-        "methodName": "onMessagesChange"
-      }, {
-        "propName": "intlOptions",
-        "methodName": "onMessagesChange"
-      }, {
         "propName": "messageOverrides",
         "methodName": "onMessagesChange"
       }, {

package/dist/collection/components/panel/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.684
+ * v1.0.0-next.686
  */
 export const CSS = {
   backButton: "back-button",

package/dist/collection/components/pick-list/pick-list.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.684
+ * v1.0.0-next.686
  */
 import { h } from "@stencil/core";
 import { ICON_TYPES } from "./resources";