@esri/calcite-components 5.2.0-next.1 → 5.2.0-next.10

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

@@ -9,33 +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";
-const CSS = {
-  title: "title",
-  close: "close",
-  imageContainer: "image-container",
-  chipIcon: "chip-icon",
-  textSlotted: "text--slotted",
-  container: "container",
-  imageSlotted: "image--slotted",
-  closable: "closable",
-  multiple: "multiple",
-  single: "single",
-  selectable: "selectable",
-  selectIcon: "select-icon",
-  selectIconActive: "select-icon--active",
-  nonInteractive: "non-interactive",
-  isCircle: "is-circle",
-  selected: "selected"
-};
-const SLOTS = {
-  image: "image"
-};
-const ICONS = {
-  close: "x",
-  checkedSingle: "circle-f",
-  uncheckedMultiple: "square",
-  checkedMultiple: "check-square-f"
-};
+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-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;

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();

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.d.ts

@@ -24,7 +24,7 @@ export abstract class Combobox extends LitElement {
    *
    * @default false
    */
-  accessor allowCustomValues: boolean;
+  accessor allowCustomValues: boolean | undefined;
   /**
    * When `true`, disables value-clearing.
    *
@@ -40,17 +40,13 @@ export abstract class Combobox extends LitElement {
   /** The component's filtered items. */
   get filteredItems(): HTMLCalciteComboboxItemElement[];
   /** Specifies the properties to match against when filtering. If not set, all properties will be matched (`description`, `label`, `metadata`, `shortHeading`). */
-  accessor filterProps: string[];
+  accessor filterProps: string[] | undefined;
   /** The component's filter input field text. */
   accessor filterText: string;
-  /** Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available. */
-  accessor flipPlacements: FlipPlacement[];
-  /**
-   * Specifies the `id` of the component's associated form.
-   *
-   * When not set, the component is associated with its ancestor form element, if one exists.
-   */
-  accessor form: string;
+  /** Specifies the component's fallback `placement` for slotted content when its initial or specified `placement` has insufficient space available. */
+  accessor flipPlacements: FlipPlacement[] | undefined;
+  /** Specifies the `id` of the component's associated form. When not set, the component is associated with its ancestor form element, if one exists. */
+  accessor form: string | undefined;
   /**
    * Specifies an accessible label for the component.
    *
@@ -58,7 +54,7 @@ export abstract class Combobox extends LitElement {
    */
   accessor label: string;
   /** Specifies the component's label text. */
-  accessor labelText: string;
+  accessor labelText: string | undefined;
   /**
    * Specifies the maximum number of `calcite-combobox-item-group`s & `calcite-combobox-item`s (including nested children) to display before displaying a scrollbar.
    *
@@ -80,7 +76,7 @@ export abstract class Combobox extends LitElement {
       disabledSelectedCount?: 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`, displays and positions the component.
    *
@@ -98,9 +94,9 @@ export abstract class Combobox extends LitElement {
    */
   accessor overlayPositioning: OverlayPositioning;
   /** Specifies the input's placeholder text. */
-  accessor placeholder: string;
+  accessor placeholder: string | undefined;
   /** Specifies the input's placeholder icon. */
-  accessor placeholderIcon: IconName;
+  accessor placeholderIcon: IconName | undefined;
   /**
    * When `true` and the element direction is right-to-left (`"rtl"`), flips the input's `placeholderIcon`.
    *
@@ -183,18 +179,16 @@ export abstract class Combobox extends LitElement {
    */
   accessor status: Status;
   /**
-   * When `true` and the component is `open`, disables top layer placement.
-   *
-   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   * When `true` and the component is `open`, disables top layer placement. Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
    *
    * @default false
    * @see [MDN - Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
    */
   accessor topLayerDisabled: boolean;
   /** Specifies the validation icon to display under the component. */
-  accessor validationIcon: IconName | boolean;
+  accessor validationIcon: IconName | boolean | undefined;
   /** Specifies the validation message to display under the component. */
-  accessor validationMessage: string;
+  accessor validationMessage: string | undefined;
   /**
    * The component's current validation state.
    *