@esri/calcite-components 5.0.0-next.73 → 5.0.0-next.75

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

@@ -1,76 +1,85 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { ComboboxChildElement } from '../calcite-combobox/interfaces';
-import { Scale, SelectionMode } from '../interfaces';
-import { IconName } from '../calcite-icon/interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina/PublicLitElement";
+import type { ComboboxChildElement } from "../calcite-combobox/interfaces.js";
+import type { IconName } from "../calcite-icon/interfaces.js";
 
 /**
+ * @cssproperty [--calcite-combobox-item-border-color] - [Deprecated] Specifies the component's border color.
+ * @cssproperty [--calcite-combobox-text-color] - Specifies the component's text and `icon` color.
+ * @cssproperty [--calcite-combobox-text-color-hover] - Specifies the component's text and `icon` color when hovered.
+ * @cssproperty [--calcite-combobox-item-background-color-active] - Specifies the component's background color when active.
+ * @cssproperty [--calcite-combobox-item-background-color-hover] - Specifies the component's background color when hovered.
+ * @cssproperty [--calcite-combobox-item-shadow] - Specifies the component's shadow.
+ * @cssproperty [--calcite-combobox-selected-icon-color] - Specifies the component's selected indicator icon color.
+ * @cssproperty [--calcite-combobox-description-text-color] - Specifies the component's `description` and `shortHeading` text color.
+ * @cssproperty [--calcite-combobox-description-text-color-press] - Specifies the component's `description` and `shortHeading` text color when hovered.
+ * @cssproperty [--calcite-combobox-heading-text-color] - Specifies the component's `heading` text color.
  * @slot  - A slot for adding nested `calcite-combobox-item`s.
  * @slot [content-end] - A slot for adding non-actionable elements after the component's content.
  * @slot [content-start] - A slot for adding non-actionable elements before the component's content.
  */
-export declare class ComboboxItem extends LitElement {
-    /**
-     * When `true`, the component is active.
-     *
-     * @default false
-     */
-    active: boolean;
-    /** Specifies the parent and grandparent items, which are set on `calcite-combobox`. */
-    ancestors: ComboboxChildElement[];
-    /** A description for the component, which displays below the heading. */
-    description: string;
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /**
-     * When `true`, omits the component from the `calcite-combobox` filtered search results.
-     *
-     * @default false
-     */
-    filterDisabled: boolean;
-    /** The `id` attribute of the component. When omitted, a globally unique identifier is used. */
-    guid: string;
-    /**
-     * The component's text.
-     *
-     * @required
-     */
-    heading: string;
-    /** Specifies an icon to display. */
-    icon: IconName;
-    /**
-     * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
-     *
-     * @default false
-     */
-    iconFlipRtl: boolean;
-    /** The component's label. */
-    label: any;
-    /** Provides additional metadata to the component used in filtering. */
-    metadata: Record<string, unknown>;
-    /**
-     * When `true`, the component is selected.
-     *
-     * @default false
-     */
-    get selected(): boolean;
-    set selected(value: boolean);
-    /**
-     * The component's short heading.
-     *
-     * When provided, the short heading will be displayed in the component's selection.
-     *
-     * It is recommended to use 5 characters or fewer.
-     */
-    shortHeading: string;
-    /** The component's value. Falls back to `heading` if not provided. */
-    get value(): any;
-    set value(val: any);
-    /** Fires whenever the component is selected or unselected. */
-    readonly calciteComboboxItemChange: TargetedEvent<this, void>;
-}
+export abstract class ComboboxItem extends LitElement {
+  /**
+   * When `true`, the component is active.
+   *
+   * @default false
+   */
+  accessor active: boolean;
+  /** Specifies the parent and grandparent items, which are set on `calcite-combobox`. */
+  accessor ancestors: ComboboxChildElement[];
+  /** Specifies a description for the component. Displays below the heading. */
+  accessor description: string;
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /**
+   * When `true`, omits the component from the `calcite-combobox` filtered search results.
+   *
+   * @default false
+   */
+  accessor filterDisabled: boolean;
+  /** The `id` attribute of the component. When omitted, a globally unique identifier is used. */
+  accessor guid: string;
+  /**
+   * Specifies the component's heading text.
+   *
+   * @required
+   */
+  accessor heading: string;
+  /** Specifies an icon to display. */
+  accessor icon: IconName;
+  /**
+   * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
+   *
+   * @default false
+   */
+  accessor iconFlipRtl: boolean;
+  /** Specifies an accessible label for the component. */
+  accessor label: any;
+  /** Provides additional metadata to the component used in filtering. */
+  accessor metadata: Record<string, unknown>;
+  /**
+   * When `true`, the component is selected.
+   *
+   * @default false
+   */
+  accessor selected: boolean;
+  /**
+   * The component's short heading.
+   *
+   * When provided, the short heading will be displayed in the component's selection.
+   *
+   * It is recommended to use 5 characters or fewer.
+   */
+  accessor shortHeading: string;
+  /** The component's value. Falls back to `heading` if not provided. */
+  accessor value: any;
+  /** Fires whenever the component is selected or unselected. */
+  readonly calciteComboboxItemChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteComboboxItemChange: ComboboxItem["calciteComboboxItemChange"]["detail"];
+  };
+}

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

