@esri/calcite-components 5.0.0-next.9 → 5.0.0

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

@@ -1,13 +1,16 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html, nothing } from "lit";
 import { LitElement, createEvent, safeClassMap, safeStyleMap } from "@arcgis/lumina";
 import { g as guid } from "../../chunks/guid.js";
-import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
-import { g as getAncestors, i as isSingleLike, a as getDepth } from "../../chunks/utils4.js";
-import { w as warnIfMissingRequiredProp, g as getIconScale } from "../../chunks/component.js";
-import { h as slotChangeHasContent } from "../../chunks/dom.js";
+import { c as getAncestors, i as isSingleLike, d as getDepth } from "../../chunks/utils2.js";
+import { g as getIconScale } from "../../chunks/component.js";
+import { n as slotChangeHasContent } from "../../chunks/dom.js";
 import { h as highlightText } from "../../chunks/text.js";
+import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {
   active: "label--active",
   centerContent: "center-content",
@@ -34,11 +37,12 @@ const SLOTS = {
   contentStart: "content-start"
 };
 const itemSpacingMultiplier = "--calcite-combobox-item-spacing-indent-multiplier";
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}: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--2);line-height:1rem;--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--1);line-height:1rem;--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-0);line-height:1.25rem;--calcite-internal-combobox-item-spacing-unit-s: .625rem;--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:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);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)}: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: .625rem;--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)}: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);
     this._selected = false;
+    this.interactiveContainer = useInteractive(this);
     this.hasContent = false;
     this.active = false;
     this.disabled = false;
@@ -52,7 +56,7 @@ class ComboboxItem extends LitElement {
     this.calciteInternalComboboxItemChange = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { hasContent: [16, {}, { state: true }], active: [7, {}, { reflect: true, type: Boolean }], ancestors: [0, {}, { attribute: false }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], filterDisabled: [7, {}, { reflect: true, type: Boolean }], filterTextMatchPattern: [2, {}, { reflect: true, attribute: false }], guid: [3, {}, { reflect: true }], heading: 1, icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], label: 1, metadata: [0, {}, { attribute: false }], scale: 1, selected: [7, {}, { reflect: true, type: Boolean }], selectionMode: [3, {}, { reflect: true }], shortHeading: 1, textLabel: [3, {}, { reflect: true }], value: 1, itemHidden: [7, {}, { reflect: true, type: Boolean }], indeterminate: [7, {}, { reflect: true, type: Boolean }] };
+    this.properties = { hasContent: [16, {}, { state: true }], active: [7, {}, { reflect: true, type: Boolean }], ancestors: [0, {}, { attribute: false }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], filterDisabled: [7, {}, { reflect: true, type: Boolean }], filterTextMatchPattern: [3, {}, { reflect: true }], guid: [3, {}, { reflect: true }], heading: 1, icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], label: 1, metadata: [0, {}, { attribute: false }], scale: 1, selected: [7, {}, { reflect: true, type: Boolean }], selectionMode: [3, {}, { reflect: true }], shortHeading: 1, value: [3, {}, { reflect: true }], itemHidden: [7, {}, { reflect: true, type: Boolean }], indeterminate: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = styles;
@@ -67,6 +71,12 @@ class ComboboxItem extends LitElement {
       this.emitItemChange();
     }
   }
