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

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

@@ -83,19 +83,21 @@
 *
 * These properties can be overridden using the component's tag as selector.
 *
-* @prop --calcite-notice-width: the width of the notice
+* @prop --calcite-notice-width: The width of the component.
 */
 :host([scale=s]) {
   --calcite-notice-spacing-token-small: 0.5rem;
   --calcite-notice-spacing-token-large: 0.75rem;
 }
-:host([scale=s]) .container slot[name=title]::slotted(*), :host([scale=s]) .container *::slotted([slot=title]) {
+:host([scale=s]) .container slot[name=title]::slotted(*), 
+:host([scale=s]) .container *::slotted([slot=title]) {
   margin-top: 0.125rem;
   margin-bottom: 0.125rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1.375;
 }
-:host([scale=s]) .container slot[name=message]::slotted(*), :host([scale=s]) .container *::slotted([slot=message]) {
+:host([scale=s]) .container slot[name=message]::slotted(*), 
+:host([scale=s]) .container *::slotted([slot=message]) {
   margin-top: 0.125rem;
   margin-bottom: 0.125rem;
   font-size: var(--calcite-font-size--2);
@@ -115,13 +117,15 @@
   --calcite-notice-spacing-token-small: 0.75rem;
   --calcite-notice-spacing-token-large: 1rem;
 }
-:host([scale=m]) .container slot[name=title]::slotted(*), :host([scale=m]) .container *::slotted([slot=title]) {
+:host([scale=m]) .container slot[name=title]::slotted(*), 
+:host([scale=m]) .container *::slotted([slot=title]) {
   margin-top: 0.125rem;
   margin-bottom: 0.125rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.375;
 }
-:host([scale=m]) .container slot[name=message]::slotted(*), :host([scale=m]) .container *::slotted([slot=message]) {
+:host([scale=m]) .container slot[name=message]::slotted(*), 
+:host([scale=m]) .container *::slotted([slot=message]) {
   margin-top: 0.125rem;
   margin-bottom: 0.125rem;
   font-size: var(--calcite-font-size--1);
@@ -138,13 +142,15 @@
   --calcite-notice-spacing-token-small: 1rem;
   --calcite-notice-spacing-token-large: 1.25rem;
 }
-:host([scale=l]) .container slot[name=title]::slotted(*), :host([scale=l]) .container *::slotted([slot=title]) {
+:host([scale=l]) .container slot[name=title]::slotted(*), 
+:host([scale=l]) .container *::slotted([slot=title]) {
   margin-top: 0.125rem;
   margin-bottom: 0.125rem;
   font-size: var(--calcite-font-size-1);
   line-height: 1.375;
 }
-:host([scale=l]) .container slot[name=message]::slotted(*), :host([scale=l]) .container *::slotted([slot=message]) {
+:host([scale=l]) .container slot[name=message]::slotted(*), 
+:host([scale=l]) .container *::slotted([slot=message]) {
   margin-top: 0.125rem;
   margin-bottom: 0.125rem;
   font-size: var(--calcite-font-size-0);
@@ -187,17 +193,15 @@
   width: 100%;
   background-color: var(--calcite-ui-foreground-1);
   opacity: 0;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   max-height: 0;
   text-align: start;
-  transition: var(--calcite-animation-timing);
   border-inline-start: 0px solid;
   box-shadow: 0 0 0 0 transparent;
 }
 
 .notice-close {
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
 .notice-close:focus {
   outline: 2px solid var(--calcite-ui-brand);
@@ -220,13 +224,15 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.container slot[name=title]::slotted(*), .container *::slotted([slot=title]) {
+.container slot[name=title]::slotted(*), 
+.container *::slotted([slot=title]) {
   margin: 0px;
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-1);
 }
 
-.container slot[name=message]::slotted(*), .container *::slotted([slot=message]) {
+.container slot[name=message]::slotted(*), 
+.container *::slotted([slot=message]) {
   margin: 0px;
   display: inline;
   font-weight: var(--calcite-font-weight-normal);
@@ -236,10 +242,7 @@
 
 .notice-content {
   box-sizing: border-box;
-  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;
   padding: var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);
   flex: 0 0 auto;
   display: flex;
@@ -261,10 +264,7 @@
   display: flex;
   align-items: center;
   box-sizing: border-box;
-  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;
   padding: var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);
   flex: 0 0 auto;
 }
@@ -280,15 +280,12 @@
   outline: 2px solid transparent;
   outline-offset: 2px;
   box-sizing: border-box;
-  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;
   padding: var(--calcite-notice-spacing-token-small) var(--calcite-notice-spacing-token-large);
   flex: 0 0 auto;
   -webkit-appearance: none;
 }
-.notice-close:hover, .notice-close:focus {
+.notice-close:hover,  .notice-close:focus {
   background-color: var(--calcite-ui-foreground-2);
   color: var(--calcite-ui-text-1);
 }

package/dist/collection/components/notice/notice.js

@@ -1,23 +1,24 @@
 /*!
  * 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, Method, Prop, Watch } from "@stencil/core";
 import { CSS, SLOTS, TEXT } from "./resources";
 import { StatusIcons } from "../alert/interfaces";
 import { getSlotted, setRequestedIcon } from "../../utils/dom";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
-/** Notices are intended to be used to present users with important-but-not-crucial contextual tips or copy. Because
+/**
+ * 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
  * to display a notice on page load and set the "active" attribute as needed to contextually provide inline messaging to users.
  */
 /**
- * @slot title - Title of the notice (optional)
- * @slot message - Main text of the notice
- * @slot link - Optional action to take from the notice (undo, try again, link to page, etc.)
- * @slot actions-end - Allows adding a `calcite-action` at the end of the notice. It is recommended to use 2 or less actions.
+ * @slot title - A slot for adding the title.
+ * @slot message - A slot for adding the message.
+ * @slot link - A slot for adding actions to take, such as: undo, try again, link to page, etc.
+ * @slot actions-end - A slot for adding actions to the end of the component. It is recommended to use two or less actions.
  */
 export class Notice {
   constructor() {
@@ -26,19 +27,21 @@ export class Notice {
     //  Properties
     //
     //---------------------------------------------------------------------------
-    /** Is the notice currently active or not */
+    /** When true, the component is active. */
     this.active = false;
-    /** Color for the notice (will apply to top border and icon) */
+    /** The color for the component's top border and icon. */
     this.color = "blue";
-    /** Optionally show a button the user can click to dismiss the notice */
+    /** When true, a close button is added to the component. */
     this.dismissible = false;
-    /** String for the close button.
+    /**
+     * Accessible name for the close button.
+     *
      * @default "Close"
      */
     this.intlClose = TEXT.close;
-    /** specify the scale of the notice, defaults to m */
+    /** Specifies the size of the component. */
     this.scale = "m";
-    /** specify the width of the notice, defaults to auto */
+    /** Specifies the width of the component. */
     this.width = "auto";
     //--------------------------------------------------------------------------
     //
@@ -122,7 +125,7 @@ export class Notice {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Is the notice currently active or not"
+        "text": "When true, the component is active."
       },
       "attribute": "active",
       "reflect": true,
@@ -145,7 +148,7 @@ export class Notice {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Color for the notice (will apply to top border and icon)"
+        "text": "The color for the component's top border and icon."
       },
       "attribute": "color",
       "reflect": true,
@@ -160,10 +163,10 @@ export class Notice {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": "Optionally show a button the user can click to dismiss the notice"
+        "text": "When true, a close button is added to the component."
       },
       "attribute": "dismissible",
       "reflect": true,
@@ -181,7 +184,7 @@ export class Notice {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "when used as a boolean set to true, show a default recommended icon. You can\nalso pass a calcite-ui-icon name to this prop to display a requested icon"
+        "text": "Specifies an icon to display - accepts Calcite UI icon names."
       },
       "attribute": "icon",
       "reflect": true
@@ -201,7 +204,7 @@ export class Notice {
             "name": "default",
             "text": "\"Close\""
           }],
-        "text": "String for the close button."
+        "text": "Accessible name for the close button."
       },
       "attribute": "intl-close",
       "reflect": false,
@@ -224,7 +227,7 @@ export class Notice {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "specify the scale of the notice, defaults to m"
+        "text": "Specifies the size of the component."
       },
       "attribute": "scale",
       "reflect": true,
@@ -247,7 +250,7 @@ export class Notice {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "specify the width of the notice, defaults to auto"
+        "text": "Specifies the width of the component."
       },
       "attribute": "width",
       "reflect": true,
@@ -262,7 +265,7 @@ export class Notice {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fired when an notice is closed"
+        "text": "Fired when the component is closed."
       },
       "complexType": {
         "original": "any",
@@ -277,7 +280,7 @@ export class Notice {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fired when an Notice is opened"
+        "text": "Fired when the component is opened."
       },
       "complexType": {
         "original": "any",

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-beta.81
+ * v1.0.0-beta.84
  */
 export const TEXT = {
   close: "Close"

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-beta.81
+ * v1.0.0-beta.84
  */
 import { Component, h, Prop, Element, Event, Watch } from "@stencil/core";
 import { createObserver } from "../../utils/observers";
@@ -13,19 +13,19 @@ export class Option {
     //
     //--------------------------------------------------------------------------
     /**
-     * When true, it prevents the option from being selected.
+     * When true, interaction is prevented and the component is displayed with lower opacity.
      */
     this.disabled = false;
     this.mutationObserver = createObserver("mutation", () => {
       this.ensureTextContentDependentProps();
-      this.calciteOptionChange.emit();
+      this.calciteInternalOptionChange.emit();
     });
   }
   handlePropChange(_newValue, _oldValue, propName) {
     if (propName === "label" || propName === "value") {
       this.ensureTextContentDependentProps();
     }
-    this.calciteOptionChange.emit();
+    this.calciteInternalOptionChange.emit();
   }
   //--------------------------------------------------------------------------
   //
@@ -91,7 +91,7 @@ export class Option {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, it prevents the option from being selected."
+        "text": "When true, interaction is prevented and the component is displayed with lower opacity."
       },
       "attribute": "disabled",
       "reflect": true,
@@ -109,7 +109,7 @@ export class Option {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The option label."
+        "text": "Accessible name for the component."
       },
       "attribute": "label",
       "reflect": false
@@ -126,7 +126,7 @@ export class Option {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, this option is selected. Otherwise, false."
+        "text": "When true, the component is selected."
       },
       "attribute": "selected",
       "reflect": true
@@ -143,15 +143,15 @@ export class Option {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The value associated with this option."
+        "text": "The component's value."
       },
       "attribute": "value",
       "reflect": false
     }
   }; }
   static get events() { return [{
-      "method": "calciteOptionChange",
-      "name": "calciteOptionChange",
+      "method": "calciteInternalOptionChange",
+      "name": "calciteInternalOptionChange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,

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-beta.81
+ * v1.0.0-beta.84
  */
 import { Component, h, Prop, Watch, Event, Fragment } from "@stencil/core";
 /**
@@ -15,12 +15,12 @@ export class OptionGroup {
     //
     //--------------------------------------------------------------------------
     /**
-     * When true, it prevents selection from any of its associated options.
+     * When true, interaction is prevented and the component is displayed with lower opacity.
      */
     this.disabled = false;
   }
   handlePropChange() {
-    this.calciteOptionGroupChange.emit();
+    this.calciteInternalOptionGroupChange.emit();
   }
   //--------------------------------------------------------------------------
   //
@@ -53,7 +53,7 @@ export class OptionGroup {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, it prevents selection from any of its associated options."
+        "text": "When true, interaction is prevented and the component is displayed with lower opacity."
       },
       "attribute": "disabled",
       "reflect": true,
@@ -71,15 +71,15 @@ export class OptionGroup {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The group label. This property is required."
+        "text": "Accessible name for the component."
       },
       "attribute": "label",
       "reflect": false
     }
   }; }
   static get events() { return [{
-      "method": "calciteOptionGroupChange",
-      "name": "calciteOptionGroupChange",
+      "method": "calciteInternalOptionGroupChange",
+      "name": "calciteInternalOptionGroupChange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,

package/dist/collection/components/pagination/pagination.css

@@ -83,17 +83,18 @@
 *
 * These properties can be overridden using the component's tag as selector.
 *
-* @prop --calcite-pagination-spacing: the amount of padding around each pagination item
+* @prop --calcite-pagination-spacing: The amount of padding around each pagination item.
 */
 :host([scale=s]) {
   --calcite-pagination-spacing: 0.25rem 0.5rem;
 }
-:host([scale=s]) .previous, :host([scale=s]) .next, :host([scale=s]) .page {
+:host([scale=s]) .previous,  :host([scale=s]) .next,  :host([scale=s]) .page {
   height: 1.5rem;
   font-size: var(--calcite-font-size--2);
   line-height: 1rem;
 }
-:host([scale=s]) .previous, :host([scale=s]) .next {
+:host([scale=s]) .previous, 
+:host([scale=s]) .next {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
 }
@@ -101,12 +102,13 @@
 :host([scale=m]) {
   --calcite-pagination-spacing: 0.5rem 0.75rem;
 }
-:host([scale=m]) .previous, :host([scale=m]) .next, :host([scale=m]) .page {
+:host([scale=m]) .previous,  :host([scale=m]) .next,  :host([scale=m]) .page {
   height: 2rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
-:host([scale=m]) .previous, :host([scale=m]) .next {
+:host([scale=m]) .previous, 
+:host([scale=m]) .next {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
@@ -114,12 +116,13 @@
 :host([scale=l]) {
   --calcite-pagination-spacing: 0.75rem 1rem;
 }
-:host([scale=l]) .previous, :host([scale=l]) .next, :host([scale=l]) .page {
+:host([scale=l]) .previous,  :host([scale=l]) .next,  :host([scale=l]) .page {
   height: 2.75rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
 }
-:host([scale=l]) .previous, :host([scale=l]) .next {
+:host([scale=l]) .previous, 
+:host([scale=l]) .next {
   padding-left: 1rem;
   padding-right: 1rem;
 }
@@ -130,16 +133,16 @@
 }
 
 :host button {
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
 }
 :host button:focus {
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
 
-.previous, .next, .page {
+.previous, 
+.next, 
+.page {
   box-sizing: border-box;
   display: flex;
   cursor: pointer;
@@ -154,12 +157,11 @@
   border-top: 2px solid transparent;
   border-bottom: 2px solid transparent;
 }
-.previous:hover, .next:hover, .page:hover {
+.previous:hover, 
+.next:hover, 
+.page:hover {
   color: var(--calcite-ui-text-1);
-  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;
 }
 
 .page:hover {
@@ -171,23 +173,27 @@
   border-bottom-color: var(--calcite-ui-brand);
 }
 
-.previous:hover, .next:hover {
+.previous:hover, 
+.next:hover {
   background-color: var(--calcite-ui-foreground-2);
   color: var(--calcite-ui-brand);
 }
-.previous:active, .next:active {
+.previous:active, 
+.next:active {
   background-color: var(--calcite-ui-foreground-3);
 }
-.previous.is-disabled, .next.is-disabled {
+.previous.is-disabled, 
+.next.is-disabled {
   pointer-events: none;
   background-color: transparent;
 }
-.previous.is-disabled > calcite-icon, .next.is-disabled > calcite-icon {
+.previous.is-disabled > calcite-icon, 
+.next.is-disabled > calcite-icon {
   opacity: var(--calcite-ui-opacity-disabled);
 }
 
 .next {
-  margin-right: 0px;
+  margin-inline-end: 0px;
 }
 
 .page,