@@ -1,14 +1,14 @@
 /*! 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-next.73 */
+v5.0.0-next.75 */
 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 { g as getAncestors, i as isSingleLike, a as getDepth } from "../../chunks/utils4.js";
+import { c as getAncestors, i as isSingleLike, d as getDepth } from "../../chunks/utils2.js";
 import { g as getIconScale } from "../../chunks/component.js";
-import { h as slotChangeHasContent } from "../../chunks/dom.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 = {
@@ -56,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, value: [3, {}, { reflect: true }], 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;

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/PublicLitElement";
+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.
-     *
-     * @default 0
-     * @internal
-     */
-    position: number;
-}
+/**
+ * @cssproperty [--calcite-combobox-item-group-text-color] - Specifies the text color of the component.
+ * @cssproperty [--calcite-combobox-item-group-border-color] - Specifies the border color of the component.
+ * @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 position of the group in the combobox menu.
+   *
+   * @default 0
+   * @internal
+   */
+  accessor position: number;
+}

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

@@ -1,11 +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-next.73 */
+v5.0.0-next.75 */
 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",

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

@@ -1,97 +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/PublicLitElement";
+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
-     * @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] - Specifies the divider color between calendar's when `range="true"`.
+ * @cssproperty [--calcite-date-picker-week-header-text-color] - Specifies the week header text color.
+ * @cssproperty [--calcite-date-picker-header-action-background-color] - Specifies the background color of header action's of the component.
+ * @cssproperty [--calcite-date-picker-header-action-background-color-hover] - Specifies the background color of header action's of the component when hovered.
+ * @cssproperty [--calcite-date-picker-header-action-background-color-press] - Specifies the background color of header action's of the component when pressed.
+ * @cssproperty [--calcite-date-picker-header-action-text-color] - Specifies the text color of header action's of the component.
+ * @cssproperty [--calcite-date-picker-header-action-text-color-press] - Specifies the text color of header action's of the component when pressed.
+ * @cssproperty [--calcite-date-picker-year-text-color] - Specifies the text color of year & suffix of the component.
+ * @cssproperty [--calcite-date-picker-month-select-font-size] - Specifies the font size of month select of the component.
+ * @cssproperty [--calcite-date-picker-month-select-text-color] - Specifies the text color of month select of the component.
+ * @cssproperty [--calcite-date-picker-month-select-icon-color] - Specifies the icon color of month select of the component.
+ * @cssproperty [--calcite-date-picker-month-select-icon-color-hover] - Specifies the icon color of month select of the component when hovered.
+ * @cssproperty [--calcite-date-picker-day-background-color] - Specifies the background color of day of the component.
+ * @cssproperty [--calcite-date-picker-day-background-color-hover] - Specifies the background color of day of the component when hovered.
+ * @cssproperty [--calcite-date-picker-day-text-color] - Specifies the text color of day of the component.
+ * @cssproperty [--calcite-date-picker-day-text-color-hover] - Specifies the text color of day of the component when hovered.
+ * @cssproperty [--calcite-date-picker-current-day-text-color] - Specifies the text color of current day of the component.
+ * @cssproperty [--calcite-date-picker-day-background-color-selected] - Specifies the background color of selected day of the component.
+ * @cssproperty [--calcite-date-picker-day-text-color-selected] - Specifies the text color of selected day of the component.
+ * @cssproperty [--calcite-date-picker-day-range-text-color] - Specifies the text color of select day range of the component.
+ * @cssproperty [--calcite-date-picker-day-range-background-color] - Specifies the background color of select day range of the component.
+ * @cssproperty [--calcite-date-picker-day-outside-range-background-color-hover] - Specifies the background color of day's outside current range when hovered.
+ * @cssproperty [--calcite-date-picker-day-outside-range-text-color-hover] - Specifies the text color of day's outside 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";
+  /**
+   * Specifies the number of calendars displayed when `range` is `true`.
+   *
+   * @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 layout of the component.
+   *
+   * @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 monthStyle used by the component.
+   *
+   * @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,10 +1,10 @@
 /*! 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-next.73 */
+v5.0.0-next.75 */
 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";

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

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