+  get value() {
+    return this._value ?? this.heading;
+  }
+  set value(val) {
+    this._value = val ?? this.heading;
+  }
   toggleSelection() {
     const isSinglePersistSelect = this.selectionMode === "single-persist";
     if (this.disabled || isSinglePersistSelect && this.selected) {
@@ -79,17 +89,11 @@ class ComboboxItem extends LitElement {
     super.connectedCallback();
     this.ancestors = getAncestors(this.el);
   }
-  load() {
-    warnIfMissingRequiredProp(this, "value", "textLabel");
-  }
   willUpdate(changes) {
-    if (this.hasUpdated && (changes.has("disabled") || changes.has("heading") || changes.has("label") || changes.has("textLabel"))) {
+    if (this.hasUpdated && (changes.has("disabled") || changes.has("heading") || changes.has("label"))) {
       this.emitItemChange();
     }
   }
-  updated() {
-    updateHostInteraction(this);
-  }
   emitItemChange() {
     this.calciteInternalComboboxItemChange.emit();
   }
@@ -113,12 +117,12 @@ class ComboboxItem extends LitElement {
     return keyed("default-slot-container", html`<ul .hidden=${!this.hasContent}><slot @slotchange=${this.handleDefaultSlotChange}></slot></ul>`);
   }
   render() {
-    const { disabled, heading, label, textLabel, value, filterTextMatchPattern, description, shortHeading } = this;
+    const { disabled, heading, label, value, filterTextMatchPattern, description, shortHeading } = this;
     const isSingleSelect = isSingleLike(this.selectionMode);
     const icon = disabled || isSingleSelect ? void 0 : ICONS.checked;
     const selectionIcon = isSingleSelect ? this.selected ? ICONS.selectedSingle : ICONS.circle : this.indeterminate ? ICONS.indeterminate : this.selected ? ICONS.checked : ICONS.unchecked;
-    const headingText = heading || textLabel;
-    const itemLabel = label || value;
+    const itemLabel = label || value || heading;
+    const headingText = heading || value;
     const classes = {
       [CSS.label]: true,
       [CSS.active]: this.active,
@@ -127,7 +131,7 @@ class ComboboxItem extends LitElement {
     const depth = getDepth(this.el);
     this.el.ariaHidden = "true";
     this.el.ariaLabel = itemLabel;
-    return InteractiveContainer({ disabled, children: html`<div class=${safeClassMap({
+    return this.interactiveContainer({ disabled, children: html`<div class=${safeClassMap({
       [CSS.container]: true,
       [CSS.scale(this.scale)]: true
     })} style=${safeStyleMap({ [itemSpacingMultiplier]: `${depth}` })}><li class=${safeClassMap(classes)} id=${this.guid ?? nothing} @click=${this.itemClickHandler}>${this.renderSelectIndicator(selectionIcon)}<slot name=${SLOTS.contentStart}></slot>${this.renderIcon(icon)}<div class=${safeClassMap(CSS.centerContent)}><div class=${safeClassMap(CSS.heading)}>${highlightText({

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

@@ -1,2 +1 @@
-import "../calcite-icon/index.js";
 export * from "./customElement.js";

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

@@ -1,23 +1,26 @@
 /// <reference path="../../index.d.ts" />
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { ComboboxChildElement } from '../calcite-combobox/interfaces';
-import { Scale } from '../interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { ComboboxChildElement } from "../calcite-combobox/interfaces.js";
 
-/** @slot  - A slot for adding `calcite-combobox-item`s. */
-export declare class ComboboxItemGroup extends LitElement {
-    /** Specifies the parent and grandparent `calcite-combobox-item`s, which are set on `calcite-combobox`. */
-    ancestors: ComboboxChildElement[];
-    /**
-     * Specifies the title of the component.
-     *
-     * @required
-     */
-    label: string;
-    /**
-     * Specifies the position of the group in the combobox menu.
-     *
-     * @internal
-     * @default 0
-     */
-    position: number;
-}
+/**
+ * @cssproperty [--calcite-combobox-item-group-text-color] - Specifies the component's text color.
+ * @cssproperty [--calcite-combobox-item-group-border-color] - Specifies the component's border color.
+ * @slot  - A slot for adding `calcite-combobox-item`s.
+ */
+export abstract class ComboboxItemGroup extends LitElement {
+  /** Specifies the parent and grandparent `calcite-combobox-item`s, which are set on `calcite-combobox`. */
+  accessor ancestors: ComboboxChildElement[];
+  /**
+   * Specifies an accessible label for the component.
+   *
+   * @required
+   */
+  accessor label: string;
+  /**
+   * Specifies the group's position in the `calcite-combobox` menu.
+   *
+   * @default 0
+   * @internal
+   */
+  accessor position: number;
+}

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

@@ -1,8 +1,11 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, safeClassMap, safeStyleMap, nothing } from "@arcgis/lumina";
 import { g as guid } from "../../chunks/guid.js";
-import { g as getAncestors, a as getDepth } from "../../chunks/utils4.js";
+import { c as getAncestors, d as getDepth } from "../../chunks/utils2.js";
 const CSS = {
   firstTitle: "first-title",
   list: "list",
@@ -11,7 +14,7 @@ const CSS = {
   title: "title",
   scale: (scale) => `scale--${scale}`
 };
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}.scale--s{font-size:var(--calcite-font-size--2);line-height:1rem;--calcite-combobox-item-horizontal-spacing-unit: var(--calcite-spacing-sm);--calcite-combobox-item-vertical-spacing-unit: var(--calcite-spacing-xxs)}.scale--s .first-title{padding-block-start:var(--calcite-spacing-sm)}.scale--s .separator{margin-block:var(--calcite-combobox-item-vertical-spacing-unit);margin-inline-start:calc(var(--calcite-combobox-item-horizontal-spacing-unit) + var(--calcite-combobox-item-horizontal-spacing-unit) * var(--calcite-combobox-item-spacing-indent-multiplier));margin-inline-end:var(--calcite-combobox-item-horizontal-spacing-unit)}.scale--m{font-size:var(--calcite-font-size--1);line-height:1rem;--calcite-combobox-item-horizontal-spacing-unit: var(--calcite-spacing-md);--calcite-combobox-item-vertical-spacing-unit: var(--calcite-spacing-xs)}.scale--m .first-title{padding-block-start:var(--calcite-spacing-md)}.scale--m .separator{margin-block:var(--calcite-combobox-item-vertical-spacing-unit);margin-inline-start:calc(var(--calcite-combobox-item-horizontal-spacing-unit) + var(--calcite-combobox-item-horizontal-spacing-unit) * var(--calcite-combobox-item-spacing-indent-multiplier));margin-inline-end:var(--calcite-combobox-item-horizontal-spacing-unit)}.scale--l{font-size:var(--calcite-font-size-0);line-height:1.25rem;--calcite-combobox-item-horizontal-spacing-unit: var(--calcite-spacing-lg);--calcite-combobox-item-vertical-spacing-unit: var(--calcite-spacing-sm-plus)}.scale--l .first-title{padding-block-start:var(--calcite-spacing-xl)}.scale--l .separator{margin-block:var(--calcite-combobox-item-vertical-spacing-unit);margin-inline-start:calc(var(--calcite-combobox-item-horizontal-spacing-unit) + var(--calcite-combobox-item-horizontal-spacing-unit) * var(--calcite-combobox-item-spacing-indent-multiplier));margin-inline-end:var(--calcite-combobox-item-horizontal-spacing-unit)}:host,.list{margin:0;display:flex;flex-direction:column;padding:0}:host(:focus),.list:focus{outline:2px solid transparent;outline-offset:2px}.separator{block-size:var(--calcite-spacing-px);background-color:var(--calcite-combobox-item-group-border-color, var(--calcite-color-border-3))}.label{box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:0px;max-inline-size:100%}.title{--calcite-combobox-item-indent-value: calc( var(--calcite-combobox-item-horizontal-spacing-unit) * var(--calcite-combobox-item-spacing-indent-multiplier) );border:0 solid;display:block;flex:1 1 0%;font-weight:var(--calcite-font-weight-bold);word-wrap:break-word;word-break:break-word;padding-block:var(--calcite-combobox-item-vertical-spacing-unit);padding-inline-start:calc(var(--calcite-combobox-item-indent-value) + var(--calcite-combobox-item-horizontal-spacing-unit));padding-inline-end:var(--calcite-combobox-item-horizontal-spacing-unit);color:var(--calcite-combobox-item-group-text-color, var(--calcite-color-text-1))}:host([hidden]){display:none}[hidden]{display:none}:host([item-hidden]){display:none}`;
+const styles = css`.scale--s{font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);--calcite-combobox-item-horizontal-spacing-unit: var(--calcite-spacing-sm);--calcite-combobox-item-vertical-spacing-unit: var(--calcite-spacing-xxs)}.scale--s .first-title{padding-block-start:var(--calcite-spacing-sm)}.scale--s .separator{margin-block:var(--calcite-combobox-item-vertical-spacing-unit);margin-inline-start:calc(var(--calcite-combobox-item-horizontal-spacing-unit) + var(--calcite-combobox-item-horizontal-spacing-unit) * var(--calcite-combobox-item-spacing-indent-multiplier));margin-inline-end:var(--calcite-combobox-item-horizontal-spacing-unit)}.scale--m{font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);--calcite-combobox-item-horizontal-spacing-unit: var(--calcite-spacing-md);--calcite-combobox-item-vertical-spacing-unit: var(--calcite-spacing-xs)}.scale--m .first-title{padding-block-start:var(--calcite-spacing-md)}.scale--m .separator{margin-block:var(--calcite-combobox-item-vertical-spacing-unit);margin-inline-start:calc(var(--calcite-combobox-item-horizontal-spacing-unit) + var(--calcite-combobox-item-horizontal-spacing-unit) * var(--calcite-combobox-item-spacing-indent-multiplier));margin-inline-end:var(--calcite-combobox-item-horizontal-spacing-unit)}.scale--l{font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);--calcite-combobox-item-horizontal-spacing-unit: var(--calcite-spacing-lg);--calcite-combobox-item-vertical-spacing-unit: var(--calcite-spacing-sm-plus)}.scale--l .first-title{padding-block-start:var(--calcite-spacing-xl)}.scale--l .separator{margin-block:var(--calcite-combobox-item-vertical-spacing-unit);margin-inline-start:calc(var(--calcite-combobox-item-horizontal-spacing-unit) + var(--calcite-combobox-item-horizontal-spacing-unit) * var(--calcite-combobox-item-spacing-indent-multiplier));margin-inline-end:var(--calcite-combobox-item-horizontal-spacing-unit)}:host,.list{margin:0;display:flex;flex-direction:column;padding:0}:host(:focus),.list:focus{outline:2px solid transparent;outline-offset:2px}.separator{block-size:var(--calcite-spacing-px);background-color:var(--calcite-combobox-item-group-border-color, var(--calcite-color-border-3))}.label{box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:0px;max-inline-size:100%}.title{--calcite-combobox-item-indent-value: calc( var(--calcite-combobox-item-horizontal-spacing-unit) * var(--calcite-combobox-item-spacing-indent-multiplier) );border:0 solid;display:block;flex:1 1 0%;font-weight:var(--calcite-font-weight-bold);word-wrap:break-word;word-break:break-word;padding-block:var(--calcite-combobox-item-vertical-spacing-unit);padding-inline-start:calc(var(--calcite-combobox-item-indent-value) + var(--calcite-combobox-item-horizontal-spacing-unit));padding-inline-end:var(--calcite-combobox-item-horizontal-spacing-unit);color:var(--calcite-combobox-item-group-text-color, var(--calcite-color-text-1))}:host([hidden]){display:none}[hidden]{display:none}:host([item-hidden]){display:none}`;
 class ComboboxItemGroup extends LitElement {
   constructor() {
     super(...arguments);

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

@@ -1,96 +1,119 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
-import { NumberingSystem } from '../../utils/locale';
-import { HeadingLevel } from '../functional/Heading';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { NumberingSystem } from "../../utils/locale.js";
+import type { HeadingLevel } from "../functional/Heading.js";
 
-export declare class DatePicker extends LitElement {
-    /** Specifies the component's active date. */
-    activeDate: Date;
-    /** When `range` is true, specifies the active `range`. Where `"start"` specifies the starting range date and `"end"` the ending range date. */
-    activeRange: "start" | "end";
-    /**
-     * Specifies the number of calendars displayed when `range` is `true`.
-     *
-     * @default 2
-     */
-    calendars: 1 | 2;
-    /** Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. */
-    headingLevel: HeadingLevel;
-    /**
-     * Defines the layout of the component.
-     *
-     * @default "horizontal"
-     */
-    layout: "horizontal" | "vertical";
-    /**
-     * When the component resides in a form,
-     * specifies the latest allowed date (`"yyyy-mm-dd"`).
-     */
-    max: string;
-    /** Specifies the latest allowed date as a full date object (`new Date("yyyy-mm-dd")`). */
-    maxAsDate: Date;
-    /** Use this property to override individual strings used by the component. */
-    messageOverrides?: typeof this.messages._overrides;
-    /**
-     * When the component resides in a form,
-     * specifies the earliest allowed date (`"yyyy-mm-dd"`).
-     */
-    min: string;
-    /** Specifies the earliest allowed date as a full date object (`new Date("yyyy-mm-dd")`). */
-    minAsDate: Date;
-    /**
-     * Specifies the monthStyle used by the component.
-     *
-     * @default "wide"
-     */
-    monthStyle: "abbreviated" | "wide";
-    /** Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. */
-    numberingSystem: NumberingSystem;
-    /**
-     * When `true`, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range.
-     *
-     * @default false
-     */
-    proximitySelectionDisabled: boolean;
-    /**
-     * When `true`, activates the component's range mode to allow a start and end date.
-     *
-     * @default false
-     */
-    range: boolean;
-    /**
-     * Specifies the size of the component.
-     *
-     * @default "m"
-     */
-    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"]`). */
-    value: string | string[];
-    /** 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")]`). */
-    valueAsDate: Date | Date[];
-    /**
-     * Sets focus on the component's first focusable element.
-     *
-     * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-     * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
-     */
-    setFocus(options?: FocusOptions): Promise<void>;
-    /** Fires when a user changes the component's date. For `range` events, use `calciteDatePickerRangeChange`. */
-    readonly calciteDatePickerChange: TargetedEvent<this, void>;
-    /** Fires when a user changes the component's date `range`. For components without `range` use `calciteDatePickerChange`. */
-    readonly calciteDatePickerRangeChange: TargetedEvent<this, void>;
-    private messages: {
-        nextMonth: string;
-        prevMonth: string;
-        monthMenu: string;
-        yearMenu: string;
-        year: string;
-    } & import('@arcgis/lumina/controllers').T9nMeta<{
-        nextMonth: string;
-        prevMonth: string;
-        monthMenu: string;
-        yearMenu: string;
-        year: string;
-    }>;
-}
+/**
+ * @cssproperty [--calcite-date-picker-border-color] - Specifies the component's border color.
+ * @cssproperty [--calcite-date-picker-corner-radius] - Specifies the component's border radius.
+ * @cssproperty [--calcite-date-picker-range-calendar-divider-color] - When `range` is `true`, specifies the divider color between the component's calendars.
+ * @cssproperty [--calcite-date-picker-week-header-text-color] - Specifies the text color of the component's week header.
+ * @cssproperty [--calcite-date-picker-header-action-background-color] - Specifies the background color of component`s header actions.
+ * @cssproperty [--calcite-date-picker-header-action-background-color-hover] - Specifies the background color of component`s header actions when hovered.
+ * @cssproperty [--calcite-date-picker-header-action-background-color-press] - Specifies the background color of component`s header actions when pressed.
+ * @cssproperty [--calcite-date-picker-header-action-text-color] - Specifies the text color of the component's header actions.
+ * @cssproperty [--calcite-date-picker-header-action-text-color-press] - Specifies the text color of the component's header actions when pressed.
+ * @cssproperty [--calcite-date-picker-year-text-color] - Specifies the text color of the component's year and suffix.
+ * @cssproperty [--calcite-date-picker-month-select-font-size] - Specifies the font size of the component's month selector.
+ * @cssproperty [--calcite-date-picker-month-select-text-color] - Specifies the text color of the component's month selector.
+ * @cssproperty [--calcite-date-picker-month-select-icon-color] - Specifies the icon color of the component's month selector.
+ * @cssproperty [--calcite-date-picker-month-select-icon-color-hover] - Specifies the icon color of the component's month selector when hovered.
+ * @cssproperty [--calcite-date-picker-day-background-color] - Specifies the background color of the component's day elements.
+ * @cssproperty [--calcite-date-picker-day-background-color-hover] - Specifies the background color of the component's day elements when hovered.
+ * @cssproperty [--calcite-date-picker-day-text-color] - Specifies the text color of the component's day elements.
+ * @cssproperty [--calcite-date-picker-day-text-color-hover] - Specifies the text color of the component's day elements when hovered.
+ * @cssproperty [--calcite-date-picker-current-day-text-color] - Specifies the text color of the component's current day.
+ * @cssproperty [--calcite-date-picker-day-background-color-selected] - Specifies the background color of the component's selected day.
+ * @cssproperty [--calcite-date-picker-day-text-color-selected] - Specifies the text color of the component's selected day elements.
+ * @cssproperty [--calcite-date-picker-day-range-text-color] - Specifies the text color of component's selected day range.
+ * @cssproperty [--calcite-date-picker-day-range-background-color] - Specifies the background color the component's selected day range.
+ * @cssproperty [--calcite-date-picker-day-outside-range-background-color-hover] - Specifies the background color of the component's day elements outside the current range when hovered.
+ * @cssproperty [--calcite-date-picker-day-outside-range-text-color-hover] - Specifies the text color of the component's day elements outside the current range when hovered.
+ */
+export abstract class DatePicker extends LitElement {
+  /** Specifies the component's active date. */
+  accessor activeDate: Date;
+  /** 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";
+  /**
+   * When `range` is `true`, specifies the number of calendars displayed.
+   *
+   * @default 2
+   */
+  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;
+  /**
+   * Defines the component's layout.
+   *
+   * @default "horizontal"
+   */
+  accessor layout: "horizontal" | "vertical";
+  /**
+   * When the component resides in a form,
+   * specifies the latest allowed date (`"yyyy-mm-dd"`).
+   */
+  accessor max: string;
+  /** Specifies the latest allowed date as a full date object (`new Date("yyyy-mm-dd")`). */
+  accessor maxAsDate: Date;
+  /** Overrides individual strings used by the component. */
+  accessor messageOverrides: {
+      nextMonth?: string;
+      prevMonth?: string;
+      monthMenu?: string;
+      yearMenu?: string;
+      year?: string;
+  };
+  /**
+   * When the component resides in a form,
+   * specifies the earliest allowed date (`"yyyy-mm-dd"`).
+   */
+  accessor min: string;
+  /** Specifies the earliest allowed date as a full date object (`new Date("yyyy-mm-dd")`). */
+  accessor minAsDate: Date;
+  /**
+   * Specifies the component's month style.
+   *
+   * @default "wide"
+   */
+  accessor monthStyle: "abbreviated" | "wide";
+  /** Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. */
+  accessor numberingSystem: NumberingSystem;
+  /**
+   * When `true`, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range.
+   *
+   * @default false
+   */
+  accessor proximitySelectionDisabled: boolean;
+  /**
+   * When `true`, activates the component's range mode to allow a start and end date.
+   *
+   * @default false
+   */
+  accessor range: boolean;
+  /**
+   * Specifies the size of the component.
+   *
+   * @default "m"
+   */
+  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[];
+  /** 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[];
+  /**
+   * Sets focus on the component's first focusable element.
+   *
+   * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
+   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   */
+  setFocus(options?: FocusOptions): Promise<void>;
+  /** Fires when a user changes the component's date. For `range` events, use `calciteDatePickerRangeChange`. */
+  readonly calciteDatePickerChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when a user changes the component's date `range`. For components without `range` use `calciteDatePickerChange`. */
+  readonly calciteDatePickerRangeChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteDatePickerChange: DatePicker["calciteDatePickerChange"]["detail"];
+    calciteDatePickerRangeChange: DatePicker["calciteDatePickerRangeChange"]["detail"];
+  };
+}

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

@@ -1,17 +1,20 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, isServer, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { a as dateFromISO, c as dateToISO, n as nextMonth, p as prevMonth, o as getDaysDiff, b as dateFromRange, m as getFirstValidDateInMonth, s as sameDate, i as inRange } from "../../chunks/date.js";
+import { d as dateFromISO, a as dateToISO, n as nextMonth, p as prevMonth, g as getDaysDiff, b as dateFromRange, c as getFirstValidDateInMonth, s as sameDate, i as inRange } from "../../chunks/date.js";
 import { n as numberStringFormatter, g as getDateTimeFormat } from "../../chunks/locale.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
-import { g as getValueAsDateRange, a as getLocaleData } from "../../chunks/utils3.js";
+import { g as getValueAsDateRange, a as applyLocaleOverride, b as getLocaleData } from "../../chunks/utils3.js";
 const HEADING_LEVEL = 2;
 const DATE_PICKER_FORMAT_OPTIONS = { dateStyle: "full" };
 const CSS = {
   container: "container"
 };
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{display:inline-block;inline-size:100%;overflow:visible;border-width:1px;border-style:solid;vertical-align:top;border-color:var(--calcite-date-picker-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-date-picker-corner-radius, 0)}:host([scale=s]){inline-size:236px;min-inline-size:216px;max-inline-size:380px}:host([scale=s][range][layout=horizontal][calendars="2"]){inline-size:480px;min-inline-size:432px;max-inline-size:772px}:host([scale=m]){inline-size:298px;min-inline-size:272px;max-inline-size:480px}:host([scale=m][layout=horizontal][range][calendars="2"]){inline-size:608px;min-inline-size:544px;max-inline-size:972px}:host([scale=l]){inline-size:334px;min-inline-size:320px;max-inline-size:600px}:host([scale=l][layout=horizontal][range][calendars="2"]){inline-size:684px;min-inline-size:640px;max-inline-size:1212px}.container{outline:2px solid transparent;outline-offset:2px}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{display:inline-block;inline-size:100%;overflow:visible;border-width:1px;border-style:solid;vertical-align:top;border-color:var(--calcite-date-picker-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-date-picker-corner-radius, 0)}:host([scale=s]){inline-size:236px;min-inline-size:216px;max-inline-size:380px}:host([scale=s][range][layout=horizontal][calendars="2"]){inline-size:480px;min-inline-size:432px;max-inline-size:772px}:host([scale=m]){inline-size:298px;min-inline-size:272px;max-inline-size:480px}:host([scale=m][layout=horizontal][range][calendars="2"]){inline-size:608px;min-inline-size:544px;max-inline-size:972px}:host([scale=l]){inline-size:334px;min-inline-size:320px;max-inline-size:600px}:host([scale=l][layout=horizontal][range][calendars="2"]){inline-size:684px;min-inline-size:640px;max-inline-size:1212px}.container{outline:2px solid transparent;outline-offset:2px}:host([hidden]){display:none}[hidden]{display:none}`;
 class DatePicker extends LitElement {
   constructor() {
     super();
@@ -122,13 +125,14 @@ class DatePicker extends LitElement {
     if (isServer) {
       return;
     }
+    const locale = applyLocaleOverride(this.messages._lang);
     numberStringFormatter.numberFormatOptions = {
       numberingSystem: this.numberingSystem,
-      locale: this.messages._lang,
+      locale,
       useGrouping: false
     };
-    this.localeData = await getLocaleData(this.messages._lang);
-    this.dateTimeFormat = getDateTimeFormat(this.messages._lang, DATE_PICKER_FORMAT_OPTIONS);
+    this.localeData = await getLocaleData(locale);
+    this.dateTimeFormat = getDateTimeFormat(locale, DATE_PICKER_FORMAT_OPTIONS);
   }
   monthHeaderSelectChange(event) {
     const date = new Date(event.detail.date);

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

@@ -1,2 +1 @@
-import "../calcite-date-picker-month/index.js";
 export * from "./customElement.js";