@esri/calcite-components 5.1.1 → 5.1.2-next.0

package/dist/components/calcite-checkbox/customElement.d.ts

@@ -27,7 +27,7 @@ export abstract class Checkbox extends LitElement {
    *
    * When not set, the component is associated with its ancestor form element, if one exists.
    */
-  accessor form: string;
+  accessor form: string | undefined;
   /**
    * When `true`, the component is initially indeterminate, which is independent from its `checked` value.
    *
@@ -38,13 +38,13 @@ export abstract class Checkbox extends LitElement {
    */
   accessor indeterminate: boolean;
   /** Specifies an accessible label for the component. */
-  accessor label: string;
+  accessor label: string | undefined;
   /** Specifies the component's label text. */
-  accessor labelText: string;
+  accessor labelText: string | undefined;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: { required?: string; };
   /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
-  accessor name: string;
+  accessor name: string | undefined;
   /**
    * When `true` and the component resides in a form,
    * the component must have a value in order for the form to submit.

package/dist/components/calcite-chip/customElement.js

@@ -9,7 +9,7 @@ import { g as getIconScale } from "../../chunks/component.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
-import { S as SLOTS, C as CSS, I as ICONS } from "../../chunks/resources5.js";
+import { S as SLOTS, C as CSS, I as ICONS } from "../../chunks/resources6.js";
 const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-flex;cursor:default;border-radius:var(--calcite-chip-corner-radius, 9999px)}:host([closed]){display:none}:host([appearance=outline]) .container,:host([appearance=outline-fill]) .container{color:var(--calcite-chip-text-color, var(--calcite-color-text-1))}:host([appearance=outline]):host([kind=brand]),:host([appearance=outline-fill]):host([kind=brand]){--calcite-internal-chip-border-color: var(--calcite-chip-border-color, var(--calcite-color-brand));--calcite-internal-chip-selectable-hover-border-color: var(--calcite-chip-border-color, var(--calcite-color-brand));--calcite-internal-chip-selectable-active-border-color: var( --calcite-chip-border-color, var(--calcite-color-brand) )}:host([appearance=outline]):host([kind=inverse]),:host([appearance=outline-fill]):host([kind=inverse]){--calcite-internal-chip-border-color: var(--calcite-chip-border-color, var(--calcite-color-border-inverse))}:host([appearance=outline]):host([kind=neutral]),:host([appearance=outline-fill]):host([kind=neutral]){--calcite-internal-chip-border-color: var(--calcite-chip-border-color, var(--calcite-color-border-1))}:host([appearance=outline]){--calcite-internal-chip-background-color: transparent}:host([appearance=outline-fill]){--calcite-internal-chip-background-color: var(--calcite-chip-background-color, var(--calcite-color-foreground-1))}:host([appearance=solid]){--calcite-internal-chip-border-color: transparent;--calcite-internal-chip-selectable-hover-border-color: transparent;--calcite-internal-chip-selectable-active-border-color: transparent}:host([appearance=solid]):host([kind=brand]),:host([appearance=solid]):host([kind=inverse]){--calcite-internal-chip-close-background-color-hover: var(--calcite-color-transparent-inverse-hover);--calcite-internal-chip-close-background-color-press: var(--calcite-color-transparent-inverse-press);--calcite-internal-chip-close-icon-color: var(--calcite-color-text-inverse);--calcite-internal-chip-close-icon-color-hover: var(--calcite-color-text-inverse)}:host([appearance=solid]):host([kind=brand]) .container,:host([appearance=solid]):host([kind=inverse]) .container{color:var(--calcite-chip-text-color, var(--calcite-color-text-inverse))}:host([appearance=solid]):host([kind=brand]) .close,:host([appearance=solid]):host([kind=inverse]) .close{--calcite-color-focus: var(--calcite-color-text-inverse)}:host([appearance=solid]):host([kind=brand]){--calcite-internal-chip-background-color: var(--calcite-chip-background-color, var(--calcite-color-brand))}:host([appearance=solid]):host([kind=inverse]){--calcite-internal-chip-background-color: var(--calcite-chip-background-color, var(--calcite-color-inverse))}:host([appearance=solid]):host([kind=neutral]){--calcite-internal-chip-background-color: var(--calcite-chip-background-color, var(--calcite-color-foreground-2))}:host([kind=neutral]) .container{color:var(--calcite-chip-text-color, var(--calcite-color-text-1))}:host([selected]) .select-icon{opacity:1}:host([appearance=solid]):host([kind=neutral]){--calcite-internal-chip-selectable-hover-background-color: var(--calcite-color-foreground-3);--calcite-internal-chip-selectable-active-background-color: var(--calcite-color-border-2)}:host([appearance=solid]):host([kind=inverse]){--calcite-internal-chip-selectable-hover-background-color: var(--calcite-color-inverse-hover);--calcite-internal-chip-selectable-active-background-color: var(--calcite-color-inverse-press)}:host([appearance=solid]):host([kind=brand]){--calcite-internal-chip-selectable-hover-background-color: var(--calcite-color-brand-hover);--calcite-internal-chip-selectable-active-background-color: var(--calcite-color-brand-press)}:host([appearance=outline-fill]):host([kind=neutral]){--calcite-internal-chip-selectable-hover-background-color: var(--calcite-color-foreground-2);--calcite-internal-chip-selectable-hover-border-color: var(--calcite-color-border-input);--calcite-internal-chip-selectable-active-background-color: var(--calcite-color-foreground-3);--calcite-internal-chip-selectable-active-border-color: var(--calcite-color-text-3)}:host([appearance=outline-fill]):host([kind=inverse]),:host([appearance=outline-fill]):host([kind=brand]){--calcite-internal-chip-selectable-hover-background-color: var(--calcite-color-foreground-2);--calcite-internal-chip-selectable-active-background-color: var(--calcite-color-foreground-3)}:host([appearance=outline]):host([kind=neutral]){--calcite-internal-chip-selectable-hover-background-color: var(--calcite-color-transparent-hover);--calcite-internal-chip-selectable-hover-border-color: var(--calcite-color-border-input);--calcite-internal-chip-selectable-active-background-color: var(--calcite-color-transparent-press);--calcite-internal-chip-selectable-active-border-color: var(--calcite-color-text-3)}:host([appearance=outline]):host([kind=inverse]),:host([appearance=outline]):host([kind=brand]){--calcite-internal-chip-selectable-hover-background-color: var(--calcite-color-transparent-hover);--calcite-internal-chip-selectable-active-background-color: var(--calcite-color-transparent-press)}:host([scale=s]){--calcite-internal-chip-close-padding: var(--calcite-spacing-none)}:host([scale=s]) .container{--calcite-internal-chip-block-size: var(--calcite-size-sm, 1.5rem) ;--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-font-size: var(--calcite-font-size--2);--calcite-internal-chip-icon-size: var(--calcite-size-xs, 1rem) ;--calcite-internal-chip-icon-space: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-image-size: var(--calcite-spacing-xl, 1.25rem) ;--calcite-internal-chip-title-space: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-close-size: var(--calcite-size-xs, 1rem) }:host([scale=s]) .container:not(.closable).is-circle{--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px);--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-px)}:host([scale=s]) .container.image--slotted:has(.chip-icon),:host([scale=s]) .container.image--slotted.text--slotted,:host([scale=s]) .container.image--slotted.closable{--calcite-internal-chip-image-space-x-end: var(--calcite-spacing-xxs, .25rem) }:host([scale=s]) .container.image--slotted:not(.text--slotted,:has(.chip-icon)),:host([scale=s]) .container.image--slotted:not(.selectable){--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px)}:host([scale=s]) .container.selectable.single:not(.is-circle).image--slotted{--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px)}:host([scale=s]) .container.selectable.single:not(.is-circle).selected{--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-none, 0)}:host([scale=s]) .container.selectable.single:not(.is-circle).selected.image--slotted{--calcite-internal-chip-select-space-x-end: .5rem ;--calcite-internal-chip-select-space-x-start: .125rem }:host([scale=s]) .container.multiple:not(.is-circle){--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-xxs, .25rem) }:host([scale=s]) .container.multiple:not(.is-circle).image--slotted{--calcite-internal-chip-select-space-x-end: .5rem ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px)}:host([scale=s]) .container.multiple:not(.is-circle).image--slotted:not(.text--slotted){--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-xs, .375rem) }:host([scale=m]){--calcite-internal-chip-close-padding: var(--calcite-spacing-xxs)}:host([scale=m]) .container{--calcite-internal-chip-block-size: var(--calcite-size-md, 2rem) ;--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-chip-font-size: var(--calcite-font-size--1);--calcite-internal-chip-icon-size: var(--calcite-size-sm, 1.5rem) ;--calcite-internal-chip-icon-space: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-chip-image-size: var(--calcite-size-sm, 1.5rem) ;--calcite-internal-chip-title-space: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-close-size: var(--calcite-size-sm, 1.5rem) }:host([scale=m]) .container:not(.closable).is-circle{--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-px);--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-px)}:host([scale=m]) .container.image--slotted:not(.is-circle){--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xxs, .25rem) }:host([scale=m]) .container.image--slotted:has(.chip-icon),:host([scale=m]) .container.image--slotted.text--slotted,:host([scale=m]) .container.image--slotted.closable{--calcite-internal-chip-image-space-x-end: var(--calcite-spacing-xs, .375rem) }:host([scale=m]) .container.selectable.single:not(.is-circle).image--slotted{--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xxs, .25rem) }:host([scale=m]) .container.selectable.single:not(.is-circle).selected{--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-px);--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-none, 0)}:host([scale=m]) .container.selectable.single:not(.is-circle).selected.image--slotted{--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-xs, .375rem) }:host([scale=m]) .container.multiple:not(.is-circle){--calcite-internal-chip-select-space-x-end: .125rem ;--calcite-internal-chip-select-space-x-start: .125rem }:host([scale=m]) .container.multiple:not(.is-circle).image--slotted{--calcite-internal-chip-select-space-x-end: .5rem ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-xxs, .25rem) }:host([scale=m]) .container.closable:not(.is-circle){--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-xxs, .25rem) }:host([scale=l]){--calcite-internal-chip-close-padding: var(--calcite-spacing-xxs)}:host([scale=l]) .container{--calcite-internal-chip-block-size: 2.75rem ;--calcite-internal-chip-container-space-x-end: .5rem ;--calcite-internal-chip-container-space-x-start: .5rem ;--calcite-internal-chip-font-size: var(--calcite-font-size-0);--calcite-internal-chip-icon-size: var(--calcite-size-md, 2rem) ;--calcite-internal-chip-icon-space: .5rem ;--calcite-internal-chip-image-size: var(--calcite-size-md, 2rem) ;--calcite-internal-chip-title-space: .5rem ;--calcite-internal-close-size: var(--calcite-size-md, 2rem) }:host([scale=l]) .container:not(.closable).is-circle{--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xxs, .25rem) }:host([scale=l]) .container.image--slotted:not(.is-circle){--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xs, .375rem) }:host([scale=l]) .container.image--slotted:has(.chip-icon),:host([scale=l]) .container.image--slotted.text--slotted,:host([scale=l]) .container.image--slotted.closable{--calcite-internal-chip-image-space-x-end: .5rem }:host([scale=l]) .container.selectable.single:not(.is-circle).image--slotted{--calcite-internal-chip-container-space-x-start: var(--calcite-spacing-xs, .375rem) }:host([scale=l]) .container.selectable.single:not(.is-circle).selected{--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-none, 0)}:host([scale=l]) .container.selectable.single:not(.is-circle).selected.image--slotted{--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-xs, .375rem) ;--calcite-internal-chip-select-space-x-start: .5rem }:host([scale=l]) .container.multiple:not(.is-circle){--calcite-internal-chip-container-space-x-start: .5rem ;--calcite-internal-chip-select-space-x-end: var(--calcite-spacing-xxs, .25rem) ;--calcite-internal-chip-select-space-x-start: var(--calcite-spacing-xxs, .25rem) }:host([scale=l]) .container.multiple:not(.is-circle).image--slotted{--calcite-internal-chip-select-space-x-end: .75rem }:host([scale=l]) .container.closable:not(.is-circle){--calcite-internal-chip-container-space-x-end: var(--calcite-spacing-xs, .375rem) }.container{box-sizing:border-box;display:inline-flex;block-size:100%;max-inline-size:100%;align-items:center;justify-content:center;font-weight:var(--calcite-font-weight-medium);outline-color:transparent;background-color:var(--calcite-internal-chip-background-color);border-color:var(--calcite-internal-chip-border-color);border-radius:var(--calcite-chip-corner-radius, 9999px);border-width:var(--calcite-border-width-sm);border-style:solid;font-size:var(--calcite-internal-chip-font-size, var(--calcite-font-size));padding-inline-start:var(--calcite-internal-chip-container-space-x-start);padding-inline-end:var(--calcite-internal-chip-container-space-x-end);block-size:var(--calcite-internal-chip-block-size, auto);inline-size:var(--calcite-internal-chip-inline-size, auto);min-inline-size:var(--calcite-internal-chip-block-size, auto)}.container:hover .select-icon--active{opacity:var(--calcite-opacity-full, 1)}.container.selectable{cursor:pointer}.container.selectable:hover{background-color:var(--calcite-internal-chip-selectable-hover-background-color);border-color:var(--calcite-internal-chip-selectable-hover-border-color)}.container.selectable:active{background-color:var(--calcite-internal-chip-selectable-active-background-color);border-color:var(--calcite-internal-chip-selectable-active-border-color)}.container:not(.non-interactive):focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.container.text--slotted .title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container:not(.text--slotted) .title,.container:not(.image--slotted) .image-container{display:none}.container.is-circle .chip-icon,.container.is-circle .image-container{padding:var(--calcite-spacing-none, 0)}.title{padding-inline:var(--calcite-internal-chip-title-space)}.image-container{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;pointer-events:none;block-size:var(--calcite-internal-chip-image-size, var(--calcite-spacing-xxl, 1.5rem));inline-size:var(--calcite-internal-chip-image-size, var(--calcite-spacing-xxl, 1.5rem));padding-inline-start:var(--calcite-spacing-none, 0);padding-inline-end:var(--calcite-internal-chip-image-space-x-end, 0)}.chip-icon{position:relative;margin-block:0px;display:inline-flex;transition-timing-function:cubic-bezier(.4,0,.2,1);color:var(--calcite-chip-icon-color, var(--calcite-chip-text-color, var(--calcite-icon-color, var(--calcite-ui-icon-color, currentColor))));padding-inline:var(--calcite-internal-chip-icon-space, var(--calcite-spacing-xs, .375rem))}.select-icon{align-self:center;justify-content:center;align-items:center;display:flex;inset-block-start:-1px;position:absolute;visibility:hidden;inline-size:auto;opacity:0;transition:opacity .15s ease-in-out,inline-size .15s ease-in-out;color:var(--calcite-chip-select-icon-color, currentColor)}.select-icon.select-icon--active{position:relative;visibility:visible;opacity:var(--calcite-opacity-half, .5);color:var(--calcite-chip-select-icon-color-press, var(--calcite-chip-select-icon-color-pressed, var(--calcite-chip-select-icon-color, currentColor)))}.multiple .select-icon{display:flex;align-items:center;justify-content:center}.multiple .select-icon,.single .select-icon--active{padding-inline-start:var(--calcite-internal-chip-select-space-x-start);padding-inline-end:var(--calcite-internal-chip-select-space-x-end);block-size:var(--calcite-internal-chip-icon-size, var(--calcite-spacing-xxl, 1.5rem));inline-size:var(--calcite-internal-chip-icon-size, var(--calcite-spacing-xxl, 1.5rem))}.close{--calcite-action-background-color-hover: var(--calcite-internal-chip-close-background-color-hover);--calcite-action-background-color-press: var(--calcite-internal-chip-close-background-color-press);--calcite-action-corner-radius: var(--calcite-corner-radius-pill);--calcite-action-text-color: var( --calcite-chip-close-icon-color, var(--calcite-close-icon-color, var(--calcite-internal-chip-close-icon-color)) );--calcite-action-text-color-press: var( --calcite-chip-close-icon-color, var(--calcite-close-icon-color, var(--calcite-internal-chip-close-icon-color-hover)) );--calcite-icon-color: var(--calcite-action-text-color);--calcite-internal-action-min-height: unset;--calcite-internal-action-spacing: var(--calcite-internal-chip-close-padding)}slot[name=image]::slotted(*){display:flex;block-size:100%;inline-size:100%;overflow:hidden;border-radius:50%}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
 class Chip extends LitElement {
   constructor() {

package/dist/components/calcite-chip-group/customElement.js

@@ -91,7 +91,7 @@ class ChipGroup extends LitElement {
     event.stopPropagation();
   }
   updateItems(event) {
-    const itemsFromSlot = this.slotRef.value?.assignedElements({ flatten: true }).filter((el) => el?.matches("calcite-chip"));
+    const itemsFromSlot = this.slotRef.value?.assignedElements({ flatten: true }).filter((el) => el?.matches("calcite-chip")) || [];
     this.items = !event ? itemsFromSlot : slotChangeGetAssignedElements(event);
     if (this.items?.length < 1) {
       return;

package/dist/components/calcite-color-picker/customElement.d.ts

@@ -95,7 +95,7 @@ export abstract class ColorPicker extends LitElement {
       value?: string;
   };
   /** Specifies the Unicode numeral system used by the component for localization. */
-  accessor numberingSystem: NumberingSystem;
+  accessor numberingSystem: NumberingSystem | undefined;
   /**
    * When `true`, hides the saved colors section.
    *
@@ -109,7 +109,7 @@ export abstract class ColorPicker extends LitElement {
    */
   accessor scale: Scale;
   /** Specifies the storage ID for colors. */
-  accessor storageId: string;
+  accessor storageId: string | undefined;
   /**
    * The component's value, where the value can be a CSS color string, or a RGB, HSL or HSV object.
    *
@@ -118,7 +118,7 @@ export abstract class ColorPicker extends LitElement {
    * @see [MDN - CSS Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color),
    * @see [ColorValue](https://github.com/Esri/calcite-design-system/blob/dev/packages/components/src/components/color-picker/interfaces.ts#L10).
    */
-  accessor value: ColorValue | null;
+  accessor value: ColorValue | null | undefined;
   /**
    * Sets focus on the component's first focusable element.
    *

package/dist/components/calcite-color-picker/customElement.js

@@ -26,13 +26,11 @@ class ColorPicker extends LitElement {
     this.colorFieldScopeRef = createRef();
     this.direction = useDirection();
     this.hueScopeRef = createRef();
-    this.internalColorUpdateContext = null;
     this.isActiveChannelInputEmpty = false;
     this.mode = CSSColorMode.HEX;
     this.opacityScopeRef = createRef();
     this.resizeObserver = createObserver("resize", (entries) => this.resizeCanvas(entries));
     this.shiftKeyChannelAdjustment = 0;
-    this.upOrDownArrowKeyTracker = null;
     this._valueWasSet = false;
     this.messages = useT9n({ blocking: true });
     this.captureColorFieldColor = (x, y, skipEqual = true) => {
@@ -94,7 +92,7 @@ class ColorPicker extends LitElement {
         return;
       }
       const previouslyDragging = this.activeCanvasInfo;
-      this.activeCanvasInfo = null;
+      this.activeCanvasInfo = void 0;
       this.drawColorControls();
       if (previouslyDragging) {
         this.calciteColorPickerChange.emit();
@@ -168,8 +166,9 @@ class ColorPicker extends LitElement {
   }
   set value(value) {
     const oldValue = this._value;
-    this._value = value;
-    this.handleValueChange(value, oldValue);
+    const effectiveValue = value || void 0;
+    this._value = effectiveValue;
+    this.handleValueChange(effectiveValue, oldValue);
     this._valueWasSet = true;
   }
   async setFocus(options) {
@@ -184,7 +183,8 @@ class ColorPicker extends LitElement {
     if (!this._valueWasSet) {
       this._value ??= normalizeHex(hexify(DEFAULT_COLOR, this.alphaChannel));
     }
-    const { clearable, color, format, value } = this;
+    const { clearable, color, format } = this;
+    const value = this.value;
     const willSetNoColor = clearable && !value;
     const parsedMode = parseMode(value);
     const valueIsCompatible = willSetNoColor || format === "auto" && parsedMode || format === parsedMode;
@@ -197,8 +197,11 @@ class ColorPicker extends LitElement {
     this.updateStaticDimensions(this.scale);
     this.updateDynamicDimensions(STATIC_DIMENSIONS[this.scale].minWidth);
     const storageKey = `${DEFAULT_STORAGE_KEY_PREFIX}${this.storageId}`;
-    if (this.storageId && localStorage.getItem(storageKey)) {
-      this.savedColors = JSON.parse(localStorage.getItem(storageKey));
+    if (this.storageId) {
+      const storedItem = localStorage.getItem(storageKey);
+      if (storedItem) {
+        this.savedColors = JSON.parse(storedItem);
+      }
     }
   }
   willUpdate(changes) {
@@ -263,7 +266,7 @@ class ColorPicker extends LitElement {
         return;
       }
       modeChanged = this.mode !== nextMode;
-      this.setMode(nextMode, this.internalColorUpdateContext === null);
+      this.setMode(nextMode, this.internalColorUpdateContext === void 0);
     }
     const dragging = this.activeCanvasInfo;
     if (this.internalColorUpdateContext === "initial") {
@@ -323,7 +326,7 @@ class ColorPicker extends LitElement {
     const input = event.target;
     const hex = input.value;
     if (clearable && !hex) {
-      this.internalColorSet(null);
+      this.internalColorSet(void 0);
       return;
     }
     const normalizedHex = color && normalizeHex(hexify(color, alphaCompatible(this.mode)));
@@ -344,7 +347,7 @@ class ColorPicker extends LitElement {
     if (!input.value) {
       inputValue = "";
       this.isActiveChannelInputEmpty = true;
-      this.upOrDownArrowKeyTracker = null;
+      this.upOrDownArrowKeyTracker = void 0;
     } else {
       const value = Number(input.value);
       const adjustedValue = value + this.shiftKeyChannelAdjustment;
@@ -364,7 +367,7 @@ class ColorPicker extends LitElement {
     const channels = [...this.channels];
     const restoreValueDueToEmptyInput = !input.value && !this.clearable;
     if (restoreValueDueToEmptyInput) {
-      input.value = channels[channelIndex]?.toString();
+      input.value = channels[channelIndex]?.toString() ?? "";
     }
   }
   handleChannelFocus(event) {
@@ -399,18 +402,18 @@ class ColorPicker extends LitElement {
   handleChannelChange(event) {
     const input = event.currentTarget;
     const channelIndex = Number(input.getAttribute("data-channel-index"));
-    const channels = [...this.channels];
     const shouldClearChannels = this.clearable && !input.value;
     if (shouldClearChannels) {
-      this.channels = [null, null, null, null];
-      this.internalColorSet(null);
+      this.channels = [void 0, void 0, void 0, void 0];
+      this.internalColorSet(void 0);
       return;
     }
+    const channels = [...this.channels];
     const isAlphaChannel = channelIndex === 3;
     if (this.isActiveChannelInputEmpty && this.upOrDownArrowKeyTracker) {
       input.value = this.upOrDownArrowKeyTracker === "up" ? (channels[channelIndex] + 1 <= this.getChannelInputLimit(channelIndex) ? channels[channelIndex] + 1 : this.getChannelInputLimit(channelIndex)).toString() : (channels[channelIndex] - 1 >= 0 ? channels[channelIndex] - 1 : 0).toString();
       this.isActiveChannelInputEmpty = false;
-      this.upOrDownArrowKeyTracker = null;
+      this.upOrDownArrowKeyTracker = void 0;
     }
     const value = input.value ? Number(input.value) : channels[channelIndex];
     channels[channelIndex] = isAlphaChannel ? opacityToAlpha(value) : value;
@@ -497,11 +500,11 @@ class ColorPicker extends LitElement {
     this.internalColorUpdateContext = context;
     this.color = color;
     this.value = this.toValue(color);
-    this.internalColorUpdateContext = null;
+    this.internalColorUpdateContext = void 0;
   }
   toValue(color, format = this.mode) {
     if (!color) {
-      return null;
+      return void 0;
     }
     const hexMode = "hex";
     if (format.includes(hexMode)) {
@@ -814,7 +817,7 @@ class ColorPicker extends LitElement {
     this.internalColorSet(Color(channels, this.channelMode));
   }
   updateChannelsFromColor(color) {
-    this.channels = color ? this.toChannels(color) : [null, null, null, null];
+    this.channels = color ? this.toChannels(color) : [void 0, void 0, void 0, void 0];
   }
   toChannels(color) {
     const { channelMode } = this;
@@ -830,7 +833,7 @@ class ColorPicker extends LitElement {
   render() {
     const { channelsDisabled, color, colorFieldScopeLeft, colorFieldScopeTop, staticDimensions: { thumb: { radius: thumbRadius } }, fieldDisabled, hexDisabled, hueScopeLeft, messages, alphaChannel, opacityScopeLeft, savedColors, savedDisabled, scale, scopeOrientation } = this;
     const sliderWidth = this.effectiveSliderWidth;
-    const selectedColorInHex = color ? hexify(color, alphaChannel) : null;
+    const selectedColorInHex = color ? hexify(color, alphaChannel) : void 0;
     const hueTop = thumbRadius;
     const hueLeft = hueScopeLeft ?? sliderWidth * DEFAULT_COLOR.hue() / HSV_LIMITS.h;
     const opacityTop = thumbRadius;
@@ -879,7 +882,7 @@ class ColorPicker extends LitElement {
     })}</div></calcite-tab>`);
   }
   renderChannel(value, index, ariaLabel, direction, suffix) {
-    return keyed(index, html`<calcite-input-number class=${safeClassMap(CSS.channel)} data-channel-index=${index ?? nothing} dir=${direction ?? nothing} .label=${ariaLabel} lang=${this.messages._lang ?? nothing} number-button-type=none .numberingSystem=${this.numberingSystem} @keydown=${this.handleKeyDown} @calciteInputNumberChange=${this.handleChannelChange} @calciteInputNumberInput=${this.handleChannelInput} @calciteInternalInputNumberBlur=${this.handleChannelBlur} @calciteInternalInputNumberFocus=${this.handleChannelFocus} .scale=${this.scale === "l" ? "m" : "s"} style=${safeStyleMap({
+    return keyed(index, html`<calcite-input-number class=${safeClassMap(CSS.channel)} data-channel-index=${index ?? nothing} dir=${direction ?? nothing} .label=${ariaLabel} lang=${this.messages._lang ?? nothing} number-button-type=none .numberingSystem=${this.numberingSystem} @calciteInputNumberChange=${this.handleChannelChange} @calciteInputNumberInput=${this.handleChannelInput} @calciteInternalInputNumberBlur=${this.handleChannelBlur} @calciteInternalInputNumberFocus=${this.handleChannelFocus} @keydown=${this.handleKeyDown} .scale=${this.scale === "l" ? "m" : "s"} style=${safeStyleMap({
       marginLeft: index > 0 && !(this.scale === "s" && this.alphaChannel && index === 3) ? "-1px" : ""
     })} .suffixText=${suffix} .value=${value?.toString()}></calcite-input-number>`);
   }

package/dist/components/calcite-color-picker-hex-input/customElement.d.ts

@@ -34,7 +34,7 @@ export abstract class ColorPickerHexInput extends LitElement {
    */
   accessor scale: Scale;
   /** The hex value. */
-  accessor value: string;
+  accessor value: string | undefined;
   /**
    * Sets focus on the component.
    *

package/dist/components/calcite-color-picker-hex-input/customElement.js

@@ -39,7 +39,7 @@ class ColorPickerHexInput extends LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.previousNonNullValue = this.value;
+    this.previousDefinedValue = this.value;
     const { allowEmpty, alphaChannel, value } = this;
     if (value) {
       const normalized = normalizeHex(value, alphaChannel);
@@ -144,7 +144,7 @@ class ColorPickerHexInput extends LitElement {
     const oldValue = this.value;
     if (isNudgeKey) {
       if (!value) {
-        this.internalSetValue(this.previousNonNullValue, oldValue);
+        this.internalSetValue(this.previousDefinedValue, oldValue);
         event.preventDefault();
         return;
       }
@@ -162,7 +162,7 @@ class ColorPickerHexInput extends LitElement {
     }
   }
   onHexInputPaste(event) {
-    const hex = event.clipboardData.getData("text");
+    const hex = event.clipboardData?.getData("text");
     if (isValidHex(hex, this.alphaChannel) && isLonghandHex(hex, this.alphaChannel)) {
       event.preventDefault();
       this.hexInputRef.value.value = hex.slice(1);
@@ -179,7 +179,7 @@ class ColorPickerHexInput extends LitElement {
         const normalizedLonghand = normalizeHex(hexify(nextColor, alphaChannel), alphaChannel);
         const changed = !currentColor || normalizedLonghand !== normalizeHex(hexify(currentColor, alphaChannel), alphaChannel);
         this.internalColor = nextColor;
-        this.previousNonNullValue = normalizedLonghand;
+        this.previousDefinedValue = normalizedLonghand;
         this.value = normalizedLonghand;
         if (changed && emit) {
           this.calciteColorPickerHexInputChange.emit();
@@ -223,7 +223,7 @@ class ColorPickerHexInput extends LitElement {
     const hexInputValue = this.formatHexForInternalInput(value);
     const opacityInputValue = this.formatOpacityForInternalInput(internalColor);
     const inputScale = scale === "l" ? "m" : "s";
-    return html`<div class=${safeClassMap(CSS.container)}><calcite-input-text class=${safeClassMap(CSS.hexInput)} .label=${messages?.hex || hexLabel} .maxLength=${this.alphaChannel ? 8 : 6} @keydown=${this.onInputKeyDown} @paste=${this.onHexInputPaste} @calciteInputTextChange=${this.onHexInputChange} @calciteInputTextInput=${this.onHexInputInput} @calciteInternalInputTextBlur=${this.onHexInputBlur} @calciteInternalInputTextFocus=${this.onInputFocus} prefix-text=# .scale=${inputScale} .value=${hexInputValue} ${ref(this.hexInputRef)}></calcite-input-text>${alphaChannel ? keyed("opacity-input", html`<calcite-input-number class=${safeClassMap(CSS.opacityInput)} .label=${messages?.opacity} .max=${OPACITY_LIMITS.max} max-length=3 .min=${OPACITY_LIMITS.min} number-button-type=none .numberingSystem=${this.numberingSystem} @keydown=${this.onInputKeyDown} @calciteInputNumberInput=${this.onOpacityInputInput} @calciteInternalInputNumberBlur=${this.onOpacityInputBlur} @calciteInternalInputNumberFocus=${this.onInputFocus} .scale=${inputScale} suffix-text=% .value=${opacityInputValue} ${ref(this.opacityInputRef)}></calcite-input-number>`) : null}</div>`;
+    return html`<div class=${safeClassMap(CSS.container)}><calcite-input-text class=${safeClassMap(CSS.hexInput)} .label=${messages?.hex || hexLabel} .maxLength=${this.alphaChannel ? 8 : 6} @calciteInputTextChange=${this.onHexInputChange} @calciteInputTextInput=${this.onHexInputInput} @calciteInternalInputTextBlur=${this.onHexInputBlur} @calciteInternalInputTextFocus=${this.onInputFocus} @keydown=${this.onInputKeyDown} @paste=${this.onHexInputPaste} prefix-text=# .scale=${inputScale} .value=${hexInputValue} ${ref(this.hexInputRef)}></calcite-input-text>${alphaChannel ? keyed("opacity-input", html`<calcite-input-number class=${safeClassMap(CSS.opacityInput)} .label=${messages?.opacity} .max=${OPACITY_LIMITS.max} max-length=3 .min=${OPACITY_LIMITS.min} number-button-type=none .numberingSystem=${this.numberingSystem} @calciteInputNumberInput=${this.onOpacityInputInput} @calciteInternalInputNumberBlur=${this.onOpacityInputBlur} @calciteInternalInputNumberFocus=${this.onInputFocus} @keydown=${this.onInputKeyDown} .scale=${inputScale} suffix-text=% .value=${opacityInputValue} ${ref(this.opacityInputRef)}></calcite-input-number>`) : null}</div>`;
   }
 }
 customElement("calcite-color-picker-hex-input", ColorPickerHexInput);

package/dist/components/calcite-color-picker-swatch/customElement.d.ts

@@ -15,7 +15,7 @@ export abstract class ColorPickerSwatch extends LitElement {
    *
    * @see [MDN - Color CSS data type](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).
    */
-  accessor color: string | null;
+  accessor color: string | undefined;
   /**
    * Specifies the size of the component.
    *

package/dist/components/calcite-color-picker-swatch/customElement.js

@@ -46,7 +46,7 @@ class ColorPickerSwatch extends LitElement {
     }
   }
   handleColorChange(color) {
-    this.internalColor = color ? Color(color) : null;
+    this.internalColor = color ? Color(color) : void 0;
   }
   render() {
     const isEmpty = !this.internalColor;

package/dist/components/calcite-combobox/customElement.js

@@ -27,8 +27,8 @@ import { u as useCancelable } from "../../chunks/useCancelable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useTopLayer } from "../../chunks/useTopLayer.js";
 import { u as useForm } from "../../chunks/useForm.js";
-import { i as isChip } from "../../chunks/resources5.js";
-import { I as IDS, C as CSS, a as ComboboxItemSelector, b as ComboboxItemGroupSelector, c as ICONS } from "../../chunks/resources6.js";
+import { i as isChip } from "../../chunks/resources6.js";
+import { I as IDS, C as CSS, a as ComboboxItemSelector, b as ComboboxItemGroupSelector, c as ICONS } from "../../chunks/resources7.js";
 import { h as hasActiveChildren, i as isSingleLike, o as orderValuesByPrevious, a as orderByPrevious, g as getLabel, b as getItemAncestors, c as getItemChildren } from "../../chunks/utils2.js";
 const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:block}:host([scale=s]){font-size:var(--calcite-font-size-relative-sm);--calcite-internal-combobox-spacing-unit-l: .5rem;--calcite-internal-combobox-spacing-unit-s: .25rem;--calcite-internal-combobox-padding-inline-end: var(--calcite-space-2xs);--calcite-internal-combobox-no-matches-spacing-unit-s: .25rem;--calcite-combobox-input-height: 1rem;--calcite-internal-combobox-input-margin-block: calc(.25rem - 1px) ;--calcite-internal-close-size: 1rem}:host([scale=m]){font-size:var(--calcite-font-size-relative-base);--calcite-internal-combobox-spacing-unit-l: .75rem;--calcite-internal-combobox-spacing-unit-s: .5rem;--calcite-internal-combobox-padding-inline-end: var(--calcite-space-sm);--calcite-internal-combobox-no-matches-spacing-unit-s: .375rem;--calcite-combobox-input-height: 1rem;--calcite-internal-combobox-input-margin-block: calc(.5rem - 1px) ;--calcite-internal-close-size: 1.5rem}:host([scale=l]){font-size:var(--calcite-font-size-relative-md);--calcite-internal-combobox-spacing-unit-l: 1rem;--calcite-internal-combobox-spacing-unit-s: .75rem;--calcite-internal-combobox-padding-inline-end: var(--calcite-space-sm-plus);--calcite-internal-combobox-no-matches-spacing-unit-s: var(--calcite-space-sm-plus);--calcite-combobox-input-height: 1.5rem;--calcite-internal-combobox-input-margin-block: calc(var(--calcite-space-sm-plus) - 1px);--calcite-internal-close-size: 2rem}.wrapper{display:flex;border-width:1px;border-style:solid;outline-color:transparent;padding-block:calc(var(--calcite-internal-combobox-spacing-unit-s) / 4);padding-inline:var(--calcite-internal-combobox-spacing-unit-l) var(--calcite-internal-combobox-padding-inline-end);background-color:var(--calcite-combobox-input-background-color, var(--calcite-color-foreground-1));color:var(--calcite-combobox-input-text-color, var(--calcite-color-text-1));border-color:var(--calcite-combobox-input-border-color, var(--calcite-color-border-input))}.wrapper:hover .icon{color:var(--calcite-combobox-icon-color-hover, var(--calcite-color-text-1))}:host(:focus-within) .wrapper,.wrapper--active{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host([read-only]) .wrapper{background-color:var(--calcite-color-background)}:host([read-only]) .label{font-weight:var(--calcite-font-weight-medium)}:host([status=invalid]) .wrapper{border-color:var(--calcite-color-status-danger)}:host([status=invalid]:focus-within) .wrapper{outline:var(--calcite-border-width-md) solid var(--calcite-color-status-danger);outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.wrapper--single{padding-block:0;padding-inline:var(--calcite-internal-combobox-spacing-unit-l) var(--calcite-internal-combobox-padding-inline-end);cursor:pointer;flex-wrap:nowrap}.grid-input{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0;gap:var(--calcite-internal-combobox-spacing-unit-s);margin-inline-end:var(--calcite-internal-combobox-spacing-unit-s)}.grid-input.selection-display--fit,.grid-input.selection-display--single{flex-wrap:nowrap;overflow:hidden}.input{flex-grow:1;appearance:none;overflow:hidden;text-overflow:ellipsis;border-style:none;background-color:transparent;padding:0;font-family:inherit;color:var(--calcite-color-text-1);font-size:inherit;block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height);inline-size:100%;margin-block-end:var(--calcite-internal-combobox-spacing-unit-s);min-inline-size:4.8125rem}.input:focus{outline:2px solid transparent;outline-offset:2px}.input:placeholder-shown{text-overflow:ellipsis}.input--single{padding:0;margin-block:var(--calcite-internal-combobox-input-margin-block)}.wrapper--active .input-single{cursor:text}.input--hidden{pointer-events:none;width:0px;min-width:0px;opacity:0}.input--icon{padding-block:0;padding-inline:var(--calcite-internal-combobox-spacing-unit-l)}.placeholder-icon{color:var(--calcite-combobox-icon-color, var(--calcite-color-text-3))}.input-wrap{display:flex;flex-grow:1;align-items:center}.input-wrap--single{flex:1 1 0%;overflow:hidden}.label{pointer-events:none;max-width:100%;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0;font-weight:var(--calcite-font-weight-normal);block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height)}.label--icon{padding-inline:var(--calcite-internal-combobox-spacing-unit-l)}.icon-end,.icon-start{display:flex;cursor:pointer;align-items:center}.icon-end{flex:none}.icon-end .icon{color:var(--calcite-combobox-icon-color, var(--calcite-color-text-3))}.floating-ui-container{inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}@starting-style{.floating-ui-container{opacity:0;inset-block-start:0;left:0}}:host([top-layer-disabled]) .floating-ui-container{--calcite-floating-ui-z-index: var(--calcite-z-index-dropdown)}.floating-ui-container[popover]{padding:0;margin:0;border:none;background-color:transparent;overflow:visible;display:none}.floating-ui-container:popover-open{display:block}.floating-ui-container .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.floating-ui-container .calcite-floating-ui-anim{box-shadow:var(--calcite-shadow-md)}@media(forced-colors:active){.wrapper,.floating-ui-container{border:1px solid canvasText}}.screen-readers-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.list-container{max-height:45vh;overflow-y:auto;inline-size:var(--calcite-dropdown-width, 100%);background-color:var(--calcite-combobox-background-color, var(--calcite-color-foreground-1))}.list{margin:0;display:block;padding:0;line-height:var(--calcite-font-line-height-relative-snug)}.list--hide{height:0px;overflow:hidden}calcite-chip{--calcite-animation-timing: 0}.chip{margin-block:calc(var(--calcite-internal-combobox-spacing-unit-s) / 4);max-inline-size:100%}.chip--invisible{visibility:hidden;position:absolute}.item{display:block}.select-all{background-color:var(--calcite-combobox-item-background-color-active, var(--calcite-color-foreground-1));border-block-end-color:var(--calcite-combobox-divider-color, var(--calcite-combobox-item-border-color, var(--calcite-color-border-3)));border-block-end-style:solid;border-block-end-width:var(--calcite-border-width-sm);inset-block-start:0;position:sticky;z-index:var(--calcite-z-index-sticky)}.no-matches{padding-block:var(--calcite-internal-combobox-no-matches-spacing-unit-s);padding-inline:var(--calcite-internal-combobox-spacing-unit-l);color:var(--calcite-combobox-input-text-color, var(--calcite-color-text-1));background:var(--calcite-combobox-background-color, var(--calcite-color-foreground-1));cursor:pointer}.no-matches-placeholder{color:var(--calcite-combobox-icon-color, var(--calcite-color-text-3));cursor:default}.disabled{opacity:.5}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.clear-button--container{display:flex;cursor:pointer;align-items:center}.clear-button--container:hover calcite-action{--calcite-action-background-color: var(--calcite-clear-button-background-color-hover, var(--calcite-color-foreground-3));--calcite-action-text-color: var(--calcite-clear-button-icon-color-hover, var(--calcite-color-text-1))}.clear-button--container:active calcite-action{--calcite-action-background-color: var(--calcite-clear-button-background-color-press, var(--calcite-color-border-2));--calcite-action-text-color: var(--calcite-clear-button-icon-color-press, var(--calcite-color-text-1))}.clear-button--container calcite-action{--calcite-internal-action-height: 100%;--calcite-internal-action-padding-inline: var(--calcite-spacing-none);--calcite-internal-action-padding-block: var(--calcite-spacing-none);--calcite-action-background-color: var(--calcite-clear-button-background-color, var(--calcite-color-foreground-2));--calcite-action-text-color: var(--calcite-clear-button-icon-color)}.clear-button--container calcite-action:hover{--calcite-action-background-color-hover: var(--calcite-clear-button-background-color-hover, var(--calcite-color-foreground-3));--calcite-action-text-color-press: var(--calcite-clear-button-icon-color-hover)}.clear-button--container calcite-action:active{--calcite-action-background-color-press: var(--calcite-clear-button-background-color-press, var(--calcite-color-border-2));--calcite-action-text-color-press: var(--calcite-clear-button-icon-color-press)}:host([scale=s]) .clear-button--container{padding:var(--calcite-spacing-xxs)}:host([scale=m]) .clear-button--container{padding:var(--calcite-spacing-xxs);padding-inline-end:var(--calcite-space-sm)}:host([scale=l]) .clear-button--container{padding-inline-end:var(--calcite-spacing-sm-plus)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}.text-match{background-color:transparent;color:inherit;font-weight:var(--calcite-font-weight-bold)}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}::placeholder{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-input-placeholder-text-color, var(--calcite-color-text-3))}`;
 class Combobox extends LitElement {
@@ -535,9 +535,9 @@ class Combobox extends LitElement {
         break;
       case " ":
         if (!this.textInputRef.value.value && !event.defaultPrevented) {
-          if (!this.open) {
+          if (!this.open && this.keyboardNavItems.length) {
             this.open = true;
-            this.shiftActiveItemIndex(1);
+            this.ensureRecentSelectedItemIsActive();
           }
           event.preventDefault();
         }
@@ -620,7 +620,7 @@ class Combobox extends LitElement {
     this.topLayer.show();
     this.reposition();
     this.calciteComboboxBeforeOpen.emit();
-    setTimeout(() => this.scrollToActiveOrSelectedItem(true), 0);
+    setTimeout(() => this.scrollToActiveOrSelectedItem(this.activeItemIndex < 0), 0);
   }
   onOpen() {
     this.calciteComboboxOpen.emit();
@@ -669,9 +669,14 @@ class Combobox extends LitElement {
     this.ensureRecentSelectedItemIsActive();
   }
   ensureRecentSelectedItemIsActive() {
-    const { selectedItems } = this;
-    const targetIndex = selectedItems.length === 0 ? 0 : this.items.indexOf(selectedItems[selectedItems.length - 1]);
-    this.updateActiveItemIndex(targetIndex);
+    const { activeItemIndex, selectedItems, keyboardNavItems } = this;
+    if (activeItemIndex > -1 && keyboardNavItems[activeItemIndex]) {
+      this.updateActiveItemIndex(activeItemIndex);
+      return;
+    }
+    const selectedItem = selectedItems[selectedItems.length - 1];
+    const targetIndex = selectedItem ? keyboardNavItems.indexOf(selectedItem) : keyboardNavItems.length ? 0 : -1;
+    this.updateActiveItemIndex(targetIndex > -1 ? targetIndex : keyboardNavItems.length ? 0 : -1);
   }
   hideChip(chipEl) {
     chipEl.classList.add(CSS.chipInvisible);

package/dist/components/calcite-date-picker/customElement.js

@@ -30,7 +30,7 @@ class DatePicker extends LitElement {
     this.listen("keydown", this.keyDownHandler);
   }
   static {
-    this.properties = { activeEndDate: [16, {}, { state: true }], activeStartDate: [16, {}, { state: true }], dateTimeFormat: [16, {}, { state: true }], endAsDate: [16, {}, { state: true }], hoverRange: [16, {}, { state: true }], localeData: [16, {}, { state: true }], startAsDate: [16, {}, { state: true }], activeDate: [0, {}, { attribute: false }], activeRange: [3, {}, { reflect: true }], calendars: [11, {}, { type: Number, reflect: true }], headingLevel: [11, {}, { type: Number, reflect: true }], layout: [3, {}, { reflect: true }], max: [3, {}, { reflect: true }], maxAsDate: [0, {}, { attribute: false }], messageOverrides: [0, {}, { attribute: false }], min: [3, {}, { reflect: true }], minAsDate: [0, {}, { attribute: false }], monthStyle: 1, numberingSystem: [3, {}, { reflect: true }], proximitySelectionDisabled: [7, {}, { reflect: true, type: Boolean }], range: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], value: 1, valueAsDate: [0, {}, { attribute: false }] };
+    this.properties = { activeEndDate: [16, {}, { state: true }], activeStartDate: [16, {}, { state: true }], dateTimeFormat: [16, {}, { state: true }], hoverRange: [16, {}, { state: true }], localeData: [16, {}, { state: true }], activeDate: [0, {}, { attribute: false }], activeRange: [3, {}, { reflect: true }], calendars: [11, {}, { type: Number, reflect: true }], headingLevel: [11, {}, { type: Number, reflect: true }], layout: [3, {}, { reflect: true }], max: [3, {}, { reflect: true }], maxAsDate: [0, {}, { attribute: false }], messageOverrides: [0, {}, { attribute: false }], min: [3, {}, { reflect: true }], minAsDate: [0, {}, { attribute: false }], monthStyle: 1, numberingSystem: [3, {}, { reflect: true }], proximitySelectionDisabled: [7, {}, { reflect: true, type: Boolean }], range: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], value: 1, valueAsDate: [0, {}, { attribute: false }] };
   }
   static {
     this.styles = styles;

package/dist/components/calcite-date-picker-day/customElement.js

@@ -36,7 +36,7 @@ class DatePickerDay extends LitElement {
     this.listen("keydown", this.keyDownHandler);
   }
   static {
-    this.properties = { active: [7, {}, { reflect: true, type: Boolean }], currentMonth: [7, {}, { reflect: true, type: Boolean }], dateTimeFormat: [0, {}, { attribute: false }], day: [9, {}, { type: Number }], disabled: [7, {}, { reflect: true, type: Boolean }], endOfRange: [7, {}, { reflect: true, type: Boolean }], highlighted: [7, {}, { reflect: true, type: Boolean }], range: [7, {}, { reflect: true, type: Boolean }], rangeEdge: [3, {}, { reflect: true }], rangeHover: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], startOfRange: [7, {}, { reflect: true, type: Boolean }], value: [0, {}, { attribute: false }] };
+    this.properties = { active: [7, {}, { reflect: true, type: Boolean }], currentMonth: [7, {}, { reflect: true, type: Boolean }], dateTimeFormat: [0, {}, { attribute: false }], day: [9, {}, { type: Number }], disabled: [7, {}, { reflect: true, type: Boolean }], endOfRange: [7, {}, { reflect: true, type: Boolean }], highlighted: [7, {}, { reflect: true, type: Boolean }], range: [7, {}, { reflect: true, type: Boolean }], rangeHover: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], startOfRange: [7, {}, { reflect: true, type: Boolean }], value: [0, {}, { attribute: false }] };
   }
   static {
     this.styles = styles;

package/dist/components/calcite-date-picker-month/customElement.js

@@ -11,10 +11,8 @@ const CSS = {
   calendarStart: "calendar--start",
   currentDay: "current-day",
   dayContainer: "day-container",
-  insideRangeHover: "inside-range--hover",
   month: "month",
   noncurrent: "noncurrent",
-  outsideRangeHover: "outside-range--hover",
   weekDays: "week-days",
   weekHeader: "week-header",
   weekHeaderContainer: "week-header-container"
@@ -246,15 +244,12 @@ class DatePickerMonth extends LitElement {
     let month = this.activeDate.getMonth();
     const nextMonth2 = month + 1;
     month = position === "end" ? nextMonth2 : month;
-    let dayInWeek = 0;
-    const getDayInWeek = () => dayInWeek++ % 7;
     const year = this.activeDate.getFullYear();
     const days = [
       ...prevMonthDays.map((day) => {
         return {
           active: false,
           day,
-          dayInWeek: getDayInWeek(),
           date: new Date(year, month - 1, day)
         };
       }),
@@ -267,7 +262,6 @@ class DatePickerMonth extends LitElement {
           currentMonth: true,
           currentDay: isCurrentDay,
           day,
-          dayInWeek: getDayInWeek(),
           date
         };
       }),
@@ -275,7 +269,6 @@ class DatePickerMonth extends LitElement {
         return {
           active: false,
           day,
-          dayInWeek: getDayInWeek(),
           date: new Date(year, nextMonth2, day)
         };
       })
@@ -326,14 +319,12 @@ class DatePickerMonth extends LitElement {
     const nextMonthDays = this.getDays(endCalendarPrevMonDays, endCalendarCurrMonDays, endCalendarNextMonDays, "end");
     return html`<div class=${safeClassMap({ [CSS.calendarContainer]: true })} role=grid>${this.renderCalendar(adjustedWeekDays, days)}${this.range && this.calendars === 2 && this.renderCalendar(adjustedWeekDays, nextMonthDays, true) || ""}</div>`;
   }
-  renderDateDay({ active, currentMonth, currentDay, date, day, dayInWeek }, key) {
+  renderDateDay({ active, currentMonth, currentDay, date, day }, key) {
     const isDateInRange = inRange(date, this.min, this.max);
     return keyed(key, html`<div class=${safeClassMap({ [CSS.dayContainer]: true })} role=gridcell><calcite-date-picker-day .active=${active} class=${safeClassMap({
       [CSS.currentDay]: currentDay,
-      [CSS.insideRangeHover]: this.isHoverInRange(),
-      [CSS.outsideRangeHover]: !this.isHoverInRange(),
       [CSS.noncurrent]: this.range && this.calendars === 2 && !currentMonth
-    })} .currentMonth=${currentMonth} .dateTimeFormat=${this.dateTimeFormat} .day=${day} .disabled=${!isDateInRange} .endOfRange=${this.isEndOfRange(date)} .highlighted=${this.betweenSelectedRange(date)} @calciteInternalDayHover=${this.dayHover} @calciteInternalDaySelect=${this.daySelect} .range=${!!this.startDate && !!this.endDate && !sameDate(this.startDate, this.endDate)} .rangeEdge=${dayInWeek === 0 ? "start" : dayInWeek === 6 ? "end" : void 0} .rangeHover=${isDateInRange && this.isRangeHover(date)} .scale=${this.scale} .selected=${this.isSelected(date)} .startOfRange=${this.isStartOfRange(date)} .value=${date} ${ref(this.storeDayRef)}></calcite-date-picker-day></div>`);
+    })} .currentMonth=${currentMonth} .dateTimeFormat=${this.dateTimeFormat} .day=${day} .disabled=${!isDateInRange} .endOfRange=${this.isEndOfRange(date)} .highlighted=${this.betweenSelectedRange(date)} @calciteInternalDayHover=${this.dayHover} @calciteInternalDaySelect=${this.daySelect} .range=${!!this.startDate && !!this.endDate && !sameDate(this.startDate, this.endDate)} .rangeHover=${isDateInRange && this.isRangeHover(date)} .scale=${this.scale} .selected=${this.isSelected(date)} .startOfRange=${this.isStartOfRange(date)} .value=${date} ${ref(this.storeDayRef)}></calcite-date-picker-day></div>`);
   }
   renderCalendar(weekDays, days, isEndCalendar = false) {
     return html`<div class=${safeClassMap({

package/dist/components/calcite-dialog/customElement.js

@@ -9,7 +9,7 @@ import { g as getStylePixelValue } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { g as getDimensionClass } from "../../chunks/dynamicClasses.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
-import { S as SLOTS$1 } from "../../chunks/resources7.js";
+import { S as SLOTS$1 } from "../../chunks/resources8.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useFocusTrap } from "../../chunks/useFocusTrap.js";
 import { u as usePreventDocumentScroll } from "../../chunks/usePreventDocumentScroll.js";
@@ -158,11 +158,11 @@ class Dialog extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
-    this.setupInteractions();
+    this.setUpInteractions();
   }
   willUpdate(changes) {
     if (changes.has("open") && (this.hasUpdated || this.open !== false) || changes.has("placement") && (this.hasUpdated || this.placement !== "center") || changes.has("resizable") && (this.hasUpdated || this.resizable !== false) || changes.has("dragEnabled") && (this.hasUpdated || this.dragEnabled !== false)) {
-      this.setupInteractions();
+      this.setUpInteractions();
     }
     if (changes.has("messages") || changes.has("dragEnabled") && (this.hasUpdated || this.dragEnabled !== false) || changes.has("resizable") && (this.hasUpdated || this.resizable !== false)) {
       this.updateAssistiveText();
@@ -175,7 +175,7 @@ class Dialog extends LitElement {
     super.disconnectedCallback();
     this.mutationObserver?.disconnect();
     this.embedded = false;
-    this.cleanupInteractions();
+    this.cleanUpInteractions();
   }
   focusTrapDisabledOverride() {
     return !this.modal && this.focusTrapDisabled;
@@ -335,7 +335,7 @@ class Dialog extends LitElement {
     const translateY = Math.round(y + top + bottom);
     this.transitionEl.style.transform = translateX || translateY ? `translate(${translateX}px, ${translateY}px)` : null;
   }
-  cleanupInteractions() {
+  cleanUpInteractions() {
     this.interaction?.unset();
     this.updateSizeInternal({
       inline: null,
@@ -345,8 +345,8 @@ class Dialog extends LitElement {
     this.resizePosition = { ...initialResizePosition };
     this.updateTransform();
   }
-  async setupInteractions() {
-    this.cleanupInteractions();
+  async setUpInteractions() {
+    this.cleanUpInteractions();
     const { el, transitionEl, resizable, dragEnabled, resizePosition, dragPosition } = this;
     if (!transitionEl || !this.open) {
       return;
@@ -447,7 +447,7 @@ class Dialog extends LitElement {
       return;
     }
     this.transitionEl = el;
-    this.setupInteractions();
+    this.setUpInteractions();
   }
   handleInternalPanelScroll(event) {
     if (event.target !== this.panelRef.value) {

package/dist/components/calcite-dropdown-group/customElement.js

@@ -3,7 +3,7 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { c as createObserver } from "../../chunks/observers.js";
-import { C as CSS$1 } from "../../chunks/resources8.js";
+import { C as CSS$1 } from "../../chunks/resources9.js";
 const CSS = {
   title: "title",
   firstTitle: "first-title",

package/dist/components/calcite-dropdown-item/customElement.js

@@ -7,7 +7,7 @@ import { t as toAriaBoolean } from "../../chunks/aria.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
-import { C as CSS, I as ICONS } from "../../chunks/resources8.js";
+import { C as CSS, I as ICONS } from "../../chunks/resources9.js";
 const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:flex;flex-grow:1;align-items:center;outline:2px solid transparent;outline-offset:2px}.container{position:relative;display:flex;flex-grow:1;cursor:pointer;align-items:center;text-decoration-line:none;color:var(--calcite-dropdown-item-text-color, var(--calcite-color-text-1));text-align:start}.container a{outline:none;position:relative;display:flex;flex-grow:1;cursor:pointer;align-items:center;text-decoration-line:none;color:var(--calcite-dropdown-item-text-color, var(--calcite-color-text-1))}.content{flex:1 1 auto}.icon{position:relative;opacity:0;transition-timing-function:cubic-bezier(.4,0,.2,1);transform:scale(.9)}.icon--start,.icon--end{--calcite-icon-color: var(--calcite-dropdown-item-text-color, var(--calcite-color-text-3))}:host([scale=s]) .container{padding-block:.25rem;padding-inline:.5rem;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm)}:host([scale=s]) .icon,:host([scale=s]) .icon--start{padding-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .icon--end{padding-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .container{padding-block:.5rem;padding-inline:.75rem;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}:host([scale=m]) .icon,:host([scale=m]) .icon--start{padding-inline-end:var(--calcite-spacing-md)}:host([scale=m]) .icon--end{padding-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .container{padding-block:var(--calcite-space-sm-plus);padding-inline:1rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}:host([scale=l]) .icon,:host([scale=l]) .icon--start{padding-inline-end:var(--calcite-spacing-lg)}:host([scale=l]) .icon--end{padding-inline-start:var(--calcite-spacing-lg)}:host(:focus) .container,:host([active-descendant]) .container{text-decoration-line:none;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host(:hover:not([disabled])) .container{background-color:var(--calcite-dropdown-item-background-color-hover, var(--calcite-color-foreground-2))}:host(:active:not([disabled])) .container{background-color:var(--calcite-dropdown-item-background-color-press, var(--calcite-color-foreground-3))}:host(:hover:not([disabled])) .container,:host(:active:not([disabled])) .container{text-decoration-line:none;color:var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1))}:host(:hover:not([disabled])) .icon--start,:host(:hover:not([disabled])) .icon--end,:host(:active:not([disabled])) .icon--start,:host(:active:not([disabled])) .icon--end{--calcite-icon-color: var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1))}:host(:hover:not([disabled])) .link,:host(:active:not([disabled])) .link{color:var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1))}:host([selected]) .container:not(.container--none-selection),:host([selected]) .link{font-weight:var(--calcite-font-weight-medium);--calcite-internal-dropdown-item-text-color: var( --calcite-dropdown-item-text-color-press, var(--calcite-color-text-1) );color:var(--calcite-internal-dropdown-item-text-color)}:host([selected]) .container:not(.container--none-selection) .icon,:host([selected]) .link .icon{--calcite-icon-color: var(--calcite-dropdown-item-icon-color-press, var(--calcite-color-brand))}:host([selected]) .container:not(.container--none-selection) .icon--start,:host([selected]) .container:not(.container--none-selection) .icon--end,:host([selected]) .link .icon--start,:host([selected]) .link .icon--end{--calcite-icon-color: var(--calcite-internal-dropdown-item-text-color)}:host(:hover:not([disabled])) .icon{--calcite-icon-color: var(--calcite-dropdown-item-icon-color-hover)}:host([selected]) .icon{opacity:1}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
 class DropdownItem extends LitElement {
   constructor() {

package/dist/components/calcite-flow/customElement.d.ts

@@ -11,9 +11,9 @@ export abstract class Flow extends LitElement {
   /**
    * Removes selection of the currently active `calcite-flow-item`.
    *
-   * @returns Promise<HTMLCalciteFlowItemElement | FlowItemLikeElement>
+   * @returns Promise<HTMLCalciteFlowItemElement | FlowItemLikeElement | undefined>
    */
-  back(): Promise<FlowItem | FlowItemLikeElement>;
+  back(): Promise<FlowItem | FlowItemLikeElement | undefined>;
   /**
    * Sets focus on the component.
    *

package/dist/components/calcite-flow/customElement.js

@@ -122,7 +122,7 @@ class Flow extends LitElement {
   }
   findSelectedFlowItemIndex(items) {
     const selectedItem = items.slice(0).reverse().find((item) => !!item.selected);
-    return items.indexOf(selectedItem);
+    return selectedItem ? items.indexOf(selectedItem) : -1;
   }
   ensureSelectedFlowItemExists() {
     const { items } = this;