@esri/calcite-components 5.2.0-next.7 → 5.2.0-next.71

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

@@ -1,5 +1,5 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as customElement } from "../../chunks/runtime.js";
+import { l as logger, c as customElement } from "../../chunks/runtime.js";
 import { repeat } from "lit/directives/repeat.js";
 import { keyed } from "lit/directives/keyed.js";
 import Color from "color";
@@ -8,7 +8,7 @@ import { css, html, nothing } from "lit";
 import { LitElement, createEvent, safeClassMap, safeStyleMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { j as isPrimaryPointerButton } from "../../chunks/dom.js";
+import { h as isPrimaryPointerButton } from "../../chunks/dom.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { r as remap, c as clamp, a as closeToRangeEdge } from "../../chunks/math.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
@@ -16,8 +16,8 @@ import { u as useCancelable } from "../../chunks/useCancelable.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
-import { D as DEFAULT_COLOR, C as CSSColorMode, g as getSliderWidth, a as getColorFieldDimensions, S as STATIC_DIMENSIONS, n as normalizeHex, b as hexify, p as parseMode, c as colorFromValue, d as DEFAULT_STORAGE_KEY_PREFIX, e as alphaCompatible, f as colorEqual, O as OPACITY_LIMITS, R as RGB_LIMITS, H as HSV_LIMITS, j as CSS, o as opacityToAlpha, t as toNonAlphaMode, k as HUE_LIMIT_CONSTRAINED, l as normalizeAlpha, m as alphaToOpacity, q as SCOPE_SIZE, I as ICONS, r as toAlphaMode } from "../../chunks/utils.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-block;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);font-weight:var(--calcite-font-weight-normal);inline-size:var(--calcite-internal-color-picker-min-width);min-inline-size:var(--calcite-internal-color-picker-min-width)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-internal-color-picker-min-width: 200px;--calcite-color-picker-spacing: var(--calcite-spacing-sm)}:host([scale=m]){--calcite-internal-color-picker-min-width: 240px;--calcite-color-picker-spacing: var(--calcite-spacing-md)}:host([scale=l]){--calcite-internal-color-picker-min-width: 304px;--calcite-color-picker-spacing: var(--calcite-spacing-lg);font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}:host([scale=l]) .section:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}:host([scale=l]) .control-section{display:flex;flex-direction:column;flex-wrap:wrap;align-items:baseline}:host([scale=l]) .color-hex-options{inline-size:100%;display:flex;flex-shrink:1;flex-direction:column;justify-content:space-around}:host([scale=l]) .color-mode-container{flex-shrink:3}calcite-input-number{--calcite-input-number-background-color: var(--calcite-color-picker-input-background-color);--calcite-input-number-border-color: var(--calcite-color-picker-input-border-color);--calcite-input-number-text-color: var(--calcite-color-picker-input-text-color);--calcite-input-prefix-text-color: var(--calcite-color-picker-input-prefix-text-color);--calcite-input-suffix-text-color: var(--calcite-color-picker-input-suffix-text-color)}calcite-button{--calcite-button-text-color: var(--calcite-color-picker-action-text-color);--calcite-button-text-color-press: var(--calcite-color-picker-action-text-color-press)}calcite-button:hover,calcite-button:focus{--calcite-button-text-color: var(--calcite-color-picker-action-text-color-hover)}calcite-button:active{--calcite-button-text-color: var(--calcite-color-picker-action-text-color-press)}calcite-tabs{--calcite-tab-border-color: var(--calcite-color-picker-tab-border-color);--calcite-tab-text-color: var(--calcite-color-picker-tab-text-color);--calcite-tab-accent-color-press: var(--calcite-color-picker-tab-accent-color);--calcite-swatch-corner-radius: var(--calcite-color-picker-swatch-corner-radius)}calcite-tab-title:hover{--calcite-color-text-1: var(--calcite-color-picker-tab-text-color-hover)}calcite-swatch{--calcite-swatch-corner-radius: var(--calcite-color-picker-swatch-corner-radius)}.container{display:flex;flex-direction:column;block-size:min-content;border:1px solid var(--calcite-color-picker-border-color, var(--calcite-color-border-3));background-color:var(--calcite-color-picker-background-color, var(--calcite-color-foreground-1));border-radius:var(--calcite-color-picker-corner-radius, var(--calcite-corner-radius-none));box-shadow:var(--calcite-color-picker-shadow, var(--calcite-shadow-none))}.control-and-scope{position:relative;display:flex;cursor:pointer;touch-action:none}.color-field,.control-and-scope{-webkit-user-select:none;user-select:none;border-radius:var(--calcite-color-picker-corner-radius, var(--calcite-corner-radius-none)) var(--calcite-color-picker-corner-radius, var(--calcite-corner-radius-none)) var(--calcite-corner-radius-none) var(--calcite-corner-radius-none)}.scope{pointer-events:none;position:absolute;z-index:var(--calcite-z-index);block-size:1px;inline-size:1px;border-radius:9999px;background-color:transparent;font-size:var(--calcite-font-size-relative-base);outline-color:transparent}.scope: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))));outline-offset:6px}.hex-and-channels-group{display:flex;inline-size:100%;flex-direction:column;flex-wrap:wrap}.section{padding-block:0 var(--calcite-color-picker-spacing);padding-inline:var(--calcite-color-picker-spacing)}.section:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}.sliders{display:flex;flex-direction:column;justify-content:space-between;margin-inline-start:var(--calcite-color-picker-spacing);gap:var(--calcite-spacing-xxs)}.preview-and-sliders{display:flex;align-items:center;padding:var(--calcite-color-picker-spacing)}.color-hex-options,.section--split{flex-grow:1}.header{display:flex;align-items:center;justify-content:space-between;color:var(--calcite-color-picker-text-color, var(--calcite-color-text-1))}.color-mode-container{padding-block-start:var(--calcite-color-picker-spacing)}.channels{display:flex}.channel{flex-grow:1}.channel[data-channel-index="3"]{margin-inline-start:-1px;min-inline-size:81px}:host([scale=s]) .channel[data-channel-index="3"]{min-inline-size:68px}:host([scale=l]) .channel[data-channel-index="3"]{min-inline-size:88px}.saved-colors-buttons{display:flex}.swatch-group{margin-block-start:var(--calcite-color-picker-spacing)}:host([hidden]){display:none}[hidden]{display:none}`;
+import { D as DEFAULT_COLOR, C as CSSColorMode, g as getSliderWidth, a as getColorFieldDimensions, S as STATIC_DIMENSIONS, n as normalizeHex, h as hexify, p as parseMode, c as colorFromValue, b as DEFAULT_STORAGE_KEY_PREFIX, d as alphaCompatible, e as colorEqual, O as OPACITY_LIMITS, R as RGB_LIMITS, H as HSV_LIMITS, f as CSS, o as opacityToAlpha, t as toNonAlphaMode, i as HUE_LIMIT_CONSTRAINED, j as normalizeAlpha, k as alphaToOpacity, l as SCOPE_SIZE, I as ICONS, m as toAlphaMode } from "../../chunks/utils3.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-block;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);font-weight:var(--calcite-font-weight-normal);inline-size:var(--calcite-internal-color-picker-min-width);min-inline-size:var(--calcite-internal-color-picker-min-width)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-internal-color-picker-min-width: 200px;--calcite-color-picker-spacing: var(--calcite-spacing-sm)}:host([scale=m]){--calcite-internal-color-picker-min-width: 240px;--calcite-color-picker-spacing: var(--calcite-spacing-md)}:host([scale=l]){--calcite-internal-color-picker-min-width: 304px;--calcite-color-picker-spacing: var(--calcite-spacing-lg);font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}:host([scale=l]) .section:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}:host([scale=l]) .control-section{display:flex;flex-direction:column;flex-wrap:wrap;align-items:baseline}:host([scale=l]) .color-hex-options{inline-size:100%;display:flex;flex-shrink:1;flex-direction:column;justify-content:space-around}:host([scale=l]) .color-mode-container{flex-shrink:3}calcite-input-number{--calcite-input-number-background-color: var(--calcite-color-picker-input-background-color);--calcite-input-number-border-color: var(--calcite-color-picker-input-border-color);--calcite-input-number-text-color: var(--calcite-color-picker-input-text-color);--calcite-input-prefix-text-color: var(--calcite-color-picker-input-prefix-text-color);--calcite-input-suffix-text-color: var(--calcite-color-picker-input-suffix-text-color)}calcite-button{--calcite-button-text-color: var(--calcite-color-picker-action-text-color);--calcite-button-text-color-press: var(--calcite-color-picker-action-text-color-press)}calcite-button:hover,calcite-button:focus{--calcite-button-text-color: var(--calcite-color-picker-action-text-color-hover)}calcite-button:active{--calcite-button-text-color: var(--calcite-color-picker-action-text-color-press)}calcite-tabs{--calcite-tab-border-color: var(--calcite-color-picker-tab-border-color);--calcite-tab-text-color: var(--calcite-color-picker-tab-text-color);--calcite-tab-accent-color-press: var(--calcite-color-picker-tab-accent-color);--calcite-swatch-corner-radius: var(--calcite-color-picker-swatch-corner-radius)}calcite-tab-title:hover{--calcite-color-text-1: var(--calcite-color-picker-tab-text-color-hover)}calcite-swatch{--calcite-swatch-corner-radius: var(--calcite-color-picker-swatch-corner-radius)}.container{display:flex;flex-direction:column;block-size:min-content;border:1px solid var(--calcite-color-picker-border-color, var(--calcite-color-border-3));background-color:var(--calcite-color-picker-background-color, var(--calcite-color-foreground-1));border-radius:var(--calcite-color-picker-corner-radius, var(--calcite-corner-radius));box-shadow:var(--calcite-color-picker-shadow, var(--calcite-shadow-none))}.control-and-scope{position:relative;display:flex;cursor:pointer;touch-action:none}.color-field,.control-and-scope{-webkit-user-select:none;user-select:none;border-radius:var(--calcite-color-picker-corner-radius, var(--calcite-corner-radius)) var(--calcite-color-picker-corner-radius, var(--calcite-corner-radius)) var(--calcite-corner-radius-none) var(--calcite-corner-radius-none)}.scope{pointer-events:none;position:absolute;z-index:var(--calcite-z-index);block-size:1px;inline-size:1px;border-radius:9999px;background-color:transparent;font-size:var(--calcite-font-size-relative-base);outline-color:transparent}.scope: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))));outline-offset:6px}.hex-and-channels-group{display:flex;inline-size:100%;flex-direction:column;flex-wrap:wrap}.section{padding-block:0 var(--calcite-color-picker-spacing);padding-inline:var(--calcite-color-picker-spacing)}.section:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}.sliders{display:flex;flex-direction:column;justify-content:space-between;margin-inline-start:var(--calcite-color-picker-spacing);gap:var(--calcite-spacing-xxs)}.preview-and-sliders{display:flex;align-items:center;padding:var(--calcite-color-picker-spacing)}.color-hex-options,.section--split{flex-grow:1}.header{display:flex;align-items:center;justify-content:space-between;color:var(--calcite-color-picker-text-color, var(--calcite-color-text-1))}.color-mode-container{padding-block-start:var(--calcite-color-picker-spacing)}.channels{display:flex}.channel{flex-grow:1}.channel[data-channel-index="3"]{margin-inline-start:-1px;min-inline-size:81px}:host([scale=s]) .channel[data-channel-index="3"]{min-inline-size:68px}:host([scale=l]) .channel[data-channel-index="3"]{min-inline-size:88px}.saved-colors-buttons{display:flex}.swatch-group{margin-block-start:var(--calcite-color-picker-spacing)}:host([hidden]){display:none}[hidden]{display:none}`;
 const throttleFor60FpsInMs = 16;
 class ColorPicker extends LitElement {
   constructor() {
@@ -233,7 +233,7 @@ class ColorPicker extends LitElement {
   handleAlphaChannelChange(alphaChannel) {
     const { format } = this;
     if (alphaChannel && format !== "auto" && !alphaCompatible(format)) {
-      console.warn(`ignoring alphaChannel as the current format (${format}) does not support alpha`);
+      logger.warn(`ignoring alphaChannel as the current format (${format}) does not support alpha`);
       this.alphaChannel = false;
     }
   }
@@ -297,10 +297,11 @@ class ColorPicker extends LitElement {
       ArrowDown: { x: 0, y: 10 },
       ArrowLeft: { x: -10, y: 0 }
     };
-    if (arrowKeyToXYOffset[key]) {
+    const offset = arrowKeyToXYOffset[key];
+    if (offset) {
       event.preventDefault();
       this.scopeOrientation = key === "ArrowDown" || key === "ArrowUp" ? "vertical" : "horizontal";
-      this.captureColorFieldColor(this.colorFieldScopeLeft + arrowKeyToXYOffset[key].x || 0, this.colorFieldScopeTop + arrowKeyToXYOffset[key].y || 0, false);
+      this.captureColorFieldColor(this.colorFieldScopeLeft === void 0 ? 0 : this.colorFieldScopeLeft + offset.x, this.colorFieldScopeTop === void 0 ? 0 : this.colorFieldScopeTop + offset.y, false);
     }
   }
   handleHueScopeKeyDown(event) {
@@ -312,9 +313,10 @@ class ColorPicker extends LitElement {
       ArrowDown: -1,
       ArrowLeft: -1
     };
-    if (arrowKeyToXOffset[key]) {
+    const offset = arrowKeyToXOffset[key];
+    if (offset) {
       event.preventDefault();
-      const delta = arrowKeyToXOffset[key] * modifier;
+      const delta = offset * modifier;
       const hue = this.baseColorFieldColor.hue();
       const color = this.baseColorFieldColor.hue(hue + delta);
       this.internalColorSet(color, false);
@@ -342,7 +344,7 @@ class ColorPicker extends LitElement {
     const input = event.currentTarget;
     const channelIndex = Number(input.getAttribute("data-channel-index"));
     const isAlphaChannel = channelIndex === 3;
-    const limit = isAlphaChannel ? OPACITY_LIMITS.max : this.channelMode === "rgb" ? RGB_LIMITS[Object.keys(RGB_LIMITS)[channelIndex]] : HSV_LIMITS[Object.keys(HSV_LIMITS)[channelIndex]];
+    const limit = isAlphaChannel ? OPACITY_LIMITS.max : this.channelMode === "rgb" ? Object.values(RGB_LIMITS)[channelIndex] : Object.values(HSV_LIMITS)[channelIndex];
     let inputValue;
     if (!input.value) {
       inputValue = "";
@@ -397,7 +399,7 @@ class ColorPicker extends LitElement {
     }
   }
   getChannelInputLimit(channelIndex) {
-    return this.channelMode === "rgb" ? RGB_LIMITS[Object.keys(RGB_LIMITS)[channelIndex]] : HSV_LIMITS[Object.keys(HSV_LIMITS)[channelIndex]];
+    return this.channelMode === "rgb" ? Object.values(RGB_LIMITS)[channelIndex] : Object.values(HSV_LIMITS)[channelIndex];
   }
   handleChannelChange(event) {
     const input = event.currentTarget;
@@ -460,7 +462,7 @@ class ColorPicker extends LitElement {
     }
   }
   showIncompatibleColorWarning(value, format) {
-    console.warn(`ignoring color value (${value}) as it is not compatible with the current format (${format})`);
+    logger.warn(`ignoring color value (${value}) as it is not compatible with the current format (${format})`);
   }
   setMode(format, warn = true) {
     const mode = format === "auto" ? this.mode : format;
@@ -472,14 +474,14 @@ class ColorPicker extends LitElement {
     if (alphaChannel && !isAlphaCompatible) {
       const alphaMode = toAlphaMode(mode);
       if (warn) {
-        console.warn(`setting format to (${alphaMode}) as the provided one (${mode}) does not support alpha`);
+        logger.warn(`setting format to (${alphaMode}) as the provided one (${mode}) does not support alpha`);
       }
       return alphaMode;
     }
     if (!alphaChannel && isAlphaCompatible) {
       const nonAlphaMode = toNonAlphaMode(mode);
       if (warn) {
-        console.warn(`setting format to (${nonAlphaMode}) as the provided one (${mode}) does not support alpha`);
+        logger.warn(`setting format to (${nonAlphaMode}) as the provided one (${mode}) does not support alpha`);
       }
       return nonAlphaMode;
     }
@@ -512,7 +514,7 @@ class ColorPicker extends LitElement {
       return normalizeHex(hexify(color.round(), hasAlpha), hasAlpha);
     }
     if (format.includes("-css")) {
-      const value = color[format.replace("-css", "").replace("a", "")]().round().string();
+      const value = (format.startsWith("rgb") ? color.rgb() : color.hsl()).round().string();
       const needToInjectAlpha = (format.endsWith("a") || format.endsWith("a-css")) && color.alpha() === 1;
       if (needToInjectAlpha) {
         const model = value.slice(0, 3);
@@ -521,14 +523,36 @@ class ColorPicker extends LitElement {
       }
       return value;
     }
-    const colorObject = (
+    const nonAlphaMode = toNonAlphaMode(format);
+    const roundedColor = (
       /* Color() does not support hsva, hsla nor rgba, so we use the non-alpha mode */
-      color[toNonAlphaMode(format)]().round().object()
+      (nonAlphaMode === "rgb" ? color.rgb() : nonAlphaMode === "hsl" ? color.hsl() : color.hsv()).round()
     );
+    const colorObject = roundedColor.object();
     if (format.endsWith("a")) {
       return normalizeAlpha(colorObject);
     }
-    return colorObject;
+    if (nonAlphaMode === "rgb") {
+      const { r, g, b } = colorObject;
+      return {
+        r,
+        g,
+        b
+      };
+    }
+    const { h, s } = colorObject;
+    if (nonAlphaMode === "hsl") {
+      return {
+        h,
+        s,
+        l: colorObject.l
+      };
+    }
+    return {
+      h,
+      s,
+      v: colorObject.v
+    };
   }
   getSliderCapSpacing() {
     const { staticDimensions: { slider: { height }, thumb: { radius } } } = this;
@@ -805,9 +829,10 @@ class ColorPicker extends LitElement {
       ArrowDown: -0.01,
       ArrowLeft: -0.01
     };
-    if (arrowKeyToXOffset[key]) {
+    const offset = arrowKeyToXOffset[key];
+    if (offset) {
       event.preventDefault();
-      const delta = arrowKeyToXOffset[key] * modifier;
+      const delta = offset * modifier;
       const alpha = this.baseColorFieldColor.alpha();
       const color = this.baseColorFieldColor.alpha(alpha + delta);
       this.internalColorSet(color, false);
@@ -821,14 +846,17 @@ class ColorPicker extends LitElement {
   }
   toChannels(color) {
     const { channelMode } = this;
-    const channels = color[channelMode]().round().array();
+    const channels = (channelMode === "rgb" ? color.rgb() : color.hsv()).round().array();
     if (channels.length === 3) {
       channels.push(1);
     }
     return channels;
   }
   getAdjustedScopePosition(left, top) {
-    return [left - SCOPE_SIZE / 2, top - SCOPE_SIZE / 2];
+    return [
+      left === void 0 ? NaN : left - SCOPE_SIZE / 2,
+      top === void 0 ? NaN : top - SCOPE_SIZE / 2
+    ];
   }
   render() {
     const { channelsDisabled, color, colorFieldScopeLeft, colorFieldScopeTop, staticDimensions: { thumb: { radius: thumbRadius } }, fieldDisabled, hexDisabled, hueScopeLeft, messages, alphaChannel, opacityScopeLeft, savedColors, savedDisabled, scale, scopeOrientation } = this;
@@ -876,7 +904,8 @@ class ColorPicker extends LitElement {
     return keyed(channelMode, html`<calcite-tab class=${safeClassMap(CSS.control)} .selected=${selected}><div class=${safeClassMap(CSS.channels)} dir=ltr>${channelsToRender.map((channelValue, index) => {
       const isAlphaChannel = index === 3;
       if (isAlphaChannel) {
-        channelValue = clearable && !channelValue ? channelValue : alphaToOpacity(channelValue);
+        channelValue = // channels can only be undefined when clearable
+        clearable && !channelValue ? channelValue : alphaToOpacity(channelValue);
       }
       return this.renderChannel(channelValue, index, channelAriaLabels[index], direction, isAlphaChannel ? "%" : "");
     })}</div></calcite-tab>`);

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

@@ -1,6 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale } from "../interfaces.js";
+import type { Scale } from "../types.js";
 import type { NumberingSystem } from "../../utils/locale.js";
 
 export abstract class ColorPickerHexInput extends LitElement {

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

@@ -5,7 +5,7 @@ import Color from "color";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { n as normalizeHex, b as hexify, i as isValidHex, s as isLonghandHex, u as isShorthandHex, v as rgbToHex, o as opacityToAlpha, m as alphaToOpacity, O as OPACITY_LIMITS, w as hexChar } from "../../chunks/utils.js";
+import { n as normalizeHex, h as hexify, q as isValidHex, r as isLonghandHex, s as isShorthandHex, u as rgbToHex, o as opacityToAlpha, k as alphaToOpacity, O as OPACITY_LIMITS, v as hexChar } from "../../chunks/utils3.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 const CSS = {
   container: "container",

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

@@ -1,6 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale } from "../interfaces.js";
+import type { Scale } from "../types.js";
 
 /** @deprecated Use the `calcite-swatch-group` and `calcite-swatch` components instead. */
 export abstract class ColorPickerSwatch extends LitElement {

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

@@ -4,8 +4,8 @@ import { keyed } from "lit/directives/keyed.js";
 import Color from "color";
 import { css, html, nothing, svg } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
-import { d as getModeName } from "../../chunks/dom.js";
-import { b as hexify } from "../../chunks/utils.js";
+import { y as getModeName } from "../../chunks/dom.js";
+import { h as hexify } from "../../chunks/utils3.js";
 const CSS = {
   swatch: "swatch",
   noColorSwatch: "swatch--no-color",

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

@@ -1,20 +1,12 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
-import type { Scale, SelectionAppearance, SelectionMode, Status } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { Scale, SelectionAppearance, SelectionMode, Status } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
 import type { ComboboxItem as HTMLCalciteComboboxItemElement } from "../calcite-combobox-item/customElement.js";
-import type { SelectionDisplay } from "./interfaces.js";
+import type { SelectionDisplay } from "./types.js";
 
 /**
- * @cssproperty [--calcite-combobox-divider-color] - Specifies the component's divider color.
- * @cssproperty [--calcite-combobox-icon-color] - Specifies the component's icon color.
- * @cssproperty [--calcite-combobox-icon-color-hover] - Specifies the component's icon color when hovered.
- * @cssproperty [--calcite-combobox-background-color] - Specifies the background color of the component's listbox.
- * @cssproperty [--calcite-combobox-input-border-color] - Specifies the border color of the component's input.
- * @cssproperty [--calcite-combobox-input-background-color] - Specifies the background color of the component's input.
- * @cssproperty [--calcite-combobox-input-height] - Specifies the height of the component's input.
- * @cssproperty [--calcite-combobox-input-text-color] - When `selectionDisplay` is `"single"`, specifies the text color of the component's input.
  * @slot  - A slot for adding `calcite-combobox-item`s.
  * @slot [label-content] - A slot for rendering content next to the component's `labelText`.
  */
@@ -61,21 +53,29 @@ export abstract class Combobox extends LitElement {
    * @default 0
    */
   accessor maxItems: number;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      add?: string;
-      all?: string;
-      allSelected?: string;
-      clear?: string;
-      noMatches?: string;
-      removeTag?: string;
-      required?: string;
-      selectAll?: string;
-      selected?: string;
-      nonEditable?: string;
-      disabledSelectedCount?: string;
+      add?: string | undefined;
+      all?: string | undefined;
+      allSelected?: string | undefined;
+      clear?: string | undefined;
+      noMatches?: string | undefined;
+      removeTag?: string | undefined;
+      required?: string | undefined;
+      selectAll?: string | undefined;
+      selected?: string | undefined;
+      nonEditable?: string | undefined;
+      disabledSelectedCount?: string | undefined;
   };
-  /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
+  /**
+   * Specifies the name of the component.
+   *
+   * Required to pass the component's `value` on form submission.
+   */
   accessor name: string | undefined;
   /**
    * When `true`, displays and positions the component.
@@ -84,11 +84,11 @@ export abstract class Combobox extends LitElement {
    */
   accessor open: boolean;
   /**
-   * Specifies the type of positioning to use for overlaid content, where:
+   * Specifies the type of positioning to use for overlaid content.
    *
-   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   * - `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout.
    *
-   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   * - `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    * @default "absolute"
    */
@@ -137,37 +137,31 @@ export abstract class Combobox extends LitElement {
   /** The component's selected items. */
   get selectedItems(): HTMLCalciteComboboxItemElement[];
   /**
-   * Specifies the selection appearance, where
+   * Specifies the selection appearance.
    *
-   * `"icon"` displays a checkmark or dot, and
-   *
-   * `"highlight"` displays a background highlight.
+   * - `"icon"` displays a checkmark or dot.
+   * - `"highlight"` displays a background highlight.
    *
    * @default "icon"
    */
   accessor selectionAppearance: Extract<"icon" | "highlight", SelectionAppearance>;
   /**
-   * When `selectionMode` is `"ancestors"` or `"multiple"`, specifies the display of multiple `calcite-combobox-item` selections, where:
-   *
-   * `"all"` displays all selections with individual `calcite-chip`s,
-   *
-   * `"fit"` displays individual `calcite-chip`s that scale to the component's size, including a non-closable `calcite-chip`, which provides the number of additional `calcite-combobox-item` selections not visually displayed, and
+   * When `selectionMode` is `"ancestors"` or `"multiple"`, specifies the display of multiple `calcite-combobox-item` selections.
    *
-   * `"single"` displays one `calcite-chip` with the total number of selections.
+   * - `"all"` displays all selections with individual `calcite-chip`s.
+   * - `"fit"` displays individual `calcite-chip`s that scale to the component's size, including a non-closable `calcite-chip`, which provides the number of additional `calcite-combobox-item` selections not visually displayed.
+   * - `"single"` displays one `calcite-chip` with the total number of selections.
    *
    * @default "all"
    */
   accessor selectionDisplay: SelectionDisplay;
   /**
-   * Specifies the selection mode of the component, where:
-   *
-   * `"multiple"` allows any number of selections,
-   *
-   * `"single"` allows only one selection,
-   *
-   * `"single-persist"` allows one selection and prevents de-selection, and
+   * Specifies the selection mode of the component.
    *
-   * `"ancestors"` allows multiple selections, but shows ancestors of selected items as selected, with only deepest children shown in chips.
+   * - `"multiple"` allows any number of selections.
+   * - `"single"` allows only one selection.
+   * - `"single-persist"` allows one selection and prevents de-selection.
+   * - `"ancestors"` allows multiple selections, but shows ancestors of selected items as selected, with only deepest children shown in chips.
    *
    * @default "multiple"
    */

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

@@ -1,21 +1,22 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { D as DEBOUNCE, c as customElement } from "../../chunks/runtime.js";
+import { D as DEBOUNCE, l as logger, c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { live } from "lit/directives/live.js";
 import { debounce } from "es-toolkit";
 import { escapeRegExp } from "es-toolkit/compat";
-import { c as calciteSize48 } from "../../chunks/core.js";
+import { calciteSize48 } from "@esri/calcite-design-tokens/dist/es6/core.js";
 import { css, nothing, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
 import { useDirection } from "@arcgis/lumina/controllers";
 import { f as filter } from "../../chunks/filter.js";
-import { k as getElementWidth, l as getTextWidth, i as focusElement } from "../../chunks/dom.js";
-import { d as defaultMenuPlacement, r as reposition, c as connectFloatingUI, a as disconnectFloatingUI, f as filterValidFlipPlacements, h as hideFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
+import { j as getElementWidth, k as getTextWidth, f as focusElement } from "../../chunks/dom.js";
+import { a as defaultMenuPlacement, r as reposition, c as connectFloatingUI, b as disconnectFloatingUI, f as filterValidFlipPlacements, h as hideFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
 import { g as guid } from "../../chunks/guid.js";
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
+import { g as getLabelText } from "../../chunks/label.js";
 import { c as createObserver, u as updateRefObserver } from "../../chunks/observers.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
+import { u as useLabel } from "../../chunks/useLabel.js";
 import { i as isHidden, g as getIconScale } from "../../chunks/component.js";
 import { C as ClearButton } from "../../chunks/ClearButton.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
@@ -27,10 +28,10 @@ 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/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))}`;
+import { i as isChip } from "../../chunks/resources9.js";
+import { I as IDS, b as CSS, C as ComboboxItemSelector, a as ComboboxItemGroupSelector, c as ICONS } from "../../chunks/resources10.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/utils.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);border-radius:var(--calcite-combobox-corner-radius, var(--calcite-corner-radius));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-space-2xs)}:host([scale=m]) .clear-button--container{padding:var(--calcite-space-2xs);padding-inline-end:var(--calcite-space-sm)}:host([scale=l]) .clear-button--container{padding-inline-end:var(--calcite-space-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}: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 {
   constructor() {
     super();
@@ -116,7 +117,7 @@ class Combobox extends LitElement {
     this._selectedItems = [];
     this.textInputRef = createRef();
     this._value = "";
-    this.messages = useT9n();
+    this.messages = useT9n({ blocking: true });
     this.focusSetter = useSetFocus()(this);
     this.customChipAddHandler = () => {
       this.addCustomChip(this.filterText, true);
@@ -159,13 +160,14 @@ class Combobox extends LitElement {
     this.calciteComboboxClose = createEvent({ cancelable: false });
     this.calciteComboboxFilterChange = createEvent({ cancelable: false });
     this.calciteComboboxOpen = createEvent({ cancelable: false });
+    useLabel(this);
     this.listenOn(document, "click", this.documentClickHandler);
     this.listen("calciteComboboxItemChange", this.calciteComboboxItemChangeHandler);
     this.listen("calciteInternalComboboxItemChange", this.calciteInternalComboboxItemChangeHandler);
     this.listen("click", this.comboboxFocusHandler);
   }
   static {
-    this.properties = { activeChipIndex: [16, {}, { state: true }], activeDescendant: [16, {}, { state: true }], activeItemIndex: [16, {}, { state: true }], compactSelectionDisplay: [16, {}, { state: true }], deferFitChipCountRender: [16, {}, { state: true }], selectedHiddenChipsCount: [16, {}, { state: true }], selectedVisibleChipsCount: [16, {}, { state: true }], fitUsingCompactCountLabel: [16, {}, { state: true }], allItems: [16, {}, { state: true }], items: [16, {}, { state: true }], noMatchesFound: [16, {}, { state: true }], allowCustomValues: [7, {}, { reflect: true, type: Boolean }], clearDisabled: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], filterText: [3, {}, { reflect: true }], filterProps: [0, {}, { attribute: false }], filteredItems: [32, {}, { attribute: false, readOnly: true }], flipPlacements: [0, {}, { attribute: false }], form: [3, {}, { reflect: true }], label: 1, labelText: 1, maxItems: [11, {}, { reflect: true, type: Number }], messageOverrides: [0, {}, { attribute: false }], name: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placeholder: 1, placeholderIcon: [3, { type: String }, { reflect: true }], placeholderIconFlipRtl: [7, {}, { reflect: true, type: Boolean }], placement: [3, {}, { reflect: true }], readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selectAllEnabled: [7, {}, { reflect: true, type: Boolean }], selectedItems: [0, {}, { attribute: false }], selectionDisplay: [3, {}, { reflect: true }], selectionAppearance: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: 1 };
+    this.properties = { activeChipIndex: [16, {}, { state: true }], activeDescendant: [16, {}, { state: true }], activeItemIndex: [16, {}, { state: true }], compactSelectionDisplay: [16, {}, { state: true }], deferFitChipCountRender: [16, {}, { state: true }], selectedHiddenChipsCount: [16, {}, { state: true }], selectedVisibleChipsCount: [16, {}, { state: true }], fitUsingCompactCountLabel: [16, {}, { state: true }], allItems: [16, {}, { state: true }], items: [16, {}, { state: true }], noMatchesFound: [16, {}, { state: true }], allowCustomValues: [7, {}, { reflect: true, type: Boolean }], clearDisabled: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], filterText: [3, {}, { reflect: true }], filterProps: [0, {}, { attribute: false }], filteredItems: [32, {}, { attribute: false, readOnly: true }], flipPlacements: [0, {}, { attribute: false }], form: [3, {}, { reflect: true }], label: 1, labelText: 1, maxItems: [11, {}, { reflect: true, type: Number }], messageOverrides: [0, {}, { attribute: false }], name: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placeholder: 1, placeholderIcon: [3, {}, { reflect: true }], placeholderIconFlipRtl: [7, {}, { reflect: true, type: Boolean }], placement: [3, {}, { reflect: true }], readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selectAllEnabled: [7, {}, { reflect: true, type: Boolean }], selectedItems: [0, {}, { attribute: false }], selectionDisplay: [3, {}, { reflect: true }], selectionAppearance: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], validationIcon: [3, { converter: stringOrBoolean }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: 1 };
   }
   static {
     this.formAssociated = true;
@@ -262,7 +264,6 @@ class Combobox extends LitElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    connectLabel(this);
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
     this.setFilteredPlacements();
     connectFloatingUI(this);
@@ -300,7 +301,6 @@ class Combobox extends LitElement {
     super.disconnectedCallback();
     this.mutationObserver?.disconnect();
     this.resizeObserver?.disconnect();
-    disconnectLabel(this);
     disconnectFloatingUI(this);
   }
   emitComboboxChange() {
@@ -607,7 +607,7 @@ class Combobox extends LitElement {
         if (notDeletable) {
           return;
         }
-        const deleteTargetChip = event.composedPath().find((node) => isChip(node));
+        const deleteTargetChip = event.composedPath().find(isChip);
         if (this.activeChipIndex > -1 && deleteTargetChip) {
           event.preventDefault();
           this.removeActiveChip(deleteTargetChip);
@@ -736,13 +736,13 @@ class Combobox extends LitElement {
       this.refreshingSelectionDisplay = false;
       return;
     }
-    const chipContainerElGap = parseInt(getComputedStyle(chipContainerEl).gap);
+    const chipContainerElGap = parseInt(getComputedStyle(chipContainerEl).gap, 10);
     const chipContainerElWidth = getElementWidth(chipContainerEl);
     const { fontSize, fontFamily, minInlineSize } = getComputedStyle(textInputRef.value);
     const placeholderWidthMultiplier = 0.55;
-    const inputMinWidth = parseFloat(minInlineSize) || parseInt(calciteSize48);
+    const inputMinWidth = parseFloat(minInlineSize) || parseInt(calciteSize48, 10);
     const measuredPlaceholderWidth = getTextWidth(placeholder, `${fontSize} ${fontFamily}`);
-    const placeholderWidth = measuredPlaceholderWidth > 0 ? measuredPlaceholderWidth : Math.max(inputMinWidth, Math.round((placeholder?.length || 0) * (parseFloat(fontSize) || parseInt(calciteSize48)) * placeholderWidthMultiplier));
+    const placeholderWidth = measuredPlaceholderWidth > 0 ? measuredPlaceholderWidth : Math.max(inputMinWidth, Math.round((placeholder?.length || 0) * (parseFloat(fontSize) || parseInt(calciteSize48, 10)) * placeholderWidthMultiplier));
     const fitInputWidth = Math.max(inputMinWidth, placeholderWidth);
     const inputWidth = (selectionDisplay === "fit" ? fitInputWidth : placeholderWidth) + chipContainerElGap;
     const allSelectedIndicatorChipElWidth = getElementWidth(allSelectedIndicatorChipRef.value);
@@ -946,7 +946,7 @@ class Combobox extends LitElement {
     const ancestors = getItemAncestors(item);
     const children = getItemChildren(item);
     if (item.selected) {
-      [...children, ...ancestors].forEach((el) => {
+      ancestors.forEach((el) => {
         if (el.disabled) {
           return;
         }
@@ -1140,12 +1140,12 @@ class Combobox extends LitElement {
   }
   handleSelectionModeWarning() {
     if (this.selectionMode === "single-persist" && this.clearDisabled) {
-      console.warn(`clearDisabled is ignored when selection-mode is set to "single-persist"`);
+      logger.warn(`clearDisabled is ignored when selection-mode is set to "single-persist"`);
     }
   }
   getDescriptionMessage() {
     const value = Array.isArray(this.value) ? this.value.join(", ") : this.value;
-    return this.readOnly ? this.messages.nonEditable?.replace("{value}", `${value}`) ?? `${value}` : value;
+    return this.readOnly ? this.messages.nonEditable.replace("{value}", `${value}`) : value;
   }
   getChipLabel(item, isAncestors) {
     if (!isAncestors) {
@@ -1159,10 +1159,10 @@ class Combobox extends LitElement {
     return keyed(item.guid || item.value || label, html`<calcite-chip .appearance=${readOnly ? "outline" : "solid"} class=${safeClassMap({
       [CSS.chip]: true,
       [CSS.disabled]: disabled
-    })} .closable=${!disabled && !readOnly} data-testid=${`${disabled ? "disabled-chip" : "chip"}-${index}`} .disabled=${disabled} .icon=${item.icon} .iconFlipRtl=${item.iconFlipRtl} id=${(!disabled && item.guid ? `${IDS.chip(item.guid)}` : void 0) ?? nothing} .label=${label} .messageOverrides=${!disabled ? { dismissLabel: messages.removeTag } : void 0} @calciteChipClose=${!disabled ? () => this.calciteChipCloseHandler(item) : void 0} @focusin=${!disabled ? () => this.activeChipIndex = index : void 0} .scale=${scale} .selected=${item.selected} .tabIndex=${!disabled && activeChipIndex === index ? 0 : -1} title=${label ?? nothing} .value=${item.value}>${label}</calcite-chip>`);
+    })} .closable=${!disabled && !readOnly} data-testid=${`${disabled ? "disabled-chip" : "chip"}-${index}`} .disabled=${disabled} .icon=${item.icon} .iconFlipRtl=${item.iconFlipRtl} id=${(!disabled && item.guid ? `${IDS.chip(item.guid)}` : void 0) ?? nothing} .label=${label} .messageOverrides=${!disabled ? { dismissLabel: messages.removeTag.replace("{value}", `${label}`) } : void 0} @calciteChipClose=${!disabled ? () => this.calciteChipCloseHandler(item) : void 0} @focusin=${!disabled ? () => this.activeChipIndex = index : void 0} .scale=${scale} .selected=${item.selected} .tabIndex=${!disabled && activeChipIndex === index ? 0 : -1} title=${label ?? nothing} .value=${item.value}>${label}</calcite-chip>`);
   }
   renderChipCount(count, scale) {
-    const label = this.fitUsingCompactCountLabel ? `${count}` : this.messages.disabledSelectedCount?.replace("{count}", `${count}`) ?? `+${count}`;
+    const label = this.fitUsingCompactCountLabel ? `${count}` : this.messages.disabledSelectedCount.replace("{count}", `${count}`) ?? `+${count}`;
     return html`<calcite-chip appearance=solid class=${safeClassMap({
       [CSS.chip]: true
     })} data-testid=selected-chip-count id=selected-chip-count .label=${label} .scale=${scale} tabindex=-1 title=${label ?? nothing} ${ref(this.selectedChipCountRef)}>${label}</calcite-chip>`;
@@ -1233,13 +1233,13 @@ class Combobox extends LitElement {
     const { allSelectedIndicatorChipRef, compactSelectionDisplay, scale, selectedVisibleChipsCount } = this;
     let useFitCompactLabel = false;
     if (this.selectionDisplay === "fit" && this.textInputRef.value && this.chipContainerEl) {
-      const chipContainerElGap = parseInt(getComputedStyle(this.chipContainerEl).gap);
+      const chipContainerElGap = parseInt(getComputedStyle(this.chipContainerEl).gap, 10);
       const chipContainerElWidth = getElementWidth(this.chipContainerEl);
       const { fontSize, fontFamily, minInlineSize } = getComputedStyle(this.textInputRef.value);
       const placeholderWidthMultiplier = 0.55;
-      const inputMinWidth = parseFloat(minInlineSize) || parseInt(calciteSize48);
+      const inputMinWidth = parseFloat(minInlineSize) || parseInt(calciteSize48, 10);
       const measuredPlaceholderWidth = getTextWidth(this.placeholder, `${fontSize} ${fontFamily}`);
-      const placeholderWidth = measuredPlaceholderWidth > 0 ? measuredPlaceholderWidth : Math.max(inputMinWidth, Math.round((this.placeholder?.length || 0) * (parseFloat(fontSize) || parseInt(calciteSize48)) * placeholderWidthMultiplier));
+      const placeholderWidth = measuredPlaceholderWidth > 0 ? measuredPlaceholderWidth : Math.max(inputMinWidth, Math.round((this.placeholder?.length || 0) * (parseFloat(fontSize) || parseInt(calciteSize48, 10)) * placeholderWidthMultiplier));
       const selectedIndicatorChipElWidth = getElementWidth(this.selectedIndicatorChipRef.value);
       useFitCompactLabel = this.getFitCompactDisplayState({
         chipContainerElGap,
@@ -1346,7 +1346,7 @@ class Combobox extends LitElement {
       [FloatingCSS.animation]: true,
       [FloatingCSS.animationActive]: open
     };
-    const label = (this.filterText && messages.add?.replace("{text}", `${this.filterText}`)) ?? "";
+    const label = (this.filterText && messages.add.replace("{text}", `${this.filterText}`)) ?? "";
     return html`<div aria-hidden=true class=${safeClassMap(CSS.floatingUIContainer)} popover=manual ${ref(setFloatingEl)}><div class=${safeClassMap(classes)} ${ref(setContainerEl)}><ul class=${safeClassMap({ [CSS.list]: true, [CSS.listHide]: !open })}>${this.selectAllEnabled && this.selectionMode !== "single" && this.selectionMode !== "single-persist" && html`<calcite-combobox-item class=${safeClassMap(CSS.selectAll)} data-testid=select-all-item .heading=${messages.selectAll} .id=${`${this.guid}-select-all-enabled-interactive`} .indeterminate=${this.indeterminate} .label=${messages.selectAll} .scale=${scale} .selected=${this.allSelected} tabindex=-1 value=select-all ${ref(this.selectAllComboboxItemRef)}></calcite-combobox-item>` || ""}<slot></slot>${this.noMatchesFound && (this.allowCustomValues ? html`<li aria-label=${label ?? nothing} class=${safeClassMap(CSS.noMatches)} @click=${this.customChipAddHandler} role=option tabindex=0>${highlightText({
       text: label,
       pattern: new RegExp(`(${escapeRegExp(this.filterText)})`, "i")