@esri/calcite-components 5.2.0-next.3 → 5.2.0-next.30

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

@@ -13,9 +13,10 @@ 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 { 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";
@@ -30,7 +31,7 @@ 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))}`;
+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}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}.text-match{background-color:transparent;color:inherit;font-weight:var(--calcite-font-weight-bold)}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}::placeholder{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-input-placeholder-text-color, var(--calcite-color-text-3))}`;
 class Combobox extends LitElement {
   constructor() {
     super();
@@ -40,6 +41,7 @@ class Combobox extends LitElement {
     })(this);
     this.selectAllComboboxItemRef = createRef();
     this.allSelectedIndicatorChipRef = createRef();
+    this.data = [];
     this.cancelable = useCancelable()(this);
     this.filterItems = (() => {
       const find = (item, filteredData) => item && filteredData.some(({ el }) => item === el);
@@ -63,7 +65,7 @@ class Combobox extends LitElement {
           }
         });
         this.noMatchesFound = this.filteredItems.length === 0 && !!this.filterText;
-        this.filterTextMatchPattern = this.filterText && new RegExp(`(${escapeRegExp(this.filterText)})`, "i");
+        this.filterTextMatchPattern = this.filterText ? new RegExp(`(${escapeRegExp(this.filterText)})`, "i") : void 0;
         this.keyboardNavItems.forEach((item) => {
           item.filterTextMatchPattern = this.filterTextMatchPattern;
         });
@@ -83,12 +85,14 @@ class Combobox extends LitElement {
       }
       return this.allItems.filter((item) => item.selected && (this.selectionMode !== "ancestors" || !hasActiveChildren(item)));
     };
+    this.groupData = [];
     this.groupItems = [];
     this.guid = guid();
     this.ignoreSelectedEventsFlag = false;
     this.internalValueChangeFlag = false;
     this.previousAllSelected = false;
     this.refreshingSelectionDisplay = false;
