@esri/calcite-components 1.0.0-next.290 → 1.0.0-next.294

package/dist/collection/components/calcite-input/calcite-input.js

@@ -68,14 +68,6 @@ export class CalciteInput {
     this.type = "text";
     /** keep track of the rendered child type */
     this.childElType = "input";
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    this.onLabelClick = () => {
-      this.setFocus();
-    };
     this.clearInputValue = (nativeEvent) => {
       this.setValue(null, nativeEvent, true);
     };
@@ -177,24 +169,21 @@ export class CalciteInput {
       event.preventDefault();
     };
     this.nudgeNumberValue = (direction, nativeEvent) => {
-      if (this.type !== "number") {
+      if ((nativeEvent instanceof KeyboardEvent && nativeEvent.repeat) || this.type !== "number") {
         return;
       }
-      const value = this.value;
       const inputMax = this.maxString ? parseFloat(this.maxString) : null;
       const inputMin = this.minString ? parseFloat(this.minString) : null;
-      const inputStep = this.step === "any" ? 1 : Math.abs(this.step || 1);
-      const inputVal = value && value !== "" ? parseFloat(value) : 0;
-      let newValue = value;
-      if (direction === "up" && ((!inputMax && inputMax !== 0) || inputVal < inputMax)) {
-        newValue = (inputVal + inputStep).toString();
-      }
-      if (direction === "down" && ((!inputMin && inputMin !== 0) || inputVal > inputMin)) {
-        newValue = (inputVal - inputStep).toString();
-      }
-      this.setValue(newValue, nativeEvent, true);
+      const valueNudgeDelayInMs = 500;
+      this.incrementOrDecrementNumberValue(direction, inputMax, inputMin, nativeEvent);
+      this.nudgeNumberValueIntervalId = setInterval(() => {
+        this.incrementOrDecrementNumberValue(direction, inputMax, inputMin, nativeEvent);
+      }, valueNudgeDelayInMs);
     };
-    this.numberButtonClickHandler = (event) => {
+    this.numberButtonMouseUpAndMouseOutHandler = () => {
+      clearInterval(this.nudgeNumberValueIntervalId);
+    };
+    this.numberButtonMouseDownHandler = (event) => {
       // todo, when dropping ie11 support, refactor to use stepup/stepdown
       // prevent blur and re-focus of input on mousedown
       event.preventDefault();
@@ -240,6 +229,9 @@ export class CalciteInput {
         }
       }
     };
+    this.inputKeyUpHandler = () => {
+      clearInterval(this.nudgeNumberValueIntervalId);
+    };
   }
   disabledWatcher() {
     this.setDisabledAction();
@@ -350,6 +342,27 @@ export class CalciteInput {
       (_b = this.childEl) === null || _b === void 0 ? void 0 : _b.focus();
     }
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  onLabelClick() {
+    this.setFocus();
+  }
+  incrementOrDecrementNumberValue(direction, inputMax, inputMin, nativeEvent) {
+    const value = this.value;
+    const inputStep = this.step === "any" ? 1 : Math.abs(this.step || 1);
+    const inputVal = value && value !== "" ? parseFloat(value) : 0;
+    let newValue = value;
+    if (direction === "up" && ((!inputMax && inputMax !== 0) || inputVal < inputMax)) {
+      newValue = (inputVal + inputStep).toString();
+    }
+    if (direction === "down" && ((!inputMin && inputMin !== 0) || inputVal > inputMin)) {
+      newValue = (inputVal - inputStep).toString();
+    }
+    this.setValue(newValue, nativeEvent, true);
+  }
   setDisabledAction() {
     if (!this.slottedActionEl) {
       return;
@@ -375,21 +388,21 @@ export class CalciteInput {
     const numberButtonsHorizontalUp = (h("button", { class: {
         [CSS.numberButtonItem]: true,
         [CSS.buttonItemHorizontal]: isHorizontalNumberButton
-      }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onClick: this.numberButtonClickHandler, tabIndex: -1, type: "button" },
+      }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onMouseDown: this.numberButtonMouseDownHandler, onMouseOut: this.numberButtonMouseUpAndMouseOutHandler, onMouseUp: this.numberButtonMouseUpAndMouseOutHandler, tabIndex: -1, type: "button" },
       h("calcite-icon", { icon: "chevron-up", scale: "s" })));
     const numberButtonsHorizontalDown = (h("button", { class: {
         [CSS.numberButtonItem]: true,
         [CSS.buttonItemHorizontal]: isHorizontalNumberButton
-      }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onClick: this.numberButtonClickHandler, tabIndex: -1, type: "button" },
+      }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onMouseDown: this.numberButtonMouseDownHandler, onMouseOut: this.numberButtonMouseUpAndMouseOutHandler, onMouseUp: this.numberButtonMouseUpAndMouseOutHandler, tabIndex: -1, type: "button" },
       h("calcite-icon", { icon: "chevron-down", scale: "s" })));
     const numberButtonsVertical = (h("div", { class: CSS.numberButtonWrapper },
       numberButtonsHorizontalUp,
       numberButtonsHorizontalDown));
     const prefixText = h("div", { class: CSS.prefix }, this.prefixText);
     const suffixText = h("div", { class: CSS.suffix }, this.suffixText);
-    const localeNumberInput = this.type === "number" ? (h("input", { "aria-label": getLabelText(this), autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, name: undefined, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildNumberElRef, tabIndex: this.disabled ? -1 : 0, type: "text", value: this.localizedValue })) : null;
+    const localeNumberInput = this.type === "number" ? (h("input", { "aria-label": getLabelText(this), autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.el.enterKeyHint, key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, name: undefined, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, onKeyUp: this.inputKeyUpHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildNumberElRef, tabIndex: this.disabled ? -1 : 0, type: "text", value: this.localizedValue })) : null;
     const childEl = [
-      h(this.childElType, { "aria-label": getLabelText(this), autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, max: this.maxString, maxLength: this.maxLength, min: this.minString, minLength: this.minLength, name: this.name, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeyDownHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildElRef, required: this.required ? true : null, step: this.step, tabIndex: this.disabled || this.type === "number" ? -1 : null, type: this.type, value: this.value }),
+      h(this.childElType, { "aria-label": getLabelText(this), autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.el.enterKeyHint, max: this.maxString, maxLength: this.maxLength, min: this.minString, minLength: this.minLength, name: this.name, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeyDownHandler, onKeyUp: this.inputKeyUpHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildElRef, required: this.required ? true : null, step: this.step, tabIndex: this.disabled || this.type === "number" ? -1 : null, type: this.type, value: this.value }),
       this.isTextarea ? (h("div", { class: CSS.resizeIconWrapper },
         h("calcite-icon", { icon: "chevron-down", scale: "s" }))) : null
     ];
@@ -548,8 +561,8 @@ export class CalciteInput {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Loading\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Loading\""
           }],
         "text": "string to override English loading text"
       },
