@esri/calcite-components 1.0.0-beta.92 → 1.0.0-beta.94

package/dist/collection/components/input-number/input-number.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.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from "@stencil/core";
 import { getElementDir, getElementProp, getSlotted, setRequestedIcon } from "../../utils/dom";
@@ -474,16 +474,16 @@ export class InputNumber {
     const dir = getElementDir(this.el);
     const loader = (h("div", { class: CSS.loader },
       h("calcite-progress", { label: this.intlLoading, type: "indeterminate" })));
-    const inputClearButton = (h("button", { "aria-label": this.intlClear || TEXT.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: this.disabled ? -1 : 0, type: "button" },
+    const inputClearButton = (h("button", { "aria-label": this.intlClear || TEXT.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" },
       h("calcite-icon", { icon: "x", scale: "s" })));
     const iconEl = (h("calcite-icon", { class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: "s" }));
     const isHorizontalNumberButton = this.numberButtonType === "horizontal";
-    const numberButtonsHorizontalUp = (h("button", { class: {
+    const numberButtonsHorizontalUp = (h("button", { "aria-hidden": "true", class: {
         [CSS.numberButtonItem]: true,
         [CSS.buttonItemHorizontal]: isHorizontalNumberButton
       }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerUpAndOutHandler, onPointerUp: this.nudgeButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" },
       h("calcite-icon", { icon: "chevron-up", scale: "s" })));
-    const numberButtonsHorizontalDown = (h("button", { class: {
+    const numberButtonsHorizontalDown = (h("button", { "aria-hidden": "true", class: {
         [CSS.numberButtonItem]: true,
         [CSS.buttonItemHorizontal]: isHorizontalNumberButton
       }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerUpAndOutHandler, onPointerUp: this.nudgeButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" },
@@ -564,7 +564,7 @@ export class InputNumber {
         "text": "When true, the component is focused on page load."
       },
       "attribute": "autofocus",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "clearable": {
@@ -621,7 +621,7 @@ export class InputNumber {
         "text": "When true, number values are displayed with the locale's group separator."
       },
       "attribute": "group-separator",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "hidden": {
@@ -642,7 +642,7 @@ export class InputNumber {
         "text": "When true, the component will not be visible."
       },
       "attribute": "hidden",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "icon": {
@@ -789,7 +789,7 @@ export class InputNumber {
         "text": "Specifies the Unicode numeral system used by the component for localization."
       },
       "attribute": "numbering-system",
-      "reflect": false
+      "reflect": true
     },
     "localeFormat": {
       "type": "boolean",
@@ -990,7 +990,7 @@ export class InputNumber {
         "text": "When true, the value cannot be modified."
       },
       "attribute": "read-only",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "required": {
@@ -1008,7 +1008,7 @@ export class InputNumber {
         "text": "When true, the component must have a value in order for the form to submit."
       },
       "attribute": "required",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "scale": {

package/dist/collection/components/input-number/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.92
+ * v1.0.0-beta.94
  */
 export {};

package/dist/collection/components/input-number/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.92
+ * v1.0.0-beta.94
  */
 export const CSS = {
   loader: "loader",

package/dist/collection/components/input-text/input-text.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.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, Event, h, Host, Method, Prop, Watch } from "@stencil/core";
 import { getElementDir, getElementProp, getSlotted, setRequestedIcon } from "../../utils/dom";
@@ -294,7 +294,7 @@ export class InputText {
     const dir = getElementDir(this.el);
     const loader = (h("div", { class: CSS.loader },
       h("calcite-progress", { label: this.intlLoading, type: "indeterminate" })));
-    const inputClearButton = (h("button", { "aria-label": this.intlClear || TEXT.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputTextValue, tabIndex: this.disabled ? -1 : 0, type: "button" },
+    const inputClearButton = (h("button", { "aria-label": this.intlClear || TEXT.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputTextValue, tabIndex: -1, type: "button" },
       h("calcite-icon", { icon: "x", scale: "s" })));
     const iconEl = (h("calcite-icon", { class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: "s" }));
     const prefixText = h("div", { class: CSS.prefix }, this.prefixText);
@@ -366,7 +366,7 @@ export class InputText {
         "text": "When true, the component is focused on page load."
       },
       "attribute": "autofocus",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "clearable": {
@@ -426,7 +426,7 @@ export class InputText {
         "text": "When true, the component will not be visible."
       },
       "attribute": "hidden",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "icon": {
@@ -652,7 +652,7 @@ export class InputText {
         "text": "When true, the value cannot be modified."
       },
       "attribute": "read-only",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "required": {
@@ -670,7 +670,7 @@ export class InputText {
         "text": "When true, the component must have a value in order for the form to submit."
       },
       "attribute": "required",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "scale": {

package/dist/collection/components/input-text/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.92
+ * v1.0.0-beta.94
  */
 export const CSS = {
   loader: "loader",

package/dist/collection/components/input-time-picker/input-time-picker.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.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, Host, h, Prop, Listen, Event, Method, Watch, State } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -16,8 +16,14 @@ export class InputTimePicker {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** The active state of the time input */
+    /**
+     * The active state of the time input
+     *
+     * @deprecated Use open instead.
+     */
     this.active = false;
+    /** When true, displays the `calcite-time-picker` component.*/
+    this.open = false;
     /** The disabled state of the time input */
     this.disabled = false;
     /**
@@ -40,6 +46,13 @@ export class InputTimePicker {
     this.required = false;
     /** The scale (size) of the time input */
     this.scale = "m";
+    /**
+     * Determines the type of positioning to use for the overlaid content.
+     *
+     * Using the "absolute" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The "fixed" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is "fixed".
+     *
+     */
+    this.overlayPositioning = "absolute";
     /**
      * Determines where the popover will be positioned relative to the input.
      *
@@ -60,14 +73,14 @@ export class InputTimePicker {
     //
     //--------------------------------------------------------------------------
     this.calciteInternalInputBlurHandler = () => {
-      this.active = false;
+      this.open = false;
       const shouldIncludeSeconds = this.shouldIncludeSeconds();
       const localizedInputValue = localizeTimeString(this.calciteInputEl.value, this.locale, shouldIncludeSeconds);
       this.setInputValue(localizedInputValue || localizeTimeString(this.value, this.locale, shouldIncludeSeconds));
     };
     this.calciteInternalInputFocusHandler = (event) => {
       if (!this.readOnly) {
-        this.active = true;
+        this.open = true;
         event.stopPropagation();
       }
     };
@@ -96,8 +109,8 @@ export class InputTimePicker {
           event.preventDefault();
         }
       }
-      if (key === "Escape" && this.active) {
-        this.active = false;
+      if (key === "Escape" && this.open) {
+        this.open = false;
         event.preventDefault();
       }
     };
@@ -156,16 +169,20 @@ export class InputTimePicker {
       }
     };
   }
-  activeHandler() {
+  activeHandler(value) {
+    this.open = value;
+  }
+  openHandler(value) {
+    this.active = value;
     if (this.disabled || this.readOnly) {
-      this.active = false;
+      this.open = false;
       return;
     }
     this.reposition();
   }
   handleDisabledAndReadOnlyChange(value) {
     if (!value) {
-      this.active = false;
+      this.open = false;
     }
   }
   localeWatcher(newLocale) {
@@ -186,13 +203,13 @@ export class InputTimePicker {
   timePickerBlurHandler(event) {
     event.preventDefault();
     event.stopPropagation();
-    this.active = false;
+    this.open = false;
   }
   timePickerFocusHandler(event) {
     event.preventDefault();
     event.stopPropagation();
     if (!this.readOnly) {
-      this.active = true;
+      this.open = true;
     }
   }
   // --------------------------------------------------------------------------
@@ -222,11 +239,18 @@ export class InputTimePicker {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    const { active, open } = this;
     if (this.value) {
       this.setValue({ value: isValidTime(this.value) ? this.value : undefined, origin: "loading" });
     }
     connectLabel(this);
     connectForm(this);
+    if (open) {
+      this.active = open;
+    }
+    else if (active) {
+      this.open = active;
+    }
   }
   componentDidLoad() {
     this.setInputValue(this.localizedValue);
@@ -248,7 +272,7 @@ export class InputTimePicker {
     return (h(Host, { onKeyDown: this.keyDownHandler },
       h("div", { "aria-controls": popoverId, "aria-haspopup": "dialog", "aria-label": this.name, "aria-owns": popoverId, id: this.referenceElementId, role: "combobox" },
         h("calcite-input", { disabled: this.disabled, icon: "clock", label: getLabelText(this), onCalciteInputInput: this.calciteInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.calciteInternalInputFocusHandler, readOnly: this.readOnly, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })),
-      h("calcite-popover", { id: popoverId, label: "Time Picker", open: this.active, placement: this.placement, ref: this.setCalcitePopoverEl, referenceElement: this.referenceElementId, triggerDisabled: true },
+      h("calcite-popover", { id: popoverId, label: "Time Picker", open: this.open, overlayPositioning: this.overlayPositioning, placement: this.placement, ref: this.setCalcitePopoverEl, referenceElement: this.referenceElementId, triggerDisabled: true },
         h("calcite-time-picker", { intlHour: this.intlHour, intlHourDown: this.intlHourDown, intlHourUp: this.intlHourUp, intlMeridiem: this.intlMeridiem, intlMeridiemDown: this.intlMeridiemDown, intlMeridiemUp: this.intlMeridiemUp, intlMinute: this.intlMinute, intlMinuteDown: this.intlMinuteDown, intlMinuteUp: this.intlMinuteUp, intlSecond: this.intlSecond, intlSecondDown: this.intlSecondDown, intlSecondUp: this.intlSecondUp, lang: this.locale, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, value: this.value })),
       h(HiddenFormInputSlot, { component: this })));
   }
@@ -272,13 +296,34 @@ export class InputTimePicker {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "Use open instead."
+          }],
         "text": "The active state of the time input"
       },
       "attribute": "active",
       "reflect": true,
       "defaultValue": "false"
     },
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, displays the `calcite-time-picker` component."
+      },
+      "attribute": "open",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,
@@ -315,7 +360,7 @@ export class InputTimePicker {
         "text": "When true, still focusable but controls are gone and the value cannot be modified."
       },
       "attribute": "read-only",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "intlHour": {
@@ -558,7 +603,7 @@ export class InputTimePicker {
         "text": "The name of the time input"
       },
       "attribute": "name",
-      "reflect": false
+      "reflect": true
     },
     "required": {
       "type": "boolean",
@@ -604,6 +649,29 @@ export class InputTimePicker {
       "reflect": true,
       "defaultValue": "\"m\""
     },
+    "overlayPositioning": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "OverlayPositioning",
+        "resolved": "\"absolute\" | \"fixed\"",
+        "references": {
+          "OverlayPositioning": {
+            "location": "import",
+            "path": "../../utils/floating-ui"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Determines the type of positioning to use for the overlaid content.\n\nUsing the \"absolute\" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The \"fixed\" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is \"fixed\"."
+      },
+      "attribute": "overlay-positioning",
+      "reflect": false,
+      "defaultValue": "\"absolute\""
+    },
     "placement": {
       "type": "string",
       "mutable": false,
@@ -645,7 +713,7 @@ export class InputTimePicker {
         "text": "number (seconds) that specifies the granularity that the value must adhere to"
       },
       "attribute": "step",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "60"
     },
     "value": {
@@ -724,6 +792,9 @@ export class InputTimePicker {
   static get watchers() { return [{
       "propName": "active",
       "methodName": "activeHandler"
+    }, {
+      "propName": "open",
+      "methodName": "openHandler"
     }, {
       "propName": "disabled",
       "methodName": "handleDisabledAndReadOnlyChange"

package/dist/collection/components/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.92
+ * v1.0.0-beta.94
  */
 export {};

package/dist/collection/components/label/label.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.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, Event, h, Prop, Host } from "@stencil/core";
 import { labelDisconnectedEvent, labelConnectedEvent } from "../../utils/label";
@@ -222,7 +222,7 @@ export class Label {
         "text": "eliminates any space around the label"
       },
       "attribute": "disable-spacing",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     }
   }; }

package/dist/collection/components/label/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.92
+ * v1.0.0-beta.94
  */
 export const CSS = {
   container: "container"

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

@@ -1,9 +1,9 @@
 /*!
  * 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.92
+ * v1.0.0-beta.94
  */
-import { Component, Element, h, Host, Method, Prop } from "@stencil/core";
+import { Component, Element, h, Host, Listen, Method, Prop } from "@stencil/core";
 import { focusElement, getElementDir } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
 import { updateHostInteraction } from "../../utils/interactive";
@@ -26,6 +26,12 @@ export class Link {
      * See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download
      */
     this.download = false;
+    this.childElClickHandler = (event) => {
+      if (!event.isTrusted) {
+        // click was invoked internally, we stop it here
+        event.stopPropagation();
+      }
+    };
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -58,13 +64,24 @@ export class Link {
         When the 'download' property of type 'boolean | string' is set to true, the value is "".
         This works around that issue for now.
         */
-        download: Tag === "a" && (download === "" || download) ? download : null, href: Tag === "a" && this.href, ref: this.storeTagRef, rel: Tag === "a" && this.rel, role: role, tabIndex: tabIndex, target: Tag === "a" && this.target },
+        download: Tag === "a" && (download === "" || download) ? download : null, href: Tag === "a" && this.href, onClick: this.childElClickHandler, ref: this.storeTagRef, rel: Tag === "a" && this.rel, role: role, tabIndex: tabIndex, target: Tag === "a" && this.target },
         this.iconStart ? iconStartEl : null,
         h("slot", null),
         this.iconEnd ? iconEndEl : null)));
   }
   //--------------------------------------------------------------------------
   //
+  //  Events
+  //
+  //--------------------------------------------------------------------------
+  clickHandler(event) {
+    // forwards the click() to the internal link for non user-initiated events
+    if (!event.isTrusted) {
+      this.childEl.click();
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
   //  Public Methods
   //
   //--------------------------------------------------------------------------
@@ -205,7 +222,7 @@ export class Link {
         "text": "The rel attribute to apply to the hyperlink"
       },
       "attribute": "rel",
-      "reflect": false
+      "reflect": true
     },
     "target": {
       "type": "string",
@@ -222,7 +239,7 @@ export class Link {
         "text": "The target attribute to apply to the hyperlink"
       },
       "attribute": "target",
-      "reflect": false
+      "reflect": true
     }
   }; }
   static get methods() { return {
@@ -244,4 +261,11 @@ export class Link {
     }
   }; }
   static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "click",
+      "method": "clickHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
 }

package/dist/collection/components/list/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-beta.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, h, Host, Prop, Method } from "@stencil/core";
 import { CSS } from "./resources";
@@ -98,7 +98,7 @@ export class List {
         "text": "Specifies the number at which section headings should start."
       },
       "attribute": "heading-level",
-      "reflect": false
+      "reflect": true
     }
   }; }
   static get methods() { return {

package/dist/collection/components/list/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.92
+ * v1.0.0-beta.94
  */
 export const CSS = {
   container: "container"

package/dist/collection/components/list-item/list-item.css

@@ -210,8 +210,8 @@
 
 .content-start ::slotted(calcite-icon), 
 .content-end ::slotted(calcite-icon) {
+  margin-inline: 0.75rem;
   align-self: center;
-  padding-inline: 0.75rem;
 }
 
 .actions-start ::slotted(calcite-action), 

package/dist/collection/components/list-item/list-item.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.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, Prop, h, Host, Method } from "@stencil/core";
 import { SLOTS, CSS } from "./resources";

package/dist/collection/components/list-item/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.92
+ * v1.0.0-beta.94
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/list-item-group/list-item-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.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, Prop, h, Host } from "@stencil/core";
 import { CSS } from "./resources";
@@ -73,7 +73,7 @@ export class ListItemGroup {
         "text": "Specifies the number at which section headings should start."
       },
       "attribute": "heading-level",
-      "reflect": false
+      "reflect": true
     }
   }; }
   static get elementRef() { return "el"; }

package/dist/collection/components/list-item-group/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.92
+ * v1.0.0-beta.94
  */
 export const CSS = {
   heading: "heading",

package/dist/collection/components/loader/loader.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.92
+ * v1.0.0-beta.94
  */
 import { Component, Element, h, Host, Prop } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -245,7 +245,7 @@ export class Loader {
         "text": "Disables spacing around the component."
       },
       "attribute": "no-padding",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     }
   }; }

package/dist/collection/components/modal/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.92
+ * v1.0.0-beta.94
  */
 export {};

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

@@ -179,12 +179,12 @@
   transform: var(--calcite-modal-hidden-position);
 }
 
-:host([open]) {
+:host([open][calcite-hydrated]) {
   opacity: 1;
   visibility: visible !important;
   transition-delay: 0ms;
 }
-:host([open]) .modal {
+:host([open][calcite-hydrated]) .modal--open {
   pointer-events: auto;
   visibility: visible;
   opacity: 1;
@@ -223,6 +223,7 @@
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   border-start-end-radius: 0.25rem;
   padding-block: var(--calcite-modal-padding, var(--calcite-modal-padding-internal));
+  padding-inline: var(--calcite-modal-padding, var(--calcite-modal-padding-internal));
   flex: 0 0 auto;
 }
 .close calcite-icon {