@esri/calcite-components 1.0.0-next.724 → 1.0.0-next.726

package/dist/collection/components/input/input.css

@@ -275,7 +275,7 @@
 }
 
 :host([icon][scale=l]) input {
-  padding-inline-start: 3rem;
+  padding-inline-start: 3.5rem;
 }
 
 .element-wrapper {

package/dist/collection/components/input/input.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.724
+ * v1.0.0-next.726
  */
 import { h, Host } from "@stencil/core";
 import { getElementDir, getElementProp, getSlotted, isPrimaryPointerButton, setRequestedIcon } from "../../utils/dom";
@@ -570,17 +570,17 @@ export class Input {
   render() {
     const dir = getElementDir(this.el);
     const loader = (h("div", { class: CSS.loader }, h("calcite-progress", { label: this.messages.loading, type: "indeterminate" })));
-    const inputClearButton = (h("button", { "aria-label": this.messages.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 inputClearButton = (h("button", { "aria-label": this.messages.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
+    const iconEl = (h("calcite-icon", { class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: this.scale === "l" ? "m" : "s" }));
     const isHorizontalNumberButton = this.numberButtonType === "horizontal";
     const numberButtonsHorizontalUp = (h("button", { "aria-hidden": "true", class: {
         [CSS.numberButtonItem]: true,
         [CSS.buttonItemHorizontal]: isHorizontalNumberButton
-      }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { icon: "chevron-up", scale: "s" })));
+      }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { icon: "chevron-up", scale: this.scale === "l" ? "m" : "s" })));
     const numberButtonsHorizontalDown = (h("button", { "aria-hidden": "true", class: {
         [CSS.numberButtonItem]: true,
         [CSS.buttonItemHorizontal]: isHorizontalNumberButton
-      }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { icon: "chevron-down", scale: "s" })));
+      }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { icon: "chevron-down", scale: this.scale === "l" ? "m" : "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);
@@ -591,7 +591,7 @@ export class Input {
             [CSS.editingEnabled]: this.editingEnabled,
             [CSS.inlineChild]: !!this.inlineEditableEl
           }, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.enterKeyHint, inputMode: this.inputMode, max: this.maxString, maxLength: this.maxLength, min: this.minString, minLength: this.minLength, multiple: this.multiple, name: this.name, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeyDownHandler, onKeyUp: this.inputKeyUpHandler, pattern: this.pattern, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildElRef, required: this.required ? true : null, step: this.step, tabIndex: this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null, type: this.type, value: this.value }),
-        this.isTextarea ? (h("div", { class: CSS.resizeIconWrapper }, h("calcite-icon", { icon: "chevron-down", scale: "s" }))) : null
+        this.isTextarea ? (h("div", { class: CSS.resizeIconWrapper }, h("calcite-icon", { icon: "chevron-down", scale: this.scale === "l" ? "m" : "s" }))) : null
       ]
       : null;
     return (h(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h("div", { class: { [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly

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

package/dist/collection/components/input-date-picker/input-date-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-next.724
+ * v1.0.0-next.726
  */
 import { Build, h, Host } from "@stencil/core";
 import { dateFromISO, dateFromLocalizedString, dateFromRange, datePartsFromLocalizedString, dateToISO, inRange } from "../../utils/date";
@@ -408,7 +408,7 @@ export class InputDatePicker {
         ["calendar-picker-wrapper--end"]: this.focusedInput === "end",
         [FloatingCSS.animation]: true,
         [FloatingCSS.animationActive]: this.open
-      }, ref: this.setTransitionEl }, h("calcite-date-picker", { activeDate: this.datePickerActiveDate, activeRange: this.focusedInput, headingLevel: this.headingLevel, max: this.max, maxAsDate: this.maxAsDate, messageOverrides: this.messageOverrides, min: this.min, minAsDate: this.minAsDate, numberingSystem: numberingSystem, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, tabIndex: 0, valueAsDate: this.valueAsDate }))), this.range && this.layout === "horizontal" && (h("div", { class: "horizontal-arrow-container" }, h("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: "s" }))), this.range && this.layout === "vertical" && this.scale !== "s" && (h("div", { class: "vertical-arrow-container" }, h("calcite-icon", { icon: "arrow-down", scale: "s" }))), this.range && (h("div", { class: "input-wrapper", ref: this.setEndWrapper }, h("calcite-input", { class: {
+      }, ref: this.setTransitionEl }, h("calcite-date-picker", { activeDate: this.datePickerActiveDate, activeRange: this.focusedInput, headingLevel: this.headingLevel, max: this.max, maxAsDate: this.maxAsDate, messageOverrides: this.messageOverrides, min: this.min, minAsDate: this.minAsDate, numberingSystem: numberingSystem, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, tabIndex: 0, valueAsDate: this.valueAsDate }))), this.range && this.layout === "horizontal" && (h("div", { class: "horizontal-arrow-container" }, h("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: this.scale === "l" ? "m" : "s" }))), this.range && this.layout === "vertical" && this.scale !== "s" && (h("div", { class: "vertical-arrow-container" }, h("calcite-icon", { icon: "arrow-down", scale: this.scale === "l" ? "m" : "s" }))), this.range && (h("div", { class: "input-wrapper", ref: this.setEndWrapper }, h("calcite-input", { class: {
         input: true,
         "border-top-color-one": this.layout === "vertical" && this.range
       }, disabled: disabled, icon: "calendar", "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.endInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, ref: this.setEndInput, scale: this.scale, type: "text" }))))), h(HiddenFormInputSlot, { component: this })));

package/dist/collection/components/input-date-picker/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.724
+ * v1.0.0-next.726
  */
 export const CSS = {
   menu: "menu-container",

package/dist/collection/components/input-message/input-message.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.724
+ * v1.0.0-next.726
  */
 import { h, Host } from "@stencil/core";
 import { getElementProp, setRequestedIcon } from "../../utils/dom";

package/dist/collection/components/input-message/interfaces.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.724
+ * v1.0.0-next.726
  */
 export var StatusIconDefaults;
 (function (StatusIconDefaults) {

package/dist/collection/components/input-number/input-number.css

@@ -221,7 +221,7 @@
 }
 
 :host([icon][scale=l]) input {
-  padding-inline-start: 3rem;
+  padding-inline-start: 3.5rem;
 }
 
 .element-wrapper {

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-next.724
+ * v1.0.0-next.726
  */
 import { h, Host } from "@stencil/core";
 import { getElementDir, getElementProp, getSlotted, isPrimaryPointerButton, setRequestedIcon } from "../../utils/dom";
@@ -481,17 +481,17 @@ export class InputNumber {
   render() {
     const dir = getElementDir(this.el);
     const loader = (h("div", { class: CSS.loader }, h("calcite-progress", { label: this.messages.loading, type: "indeterminate" })));
-    const inputClearButton = (h("button", { "aria-label": this.messages.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 inputClearButton = (h("button", { "aria-label": this.messages.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
+    const iconEl = (h("calcite-icon", { class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: this.scale === "l" ? "m" : "s" }));
     const isHorizontalNumberButton = this.numberButtonType === "horizontal";
     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" })));
+      }, "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: this.scale === "l" ? "m" : "s" })));
     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" }, h("calcite-icon", { icon: "chevron-down", scale: "s" })));
+      }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerUpAndOutHandler, onPointerUp: this.nudgeButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { icon: "chevron-down", scale: this.scale === "l" ? "m" : "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);

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-next.724
+ * v1.0.0-next.726
  */
 export const CSS = {
   loader: "loader",

package/dist/collection/components/input-text/input-text.css

@@ -225,7 +225,7 @@ input:focus {
 }
 
 :host([icon][scale=l]) input {
-  padding-inline-start: 3rem;
+  padding-inline-start: 3.5rem;
 }
 
 .element-wrapper {

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-next.724
+ * v1.0.0-next.726
  */
 import { h, Host } from "@stencil/core";
 import { getElementDir, getElementProp, getSlotted, setRequestedIcon } from "../../utils/dom";
@@ -285,8 +285,8 @@ export class InputText {
   render() {
     const dir = getElementDir(this.el);
     const loader = (h("div", { class: CSS.loader }, h("calcite-progress", { label: this.messages.loading, type: "indeterminate" })));
-    const inputClearButton = (h("button", { "aria-label": this.messages.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 inputClearButton = (h("button", { "aria-label": this.messages.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputTextValue, tabIndex: -1, type: "button" }, h("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
+    const iconEl = (h("calcite-icon", { class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: this.scale === "l" ? "m" : "s" }));
     const prefixText = h("div", { class: CSS.prefix }, this.prefixText);
     const suffixText = h("div", { class: CSS.suffix }, this.suffixText);
     const childEl = (h("input", { "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: this.autofocus ? true : null, class: {

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-next.724
+ * v1.0.0-next.726
  */
 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-next.724
+ * v1.0.0-next.726
  */
 import { h, Host } from "@stencil/core";
 import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";

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-next.724
+ * v1.0.0-next.726
  */
 import { h, Host } from "@stencil/core";
 import { labelConnectedEvent, labelDisconnectedEvent } from "../../utils/label";

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

package/dist/collection/components/link/link.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.724
+ * v1.0.0-next.726
  */
 import { h, Host } from "@stencil/core";
 import { focusElement, getElementDir } from "../../utils/dom";

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-next.724
+ * v1.0.0-next.726
  */
 import { h } from "@stencil/core";
 import { debounce } from "lodash-es";

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

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-next.724
+ * v1.0.0-next.726
  */
 import { h, Host } from "@stencil/core";
 import { getElementDir, slotChangeHasAssignedElement, toAriaBoolean } from "../../utils/dom";

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

package/dist/collection/components/list-item/utils.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.724
+ * v1.0.0-next.726
  */
 import { Build } from "@stencil/core";
 const listItemGroupSelector = "calcite-list-item-group";

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

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

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

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

@@ -92,6 +92,9 @@
 * @prop --calcite-modal-content-background: Specifies the background color of content placed in the `content` slot.
 * @prop --calcite-modal-content-padding: Specifies the padding of the modal `content` slot.
 * @prop --calcite-modal-scrim-background: Specifies the background color of the modal scrim.
+* @prop --calcite-modal-width: Specifies a width of the modal, using `px`, `em`, `rem`, `vw`, or `%`. Will never exceed the width of the viewport. Will not apply if `fullscreen` if set.
+* @prop --calcite-modal-height: Specifies a height of the modal, using `px`, `em`, `rem`, `vh`, or `%`. Will never exceed the height of the viewport. Will not apply if `fullscreen` if set.
+*
 */
 :host {
   position: absolute;
@@ -230,7 +233,7 @@
   color: var(--calcite-ui-text-3);
   outline-color: transparent;
   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-internal);
   padding-inline: var(--calcite-modal-padding-internal);
   flex: 0 0 auto;
 }
@@ -275,7 +278,7 @@ slot[name=header]::slotted(*),
   block-size: 100%;
   overflow: auto;
   padding: 0px;
-  max-block-size: calc(100vh - 12rem);
+  max-block-size: 100%;
   background-color: var(--calcite-modal-content-background, var(--calcite-ui-foreground-1));
   padding-block: var(--calcite-modal-content-padding, var(--calcite-modal-padding-internal));
   padding-inline: var(--calcite-modal-content-padding, var(--calcite-modal-padding-internal));
@@ -340,7 +343,10 @@ slot[name=primary] {
 }
 
 :host([width=s]) .modal {
-  max-inline-size: 32rem;
+  max-block-size: 100%;
+  max-inline-size: 100%;
+  inline-size: var(--calcite-modal-width, 32rem);
+  block-size: var(--calcite-modal-height, auto);
 }
 
 @media screen and (max-width: 35rem) {
@@ -350,7 +356,6 @@ slot[name=primary] {
     max-block-size: 100%;
     inline-size: 100%;
     max-inline-size: 100%;
-    border-radius: 0px;
   }
   :host([width=s]) .content {
     flex: 1 1 auto;
@@ -362,7 +367,10 @@ slot[name=primary] {
   }
 }
 :host([width=m]) .modal {
-  max-inline-size: 48rem;
+  max-block-size: 100%;
+  max-inline-size: 100%;
+  inline-size: var(--calcite-modal-width, 48rem);
+  block-size: var(--calcite-modal-height, auto);
 }
 
 @media screen and (max-width: 51rem) {
@@ -372,7 +380,6 @@ slot[name=primary] {
     max-block-size: 100%;
     inline-size: 100%;
     max-inline-size: 100%;
-    border-radius: 0px;
   }
   :host([width=m]) .content {
     flex: 1 1 auto;
@@ -384,7 +391,10 @@ slot[name=primary] {
   }
 }
 :host([width=l]) .modal {
-  max-inline-size: 94rem;
+  max-block-size: 100%;
+  max-inline-size: 100%;
+  inline-size: var(--calcite-modal-width, 94rem);
+  block-size: var(--calcite-modal-height, auto);
 }
 
 @media screen and (max-width: 97rem) {
@@ -394,7 +404,6 @@ slot[name=primary] {
     max-block-size: 100%;
     inline-size: 100%;
     max-inline-size: 100%;
-    border-radius: 0px;
   }
   :host([width=l]) .content {
     flex: 1 1 auto;
@@ -414,6 +423,7 @@ slot[name=primary] {
   max-block-size: 100%;
   inline-size: 100%;
   max-inline-size: 100%;
+  border-radius: 0px;
   --calcite-modal-hidden-position: translate3D(0, 20px, 0) scale(0.95);
   --calcite-modal-shown-position: translate3D(0, 0, 0) scale(1);
 }
@@ -433,17 +443,12 @@ slot[name=primary] {
  * Docked
  */
 :host([docked]) .modal {
-  block-size: auto;
+  block-size: var(--calcite-modal-height, auto);
 }
 :host([docked]) .content {
   block-size: auto;
   flex: 1 1 auto;
 }
-@media screen and (max-width: 860px) {
-  :host([docked]) .modal {
-    border-radius: var(--calcite-border-radius) var(--calcite-border-radius) 0 0;
-  }
-}
 
 /**
  * Kinds

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.724
+ * v1.0.0-next.726
  */
 import { h, Host } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
@@ -22,7 +22,12 @@ import { connectMessages, disconnectMessages, setUpMessages, updateMessages } fr
  */
 export class Modal {
   constructor() {
-    this.mutationObserver = createObserver("mutation", () => this.updateFooterVisibility());
+    this.mutationObserver = createObserver("mutation", () => {
+      this.updateFooterVisibility();
+    });
+    this.cssVarObserver = createObserver("mutation", () => {
+      this.updateSizeCssVars();
+    });
     this.openTransitionProp = "opacity";
     //--------------------------------------------------------------------------
     //
@@ -55,6 +60,10 @@ export class Modal {
     this.updateFooterVisibility = () => {
       this.hasFooter = !!getSlotted(this.el, [SLOTS.back, SLOTS.primary, SLOTS.secondary]);
     };
+    this.updateSizeCssVars = () => {
+      this.cssWidth = getComputedStyle(this.el).getPropertyValue("--calcite-modal-width");
+      this.cssHeight = getComputedStyle(this.el).getPropertyValue("--calcite-modal-height");
+    };
     this.open = false;
     this.beforeClose = () => Promise.resolve();
     this.closeButtonDisabled = false;
@@ -69,6 +78,8 @@ export class Modal {
     this.messages = undefined;
     this.messageOverrides = undefined;
     this.slottedInShell = undefined;
+    this.cssWidth = undefined;
+    this.cssHeight = undefined;
     this.hasFooter = true;
     this.isOpen = false;
     this.effectiveLocale = undefined;
@@ -102,7 +113,9 @@ export class Modal {
   }
   connectedCallback() {
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
+    this.cssVarObserver?.observe(this.el, { attributeFilter: ["style"] });
     this.updateFooterVisibility();
+    this.updateSizeCssVars();
     connectConditionalSlotComponent(this);
     connectLocalized(this);
     connectMessages(this);
@@ -110,6 +123,7 @@ export class Modal {
   disconnectedCallback() {
     this.removeOverflowHiddenClass();
     this.mutationObserver?.disconnect();
+    this.cssVarObserver?.disconnect();
     disconnectConditionalSlotComponent(this);
     deactivateFocusTrap(this);
     disconnectLocalized(this);
@@ -117,12 +131,15 @@ export class Modal {
     this.slottedInShell = false;
   }
   render() {
-    return (h(Host, { "aria-describedby": this.contentId, "aria-labelledby": this.titleId, "aria-modal": "true", role: "dialog" }, h("div", { class: { [CSS.container]: true, [CSS.slottedInShell]: this.slottedInShell } }, h("calcite-scrim", { class: CSS.scrim, onClick: this.handleOutsideClose }), this.renderStyle(), h("div", { class: {
+    return (h(Host, { "aria-describedby": this.contentId, "aria-labelledby": this.titleId, "aria-modal": "true", role: "dialog" }, h("div", { class: {
+        [CSS.container]: true,
+        [CSS.slottedInShell]: this.slottedInShell
+      } }, h("calcite-scrim", { class: CSS.scrim, onClick: this.handleOutsideClose }), this.renderStyle(), h("div", { class: {
         [CSS.modal]: true,
         [CSS.modalOpen]: this.isOpen
       }, ref: this.setTransitionEl }, h("div", { class: CSS.header }, this.renderCloseButton(), h("header", { class: CSS.title }, h("slot", { name: CSS.header }))), h("div", { class: {
-        content: true,
-        "content--no-footer": !this.hasFooter
+        [CSS.content]: true,
+        [CSS.contentNoFooter]: !this.hasFooter
       }, ref: (el) => (this.modalContent = el) }, h("slot", { name: SLOTS.content })), this.renderFooter()))));
   }
   renderFooter() {
@@ -132,26 +149,35 @@ export class Modal {
     return !this.closeButtonDisabled ? (h("button", { "aria-label": this.messages.close, class: CSS.close, key: "button", onClick: this.close, ref: (el) => (this.closeButtonEl = el), title: this.messages.close }, h("calcite-icon", { icon: ICONS.close, scale: this.scale === "s" ? "s" : this.scale === "m" ? "m" : this.scale === "l" ? "l" : null }))) : null;
   }
   renderStyle() {
-    const hasCustomWidth = !isNaN(parseInt(`${this.width}`));
-    return hasCustomWidth ? (h("style", null, `
-        .${CSS.modal} {
-          max-width: ${this.width}px !important;
-        }
-        @media screen and (max-width: ${this.width}px) {
-          .${CSS.modal} {
-            height: 100% !important;
-            max-height: 100% !important;
-            width: 100% !important;
-            max-width: 100% !important;
-            margin: 0 !important;
-            border-radius: 0 !important;
-          }
-          .content {
-            flex: 1 1 auto !important;
-            max-height: unset !important;
-          }
-        }
-      `)) : null;
+    if (!this.fullscreen && (this.cssWidth || this.cssHeight)) {
+      return (h("style", null, `.${CSS.container} {
+              ${this.docked && this.cssWidth ? `align-items: center !important;` : ""}
+            }
+            .${CSS.modal} {
+              block-size: ${this.cssHeight ? this.cssHeight : "auto"} !important;
+              ${this.cssWidth ? `inline-size: ${this.cssWidth} !important;` : ""}
+              ${this.cssWidth ? `max-inline-size: ${this.cssWidth} !important;` : ""}
+              ${this.docked ? `border-radius: var(--calcite-border-radius) !important;` : ""}
+            }
+            @media screen and (max-width: ${this.cssWidth}) {
+              .${CSS.container} {
+                ${this.docked ? `align-items: flex-end !important;` : ""}
+              }
+              .${CSS.modal} {
+                max-block-size: 100% !important;
+                inline-size: 100% !important;
+                max-inline-size: 100% !important;
+                min-inline-size: 100% !important;
+                margin: 0 !important;
+                ${!this.docked ? `block-size: 100% !important;` : ""}
+                ${!this.docked ? `border-radius: 0 !important;` : ""}
+                ${this.docked
+        ? `border-radius: var(--calcite-border-radius) var(--calcite-border-radius) 0 0 !important;`
+        : ""}
+              }
+            }
+          `));
+    }
   }
   effectiveLocaleChange() {
     updateMessages(this, this.effectiveLocale);
@@ -417,11 +443,11 @@ export class Modal {
         "defaultValue": "\"m\""
       },
       "width": {
-        "type": "any",
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "Scale | number",
-          "resolved": "\"l\" | \"m\" | \"s\" | number",
+          "original": "Scale",
+          "resolved": "\"l\" | \"m\" | \"s\"",
           "references": {
             "Scale": {
               "location": "import",
@@ -433,7 +459,7 @@ export class Modal {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Specifies the width of the component. Can use scale sizes or pass a number (displays in pixels)."
+          "text": "Specifies the width of the component."
         },
         "attribute": "width",
         "reflect": true,
@@ -451,7 +477,7 @@ export class Modal {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Sets the component to always be fullscreen (overrides `width`)."
+          "text": "Sets the component to always be fullscreen (overrides `width` and `--calcite-modal-width` / `--calcite-modal-height`)."
         },
         "attribute": "fullscreen",
         "reflect": true
@@ -551,6 +577,8 @@ export class Modal {
   }
   static get states() {
     return {
+      "cssWidth": {},
+      "cssHeight": {},
       "hasFooter": {},
       "isOpen": {},
       "effectiveLocale": {},