@@ -640,8 +653,8 @@ export class CalciteInput {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Toggles locale formatting for numbers."
       },
@@ -695,8 +708,8 @@ export class CalciteInput {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "use maxLength instead",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "use maxLength instead"
           }],
         "text": "Maximum length of text input."
       },
@@ -974,8 +987,8 @@ export class CalciteInput {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -992,8 +1005,8 @@ export class CalciteInput {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -1025,8 +1038,8 @@ export class CalciteInput {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "This event fires each time a new value is typed and committed."
       },

package/dist/collection/components/calcite-input-date-picker/calcite-input-date-picker.js

@@ -37,14 +37,6 @@ export class CalciteInputDatePicker {
     this.layout = "horizontal";
     this.focusedInput = "start";
     this.activeTransitionProp = "opacity";
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    this.onLabelClick = () => {
-      this.setFocus();
-    };
     this.transitionEnd = (event) => {
       if (event.propertyName === this.activeTransitionProp) {
         this.active
@@ -148,7 +140,7 @@ export class CalciteInputDatePicker {
     const { popper, menuEl } = this;
     const modifiers = this.getModifiers();
     popper
-      ? updatePopper({
+      ? await updatePopper({
         el: menuEl,
         modifiers,
         placement: DEFAULT_PLACEMENT,
@@ -225,6 +217,14 @@ export class CalciteInputDatePicker {
         : startWrapper || endWrapper;
     this.createPopper();
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  onLabelClick() {
+    this.setFocus();
+  }
   getModifiers() {
     const flipModifier = {
       name: "flip",
@@ -583,8 +583,8 @@ export class CalciteInputDatePicker {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Previous month\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Previous month\""
           }],
         "text": "Localized string for \"previous month\" (used for aria label)"
       },
@@ -604,8 +604,8 @@ export class CalciteInputDatePicker {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Next month\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Next month\""
           }],
         "text": "Localized string for \"next month\" (used for aria label)"
       },
@@ -792,8 +792,8 @@ export class CalciteInputDatePicker {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": " [DateRangeChange](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-date-picker/interfaces.ts#L1)",
-            "name": "see"
+            "name": "see",
+            "text": " [DateRangeChange](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-date-picker/interfaces.ts#L1)"
           }],
         "text": "Trigger calcite date change when a user changes the date range."
       },
@@ -815,8 +815,8 @@ export class CalciteInputDatePicker {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },
@@ -833,8 +833,8 @@ export class CalciteInputDatePicker {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

package/dist/collection/components/calcite-input-message/calcite-input-message.js

@@ -155,8 +155,8 @@ export class CalciteInputMessage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"floating\" type is no longer supported",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "\"floating\" type is no longer supported"
           }],
         "text": "specify the appearance of any slotted message - default (displayed under input), or floating (positioned absolutely under input)"
       },

package/dist/collection/components/calcite-input-time-picker/calcite-input-time-picker.js

@@ -24,7 +24,7 @@ export class CalciteInputTimePicker {
     this.scale = "m";
     /** number that specifies the granularity that the value must adhere to */
     this.step = 60;
-    /** The selected time */
+    /** The selected time (always 24-hour format)*/
     this.value = null;
     /** whether the value of the input was changed as a result of user typing or not */
     this.internalValueChange = false;
@@ -48,14 +48,6 @@ export class CalciteInputTimePicker {
     this.calciteInputInputHandler = (event) => {
       this.setValue({ value: event.detail.value });
     };
-    // --------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    // --------------------------------------------------------------------------
-    this.onLabelClick = () => {
-      this.setFocus();
-    };
     this.setCalciteInputEl = (el) => {
       this.calciteInputEl = el;
     };
@@ -155,6 +147,14 @@ export class CalciteInputTimePicker {
   async setFocus() {
     this.calciteInputEl.setFocus();
   }
+  // --------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  // --------------------------------------------------------------------------
+  onLabelClick() {
+    this.setFocus();
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -530,7 +530,7 @@ export class CalciteInputTimePicker {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The selected time"
+        "text": "The selected time (always 24-hour format)"
       },
       "attribute": "value",
       "reflect": false,

package/dist/collection/components/calcite-label/calcite-label.js

@@ -208,8 +208,8 @@ export class CalciteLabel {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

package/dist/collection/components/calcite-link/calcite-link.js

@@ -2,7 +2,7 @@
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
-import { Component, Element, h, Host, Method, Prop } from "@stencil/core";
+import { Component, Element, h, Host, Method, Prop, State, Watch } from "@stencil/core";
 import { focusElement, getElementDir } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
 /** Any attributes placed on <calcite-link> component will propagate to the rendered child */
@@ -29,6 +29,9 @@ export class CalciteLink {
       this.childEl = el;
     };
   }
+  hrefHandler(href) {
+    this.childElType = href ? "a" : "span";
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -194,6 +197,9 @@ export class CalciteLink {
       "reflect": false
     }
   }; }
+  static get states() { return {
+    "childElType": {}
+  }; }
   static get methods() { return {
     "setFocus": {
       "complexType": {
@@ -213,4 +219,8 @@ export class CalciteLink {
     }
   }; }
   static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "href",
+      "methodName": "hrefHandler"
+    }]; }
 }

package/dist/collection/components/calcite-list/calcite-list.js

@@ -2,13 +2,23 @@
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
-import { Component, h, Host, Prop } from "@stencil/core";
+import { Component, Element, h, Host, Prop, Method } from "@stencil/core";
 import { CSS } from "./resources";
 /**
  * A general purpose list that enables users to construct list items that conform to Calcite styling.
  * @slot - A slot for adding `calcite-list-item` elements.
  */
 export class CalciteList {
+  // --------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    const firstListItem = this.el.querySelector(`calcite-list-item:not([non-interactive])`);
+    firstListItem === null || firstListItem === void 0 ? void 0 : firstListItem.setFocus();
+  }
   // --------------------------------------------------------------------------
   //
   //  Render Methods
@@ -51,4 +61,26 @@ export class CalciteList {
       "reflect": false
     }
   }; }
+  static get methods() { return {
+    "setFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "HTMLCalciteListItemElement": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Sets focus on the component.",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "el"; }
 }

package/dist/collection/components/calcite-list-item/calcite-list-item.js

@@ -2,7 +2,7 @@
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
-import { Component, Element, Prop, h, Host } from "@stencil/core";
+import { Component, Element, Prop, h, Host, Method } from "@stencil/core";
 import { SLOTS, CSS } from "./resources";
 import { getSlotted } from "../../utils/dom";
 /**
@@ -30,6 +30,16 @@ export class CalciteListItem {
   }
   // --------------------------------------------------------------------------
   //
+  //  Public Methods
+  //
+  // --------------------------------------------------------------------------
+  /** Sets focus on the component. */
+  async setFocus() {
+    var _a;
+    (_a = this.focusEl) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  // --------------------------------------------------------------------------
+  //
   //  Render Methods
   //
   // --------------------------------------------------------------------------
@@ -62,7 +72,7 @@ export class CalciteListItem {
   renderContentContainer() {
     const { disabled, nonInteractive } = this;
     const content = [this.renderContentStart(), this.renderContent(), this.renderContentEnd()];
-    return !nonInteractive ? (h("button", { class: { [CSS.contentContainer]: true, [CSS.contentContainerButton]: true }, disabled: disabled }, content)) : (h("div", { class: CSS.contentContainer }, content));
+    return !nonInteractive ? (h("button", { class: { [CSS.contentContainer]: true, [CSS.contentContainerButton]: true }, disabled: disabled, ref: (focusEl) => (this.focusEl = focusEl) }, content)) : (h("div", { class: CSS.contentContainer, ref: () => (this.focusEl = null) }, content));
   }
   render() {
     return (h(Host, { role: "listitem" },
@@ -153,5 +163,23 @@ export class CalciteListItem {
       "reflect": false
     }
   }; }
+  static get methods() { return {
+    "setFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Sets focus on the component.",
+        "tags": []
+      }
+    }
+  }; }
   static get elementRef() { return "el"; }
 }

package/dist/collection/components/calcite-loader/calcite-loader.css

@@ -158,10 +158,8 @@
   text-align: center;
   font-size: var(--calcite-loader-font-size);
   width: var(--calcite-loader-size);
-  top: 4rem;
   left: 50%;
   margin-left: calc(var(--calcite-loader-size) / 2 * -1);
-  margin-top: calc(var(--calcite-loader-size) / 2);
   line-height: 0.25;
   transform: scale(1, 1);
 }
@@ -172,7 +170,6 @@
   opacity: 1;
   width: var(--calcite-loader-size);
   height: var(--calcite-loader-size);
-  top: 4rem;
   left: 50%;
   margin-left: calc(var(--calcite-loader-size) / 2 * -1);
   transform: scale(1, 1);
@@ -229,13 +226,13 @@
   height: var(--calcite-loader-size-inline);
   min-height: var(--calcite-loader-size-inline);
   width: var(--calcite-loader-size-inline);
-  margin-right: var(--calcite-loader-size-inline)/2;
-  vertical-align: -var(--calcite-loader-size-inline)/5;
+  margin-right: calc(var(--calcite-loader-size-inline) * 0.5);
+  vertical-align: calc(var(--calcite-loader-size-inline) * -1 * 0.2);
 }
 
 :host([inline][dir=rtl]) {
   margin-right: 0;
-  margin-left: var(--calcite-loader-size-inline)/2;
+  margin-left: calc(var(--calcite-loader-size-inline) * 0.5);
 }
 
 :host([active][inline]) {

package/dist/collection/components/calcite-modal/calcite-modal.js

@@ -540,7 +540,7 @@ export class CalciteModal {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fired when the modal begins the open animation"
+        "text": "Fired when the modal finishes the open animation"
       },
       "complexType": {
         "original": "any",
@@ -555,7 +555,7 @@ export class CalciteModal {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fired when the modal begins the close animation"
+        "text": "Fired when the modal finishes the close animation"
       },
       "complexType": {
         "original": "any",

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

@@ -101,19 +101,23 @@
 :host([scale=s]) .container *::slotted([slot=title]) {
   font-size: var(--calcite-font-size--1);
   line-height: 1.375;
-  margin-bottom: 0.25rem;
+  margin-top: 0.125rem;
+  margin-bottom: 0.125rem;
 }
 
 :host([scale=s]) .container slot[name=message]::slotted(*),
 :host([scale=s]) .container *::slotted([slot=message]) {
   font-size: var(--calcite-font-size--2);
   line-height: 1.375;
-  margin-bottom: 0.25rem;
+  margin-top: 0.125rem;
+  margin-bottom: 0.125rem;
 }
 
 :host([scale=s]) ::slotted(calcite-link) {
   font-size: var(--calcite-font-size--2);
   line-height: 1.375;
+  margin-top: 0.125rem;
+  margin-bottom: 0.125rem;
 }
 
 :host([scale=s]) .notice-close {
@@ -129,19 +133,23 @@
 :host([scale=m]) .container *::slotted([slot=title]) {
   font-size: var(--calcite-font-size-0);
   line-height: 1.375;
-  margin-bottom: 0.25rem;
+  margin-top: 0.125rem;
+  margin-bottom: 0.125rem;
 }
 
 :host([scale=m]) .container slot[name=message]::slotted(*),
 :host([scale=m]) .container *::slotted([slot=message]) {
   font-size: var(--calcite-font-size--1);
   line-height: 1.375;
-  margin-bottom: 0.25rem;
+  margin-top: 0.125rem;
+  margin-bottom: 0.125rem;
 }
 
 :host([scale=m]) ::slotted(calcite-link) {
   font-size: var(--calcite-font-size--1);
   line-height: 1.375;
+  margin-top: 0.125rem;
+  margin-bottom: 0.125rem;
 }
 
 :host([scale=l]) {
@@ -153,19 +161,23 @@
 :host([scale=l]) .container *::slotted([slot=title]) {
   font-size: var(--calcite-font-size-1);
   line-height: 1.375;
-  margin-bottom: 0.25rem;
+  margin-top: 0.125rem;
+  margin-bottom: 0.125rem;
 }
 
 :host([scale=l]) .container slot[name=message]::slotted(*),
 :host([scale=l]) .container *::slotted([slot=message]) {
   font-size: var(--calcite-font-size-0);
   line-height: 1.375;
-  margin-bottom: 0.25rem;
+  margin-top: 0.125rem;
+  margin-bottom: 0.125rem;
 }
 
 :host([scale=l]) ::slotted(calcite-link) {
   font-size: var(--calcite-font-size-0);
   line-height: 1.375;
+  margin-top: 0.125rem;
+  margin-bottom: 0.125rem;
 }
 
 :host([width=auto]) {

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

@@ -194,8 +194,8 @@ export class CalciteNotice {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Close\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Close\""
           }],
         "text": "String for the close button."
       },

package/dist/collection/components/calcite-option/calcite-option.js

@@ -154,8 +154,8 @@ export class CalciteOption {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },

package/dist/collection/components/calcite-option-group/calcite-option-group.js

@@ -84,8 +84,8 @@ export class CalciteOptionGroup {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       },