+    this.labelable = useLabel(this);
     this.mutationObserver = createObserver("mutation", () => this.updateItems());
     this.onLabelClick = () => {
       this.setFocus();
@@ -113,8 +117,8 @@ class Combobox extends LitElement {
     this.clearButtonRef = createRef();
     this._selectedItems = [];
     this.textInputRef = createRef();
-    this._value = null;
-    this.messages = useT9n();
+    this._value = "";
+    this.messages = useT9n({ blocking: true });
     this.focusSetter = useSetFocus()(this);
     this.customChipAddHandler = () => {
       this.addCustomChip(this.filterText, true);
@@ -133,6 +137,7 @@ class Combobox extends LitElement {
     this.fitUsingCompactCountLabel = false;
     this.allItems = [];
     this.items = [];
+    this.noMatchesFound = false;
     this.clearDisabled = false;
     this.disabled = false;
     this.maxItems = 0;
@@ -259,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);
@@ -297,7 +301,6 @@ class Combobox extends LitElement {
     super.disconnectedCallback();
     this.mutationObserver?.disconnect();
     this.resizeObserver?.disconnect();
-    disconnectLabel(this);
     disconnectFloatingUI(this);
   }
   emitComboboxChange() {
@@ -434,7 +437,7 @@ class Combobox extends LitElement {
   }
   setFilteredPlacements() {
     const { el, flipPlacements } = this;
-    this.filteredFlipPlacements = flipPlacements ? filterValidFlipPlacements(flipPlacements, el) : null;
+    this.filteredFlipPlacements = flipPlacements ? filterValidFlipPlacements(flipPlacements, el) : void 0;
   }
   getValue() {
     const items = this.getOrderedSelectedValues(this.selectedItems.map((item) => item.value?.toString()));
@@ -494,7 +497,7 @@ class Combobox extends LitElement {
         }
         break;
       case "ArrowLeft":
-        if (this.activeChipIndex !== -1 || this.textInputRef.value.selectionStart === 0) {
+        if (this.activeChipIndex !== -1 || this.textInputRef.value?.selectionStart === 0) {
           this.previousChip();
           event.preventDefault();
         }
@@ -534,7 +537,7 @@ class Combobox extends LitElement {
         }
         break;
       case " ":
-        if (!this.textInputRef.value.value && !event.defaultPrevented) {
+        if (!this.textInputRef.value?.value && !event.defaultPrevented) {
           if (!this.open && this.keyboardNavItems.length) {
             this.open = true;
             this.ensureRecentSelectedItemIsActive();
@@ -571,7 +574,7 @@ class Combobox extends LitElement {
           break;
         }
         if (!this.clearDisabled) {
-          if (this.textInputRef.value?.value.length > 0) {
+          if (this.textInputRef.value.value.length > 0) {
             this.resetText();
             event.preventDefault();
           } else if (this.selectedItems.length > 0 && this.selectionMode !== "single-persist") {
@@ -635,7 +638,7 @@ class Combobox extends LitElement {
   }
   async setMaxScrollerHeight() {
     const { listContainerEl, open, referenceEl } = this;
-    if (!listContainerEl || !open) {
+    if (!listContainerEl || !open || !referenceEl) {
       return;
     }
     const maxScrollerHeight = this.getMaxScrollerHeight();
@@ -660,7 +663,8 @@ class Combobox extends LitElement {
       event.preventDefault();
       return;
     }
-    if (composedPath.includes(this.clearButtonRef.value)) {
+    const clearButton = this.clearButtonRef.value;
+    if (clearButton && composedPath.includes(clearButton)) {
       this.clearValue();
       event.preventDefault();
       return;
@@ -727,18 +731,18 @@ class Combobox extends LitElement {
       this.refreshingSelectionDisplay = false;
       return;
     }
-    if (!this.textInputRef.value || !this.chipContainerEl) {
+    const { allSelectedIndicatorChipRef, chipContainerEl, selectionDisplay, placeholder, selectedIndicatorChipRef, textInputRef } = this;
+    if (!textInputRef.value || !chipContainerEl) {
       this.refreshingSelectionDisplay = false;
       return;
     }
-    const { allSelectedIndicatorChipRef, chipContainerEl, selectionDisplay, placeholder, selectedIndicatorChipRef, textInputRef } = this;
-    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);
@@ -752,7 +756,7 @@ class Combobox extends LitElement {
     });
     if (selectionDisplay !== "fit" && this.allSelected && this.selectAllEnabled) {
       this.selectedItems.forEach((item) => {
-        const chipEl = this.referenceEl.querySelector(`#${IDS.chip(item.guid)}`);
+        const chipEl = this.referenceEl?.querySelector(`#${IDS.chip(item.guid)}`);
         if (chipEl) {
           this.hideChip(chipEl);
         }
@@ -760,14 +764,14 @@ class Combobox extends LitElement {
     }
     if (this.indeterminate) {
       this.selectedItems.forEach((item) => {
-        const chipEl = this.referenceEl.querySelector(`#${IDS.chip(item.guid)}`);
+        const chipEl = this.referenceEl?.querySelector(`#${IDS.chip(item.guid)}`);
         if (chipEl) {
           this.showChip(chipEl);
         }
       });
     }
     if (selectionDisplay === "fit") {
-      const chipEls = Array.from(this.el.shadowRoot.querySelectorAll("calcite-chip")).filter((chipEl) => {
+      const chipEls = Array.from(this.renderRoot.querySelectorAll("calcite-chip")).filter((chipEl) => {
         const chipValue = chipEl.value;
         const hasValue = chipValue != null && `${chipValue}` !== "";
         return chipEl.disabled || hasValue;
@@ -792,7 +796,7 @@ class Combobox extends LitElement {
       const didHiddenCountChange = previousHiddenChipsCount !== this.selectedHiddenChipsCount;
       if (didHiddenCountChange && followUpRefresh) {
         this.fitFollowUpRefreshPromise = this.updateComplete.then(() => this.refreshSelectionDisplay(false)).then(() => {
-          this.fitFollowUpRefreshPromise = null;
+          this.fitFollowUpRefreshPromise = void 0;
         });
       }
     }
@@ -942,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;
         }
@@ -1078,7 +1082,7 @@ class Combobox extends LitElement {
   }
   focusChip() {
     const guid2 = this.selectedItems[this.activeChipIndex]?.guid;
-    const chip = guid2 ? this.referenceEl.querySelector(`#${IDS.chip(guid2)}`) : null;
+    const chip = guid2 ? this.referenceEl?.querySelector(`#${IDS.chip(guid2)}`) : void 0;
     chip?.setFocus();
   }
   scrollToActiveOrSelectedItem(scrollToSelected = false) {
@@ -1104,7 +1108,7 @@ class Combobox extends LitElement {
   }
   updateActiveItemIndex(index) {
     this.activeItemIndex = index;
-    let activeDescendant = null;
+    let activeDescendant = "";
     this.keyboardNavItems.forEach((el, i) => {
       if (i === index) {
         el.active = true;
@@ -1126,7 +1130,7 @@ class Combobox extends LitElement {
       return;
     }
     this.activeChipIndex = -1;
-    this.textInputRef.value.focus();
+    this.textInputRef.value?.focus();
     if (this.open && this.selectionDisplay === "fit" && this.isMulti()) {
       void this.refreshSelectionDisplay();
     }
@@ -1141,7 +1145,7 @@ class Combobox extends LitElement {
   }
   getDescriptionMessage() {
     const value = Array.isArray(this.value) ? this.value.join(", ") : this.value;
-    return this.readOnly ? this.messages.nonEditable?.replace("{value}", `${value}`) : value;
+    return this.readOnly ? this.messages.nonEditable.replace("{value}", `${value}`) : value;
   }
   getChipLabel(item, isAncestors) {
     if (!isAncestors) {
@@ -1155,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)}` : null) ?? nothing} .label=${label} .messageOverrides=${!disabled ? { dismissLabel: messages.removeTag } : null} @calciteChipClose=${!disabled ? () => this.calciteChipCloseHandler(item) : null} @focusin=${!disabled ? () => this.activeChipIndex = index : null} .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>`;
@@ -1229,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,
@@ -1256,7 +1260,7 @@ class Combobox extends LitElement {
   }
   renderSelectedIndicatorChip() {
     const { compactSelectionDisplay, selectionDisplay, scale, selectedIndicatorChipRef } = this;
-    let chipInvisible;
+    let chipInvisible = false;
     let label;
     const selectedItemsCount = this.getSelectedItems().length;
     if (compactSelectionDisplay) {
@@ -1280,7 +1284,7 @@ class Combobox extends LitElement {
   }
   renderSelectedIndicatorChipCompact() {
     const { compactSelectionDisplay, selectionDisplay, scale } = this;
-    let chipInvisible;
+    let chipInvisible = false;
     let label;
     const selectedItemsCount = this.getSelectedItems().length;
     if (compactSelectionDisplay) {
@@ -1342,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")

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

@@ -26,9 +26,9 @@ export abstract class ComboboxItem extends LitElement {
    */
   accessor active: boolean;
   /** Specifies the parent and grandparent `calcite-combobox-item`s, which are set on `calcite-combobox`. */
-  accessor ancestors: ComboboxChildElement[];
-  /** Specifies a description for the component. Displays below the heading. */
-  accessor description: string;
+  accessor ancestors: ComboboxChildElement[] | undefined;
+  /** Specifies a description for the component. Displays below the `heading`. */
+  accessor description: string | undefined;
   /**
    * When `true`, prevents interaction and decreases the component's opacity.
    *
@@ -50,7 +50,7 @@ export abstract class ComboboxItem extends LitElement {
    */
   accessor heading: string;
   /** Specifies an icon to display. */
-  accessor icon: IconName;
+  accessor icon: IconName | undefined;
   /**
    * When `true` and the element direction is right-to-left (`"rtl"`), flips the component`s `icon`.
    *
@@ -60,7 +60,7 @@ export abstract class ComboboxItem extends LitElement {
   /** Specifies an accessible label for the component. */
   accessor label: any;
   /** Specifies additional metadata to the component for use in filtering. */
-  accessor metadata: Record<string, unknown>;
+  accessor metadata: Record<string, unknown> | undefined;
   /**
    * When `true`, the component is selected.
    *
@@ -74,7 +74,7 @@ export abstract class ComboboxItem extends LitElement {
    *
    * It is recommended to use 5 characters or fewer.
    */
-  accessor shortHeading: string;
+  accessor shortHeading: string | undefined;
   /** The component's value. Falls back to `heading` if not provided. */
   accessor value: any;
   /** Fires whenever the component is selected or unselected. */

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

@@ -36,7 +36,7 @@ const SLOTS = {
   contentStart: "content-start"
 };
 const itemSpacingMultiplier = "--calcite-combobox-item-spacing-indent-multiplier";
-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([hidden]){display:none}[hidden]{display:none}.scale--s{font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);--calcite-internal-combobox-item-spacing-unit-s: .25rem;--calcite-internal-combobox-item-spacing-unit-l: .5rem;--calcite-combobox-item-selector-icon-size: 1rem;--calcite-internal-combobox-item-description-font-size: var(--calcite-font-size-xs)}.scale--m{font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);--calcite-internal-combobox-item-spacing-unit-s: .375rem;--calcite-internal-combobox-item-spacing-unit-l: .75rem;--calcite-combobox-item-selector-icon-size: 1rem;--calcite-internal-combobox-item-description-font-size: var(--calcite-font-size-sm)}.scale--l{font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);--calcite-internal-combobox-item-spacing-unit-s: var(--calcite-space-sm-plus);--calcite-internal-combobox-item-spacing-unit-l: 1rem;--calcite-combobox-item-selector-icon-size: 1.5rem;--calcite-internal-combobox-item-description-font-size: var(--calcite-font-size)}.container{--calcite-combobox-item-indent-value: calc( var(--calcite-internal-combobox-item-spacing-unit-l) * var(--calcite-combobox-item-spacing-indent-multiplier) )}:host(:focus){--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host,ul{margin:0;display:flex;flex-direction:column;padding:0}:host(:focus),ul:focus{outline:2px solid transparent;outline-offset:2px}.label{position:relative;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:100%;cursor:pointer;align-items:center;text-decoration-line:none;transition-timing-function:cubic-bezier(.4,0,.2,1);outline-color:transparent;word-wrap:break-word;word-break:break-word;justify-content:space-around;gap:var(--calcite-internal-combobox-item-spacing-unit-l);padding-block:var(--calcite-internal-combobox-item-spacing-unit-s);padding-inline-end:var(--calcite-internal-combobox-item-spacing-unit-l);padding-inline-start:var(--calcite-combobox-item-indent-value);color:var(--calcite-combobox-text-color, var(--calcite-color-text-3));transition-duration:var(--calcite-animation-timing)}:host([disabled]) .label{cursor:default}.label--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))))}.label:hover{background-color:var(--calcite-combobox-item-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-combobox-text-color-hover, var(--calcite-color-text-1))}.label:active{background-color:var(--calcite-combobox-item-background-color-active, var(--calcite-color-foreground-3))}:host([selected]) .label,.label:active{color:var(--calcite-combobox-text-color-hover, var(--calcite-color-text-1))}:host([selected]) .label .description,:host([selected]) .label .short-text,.label:active .description,.label:active .short-text{color:var(--calcite-combobox-description-text-color-press, var(--calcite-color-text-2))}.icon{display:inline-flex;transition-timing-function:cubic-bezier(.4,0,.2,1);color:var(--calcite-color-border-input)}:host([selected]) .icon,:host([indeterminate]) .icon{color:var(--calcite-combobox-selected-icon-color, var(--calcite-color-brand))}.icon--custom{margin-block-start:-1px}.center-content{display:flex;flex-direction:column;flex-grow:1;padding-block:0}.description{font-size:var(--calcite-internal-combobox-item-description-font-size)}.short-text{white-space:nowrap}.heading{color:var(--calcite-combobox-heading-text-color, var(--calcite-color-text-1))}.description,.short-text{color:var(--calcite-combobox-description-text-color, var(--calcite-color-text-3))}:host([selected]) .heading{font-weight:var(--calcite-font-weight-medium)}.heading,.description,.short-text{line-height:var(--calcite-font-line-height-relative-snug)}.container--highlight-selected{background-color:var(--calcite-color-surface-highlight)}:host([item-hidden]){display:none}.text-match{background-color:transparent;color:inherit;font-weight:var(--calcite-font-weight-bold)}`;
+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([hidden]){display:none}[hidden]{display:none}.scale--s{font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);--calcite-internal-combobox-item-spacing-unit-s: .25rem;--calcite-internal-combobox-item-spacing-unit-l: .5rem;--calcite-combobox-item-selector-icon-size: 1rem;--calcite-internal-combobox-item-description-font-size: var(--calcite-font-size-xs)}.scale--m{font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);--calcite-internal-combobox-item-spacing-unit-s: .375rem;--calcite-internal-combobox-item-spacing-unit-l: .75rem;--calcite-combobox-item-selector-icon-size: 1rem;--calcite-internal-combobox-item-description-font-size: var(--calcite-font-size-sm)}.scale--l{font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);--calcite-internal-combobox-item-spacing-unit-s: var(--calcite-space-sm-plus);--calcite-internal-combobox-item-spacing-unit-l: 1rem;--calcite-combobox-item-selector-icon-size: 1.5rem;--calcite-internal-combobox-item-description-font-size: var(--calcite-font-size)}.container{--calcite-combobox-item-indent-value: calc( var(--calcite-internal-combobox-item-spacing-unit-l) * var(--calcite-combobox-item-spacing-indent-multiplier) )}:host(:focus){--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host,ul{margin:0;display:flex;flex-direction:column;padding:0}:host(:focus),ul:focus{outline:2px solid transparent;outline-offset:2px}.label{position:relative;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:100%;cursor:pointer;align-items:center;text-decoration-line:none;transition-timing-function:cubic-bezier(.4,0,.2,1);outline-color:transparent;overflow-wrap:break-word;word-break:break-word;justify-content:space-around;gap:var(--calcite-internal-combobox-item-spacing-unit-l);padding-block:var(--calcite-internal-combobox-item-spacing-unit-s);padding-inline-end:var(--calcite-internal-combobox-item-spacing-unit-l);padding-inline-start:var(--calcite-combobox-item-indent-value);color:var(--calcite-combobox-text-color, var(--calcite-color-text-3));transition-duration:var(--calcite-animation-timing)}:host([disabled]) .label{cursor:default}.label--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))))}.label:hover{background-color:var(--calcite-combobox-item-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-combobox-text-color-hover, var(--calcite-color-text-1))}.label:active{background-color:var(--calcite-combobox-item-background-color-active, var(--calcite-color-foreground-3))}:host([selected]) .label,.label:active{color:var(--calcite-combobox-text-color-hover, var(--calcite-color-text-1))}:host([selected]) .label .description,:host([selected]) .label .short-text,.label:active .description,.label:active .short-text{color:var(--calcite-combobox-description-text-color-press, var(--calcite-color-text-2))}.icon{display:inline-flex;transition-timing-function:cubic-bezier(.4,0,.2,1);color:var(--calcite-color-border-input)}:host([selected]) .icon,:host([indeterminate]) .icon{color:var(--calcite-combobox-selected-icon-color, var(--calcite-color-brand))}.icon--custom{margin-block-start:-1px}.center-content{display:flex;flex-direction:column;flex-grow:1;padding-block:0}.description{font-size:var(--calcite-internal-combobox-item-description-font-size)}.short-text{white-space:nowrap}.heading{color:var(--calcite-combobox-heading-text-color, var(--calcite-color-text-1))}.description,.short-text{color:var(--calcite-combobox-description-text-color, var(--calcite-color-text-3))}:host([selected]) .heading{font-weight:var(--calcite-font-weight-medium)}.heading,.description,.short-text{line-height:var(--calcite-font-line-height-relative-snug)}.container--highlight-selected{background-color:var(--calcite-color-surface-highlight)}:host([item-hidden]){display:none}.text-match{background-color:transparent;color:inherit;font-weight:var(--calcite-font-weight-bold)}`;
 class ComboboxItem extends LitElement {
   constructor() {
     super(...arguments);
@@ -45,6 +45,7 @@ class ComboboxItem extends LitElement {
     this.hasContent = false;
     this.active = false;
     this.disabled = false;
+    this.filterDisabled = false;
     this.guid = guid();
     this.iconFlipRtl = false;
     this.scale = "m";

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

@@ -9,7 +9,7 @@ import type { ComboboxChildElement } from "../calcite-combobox/interfaces.js";
  */
 export abstract class ComboboxItemGroup extends LitElement {
   /** Specifies the parent and grandparent `calcite-combobox-item`s, which are set on `calcite-combobox`. */
-  accessor ancestors: ComboboxChildElement[];
+  accessor ancestors: ComboboxChildElement[] | undefined;
   /**
    * Specifies an accessible label for the component.
    *

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

@@ -32,9 +32,9 @@ import type { HeadingLevel } from "../functional/Heading.js";
  */
 export abstract class DatePicker extends LitElement {
   /** Specifies the component's active date. */
-  accessor activeDate: Date;
+  accessor activeDate: Date | undefined;
   /** When `range` is `true`, specifies the active `range`. Where `"start"` specifies the starting range date and `"end"` the ending range date. */
-  accessor activeRange: "start" | "end";
+  accessor activeRange: "start" | "end" | undefined;
   /**
    * When `range` is `true`, specifies the number of calendars displayed.
    *
@@ -42,7 +42,7 @@ export abstract class DatePicker extends LitElement {
    */
   accessor calendars: 1 | 2;
   /** Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling. */
-  accessor headingLevel: HeadingLevel;
+  accessor headingLevel: HeadingLevel | undefined;
   /**
    * Defines the component's layout.
    *
@@ -53,24 +53,24 @@ export abstract class DatePicker extends LitElement {
    * When the component resides in a form,
    * specifies the latest allowed date (`"yyyy-mm-dd"`).
    */
-  accessor max: string;
+  accessor max: string | undefined;
   /** Specifies the latest allowed date as a full date object (`new Date("yyyy-mm-dd")`). */
-  accessor maxAsDate: Date;
+  accessor maxAsDate: Date | undefined;
   /** Overrides individual strings used by the component. */
   accessor messageOverrides: {
-      nextMonth?: string;
-      prevMonth?: string;
-      monthMenu?: string;
-      yearMenu?: string;
-      year?: string;
+      nextMonth?: string | undefined;
+      prevMonth?: string | undefined;
+      monthMenu?: string | undefined;
+      yearMenu?: string | undefined;
+      year?: string | undefined;
   };
   /**
    * When the component resides in a form,
    * specifies the earliest allowed date (`"yyyy-mm-dd"`).
    */
-  accessor min: string;
+  accessor min: string | undefined;
   /** Specifies the earliest allowed date as a full date object (`new Date("yyyy-mm-dd")`). */
-  accessor minAsDate: Date;
+  accessor minAsDate: Date | undefined;
   /**
    * Specifies the component's month style.
    *
@@ -78,7 +78,7 @@ export abstract class DatePicker extends LitElement {
    */
   accessor monthStyle: "abbreviated" | "wide";
   /** Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. */
-  accessor numberingSystem: NumberingSystem;
+  accessor numberingSystem: NumberingSystem | undefined;
   /**
    * When `true`, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range.
    *
@@ -98,9 +98,9 @@ export abstract class DatePicker extends LitElement {
    */
   accessor scale: "s" | "m" | "l";
   /** Specifies the selected date as a string (`"yyyy-mm-dd"`), or an array of strings for `range` values (`["yyyy-mm-dd", "yyyy-mm-dd"]`). */
-  accessor value: string | string[];
+  accessor value: string | string[] | undefined;
   /** Specifies the selected date as a full date object (`new Date("yyyy-mm-dd")`), or an array containing full date objects (`[new Date("yyyy-mm-dd"), new Date("yyyy-mm-dd")]`). */
-  accessor valueAsDate: Date | Date[];
+  accessor valueAsDate: Date | Date[] | undefined;
   /**
    * Sets focus on the component's first focusable element.
    *

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

@@ -55,12 +55,12 @@ class DatePicker extends LitElement {
     const minSource = getMinMaxSource(changes, "min");
     const maxSource = getMinMaxSource(changes, "max");
     if (minSource === "min") {
-      this.minAsDate = dateFromISO(this.min);
+      this.minAsDate = this.min ? dateFromISO(this.min) : void 0;
     } else if (minSource === "minAsDate") {
       this.minAsDate = dateFromISO(dateToISO(this.minAsDate));
     }
     if (maxSource === "max") {
-      this.maxAsDate = dateFromISO(this.max);
+      this.maxAsDate = this.max ? dateFromISO(this.max) : void 0;
     } else if (maxSource === "maxAsDate") {
       this.maxAsDate = dateFromISO(dateToISO(this.maxAsDate));
     }
@@ -142,7 +142,7 @@ class DatePicker extends LitElement {
       this.activeDate = date;
     } else {
       const month = date.getMonth();
-      const isDateOutOfCurrentRange = month !== this.activeStartDate.getMonth() && (this.calendars === 1 || month !== nextMonth(this.activeStartDate).getMonth());
+      const isDateOutOfCurrentRange = month !== this.activeStartDate?.getMonth() && (this.calendars === 1 || (this.activeStartDate ? month !== nextMonth(this.activeStartDate).getMonth() : false));
       if (this.activeRange === "end") {
         if (!this.activeEndDate || this.activeStartDate && isDateOutOfCurrentRange) {
           this.activeEndDate = date;
@@ -163,8 +163,8 @@ class DatePicker extends LitElement {
       return;
     }
     const { valueAsDate } = this;
-    const start = Array.isArray(valueAsDate) && valueAsDate[0];
-    const end = Array.isArray(valueAsDate) && valueAsDate[1];
+    const start = Array.isArray(valueAsDate) ? valueAsDate[0] : void 0;
+    const end = Array.isArray(valueAsDate) ? valueAsDate[1] : void 0;
     const date = new Date(event.detail);
     this.hoverRange = {
       focused: this.activeRange || "start",
@@ -172,10 +172,10 @@ class DatePicker extends LitElement {
       end
     };
     if (this.proximitySelectionDisabled) {
-      if (end && start || !end && date >= start) {
+      if (end && start || !end && start && date >= start) {
         this.hoverRange.focused = "end";
         this.hoverRange.end = date;
-      } else if (!end && date < start) {
+      } else if (!end && start && date < start) {
         this.hoverRange = {
           focused: "start",
           start: date,
@@ -185,7 +185,7 @@ class DatePicker extends LitElement {
         this.hoverRange = void 0;
       }
     } else {
-      if (this.activeRange) {
+      if (this.activeRange && this.hoverRange) {
         if (this.activeRange === "end") {
           this.hoverRange.end = date;
           this.hoverRange.focused = "end";
@@ -262,7 +262,7 @@ class DatePicker extends LitElement {
     }
   }
   getStartDate() {
-    return Array.isArray(this.valueAsDate) && this.valueAsDate[0];
+    return Array.isArray(this.valueAsDate) && this.valueAsDate[0] || void 0;
   }
   setStartDate(date, emit = true) {
     const endDate = this.getEndDate();
@@ -281,8 +281,8 @@ class DatePicker extends LitElement {
     }
     if (!this.range) {
       this.value = isoDate || "";
-      this.valueAsDate = date || null;
-      this.activeDate = date || null;
+      this.valueAsDate = date || void 0;
+      this.activeDate = date || void 0;
       this.calciteDatePickerChange.emit();
       return;
     }
@@ -302,7 +302,7 @@ class DatePicker extends LitElement {
     } else {
       if (this.proximitySelectionDisabled) {
         this.setStartDate(date, false);
-        this.setEndDate(null, false);
+        this.setEndDate(void 0, false);
         this.calciteDatePickerRangeChange.emit();
       } else {
         if (this.activeRange) {
@@ -310,8 +310,8 @@ class DatePicker extends LitElement {
             this.setEndDate(date);
           } else {
             if (date > end) {
-              this.setEndDate(null, false);
-              this.activeEndDate = null;
+              this.setEndDate(void 0, false);
+              this.activeEndDate = void 0;
             }
             this.setStartDate(date);
           }
@@ -343,12 +343,12 @@ class DatePicker extends LitElement {
   setActiveStartAndEndDates() {
     if (this.range) {
       const startDate = dateFromRange(Array.isArray(this.valueAsDate) ? this.valueAsDate[0] : this.valueAsDate, this.minAsDate, this.maxAsDate);
-      const endDate = dateFromRange(Array.isArray(this.valueAsDate) ? this.valueAsDate[1] : null, this.minAsDate, this.maxAsDate);
+      const endDate = dateFromRange(Array.isArray(this.valueAsDate) ? this.valueAsDate[1] : void 0, this.minAsDate, this.maxAsDate);
       this.activeStartDate = this.getActiveDate(startDate, this.minAsDate, this.maxAsDate);
       this.activeEndDate = this.getActiveEndDate(endDate, this.minAsDate, this.maxAsDate);
       if (sameDate(this.activeStartDate, this.activeEndDate)) {
-        const previousMonthActiveDate = getFirstValidDateInMonth(prevMonth(this.activeEndDate), this.minAsDate, this.maxAsDate);
-        const nextMonthActiveDate = nextMonth(this.activeEndDate);
+        const previousMonthActiveDate = getFirstValidDateInMonth(this.activeEndDate ? prevMonth(this.activeEndDate) : void 0, this.minAsDate, this.maxAsDate);
+        const nextMonthActiveDate = this.activeEndDate ? nextMonth(this.activeEndDate) : void 0;
         if (inRange(previousMonthActiveDate, this.minAsDate, this.maxAsDate)) {
           this.activeStartDate = previousMonthActiveDate;
         } else if (inRange(nextMonthActiveDate, this.minAsDate, this.maxAsDate)) {
@@ -360,7 +360,7 @@ class DatePicker extends LitElement {
   render() {
     const date = dateFromRange(this.range && Array.isArray(this.valueAsDate) ? this.valueAsDate[0] : this.valueAsDate, this.minAsDate, this.maxAsDate);
     const activeDate = this.getActiveDate(date, this.minAsDate, this.maxAsDate);
-    const endDate = this.range && Array.isArray(this.valueAsDate) ? dateFromRange(this.valueAsDate[1], this.minAsDate, this.maxAsDate) : null;
+    const endDate = this.range && Array.isArray(this.valueAsDate) ? dateFromRange(this.valueAsDate[1], this.minAsDate, this.maxAsDate) : void 0;
     const minDate = this.range && this.activeRange ? this.activeRange === "start" ? this.minAsDate : date : this.minAsDate;
     const startCalendarActiveDate = this.range ? this.activeStartDate : activeDate;
     return html`<div aria-hidden class=${safeClassMap(CSS.container)} tabindex=-1>${this.renderMonth(startCalendarActiveDate, this.maxAsDate, minDate, date, endDate)}</div>`;